@charset "UTF-8";
/* =========================================
   1. 変数定義 (:root)
   いただいたカラー設定をすべて網羅しています
   ========================================= */
.pc_display{
    display: block
}
.sp_display{
    display: none
}

.special .more_btn a {
  border-radius: 900px;
  background: #7E9CAF;
  color: #ffffff;
  padding: 0.5em 0;
  width: 80%;
  display: inline-block;
  font-size: 1.2em;
  position: relative;
  margin-bottom: 4em;
}
/* ラインの色と太さ */ :root {
  --color: #f7b52c;
  --brown: #6C2F12;
  --brown2: #D1AB9A;
  --red: #AE7061;
  --yellow: #d4b572;
  --purple: #A48A9D;
  --glay: #757575;
  --green: #38B48B;
  --blue: #38A1DB;
  --l-yellow: #FCC800;
  --pink: #F598B1;
  --l-blue: #4CC8EA;
  --orange: #F2A741;
  --green2: #43AF7F;
  --salmon: #F68F79;
  --emerald: #55C5CB;
  --l-red: #DC6F80;
  --l-purple: #BBA4CF;
  --d-blue: #5D88C6;
  --orange2: #DAA200;
  --moss: #438C7F;
  --brick: #A8311D;
  --o-brown: #A67B5B;
  --y-brown: #C2A857;
  --r-brown: #A8311D;
  --moss: #438C7F;
  --d-purple: #6D5186;
  --charcoal: #54565B;
  --forest: #2D533C;
  --slate-teal: #6198A0;
  --lime: #9CAB40;
  --coffee: #594228;
  --rose: #C06A6B;
  --denim: #666E98;
  --coffee: #6B3906;
  --silver: #BFBFBF;
  --line-width: 3px;
}
.special .more_btn.-brown a {
  background: var(--brown);
}
.special .more_btn.-brown2 a {
  background: var(--brown2);
}
.special .more_btn.-red a {
  background: var(--red);
}
.special .more_btn.-yellow a {
  background: var(--yellow);
}
.special .more_btn.-purple a {
  background: var(--purple);
}
.special .more_btn.-glay a {
  background: var(--glay);
}
.special .more_btn.-green a {
  background: var(--green);
}
.special .more_btn.-blue a {
  background: var(--blue);
}
.special .more_btn.-l-yellow a, .special a.nav-btn.-l-yellow {
  background: var(--l-yellow);
}
.special .more_btn.-pink a, .special a.nav-btn.-pink {
  background: var(--pink);
}
.special .more_btn.-l-blue a, .special a.nav-btn.-l-blue {
  background: var(--l-blue);
}
.special .more_btn.-orange a, .special a.nav-btn.-orange {
  background: var(--orange);
}
.special .more_btn.-green2 a, .special a.nav-btn.-green2 {
  background: var(--green2);
}
.special .more_btn.-l-yellow a, .special a.nav-btn.-l-yellow {
  background: var(--l-yellow);
}
.special .more_btn.-salmon a, .special a.nav-btn.-salmon {
  background: var(--salmon);
}
.special .more_btn.-emerald a, .special a.nav-btn.-emerald {
  background: var(--emerald);
}
.special .more_btn.-l-red a, .special a.nav-btn.-l-red {
  background: var(--l-red);
}
.special .more_btn.-l-purple a, .special a.nav-btn.-l-purple {
  background: var(--l-purple);
}
.special .more_btn.-d-blue a, .special a.nav-btn.-d-blue {
  background: var(--d-blue);
}
.special .more_btn.-orange2 a, .special a.nav-btn.-orange2 {
  background: var(--orange2);
}
.special .more_btn.-moss a {
  background: var(--moss);
}
.special .more_btn.-brick a {
  background: var(--brick);
}
.special .more_btn.-o-brown a {
  background: var(--o-brown);
}
.special .more_btn.-y-brown a {
  background: var(--y-brown);
}
.special .more_btn.-r-brown a {
  background: var(--r-brown);
}
.special .more_btn.-moss a {
  background: var(--moss);
}
.special .more_btn.-d-purple a {
  background: var(--d-purple);
}
.special .more_btn.-charcoal a {
  background: var(--charcoal);
}
.special .more_btn.-forest a {
  background: var(--forest);
}
.special .more_btn.-slate-teal a {
  background: var(--slate-teal);
}
.special .more_btn.-lime a {
  background: var(--lime);
}
.special .more_btn.-coffee a {
  background: var(--coffee);
}
.special .more_btn.-rose a {
  background: var(--rose);
}
.special .more_btn.-denim a {
  background: var(--denim);
}



.img-ttl-box h4.no-line {
  border-bottom: none;
}
.img-ttl-box h4.-moss {
  border-bottom: 1px solid var(--moss);
}
.img-ttl-box h4.-brick {
  border-bottom: 1px solid var(--brick);
}
.img-ttl-box h4.-o-brown {
  border-bottom: 1px solid var(--o-brown);
}
.img-ttl-box h4.-y-brown {
  border-bottom: 1px solid var(--y-brown);
}
.img-ttl-box h4.-r-brown {
  border-bottom: 1px solid var(--r-brown);
}
.img-ttl-box h4.-moss {
  border-bottom: 1px solid var(--moss);
}
.img-ttl-box h4.-d-purple a {
  border-bottom: 1px solid var(--d-purple);
}
.img-ttl-box h4.-charcoal {
  border-bottom: 1px solid var(--charcoal);
}
.img-ttl-box h4.-forest {
  border-bottom: 1px solid var(--forest);
}
.img-ttl-box h4.-slate-teal {
  border-bottom: 1px solid var(--slate-teal);
}
.img-ttl-box h4.-lime {
  border-bottom: 1px solid var(--lime);
}
.img-ttl-box h4.-coffee {
  border-bottom: 1px solid var(--coffee);
}
.img-ttl-box h4.-rose {
  border-bottom: 1px solid var(--rose);
}
.img-ttl-box h4.-denim {
  border-bottom: 1px solid var(--denim);
}

.img-ttl-box h4.-brown {
  border-bottom: 1px solid  var(--brown);
}
.img-ttl-box h4.-brown2 {
  border-bottom: 1px solid  var(--brown2);
}
.img-ttl-box h4.-red {
  border-bottom: 1px solid  var(--red);
}
.img-ttl-box h4.-yellow {
  border-bottom: 1px solid  var(--yellow);
}
.img-ttl-box h4.-purple {
  border-bottom: 1px solid  var(--purple);
}
.img-ttl-box h4.-glay {
  border-bottom: 1px solid  var(--glay);
}
.img-ttl-box h4.-green {
  border-bottom: 1px solid  var(--green);
}
.img-ttl-box h4.-blue {
  border-bottom: 1px solid  var(--blue);
}
.img-ttl-box h4.-l-yellow {
  border-bottom: 1px solid  var(--l-yellow);
}
.img-ttl-box h4.-pink {
  border-bottom: 1px solid  var(--pink);
}
.img-ttl-box h4.-l-blue {
  border-bottom: 1px solid  var(--l-blue);
}
.img-ttl-box h4.-orange {
  border-bottom: 1px solid  var(--orange);
}
.img-ttl-box h4.-green2 {
  border-bottom: 1px solid  var(--green2);
}
.img-ttl-box h4.-l-yellow {
  border-bottom: 1px solid  var(--l-yellow);
}
.img-ttl-box h4.-salmon {
  border-bottom: 1px solid  var(--salmon);
}
.img-ttl-box h4.-emerald {
  border-bottom: 1px solid  var(--emerald);
}
.img-ttl-box h4.-l-red {
  border-bottom: 1px solid  var(--l-red);
}
.img-ttl-box h4.-l-purple {
  border-bottom: 1px solid  var(--l-purple);
}
.img-ttl-box h4.-d-blue {
  border-bottom: 1px solid  var(--d-blue);
}
.img-ttl-box h4.-orange2 {
  border-bottom: 1px solid  var(--orange2);
}

.img-ttl-box h4.-coffee {
  border-bottom: 1px solid  var(--coffee);
}
.img-ttl-box h4.-silver {
  border-bottom: 1px solid  var(--silver);
  color: #ffffff;
}
.img-ttl-box h4 a:after {
  content: "";
  display: inline-block;
  height: 10px;
  width: 6px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
  background-size: auto;
  margin-left: 1em;
}
.special a.nav-btn {
  padding: 0.5em;
  width: 100%;
  display: block;
  border-radius: 50px;
  color: #ffffff;
}
.special a.nav-btn.-green {
  background: #38B48B;
}
.special a.nav-btn.-blue {
  background: #38A1DB
}
/* =========================================
   2. ベーススタイル (PC / 共通)
   ========================================= */
.lower-contents {
    padding-top: 170px;
    margin-top: 0;
}
.lower-contents .lower-container {
    padding: 50px 0;
}
div.contents {
    background-color: #F9F8F9;
    padding-bottom: 1vw;
}
.special main.main {
  max-width: 1184px !important;
  width: 1184px !important;
  line-height: 2;
  margin: 0 auto;
}
.special .mainv {
  margin-bottom: 3rem;
}
.special .mainv img {
    border-radius: 10px;
}
/* 見出しスタイル */
.special .kasou_wrap h3 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  background: none;
  font-size: 1.4em;
  font-weight: 700;
}
.special .kasou_wrap h3:after, .special h3.underline-ttl:after {
  content: "";
  display: block;
  margin-top: 1%;
  height: 3px;
  background: linear-gradient(90deg, rgba(107, 57, 6, 1) 0%, rgba(107, 57, 6, 1) 6%, rgba(227, 219, 212, 1) 6%);
}
.special h3.underline-ttl {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 30px;
  padding-bottom: 10px;
}
.special h2 {
  margin-bottom: 2rem;
  font-weight: 700;
  font-size: 1.2rem;
}
.special p.lead-txt {
  font-size: 15px;
  margin: 0 0 4em;
  font-weight: 400;
}
/* --- 画像左・テキスト右のコンテナ (PCレイアウト) --- */
.special .imgleft_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 3%;
  background: #ffffff;
  border-radius: 20px;
  margin-bottom: 4em;
}
.special .imgleft_container .img_left {
  width: 27%;
}
.special .imgleft_container .txt-right {
  width: 70%;
}
/* --- アイテムリスト --- */
.special .special_items_list h3 {
  font-size: 1.4em;
  padding-bottom: 0.1em;
  border-bottom: 1px solid #000;
  display: inline-block;
  margin: 0 auto 0.3rem;
}
.special .special_items_list {
  text-align: center;
  border-radius: 10px;
  margin: 0 0 120px;
}
.special .flex li img {
    width: 100%;
}
.special_items_list.-triline.in-nav {
    grid-column: 1 / 3;
    margin: 2em 0 0;
}
.special .special_items_list p {
  margin-bottom: 2.4em;
  /* font-weight: normal; */
  text-align: left;
  max-width: 280px;
}
.special .special_items_list p.text-center {
    text-align: center;
    max-width: 100%;
    font-weight: 400;
}
.special .special_items_list.nav-cards p {
    margin: 0 auto;
    width: 205px;
}
.special .special_items_list p.text-center.mb30 {
    max-width: 100%;
    margin-bottom: 2.4em;
    font-size: 1em !important;
    font-weight: 400;
}
/* --- PCメインデザイン（デフォルト） --- */
.img-ttl-box {
    display: grid;
    /* 画像を25%固定、テキストを残り(1fr)に割り振る */
    grid-template-columns: 25% 1fr;
    column-gap: 32px;
    background: #ffffff;
    margin-bottom: 6em;
    padding: 1.5em 3em;
    text-align: left;
}

.img-ttl-box img {
    /* 画像を左側（1列目）の縦2行分にまたがって固定 */
    grid-column: 1 / 2;
    grid-row: 1 / 3; 
    width: 100%;
    height: auto;
}

.img-ttl-box h4 {
    grid-column: 2 / 3; /* 右カラム（2列目） */
    grid-row: 1 / 2;    /* 上段（1行目） */
    margin: 0 0 15px 0;
    width: 100%;
    border-bottom: 1px solid #333;
    padding-bottom: 0;
    font-size: 1.5em;
    align-content: end;
}

.img-ttl-box p.lead-text {
    grid-column: 2 / 3; /* 右カラム（2列目） */
    grid-row: 2 / 3;    /* 下段（2行目） */
    margin: 0 !important;
    line-height: 1.8;
    max-width: 100%;
    font-weight: 400;
}


.special .special_items_list p.name {
  margin-bottom: .4em;
  font-weight: bold;
  text-align: left;
}
.special .special_items_list p.desc {
  margin-bottom: 3em;
  font-size: 0.9em;
  font-weight: normal;
}
/* Flexリスト */
.special .special_items_list .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6em;
  justify-content: flex-start;
}
/* 4列 */
.special .special_items_list.-fourline .flex {
  gap: 1.5%;
  margin-bottom: 3em;
  justify-content: flex-start;
}
.special .special_items_list.-fourline .flex li {
  text-align: center;
  width: 23.5%;
  margin-bottom: 1rem;
}
/* 3列 */
.special .special_items_list.-triline .flex {
  gap: 2%;
}
/* カード型ナビ */
.special .special_items_list.-card .flex {
    justify-content: flex-start;
    gap: 2%;
}
.special .special_items_list.-triline .flex li {
  text-align: center;
  width: 32%;
  margin-bottom: 1%;
}
.special .special_items_list .flex li {
  font-size: 1.1em;
  line-height: 1.5;
}
/* カード型 */
.special .special_items_list.-card p {
  margin: -0.5em 0 2.4em;
  background: #EAEAEA;
  height: 7em;
  padding: 1.2em 1em;
  position: relative;
}
.special .special_items_list.-card p:after {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  width: 13px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr-u.svg) no-repeat;
  background-size: contain;
  bottom: 1.5em;
  left: 50%;z
  transform: translateX(-50%);
}
/* --- ボタン共通 --- */
.special .more_btn a {
  border-radius: 900px;
  background: #7E9CAF;
  color: #ffffff;
  padding: 0.5em 0;
  width: 576px;
  display: inline-block;
  font-size: 1.2em;
  position: relative;
  margin-bottom: 0;
  text-decoration: none;
}
.special .more_btn a:after {
  content: "";
  display: inline-block;
  height: 10px;
  width: 6px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
  background-size: auto;
  margin-left: 1em;
}
.special-btn-group .more_btn a {
    margin-bottom: 0;
}
/* 色別ボタン */
.special .more_btn.-brown a {
  background: var(--brown);
}
.special .more_btn.-brown2 a {
  background: var(--brown2);
}
.special .more_btn.-red a {
  background: var(--red);
}
.special .more_btn.-yellow a {
  background: var(--yellow);
}
.special .more_btn.-purple a {
  background: var(--purple);
}
.special .more_btn.-glay a {
  background: var(--glay);
}
.special .more_btn.-green a {
  background: var(--green);
}
.special .more_btn.-blue a {
  background: var(--blue);
}
.special .more_btn.-l-yellow a {
  background: var(--l-yellow);
}
.special .more_btn.-pink a {
  background: var(--pink);
}
.special .more_btn.-l-blue a {
  background: var(--l-blue);
}
.special .more_btn.-orange a {
  background: var(--orange);
}
.special .more_btn.-green2 a {
  background: var(--green2);
}
.special .more_btn.-salmon a {
  background: var(--salmon);
}
.special .more_btn.-emerald a {
  background: var(--emerald);
}
.special .more_btn.-l-red a {
  background: var(--l-red);
}
.special .more_btn.-l-purple a {
  background: var(--l-purple);
}
.special .more_btn.-d-blue a {
  background: var(--d-blue);
}
.special .more_btn.-orange2 a {
  background: var(--orange2);
}
.special .more_btn.-moss a {
  background: var(--moss);
}
.special .more_btn.-brick a {
  background: var(--brick);
}
.special .more_btn.-o-brown a {
  background: var(--o-brown);
}
.special .more_btn.-y-brown a {
  background: var(--y-brown);
}
.special .more_btn.-r-brown a {
  background: var(--r-brown);
}
.special .more_btn.-d-purple a {
  background: var(--d-purple);
}
.special .more_btn.-charcoal a {
  background: var(--charcoal);
}
.special .more_btn.-forest a {
  background: var(--forest);
}
.special .more_btn.-slate-teal a {
  background: var(--slate-teal);
}
.special .more_btn.-lime a {
  background: var(--lime);
}
.special .more_btn.-coffee a {
  background: var(--coffee);
}
.special .more_btn.-rose a {
  background: var(--rose);
}
.special .more_btn.-denim a {
  background: var(--denim);
}
.special .more_btn.-silver a {
  background: var(--silver);
  color: #ffffff;
}
/* ナビボタン */
.special a.nav-btn {
  padding: 0.5em;
  width: 100%;
  display: block;
  border-radius: 50px;
  color: #ffffff;
}
.special a.nav-btn:after {
      content: "";
  display: inline-block;
  height: 10px;
  width: 6px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
  background-size: auto;
  margin-left: 1em;
  rotate: 90deg;
}
.special a.nav-btn.-green {
  background: #38B48B;
}
.special a.nav-btn.-blue {
  background: #38A1DB;
}
.special_items_list li p {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
}
/* ボタンラッパー (PC) */
.special-btn-group {
  margin: 0 0 5em;
}
.special-btn-group.-bg-w {
  background: #ffffff;
  padding: 30px;
  border-radius: 20px;
}
.special-btn-group h4 {
    font-size: 15px;
    margin-bottom: 1em;
    font-weight: bold;
}
.special-btn-group .btn-row-double {
  display: flex;
  justify-content: left;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.special-btn-group .btn-row-double .more_btn {
  width: 49.1%;
}
.special-btn-group .btn-row-double .more_btn a {
  width: 100%;
  margin-bottom: 0;
}
p.cta-text {
    margin-bottom: 3em;
}
/* =========================================
   3. SP (スマホ) 用スタイル
   ご提示いただいたCSS内容を反映＋並び替えロジック
   ========================================= */
@media screen and (max-width: 768px) {
.lower-contents {
    margin-top: 100px;
    font-size: 10px;
    padding-top: 0;
    }
.sp_display{
    display: block
}
.pc_display{
    display: none
}
  img {
    max-width: 100%;
    height: auto;
  }
  .special main.main {
    max-width: 100% !important;
    width: 100% !important;
  }
  .special .kasou_wrap h3 {
    font-size: 1.6em !important; /* PCより大きく */
    order: 2 !important; /* 元コードの指定を維持 */
    margin-top: 0 !important;
  }
  .special p.lead-txt {
    font-size: 1.4em !important; /* 元コードの指定を反映 */
  }
  p.lead-text {
    font-size: 1.5em;
  }
  .special h3.underline-ttl {
    font-size: 1.7em !important;
  }
  .special .special_items_list h3 {
    font-size: 2em !important; /* 元コードの指定を反映 */
  }
  .special .special_items_list p {
    font-size: 14px;
    width: 100%;
    margin: 0 auto 1em;
  }
.special .special_items_list.nav-cards p {
    margin: 0 auto;
    width: 100%;
}
  .special .special_items_list .flex li {
    width: 47% !important; /* 2列表示 */
  }
  .special .special_items_list.-card .flex li {
    width: 47.8% !important; /* 2列表示 */
  }
  .special .special_items_list.-card .flex {
    gap: 4.2%;
    margin-bottom: -2em;
  }
  .special .special_items_list .flex {
    gap: 2%;
    margin-bottom: -2em;
  }
  /* ボタン調整 */
  .special .more_btn a {
    width: 95% !important;
  }
  .special-btn-group .btn-row-double {
    flex-direction: column;
    align-items: center;
  }
  .special-btn-group .btn-row-double .more_btn {
    width: 100% !important;
  }
  .special-btn-group .btn-row-double .more_btn a {
    width: 90vw !important;
  }
  /* --- ここから「サンドイッチ並び替え」用の重要設定 --- */
  /* 元のコードでは width: 27% となっていましたが、
     SPの縦積みレイアウト用に強制的に上書きします。
  */
  .special .imgleft_container {
    flex-direction: column; /* 縦並び */
  }
  /* 画像設定 */
  .special .imgleft_container .img_left {
    width: 100%; /* SPでは幅いっぱい */
    order: 2; /* 2番目に配置 */
    margin-bottom: 0;
    text-align: center;
  }
  /* テキストエリアの「枠」を無効化 */
  .special .imgleft_container .txt-right {
    width: 100%;
    display: contents;
  }
  /* テキスト内のタイトル (h2, h3) -> 1番目 */
  .special .imgleft_container .txt-right h2, .special .imgleft_container .txt-right h3 {
    order: 1;
    font-size: 1.6rem;
  }
  /* テキスト内の本文 (p) -> 3番目 */
  .special .imgleft_container .txt-right p, .special .imgleft_container .txt-right div {
    order: 3;
    font-size: 1.2rem;
  }
.special .special_items_list.-card p {
    margin: -0.5em 0 2.4em;
    background: #EAEAEA;
    height: 7em;
    padding: 1.2em 1em;
    position: relative;
}
    
.special-btn-group.-bg-w {
  padding: 20px 8px 10px;
}
special-btn-group h4 {
    font-size: 15px;
}
    .img-ttl-box {
        display: block; /* Gridを解除して通常の要素の流れに戻す */
        overflow: hidden; /* floatによる親要素の高さ消失を防止 */
        padding: 2em;
    }

    .img-ttl-box img {
        float: left;     /* ここで回り込みを発生させる */
        width: 35%;      /* SPで見やすいバランスに調整 */
        margin-right: 15px;
        margin-bottom: 10px;
    }

    .img-ttl-box h4 {
        width: 60%;
        /* タイトルは画像の横に配置される */
        font-size: 1.3em !important;
        float: right;
        margin: 0;
        height: 4em;
        padding-bottom: 0.1em;
    }

    .img-ttl-box p.lead-text {
        /* テキストが画像の下に自然に回り込む */
        line-height: 1.6;
        clear: both;
        font-size: 1.3em;
    }
}
/* ==========================================================================
   Feature Box 改修版
   HTMLクラス: .sec01_imgleft_container / .img_left / .txt-right
   ========================================================================== */

/* コンテナ (.feature-box 相当) */
.sec01_imgleft_container {
  background: #fff;
  border-radius: 20px;
  padding: 50px;
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 4em;
}

/* グレー背景用（HTMLに bg-g クラスがついた場合用） */
.sec01_imgleft_container.bg-g {
    background: #EAEAEA;
}

/* 画像エリア (.fb-img 相当) */
.sec01_imgleft_container .img_left {
  width: 24%;
  flex-shrink: 0;
  text-align: center;
}

.sec01_imgleft_container .img_left img {
  width: 100%;
  height: auto;
  max-width: 250px;
}

/* テキストエリア (.fb-txt 相当) */
.sec01_imgleft_container .txt-right {
  flex-grow: 1;
}

/* タイトル (.fb-ttl 相当) */
.sec01_imgleft_container .txt-right h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 1em 0;
  padding-bottom: 10px;
  display: inline-block;
  color: #333;
  width: 100%;
  border-bottom: none; /* 初期リセット */
}

/* タイトルの下線 (茶色グラデーション) */
.sec01_imgleft_container .txt-right h3:after {
  content: "";
  display: block;
  margin-top: 1%;
  height: 3px;
  background: linear-gradient(90deg, rgba(107, 57, 6, 1) 0%, rgba(107, 57, 6, 1) 6%, rgba(227, 219, 212, 1) 6%);
}

/* グレー背景時のタイトル調整 */
.sec01_imgleft_container.bg-g .txt-right h3:after {
    display: none;
}

/* 本文 */
.sec01_imgleft_container .txt-right p {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  font-weight: 400;
}
.sec01_imgleft_container .more_btn a {
    margin: 1em 0 0;
}

/* --- SP Responsive --- */
@media screen and (max-width: 768px) {

.lower-contents .lower-container {
    padding: 50px 2% 100px;
}
    .special .mainv.no-margin{
        margin-bottom: 0;
    }
  .sec01_imgleft_container {
    flex-direction: column;
    padding: 30px 20px;
    gap: 30px;
    text-align: center;
  }

  .sec01_imgleft_container .img_left {
    width: 60%;
    margin: 0 auto;
  }

  .sec01_imgleft_container .txt-right h3 {
    display: block;
    width: 100%;
    /* SPではグラデーション線を消してborderにする場合 */
    border-bottom: 1px solid #ccc; 
  }
  
  /* SPでグラデーション線を消す処理 */
  .sec01_imgleft_container .txt-right h3:after {
      display: none;
  }

  .sec01_imgleft_container .txt-right p {
    text-align: left;
  }
.special h3.underline-ttl {
    margin-bottom: 1em;
}
.special .special_items_list p.text-center.mb30 {
    font-size: 1.2em !important;
}
.special_items_list.-triline.in-nav {
    margin: 1rem 0;
}
.special .special_items_list {
    text-align: center;
    border-radius: 10px;
    margin: 0 0 5rem;
}
    .special .special_items_list p.item-name {
        font-size: 0.9em;
        width: 100%;
    }
}