@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:#fff; background:#0F6167; }
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: 5000px) {
    .br-pc { display:none; }
}



@media screen and (max-width: 480px) {
    .br-pc { display:block; }
}

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{ display: block; width: 100%; position: fixed; top:0; left:0; z-index: 98; background: rgba(0,0,0,.5); }
header ol{ display: table; width:100%; max-width: 1200px; margin:0 auto; }
header ol li{ display: table-cell; vertical-align: middle; padding:1em .5em; }
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{ display: table-cell; padding:1em 1em 1em 2em; }
	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%; }
}


article#mainv{ background: url("./img/maiv_bg_pc.jpg"); background-size: cover; padding:10vw 0 0 0; background-position: center; background-attachment: fixed; }
article#mainv>dl{ display: block; width: 100%; max-width: 1200px; margin: 0 auto; }
article#mainv>dl dt{padding: 0;}
article#mainv>dl dd{padding: 0;}
article#mainv>dl dt img{ display: block; width: 50%; margin: 2em 0 0 1em;}
article#mainv #cap{ display: block; width: 100%; max-width: 1200px; margin: 0 auto; padding:1em 0 0 0;}
article#mainv #cap img{ width: 75%; }
article#mainv>ol{ display: table; table-layout: fixed; border-spacing: 1em; width: 100%; max-width: 1200px; margin: 0 auto; padding:0 3em; }
article#mainv>ol>li{ display: table-cell; }
article#mainv>ol>li img{ display: block; width: 100%; }
article#mainv #logo{ display: block ;line-height: 2em; text-align: center;}
article#mainv #logo img{ width:100%;}

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



@media screen and (max-width: 480px) {
	article#mainv{ background: url("./img/maiv_bg_smp.jpg"); background-size: cover; background-position: center; }
	article#mainv>dl dt{padding: 0;}
	article#mainv>dl dd{padding: 0;}
	article#mainv>dl dt img{ display: block; width: 80%; text-align: center;}
	article#mainv #cap{ padding-top:14em; }
	article#mainv #cap img{ width: 100%; padding-top: 5em; padding: 1em;}
	article#mainv #logo{ margin-top:2em; }
	article#mainv #logo a{ width:100%; }
	article#mainv .pc{ display: none; }
	article#mainv .smp{ display: block; }
}



article#likethis{ text-align: center;  padding:5em 0; }
article#likethis h2{ background: #fff; color:#0F6167; text-align: center; font-size: 2.8em; line-height: 2.0em; }
article#likethis>ol{ display: inline-block; margin:2em auto; }
article#likethis>ol li{ border: .1em solid #fff; font-size: 2.0em; line-height: 2.5em; position: relative; padding:0 1em 0 3.5em; margin:.3em 0; text-align: left; }
article#likethis>ol li:before{ content: ""; display: inline-block; width: 2.5em; height:2.5em; position: absolute; top:0; left:0;
	background: #fff url("./img/maiv_chk.png") no-repeat; background-size: 70%; background-position: 50%;  }

article#likethis div dl{ max-width:1200px; margin:3em auto 8em auto;  display: block; margin-bottom: -3em;}
article#likethis div dl img{width:50%; }

@media screen and (max-width: 480px) {
	article#likethis{ padding:3em 0; }
	article#likethis h2{ font-size: 1.4em; }
	article#likethis>ol li{ font-size: 1.0em; }
	article#likethis div dl{margin:1em auto 8em auto;  display: block; margin-bottom: -1em;}
	article#likethis div dl img{width:80%; }
}


article#reason{ background: url("./img/color_bg_pc.jpg") no-repeat; background-size: cover; padding:5em 0; }
article#reason h2{ background: #fff; color:#0F6167; text-align: center; font-size: 2.8em; line-height: 2.0em; }
article#reason>div{ display:table; table-layout: fixed; border-spacing: 2em; width: 100%; max-width: 1200px; margin: 0 auto; }
article#reason>div dl{ display: table-cell; }
article#reason>div dt{ font-size: 2.2em; text-align: center; line-height: 4em; }
article#reason>div dd>img{ display: block; width: 80%; margin: 0 auto; }
article#reason>div li{ width: 80%; margin: 0 auto; font-size: 1.4em; }
article#reason>div li img{ display: block; width: 100%; }
article#reason .pc{ display: block; }
article#reason .smp{ display: none; }
@media screen and (max-width: 480px) {
	article#reason{ background: url("./img/color_bg_smp.jpg") no-repeat; background-size: cover;  padding:3em 0; }
	article#reason h2{ font-size: 1.4em; }
	article#reason>div{ display:block; }
	article#reason>div dl{ display:block; }
	article#reason>div dt{ font-size: 1.5em; line-height: 2em; padding-top: 2em; }
	article#reason>div ol{ display:table; table-layout:auto; border-spacing: 1em; width: 100%; padding:0 1em; }
	article#reason>div li{ display: table-cell; width:auto; vertical-align: top; font-size: 1.0em; line-height: 1.8em; }
	article#reason>div li img{ width:35vw; }
	article#reason .pc{ display: none; }
	article#reason .smp{ display: block; }
}


article#pr{ padding:5em 0; }
article#pr h2{ background: #fff; color:#0F6167; text-align: center; font-size: 2.8em; line-height: 2.0em; }
article#pr p{ padding:4em 0; text-align: center; font-size: 1.4em; }
article#pr #youtube{ max-width:1200px; margin:3em auto 8em auto; }
article#pr #youtube dl{ margin-bottom:1em; }
article#pr #youtube dt img{ display: block; width:100%;}
article#pr #youtube dd { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.8);
	 display:none; flex-wrap: wrap; justify-content:center; align-items:center; align-content:center; z-index:80; }
	 article#pr #youtube dd a{ display: block; width: 5em; height:5em; border: 1px solid #fff; position: absolute; top:70px; right:5vw; text-align: center; }
	 article#pr #youtube dd a:before{ content: "X"; color:#fff; font-size: 3em;
	position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
	article#pr #youtube iframe{ width: 56vw; height:31vw; }
	article#pr #results{ width:100%;; max-width:700px; margin:0 auto; }
	article#pr #results div ol{ display: table; border-spacing: 2em 1em; table-layout: fixed; cursor: pointer; }
	article#pr #results div ol:hover{ background:rgba(131, 51, 51, 0.05); }
	article#pr #results div ol li{ display: table-cell; vertical-align: top; }
	article#pr #results div ol li:nth-of-type(1){ width:50%; }
	article#pr #results div ol li img{ display: block; width: 100%; }
	article#pr #results div ol li div{ color:#fff; font-size: 1.8em; text-align: left; margin-bottom: -2em;}
	article#pr #results div ol li p{ color:#fff; font-size: 1.4em; text-align: left;line-height:2em;}
	article#pr div.player { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.8);
		display:none; flex-wrap: wrap; justify-content:center; align-items:center; align-content:center; z-index:80; }
		article#pr div.player a{ display: block; width: 4em; height:4em; border: 1px solid #fff; position: absolute; top:150px; right:15vw; text-align: center;}
		article#pr div.player a:before{ content: "✕"; color:#fff; font-size: 2em;
	   position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }


@media screen and (max-width: 480px) {
	article#pr{ padding:3em 0 1.5em 0; }
	article#pr h2{ font-size: 1.4em; }
	article#pr p{ padding:2em 2em 1em 2em; font-size: 1.0em; text-align: left; }
	article#pr #youtube{ width:95%; margin:3em auto 8em auto; }
	article#pr #youtube iframe{ width: 95vw; height:53vw }
	article#pr #results{ width:95%; }
	article#pr #results div ol li div{ color:#fff; font-size: 1.4em; padding-bottom: 1em; text-align: center; margin-bottom: 0;}
	article#pr #results div ol li p{ color:#fff; font-size: 1.0em; }
	article#pr #results div ol{ display: block;}
	article#pr #results div ol li{ display: block; }
	article#pr #results div ol li:nth-of-type(1){ width:100%; }
	article#pr #results div ol li div{ padding: .5em 0; }
	article#pr div.player { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.8);
	display:none; flex-wrap: wrap; justify-content:center; align-items:center; align-content:center; z-index:80; }
	article#pr div.player a{ display: block; width: 4em; height:4em; border: 1px solid #fff; position: absolute; top:100px; right:0vw; text-align: center;}
	article#pr div.player a:before{ content: "✕"; color:#fff; font-size: 2em;
   position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
}
	
	


article#system{ padding:5em 0; }
article#system h2{ background: #fff; color:#0F6167; text-align: center; font-size: 2.8em; line-height: 2.0em; }
article#system p{font-size: 2em; text-align: left; }
article#system>div{ width:90%; max-width: 1200px; margin: 3em auto 0 auto; }
article#system>div dl{ display: table; width:100%; margin:1em -0.25em; border: 0.2em solid #fff; }
article#system>div dt{ display: table-caption; width:100%; background: #fff; color:#0F6167; font-size: 2em; padding:0.5em 0 0.5em 1em;}
article#system>div dt span{ font-size: 1em; }
article#system>div p span{ font-size: 0.7em; }
article#system>div dt.center{ text-align: center; padding:.8em 0; }
article#system>div dd{ display: table-cell; font-size: 1.4em; padding:0 1em; vertical-align: middle; padding:1em 0 1em 3em;}

article#system>div ul{ max-width: 1200px; display:inline-table; border-collapse:separate; border-spacing:2.6px; justify-content:space-between;}
article#system>div ul li{width:100%; background: #fff; color:#0F6167; font-size: 1.5em; padding: 0.5em;}

article#system img{ max-width:1000px; margin:3em auto 8em auto;  display: block; margin-bottom: -3em;}

@media screen and (max-width: 480px) {
	article#system h2{ font-size: 1.4em; }
	article#system>div{ margin-left: 2em;}
	article#system>div dt{ width:100%; font-size: 1.2em; }
	article#system>div dd{ font-size: 1.0em; padding:1.5em 1em; }

	article#system>div ul{ max-width: 1200px; display:inline-table; border-collapse:separate; border-spacing:2.6px; justify-content:space-between; text-align: center;}
    article#system>div ul li{width:100%; background: #fff; color:#0F6167; font-size: 1em; padding: 0.8em;}

	article#system img{margin:1em auto 8em auto;  display: block; margin-bottom: -1em; max-width:400px}
}




article#contact{ background: url("./img/color_bg_pc.jpg") no-repeat; background-size: cover; padding:5em 0; }
article#contact h2{ background: #fff; color:#0F6167; text-align: center; font-size: 2.8em; line-height: 2.0em; }
article#contact p{ text-align: center; font-size: 1.4em; padding:5em 0; }


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:"任意"; 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:"必須"; 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; }
article#contact div dd textarea{ display:block; width:20em; height:8em; font-size: 1.4em; padding:.1em 1em; border:0; border-radius:.6em; }
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/color_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; }
}