/*----------------------------------------------------
基本設定
-----------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Murecho:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');/* Roboto（半角英数字用） */
@font-face {
  font-family: 'CustomLatin';
  src: url('/fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  unicode-range: U+0000-00FF; /* ASCII範囲：半角英数字や記号 */
}

@font-face {
  font-family: 'CustomLatin';
  src: url('/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 100%;
  unicode-range: U+0000-00FF;
}
/* Zen Kaku Gothic New（日本語用） */
@font-face {
  font-family: 'CustomJapanese';
  src: url('/fonts/ZenKakuGothicNew-Regular.ttf') format('truetype');
  font-weight: 400;
  unicode-range: U+3000-30FF, U+4E00-9FFF;
}

@font-face {
  font-family: 'CustomJapanese';
  src: url('/fonts/ZenKakuGothicNew-Light.ttf') format('truetype');
  font-weight: 300;
  unicode-range: U+3000-30FF, U+4E00-9FFF;
}

@font-face {
  font-family: 'CustomJapanese';
  src: url('/fonts/ZenKakuGothicNew-Medium.ttf') format('truetype');
  font-weight: 500;
  unicode-range: U+3000-30FF, U+4E00-9FFF;
}

@font-face {
  font-family: 'CustomJapanese';
  src: url('/fonts/ZenKakuGothicNew-Bold.ttf') format('truetype');
  font-weight: 700;
  unicode-range: U+3000-30FF, U+4E00-9FFF;
}

@font-face {
  font-family: 'CustomJapanese';
  src: url('/fonts/ZenKakuGothicNew-Black.ttf') format('truetype');
  font-weight: 900;
  unicode-range: U+3000-30FF, U+4E00-9FFF;
}
body {
    font-family: 'CustomLatin', 'CustomJapanese', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.75;
    letter-spacing: 0.1em;
    font-size: 16px;
}
/*----------------------------------------------------
ショッピングガイド
-----------------------------------------------------*/
@media only screen and (min-width: 768px) {
  /* ===== start : 共通設定 ===== */  
  /* start : ヘッダ  */ 
  #shopping-guide-content ul.nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* li間の隙間を均等に */
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
#shopping-guide-content ul.nav-buttons > li {
    background-color: #f7f7f7;
    border: 1px solid #999;
    border-radius: 2.5px;
    flex: 1 1 22%;
    margin: 0.5%;
    box-sizing: border-box;
  }
#shopping-guide-content ul.nav-buttons > li > a {
    position: relative;
    display: block;
    text-align: center;
    padding: 1.25em 0;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #f0f0f0;
    border-radius: 5px;
  }
  @media (max-width: 1024px) {
    #shopping-guide-content ul.nav-buttons > li  {
        flex: 1 1 45%; /* 3列表示に調整 */
    }
  }
  @media (max-width: 768px) {
    #shopping-guide-content ul.nav-buttons {
        justify-content: center; /* 中央揃え */
    }
    #shopping-guide-content ul.nav-buttons li {
        flex: 1 1 45%; /* 2列2行表示 */
        margin: 5px;
    }
    #shopping-guide-content ul.nav-buttons > li > a {
        padding: 8px 0;
        font-size: 14px;
    }
  }
  /* end : ヘッダ  */ 
  /* start : 見出し  */
   #shopping-guide-content h2.section-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
  }
   #shopping-guide-content h3.sg-subtitle {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
  }
   #shopping-guide-content h4.sg-subtitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
  }
  /* end : 見出し  */ 
  /* start : step  */
  #shopping-guide-content dl.flow-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    counter-reset: step;
  }
  #shopping-guide-content dl.flow-list > dt {
    font-weight: bold;
    grid-column: span 2;
  }
  #shopping-guide-content dl.flow-list > dd {
    margin-left: 0;
    line-height: 1.5;
    grid-column: span 5;
  }
  #shopping-guide-content dl.flow-list > dt,
  #shopping-guide-content dl.flow-list > dd {
    margin: 0;
    padding: 5px 10px;
    box-sizing: border-box;
  }
  #shopping-guide-content dl.flow-list > dt:before {
    content: "Step " counter(step);
    counter-increment: step;
    font-weight: bold;
    margin-right: 2em;
    padding: 0.5em 2em;
    color: #fff;
    border-radius: 5px;
  }
  #shopping-guide-content dl.flow-list > dt:nth-child(1)::before {
    background-color: #00B0E0;
  }  
  #shopping-guide-content dl.flow-list > dt:nth-child(3)::before {
    background-color: #0040E0;
  }  
  #shopping-guide-content dl.flow-list > dt:nth-child(5)::before {
    background-color: #3100E0;
  }  
  #shopping-guide-content dl.flow-list > dt:nth-child(7)::before {
    background-color: #A100E0;
  }  
  #shopping-guide-content dl.flow-list > dt:nth-child(9)::before {
    background-color: #E000B0;
  }  
  #shopping-guide-content dl.flow-list > dt:nth-child(11)::before {
    background-color: #E00040;
  }  
  /* --- レスポンシブ対応 --- */
  @media (max-width: 1140px) {
    #shopping-guide-content dl.flow-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    #shopping-guide-content dl.flow-list dt,
    #shopping-guide-content dl.flow-list dd {
        grid-column: span 1;
    }
  }
  /* end : step  */ 
  /* ===== end : 共通設定 ===== */  
}