@charset "utf-8";

#contents > header {height:auto;}
#contents > header > .image {width:100%; position:relative; margin:0; padding:800px 0 0; overflow:hidden;}
#contents > header > .image > img {min-height:1600px; top:400px;}
#contents > header > .image > figcaption {
	position:relative; z-index:2; padding:30px 0; border-bottom:1px solid #e5e5e5; background:#fff; color:#000; font-size:1.6rem; text-align:left; line-height:1.7;
	font-family:"Noto Sans JP","NoChattering",sans-serif; line-height:1.35;}
#contents > header > .image > figcaption > ul {
	display:-webkit-flex; display:flex; 
	-webkit-justify-content:center; justify-content:center;
	width:960px; margin:-20px auto 0;}
#contents > header > .image > figcaption > ul > li {
	-webkit-flex:0 1 100%; flex:0 1 100%; 
	margin:20px 10px 0;}
#contents > header > .image > figcaption > ul > li > small {display:block;}
#contents > header > .image > figcaption > ul > li > b {display:block; margin:0.05em 0 0; font-size:2.8rem; font-weight:normal;}
#contents > header > .image > figcaption > ul > li > b + small {margin:0.4em 0 0; font-size:1.2rem;}
#contents > header > small, 
#contents > header > h1 {position:absolute; left:0; right:0; top:400px; margin:0;}
#contents > header > small {transform:translateY(-2em);}
#contents > header > h1 {}
#contents > header > strong {display:block; margin:60px 0 0; color:#000; font-size:3.8rem; font-family:brandon-grotesque,"Noto Sans JP","NoChattering",sans-serif; line-height:1.35;}

#contents > section {margin:60px 0 0; font-size:1.6rem;}
#contents > section > * {margin:0 0 0 320px;}
#contents > section > .image {margin:0;}
#contents > section > .image.full-image {margin:0 calc(50% - 50vw);}
#contents > section > .image > img {display:block; width:100%; height:auto;}
#contents > section > h1 {float:left; width:300px; margin:50px 0 0; font-size:3.8rem;}
#contents > section > p {margin-top:2em;}
#contents > section > p b {display:inline-block; margin:0 1em 0 0;}
#contents > section > h1 + p {margin-top:50px;}

#contents > .image {margin:70px auto 0;}
html.fac-js-enabled #contents > .image {width:680px;}

@media screen and (max-width:1200px) {
#contents > section > .image.full-image {margin-left:-130px; margin-right:-130px;}
}

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

#contents > header {display:block; padding:0 30px;}
#contents > header > .image {width:auto; margin:0 -30px; padding:100vw 0 0;}
#contents > header > .image > img {min-height:200vw; top:50vw;}
#contents > header > .image > figcaption {padding:5vw; font-size:0.8em;}
#contents > header > .image > figcaption > ul {width:auto; margin:-5vw -2.5vw 0;}
#contents > header > .image > figcaption > ul > li {margin:5vw 2.5vw 0;}
#contents > header > .image > figcaption > ul > li > small {}
#contents > header > .image > figcaption > ul > li > b {font-size:1.4rem;}
#contents > header > .image > figcaption > ul > li > b + small {font-size:0.6rem;}
#contents > header > small, 
#contents > header > h1 {top:50vw;}
#contents > header > small {font-size:1.3rem;}
#contents > header > h1 {font-size:2.8rem;}
#contents > header > strong {margin:10vw 0 0; font-size:2.1rem; text-align:left;}
#contents > header > strong br {display:none;}

#contents > section {margin:10vw 0 0; font-size:1.2rem;}
#contents > section > * {margin:0;}
#contents > section > .image {}
#contents > section > .image.full-image {margin:0 -30px;}
#contents > section > .image > img {}
#contents > section > h1 {float:none; width:auto; margin:5vw 0 0; font-size:2.1rem;}
#contents > section > h1 br {display:none;}
#contents > section > p {}
#contents > section > p b {}
#contents > section > h1 + p {margin-top:1em;}

#contents > .image {margin:6.6666vw auto 0;}
html.fac-js-enabled #contents > .image {width:80%;}


}