@charset "Shift_JIS";

/* CSS初期設定 */
html {font-size: 62.5%;}

.clearfix:after {
clear: both;
content: "";
display: block;
}

h1{
background:none;
margin:8px 0 8px 0;
}


/* STRUCTURE */
#page_wrapper * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#page_wrapper  *:before,
#page_wrapper  *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#page_wrapper img {
border: none;
border-style: none;
height: auto;
max-width: 100%;
width: auto;
}

.page_header {
margin: auto;
padding: 0 0 8px;
max-width: 950px;
}

.page_main {background-color: #021222;}

.page_main__title {position: relative;}
.page_main__title .kv1 {opacity: .1;}
.page_main__title .kv2,
.page_main__title .kv3,
.page_main__title .kv4 {
opacity: 0;
position: absolute;
top:0;
left:0;
}

.page_main__title .kv4 h2 {margin:0;}

.page_main__inner {color:#fff;}
.page_intro {
background-color: rgba(7,12,48,.6);
border:1px solid #433e2f;
margin:0 auto 4em;
max-width: 970px;
padding: 4em;
width:90%;
}
.page_intro__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page_intro__summary {width:52%;}
.page_intro__summary h3 {
color:#b7a367;
font-size:2.4rem;
line-height: 1;
margin:0 0 .6em;
position: relative;
}
.page_intro__summary h3::after {background-color: #b7a367; content:''; display: block; height:1px; width:calc(100% - 5em); position: absolute; top:50%; right:0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);
}

.page_intro__summary dl {margin-top:1em;}
.page_intro__summary dt {margin-bottom: .5em;}
.page_intro__summary dd {
border-bottom: 1px dotted #999;
margin:0 0 1em;
padding-bottom: 1em;
}
.page_intro__images {
margin:0;
padding: 0;
width:40%;
}

.page_gallery {margin-top:3em;}
.page_gallery .page_gallery__slider {
margin:0;
padding: 0;
}

/* only PC setting
----------------------------------------------- */
@media print, screen and (min-width:970px) {
.pc_none {display:none;}

.page_main__inner {font-size:1.6rem;}

.page_main__title .kv4 {
max-width: 1400px;
width: 100%;
top: -5em;
left: 50%;
transform: translateX(-50%);
}

.inner950 {
width: 950px;
margin: 0 auto;
}
}

/* ABOVE 1200px
----------------------------------------------- */
@media print, screen and (min-width:1200px) {
.page_main__title .kv4 {
width:94%;
top:-2em;
}
}

/* ABOVE 1500px
----------------------------------------------- */
@media print, screen and (min-width:1500px) {
.page_main__title .kv4 {top:-2em;}
}

/* ABOVE 1500px
----------------------------------------------- */
@media print, screen and (min-width:1800px) {
.page_main__title .kv4 {top:3em;}
}


/* only SP setting
----------------------------------------------- */
@media only screen and (max-width:969px) {
.sp_none {display:none;}

.page_main__inner {font-size:1.4rem;}

.page_intro {padding:2em;}

.page_intro__summary {
margin-bottom:1em;
width:100%;
}
.page_intro__images {width:100%;}

.page_intro__summary h3 {font-size:1.8rem;}
}


.item_wrap {
background: url(../images/bg_item.png) no-repeat;
background-size: 100%;
border-top:1px solid #13233a;
padding: 4em 0 2.5em;
}

.page_story__inner,
.page_keypoint__inner,
.page_schedule__inner {
margin:0 auto 4em;
max-width: 970px;
width: 90%;
}

.page_story__inner {
background: url(../images/ph_story.png) no-repeat 100% 100%;
background-size: 50%;
position: relative;
}
.page_story__inner::before {
content:'\30A4\30E1\30FC\30B8\3067\3059';
color:#fff;
display: block;
font-size:1.1rem;
position: absolute;
bottom:.6em;
right: .6em;
}
.page_story {margin-top:6em;}
.page_story h3 {
margin:0 auto 2em;
max-width: 396px;
width: 90%;
}

.page_story__item {
line-height: 2;
margin-bottom: 2em;
}
.item_wrap h4 {
color: #b7a367;
font-size: 2.1rem;
line-height: 1;
margin: 0 0 .8em;
}

.page_keypoint h3 {
margin:0 auto 2em;
max-width: 476px;
width: 90%;
}
.page_keypoint h4 > span {
color:#fff;
font-size:1.2rem;
font-weight: normal;
padding-left: 1em;
}
.page_keypoint__flex {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.page_keypoint__flex:not(:last-child) {margin-bottom: 2em;}
.page_keypoint__summary {width:63.91%;}
.page_keypoint__images {
margin:0;
padding:0;
width:32.98%;
position: relative;
}
.page_keypoint__images figcaption {
font-size:1.1rem;
position: absolute;
bottom:.6em;
right: .6em;
}
.page_keypoint__flex.reflect_item .page_keypoint__summary {order:2}
.page_keypoint__flex.reflect_item .page_keypoint__images {order:1}

.page_keypoint__summary p {line-height: 2;}

.page_schedule h3 {
margin:0 auto 2em;
max-width: 251px;
width: 90%;
}
.schedule_inner__item dl {
display: inline-flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.schedule_inner__item dt {
margin:0 0 1em;
text-align: right;
width:7em;
}
.schedule_inner__item dd {
margin:0 0 1em;
width:calc(100% - 9em);
}

.schedule_inner__item h4 {position: relative;}
.schedule_inner__item p {margin-bottom:2em;}
.schedule_inner__item dl + h4 {margin-top:2em;}
.schedule_inner__item h4::after {background-color: #b7a367; content:''; display: block; height:1px; width:calc(100% - 5em); position: absolute; top:50%; right:0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);
}
.schedule_inner__item dl + h4::after {width:calc(100% - 11em)}

.page_conversion {
margin-top:2em;
text-align: center;
}
.page_conversion a { background: rgb(152,136,91); background: linear-gradient(90deg, rgba(152,136,91,1) 0%, rgba(230,219,161,1) 50%, rgba(152,136,91,1) 100%); border:1px solid #a9a58c; display: block; color:#000; font-size:2rem; font-weight: bold; padding: 1em; text-decoration: none; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s;
margin:auto;
max-width: 420px;
width: 90%;
}
.page_conversion a:hover { transform:scale(1.05); -webkit-transform:scale(1.05); -moz-transform:scale(1.05); -ms-transform:scale(1.05); -o-transform:scale(1.05);
}
.page_conversion p {line-height: 2;}
.page_conversion .tx_note {
font-size:2rem;
line-height: 1.6;
margin-bottom: 2em;
}
.page_conversion .tx_note em {
font-style: normal;
font-weight: 700;
color:#ff3;
}

/* only PC setting
----------------------------------------------- */
@media print, screen and (min-width:970px) {
.page_story__flex {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.page_story__item {width:46.6%;}
.page_story__item:last-child {width:100%;}
}

/* only SP setting
----------------------------------------------- */
@media only screen and (max-width:969px) {
.item_wrap h4 {font-size:1.6rem;}
}

/* only SP setting
----------------------------------------------- */
@media only screen and (max-width:799px) {
.item_wrap {
background: url(../images/bg_item.png) no-repeat 50% 0;
background-size: 150%;
}
.page_story__inner {
background-size: 100%;
padding-bottom: 28%;
}
}

/* only XS setting
----------------------------------------------- */
@media only screen and (max-width:559px) {
.page_story h3 {max-width: 285px;}
.page_keypoint h3 {max-width: 342px;}
.page_schedule h3 {max-width: 182px;}

.page_keypoint__summary {width:100%;}
.page_keypoint__images {
margin:1em auto 0;
max-width: 420px;
width:100%;
}
.page_keypoint__flex.reflect_item .page_keypoint__summary {order:1}
.page_keypoint__flex.reflect_item .page_keypoint__images {order:2}
}