/* ------------------------------
   ベースリセット
------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;
}

header, main, footer {
  display: block;
}

html {
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  height: 100%;
  white-space: normal;
  font-family: sans-serif;
  line-height: 1.5;
  color: #333;
}

/* ------------------------------
   ワイドラッパー（全画面幅）
------------------------------ */
.wide-wrapper{
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.headerback{
  background-color: #f7f7f7;
}

/* 主にヒーロー画像等の横幅イメージ用 */
.wide-wrapper img{
  margin: 0 auto 0 auto;
  max-width: 1280px;
}

/* ------------------------------
   全体ラッパー（最大幅960px）
------------------------------ */
.main-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  background-color: #fff;
}

/* ------------------------------
   ベーシックな要素
------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 0.5em;
}

h2{
  font-size: 2em;
  font-size: clamp(20px, 5vw, 35px);
  color:#de0405;
  text-align:center;
}

h3{
  font-size: 1.5em;
  font-size: clamp(20px, 3vw, 30px);
  color:#000;
  text-align:center;
}



h2.ribbon {
  /* 背景の指定順序: 
    1. 上にくる画像 (画像A)
    2. 下にくる画像 (画像B)
    3. 一番背面の背景色
  */

  color: #fff;

  background-image: 
    url('../img/ribbon_up.png'), 
    url('../img/ribbon_down.png');
  background-position: 
    top center, 
    bottom center;
  background-repeat: 
    no-repeat, 
    no-repeat;
  
  /* 画像の横幅を100%にし、高さは自動調整。これで画面幅に合わせて伸縮します */
  background-size: 100% auto;

  /* 2. フォントサイズを可変に (例: ビューポート幅の5% ) */
  font-size: clamp(16px, 4vw, 35px);

  /* 3. 縦方向の中央揃え (Flexboxを使用) */
  display: flex;
  align-items: center;    /* 垂直方向中央 */
  justify-content: center; /* 水平方向中央 */
  
  /* 高さの設定（画像が重ならないよう、ある程度の高さが必要です） */
  height: clamp(20px, 5vw, 50px);
  background-color: #343E48;

  /* 画像と文字の衝突を避けるための内側余白 */
  padding: 10% 0;
  box-sizing: border-box;
}



/* h1などをほぼ非表示にしつつ、SEO的に認識させるための設定 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

p {
  font-size: 18px;
  line-height: 200%;
  margin-bottom: 1.5em;
}

/* ブロック装飾 */
#reason1{
  padding: 1em;
  padding-bottom: 0.1em; 
  background-color: #F1F4F9; /* 画像の周囲と同じ色を指定 */
  background-image: url('../img/reasonback.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  /* 画像がブロックより大きい場合に備えて、収まるように指定 */
  background-size: contain;
}

#mdsec{
  margin-top: 0em;
  padding: 1em;
  padding-bottom: 0.1em; 
  background-color: #ffffff; /* 画像の周囲と同じ色を指定 */
  background-image: url('../img/mdsec1.png');
  background-repeat: no-repeat;
  background-position: right center;
  /* 画像がブロックより大きい場合に備えて、収まるように指定 */
  background-size: contain;
}

#fcsec{
  margin-top: 0em;
  padding: 1em;
  padding-bottom: 0.1em;
  /*background-color: #b5ffbf;*/
}

/* 文字装飾 */

h3.dhead{
  margin-top: 1.5em;
  margin-bottom: 1em;
  padding: 0.25em 0 0.25em 0;
  background-color: #3B4C5E;
  /*font-size: 1.8em;*/
  color:#FF6;
  text-align:center;
}

h3.mhead{
  margin-top: 1.5em;
  margin-bottom: 1em;
  padding: 0.25em 0 0.25em 0;
  background-color: #F02036;
  /*font-size: 1.8em;*/
  color:#FFF;
  text-align:center;
}

.blackfont { color: #000; }
.redfont { color: #d80011; }
.yellowback { background-color:#FF6;}
.boldfont { font-weight: bold; }

.bgfont1 {
  font-size: 1.2em;
}

.ulfont {
  text-decoration: underline;
}

/* 箇条書きリスト */
.bullet {
	margin-bottom:1.5em;
	padding: 0;
  list-style-type: none;
  color: green;
  font-weight: bold;
	line-height: 200%;
}

.bullet li {
  background: url("../img/bullet-icon-g.webp") no-repeat left center; /* 例: -3px 上にずらしたい */
  padding-top: 5px;   
  padding-left: 28px;
  font-size: 1.1em;
}

/* ------------------------------
   ヘッダー／メイン
------------------------------ */
.site-header, .site-footer {
  max-width: 960px;
  line-height: 200%;
  background-color: #f7f7f7;
  text-align: center;
  margin: 0 auto;
  padding: 1em;
}

.common-header{
  display: block;
  margin: 1em auto 0 auto;
  text-align: center;
  width: 50%;
}

.headcopy-test{
  font-size: 2em;
  font-weight: bold;
  line-height: 130%;
}

.site-main {
  padding: 20px;
}

#store_list{
  margin-bottom: 1.5em;
}

/* ------------------------------
   画像
------------------------------ */

img {
  width: 100%;
}

/* PC専用画像 */
.img-pc {
  display: block; /* デフォルトは表示 */
}

@media (max-width: 767px) {
  .img-pc {
    display: none;
  }
}

/* モバイル専用画像 */
.img-sp {
  display: none; /* デフォルトは非表示 */
}

@media (max-width: 767px) {
  .img-sp {
    display: block;
    width: 100%; /* スマホで横幅調整 */
  }
}

/* 記事内画像 */
.article-image {
  float: right; /* 画像を右に寄せてテキストを回り込ませる */
  width: 300px;
  max-width: 50%;
  margin: 0 0 20px 20px; /* 下と左に余白を設定 */
}






/* ------------------------------------------------ */
/* フッターメニュー共通スタイル (デスクトップ含む) */
/* ------------------------------------------------ */

.footer-nav-container{
	line-height: 200%;
}

.footer-nav-list {
    display: flex; /* デスクトップでは横並び */
    justify-content: center; /* 項目を中央に配置 */
    list-style: none;
}

.footer-nav-list li {
    padding: 0 15px; /* 項目間に間隔を空ける */
    white-space: nowrap; /* デスクトップでは改行を防ぐ */
    margin: 0; /* 💡 リストアイテムのマージンもリセット */
}

.footer-nav-list a {
    text-decoration: none;
    font-size: 1.0em;
    color: #333;
}



/* ------------------------------------------------ */
/* モバイル向けスタイル (縦積みへの切り替え) */
/* ------------------------------------------------ */
@media screen and (max-width: 768px) {
    
    .footer-nav-list {
        flex-direction: column; /* 縦積みに変更 */
        align-items: center; 
        
        /* 調整箇所: モバイルでの上下余白も調整 */
        padding: 0; 
        margin: 0;
    }

    .footer-nav-list li {
        width: 100%; 
        max-width: 300px; 
        padding: 10px 0; /* 上下の余白を確保 */
        text-align: center;
        white-space: normal; 
        margin: 0; 
    }
    
    .footer-nav-list a {
        display: block;
        padding: 5px 0;
        border-bottom: 1px solid #eee; 
    }

    .footer-nav-list li:last-child a {
        border-bottom: none; 
    }
}