@charset "utf-8";
/* Reset */
*{
margin: 0;
padding: 0;
}
body{
line-height: 1.0;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
ul{
list-style: none;
}
a {
text-decoration: none;
color: inherit;
display: block;
}
/*.container*/
.container {
/* height: 100vh; */
display:flex;
flex-wrap: wrap;
color: #fff;
}
/* section高さ共通 */
.container section{
height: 50vh;
}
/* 上段幅 */
.container section:nth-child(1),
.container section:nth-child(2){
width:50%;
}
/* 下段幅 */
.container section:nth-child(3),
.container section:nth-child(4),
.container section:nth-child(5){
width:calc(100% / 3);
}
/* 背景画像 */
.container section:nth-child(1){
background: url(../img/hero4.png) no-repeat center/cover;
}
.container section:nth-child(2){
background: url(../img/hero1.png) no-repeat center/cover;
}
.container section:nth-child(3){
background: url(../img/hero3.png) no-repeat center/cover;
}
.container section:nth-child(4){
background: url(../img/hero5.png) no-repeat center/cover;
}
.container section:nth-child(5){
background: url(../img/hero2.png) no-repeat center/cover;
}
/* 9/28追加 */
/* Caption */
.caption{
color: #fff;
background:
rgba(0, 0, 0, 0.3);
height: 50vh;
box-sizing: border-box;
padding-top: 25vh;
opacity: 0;
transition: 300ms;
}
.caption:hover{
opacity: 1;
}
h2{
font-family: 'Tangerine', cursive;
font-size: 4em;
text-align: center;
margin-bottom: 20px;
}
.caption p{
width:80%;
margin:0 auto;
line-height: 1.3;
}
@media screen and (max-width:1280px){
.container section{
padding-top: 25vh;
box-sizing:border-box;
}
.caption{
opacity: 1;
border: 1px solid #fff;
height:auto;
padding:20px;
width:80%;
margin: 0 auto;
}
h2{
font-size: 3em;
margin-bottom: 10px;
}
.caption p{
width:auto;
}
@media screen and (max-width:743px) {
/*.container*/
.container {
display:block;
}
.container section:nth-child(1),
.container section:nth-child(2),
.container section:nth-child(3),
.container section:nth-child(4),
.container section:nth-child(5){
width:auto;
}
.container section{
padding-top: 18vh;
}
.caption{
padding:10px;
}
.caption h2 {
font-size:2em;
}
.captionp{
font-size: 14px;
}
}
}
