@charset "utf-8";

    html {
    	font-size: 100%;
    	background: #fff;
    }

    body {
    	width: 100%;
    	overflow-x: hidden;
    	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    	font-size: 1.125rem;
    	line-height: 2.5em;
    	font-feature-settings: "palt";
    	letter-spacing: 0.1rem;
    }

    .sp {
    	display: none;
    }

    figure {
    	text-align: center;
    }

    a {
    	text-decoration: none;
    	color: inherit;
    }

    h2,
    h3,
    p {
    	text-align: center;
    }

    h3 {
    	font-size: 1.75rem;
    }

    .bold {
    	font-weight: 600;
    }

    /*fv-----------------------------------------------------------*/
    #fv {
    	background: url(../images/fv_bg.jpg);
    	background-repeat: no-repeat;
    	background-position: top center;
    	background-size: cover;
    	height: 900px;
    }

    #fv .container {
    	position: relative;
    	display: block;
    	max-width: 1780px;
    	margin: 0 auto;
    }

    #fv header {
    	display: flex;
    	align-items: flex-start;
    	justify-content: space-between;
    }

    #fv header h1 {
    	z-index: 1;
    }

    #fv header nav ul {
    	position: relative;
    	display: flex;
    	align-items: center;
    	top: 80px;
    }

    #fv header nav ul:before {
    	content: "";
    	position: absolute;
    	background-color: #fff;
    	width: 800px;
    	height: 100px;
    	top: -42px;
    	right: -15%;
    }

    #fv header nav li {
    	letter-spacing: 0;
    	font-weight: 500;
    }

    #fv header nav li a {
    	position: relative;
    	margin-left: 4rem;
    }

    #fv header nav li:first-of-type a {
    	margin-left: 0;
    }

    #fv header nav li:last-of-type a {
    	margin-right: 2rem;
    }

    #fv header nav li a:before {
    	font-size: 1.53rem;
    	position: absolute;
    	top: -2.2rem;
    }

    #fv header nav li:nth-of-type(1) a:before {
    	content: "Message";
    	left: 8%;
    }

    #fv header nav li:nth-of-type(2) a:before {
    	content: "Works";
    	left: 3%;
    }

    #fv header nav li:nth-of-type(3) a:before {
    	content: "Access";
    	left: -9%;
    }

    #fv header nav li:nth-of-type(4) a:before {
    	content: "Contact";
    	left: 10%;
    }

    /*humberger非表示-------------------------------------*/

    .navToggle a {
    	display: none;
    }


    /*nav hover 下線--------------------------------------------------------------------*/
    #fv header nav li a:after {
    	transform: scaleX(0);
    	transform-origin: bottom right;
    }

    #fv header nav li a:hover:after {
    	transform: scaleX(1);
    	transform-origin: bottom left;
    }

    #fv header nav li a:after {
    	content: " ";
    	display: block;
    	position: absolute;
    	top: 1.6rem;
    	right: 0;
    	left: 0;
    	height: 2px;
    	background-color: #303030;
    	transition: transform .3s ease;
    }


    #fv .fv_catch {
    	position: absolute;
    	bottom: -720px;
    	left: 0;
    }

    /*message-----------------------------------------------------*/

    #message {
    	background: url(../images/box01_bg.jpg) no-repeat;
    	background-position: top center;
    	background-size: cover;
    	margin-bottom: 300px;
    	padding: 220px 0;
    }

    #message .container {
    	width: 1080px;
    	margin: 0 auto;
    	background-color: #fff;
    	box-shadow: 2px 2px 5px rgb(0 0 0 / 20%);
    	padding: 130px 300px;
    	box-sizing: border-box;
    }

    #message .container h2,
    #message .container p:first-of-type {
    	margin-bottom: 90px;
    }

    #message .container p {
    	font-size: 1.5rem;
    }

    /*works------------------------------------------------------*/

    #works {
    	position: relative;
    	margin-bottom: 300px;
    }

    #works:before {
    	content: "";
    	position: absolute;
    	display: block;
    	z-index: -1;
    	background-image: url(../images/box02_bg.jpg);
    	background-repeat: no-repeat;
    	background-size: cover;
    	width: 100%;
    	height: 100%;
    	top: -20%;
    	left: -30%;
    }

    #works .container {
    	width: 1080px;
    	margin: 0 auto;
    }

    #works h2 {
    	margin-bottom: 50px;
    }

    #works .container > p {
    	margin-bottom: 100px;
    	color: #fff;
    }

    #works .inner {
    	display: flex;
    	align-items: flex-start;
    	justify-content: space-between;
    }

    #works .inner:first-of-type {
    	margin-bottom: 200px;
    }

    #works .box {
    	position: relative;
    }
    #works .box p {
    	position: absolute;
    	bottom: -30px;
    	right: 0;
    	display: inline-block;
    	width: 350px;
    	background-color: #fff;
    	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    	text-align: left;
    	padding: 10px 0 10px 60px;
    	box-sizing: border-box;
    	align-items: center;
    	font-weight: 600;
    }

    #works .box p:after {
    	transform: scaleX(1);
    	transform-origin: bottom left;
    }


    #works .inner a:hover p:after {
    	transform: scaleX(0);
    	transform-origin: bottom right;
    }

    #works .inner .box:nth-of-type(2):hover p:after {
    	transform: scaleX(0);
    	transform-origin: bottom right;
    }

    #works .box p:after {
    	content: "";
    	width: 50px;
    	height: 2px;
    	background-color: #000;
    	position: absolute;
    	top: 50%;
    	right: 0;
    	transition: transform .3s ease;
    }


    /*access------------------------------------------------------*/
    #access,
    #contact {
    	position: relative;
    }



    #access:before {
    	content: "";
    	position: absolute;
    	display: block;
    	z-index: -1;
    	background-image: url(../images/box03_bg.jpg);
    	background-repeat: no-repeat;
    	background-size: cover;
    	width: 100%;
    	height: 100%;
    	top: -20%;
    	right: -25%;
    }

    /*map----------------------------------------------------*/

    #map {
    	margin: 90px 0 180px;
    }

    /*company---------------------------------------------------*/

    #company {
    	position: relative;
    	margin-bottom: 200px;
    	padding-bottom: 250px;
    }

    #company:before {
    	content: "";
    	position: absolute;
    	display: block;
    	z-index: -1;
    	background-image: url(../images/box04_bg.jpg);
    	background-repeat: no-repeat;
    	background-size: cover;
    	width: 40%;
    	height: 100%;
    	top: -10%;
    	left: -8%
    }

    #company .container {
    	width: 1080px;
    	margin: 0 auto;
    }

    #company .container h2 {
    	margin-bottom: 100px;
    }

    #company .container table {
    	width: 100%;
    	margin: 0 auto;
    }

    #company .container table tr {
    	border-bottom: 1px solid #000;

    }

    #company .container table th,
    #company .container table td {
    	width: calc(100%/2);
    	padding-left: 6%;
    	padding-top: 30px;
    	padding-bottom: 20px;
    	/*    	height: 50px;*/
    	vertical-align: middle;
    	line-height: 1.72em;
    }

    #company .container table th {
    	padding-left: 30%;
    }

    /*contact------------------------------------------------------*/

    #contact:before {
    	content: "";
    	position: absolute;
    	display: block;
    	z-index: -1;
    	background-image: url(../images/box05_bg.jpg);
    	background-repeat: no-repeat;
    	background-size: cover;
    	width: 95%;
    	height: 95%;
    	top: -12%;
    	right: -35%;
    }

    #contact .container {
    	width: 1080px;
    	margin: 0 auto;
    }

    #contact .container h2 {
    	margin-bottom: 50px;
    }

    #contact .container > p {
    	margin-bottom: 100px;
    }

    #contact .contact_num {
    	width: 960px;
    	margin: 0 auto 100px;
    	;
    	padding: 80px 50px;
    	box-sizing: border-box;
    	background-color: #fff;
    }

    #contact .contact_num h3 {
    	margin-bottom: 80px;
    }

    #contact .contact_num ul {
    	display: flex;
    	align-items: flex-start;
    	justify-content: space-between;
    }

    #contact .contact_num ul li {
    	padding-left: 2.1rem;
    	/*    	text-indent: -2.1rem;*/
    }

    #contact .contact_num ul .tel,
    #contact .contact_num ul .fax {
    	position: relative;
    	font-size: 1.875rem;
    	color: #f25872;
    	font-weight: 600;
    }


    #contact .contact_num ul .tel:before,
    #contact .contact_num ul .fax:before {
    	content: "";
    	position: absolute;
    	width: 2rem;
    	height: 2rem;
    	background-image: url(../images/box05_icon_tel.png);
    	background-repeat: no-repeat;
    	background-size: contain;
    	top: 0;
    	left: -2rem;
    }

    #contact .contact_num ul .fax:before {
    	background-image: url(../images/box05_icon_fax.png);
    	left: -2.7rem;
    }

    #contact .contact_num ul .tel span,
    #contact .contact_num ul .fax span {
    	font-size: 2.375rem;
    }

    /*contact > form------------------------------*/
    .form {
    	width: 900px;
    	margin: 0 auto;
    	text-align: center;
    }

    input {
    	margin-bottom: 55px;
    }

    textarea {
    	height: 200px;
    	margin-bottom: 10px;
    }

    input:first-of-type {
    	margin-top: 35px;
    }

    input,
    textarea {
    	font-size: 1.125rem;
    	padding: 15px 10px 10px;
    	border: 2px solid #b4b4b4;
    	background-color: #fff;
    	color: #303030;
    	background-clip: padding-box;
    	box-sizing: border-box;
    	width: 100%;
    	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    }

    button,
    input[type="submit"] {
    	margin-top: 15px;
    	margin-bottom: 25px;
    	background-color: #f1f571;
    	border: none;
    	padding: 12px 45px;
    	display: inline-block;
    	cursor: pointer;
    	width: 250px;
    	font-size: 1.25rem;
    	letter-spacing: 0.38em;
    	text-align: center;
    	margin: 0 1em;
    }


    input[type="button"] {
    	margin-top: 15px;
    	margin-bottom: 25px;
    	background-color: #ddd;
    	border: none;
    	padding: 12px 45px;
    	display: inline-block;
    	cursor: pointer;
    	width: 250px;
    	font-size: 1.25rem;
    	letter-spacing: 0.38em;
    	text-align: center;
    	margin: 0 1em;
    }

    button:hover,
    .button:hover {
    	opacity: 0.6;
    	transition: .2s;
    }

    label.error {
    	font-size: 1em;
    	display: block;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	background-color: #d89c9c;
    	width: 80%;
    	margin: auto;
    	color: #FAFAFA;
    }

    .formTable {
    	margin: 0 0 10%;
    }


    .formTable th {
    	width: 30%;
    }

    .formTable td {
    	width: 70%;
    }

    /*footer---------------------------------------------------*/

    footer {
    	margin-top: 150px;
    	background: #f6f6f6;
    }

    footer .container {
    	width: 640px;
    	margin: 0 auto;
    	padding: 50px 0 90px;
    	box-sizing: border-box;
    	font-size: 1rem;
    }

    footer .container nav ul {
    	display: flex;
    	align-items: flex-start;
    	justify-content: space-between;
    }

    /*pagetop-----------------------------------------------------------*/

    /*
    #page_top {
    	position: fixed; //表示位置固定
    	right: 30px; //右から30pxの位置
    	bottom: 40px; //下から40pxの位置
    	background: #ff6600; //ボタンの背景色
    	opacity: 0.8; //少し透明にする
    	border-radius: 50%; //円形にする
    }

    #page_top a {
    	position: relative; //アイコンを表示する際の基準の位置
    	display: block; //block要素に変更
    	width: 60px; //円の幅を指定
    	height: 60px; //円の高さを指定
    	text-decoration: none; //不要な装飾をしない
    }

    #page_top a::before {
    	position: absolute; //アイコンの位置指定
    	top: -5px; //アイコンの位置指定
    	bottom: 0; //アイコンの位置指定
    	right: 0; //アイコンの位置指定
    	left: 0; //アイコンの位置指定
    	font-family: 'Font Awesome 5 Free'; //Font Awesomeを使用
    	font-weight: 900; //アイコンを太く表示
    	content: '\f106'; //アイコンの種類を指定
    	font-size: 30px; //アイコンのサイズ
    	color: #fff; //アイコンの色
    	width: 25px; //アイコンの幅を指定
    	height: 25px; //アイコンの高さを指定
    	margin: auto; //アイコンを中心に表示
    	text-align: center; //アイコンを中心に表示
    }
*/
    #page_top {
    	width: 3.6rem;
    	height: 3.6rem;
    	position: fixed;
    	right: 10%;
    	bottom: 10%;
    	background: #303030;
    	opacity: 0.6;
    }

    #page_top a {
    	position: relative;
    	display: block;
    	/*
    	width: 50px;
    	height: 50px;
*/
    	text-decoration: none;
    }

    #page_top a::before {
    	content: "▲";
    	font-size: 1.8rem;
    	color: #fff;
    	position: absolute;
    	width: 25px;
    	height: 25px;
    	top: 0;
    	bottom: 0;
    	right: 0;
    	left: 0;
    	margin: 0 auto;
    	text-align: center;
    }

    /*scroll-fadein----------------------------------------------------*/
    .scrollanime {
    	opacity: 0;
    }

    .fadeInDown {
    	animation-name: fadeInDown;
    	animation-duration: .8s;
    	animation-fill-mode: forwards;
    }

    @keyframes fadeInDown {
    	0% {
    		opacity: 0;
    	}

    	100% {
    		opacity: 1;
    		transform: translate(0);
    	}
    }


    .downup {
    	transform: translateY(100px);
    }

    /*スマホ
------------------------------*/

    @media screen and (max-width: 900px) {
    	body {
    		line-height: 2em;
    		overflow-x: hidden;
    	}

    	.pc {
    		display: none;
    	}

    	.sp {
    		display: block;
    	}

    	/*fv===================================================*/
    	#fv {
    		background-position: top 0 left 66%;
    		height: 600px;
    	}

    	#fv .container {
    		max-width: auto;
    		width: 100%;
    		height: 100%;
    		margin: 0 auto;
    	}

    	#fv header h1 {
    		width: 35%;
    	}

    	#fv header nav ul {
    		position: static;
    		display: block;
    		top: 0;
    	}

    	#fv header nav ul:before {
    		content: none;
    	}

    	#fv header nav li {
    		letter-spacing: 0;
    		font-weight: 500;
    	}

    	#fv header nav li a {
    		margin-left: 0;
    	}

    	#fv header nav li:first-of-type a {
    		margin-left: 0;
    	}

    	#fv header nav li:last-of-type a {
    		margin-right: 0;
    	}

    	#fv header nav li a:before {
    		content: none;
    		top: -.2rem;
    	}

    	#fv header nav li:nth-of-type(1) a:before {
    		left: 0;
    		right: 0;
    	}

    	#fv header nav li:nth-of-type(2) a:before {
    		left: 0;
    		right: 0;
    	}

    	#fv header nav li:nth-of-type(3) a:before {
    		left: 0;
    		right: 0;
    	}

    	#fv header nav li:nth-of-type(4) a:before {
    		left: 0;
    		right: 0;
    	}

    	/*    	nav hanberger */

    	nav.globalMenuSp {
    		position: fixed;
    		padding-top: 13%;
    		z-index: 2;
    		top: -100%;
    		left: 0;
    		background: #fff;
    		color: #000;
    		text-align: center;
    		transition: all 0.6s;
    		width: 100%;
    		height: 100%;
    		box-sizing: border-box;
    	}

    	nav.globalMenuSp p {
    		display: block;
    		width: 40%;
    		margin: 0 auto;
    		margin-bottom: 10%;
    	}

    	nav.globalMenuSp ul {
    		display: block;
    		background: #fff;
    		margin: 0 auto;
    		padding: 0;
    		width: 100%;
    	}

    	nav.globalMenuSp ul li {
    		font-size: 1.1em;
    		list-style-type: none;
    		padding: 0;
    		width: 40%;
    		border-bottom: 1px solid #303030;
    		margin: 0 auto;
    	}

    	nav.globalMenuSp ul li a {
    		display: block;
    		color: #000;
    		padding: 1em 0 .8em;
    		margin-top: 1.5em;
    	}


    	nav.globalMenuSp.active {
    		top: 0%;
    	}

    	.navToggle {
    		display: block;
    		position: fixed;
    		right: 7%;
    		top: 3%;
    		width: 42px;
    		height: 51px;
    		cursor: pointer;
    		z-index: 3;
    		text-align: center;

    	}

    	.navToggle span {
    		display: block;
    		position: absolute;
    		/* .navToggleに対して */
    		width: 40px;
    		border-bottom: solid 3px #cbcbcb;
    		-webkit-transition: .35s ease-in-out;
    		-moz-transition: .35s ease-in-out;
    		transition: .35s ease-in-out;
    		left: 6px;
    	}

    	.navToggle span:nth-child(1) {
    		top: 9px;
    	}

    	.navToggle span:nth-child(2) {
    		top: 22px;
    	}

    	.navToggle span:nth-child(3) {
    		top: 36px;
    	}

    	.navToggle.active span:nth-child(1) {
    		top: 18px;
    		left: 6px;
    		-webkit-transform: rotate(-45deg);
    		-moz-transform: rotate(-45deg);
    		transform: rotate(-45deg);
    	}

    	.navToggle.active span:nth-child(2),
    	.navToggle.active span:nth-child(3) {
    		top: 18px;
    		-webkit-transform: rotate(45deg);
    		-moz-transform: rotate(45deg);
    		transform: rotate(45deg);
    	}

    	#fv header nav li a:after {
    		content: none;
    	}

    	#fv .fv_catch {
    		width: 95%;
    		bottom: 2%;
    		left: 2%;
    	}

    	/*message======================================================*/

    	#message {
    		margin-bottom: 30%;
    		padding: 25% 0;
    	}

    	#message .container {
    		width: 85%;
    		padding: 20% 5%;
    		box-sizing: border-box;
    	}

    	#message .container h2,
    	#message .container p:first-of-type {
    		width: 60% margin: 0 auto 20%;
    	}

    	#message .container p {
    		font-size: 1.2rem;
    	}

    	/*		works=========================================*/
    	#works {
    		margin-bottom: 55%;
    	}

    	#works:before {
    		background-image: url(../images/sp_box02_bg.jpg);
    		top: -10%;
    		left: -15%;
    	}

    	#works .container {
    		width: 85%;
    	}

    	#works h2 {
    		width: 60% margin: 0 auto;
    		margin-bottom: 15%;
    	}

    	#works .container > p {
    		margin-bottom: 20%;
    	}

    	#works .inner {
    		display: block;
    	}

    	#works .inner:first-of-type {
    		margin-bottom: 30%;
    	}

    	#works .inner .box:first-of-type {
    		margin-bottom: 30%;
    	}

    	#works .box p {
    		bottom: -16%;
    		right: 0;
    		width: 80%;
    		padding: 3% 0 3% 15%;
    	}

    	#works .inner a:active .box p:after {
    		transform: scaleX(0);
    		transform-origin: bottom right;
    	}

    	#works .box p:after {
    		width: 15%;
    	}

    	/*		access================================================*/
    	#access:before {
    		top: -12%;
    		right: -15%;
    		right: 0;
    	}

    	#access h2 {
    		width: 60% margin: 0 auto;
    	}

    	#map {
    		margin: 15% auto 30%;
    	}

    	/*company==========================================*/

    	#company {
    		position: relative;
    		margin-bottom: 20%;
    		padding-bottom: 40%;
    	}

    	#company:before {
    		width: 40%;
    		height: 100%;
    		top: -10%;
    		left: -8%
    	}

    	#company .container {
    		width: 85%;
    	}

    	#company .container h2 {
    		width: 60%;
    		margin: 0 auto 15%;
    	}

    	#company .container table th,
    	#company .container table td {
    		padding-top: 10%;
    		padding-bottom: 6%;
    	}

    	#company .container table th {
    		width: 38%;
    		padding-left: 8%;
    	}

    	#company .container table td {
    		width: 62%;
    		padding-left: 5%;
    	}

    	/*contact===============================================*/

    	#contact:before {
    		top: -6%;
    		right: 0;
    	}

    	#contact .container {
    		width: 85%;
    	}

    	#contact .container h2 {
    		width: 60% margin: 0 auto;
    		margin-bottom: 15%;
    	}

    	#contact .container > p {
    		margin-bottom: 20%;
    	}

    	#contact .contact_num {
    		width: 100%;
    		margin: 0 auto 25%;
    		padding: 15% 5% 20%;
    	}

    	#contact .contact_num h3 {
    		margin-bottom: 15%;
    	}

    	#contact .contact_num ul {
    		display: block;
    	}

    	#contact .contact_num ul li {
    		padding-left: 0;
    		text-align: center;
    		line-height: 2.5em;
    	}

    	#contact .contact_num ul li:first-of-type {
    		margin-bottom: 15%;
    	}


    	#contact .contact_num ul .tel:before,
    	#contact .contact_num ul .fax:before {
    		top: 0;
    		left: -2rem;
    	}

    	#contact .contact_num ul .fax:before {
    		background-image: url(../images/box05_icon_fax.png);
    		left: -2.7rem;
    	}

    	#contact .contact_num ul .tel span,
    	#contact .contact_num ul .fax span {
    		font-size: 2.375rem;
    	}

    	/*contact > form------------------------------*/
    	.form {
    		width: 95%;
    	}

    	input {
    		margin-bottom: 10%;
    	}

    	textarea {
    		height: 10rem;
    		margin-bottom: 3%;
    	}

    	input:first-of-type {
    		margin-top: 10%;
    	}

    	input,
    	textarea {
    		padding: 5% 3% 3%;
    	}

    	button {
    		margin-top: 5%;
    		margin-bottom: 8%;
    		padding: 4% 15%;
    		width: 80%;
    		letter-spacing: 0.8em;
    	}

    	/*footer---------------------------------------------------*/

    	footer {
    		margin-top: 20%;
    	}

    	footer .container {
    		width: 85%;
    		padding: 15% 0 15%;
    		font-size: 1rem;
    	}

    	footer .container nav ul {
    		display: block;
    		margin-bottom: 15%;
    	}

    	footer .container nav ul li {
    		border-bottom: 1px solid #b1b1b1;
    	}

    	footer .container nav ul li a {
    		display: block;
    		text-align: center;
    		padding: 6% 0 4%;
    		box-sizing: border-box;
    		width: 100%;
    		margin: 0 auto;
    	}
    }