/*
Theme Name: komorebi
Theme URI: 
Description: komorebiカフェのHP
Version: 1.0.0
Author: kotawa
Author URI: http://www.kotawa0303.shop/
*/

/* =====全体共通===== */

*{
  box-sizing: border-box; 
}

html, body {
  margin: 0;
  overflow-x: hidden;
}

.container{
 max-width:1080px;
 margin: 0 auto;
}

h2 {
  font-family: "Hina Mincho", serif;
  font-weight: 100;
  font-style: normal;
}

h3 {
  font-family: "Stalemate", cursive;
  font-weight: 400;
  font-style: normal;
}

h4, p, a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.section-title {
  text-align: center;
  font-size: 100px;
  color: #A38D5B;
  margin-top: 50px;
  margin-bottom: 0;
}

.caption {
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 3;
  color: #55433F;
  margin-top: 0;
}

/* ======ヘッダー===== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 80px;
  height: 100px;
}


#header-logo img {
  width: 90px;
  height: 90px;
}

#nav-pc ul {
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

#nav-pc li {
  list-style: none;
}

#menu-sp {
  display: none;
}

#nav-sp {
  display: none;
}

#nav-sp.open {
  display: block;
}

/* =====ナビゲーションリンクの装飾設定===== */
#nav-pc a {
  text-decoration: none;
  color: #492713;
  font-size: 16px;
}



#nav-pc a:hover {
  text-decoration: underline;
}


/* ========フッター========= */

#footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

#footer-logo img {
  width: 100px;
  height: auto;
}



/* フッターナビ */
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 0;
  margin: 50px 0;
}

.footer-nav > li {
  list-style: none;
  text-align: left;
}


/* 子リスト */
.footer-nav ul {
  padding: 0;
}

.footer-nav ul li {
  list-style: none;
  margin-bottom: 5px;
}

/* リンク */
.footer-nav a {
  text-decoration: none;
  color: #633418;
  font-size: 16px;
}

.footer-nav a:hover {
  opacity: 0.6;
}



#sns-footer {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  gap: 20px;             
}

/* SNSアイコン横並び */
.sns-btns {
  display: flex;
  gap: 30px; /* アイコン同士の間隔 */
}

/* アイコンサイズ */
#sns-footer img {
  width: 50px;
  height: auto;
}

/* コピー */
#copyright {
  color: #4B3020;
  margin: 0;
  text-align: center;
}


/* ===============================================================================
　　　　　　　　　　　　　　　　　　　　　　　　　スマホ用のスタイル 
====================================================================================*/

/* 画面幅が767px以下のとき */
@media screen and (max-width: 767px) {
   /* PC用ナビゲーション非表示 */

  header {
    height: 80px;
    padding: 0 20px;
  }

   #nav-pc {
     display: none;
   }
 
  #header-logo img {
    width: 60px;
    height: 60px;
    margin: auto 20px;
  }

   #menu-sp img {
  width: 40px;
  height: 40px;
  display: block;
}

  #close img {
    width: 40px;
    height: 40px;
    display: block;
  }
   /* ハンバーガーメニュー */
   #menu-sp {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    padding: 0;
    margin-right: 20px;
   }
 
   /* スマホ用ナビゲーションの表示切替*/
   /* 初期状態、レイアウトと非表示設定 */

   #nav-sp ul {
      padding: 0;
      margin: 0;
    }

    #nav-sp li {
      list-style: none;
      margin-bottom: 20px;
    }

    #nav-sp a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
    }


   #nav-sp {

      position: fixed;
      top: 0;
      right: 0;

      width: 50%;

      height: 30dvh;

      background: #8CA958;

      z-index: 100;

      padding: 80px 20px;

      display: none;
   }

   #nav-sp.open {
    display: block;
   }

   #close {
  position: absolute;
  top: 20px;
  left: 80%;

  background: transparent;
  border: none;

  padding: 0;
  z-index: 200;
}


}