/* ------------------------------
   0.  Reset & 基本変数
--------------------------------*/
:root{
  /* Color Palette */
  --c-brand:  #0C2E50;   /* ネイビー */
  --c-accent: #FFB000;   /* オレンジ */
  --c-bg:     #F5F7F9;   /* 薄グレー */
  --c-grad1:  #FFB86C;   /* グラデ起点 */
  --c-grad2:  #FF8E45;   /* グラデ終点 */
  --c-white:  #FFFFFF;

  /* Typography */
  --fs-base: 16px;
  --fs-h1:   2.2rem;
  --fs-h2:   1.5rem;

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family: "Noto Sans JP",sans-serif;
  font-size: var(--fs-base);
  color: var(--c-brand);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;height:auto;display:block;}

/* ------------------------------
   1. Utility
--------------------------------*/
.container{
  width: min(100% - 32px, var(--container-max));
  margin-inline:auto;
}
.btn{
  display:inline-block;
  padding:12px 32px;
  border-radius:32px;
  font-weight:700;
  text-decoration:none;
  transition:.25s;
  text-align: center;
}
.btn--primary{
  background: var(--c-brand);
  color: var(--c-white);
}
.btn--accent{
  background: linear-gradient(135deg,var(--c-grad1),var(--c-grad2));
  color:#000;
}
.btn:hover{opacity:.85}

.btn--cta{
  text-align: center;
  margin: 32px auto;
}
/* ------------------------------
   2. Hero
--------------------------------*/
.hero{
  /* 背景グラデ + ぼかし画像の上に商品写真を重ねる例 */
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height: 90vh;
  text-align:center;
  color:var(--c-white);
}
.hero::before{ /* グラデ */
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,#003366 0%,#0066A4 50%,#009AC4 100%);
  z-index:-2;
}
.hero::after{ /* 上から淡いノイズ or 模様PNG をぼかし */
  content:"";
  position:absolute;inset:0;
  background:url("../img/hero_overlay.png") center/cover no-repeat;
  mix-blend-mode: overlay;
  opacity:.4;
  z-index:-1;
}
.hero h1{
  font-size:clamp(32px,5vw,60px);
  line-height:1.3;
  margin-bottom:16px;
}
.hero p{margin-bottom:32px;}
/* 画像を横5枚に並べる */
.img-row{
  display:flex;

  max-width:600px;         /* 全体横幅 ≒ 600px */
  margin:2em auto;           /* 中央寄せ */
}

.img-row img{
  flex:1;/*  32px = gap8px × 4ヶ所 */
  height:auto;            /* アスペクト比を保持 */
  width:50PX;
  object-fit:cover;       /* 必要ならトリミング */
  border-radius:6px;      /* 角丸（任意） */
}

/* ② 768px 以上は auto-fit で 160px以上を並べる */
@media (min-width:768px){

  .img-row{ 
      gap:8px;                 /* 画像間の余白 */
    img{
  flex:1 0 calc((100% - 32px) / 5); /* 32px = gap8px × 4ヶ所 */
  height:120px;            /* アスペクト比を保持 */
  width:auto;
  object-fit:cover;       /* 必要ならトリミング */
  border-radius:6px;      /* 角丸（任意） */
/*    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap:12px;*/
  }
}
}
/* ------------------------------
   3. Section Base
--------------------------------*/
.section{
  padding-block: 80px;
}
.sec-title{
  font-size:var(--fs-h2);
  font-weight:700;
  text-align:center;
  margin-bottom:48px;
  position:relative;
}
.sec-title::after{ /* オレンジバー */
  content:"";
  display:block; width:48px; height:4px;
  background:var(--c-accent);
  margin:12px auto 0;
  border-radius:2px;
}

/* ------------------------------
   4. Flow Section (4 Step Grid)
--------------------------------*/
/* ------------------------------
   Flow list — モバイル2列 / PC自動
--------------------------------*/

/* ① まず “モバイル基準” を 2列固定 に */
.flow__list{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2カラム */
  list-style:none;     /* ● を消す */
  padding-left:0;      /* 左インデントもゼロに */
}
.flow__item{
  background:var(--c-white);
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition:transform .2s;
}
.flow__item:hover{transform:translateY(-4px);}
.flow__item img{width:100%;margin-inline:auto 16px;}
.flow__item h3{margin:16px 0 8px;font-size:1.125rem;}


/* ② 768px 以上は auto-fit で 160px以上を並べる */
@media (min-width:768px){
  .flow__list{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap:12px;
  }
}

/* ------------------------------
   5. Pricing Section
--------------------------------*/

/* ------------------------------
   Price Table  グラデ背景版
--------------------------------*/
.price-table{
  width:100%;
  max-width:950px;
  margin:0 auto;
  border-collapse:separate;   /* 角丸効かせつつセル分離 */
  border-spacing:8px 8px;       /* 横8px | 縦8px のすき間 */
  border-radius:16px;         /* テーブル外枠の角丸 */
  overflow:hidden;
  color:#fff;                 /* デフォルト白文字 */
}

/* ========== ヘッダー ========== */
.price-table thead th{
  padding:18px 12px;
  font-weight:700;
  background:linear-gradient(90deg,#002D55 0%,#4B4862 100%);
  color:#fff;
}

/* ======= ボディ行セル ======== */
/* 奇数行セル：薄めグラデをセル毎に */
.price-table tbody tr td.gradation{
  background:linear-gradient(90deg,#5B687C 0%,#8C86A2 100%);
  color:#fff;
}
/* 偶数行セル：ライトグレー */
.price-table tbody tr td{
  background:#fff;
  color:#000;
}
/* 送料セル(rowspan)だけ白 */
.price-table tbody td[rowspan]{
  background:#fff;
  color:#000;
}

/* セル共通パディング & 中央寄せ */
.price-table td,
.price-table th{
  text-align:center;
  padding:18px 12px;
  border-radius:8px;     /* セル単体も角丸にして見栄えUP */
}

/* モバイルで横スクロールさせたくない場合 */
@media (max-width:767px){
  .price-table{
    font-size:0.85rem;
  }
}


/* ------------------------------
   Price Note  (料金注釈リスト)
--------------------------------*/
.price-note{
  list-style:none;      /* ● を消す */
  max-width:720px;      /* テーブルと同幅 */
  margin:24px auto 0;   /* 上余白24・左右auto＝中央寄せ */
  padding-left:0;
  font-size:0.9rem;
  color:#333;
}
.price-note li{
  position:relative;
  padding-left:1em;   /* 黒ポチ分のスペース */
  margin-bottom:6px;
}
.price-note li::before{
  content:"*";          /* 手動で黒丸を生成 */
  position:absolute;
  left:0;
  top:0;
  color:var(--c-brand); /* ブランドカラーで統一 */
}

/* モバイルで少し余白を詰める */
@media (max-width:767px){
  .price-note{
    font-size:0.8rem;
    margin-top:16px;
  }
}

/* 決済ロゴ行 */
.pay-logos{
  display:flex;flex-wrap:wrap;gap:24px;
  justify-content:center;
  margin-top:32px;
}
.pay-logos img{height:6em;width:auto;}


/* ------------------------------
   FAQ セクション
--------------------------------*/
.faq{
  background:#fff;                       /* 全体は白背景 */
}
.sec-lead{
  text-align:center;
  margin-top:8px;
  margin-bottom:40px;
  font-size:0.95rem;
  color:#555;
}

/* 2カラムレイアウト */
.faq__grid{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr 420px;      /* 左=伸縮 右=固定 */
  max-width:var(--container-max);
  margin-inline:auto;
}

/* ---------- FAQカード列 ---------- */
.faq-list{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.faq-card{
  background:linear-gradient(90deg,#002D55 0%, #1F3149 100%);
  border:2px solid var(--c-accent);
  border-radius:12px;
  padding:24px 28px;
  color:#fff;
}
.faq-q{
  font-weight:700;
  margin-bottom:6px;
}
.faq-a{
  font-size:0.95rem;
  line-height:1.5;
}

/* ---------- 右側：注意事項 ---------- */
.faq-aside{
  background:#6C7687;                    /* グレー寄り背景 */
  color:#fff;
  border-radius:12px;
  padding:32px 28px 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.aside-title{
  font-size:1.125rem;
  font-weight:700;
  margin-bottom:16px;
}
.ng-list{
  list-style:none;
  margin:0 0 16px;
  padding:0;
}
.ng-list li{
  margin-bottom:10px;
  font-size:0.95rem;
}
.ng-list li::before{
  content:"❌";
  margin-right:8px;
  color:#FF5050;
}
.aside-note{
  font-size:0.8rem;
  line-height:1.4;
  margin-bottom:24px;
  color:#FFE6C3;                         /* 少し目立つ淡オレンジ */
}

/* CTA ボタンは既存 .btn--accent を使用 */
/* .faq-aside a.btn { margin-top:auto; }  はHTMLで inline style 指定済み */

/* ---------- レスポンシブ ---------- */
@media (max-width:1023px){
  .faq__grid{
    grid-template-columns:1fr;           /* タブレット以下は1列 */
  }
  .faq-aside{
    max-width:100%;
    /*margin-inline:auto;*/
    /*margin-top:16px;*/
  }
}
@media (max-width:767px){
  .sec-lead{margin-bottom:32px;}
  .faq-card{padding:20px;}
  .faq-aside{padding:24px 20px;}
  .aside-note{font-size:0.75rem;}
}

/* ------------------------------
   order セクション
--------------------------------*/
.order{
  p{
    padding: 0 0 50px 0 ;
  }
}

/* ------------------------------
   footer
--------------------------------*/

footer{
 p{
  text-align:center;
  padding:10px 40px;
  font-size:0.85rem;
  color:#666;
 }
 img{
  width: 120px;
  display: inline;
  margin: 0 auto 2rem;
 }
}


/* ===========================
   用途訴求セクション共通
=========================== */
.usecase{
  background:#FFFFFF;
}
.usecase--alt{
  background:var(--c-bg);               /* 交互に薄グレー背景 */
}
.uc-title{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  margin-bottom:32px;
  line-height:1.4;
}
.uc-story{
  max-width:720px;
  margin:0 auto 48px;
  font-size:1rem;
  text-align:center;
  line-height:1.7;
}
.uc-story strong{
  color:var(--c-accent);
}

/* アイテムカード */
.item-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  max-width:800px;
  margin-inline:auto;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2カラム */
  list-style:none;     /* ● を消す */
  padding-left:0;      /* 左インデントもゼロに */
}

/* ② 768px 以上は auto-fit で 160px以上を並べる */
@media (min-width:768px){
  .item-grid{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap:12px;
  }
}
.item-card{
/*  background:#fff;*/
/* background:linear-gradient(120deg,#003366 0%,#0066A4 50%,#009AC4 100%);*/
  background:linear-gradient(90deg,#5B687C 0%,#8C86A2 100%);
  color:#fff;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  padding:24px 16px;
  text-align:center;
  transition:transform .25s;
}

.item-card-experience{
  background:linear-gradient(120deg,#FFE5EC 0%,#FF99B3 100%);
  color:var(--c-brand);
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  padding:24px 16px;
  text-align:center;
  transition:transform .25s;
}
.item-card:hover{transform:translateY(-4px);}
.item-card img{
  object-fit: cover;
  height: 100%;
  margin:0 auto 12px;
}
.item-card span{
  display:block;
  font-weight:600;
  font-size:0.95rem;
 /* color:var(--c-brand);*/
}


.item-card-experience{
  background:linear-gradient(120deg,#FFE5EC 0%,#FF99B3 100%);
  color:var(--c-brand);
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  padding:24px 16px;
  text-align:center;
  transition:transform .25s;
}
.item-card-experience:hover{transform:translateY(-4px);}
.item-card-experience img{
  object-fit: cover;
  height: 100%;
  margin:0 auto 12px;
}

.item-card-experience span{
  display:block;
  font-weight:600;
  font-size:0.95rem;
 /* color:var(--c-brand);*/
}
.item-card ul,.item-card-experience ul{
  list-style:none;     /* ● を消す */
  padding-left:0;      /* 左インデントもゼロに */
   li:first-child{
      height:128px;
   }
}

.ecsite{
  padding: 1rem 0;
}
.ecsite a{
  display: block;
}
.ecsite a:hover .shadow{
  background-color: #eee;
  color: #222;
  --tw-shadow: 0 1px 3px 0 rgb(4 4 4 / 0.1), 0 1px 2px -1px rgb(4 4 4 / 0.1);
  --tw-shadow-colored: 0 2px 4px 0 var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.ecsite a:hover .bg-white{
 background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

/* 


320pxまでの幅の場合に適応される



 */


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

.hero{
  min-height: 55vh;
}
.section{
 padding-block: 40px;
}
.uc-title{
  font-size:1rem;
  font-weight:700;
  text-align:center;
  margin-bottom:32px;
  line-height:1.4;
}
.uc-story{
  margin:0 auto 32px;
  font-size:0.9rem;
  text-align:center;
  line-height:1.4;
}
  .item-grid{
     gap:6px;
  }
.item-card img{
  object-fit: cover;
  height: auto;
  margin:0 auto;
}
.item-card span{
  display:block;
  font-weight:500;
  font-size:0.75rem;
 /* color:var(--c-brand);*/
}
.item-card-experience img{
  object-fit: cover;
  height: auto;
  margin:0 auto;
}

.item-card-experience span{
  display:block;
  font-weight:500;
  font-size:0.75rem;
 /* color:var(--c-brand);*/
}
.sec-title{
  font-size:1rem;
  font-weight:700;
  text-align:center;
  margin-bottom:24px;
}
.flow__list{
  gap:6px;
}
.flow__item{
  border-radius:8px;
  padding:8px 6px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.flow__item img{width:100%;margin-inline:auto 8px;}
.flow__item h3{margin:8px 0 4px;  font-weight:400;font-size:0.9rem;}
.flow__item p{font-size:0.75rem;}

.price-table{
  border-spacing:4px 4px;       /* 横8px | 縦8px のすき間 */
  border-radius:8px;         /* テーブル外枠の角丸 */
}

/* ========== ヘッダー ========== */
.price-table thead th{
  padding:9px 6px;
  font-weight:500;
}

/* セル共通パディング & 中央寄せ */
.price-table td,
.price-table th{
  text-align:center;
  padding:9px 6px;
}
.price-note{
  max-width:720px;      /* テーブルと同幅 */
  margin:24px auto 0;   /* 上余白24・左右auto＝中央寄せ */
  padding-left:0;
  font-size:0.9rem;
  color:#333;
}
.pay-logos{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:12px;
}
.pay-logos img{height:6em;width:auto;}


}