/* 	header
============================== */
#header { width: 100%; background: -moz-linear-gradient(171deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1%, rgba(255,255,255,.8) 42%, rgba(255,255,255,0) 42.5%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(171deg, rgba(255,255,255,.8) 0%,rgba(255,255,255,.8) 1%,rgba(255,255,255,.8) 42%,rgba(255,255,255,0) 42.5%,rgba(255,255,255,0) 100%); background: linear-gradient(171deg, rgba(255,255,255,.8) 0%,rgba(255,255,255,.8) 1%,rgba(255,255,255,.8) 42%,rgba(255,255,255,0) 42.5%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); padding-top: 1.5em; position: relative; box-shadow: 0px 10px 7px -7px rgba(50, 50, 50, .1) inset;}
#header .wrap { position: relative;}
#header a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 100;}
.logoimg { width: 60%; max-width: 420px; margin: 0 auto;}
.logoimg .img_sp { width: 100%; height: 0; padding-top: 35.58926487747958%; padding-top: -webkit-calc(308 / 857 * 100%); padding-top: calc(308 / 857 * 100%); position: relative;}
.logoimg img { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.logoimg .lazyloaded { opacity: 1; transition: all 3000ms;}
.oaimg { width: 20%; max-width: 200px; margin: 1em auto;}
.oaimg .img_sp { width: 100%; height: 0; padding-top: 24.934383202099738%; padding-top: -webkit-calc(95 / 381 * 100%); padding-top: calc(95 / 381 * 100%); position: relative;}
.oaimg img { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.oaimg .lazyloaded { opacity: 1; transition: all 3000ms;}
/*for_W768-*/
@media all and (min-width: 768px) {
#header { background: -moz-linear-gradient(171deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(171deg, rgba(255,255,255,.8) 0%,rgba(255,255,255,.8) 1%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 50.5%,rgba(255,255,255,0) 100%); background: linear-gradient(171deg, rgba(255,255,255,.8) 0%,rgba(255,255,255,.8) 1%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 50.5%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); padding: 3em 0 1em 0;}
.oaimg { position: absolute; bottom: 1em; right: 1em;}
}

/* 	contents
============================== */
#contents { background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; -webkit-background-position: center top; background-position: center top;}
#contents h2 { box-sizing: border-box; width: 100%; margin: 0 auto; padding: 1.5em 1em; display: flex; flex-flow: row wrap; justify-content: space-between; position: relative;}
#contents h2 .ttxt { display: block; flex-basis: 50%; text-shadow: 1px 1px 5px rgba(100, 100, 100, .4);}
#contents h2 #t_eng, #contents h2 .t_eng { text-align: left; font-size: 360%; line-height: 80%; position: relative;}
#contents h2 #t_jpn, #contents h2 .t_jpn { text-align: right; font-size: 120%;}
#contents h2 .spk3 { display: block; width: 30%; position: absolute; top: -.1em; left: 10%;}
#contents .con { box-sizing: border-box; width: 100%; margin: -3em auto -1em auto; box-shadow: 0px 10px 7px -7px rgba(50, 50, 50, .1) inset; padding: 2em 1em;}
#contents h3 { display: block; width: 100%; margin: 0 auto; max-width: 800px; font-size: 160%; color: rgba(231, 0, 18, 1); text-align: right;}
#contents .movie_sp { max-width: 800px; box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, .3); margin: -.25em auto 1em auto;}
#contents .sub_txt { text-align: center; font-size: 120%;}
#contents .con_txt { box-sizing: border-box; width: 100%; max-width: 800px; margin: 0 auto; padding: 2em; background: rgba(118, 118, 118, .1); position: relative; font-size: 106%; line-height: 180%; position: relative; text-align: justify; word-break:break-all; text-justify: inter-ideograph; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; letter-spacing: .05em;}
#contents .con_txt p { padding: 1em 0 0 0; line-height: 180%;}
.pcct { text-align: left;}
/*for_W640-*/
@media all and (min-width: 640px) { 
#contents h2 #t_eng, #contents h2 .t_eng { font-size: 400%;}
#contents h2 #t_jpn, #contents h2 .t_jpn { font-size: 110%;}
#contents .con { margin: -3.5em auto -1em auto;}
}
/*for_W768-*/
@media all and (min-width: 768px) { 
#contents h2 { padding: 2.5em 1em;}
#contents h2 #t_eng, #contents h2 .t_eng { font-size: 460%;}
#contents h3 { font-size: 180%;}
#contents .sub_txt { font-size: 140%;}
#contents .con { margin: -4.5em auto -1em auto;}
.pcct { text-align: center;}
}
/*for_W1000-*/
@media all and (min-width: 1000px) { 
#contents h2 #t_eng, #contents h2 .t_eng { font-size: 600%;}
#contents h3 { font-size: 200%;}
#contents .sub_txt { font-size: 160%;}
#contents .con { margin: -5.5em auto -1em auto;}
}

/* 	accordion
============================== */
.accordion { width: 100%; margin: 0 auto; padding-top: 3em;}
.accordion .toggle { display: none;}
.accordion .option { position: relative; margin-bottom: 1em;}
.accordion .title, .accordion .cont { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
.accordion .title { box-sizing: border-box; width: 60%; max-width: 300px; margin: 0 auto; padding: 1.5em 0; display: block; text-align: center; background-image: url(../img/btn_bg.jpg); background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; -webkit-background-position: bottom center; background-position: bottom center; color: rgba(255, 255, 255, 1); font-size: 110%; letter-spacing: .1em; box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, .2);}
.accordion .title:hover { opacity: .8; cursor: pointer;}
.accordion .toggle:checked + .title + .cont { max-height: 8000px; transition: all .8s;}

.accordion .cont { box-sizing: border-box; width: 100%; max-width: 800px; margin: 0 auto; max-height: 0; overflow: hidden;}
.accordion .cont .cmall { width: 100%; padding: 1em 0;}

.accordion .cont .cmset { box-sizing: border-box; width: 100%; padding: 1em; background: rgba(252, 252, 252, .8); margin-bottom: 1em;}
.accordion .cont .name_sp { font-size: 110%; color: rgba(122, 30, 37, 1); padding: .25em 0 .75em 0;}
.accordion .cont p { padding: 1.5em 1em; font-size: 98%; line-height: 160%; letter-spacing: .05em; box-shadow: 0px 9px 7px -7px rgba(50, 50, 50, .1) inset;}


/* 	btn
============================== */
.btn { box-sizing: border-box; width: 100%; max-width: 500px; margin: 1em auto; padding: 1.5em 0; display: block; text-align: center; background-image: url(../img/btn_bg.jpg); background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; -webkit-background-position: bottom center; background-position: bottom center; color: rgba(255, 255, 255, 1); font-size: 110%; letter-spacing: .1em; box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, .2); position: relative;}
.btn a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;}
.btn a:hover { background: rgba(240, 240, 240, .2);}
.btn0 { width: 90%; margin: 1em auto .35em auto;}

.btns2 { box-sizing: border-box; width: 100%; max-width: 600px; margin: 1em auto; display: flex; flex-flow: row wrap; justify-content: space-between;}
.btns2 .btn { flex-basis: 49%; width: 49%; margin: 0; padding: 1.5em 0; font-size: 85%;}
.btns2 .btn .btnt { line-height: 130%; letter-spacing: 0;}
.btns2 .btn .ng { padding-top: .5em;}
/*for_W640-*/
@media all and (min-width: 640px) { 
.btns2 .btn { font-size: 90%; letter-spacing: .1em;}
.btns2 .btn .btnt { letter-spacing: .1em;}
.btns2 .btn .ng { padding-top: 0;}
}