@charset "UTF-8";
html{
    font-size: 100%;
}
body {
    font-family: "", sans-serif;
    letter-spacing: 0.05em;
    line-height: 2.5;
  }
  
  img {
    max-width: 100%;/*max-widthにすると、imgおのおののサイズにフィットする*/
  }
  .sub-title{
    font-size: 40px;
    border-bottom: 2px solid red;
    text-align: center;
    display: inline-block;
  }
  .sec-title{
    font-size: 72px;
    color: white;
    position: absolute;
    text-align: center;
    filter: drop-shadow(1px 1px 10px #c0c0c0);
    top: 50%; /* 垂直方向の中央 */
    left: 50%; /* 水平方向の中央　☝と☟との３点セットで画面幅が変わってもセンターにいてくれる */
    transform: translate(-50%, -50%); /* 自身のサイズの半分だけ移動 */
  }
  .img-fixed{/*これが画像固定のCSS*/
    height: 300px;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }

   /*********************************************
  PC Style
  *********************************************/
  /************************
  header
  ************************/
#header{
  width: 100%;
  height: 100vh;
  background-image: url(../img/mainvisual.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  padding: 20px;
  position: relative;
  color: white;
}

#header nav ul{
  display: flex;
  justify-content: flex-end;
}

nav ul li{
  margin-left: 30px;
}
.top-title{
  padding: 0 16px;
  text-align: center;
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  filter: drop-shadow(1px 1px 10px #c0c0c0);/*COFFEEロゴが光っているようにみえる*/
}
 /************************
  MENU
  ************************/

.menu-img{
  background-image: url(../img/menu.jpg);
  position: relative;
}
.item dt{
  border-bottom: 2px dotted;
  width: 87%;/*flex wrapと合わせて調整、これがないと一行に３つ入ってしまう*/
}
.item dd{
  width: 13%;
}
.item{
  display: flex;
  flex-wrap: wrap;
}
.detail{
 width: 100%;
 padding:20px 100px; 
}
.detail-flex{
  display: flex;
  width: 100%;
  
}
.detail-left{
  width: 50%;
  padding: 8%;
  /*☟h３のみをセンターにするため*/
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.detail-right{
  width: 50%;
  padding: 8%;
   /*☟h３のみをセンターにするため*/
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央配置 */
}

 /************************
  COFFEE
  ************************/
.about-img{
  background-image: url(../img/about.jpg);
  position: relative;
}

.about-coffee{
  width: 100%;
  padding: 8%;
   /*☟h３のみをセンターにするため*/
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央配置 */
}
 /************************
  LOCATION
  ************************/
.location-img{
  background-image: url(../img/location.jpg);
  position: relative;
  margin-bottom: 50px;
}
.location {
  text-align: center;
}
.map-text-set{
  width: 80%;
  margin: 0 auto;
}
.location-text{
  width: 700px;
  margin: 0 auto;
  text-align: left;
 
}
.map-text-set{
  margin-top: 50px;
}
footer{
  margin: 20px 0;
  width: 100%;
  text-align: center;
}

  /*********************************************
  Responsive Style
  *********************************************/
  /* タブレット、PCサイズの表示 */
@media screen and (max-width: 768px) {
  /************************
  menu
  ************************/
.detail{
 width: 100%;
 padding:0 ; 
}
.detail-flex{
  flex-direction: column;
  width: 100%;
}
.detail-left{
  width: 100%;
}
.detail-right{
  width: 100%;
}

 /************************
  LOCATION
  ************************/
  .map{
    display: flex;
    flex-direction: column; /* 縦に配置 */
    align-items: center; /* 中央に配置 */
    padding: 0 10%; /* 両脇に余白を持たせる */
}
.map-text-set {
    width: 100%; /* 幅を100%に設定 */
    max-width: 700px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央配置 */
}

.map-img {
    display: flex;
    justify-content: center; /* 中央に配置 */
}

.map-img iframe {
    width: 100%; /* 幅を100%に設定 */
    height: 450px; /* 高さを固定 */
    max-width: 700px; /* 最大幅を設定 */
    border: 0;
    margin-top: 50px;
}

.location-text {
    width: 100%; /* 幅を100%に設定 */
    max-width: 700px; /* 最大幅を設定 */
    text-align: left;
}


}