@charset "utf-8";
/*初期値リセット*/
*{
  margin: 0;
  padding: 0;
}
body{
  line-height: 1;
  font-family: sans-serif;
}
img{
  max-width: 100%;
  vertical-align: bottom;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
  color: inherit;
  display: block;
}

/*スマホ用部品*/
.btn, nav{
  display: none;
}


/*グリッドレイアウト/ヘッダー*/
.container{
  padding: 20px;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 
    200px 2fr 1fr 1fr 2fr;
  grid-template-rows: 
    1fr 1fr;
  gap: 14px;
  box-sizing: border-box;
  background: #cca;
}

header{
  background: #136;
  grid-column: 1; 
  grid-row: 1/3;
  /*position: relative;*/
  display: flex;
    justify-content: center;
    align-items: center;
  border-radius: 10px;
  overflow: hidden;
}
h1 img {
  width: 180px;
  height: 180px;  
  /*position: absolute;
  inset: 0;
  margin: auto; */
}
.container section:nth-of-type(1){
  background: url(../img/hashi.jpg)
    no-repeat center/cover;
  grid-column: 2/4;
  grid-row: 1;
}
.container section:nth-of-type(2){
  background: url(../img/girl.jpg)
    no-repeat center/cover;
  grid-column: 4/6;
  grid-row: 1;
}
.container section:nth-of-type(3){
  background: url(../img/himawari.jpg)
    no-repeat center/cover;
  grid-column: 2;
  grid-row: 2;
}
.container section:nth-of-type(4){
  background: url(../img/color.jpg)
    no-repeat center/cover;
  grid-column: 3/5;
  grid-row: 2;
}
.container section:nth-of-type(5){
    background: url(../img/blue.jpg)
      no-repeat center/cover;
  grid-column: 5;
  grid-row: 2;
}


/*.container内コンテンツ*/
.container section{
  border: 10px solid #873;
  box-shadow: 6px 8px 10px #321;
  box-sizing: border-box;
  overflow: hidden;  
}
 .caption{
  background: rgba(0, 0, 0, 0.621);
  color: #fff;
  height: 100%;
  padding-top: 15vh;
  opacity: 0;
  transition: 300ms;
}
.caption:hover{
  opacity: 1;
}

.caption h2{
  text-align: center;
  font-size: 1.2em;
}
.caption i{
  font-size: 0.8em;
  margin-right: 0.5em;
}
.caption p{
  width: 80%;
  margin:15px auto 0;
  line-height: 1.3;
  font-size: 0.9em;
}


/* topへ戻るボタン */
.top{
width:50px;
height: 50px;
color: #fff;
border: 1px solid #fff;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
text-align: center;
position: fixed;
right: 5px;
bottom: 5px;
z-index:9999;
}
.top i{
display: block;
padding-top: 5px;
font-size: 1.2em;
}

/*welcome豊島画廊へようこそ*/
.welcome{
  max-width: 1020px;
  margin:150px auto;
  padding: 20px;
  background: url(../img/gallery.jpg) 
    no-repeat center/cover;
  border-radius: 20px;
}
.welcome h2{
  padding: 20px;
  margin-bottom: 50px;
  color: #28b;
}

/* 疑似要素表示文字 */
.welcome h2::after{
content: "Welcome";
display: block;
font-size: 2em;
margin-top: 10px;
font-family: 'Ubuntu', sans-serif; 
color: #aaa;
}
.welcome p{
  width: 60%;
  line-height: 1.5;
  margin-bottom: 20px;
}
.more{
display: block;
color: #fff;
background:#28b;
width: fit-content;
padding: 1em 2em;
margin: 70px 20px 0;
border-radius: 2em;
transition: 300ms;
}
.more:hover{
background:#f00;
}


.keyVis{
  background: url(../img/garo.jpg)
    no-repeat center/cover;
  background-attachment: fixed;
  line-height: 2.5;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
}
.keyVis a{
  padding-top:120px;
  height: 300px;
  color: #fff;
  transition: 300ms;
}

.keyVis a:hover {
  background: rgba(0, 0, 0, 0.6);
  letter-spacing: 3px;
  scale: 1.3;
}



.info{
  margin: 150px auto;
  max-width: 1020px;
}
.info h2{
    padding: 20px;
  margin-bottom: 50px;
  color: #28b;
}
.info h2::after{
content: "infomation";
display: block;
font-size: 2em;
margin-top: 10px;
font-family: 'Ubuntu', sans-serif; 
color: #aaa;
}

.infoBox{
  display: flex;
  justify-content: 
    space-between;
}
.infoBox section{
  width: 30%;
  text-align: center;
}
.info i{
  line-height: 130px;
  width: 130px;
  background: #28b;
  border-radius: 50%;
  color: #fff;
  font-size: 50px;
  transition: 300ms;
}
.info a:hover i{
  background: #f11;
  scale: 1.2;
}

.info h3{
  margin: 30px 0;
}

.info p{
  text-align: start;
  line-height: 1.6;
}



.map{
  position: relative;
  padding-bottom: 55%;
  /*横幅に対しての高さの％*/
}
.map iframe{
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}

footer{
  margin-top: 50px;
  padding: 30px 0;
  background: #cca;
  text-align: center;
}


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

  .container{
    grid-template-columns:
     2fr 1fr 1fr 2fr ;
    grid-template-rows:
     100px 1fr 1fr;
    gap: 12px;
    padding: 15px; 
  }

  header{
  grid-column: 1/5; 
  grid-row: 1;
}
h1 img {
  width: 80px;
  height: 80px;  
}
.container section:nth-of-type(1){
  grid-column: 1/3;
  grid-row: 2;
}
.container section:nth-of-type(2){
  grid-column: 3/5;
  grid-row: 2;
}
.container section:nth-of-type(3){
  grid-column: 1;
  grid-row: 3;
}
.container section:nth-of-type(4){
  grid-column: 2/4;
  grid-row: 3;
}
.container section:nth-of-type(5){
  grid-column: 4;
  grid-row: 3;
}

.container section{
  border: 7px solid #873;
}
.caption{
  margin-inline: 10%;
  padding: 0.6em;
  height: auto;
  margin-top: 12vh;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  border-radius: 8px;
  opacity: 1;
}
  .caption h2{
    font-size: 1em;
  }
  .caption p{
    width: auto;
    font-size: 0.8em;
    margin-top: 5px;
  }
}

@media screen and (max-width:743px){
  
  .container{
    display:block;
    height: auto;
  }     

  .container section{
    display: block;
    height: calc((100vh - 100px)/2);
    margin-top: 12px;
  }


  .welcome{
    margin: 20px auto;
    padding-bottom: 1px;
    border-radius: 0;
  }
  .welcome h2{
    padding: 0 10px;
    margin-bottom: 20px;
  }
  .welcome p{
    width: auto;
  }
  .more{
    margin: 0 10px;
  }

.info h2{
  margin-bottom: 0;
}
  .infoBox{
    display: block;
    box-sizing: border-box;
    padding: 10px;
  }
  .infoBox section{
    width: 100%;
    margin: 20px;
    margin-inline: auto;
    padding: 20px;
    background: #ddd;
    border: 1px solid #28b;
    border-radius: 5px;
    box-sizing: border-box;
  }


/* Sp parts */
.btn{
display: block;
width: 50px;
height: 50px;
text-align: center;
color: #873;
background: rgba(0, 0, 0, 0.461);
border: 2px solid #873;
border-radius: 5px;
font-size: 35px;
position: absolute;
top: 5px;
right: 5px;
overflow: hidden;
}
.btn i{
display: block;
line-height: 50px;
}
.menu i:first-child{
  display: none;
}
nav{
position: fixed;
width: 100%;
top: 59px;
left: 100%;
display: block;
transition: 350ms;
}
.slide{
  left: 0;
}
nav li{
line-height: calc((80vh - 59px)/5);
}
nav li:last-child{
  border-bottom: 1px solid #fff;
}
nav a{
padding-left: calc(50% - 3em);
color: #fff;
font-size: 22px;
font-weight: bold;
background:
rgba(17, 51, 102, 0.7);
border-top: 1px solid #fff;
}

footer{
  padding: 20px 0;
}
}