/* 	header
============================== */
/*TITLE*/
.title_img { width: 100%; height: 0; padding-top: 15.652173913043478%; padding-top: -webkit-calc(360 / 2300 * 100%); padding-top: calc(360 / 2300 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: relative; box-shadow: 0px 4px 8px 0px rgba(3, 0, 89, .2);}
.title_img a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;}

/* 	spot_youtube
============================== */
#spot_sp, .spot_sp { width: 96%; max-width: 900px; position: relative; z-index: 100;}
/* _teaser */
#teaser { width: 96%; margin: 0 auto .5em auto; padding-top: .5em; position: relative; z-index: 100;}
.movies { width: 100%; max-width: 700px; margin: 0 auto;}
.movies ul { display: flex; flex-wrap: wrap; justify-content: center;}
.movies ul, .movies li { list-style: none; margin: 0; padding: 0; border: 0;}
.movies ul:before, .movies ul:after { content: ""; content: none; display: table;}
.movies ul:after { clear: both; }
.movies ul::after { content: ""; display: block; clear: both;}
.movies li { float: left; border-radius:6px; background-color: rgba(255, 255, 255, .5); margin: 0 0 2% 1%; width: 32.3%; flex-basis: 32.3%;}
.movies li:nth-child(2n) { float: right;}
.movie { width: 100%; height: 0; padding-top: 56.25%; position: relative; overflow: hidden; border-radius:6px; box-shadow: 0 1px 5px rgba(3, 0, 89, .3); -webkit-box-shadow: 0 1px 5px rgba(3, 0, 89, .3);}
.movie a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;}
.movie a:hover { opacity: .8;}
.movie img { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
.movie .play_btn { width: 30px; height: 30px; -ms-border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background: rgba(0, 0, 0, .5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); display: block;}
.movie .play_txt { color: rgba(255, 255, 255, 1); font-size: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)  rotate(90deg); -webkit- transform: translate(-50%, -50%)  rotate(90deg);}

/* 	contents
============================== */
.unit { width: 100%; padding: 1.5em 0;}
.unit h2 { width: 100%; max-width: 600px; margin: 0 auto 1.5em auto;}
.unit h2 .img { width: 100%; height: 0; padding-top: 7%; padding-top: -webkit-calc(70 / 1000 * 100%); padding-top: calc(70 / 1000 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block;}
/*_detail*/
.detail { box-sizing: border-box; width: 100%; max-width: 900px; margin: 0 auto; background-color: rgba(255, 255, 255, .75); padding: 1.5em; position: relative; box-shadow: 0px 4px 8px 0px rgba(3, 0, 40, .2);}
.detail::before { content: ''; width: 100%; height: 2px; position: absolute; top: 0; left: 0; background: rgba(184,171,7, .5); background: -webkit-linear-gradient(left, rgba(184,171,7,.5) 1%,rgba(71,163,196,.5) 100%); background: linear-gradient(to right, rgba(184,171,7,.5) 1%,rgba(71,163,196,.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8ab07', endColorstr='#47a3c4',GradientType=1 );}
.dtl_txt { box-sizing: border-box; width: 100%; text-align: left; line-height: 180%; letter-spacing: .04em; text-align: justify; text-justify: inter-ideograph; padding: .5em 0; position: relative; z-index: 100;}
.dtl_txt a { color: rgba(27, 48, 180, 1);}
.dtl_txt a:hover { color: rgba(85, 84, 0, 1);}
.detail::after { content: ''; width: 100%; height: 6px; position: absolute; bottom: 0; left: 0; background: rgba(184,171,7, .2);}
.s_catch {font-size: 110%; font-weight: bold; line-height: 160%; text-align: center;}
/*_comment*/
.cmt_sp { box-sizing: border-box; width: 94%; max-width: 800px; text-align: left; margin: 2em auto 1em; auto;}
.cmt_sp h3 { text-align: center; font-weight: bold; letter-spacing: .1em; font-size: 120%; text-shadow: 1px 1px 2px rgba(3, 0, 89, .15); background: linear-gradient( to right,  rgba(0, 44, 185, .9) 25%, rgba(69, 179, 224, .7) 75% ); -webkit-background-clip: text; color: transparent; margin-bottom: .2em;}
.cmt_sp h3::before { content: '─ '; color: rgba(0, 44, 185, 1);}
.cmt_sp h3::after { content: ' ─'; color: rgba(69, 179, 224, 1);}
.cmt_sp dl { color: rgba(0, 44, 185, 1); margin-top: .75em; border-radius: 0 20px; box-shadow: 0px 2px 4px 0px rgba(3, 0, 89, .1);}
.cmt_sp dt { padding: .5em .8em; font-size: 110%; font-weight: bold; letter-spacing: .05em; background: linear-gradient( to right,  rgba(0, 44, 185, .05) 25%, rgba(69, 179, 224, .3) 75% ); text-shadow: 1px 1px 2px rgba(3, 0, 89, .15); border-radius: 0 20px 0 0;}
.cmt_sp dd { padding: 1em; background: rgba(255, 255, 255, .8); border-radius: 0 0 0 20px; line-height: 180%; letter-spacing: .04em; position: relative;}
.cmt_sp dd::before { content: ''; width: 10px; height: 10px; border-top: 1px solid rgba(0, 44, 185, .3); border-left: 1px solid rgba(0, 44, 185, .3); position: absolute; top: 4px; left: 4px;}
.cmt_sp dd::after { content: ''; width: 10px; height: 10px; border-bottom: 1px solid rgba(69, 179, 224, .5); border-right: 1px solid rgba(69, 179, 224, .5); position: absolute; bottom: 4px; right: 4px;}
/*_archive*/
#archive { box-sizing: border-box; width: 100%; max-width: 900px; margin: -2em auto 0 auto; padding: 2em 0 1em 0; background: -moz-linear-gradient(top, rgba(184,171,7,0.5) 0%, rgba(244,242,218,0) 85%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(184,171,7,0.5) 0%,rgba(244,242,218,0) 85%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(184,171,7,0.5) 0%,rgba(244,242,218,0) 85%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80b8ab07', endColorstr='#00ffffff',GradientType=0 );}
#archive ul:before, #archive ul:after { content: ""; display: table;}
#archive ul:after { clear: both;}
#archive ul::after { content: ""; display: block; clear: both;}
#archive ul { display: flex; flex-wrap: wrap; justify-content: center;}
#archive #ul1t #s1t a, #archive #ul2t #s2t a, #archive #ul3t #s3t a, #archive #ul4t #s4t a, #archive #ul5t #s5t a, #archive #ul6t #s6t a, #archive #ul7t #s7t a, #archive #ul8t #s8t a, #archive #ul9t #s9t a, #archive #ul10t #s10t a { opacity: .3; cursor: default; pointer-events: none;}
#archive li { width: 18%; margin: 0 .6% .5em .8%; flex-basis: 18%;}
#archive li a { width: 100%; height: 0; padding-top: 100%; display: block; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; -webkit-background-position: top center; background-position: top center; box-shadow: 0px 4px 8px 0px rgba(3, 0, 81, .15); position: relative;}
#archive li .numsp { box-sizing: border-box; width: 18px; height: 18px; text-align: center; position: absolute; bottom: 0; right: 0; background: rgba(184,171,7, .75);}
#archive li .numt { font-size: 90%; font-weight: bold; color: rgba(255, 255, 255, 1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%);}
#archive li a:hover { filter: brightness(1.5) saturate(130%); -webkit-filter: brightness(1.5) saturate(130%);}
/*for_W768-*/
@media all and (min-width: 768px) {
.detail { width: 98%;}
.dtl_txt { padding: .5em 1em;}
.s_catch {font-size: 120%;}
#archive li { width: 9%; margin: 0 .4% .5em .6%; flex-basis: 9%;}
.cmt_sp dt { padding: .75em 1em;}
.cmt_sp dd { padding: 1.1em;}
.cmt_sp dd::before { width: 12px; height: 12px; position: absolute; top: 6px; left: 6px;}
.cmt_sp dd::after { width: 12px; height: 12px; position: absolute; bottom: 6px; right: 6px;}
}
/*for_W1000-*/
@media all and (min-width: 1000px) {
.dtl_txt { padding: 1em 1.5em;}
.s_catch {font-size: 130%;}
.cmt_sp dt { padding: .75em 1.5em;}
.cmt_sp dd { padding: 1.2em 1.6em;}
.cmt_sp dd::before { width: 15px; height: 15px; position: absolute; top: 8px; left: 8px;}
.cmt_sp dd::after { width: 15px; height: 15px; position: absolute; bottom: 8px; right: 8px;}
}

/* 	photo
============================== */
.photo { width: 96%; margin: .5em auto 1em auto; text-align: center; user-select:none; -webkit-user-select:none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag: none; -webkit-touch-callout: none;}
.daigae { margin: 0 auto;}
.photo img { width: 100%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
.prgimg100100 img, .prgimg100100-90 img { max-width: 100%;}
.prgimg10090 img { max-width: 90%;}
.prgimg10080 img { max-width: 80%;}
.prgimg10070 img { max-width: 70%;}
.prgimg10060 img { max-width: 60%;}
/*for_W768-*/
@media all and (min-width: 768px) {
.photo { width: 90%; max-width: 900px;}
.prgimg100100-90 img { max-width: 90%;}
}

/* 	sns
============================== */
#sns_sp h2 { box-sizing: border-box; width: 37%; max-width: 160px; margin: 0 auto .75em auto;}
#sns_sp #sns_set { width: 100%; max-width: 360px; margin: 0 auto;}
#sns_sp #sns_set:before, #sns_sp #sns_set:after { content: ""; display: table;}
#sns_sp #sns_set:after { clear: both;}
#sns_sp #sns_set::after { content: ""; display: block; clear: both;}
#sns_sp .sns_wk { width: 48%; margin: .25em .5% .75em 1%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; -webkit-background-position: center center; background-position: center center; float: left; padding: 0;}
#sns_sp .sns_wk a { box-sizing: border-box; width: 100%; height: 100%; display: block; padding: 1em .5em;}
#sns_sp .sns_wk a:hover { background: rgba(255, 255, 255, .2);}
#sns_sp .sns_title { width: 20%; display: block; margin: 0 auto;}
#sns_sp .sns_title .img { width: 100%; height: 0; padding-top: 100%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block;}
#sns_sp .sns_title-txt { width: 100%; text-align: center; letter-spacing: .1em; display: block; padding-top: .2em; color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 110%;}

/* 	btn
============================== */
.btn_sp { margin: 1em auto; text-align: center;}
.btn { position: relative; overflow: hidden; text-decoration: none; display: inline-block; padding: 10px 30px; text-align: center; outline: none; transition: ease .2s; background: rgba(144, 141, 0, 1); box-shadow: 0 1px 5px rgba(3, 0, 89, .3); -webkit-box-shadow: 0 1px 5px rgba(3, 0, 89, .3);}
.btn span { position: relative; z-index: 3; color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 110%;}
.btn:before { content: ''; position: absolute; top: 0; left: 0; z-index: 2; background: rgba(125, 39, 36, 1); width: 100%; height: 100%; transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(1, 0); transform-origin:center;}
.btn:hover:before{ transform:scale(1, 1);}