@charset "utf-8";
/* CSS Document */

=======================================
  Reset CSS
=======================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
    margin: 0;
    padding: 0;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
  display:block;
}

html{
  -webkit-text-size-adjust: 100%;
}

body{margin:0;padding:0;background:#0077ae;color:#000;width:100%;height:100%;font-size:14px;line-height:1.5em;	font-family:  "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","MS PGothic", sans-serif;
}

img{
  border: 0;
}

ul,ol{
  list-style-type: none;
}

table {
  border-collapse: collapse; 
  border-spacing: 0;
}

img, input, select, textarea { 
  vertical-align: middle;
}

a {
  color: #59220d;
  transition: 0.5s;
}
a:hover {
  color: #d53e04;
	opacity:0.7;
}
a:hover img {
  opacity: 0.7;
}

th,td{font-size:13px;}
strong{font-weight:bold;}

#container{width:100%;margin:0 auto;padding:0;min-width:480px;position: absolute;background:url(../img/bg.jpg) top right / cover no-repeat fixed}

.bg_imgL{width:100%;height:100vh;background:url(../img/bg.jpg) no-repeat top left ;background-attachment:fixed;position: fixed; z-index:-101;top: 0;left:0;background-size:contain;}
.bg_imgR{width:100%;height:100vh;background:url(../img/bg.jpg) no-repeat top right ;background-attachment:fixed;position: fixed; z-index:-100;top: 0;left:0;background-size:contain;}

#contents{width:100%;max-width:1024px;
	margin:0 auto;
	padding:0;
	clear:both;
	position: static;z-index:1;
}

#contents #header{
	width:100%;
	padding: 13px auto;
	text-align:center;
	background-size:100% auto;
	color:#fff;
	padding-bottom :40px;
}
#contents #header h1{text-align:center;}
#contents #header h1 img{width:100%;max-width:515px;height:auto;margin-top:55px;}

#footer{clear:both;text-align:left;margin: 60px auto ;width:880px;}
#footer ul li{padding-left:1em;text-indent:-1em;}


#copy{color:#fff;text-align:center;line-height:1.5em;padding-bottom:30px; clear:both;}
h1 img{width:100%;max-width:580px;height:auto;}



h2{color:#fff;font-size:160%;font-weight:bold;padding-top:0.5em;padding-bottom:0.5em;text-align:center;width:98%;line-height:2em;margin:0 auto 20px;}


h3{text-align:center;clear:both;font-size:120%;margin:10px auto 10px;font-weight:bold;}

#contents:after,.subtitle:after,#main:after,.menu_btn:after,.section:after,.movie:after,#copy:after{content:""; display:block; clear:both; height:0;}

.top_txt{text-align:center;font-size:16px;font-weight:bold;margin:30px auto;line-height:1.8em;}

.Button {width: 90%;max-width: 640px; margin: 20px auto;}
.Button a{ background:#e00239;color:#fff;text-align:center;vertical-align:middle; padding: 20px 20px; font-size:21px; display:block;text-decoration:none;}
.Button a::before{ content:'　'; background:url(../img/link-icon.png) no-repeat left center / 24px 24px;color:#fff;vertical-align:middle;margin-right: 10px;}
.Button a:hover { text-decoration: none; opacity: 0.6;}

#container #main{max-width:1024px;
	padding-top:10px;
	padding-bottom:40px;
	clear:both;
	margin: 0 auto 20px auto;
	background:#fff;
}
/*son
--------------------*/
.son{width:96%;text-align:center;margin: 0 auto;}
/*main
--------------------*/
#main h3.accordion{ color:#000;margin:60px auto 0px;font-size:130%;}
#main h3.accordion::after {margin-top: 30px;display:block;border-top: solid 1px #e73419;content:url(../img/parent_open.png);height:53px;}
#main h3.accordion.active::after {border-top:none;border-bottom: solid 1px #e73419;content:" ";background:url(../img/parent_close.png) no-repeat center center;height:53px;}

#container #main .section { color:#000; display:none;margin-top: 0;border:box-sizing: border-box;}
#container #main .section .movie1{width: 100%; max-width:320px;margin: 0px auto 20px auto; clear:both;}
#container #main .section .movie2{width: 100%; max-width:680px;margin: 0px auto 20px auto; clear:both;}
#container #main .section .movie3{width: 100%; max-width:1020px;margin: 0px auto 20px auto; clear:both;display:flex;flex-wrap:wrap;justify-content:space-around;}
#container #main .section .movie1 .mov{width:320px;float:left;margin-top:20px;margin-bottom:20px;text-align:center;}
#container #main .section .movie2 .mov{width:320px;float:left;margin-top:20px;margin-bottom:20px;margin-left: 10px;margin-right: 10px;text-align:center;}
#container #main .section .movie3 .mov{width:320px;float:left;margin-top:20px;margin-bottom:20px;margin-left: 10px;margin-right: 10px;text-align:center;}

#container #main .section .movie1 .mov .under,
#container #main .section .movie2 .mov .under,
#container #main .section .movie3 .mov .under{width: 320px;height: 180px; background:#333; color:#fff;padding-top: 82px;box-sizing: border-box;}

/*notice
--------------------*/
.notice{
	width: 96%;
	max-width: 1024px;
	background:#fff;
	margin: 40px auto 0;
	padding: 20px;
	box-sizing:border-box;
}
.notice ul{list-style-type:none;margin: 0;padding:0;}
.notice li{padding: 0.25em 0.5em 0.25em 1em;text-indent: -1em}
/*
=========================================
  Modules（Parts）
=========================================
*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #fcd13e;
  opacity: 1;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  content:"";
  border-right: 5px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 5px solid transparent; 
  position: absolute;
	width: 2px;
	height: 12px;
  top: -6px;
  bottom: 0;
  right: 0;
  left: 18px;
}
#page_top a::after{
  content: 'TOP';
  font-size: 13px;
  color: #e50012;
  position: absolute;
  top: 22px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.btn_son{max-width: 480px;margin: 15px auto;}
.btn_son a{width: 100%;height: 60px;line-height: 60px;border-radius: 30px;background:url(../img/btn_w.png) no-repeat 10px center #fcd13e;display:block;color:#e50012;font-size: 21px;font-weight: bold;letter-spacing:1em;text-decoration:none;}

.btn_ex{max-width: 480px;margin: 15px auto;text-align:center;}
.btn_ex a{width: 100%;height: 60px;line-height: 60px;border-radius: 30px;background:url(../img/btn_w.png) no-repeat 10px center #e50012;display:block;color:#fff;font-size: 21px;font-weight: bold;text-decoration:none;}


@media screen and (max-width: 1024px){
	.bg_imgL,.bg_imgR{display:none;}
}
@media screen and (max-width: 979px){
#container{width:100%;}
#contents{width:100%;margin:0 auto;padding:0;}
#main{
	width:100%;padding: auto;
}
	#top-main .movie{text-align:center;margin:0 auto;padding-top:20px;padding-bottom:20px;}
#container #main .section .movie3{width: 100%; max-width:680px;margin: 0px auto 20px auto; clear:both;}
	#top-main .movie .mov{clear:both;float:none;margin-top:20px;margin-bottom:20px;margin-left: auto;margin-right: auto;}
	.mov:after{content:""; display:block; clear:both; height:0;}
}

@media screen and (max-width: 884px){
	#footer {padding:0 auto;width:100%;}
	#footer p{width:90%;margin:0 auto;}
	#footer ul{width:90%;margin:0 auto 20px auto}
}

@media screen and (max-width: 679px){
#contents #header {width:96%;margin-right:auto;margin-left:auto;}
	.menu_btn ul{width:442px;}
	#container #main .section .movie2 .mov,#container #main .section .movie3 .mov{clear:both;float:none;margin-top:20px;margin-bottom:20px;margin-left: auto;margin-right: auto;}
}

@media screen and (max-width: 627px){
	.mov{margin-top:20px;margin-bottom:20px;margin-left: auto;margin-right: auto;clear:both;float:none;}
}

@media screen and (max-width: 442px){

}

@media screen and (max-width: 320px){
	h2{width:100%;}
	.mov{padding-right:0;padding-left:0;}
}


.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb60 { margin-bottom:60px; }