@import url( https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap );




* { font-size :1.0vw;; font-weight: bold; line-height:2.0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0px; }
html { width:100%; min-height: 100%; position: relative; }
body { width:100%;  display:block; margin:0; padding:0;  line-height: 1.25em; min-height: 100%; position : absolute;
	font-family: 'Noto Sans JP', 'YuGothicM', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'Osaka', 'MS PGothic', 'sans-serif';
	 color:#2b2b2b; background:#ffffff; }
body *{ line-height:1.5em; }


@media screen and (min-width: 1200px) {
	* { font-size : 12px; }
}
/*
@media screen and (max-width: 768px) {
	* { font-size : 1.5vw; }
}
*/
@media screen and (max-width: 480px) {
	* { font-size : 3vw; }
}

@media screen and (max-width: 640px) {
    .br-smp { display:none; }
}


li{ list-style-type:none; }
a:hover{ opacity: .8; }
#loader{ display: block;width: 100%; height:100%; position: fixed; top:0; left:0; z-index: 99; background: #fff; }

header{ position: fixed; top:0; left:0; width:100%; background:rgba(0,0,0,0.8); z-index: 90; }
header * { color:#fff; }
header ol{ display: table; width: 100%; }
header ol>li{ display: table-cell; vertical-align: middle; padding:1.4em; }
header h1 img{ display: block; height:3.5vw; max-height:100px;}
header nav{ text-align: right; margin-left: 20em;}
header nav li{ display: inline-block; padding:0 .8em;}

header nav a{ display: inline-block; padding:0 .8em; font-size:1.4em; text-align: center;text-decoration: none;}
header nav a span{font-size: 0.7em; text-align: center; color:#b61f1f; }
header div#nav-toggle{ display:none; }

header ol li img { display: block; height:5.5vw; max-height: 60px; }
header ol li:nth-of-type(2){ padding:0 .5em; }
header ol li:nth-of-type(2) img{ margin:0 0 0 auto; height:7.0vw; max-height: 70px; }
header ol li:nth-of-type(3) img{ margin:0 0 0 auto; }
header ol li .smp{ display: none; }
header ol li .pc{ display: block; }
header>.smp{ display: block; position: fixed; bottom:-30vw; z-index: 98; }

@media screen and (max-width: 480px) {
	header ol>li{ padding:1.0em; }
	header h1 img{ display: block; height:50vw; max-height:42px; }

	header ol li img { display: block; height:8vw; max-height: 60px;}
	header ol li:nth-of-type(2){ padding:1em 2em 1em 1em; }
	header ol li:nth-of-type(3){ display: none; }
	header ol li .smp{ display: block; }
	header ol li .pc{ display: none; }
	header>.smp{ display: block; position: fixed; bottom:3vw; right:4vw; width:50vw; }
	header>.smp img{ display: block; width:100%; }

	header.open nav{flex-flow:column; animation: openmenu .5s ease-in-out both; display:flex;}
	header.open>ol>li>div>a{ background-size: contain; }
	header.open>ol>li a{ color:#fff; }
    header nav li{ line-height: 100px;}
	header>ol>li>nav{ position:fixed; z-index:-2; top:0; left:-65%; width:110%; height:100%; background:rgba(0,0,0,.95); padding:0; overflow:hidden;
		display:none; flex-wrap: wrap; justify-content:center; align-items:center; align-content:center; opacity:1;  }
	header>ol>li>nav>a{ display:block; width:100%; text-align: center; line-height:14vw; font-size:1.4em; }
	header div#nav-toggle{ display:block; position:absolute; top:2vw; right:1vw; width: 12vw; height: 12vw; cursor: pointer; }
	header div#nav-toggle div {position: relative; }
	header div#nav-toggle span {display: block; position: absolute; height: .5vw; width: 7vw; background:#fff; left:2vw; }
	header.transparent div#nav-toggle span { background:#fff; }
	header div#nav-toggle span:nth-of-type(1) {top: 3.5vw; transition: .35s ease-in-out; }
	header div#nav-toggle span:nth-of-type(2) {top: 5.5vw; }
	header div#nav-toggle span:nth-of-type(3) {top: 7.5vw; transition: .35s ease-in-out; }
	header.open div#nav-toggle span{ background:#fff; }
	header.open div#nav-toggle span:nth-of-type(1) {top: 5.5vw; transform: rotate(315deg); }
	header.open div#nav-toggle span:nth-of-type(2) {height: 0;}
	header.open div#nav-toggle span:nth-of-type(3) {top: 5.5vw; transform: rotate(-315deg); }
}

article#mainv{ height:100vh; position:relative; overflow:hidden; }
article#mainv video{ display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; z-index:-1; }
article#mainv #video-wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
  }
  .video-wrapper:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	background-image: radial-gradient(black 20%, transparent 20%),
	  radial-gradient(black 20%, transparent 20%);
	background-size: 6px 6px;
	background-position: 0 0, 3px 3px;
  }
  video {
	position: absolute;
  }
article#mainv video#smp{ display: none; }
article#mainv>dl{ display: block; width: 100%; max-width: 1200px; margin: 0 auto; padding:1em;}
article#mainv>dl dt{ font-size: 3.0em; color:#ffffff; }
article#mainv>dl dd{ font-size: 1.5em; padding:1em 1em 0 1em; color:#ffffff; }
article#mainv #cap{ position: absolute; width:50%; top: 50%; right: 20%; transform: translateX(-50%) translateY(-50%); }
article#mainv #cap img{ width: 100%; 
	animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
    @keyframes zoomIn {0% {transform: scale(0.8);opacity: 0;}
	100% {opacity: 1;transform: scale(1);}
}
 
article#mainv #timer{  background: #fff; color:#BD2222; text-align: center; font-size: 1.5em; line-height: 2.0em; width:100%; position: absolute; bottom:0; }
article#mainv #timer p{ text-align: center; font-size:1.4em; }
article#mainv #day{ font-size:2.5em; }
article#mainv #hour{ font-size:2.5em; }
article#mainv #minute{ font-size:2.5em; }
article#mainv #second{ font-size:2.5em; }



article#mainv .pc{ display: block; }
article#mainv .smp{ display: none; }






@media screen and (max-width: 480px) {
	article#mainv video{ display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; z-index:-1; }
	article#mainv #video-wrapper {
		position: relative;
		width: 100%;
		height: 100vh;
	  }
	  .video-wrapper:after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		background-image: radial-gradient(black 20%, transparent 20%),
		  radial-gradient(black 20%, transparent 20%);
		background-size: 6px 6px;
		background-position: 0 0, 3px 3px;
	  }
	  video {
		position: absolute;
	  }
	#mainvisual video#smp{ display: block; }
	#mainvisual video#pc{ display: none; }
	article#mainv>dl dt{ font-size: 1.3em; text-align: center; }
	article#mainv>dl dd{ font-size: 1.0em; padding:1.5em 2em 0 5em; }
	article#mainv #cap{ position: absolute; width:50%; top: 50%; right: 20%; transform: translateX(-50%) translateY(-50%); }
	article#mainv #cap img{ width: 180%;}
	article#mainv #timer{ text-align: center; padding:0;margin-top:15em; }
	article#mainv #timer p{ text-align: center; font-size:1.0em; }
    article#mainv #day{ font-size:1.5em; }
    article#mainv #hour{ font-size:1.5em; }
    article#mainv #minute{ font-size:1.5em; }
    article#mainv #second{ font-size:1.5em; }
	article#mainv .pc{ display: none; }
	article#mainv .smp{ display: block; }
}



article#about{ text-align: center; }
article#about h2{color:#2b2b2b; text-align: center; font-size: 2.8em; line-height: 2.0em; padding-top: 5em;}
article#about dl.cl_logo { display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#about p{ padding:4em 0; text-align: center; font-size: 1.3em; }
article#about dl.cl_logo img{ display:block; width: 100%; 
	animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
    @keyframes zoomIn {0% {transform: scale(0.8);opacity: 0;}
	100% {opacity: 1;transform: scale(1);}
}
article#about dl.cl_logo img.pc{display: block; }
article#about dl.cl_logo img.smp{ display: none; }

article#about>div{ display:table; table-layout: fixed; border-spacing: 2em; width: 100%; max-width: 1200px; margin: 0 auto; }
article#about>div dl{ display: table-cell; }
article#about>div dt{ font-size: 1.5em; text-align: center; line-height: 1.5em; padding-top: 2em;}
article#about>div dd>img{ display: block; width: 60%; margin: 0 auto; }
article#about>div li{ width: 80%; margin: 0 auto; font-size: 1.1em; padding-top: 2em; text-align: left;}
article#about>div li img{ display: block; width: 100%; }
article#about .pc{ display: block; }
article#about .smp{ display: none; }

article#about dl.item{ display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#about dl.item dt{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; width:50%; }
article#about dl.item dt img{ display:block; width: 100%; }
article#about dl.item dd{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; }
article#about dl.item div.ttl_theme{ font-size: 1.8em; padding:0 0 1em 0; text-align: left;}
/* article#about dl.item div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */
article#about dl.item div.comment{ font-size: 1.4em; text-align: left;line-height: 2em; }
/* article#about dl.item div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */

article#about dl.item_reverse{display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#about dl.item_reverse dt{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; width:50%; }
article#about dl.item_reverse dt img{ display:block; width: 100%; }
article#about dl.item_reverse dd{ display: table-cell; padding:2.5em 1.5em; vertical-align: top; }
article#about dl.item_reverse div.ttl_theme{ font-size: 1.8em; padding:0 0 1em 0; text-align: left;}
/* article#about dl.item2 div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */
article#about dl.item_reverse div.comment{ font-size: 1.4em; text-align: left;line-height: 2em}
/* article#about dl.item2 div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */

@media screen and (max-width: 480px) {
	article#about{ padding:3em 0; }
	article#about h2{ font-size: 1.4em; }
	article#about p{ padding:2em 1em 1em 2em; font-size: 0.9em; text-align: left;  padding-bottom: 5em;}
	article#about dl.cl_logo { display: table; table-layout: fixed; width:70%; max-width:480px; margin: 0 auto; padding-bottom: 8em; padding-top: -3em;}
	article#about dl.cl_logo img.pc{ display: none; }
	article#about dl.cl_logo img.smp{ display: block; }

	article#about>div{ display:block; }
	article#about>div dl{ display:block; }
	article#about>div dt{ font-size: 1.5em; line-height: 1.2em; padding-top: 3em; }
	article#about>div ol{ display:table; table-layout:auto; border-spacing: 1em; width: 100%; padding:0 1em; }
	article#about>div li{ text-align: left; display: table-cell; width:auto; vertical-align: top; font-size: 1.0em; line-height: 1.8em; }
	article#about>div li img{ width:35vw; }

	article#about dl.item{ display: block; margin-bottom: 4em;  }
	article#about dl.item:nth-last-of-type(2){ padding-bottom:2em;}
	article#about dl.item dt{ display: block; padding:1em; width:100%; }
	article#about dl.item dd{ display: block; padding:1em; }
	/* article#about dl.item div.ttl_sub{ padding:.5em 0; } */
	article#about dl.item div.ttl_theme{ font-size: 1.4em; padding:0 0 1em 0; text-align: center;}
    /* article#about dl.item div.ttl_sub{ font-size: 1.4em; padding:1em 0; text-align: left;} */
	article#about dl.item div.comment{ font-size: 1.0em; text-align: left;}

	article#about dl.item_reverse{ display: block; margin-bottom: 4em;  }
	article#about dl.item_reverse:nth-last-of-type(2){ padding-bottom:2em;}
	article#about dl.item_reverse dt{ display: block; padding:1em; width:100%; }
	article#about dl.item_reverse dd{ display: block; padding:1em; }
	/* article#about dl.item div.ttl_sub{ padding:.5em 0; } */
	article#about dl.item_reverse div.ttl_theme{ font-size: 1.4em; padding:0 0 1em 0; text-align: center;}
    /* article#about dl.item div.ttl_sub{ font-size: 1.4em; padding:1em 0; text-align: left;} */
	article#about dl.item_reverse div.comment{ font-size: 1.0em; text-align: left;}
	article#about .pc{ display: none; }
	article#about .smp{ display: block; }
}


article#works{ text-align: center;}
article#works h2{color:#2b2b2b; text-align: center; font-size: 2.8em; line-height: 2.0em; padding-top: 5em;}
article#works dl.cl_logo { display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#works p{ padding:4em 0; text-align: center; font-size: 1.3em; }
article#works dl.cl_logo img{ display:block; width: 100%; 
	animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
    @keyframes zoomIn {0% {transform: scale(0.8);opacity: 0;}
	100% {opacity: 1;transform: scale(1);}
}
article#works dl.cl_logo img.pc{display: block; }
article#works dl.cl_logo img.smp{ display: none; }

article#works>div{ display:table; table-layout: fixed; border-spacing: 2em; width: 100%; max-width: 1200px; margin: 0 auto; }
article#works>div dl{ display: table-cell; }
article#works>div dt{ font-size: 1.5em; text-align: center; line-height: 1.5em; }
article#works>div dd>img{ display: block; width: 30%; margin: 0 auto; padding-bottom: 2em;}
article#works>div li{ width: 80%; margin: 0 auto; font-size: 1.1em; padding-top: 1em; text-align: left;}
article#works>div li img{ display: block; width: 100%; }
article#works .pc{ display: block; }
article#works .smp{ display: none; }

article#works dl.item{ display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#works dl.item dt{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; width:30%; }
article#works dl.item dt img{ display:block; width: 60%; }
article#works dl.item dd{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; }
article#works dl.item div.ttl_theme{ font-size: 1.8em; padding:0 0 1em 0; text-align: left;}
/* article#works dl.item div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */
article#works dl.item div.comment{ font-size: 1.4em; text-align: left;line-height: 2em; }
/* article#works dl.item div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */

article#works dl.item_reverse{display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#works dl.item_reverse dt{ display: table-cell; padding:2.5em 1.5em; vertical-align: middle; width:50%; }
article#works dl.item_reverse dt img{ display:block; width: 100%; }
article#works dl.item_reverse dd{ display: table-cell; padding:2.5em 1.5em; vertical-align: top; }
article#works dl.item_reverse div.ttl_theme{ font-size: 1.8em; padding:0 0 1em 0; text-align: left;}
/* article#works dl.item2 div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */
article#works dl.item_reverse div.comment{ font-size: 1.4em; text-align: left;line-height: 2em}
/* article#works dl.item2 div.ttl_sub{ font-size: 1.8em; padding:1em 0; text-align: left;} */

@media screen and (max-width: 480px) {
	article#works{ padding:3em 0; }
	article#works h2{ font-size: 1.4em; }
	article#works p{ padding:2em 1em 1em 2em; font-size: 0.9em; text-align: left;  padding-bottom: 5em;}
	article#works dl.cl_logo { display: table; table-layout: fixed; width:70%; max-width:480px; margin: 0 auto; padding-bottom: 8em; padding-top: -3em;}
	article#works dl.cl_logo img.pc{ display: none; }
	article#works dl.cl_logo img.smp{ display: block; }

	article#works>div{ display:block; }
	article#works>div dl{ display:block; }
	article#works>div dt{ font-size: 1.5em; line-height: 1.2em; padding-top: 3em; }
	article#works>div ol{ display:table; table-layout:auto; border-spacing: 1em; width: 100%; padding:0 1em; }
	article#works>div li{ text-align: left; display: table-cell; width:auto; vertical-align: top; font-size: 1.0em; line-height: 1.8em; }
	article#works>div li img{ width:80%;}

	article#works dl.item{ display: block; margin-bottom: 4em;  }
	article#works dl.item:nth-last-of-type(2){ padding-bottom:2em;}
	article#works dl.item dt{ display: block; padding:1em; width:100%; }
	article#works dl.item dd{ display: block; padding:1em; }
	article#works dl.item dt img{ display:block; width: 40%; margin-left: 9em;}
	/* article#works dl.item div.ttl_sub{ padding:.5em 0; } */
	article#works dl.item div.ttl_theme{ font-size: 1.4em; padding:0 0 1em 0; text-align: center;}
    /* article#works dl.item div.ttl_sub{ font-size: 1.4em; padding:1em 0; text-align: left;} */
	article#works dl.item div.comment{ font-size: 1.0em; text-align: left;}

	article#works dl.item_reverse{ display: block; margin-bottom: 4em;  }
	article#works dl.item_reverse:nth-last-of-type(2){ padding-bottom:2em;}
	article#works dl.item_reverse dt{ display: block; padding:1em; width:100%; }
	article#works dl.item_reverse dd{ display: block; padding:1em; }
	/* article#works dl.item div.ttl_sub{ padding:.5em 0; } */
	article#works dl.item_reverse div.ttl_theme{ font-size: 1.4em; padding:0 0 1em 0; text-align: center;}
    /* article#works dl.item div.ttl_sub{ font-size: 1.4em; padding:1em 0; text-align: left;} */
	article#works dl.item_reverse div.comment{ font-size: 1.0em; text-align: left;}
	article#works .pc{ display: none; }
	article#works .smp{ display: block; }
}





article#achievements{ text-align: center;}
article#achievements h2{color:#2b2b2b; text-align: center; font-size: 2.8em; line-height: 2.0em; padding-top: 5em;}
article#achievements p{ padding:4em 0; text-align: center; font-size: 1.3em; }
article#achievements>div{display:table; table-layout: fixed; border-spacing: 1em; width: 100%; max-width: 1200px; margin: 0 auto; }
article#achievements>div dl{ display: table-cell; padding: 1em; text-decoration: none;}
article#achievements>div dt{ font-size: 1em; text-align: left; line-height: 1.5em; padding-top: 1em;}
article#achievements>div img{ display: block; width: 100%; margin: 0 auto; 
	width: 100%;
	animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
    @keyframes zoomIn {0% {transform: scale(0.8);opacity: 0;}
	100% {opacity: 1;transform: scale(1);}}
article#achievements>div li{ width: 100%; font-size: 1.1em; padding-top: 1em;}
article#achievements>div dl a{text-decoration: none; color:#2b2b2b;}
article#achievements .pc{ display: block; }
article#achievements .smp{ display: none; }


@media screen and (max-width: 480px) {
	article#achievements{ padding:3em 0; }
	article#achievements h2{ font-size: 1.4em; }
	article#achievements p{ padding:2em 1em 1em 2em; font-size: 0.9em; text-align: left;  padding-bottom: 5em;}
	article#achievements .pc{ display: none; }
	article#achievements .smp{ display: block; }
	article#achievements>div{display:table; table-layout: fixed; border-spacing: 0.2em; width: 100%; margin: 0 auto; }
	article#achievements>div dl{ display: table-cell; padding: 1em; text-decoration: none;}
	article#achievements>div img{ display: block; width: 80%; margin: 0 auto; }
	article#achievements>div dt{ font-size: 0.8em; text-align: left; line-height: 1.5em; }
article#achievements>div img{ display: block; width: 80%; margin: 0 auto; }
article#achievements>div li{ width: 100%; font-size: 0.6em;}

}


article#achievements2{ text-align: center;}
article#achievements2 h2{color:#2b2b2b; text-align: center; font-size: 2.8em; line-height: 2.0em; padding-top: 5em;}
article#achievements2 p{ padding:4em 0; text-align: center; font-size: 1.3em; }
article#achievements2>div{display:table; table-layout: fixed; border-spacing: 1em; width: 100%; max-width: 1200px; margin: 0 auto; }
article#achievements2>div dl{ display: table-cell; padding: 1em; text-decoration: none;}
article#achievements2>div dt{ font-size: 1em; text-align: left; line-height: 1.5em; padding-top: 1em;}
article#achievements2>div img{ display: block; width: 100%; margin: 0 auto; 
	width: 100%;
	animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
    @keyframes zoomIn {0% {transform: scale(0.8);opacity: 0;}
	100% {opacity: 1;transform: scale(1);}}
article#achievements2>div li{ width: 100%; font-size: 1.1em; padding-top: 1em;}
article#achievements2>div dl a{text-decoration: none; color:#2b2b2b;}


@media screen and (max-width: 480px) {
	article#achievements2{ padding:3em 0; }
	article#achievements2 h2{ font-size: 1.4em; }
	article#achievements2 p{ padding:2em 1em 1em 2em; font-size: 0.9em; text-align: left;  padding-bottom: 5em;}
	article#achievements2>div{display:table; table-layout: fixed; border-spacing: 0.2em; width: 100%; margin: 0 auto; }
	article#achievements2>div dl{ display: table-cell; padding: 0.1em; text-decoration: none;}
	article#achievements2>div img{ display: block; width: 80%; margin: 0 auto; }
	article#achievements2>div dt{ font-size: 0.4em; text-align: left; line-height: 1.5em; }
article#achievements2>div img{ display: block; width: 80%; margin: 0 auto; }
article#achievements2>div li{ width: 100%; font-size: 0.5em;}

}
	








article#company{ text-align: center;}
article#company h2{color:#2b2b2b; text-align: center; font-size: 2.8em; line-height: 2.0em; padding-top: 5em;}
article#company p{ padding:4em 0; text-align: center; font-size: 1.3em; }
article#company dd iframe{display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }
article#company div {display: table; table-layout: fixed; width:100%; max-width:1200px; margin: 0 auto; }

.table_design04 th { font-size: 1.3em; border-right: 2px solid #4d9bc1; font-weight: bold;padding-right: 5em; text-align: right; width: 50%;}
.table_design04 td {padding: 1em; font-size: 1.3em; text-align: left; }
.pc{ display: block; padding-top: 5em;}
.smp{ display: none; }

@media screen and (max-width: 480px) {
	article#company{ padding:3em 0; }
	article#company h2{ font-size: 1.4em; }
	article#company p{ padding:2em 1em 1em 2em; font-size: 0.9em; text-align: left;  padding-bottom: 5em;}
	.table_design04 th { font-size: 0.9em;border-right: 2px solid #4d9bc1;font-weight: bold;padding-right: 1em; text-align: center;width: 20%;}
	.table_design04 td {padding: 1em; font-size: 0.9em; text-align: left}

	.pc{ display: none; }
	.smp{ display: block; }

}






article#contact{text-align: center;}
article#contact h2{color:#2b2b2b; text-align: center; font-size: 2.8em; line-height: 2.0em; padding-top: 5em;}
article#contact p{ padding:4em 0; text-align: center; font-size: 1.3em; }
article#contact h3{ padding:4em 0; text-align: center; font-size: 1.3em; }


article#contact div{ display: table; margin:0 auto; }
article#contact div dl{ display: table-row; }
article#contact div dt{ display: table-cell; vertical-align: top; text-align: right; white-space:nowrap;  padding:.8em 4em .8em .5em; font-size: 1.4em; position: relative; }
article#contact div dt:after{ content:"任意";color:#ffffff; background:#56A41C; box-shadow: .2em .2em .5em rgba(0, 0, 0, .4);
	display: block; position: absolute; top: 2.0em; right:1em; font-size:.5em; line-height: 2em; padding:.1em 1em; }
article#contact div dt.need:after{ content:"必須"; color:#ffffff; background:#D64545; }
article#contact div dd{ display: table-cell; vertical-align: top; padding:.8em 1em; }
article#contact div dd input{ display:block; width:20em; font-size: 1.4em; padding:.2em 1em; border:0; border-radius:.6em;  background:#ececec; }
article#contact div dd textarea{ display:block; width:20em; height:8em; font-size: 1.4em; padding:.1em 1em; border:0; border-radius:.6em; background:#ececec; }
article#contact div dd a img{ display: block; margin:0 0 0 auto; width:40%; }
article#contact footer{ text-align: center; margin-top:5em; }
@media screen and (max-width: 480px) {
	article#contact{ background: url("./img/cantact_bg_smp.jpg") no-repeat; background-size: cover; padding:5em 0 3em 0; }
	article#contact h2{ font-size: 1.4em; }
	article#contact p{ font-size: 1.0em; padding:3em 0;}
	article#contact div{ width:100%; table-layout: fixed; }
	article#contact div dt{  width:40%; padding:.8em 4em .8em .5em; font-size: 1.0em; }
	article#contact div dd{ width:60%; }
	article#contact div dd input{ display:block; width:100%; font-size: 16px; padding:0 1em; border-radius:.6em; }
	article#contact div dd textarea{ display:block; width:100%; height:5em; font-size: 16px; padding:0 1em; border-radius:.6em; }
	article#contact div dd a img{ width:50%; }
	article#contact footer{ font-size: .8em; }
}




article#pp{ text-align: center; }
article#pp h1{color:#2b2b2b;  font-size: 2.8em; line-height: 2.0em; padding-top: 5em;}
@media screen and (max-width: 480px) {
article#pp h1{color:#2b2b2b;  font-size: 1.2em; line-height: 2.0em; padding-top: 5em;}
}


	
.container {max-width: 950px; margin: 50px auto;background: #ffffff; padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
h1 {color: #333; font-size: 1.6em;}
h2 {color: #333; font-size: 1.6em; margin-top: 2em; text-align: left;}
p {color: #555;font-size: 1.2em; text-align: left;}
ul {color: #555;font-size: 1.2em; padding-left: 20px; margin-top: 2em; text-align: left;}



@media screen and (max-width: 480px) {
h1, h2 {color: #333; font-size: 1.8em;}
p {color: #555;font-size: 1.0em;}
ul {color: #555;font-size: 1.2em;}
ul {padding-left: 20px;}

}



/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    border: 1px solid #414141;/* ボーダーの色と太さ */
    padding: 10px 30px;
  text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#414141;
}

.btn:hover span{
  color:#414141;
}

/*== 背景が流れる（中央から外） */

.bgcenterout:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background: #d35b0b;
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 0);
  transform-origin:center;
}

/*hoverした際の形状*/
.bgcenterout:hover:before{
  transform:scale(1, 1);
}




.button a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 230px;
    padding: 10px 0px 10px 25px;
    font-family: "Noto Sans Japanese";
    line-height: 1.8;
    text-decoration: none;
    color: #333;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.button a:before, .button a:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}
.button a:before {
  width: 0.5rem;
  height: 0.5rem;
  left: 1.1rem;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}
.button a:after {
  left: 0;
  background: #eee;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 4rem;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.button a span {
  position: relative;
  transition: all 0.3s;
  z-index: 3;
}

.button a:hover span {
  color: #fff;
}
.button a:hover:before {
  left: 2.5rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}
.button a:hover:after {
  right: 0;
  width: 100%;
  background: #333;
}