@charset "utf-8";

#contents > header {margin:-100px 0 0;}
#contents > header > * {margin:0 0 0 320px;}
#contents > header > .image {height:800px; position:relative; margin:0 calc(50% - 50vw); overflow:hidden;}
#contents > header > .image > img {width:auto; min-width:200%; height:auto; min-height:200%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.5);}
#contents > header > .image > img.landscape {}
#contents > header > .image > img.portrait  {display:none;}
#contents > header > .title, 
#contents > header > strong {font-family:"Noto Sans JP","NoChattering",sans-serif; line-height:1.35;}
#contents > header > .title {float:left; width:300px; margin:60px 0 0;}
#contents > header > .title > small {display:block; font-size:1.8rem;}
#contents > header > .title > h1 {font-size:3.8rem;}
#contents > header > .title > h1 + small {font-size:1.4rem;}
#contents > header > strong {display:block; margin-top:60px; font-size:3.8rem;}
#contents > header > p {margin-top:2em;}

#contents > section {margin:60px 0 0; font-size:1.4rem;}
#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 > header > .image, 
#contents > section > .image.full-image {margin-left:-130px; margin-right:-130px;}
}

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

#contents > header {margin:-50px 0 0;}
#contents > header > * {margin:0;}
#contents > header > .image {height:100vw; margin:0 -30px;}
#contents > header > .image > img {}
#contents > header > .image > img.landscape {display:none;}
#contents > header > .image > img.portrait  {display:block;}
#contents > header > .title, 
#contents > header > strong {}
#contents > header > .title {float:none; width:auto; position:absolute; left:30px; top:100vw; margin:0; transform:translateY(-100%) translateY(-30px); color:#fff;}
#contents > header > .title > small {font-size:1.3rem;}
#contents > header > .title > h1 {font-size:2.8rem;}
#contents > header > .title > h1 + small {font-size:1.1rem;}
#contents > header > strong {margin-top:1em; font-size:2.1rem;}
#contents > header > p {margin-top:1.5em;}

#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%;}

}