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


/* HTMLのベース指定部分 */
* { 
	font-size :16px; line-height:2.0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0px; letter-spacing:.1em;
	font-family: 'Noto Sans JP', sans-serif, 'YuGothicM', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'Osaka', 'MS PGothic', 'sans-serif'; font-weight:100; user-select: none;
}
html { }
body { display:block; margin:0; padding:0px; color:#444; line-height: 1.25em; display: flex; flex-direction: column; min-height: 100vh; }
@media screen and (max-width: 768px) {
	* { font-size : 1.8vw; }
	*.pc{ display:none; }
}
@media screen and (max-width: 480px) {
	* { font-size : 4vw; }
	*.pc{ display:none; }
}
a { color:#55f; text-decoration:none; cursor:pointer; }
dl, dt, dd, ul, ol, li, div, h1, h2, h3, h4, h5, h6, p { padding:0; margin:0; font-weight:normal; }
li{ list-style-type:none; }
hr{ clear:both; border:0; margin:0; }
img{vertical-align:middle;}
h1{font-size: 20px;}
button, label{cursor:pointer;}
button:hover, label:hover{ opacity:.8; }
th{ font-weight:normal; }
input, textarea, select { border:solid 1px #555; }
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
	br{ line-height:1px; }
}


#loader{ display:block; position: fixed; width:100%; height:100%; top:0; left:0; z-index:99; background:#333; }

header{ display:none; position: fixed; width:100%; top:0; left:0; z-index:98; background:rgba( 0, 0, 0, .9 ); text-align: center; padding:1em 0; } 
header a{ display:inline-block; vertical-align: bottom; background:url("./img/logo_jp_wh.png") center center no-repeat; background-size: contain; height:2em; }
header a img{ display: block; opacity:0; height:4em; }
@media screen and (max-width: 480px) {}

footer{ background:#222; text-align: center; padding:2em 0 0 0; margin-top: auto; }
footer *{ color:#fff; }
footer>div{ display: block; margin:5em auto; }
footer>div>img{ display: block; width:30%; max-width:180px; margin:0 auto; }
@media screen and (max-width: 480px) {}


/* TOP */
#top_mainvisual{ width:100%; height:100vh; min-height:800px; }
#top_mainvisual>section{ height:100%; display:flex; flex-wrap: wrap; justify-content: center; align-items:center; align-content:center; background:#222; position: relative; overflow: hidden; }
#top_mainvisual>section:before{ content:""; display: block; position:absolute; top:0; left:0; width: 100%; height:100%; background: rgba(0,0,0,.6); z-index: 1;  }

#top_mainvisual>section>dl{ width:100%; text-align: center; color:#fff; position: relative; z-index: 2; }
#top_mainvisual>section>dl dt{ font-size:1.5em; }
#top_mainvisual>section>dl img{ display:inline-block; width:50%; max-width:300px; }

#top_mainvisual .visual{ position:absolute; width:100%; height:100%; display:none; }
#top_mainvisual .visual.zoomin_start{ transform: scale(1); }
#top_mainvisual .visual.zoomin_end{ transform: scale(1.1); transition: transform 10s; }
#top_mainvisual .visual.zoomout_start{ transform: scale(1.1); }
#top_mainvisual .visual.zoomout_end{ transform: scale(1); transition: transform 10s; }
#top_mainvisual .visual.moveleft_start{ width:calc( 100% + 100px ); right:-100px; }
#top_mainvisual .visual.moveleft_end{ width:calc( 100% + 100px ); right:0px; transition: right 10s; }
#top_mainvisual .visual.moveright_start{ width:calc( 100% + 100px ); left:-100px; }
#top_mainvisual .visual.moveright_end{ width:calc( 100% + 100px ); left:0px; transition: left 10s; }
#top_mainvisual .visual.movetop_start{ height:calc( 100% + 100px ); bottom:-100px; }
#top_mainvisual .visual.movetop_end{ height:calc( 100% + 100px ); bottom:0px; transition: bottom 10s; }
#top_mainvisual .visual.movebottom_start{ height:calc( 100% + 100px ); top:-100px; }
#top_mainvisual .visual.movebottom_end{ height:calc( 100% + 100px ); top:0px; transition: top 10s; }
#top_mainvisual .visual:nth-of-type(1){ background:url('./img/main_visual_01.jpg') center center no-repeat; background-size:cover; }
#top_mainvisual .visual:nth-of-type(2){ background:url('./img/main_visual_02.jpg') center center no-repeat; background-size:cover; }
#top_mainvisual .visual:nth-of-type(3){ background:url('./img/main_visual_03.jpg') center center no-repeat; background-size:cover; }
@media screen and (max-width: 480px) {
	#top_mainvisual{ min-height:0; }
}


#top_whats{ padding:5em 0 0 0; }
#top_whats>dl{ width:100%; max-width:1000px; margin:0 auto; }
#top_whats>dl dt{ text-align: center; }
#top_whats>dl dt span{ font-size:1.5em; font-weight: bold; background:linear-gradient(transparent 70%, #ffc341 30%); }
#top_whats dl dd{ padding:1em; }
@media screen and (max-width: 480px) {}

#top_function{ padding:3em 0 0 0; margin-top:3em; background:#fff9eb; }
#top_function>section{ width:100%; max-width:1000px; margin:0 auto; }
#top_function>section>p{ text-align: center; padding:2em 0; }
#top_function>section>p span{ font-size:1.5em; font-weight: bold; background:linear-gradient(transparent 70%, #ffc341 30%); }
#top_function dl{ padding:2em 0; }
#top_function dl dt{ font-size:1.5em; line-height:1em; font-weight: bold; text-align: center; color:#ffae00; }
#top_function dl dt img{ display:block; width:30%; margin:0 auto 1em auto; }
#top_function dl dd{ padding:1em; font-size:1.2em; }

/* 入力フォーム */
article.form{ padding:5em 0; }
article.form>form{ display:block; width:90%; max-width:600px; margin:0 auto; }
article.form p{ font-weight: bold; padding-bottom:1em; }
article.form p#forgot:before{ font-family:"Font Awesome 5 Free"; content:"\f059"; font-weight: 900; color:#ffae00; }
article.form dt{ font-weight: bold; }
article.form dt:before{ font-family:"Font Awesome 5 Free"; content:"\f118"; font-weight: 900; color:#ffae00; }
article.form dt span{ display: inline-block; font-size:.8em; padding:0 0 0 .5em; color:#f30; }
article.form dd{ padding:0 0 1.5em 1em; }
article.form dd span.error{ display: block; color:#f30; font-size:.8em; }
article.form ol{ display: table; }
article.form ol>li{ display: table-cell; }
article.form ul{ display: table; width:100%; }
article.form ul>li{ display: table-cell; vertical-align: middle; padding:0 0 .2em 0; }
article.form ul>li:nth-of-type(1){ padding:0 .5em 0 0; }
article.form a.row_del{ padding:0 .5em; }
article.form a.row_del:before{ font-family:"Font Awesome 5 Free"; content:"\f056"; font-weight: 900; color:#999; }
article.form a.row_del:hover:before{ color:#666; }
article.form a.row_add{ font-family:'Noto Sans JP'; color:#ffae00; font-size:.9em; }
article.form a.row_add:hover{ color:#666; }
article.form a.row_add:before{ font-family:"Font Awesome 5 Free"; content:"\f055"; font-weight: 900; color:#999; }
article.form a.row_add:hover:before{ color:#666; }
article.form input[type='text']{ display: block; width:100%; padding:0 .5em; border-radius:.2em; height: 3em; }
article.form label{ display: inline-block; line-height:3em; }
article.form select{ display: block; padding:0 .5em; border-radius:.2em; height: 3em; }
article.form textarea{ display: block; width:100%; padding:0 .5em; border-radius:.2em; height: 10em; }
article.form button{ display: block; width:100%; border:0; border-radius:.2em; background:#f27900; padding:0 .7em; line-height: 3em; margin-top:1em; font-family:'Noto Sans JP'; color:#fff; }
@media screen and (max-width: 480px) {
	article.form dt{ font-size:1.2em; }
	article.form input[type='text']{ height: 4em; }
	article.form label{ line-height:4em; }
	article.form input[type='radio']{ height: 2.5em; width: 2.5em; vertical-align: middle; }
	article.form input[type='checkbox']{ height: 2.0em; width: 2.0em; vertical-align: middle; }
	article.form select{ height: 4em; }
	article.form button{ line-height: 4em; }
}

/* 送信完了画面 */
.form_comp{ width:90%; max-width:800px; margin:5em auto; }
.form_comp dt{ font-size:1.2em; font-weight: bold; }


/* ガイドライン */
article#guide{ width:90%; max-width:1000px; margin:5em auto; }
article#guide>dl{ padding:.5em 0; }
article#guide>dl>dt:before{ font-family:"Font Awesome 5 Free"; content:"\f118"; font-weight: 900; color:#ffae00; }
article#guide>dl>dd{ padding:0 0 0 1.5em; }
article#guide>dl>dd.q:before{ font-family:"Font Awesome 5 Free"; content:"\f059"; font-weight: 400; color:#ffae00; }
article#guide>dl>dd.a{ padding:0 0 0 3em; border-bottom: 1px dashed #000; }
article#guide>dl>dd.a:before{ margin:0  0 0 -1.5em;  font-family:"Font Awesome 5 Free"; content:"\f27a"; font-weight: 400; color:#ffae00; }
article#guide>p{ border: 1px dashed #000; padding:1em; margin:1em 0; }

/* プライバシー */
article#policy{ width:90%; max-width:1000px; margin:5em auto; }
article#policy>p{ text-align: center; padding:3em 0; }
article#policy dl{ padding:0 0 3em 0; }
article#policy dt{ font-size:1.2em; font-weight: bold; }
article#policy dt>span{ font-size:1.0em; padding:0 1em 0 0; }
article#policy dd{ padding: 0 0 0 1em; }
@media screen and (max-width: 480px) {
	article#policy>p>br{ display: none; }
}