﻿@charset "UTF-8";

/* =========================
  頒布会LP：FV
========================= */



.block-hanpukai-fv{
  width:100%;
  margin:0 0 70px;
  padding:0;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* 背景（横幅100%） */
.block-hanpukai-fv__bg{
  position:relative;
  width:100%;

  /* 画像 */
  background-image:url("../../img/pages/hanpukai/pc/hanp_fvbg.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;

  min-height:470px;
}

/* PC：中央の半透明・白帯 */
.block-hanpukai-fv__band{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:20vw;
  max-height:230px;
  background:rgba(255,255,255,0.85);
}

/* PC：タイトル（中央） */
.block-hanpukai-fv__logo-pc{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(520px, 50vw);
  z-index:2;
}
.block-hanpukai-fv__logo-pc img{
  width:55vw;
  height:auto;
  display:block;
}

/* PC：マーク（タイトル左＆少し上） */
.block-hanpukai-fv__mark-pc{
  position:absolute;
  left:47.5%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  /* タイトル基準で左＆少し上 */
  margin-left:-370px;
  margin-top:-70px;
  width:24%;
  max-width:230px;
}
.block-hanpukai-fv__mark-pc img{
  width:100%;
  height:auto;
  display:block;
}

@media (min-width: 768px) and (max-width: 1050px){
  .block-hanpukai-fv__bg{
    min-height:400px;
  }
  .block-hanpukai-fv__band{
    max-height:200px;
    height:23vw;
  }
  .block-hanpukai-fv__mark-pc{
    position:absolute;
    left:12%;
    top:55%;
    transform:translate(-50%,-50%);
    z-index:3;
    /* タイトル基準で左＆少し上 */
    margin-left:0;
    width:20%;
    max-width:230px;
  }
}

/* SP：背景下エリア（タイトルをHTMLで配置） */
.block-hanpukai-fv__sp-under{
  display:none;
  width:100%;
  box-sizing:border-box;
  padding:18px 20px 0;
}

/* SP：左下マーク（背景画像の左下） */
.block-hanpukai-fv__mark-sp{
  display:none;
}

/* SP：タイトル（背景の下に配置） */
.block-hanpukai-fv__logo-sp img{
  width:100%;
  height:auto;
  display:block;
}

/* -------------------------
  SP
------------------------- */
@media (max-width: 767px){
  .pane-main {
    width:100%!important;
  }

  .block-hanpukai-fv{
    margin-bottom:60px;
  }

  /* 背景：指定は同一（ご指定通り pc パス） */
  .block-hanpukai-fv__bg{
    background-image:url("../../img/pages/hanpukai/sp/hanp_fvbg.jpg");
    min-height:420px;
  }

  /* PC要素は非表示 */
  .block-hanpukai-fv__band,
  .block-hanpukai-fv__logo-pc,
  .block-hanpukai-fv__mark-pc{
    display:none;
  }

  /* SP：背景下にタイトルを出す */
  .block-hanpukai-fv__sp-under{
    display:block;
  }

  /* SP：マークは「背景画像の左下」＝背景コンテナ内にabsolute */
  .block-hanpukai-fv__mark-sp{
    display:block;
    position:absolute;
    left:16px;
    bottom:-30px;
    width:42%;
    max-width:230px;
  }
  .block-hanpukai-fv__mark-sp img{
    width:100%;
    height:auto;
    display:block;
  }

  /* SP：タイトル幅調整 */
  .block-hanpukai-fv__logo-sp{
    max-width:520px;
    margin:35px auto 0;
    padding:0 5px;
  }
}


#hanpukai{
  background-image: url("../../img/usr/common/back_wave_r.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
  height:130px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#333;
}

#hanpukai .block-top-title {
  margin-bottom:0;
  padding-bottom:15px;
}

#hanpukai .block-sub-title{
  margin:10px 0 0;
  text-align:center;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:16px;
}



@media (max-width: 767px){
  #hanpukai{
    font-size:16px;
    background-image:none;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#333;
  }
  #hanpukai .block-sub-title {
    margin-top:0;
    line-height:1.8em;
    width:100%;
    padding-top:10px!important;
    padding-bottom:20px;
    background-image: url("../../img/usr/common/back_wave_r.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;

  }
}




/* イメージカルーセル */
.block-hanpukai-carousel{
  margin-top:40px;
  width:100%;
  overflow:hidden;
}

.block-hanpukai-carousel__slider{
  display:none;
  width:100%;
  margin:0;
  padding:0;
}

.block-hanpukai-carousel__slide{
  margin:0;
  padding:0;
}

.block-hanpukai-carousel__image{
  display:block;
  width:100%;
  height:auto; /* ← 縦も比率で縮小 */
}

/* slick の余計な隙間対策 */
.block-hanpukai-carousel__slider .slick-slide{
  padding:0;
}
.block-hanpukai-carousel__slider .slick-slide > div{
  margin:0;
  padding:0;
  line-height:0;
}
.block-hanpukai-carousel__slider .slick-track{
  display:flex;
  align-items:center;
}

/* centerPadding をつぶさない */
.block-hanpukai-carousel__slider .slick-list{
  padding-top:0 !important;
  padding-bottom:0 !important;
}





/* =========================
  頒布会ボタン共通
========================= */
.block-hanpukai-btn{
  text-align: center;
  /* margin-top 削除（個別制御へ） */
}

.block-hanpukai-btn a{
  position: relative;
  display: inline-block;
  width:600px!important;
  color: #fff;
  border: none;
  border-radius: 999px;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 27px 60px 27px 46px;
  line-height: 1.2;
  font-size: 0;
}

/* 矢印（共通） */
.block-hanpukai-btn a::after{
  content: "";
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* hover（共通） */
@media (hover:hover){
  .block-hanpukai-btn a:hover{
    filter: brightness(1.06);
    opacity:0.6;
  }
}

/* SP（共通） */
@media (max-width:767px){
  .block-hanpukai-btn a{
    width:92%!important;
    padding: 30px 46px 30px 46px!important;
  }
  .block-hanpukai-btn a::after{
    width: 10px;
    height:10px;
    right: 7vw;
  }
}


/* =========================
  頒布会申し込み
========================= */
.block-hanpukai-entry{
  margin-top: 40px;
}
.block-hanpukai-entry a{
  background:#bf292a;
}
.block-hanpukai-entry a::before{
  content: "頒布会のお申し込みはこちら";
  font-size:18px;
  color:#fff;
  letter-spacing:0.08em;
}
@media (max-width:767px){
  .block-hanpukai-entry{
    margin-top:60px!important;
  }
  .block-hanpukai-entry{
    margin-top: 30px;
  }
  .block-hanpukai-entry a::before{
    font-size:16px;
    letter-spacing:0.06em;
  }

}

/* =========================
  次月リンク
========================= */
.block-hanpukai-next{
  margin-top: 20px!important;
}
.block-hanpukai-next a{
  background:#73aab7!important;
}
.block-hanpukai-next a::before{
  content: "次月のお届けメニューはこちら"!important;
  font-size:18px;
  color:#fff;
}
@media (max-width:767px){
  .block-hanpukai-next{
    margin-top: 20px;
  }

  .block-hanpukai-next a::before{
    content: "次月のお届けメニューは\Aこちら"!important;
  }  
  .block-hanpukai-next a::before{
    font-size:16px;
  }
  
}




/* =========================
  サブタイトル（頒布会）
========================= */
.block-top-title.block-hanpukai-subtitle{
  margin-top:70px;
  padding-top:50px;
  background-image: url("../../img/usr/common/back_wave_l.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: clamp(220px, 24%, 260px) auto;
  text-shadow:
    0.3px 0 rgba(0,0,0,0.3),
   -0.3px 0 rgba(0,0,0,0.3);
}
.block-top-title.block-hanpukai-subtitle span{
  text-shadow:none;
}

/* SP */
@media (max-width:767px){
  .block-top-title.block-hanpukai-subtitle{
    margin-top:40px;
    padding-top:75px;
    background-size: clamp(150px, 34%, 360px) auto!important;
  }

  .block-top-title.block-hanpukai-subtitle span{
    font-size:13px;
  }
}




/* =========================
  頒布会リンクパネル
========================= */

.hanpukai-iconset{
  max-width:1000px;
  margin:0 auto 50px;
  padding:0;
}
@media (max-width:1050px){
  .hanpukai-iconset{
    padding:0 1%!important;
  }
}




/* リスト */
.hanpukai-iconset__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:15px;
}

/* パネル */
.hanpukai-iconset__item{
  width:calc((100% - 40px) / 3);
  box-sizing:border-box;
}

/* リンク */
.hanpukai-iconset__link{
  display:flex;
  align-items:center;
  gap:35px;
  background:#f1eeeb;
  border:none;
  padding:22px 35px;
  box-sizing:border-box;
  text-decoration:none;
  color:#333;
  transition:background .2s ease, opacity .2s ease;
}

.hanpukai-iconset__link:hover{
  text-decoration:none;
  background:#e8e2de;
}

/* 画像 */
.hanpukai-iconset__icon{
  width:45px;
  height:auto;
  display:block;
  flex:0 0 auto;
}

/* テキスト */
.hanpukai-iconset__text{
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
}

@media (min-width: 831px) and (max-width: 970px){
  .hanpukai-iconset__link{
    gap:8%;
    padding:22px 1% 22px 10%;
  }
}
@media (min-width: 768px) and (max-width: 830px){
  .hanpukai-iconset__link{
    gap:6%;
    padding:22px 1% 22px 7%;
  }
}


/* 改行制御 */
.pc-br{
  display:inline;
}
.tb-br{
  display:none;
}
.sp-br{
  display:none;
}

/* =========================
  SP（2列）
========================= */
@media (max-width:767px){

  .hanpukai-iconset{
    max-width:95%;
    margin-bottom:10px;
  }

  .hanpukai-iconset__list{
    gap:10px;
  }

  .hanpukai-iconset__item{
    width:calc((100% - 10px) / 2);
  }

  .hanpukai-iconset__link{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    padding:22px 0;
  }

  .hanpukai-iconset__icon{
    width:30%;
  }

  .hanpukai-iconset__text{
    font-size:16px;
    line-height:1.4;
  }

  .pc-br{
    display:none;
  }
  .tb-br{
    display:inline;
  }
  .sp-br{
    display:inline;
  }
}




/* =========================
  次ページリンク（もっと見る）
========================= */
.block-top-topic--next-page{
  text-align: center;
  margin-top: 40px;
}

.block-top-topic--next-page a{
  position: relative;
  display: inline-block;
  width:400px!important;
  background: #73aab7;
  color: #fff;
  border: none;
  border-radius: 999px;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 17px 46px 17px 46px; /* 右に矢印分余白 */
  line-height: 1.2;

  font-size: 0; /* 元の「続きを読む」を消す */
}

/* 表示テキスト */
.block-top-topic--next-page a::before{
  content: "もっと見る";
  font-size: 16px;
  color: #fff;
}

/* CSS矢印（文字不使用） */
.block-top-topic--next-page a::after{
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* hover（PCのみ） */
@media (hover:hover){
  .block-top-topic--next-page a:hover{
    filter: brightness(1.06);
    opacity:0.6;
  }
  a.block-list-add-cart-btn:hover{
    filter: brightness(1.06);
    opacity:0.6;
  }
}

@media (max-width: 767px){
  .block-top-topic--header span::before{
    font-size: 28px;
  }

  .block-top-topic--next-page{
    margin-top: 30px;     /* 前コンテンツとの余白 */
  }

  .block-top-topic--next-page a{
    width:300px!important;
    padding: 25px 46px 25px 46px; /* 右に矢印分余白 */
    line-height: 1.2;
  }

  /* 表示テキスト */
  .block-top-topic--next-page a::before{
    font-size: 18px;
  }


}




/* =========================
  おさかな生活
========================= */
.block-osakanalife{
  width:100%;
  box-sizing:border-box;
  margin-top:150px;
  border:none!important;
  box-shadow:none!important;
}

.block-osakanalife__inner{
  max-width:1000px;
  margin:0 auto;
  display:flex;
  align-items:stretch;
  box-sizing:border-box;
  border:none!important;
  box-shadow:none!important;
}

.block-osakanalife__left{
  width:54%;
  background:#f1eeeb;
  padding:20px 5% 30px 8%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:none!important;
  box-shadow:none!important;
}

.block-osakanalife__title{
  margin:0 0 5px;
  color:#333;
  font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-size:26px;
  font-weight:400;
  line-height:1.5;
  text-align:left;
  border:none!important;
}

.block-osakanalife__text{
  margin:0;
  color:#333;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:2;
  text-align:left;
}

.block-osakanalife__right{
  width:46%;
  padding:0;
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  border:none!important;
  box-shadow:none!important;
}

.block-osakanalife__right picture{
  width:100%;
  height:100%;
}

.block-osakanalife__right img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* PC用ボタン */
.about-btn{
  text-align:center;
}

/* SP用ボタンはPCでは非表示 */
.about-btn--sp{
  display:none;
}

/* =========================
  SP
========================= */
@media (max-width: 767px){
  .block-osakanalife{
    margin-top:100px;
    padding:0 4%!important;
  }

  .block-osakanalife__inner{
    display:flex;
    flex-direction:column;
  }

  /* 順番入れ替え（画像を上） */
  .block-osakanalife__right{
    order:1;
    width:100%;
  }

  .block-osakanalife__left{
    order:2;
    width:100%;
    padding:30px 20px 45px;
  }

  .block-osakanalife__title{
    margin-bottom:18px;
    font-size:28px;
    text-align:center;
  }

  .block-osakanalife__text{
    font-size:16px;
    line-height:1.9;
  }

  .block-osakanalife__right img{
    height:auto;
    object-fit:initial;
  }

  /* PC用ボタンはSPで非表示 */
  .about-btn--pc{
    display:none;
  }

  /* SP用ボタンは左ブロック内・テキスト下・中央 */
  .about-btn--sp{
    display:block;
    margin-top:5px;
    text-align:center;
  }

  .about-btn--sp .block-top-topic--next-page{
    display:inline-block;
  }
}



/* =========================
  店主が託した想い
========================= */
.block-takushita{
  width:100%;
  box-sizing:border-box;
  margin-top:40px;
  padding:70px 0 90px;
  background-image:url("../../img/pages/hanpukai/pc/taku_bg.jpg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
}

.block-takushita__inner{
  max-width:1000px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}

/* 上部画像 */
.block-takushita__head{
  text-align:center;
  margin:0 0 18vw;
}

.block-takushita__head img{
  display:block;
  width:2.5vw;

  height:auto;
  margin:40px auto 0;
}

/* パネル */
.block-takushita__panels{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:30px;
}

.block-takushita__panel{
  width:calc((100% - 80px) / 3);
  box-sizing:border-box;
}

.block-takushita__photo{
  margin:0 0 22px;
}

.block-takushita__photo img{
  display:block;
  width:100%;
  height:auto;
}

.block-takushita__title{
  margin:0 0 18px;
  text-align:center;
  font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-size:20px;
  font-weight:500;
  line-height:1.5;
  color:#333;
  padding:5px 0 10px;
  border:none!important;
}

/* 疑似要素で線入ってるケース潰し */
.block-takushita__title::after{
  content:none!important;
  display:none!important;
}

.block-takushita__text{
  margin:0;
  text-align:left;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  color:#333;
}
@media (min-width: 768px) and (max-width: 1050px){
  .block-takushita__head{
    margin:0 0 15vw;
  }
  .block-takushita__inner{
    padding:0 1%;
  }
  .block-takushita__panel{
    width:calc((100% - 60px) / 3);
  }
  .block-takushita__head img{
    margin-top:30px;
  }
}

@media (min-width: 1300px){
  .block-takushita{
    width:100%;
    box-sizing:border-box;
    margin-top:40px;
    padding:70px 0 90px;
    background-image:url("../../img/pages/hanpukai/pc/taku_bg.jpg");
    background-repeat:no-repeat;
    background-position: center calc(40% + 0);
    background-size:100% auto;
  }

  .block-takushita__inner{
    max-width:75%;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
  }
  .block-takushita__head {
    margin-bottom:calc(100px + 15vw);
  }
  .block-takushita__head img{
    width:3vw;
  }

}

/* =========================
  SP
========================= */
@media (max-width: 767px){
  .block-takushita{
    margin-top:0;
    padding:50px 0 120px;
    background-image:url("../../img/pages/hanpukai/sp/taku_bg.jpg");
    background-position: center top;
    background-size: 100% auto;
  }

  .block-takushita__inner{
    padding:0 20px;
  }

  .block-takushita__head{
    margin:0 0 38px;
  }

  .block-takushita__head img{
    width:65%;
    max-width:100%;
    margin:19vw auto 30vw;
  }

  .block-takushita__panels{
    padding-top:30px;
    display:block;
  }

  .block-takushita__panel{
    width:100%;
    margin:0 0 42px;
    border-bottom: solid 1px #333;
    padding-bottom: 30px;
  }

  .block-takushita__panel:last-child{
    margin-bottom:0;
  }

  .block-takushita__photo{
    margin:0 0 18px;
  }

  .block-takushita__title{
    margin:0 0 8px;
    font-size:24px;
    line-height:1.55;
  }

  .block-takushita__text{
    font-size:16px;
    line-height:1.7;
    padding:0 3%;
  }
}




/* =========================
  頒布会コース 詳細エリア
========================= */

.block-hanpukai-course{
  width:100%;
  background:#e6f1f2;
  padding:40px 0 60px;
  position:relative;
}

.block-hanpukai-course-box{
  max-width:1180px;
  margin:50px auto;
  color:#333;
  position:relative;
}

/* 上エリア */
.block-hanpukai-course-box__top{
  position:relative;
  background:#f1eeeb;
  border:solid 1px #dcd4cd;
  box-sizing:border-box;
  padding:3.5% 4.5%;
  margin:0 auto;
}

/* 下向き三角（外側：枠） */
.block-hanpukai-course-box__top::before{
  content:"";
  position:absolute;

  /* ★PC：右から20%の位置に、中心基準で配置 */
  left:78%;
  bottom:-18px;
  transform:translateX(-50%);

  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:18px solid #dcd4cd;
}

/* 下向き三角（内側：塗り） */
.block-hanpukai-course-box__top::after{
  content:"";
  position:absolute;

  /* ★PC：右から20%の位置に、中心基準で配置 */
  left:78%;
  bottom:-16px;
  transform:translateX(-50%);

  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:16px solid #f1eeeb;
}

/* 下エリア */
.block-hanpukai-course-box__bottom{
  background:#fff;
  box-sizing:border-box;
  padding:3% 50px 1%;
  margin:0 auto;

}

/* =========================
  SP
========================= */
@media (max-width: 767px){
  .block-hanpukai-course-box{
    margin-top:35px;
  }

  .block-hanpukai-course-box__top,.block-hanpukai-course-box__bottom {
    width:92%;
    padding:7% 4%;
  }


  /* 三角（外側） */
  .block-hanpukai-course-box__top::before{
    left:50%;
    bottom:-14px;
    transform:translateX(-50%);
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:14px solid #dcd4cd;
  }

  /* 三角（内側） */
  .block-hanpukai-course-box__top::after{
    left:50%;
    bottom:-12px;
    transform:translateX(-50%);
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:12px solid #f1eeeb;
  }
}





/* 上エリア内レイアウト */
.block-hanpukai-course-box__top-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

/* 左ブロック */
.block-hanpukai-course-box__left{
  text-align:left;

}
.block-hanpukai-course-box__free {
  position:absolute;
  top:18%;
  right:51%;
}
.block-hanpukai-course-box__free img {
  width:100px;
}


/* 明朝タイトル */
.course-title{
  margin:0 0 6px;
  font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-size:32px;
  font-size:clamp(29px, 3.2vw, 32px);
  font-weight:400;
  line-height:1.4;
}

/* サブ */
.course-sub{
  margin-top:10px;
  margin-left:4px;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:clamp(16px, 1.7vw, 17px);
  font-weight:400;
  line-height:1.6;
  letter-spacing: 0.02em;
}

/* 右ブロック */
.block-hanpukai-course-box__right{
  text-align:right;
}

/* 価格 */
.course-price{
  margin:0;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  line-height:1.4;
}

/* 強調部分 */
.price-main{
  font-size:30px;
  font-size:clamp(26px, 3.4vw, 30px);
  font-weight:700;
}

/* 小さい部分 */
.price-sub{
  font-size:clamp(18px, 2.4vw, 20px);
  font-weight:400;
}

.price-sub .mu {
  color:#bf292a;
  font-weight:700;
  position:relative;
  display:inline-block;
}

.mu-note{
  position:absolute;
  top:100%;
  left:10px;
  margin-top:5px;
  font-size:14px;
  font-weight:normal;
  line-height:1.3;
  white-space:nowrap;
}




@media (min-width: 768px) and (max-width: 1050px){
  .block-hanpukai-course-box__top,.block-hanpukai-course-box__bottom {
      width:97%;
  }

  .block-hanpukai-course-box__free {
    top:21%;
    right:50%;
    width:9.5%;
  }

  /* 下向き三角（外側：枠） */
  .block-hanpukai-course-box__top::before{
    left:79%;
  }
  /* 下向き三角（内側：塗り） */
  .block-hanpukai-course-box__top::after{
    left:79%;
  }
  .block-hanpukai-course-box__bottom-icon img{
    width:60px!important;
    margin-left:-5px!important;
  }

  /* カートボタン */
  .block-add-cart--btn{
    width:60%!important
  }

  .block-hanpukai-course-box__bottom {
    padding: 3% 3% 3% 2%!important;
  }
  /* タイトル行 */
  .block-hanpukai-course-box__bottom-head{
    gap:10px!important;
  }

  /* 説明文 */
  .block-hanpukai-course-box__bottom-text{
    margin:0 0 0 67px!important;
  }

  /* 注意書き */
  .block-hanpukai-course-box__bottom-note{
    margin:2px 0 0 67px!important;
  }
}


@media (min-width: 768px) and (max-width: 900px){
  .block-hanpukai-course-box__top::before{
    left:80%;
  }
  .block-hanpukai-course-box__top::after{
    left:80%;
  }

  .block-hanpukai-course-box__free {
    position:absolute;
    width:80px;
    top:-4.5vw;
    right:-1%;
  }


}
@media (min-width: 768px) and (max-width: 830px){
  .block-hanpukai-course-box__top::before{
    left:82%;
  }
  .block-hanpukai-course-box__top::after{
    left:82%;
  }
}


/* =========================
  SP
========================= */
@media (max-width: 767px){

  .block-hanpukai-course-box__top-inner{
    display:block;
    text-align:center;
  }

  .block-hanpukai-course-box__left{
    text-align:center;
    margin-bottom:20px;
  }

  .block-hanpukai-course-box__right{
    text-align:center;
  }

  .course-title{
    font-size:26px;
    letter-spacing:0.03em;
  }

  .course-sub{
    margin:10px 0 0;
    letter-spacing:0;
    font-size:16px;
  }

  .price-main{
    font-size:22px;
  }

  .price-sub{
    font-size:16px;
  }

  .block-hanpukai-course-box__free {
    position:absolute;
    width:85px;
    top:42vw;
    right:-3%;
  }


  .mu-note{
    font-size:15px;
  }


}





/* 下エリア内レイアウト */
.block-hanpukai-course-box__bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
}

/* 左ブロック */
.block-hanpukai-course-box__bottom-left{
  width:48%;
  text-align:left;
  color:#333;
}

/* タイトル行 */
.block-hanpukai-course-box__bottom-head{
  display:flex;
  align-items:center;
  gap:18px;
}

/* アイコン */
.block-hanpukai-course-box__bottom-icon img{
  display:block;
  width:auto;
  height:auto;
  max-width:75px;
  margin-left:-30px;
}

/* タイトル */
.block-hanpukai-course-box__bottom-title{
  margin:0;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:22px;
  font-weight:700;
  line-height:1.4;
  color:#333;
}

/* 説明文 */
.block-hanpukai-course-box__bottom-text{
  margin:0 0 0 65px;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:clamp(15px, 1.5vw, 16px);
  font-weight:400;
  line-height:1.8;
  color:#333;
}

/* 注意書き */
.block-hanpukai-course-box__bottom-note{
  margin:2px 0 0 65px;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  color:#333;
}

/* 右ブロック */
.block-hanpukai-course-box__bottom-right{
  width:48%;
  text-align:right;
  color:#333;
  padding-top:20px;
}

/* =========================
  SP
========================= */
@media (max-width: 767px){

  .block-hanpukai-course-box__bottom-inner{
    display:block;
  }

  .block-hanpukai-course-box__bottom-left,
  .block-hanpukai-course-box__bottom-right{
    width:100%;
    text-align:center;
  }

  .block-hanpukai-course-box__bottom-left{
    margin-bottom:25px;
  }

  .block-hanpukai-course-box__bottom-head{
    gap:10px;
  }

  .block-hanpukai-course-box__bottom-icon img{
    max-width:48px;
    margin-left:-5px;
  }

  .block-hanpukai-course-box__bottom-title{
    font-size:18px;
    line-height:1.45;
    margin-top:8px;
    margin-left:0;
  }

  .block-hanpukai-course-box__bottom-text{
    margin-top:14px;
    margin-left:auto;
    font-size:16px;
    line-height:1.75;
    text-align:center;
  }

  .block-hanpukai-course-box__bottom-note{
    margin-top:8px;
    font-size:16px;
    line-height:1.5;
    margin-left:auto;
    text-align:center;
  }

  .block-add-cart--btn {
    width:52%!important;
    padding:13px 0!important;
  }

  .qty-pulldown select{
    font-size:16px!important;

  }

  #select-qty1,#select-qty2{
    max-width:55px!important;
    gap: 5px;
    padding:15px 2px 15px 6px!important;
  }

}



/* カートボタン */
.block-add-cart--btn{
  margin-top:0!important;
  font-size: 0!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  background: #bf292a;
  color: #fff !important;
  font-weight: 700;
  border: none;
  border-radius: 6px!important;
  text-decoration: none;
  box-sizing: border-box;
  padding:13px 30px;
  width:260px;
}


.block-add-cart--btn::before{
  content:"";
  width:22px;
  height:22px;
  display:inline-block;
  margin-right:12px!important;
  margin-top:-3px;
  background-image:url("../../img/usr/common/icon_cart_white.png")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  transform:none;
}


/* 表示テキスト */
.block-add-cart--btn::after{
  content: "購入する";
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}



/* 数量 → 購入数に変更 */
.block-goods-qty{
  font-size:0;
  margin-right:10px;
}
.block-goods-qty::before{
  content: "購入数";
  font-size: 16px;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}



.qty-pulldown select{
  font-size:14px!important;
  text-align: center;          /* 表示文字を中央寄せ */
  text-align-last: center;     /* ★選択中の値も中央寄せ（重要） */
  appearance: none;            /* ▼ を消す（標準） */
  -webkit-appearance: none;    /* Safari / iOS */
  -moz-appearance: none;       /* Firefox */
  /*padding-right: 0;*/            /* ▼用の余白を消す */
  background-image: none;      /* 念のため */

  border-radius: 6px;
  padding:10px 5px!important;
  border: 1px solid #dcd4cd;
}

/* 数量ラベルとselectを縦中央揃え */
.block-goods-qty{
  display: flex;
  align-items: center;
}

#select-qty1,#select-qty2{
  margin-left:10px;
  max-width:60px;
  align-items: center;       /* 縦位置を揃える */
  gap: 6px;                  /* 「数量」と▼の間隔 */
  white-space: nowrap;
  padding:15px 5px 15px 10px!important;
  font-size:16px!important;
}

/* ▼を表示（疑似要素） */
.qty-pulldown{
  position: relative;
  display: inline-block;
}

/* 右側に▼を描画 */
.qty-pulldown::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  transform: translateY(-80%) rotate(45deg);
  pointer-events: none;
}

/* ▼の分だけ右側に余白を確保 */
#select-qty1,#select-qty2{
  padding-right: 22px !important;
}

.block-goods-detail-j--cart-btn{
  display: flex;
  align-items: center;   /* 縦位置揃え */
  gap: 10px;             /* 数量とボタンの間隔 */
}

.block-goods-qty,
.block-add-cart--btn{
  display:inline-flex;
  vertical-align:middle;
}


@media (hover:hover){

  /* カートボタン */
  .block-add-cart--btn:hover{
    filter: brightness(1.06);
    opacity:0.6;
    cursor:pointer;
  }
}



/* =========================
  頒布会コース商品パネル
========================= */
.block-hanpukai-course-goods{
  width:100%;
  box-sizing:border-box;
  margin:40px auto 30px;
}

.block-hanpukai-course-goods__inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:40px 2.666%;
  box-sizing:border-box;
}

.block-hanpukai-course-goods__item{
  width:23%;
  box-sizing:border-box;
}

.block-hanpukai-course-goods__img{
  display:block;
  width:100%;
  height:auto;
}

.block-hanpukai-course-goods__name{
  margin:14px 0 14px;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  color:#333;
  text-align:left;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.block-hanpukai-course-goods__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;

  padding:12px 4px;
  box-sizing:border-box;
  border:solid 1px #dcd4cd;
  border-radius:10px;
  background:#f1eeeb;
  text-decoration:none;
  font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:#333;
  text-align:center;
  text-decoration:none!important;
  transition: background 0.25s ease, color 0.25s ease;
}
/* hover */
.block-hanpukai-course-goods__btn:hover{
  background:#cfc6bf;
  color:#333;
}



@media (max-width: 767px){
  .block-hanpukai-course-goods{
    margin:40px auto 20px;
    padding:0;
  }

  .block-hanpukai-course-goods__inner{
    gap:32px 6%;
  }

  .block-hanpukai-course-goods__item{
    width:47%;
  }

  .block-hanpukai-course-goods__name{
    margin:10px 0 12px;
    font-size:16px;
    line-height:1.5;
  }

  .block-hanpukai-course-goods__btn{
    min-height:44px;
    font-size:16px;
    padding:10px 8px;
  }
}






/* =========================
  今月の月替わりメニューはこちら
========================= */
.block-monthly-menu-btn{
  text-align: center;
  margin-top: 40px;
}

.block-monthly-menu-btn a{
  position: relative;
  display: inline-block;
  width:600px!important;
  background: #73aab7;
  color: #fff;
  border: none;
  border-radius: 999px;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 34px 20px;
  line-height: 1.2;

  font-size: 0;
}

/* 表示テキスト */
.block-monthly-menu-btn a::before{
  content: "今月の月替わりメニューはこちら";
  font-size: 16px;
  color: #fff;
}

/* 矢印 */
.block-monthly-menu-btn a::after{
  content: "";
  position: absolute;
  right: 18%;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* hover（PCのみ） */
@media (hover:hover){
  .block-monthly-menu-btn a:hover{
    filter: brightness(1.06);
    opacity:0.6;
  }
}

@media (max-width: 767px){

  .block-monthly-menu-btn{
    margin-top: 30px;
  }

  .block-monthly-menu-btn a{
    width:90%!important;
    padding: 25px 46px 25px 46px;
    line-height: 1.2;
  }

  .block-monthly-menu-btn a::before{
    font-size: 18px;
    content: "今月の月替わり\Aメニューはこちら";
    white-space: pre;
    line-height:1.6;
  }
  .block-monthly-menu-btn a::after {
    right:8%;
  }
}





/* =========================
  ここが人気　頒布会
========================= */
.block-hanpukai-popular{
  width:100%;
  box-sizing:border-box;
  margin-top:120px;
  text-align:center;
}

.block-hanpukai-popular__inner{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}

/* 上タイトル */
.block-hanpukai-popular__lead{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:0 0 18px;
  color:#000;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0;
}

/* 両サイドの斜め線 */
.block-hanpukai-popular__lead::before,
.block-hanpukai-popular__lead::after{
  content:"";
  display:block;
  width:14px;
  height:1px;
  background:#000;
}

.block-hanpukai-popular__lead::before{
  transform:rotate(60deg);
}

.block-hanpukai-popular__lead::after{
  transform:rotate(-60deg);
}

/* タイトル画像 */
.block-hanpukai-popular__title{
  margin:0;
  border:none;
}

.block-hanpukai-popular__title img{
  display:block;
  max-width:400px;
  width:auto;
  height:auto;
  margin:0 auto;
}

@media (max-width: 767px){
  .block-hanpukai-popular{
    margin-top:60px;
  }

  .block-hanpukai-popular__inner{
    padding:0 15px;
  }

  .block-hanpukai-popular__lead{
    gap:12px;
    margin-bottom:22px;
    font-size:20px;
  }

  .block-hanpukai-popular__lead::before,
  .block-hanpukai-popular__lead::after{
    width:16px;
  }

  .block-hanpukai-popular__title img {
    width:90%;
  }

}




/* =========================
  ここが人気　頒布会 下段01
========================= */
.block-hanpukai-popular-point{
  width:100%;
  box-sizing:border-box;
  margin-top:50px;
  padding:40px 0;
  position:relative;
}

/* ★ 背景四角 */
.block-hanpukai-popular-point::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:32%;
  height:190px;
  background:#e6f1f2;
  z-index:0;
}
@media (min-width: 1300px) {
  .block-hanpukai-popular-point::before{
    width:37%;
  }
}
@media (min-width: 768px) and (max-width: 1050px){
  .block-hanpukai-popular-point::before{
    width:25%;
  }
}


.block-hanpukai-popular-point__inner{
  max-width:800px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7%;
  padding:0 20px;
  box-sizing:border-box;

  /* ★ 追加：四角より前に出す */
  position:relative;
  z-index:1;
}

/* 画像ブロック */
.block-hanpukai-popular-point__image{
  width:53%;
  text-align:center;
  box-sizing:border-box;
}

.block-hanpukai-popular-point__image img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
  margin:0 auto;
}

.block-hanpukai-popular-point__caption{
  margin:12px 0 0;
  color:#000;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.7;
  text-align:center;
}

/* テキストブロック */
.block-hanpukai-popular-point__text{
  width:40%;
  box-sizing:border-box;
  text-align:left;
}

.block-hanpukai-popular-point__title{
  margin:0 0 15px;
  color:#333;
  font-family:
  "Zen Old Mincho",
  "Hiragino Mincho ProN",
  "Yu Mincho",
  "MS PMincho",
  serif;
  font-size:26px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:0.04em;
  border:none;
}

.block-hanpukai-popular-point__desc{
  margin:0;
  color:#333;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  text-align:left;
  padding-bottom:40px;
}

@media (max-width: 767px){
  .block-hanpukai-popular-point{
    margin-top:30px;
    padding:30px 0;
  }

  /* ★ SP：左上・縦長 */
  .block-hanpukai-popular-point::before{
    top:0;
    bottom:auto;

    width:40%;
    height:275px;
  }

  .block-hanpukai-popular-point__inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    padding:0 15px;
  }

  .block-hanpukai-popular-point__text{
    width:100%;
    display:contents;
  }

  .block-hanpukai-popular-point__title{
    order:1;
    width:100%;
    margin:0 0 40px;
    font-size:28px;
    line-height:1.6;
    text-align:center;
  }

  .block-hanpukai-popular-point__image{
    order:2;
    width:100%;
    margin:0 0 35px;
  }

  .block-hanpukai-popular-point__caption{
    margin-top:14px;
    font-size:16px;
    line-height:1.7;
  }

  .block-hanpukai-popular-point__desc{
    order:3;
    width:100%;
    font-size:18px;
    line-height:1.8;
    text-align:left;
    padding-bottom:10px;
  }
}

/* =========================
  逆パターン
========================= */

/* PC：左右反転 */
.block-hanpukai-popular-point--reverse .block-hanpukai-popular-point__inner{
  flex-direction:row-reverse;
}

/* 背景を右に */
.block-hanpukai-popular-point--reverse::before{
  left:auto;
  right:0;
}

/* SP：縦並びに戻す + 背景だけ右上へ */
@media (max-width: 767px){
  .block-hanpukai-popular-point--reverse .block-hanpukai-popular-point__inner{
    flex-direction:column;
  }

  .block-hanpukai-popular-point--reverse::before{
    left:auto;
    right:0;
  }
}




/* 頒布会のメリット */


.block-hanpukai-merit__lead{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:100px 0 60px;
  color:#333;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:22px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0;
}

/* 両サイドの斜め線 */
.block-hanpukai-merit__lead::before,
.block-hanpukai-merit__lead::after{
  content:"";
  display:block;
  width:14px;
  height:1px;
  background:#333;
}

.block-hanpukai-merit__lead::before{
  transform:rotate(60deg);
}

.block-hanpukai-merit__lead::after{
  transform:rotate(-60deg);
}

@media (max-width: 767px){

  .block-hanpukai-merit__lead{
    gap:5px;
    margin-top:50px;
    margin-bottom:50px;
    font-size:20px;
  }

  .block-hanpukai-merit__lead::before,
  .block-hanpukai-merit__lead::after{
    width:16px;
  }

}




/* =========================
  2-1枠
========================= */
.block-2col-1{
  width:100%;
  box-sizing:border-box;
  margin-top:0!important;
  margin-bottom:20px;
}

.block-2col-1__inner{
  max-width:1000px;
  margin:0 auto;
  display:flex;
  gap:20px;
  box-sizing:border-box;
}

.block-2col-1__left,
.block-2col-1__right{
  flex:1;
  display:flex;
  flex-direction:column;
}

.block-2col-1__left{
  gap:20px;
}

.block-2col-1__box{
  position:relative;
  border:1px solid #333;
  box-sizing:border-box;
  background:#fff;
  min-height:160px;
  padding:30px 15px 30px 30px;
}

.block-2col-1__left .block-2col-1__box{
  flex:1;
}

.block-2col-1__right .block-2col-1__box{
  flex:1;
}

/* =========================
  左肩アイコン背景
========================= */

/* borderを隠すための白マスク */
.block-2col-1__box::after{
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  width:82px;
  height:82px;
  background:#fff;
  z-index:2;
}

/* アイコン背景本体 */
.block-2col-1__box::before{
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  width:74px;
  height:74px;
  background:#73aab7;
  border-radius:0 0 18px 0;
  z-index:3;
}

/* アイコン画像 */
.block-2col-1__icon{
  position:absolute;
  top:-1px;
  left:-1px;
  width:74px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
}

.block-2col-1__icon img{
  display:block;
  max-width:40px;
  max-height:40px;
  width:auto;
  height:auto;
}

.merit_title {
  color:#333;
    font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:clamp(18px, 2vw, 20px);
  font-weight:700;
  margin-left:70px;
  line-height:1.5;
}
.merit_guide {
  color:#333;
    font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:clamp(15px, 1.8vw, 16px);
  margin-top:20px;
  margin-left:70px;
  padding-right:30px;
  line-height:1.7;
}



@media (min-width: 768px) and (max-width: 1050px){
  .block-2col-1 {
    width:98%;
    margin:40px auto 20px;
  }
  .merit_title {
    margin-left:16%;
  }

  .merit_guide {
    margin-top:35px;
    margin-left:0;
  }
  .merit_guide.lg {
    margin-top:20px!important;
  }
}



/* =========================
  SP
========================= */
@media (max-width:767px){
  .block-2col-1 {
    width:92%;
    margin:40px auto 20px;
  }
  .block-2col-1__inner{
    flex-direction:column;
  }

  .block-2col-1__left,
  .block-2col-1__right{
    display:contents;
  }

  .block-a{
    order:1;
  }

  .block-right{
    order:2;
  }

  .block-b{
    order:3;
  }

  .block-2col-1__box{
    flex:none;
  }

  .block-2col-1__icon img{
    display:block;
    max-width:45px;
    max-height:45px;
    width:auto;
    height:auto;
  }

  .merit_title {
    font-size:clamp(18px, 2vw, 24px);
    margin-left:60px;
  }
  .merit_title.lg {
    margin-top:-10px;
  }

  .merit_guide {
    font-size:16px;
    margin-top:35px;
    margin-left:0;
    padding-right:10px;
  }
  .merit_guide.lg {
    margin-top:40px!important;
  }

}
@media (max-width:430px){
  .merit_guide.lg {
    margin-top:20px!important;
  }
}

/* =========================
  1-1枠
========================= */
.block-2col-1--single .block-2col-1__left{
  gap:0;
}



/* =========================
  価格案内ブロック
========================= */
.merit-price{
  margin-top:50px;

  color:#333;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:clamp(15px, 1.8vw, 16px);
  line-height:1.8;
}

.merit-price__item{
  margin:0 0 18px;
}

.merit-price__item:last-child{
  margin-bottom:0;
}

.merit-price__line{
  margin:0;
  padding-left:1em;
  text-indent:-1em;
}

.merit-price__sub{
  margin:4px 0 0;
  padding-left:1em;
  text-indent:0;
}
.merit-price .smu {
  color:#bf292a;
}

.merit-note{
  margin-top:18px;
  color:#333;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:14px;
  line-height:1.8;
}

.merit-note__line{
  margin:0;
  padding-left:1em;
  text-indent:-1em;
}

@media (min-width: 768px) and (max-width: 1050px){
  .merit-price{
    margin-left:0;

  }

  .merit-note{
    margin-left:0;
    padding-right:20px;
  }
  .tb-br{
    display:inline;
  }
}

/* =========================
  SP
========================= */
@media (max-width:767px){
  .merit-price{
    margin-top:35px;
    margin-left:0;
    padding-right:10px;
    font-size:16px;
    line-height:1.8;
  }

  .merit-note{
    margin-top:18px;
    margin-left:0;
    padding-right:10px;
    font-size:16px;
    line-height:1.8;
  }
}



/* =========================
  頒布会のお申し込みはこちら
========================= */
.block-hanpukai-btn{
  text-align: center;
  margin-top: 60px;
}

.block-hanpukai-btn a{
  position: relative;
  display: inline-block;
  width:600px!important;
  background: #bf292a;
  color: #fff;
  border: none;
  border-radius: 999px;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 34px 20px;
  line-height: 1.2;

  font-size: 0;
}

/* 表示テキスト */

.block-hanpukai-btn a::before{
  content: "頒布会のお申し込みはこちら";
  font-size: 16px;
  color: #fff;
}

/* 矢印 */
.block-hanpukai-btn a::after{
  content: "";
  position: absolute;
  right: 18%;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* hover（PCのみ） */
@media (hover:hover){
  .block-hanpukai-btn a:hover{
    filter: brightness(1.06);
    opacity:0.6;
  }
}

@media (max-width: 767px){

  .block-hanpukai-btn{
    margin-top: 30px;
  }

  .block-hanpukai-btn a{
    width:95%!important;
    padding: 22px 46px 22px 46px!important;
    line-height: 1.2;
  }

  .block-hanpukai-btn a::before{
    font-size: 18px;
    content: "頒布会のお申し込みは\Aこちら";
    white-space: pre;
    line-height:1.6;
  }

  .block-hanpukai-btn a::after {
    right:8%;
  }
}




/* =========================
  お客様の声
========================= */

.block-customer {
  padding-top:120px;
  padding-bottom:50px;
}

.block-customer__lead{
  margin:14px auto 50px;
  max-width:600px;
  text-align:center;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6em;
  color:#333;
}

@media (max-width: 767px){
  .block-customer {
    padding-top:120px;
  }

  .block-customer__lead{
    font-size:16px;
    line-height:1.8em;
  }
}

/* =========================
  お客様の声 背景ブロック
========================= */
.block-customer__bg{
  width:100%;
  padding:0 1%;
  max-width:1800px;
  margin:0 auto;
}

/* SP */
@media (max-width: 767px){
  .block-customer__bg{
    padding:0;

  }
}

/* =========================
  お客様の声 吹き出し（画像＋文字重ね）
========================= */
.customer-bubbles{
  display:flex;
  gap:2.5%;
  justify-content:center;
  align-items:stretch;
  max-width:1160px;
  margin:0 auto;
}

.customer-bubble{
  position:relative;
  flex:1 1 calc(100% / 3);
  max-width:calc(1160px / 3);
}

.customer-bubble__pic{
  display:block;
}

.customer-bubble__img{
  width:100%;
  height:auto;
  display:block;
}

/* 文字を画像の上に重ねる */
.customer-bubble__body{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:12% 15%!important;
  box-sizing:border-box;
  text-align:left;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  color:#333;
}

.customer-bubble__text{
  font-size:clamp(14px, 1.5vw, 16px);
  line-height:1.6em;
  font-weight:400;
  direction: ltr;
/*
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  overflow:hidden;
*/
}

/* 吹き出し調整 */
@media (min-width: 1570px) and (max-width: 1700px){
  .customer-bubble__body{
    padding:10% 15%!important;
  }

}

@media (min-width: 1400px) and (max-width: 1569px){
  .customer-bubble__body{
    padding:12% 15%!important;
  }

}
@media (min-width: 1160px) and (max-width: 1399px){
  .customer-bubble__body{
    padding:10% 15%!important;
  }

}



/* タブレット他 */
@media (min-width: 860px) and (max-width: 1159px){
  .customer-bubble__body{
    padding:10% 10%;
  }
}
@media (min-width: 768px) and (max-width: 859px){
  .customer-bubble__body{
    padding:7% 10%;
  }
  .customer-bubble__text {
    margin-top:1%;
    line-height:1.5em;
  }
}

/* SP */
@media (max-width: 767px){
  .customer-bubbles{
    flex-direction:column;
    gap:16px;
    align-items:center;
    padding-bottom:40px;
  }

  .customer-bubble{
    width:100%;
    max-width:320px;
    flex:0 0 auto;
  }

  .customer-bubble__body{
    padding: 40px;
  }

  .customer-bubble__text{
    font-size:16px;
    line-height:1.5em;
  }
}


.customer-bubble__name{
  font-size:clamp(14px, 1.5vw, 15px);
  line-height:1.6em;
  font-weight:400;
  margin-top:15px;
}



/* slick初期化後はflex解除 */
.customer-bubbles.slick-initialized{
  display:block;
  max-width:none;
  width:100%;
}

/* PC・SP共通：slickのチラ見せ */
.customer-bubbles .slick-list{
  overflow:visible;
}

.customer-bubbles .slick-slide{
  padding:0 12px;
  box-sizing:border-box;
}

.customer-bubble{
  width:auto;
  max-width:none;
  flex:none;
}

/* PC：中央3枚＋両端チラ見せ */
@media (min-width: 768px){
  .customer-bubbles{
    display:block;
    max-width:none;
    width:100%;
    margin:0 auto;
  }

  .customer-bubbles .slick-track{
    display:flex;
    align-items:flex-start;
  }

  .customer-bubbles .slick-slide{
    transition:transform .25s ease;
  }

  .customer-bubbles .customer-bubble{
    transform:translateY(0);
  }

  .customer-bubbles .customer-bubble.is-pattern-2{
    transform:translateY(35px);
  }
}

/* SP：中央（アクティブ）だけ下にずらす */
@media (max-width: 767px){
  .customer-bubbles{
    display:block;
    max-width:none;
    margin:0 auto;
  }

  .customer-bubbles .slick-slide{
    padding:0 8px;
    transition: transform .25s ease;
  }

  .customer-bubbles .slick-slide.slick-center{
    transform: translateY(35px);
  }

  .customer-bubble__name{
    font-size:16px;
  }
}





.block-order {
  margin-top:100px;
}

/* PC幅制御 */
.block-order__inner{
  max-width:1000px;
  margin:0 auto;
  box-sizing:border-box;
}

/* タイトル帯 */
.block-order__title-band{
  margin-top:30px;
  background:#73aab7;
  color:#fff;
  padding:15px 40px;
  text-align:left;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.4;
}

/* 本文（太字） */
.block-order__lead{
  width:90%;
  margin:30px auto 0;
  color:#333;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.6;
}

/* 本文（詳細） */
.block-order__text{
  width:90%;
  margin:20px auto 0;
  color:#333;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.8;
}

/* リンク */
.block-order__text a{
  color:#bf292a;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}

.mt-blue {
  margin-top:70px;
}



@media (min-width: 768px) and (max-width: 1050px){
  .block-order__inner{
    max-width:98%;
  }
}

@media (max-width: 767px){
  .block-order {
    margin-top:80px;
  }

  .block-order__inner{
    max-width:95%;
  }

  .block-order__title-band{
    padding:14px 5px 14px 20px;
  }

  .block-order__lead{
    font-size:18px;
    width:92%;
  }

  .block-order__text{
    font-size:16px;
    width:92%;
    line-height:1.6;
  }
  .mt-blue {
    margin-top:50px;
  }

}




/* 支払い項目 */
.block-order__pay-item{
  margin-top:30px;
}

/* 見出し行 */
.block-order__pay-head{
  display:flex;
  align-items:center;
  width:90%;
  margin:0 auto;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:20px;
  font-weight:700;
  color:#333;
}

/* 丸数字（指定サイズ） */
.block-order__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:21px;
  height:21px;
  margin-right:8px;

  background:#333;
  color:#fff;
  border-radius:50%;

  font-size:14px;
  font-weight:700;
  line-height:1;
  flex-shrink:0;
}

/* 説明文 */
.block-order__pay-text{
  margin-top:10px;
  width:90%;
  margin:5px auto 0;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  color:#333;
}


@media (max-width: 767px){
  .block-order__pay-head{
    width:92%;
    font-size:18px;
  }
  .block-order__pay-text{
    width:92%;
    font-size:16px;
  }
}




/* 注意書きブロック */
.block-order__note{
  width:90%;
  margin:60px auto 0;
  padding:25px 30px;
  background:#f1eeeb;
  color:#333;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;

  text-align:center; /* PC中央 */
}

/* 太字 */
.block-order__note-strong{
  font-size:20px;
  font-weight:700;
  line-height:1.6;
}

/* 通常 */
.block-order__note-text{
  margin-top:3px;
  font-size:16px;
  font-weight:400;
  line-height:1.8;
}

/* SP */
@media (max-width:767px){
  .block-order__note{
    text-align:left;
    padding:30px 20px;
    width:92%;
    margin-top:40px;
  }
  .block-order__note-strong{
    font-size:18px;
  }
  .block-order__note-text{
    margin-top:13px;
    font-size:16px;
    line-height:1.7;
  }
}




/* =========================
  お届けについて
========================= */
.block-hanpukai-delivery-info{
  width:100%;
  box-sizing:border-box;
  margin-top:30px;
}

.block-hanpukai-delivery-info__inner{
  width:90%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3%;
  box-sizing:border-box;
}

.block-hanpukai-delivery-info__text{
  width:57%;
}

.block-hanpukai-delivery-info__item + .block-hanpukai-delivery-info__item{
  margin-top:30px;
}

.block-hanpukai-delivery-info__heading{
  margin:0 0 6px;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:clamp(18px, 2vw, 20px);
  font-weight:700;
  line-height:1.6;
  color:#333;
}

.block-hanpukai-delivery-info__body{
  margin:0;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:clamp(15px, 1.6vw, 16px);
  font-weight:400;
  line-height:1.6;
  color:#333;
}

.block-hanpukai-delivery-info__image{
  width:40%;
  text-align:right;
}

.block-hanpukai-delivery-info__image img{
  max-width:100%;
  height:auto;
  display:block;
  margin-left:auto;
}

@media (min-width: 768px) and (max-width: 1050px){
  .block-hanpukai-delivery-info__text{
    width:52%;
  }

  .block-hanpukai-delivery-info__image{
    width:45%;
    text-align:right;
  }
}



/* =========================
  SP
========================= */
@media (max-width: 767px){
  .block-hanpukai-delivery-info{
    margin-top:30px;
  }

  .block-hanpukai-delivery-info__inner{
    display:block;
    width:92%;
  }

  .block-hanpukai-delivery-info__text{
    width:100%;
  }

  .block-hanpukai-delivery-info__item + .block-hanpukai-delivery-info__item{
    margin-top:30px;
  }

  .block-hanpukai-delivery-info__heading{
    font-size:18px;
    line-height:1.7;
  }

  .block-hanpukai-delivery-info__body{
    font-size:16px;
    line-height:1.6;
  }

  .block-hanpukai-delivery-info__image{
    width:100%;
    margin-top:28px;
    text-align:center;
  }

  .block-hanpukai-delivery-info__image img{
    margin:0 auto;
    width:95%;
  }
}




/* =========================
  頒布会 ご案内テキスト
========================= */
.block-hanpukai-contact-note{
  width:100%;
  box-sizing:border-box;
  margin-top:30px;
}

.block-hanpukai-contact-note__inner{
  width:90%;
  margin:0 auto;
  box-sizing:border-box;
}

.block-hanpukai-contact-note__lead{
  margin:0;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:clamp(18px, 2vw, 20px);
  font-weight:700;
  line-height:1.8;
  color:#333;
}

.block-hanpukai-contact-note__lead-accent{
  color:#bf292a;
}

.block-hanpukai-contact-note__text{
  margin-top:5px;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:clamp(15px, 1.6vw, 16px);
  font-weight:400;
  line-height:1.8;
  color:#333;
}

.block-hanpukai-contact-note__link-wrap{
  margin-top:25px;
  text-align:left;
}

.block-hanpukai-contact-note__link{
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  color:#bf292a;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* =========================
  SP
========================= */
@media (max-width: 767px){
  .block-hanpukai-contact-note__inner{
    width:92%;
  }
  .block-hanpukai-contact-note__lead{
    font-size:18px;
    line-height:1.6;
  }

  .block-hanpukai-contact-note__text{
    font-size:16px;
  }

  .block-hanpukai-contact-note__link-wrap{
    text-align:center;
    margin-top:30px;
  }
}




/* =========================
  汎用区切り線
========================= */
.u-divider{
  width:100%;
  height:1px;
  background:#4d4d4d;
  margin:60px 0;
}





/* =========================
  ご注文・お支払い・お届けの流れ
========================= */
.block-hanpukai-flow{
  width:100%;
  box-sizing:border-box;
}

/* タイトル */
.block-hanpukai-flow__title{
  margin:0 0 30px;
  text-align:center;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.6;
  color:#333;
}

/* 背景（常にフル幅） */
.block-hanpukai-flow__bg{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#f1eeeb;
  padding:40px 0;
  box-sizing:border-box;
}

/* 中身 */
.block-hanpukai-flow__inner{
  max-width:950px;
  width:95%;
  margin:0 auto;
}

.block-hanpukai-flow__inner img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
  SP
========================= */
@media (max-width: 767px){

  .block-hanpukai-flow__title{
    font-size:18px;
    margin-bottom:35px;
  }

  .block-hanpukai-flow__bg{
    padding:25px 5px 0;
  }
}




/* カレンダー ブロック */

.block-hanpukai-calendar__scroll-note{
  margin-top:50px;
  text-align:center;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.8;
  color:#333;
}


/* =========================
  横スクロールガイド
========================= */
.block-scroll-hint{
  display:none;
}

/* SPのみ表示 */
@media (max-width: 767px){
  .block-scroll-hint{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:20px;
  }

  /* 横線 */
  .block-scroll-hint__line{
    display:block;
    width:40px;
    height:1px;
    background:#333;
    animation:scrollLine 1.5s ease-in-out infinite;
  }

  /* 矢印 */
  .block-scroll-hint__arrow{
    font-size:16px;
    color:#333;
    animation:scrollArrow 1.5s ease-in-out infinite;
  }
}

/* アニメーション */
@keyframes scrollLine{
  0%{
    transform:translateX(0);
    opacity:0.3;
  }
  50%{
    transform:translateX(10px);
    opacity:1;
  }
  100%{
    transform:translateX(0);
    opacity:0.3;
  }
}

@keyframes scrollArrow{
  0%{
    transform:translateX(0);
    opacity:0.3;
  }
  50%{
    transform:translateX(10px);
    opacity:1;
  }
  100%{
    transform:translateX(0);
    opacity:0.3;
  }
}



/* =========================
  カレンダー
========================= */
.block-hanpukai-calendar{
  width:90%;
  margin:0 auto;
  box-sizing:border-box;
  margin-top:70px;
}

/* PC：中央寄せ */
.block-hanpukai-calendar__inner{
  max-width:1000px;
  margin:0 auto;
  text-align:center;
}

.block-hanpukai-calendar__inner img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* =========================
  SP：横スクロール
========================= */
@media (max-width: 767px){
  .block-hanpukai-calendar{
    margin-top:10px;
    width:100%;
  }

  .block-hanpukai-calendar__inner{
    max-width:none;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .block-hanpukai-calendar__inner img{
    width:auto;
    max-width:none;
    height:450px;
  }
}



.block-hanpukai-calendar__note{
  margin-top:30px;
  text-align:center;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  color:#333;
}
@media (max-width: 767px){
  .block-hanpukai-calendar__note{
    margin-top:40px;
  }
}



/* モーダル */
.block-hanpukai-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.7);
  opacity:0;
  transition:opacity .25s ease;

  align-items:center;
  justify-content:center;
}

.block-hanpukai-modal.is-active{
  display:flex;
  opacity:1;
}

.block-hanpukai-modal__content{
  position:relative;
  display:inline-block;
  transform:translateY(60px);
}

.block-hanpukai-modal__switch{
  display:block;
  width:max-content;
  margin:-47px auto 0 10px;
  position:relative;
  z-index:2;
  padding:6px 14px;
  border:1px solid #fff;
  background:rgba(45,38,8,.72);
  border-radius: 4px;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  transition:opacity .35s ease;
}
.block-hanpukai-modal__switch.is-changing{
  opacity:0;
}
.block-hanpukai-modal__img{
  max-width:550px;
  max-height:85vh;
  display:block;
  margin:0 auto;
  transform:scale(.96);
  opacity:0;
  transition:transform .45s ease, opacity .45s ease;
}

.block-hanpukai-modal.is-active .block-hanpukai-modal__img{
  transform:scale(1);
  opacity:1;
}

.block-hanpukai-modal__img.is-changing{
  opacity:.3;
  transform:scale(.98);
}
.block-hanpukai-modal.is-active .block-hanpukai-modal__img.is-changing{
  opacity:0!important;
  transform:scale(.98)!important;
}

.block-hanpukai-modal__close{
  position:absolute;
  top:-18px;
  right:-18px;
  z-index:10001;
  border:0;
  background:none;
  color:#fff!important;
  font-size:42px;
  line-height:1;
  cursor:pointer;
  padding:0;
  appearance:none;
}

.block-hanpukai-modal__prev,
.block-hanpukai-modal__next{
  position:absolute;
  top:50%;
  z-index:10000;
  transform:translateY(-50%);
  border:0;
  background:none;
  cursor:pointer;
  padding:0;
  appearance:none;
  width:40px;
  height:40px;
}

.block-hanpukai-modal__prev::before,
.block-hanpukai-modal__next::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:22px;
  border-top:4px solid #fff;
  border-right:4px solid #fff;
}

.block-hanpukai-modal__prev::before{
  transform:translate(-40%,-50%) rotate(-135deg);
}

.block-hanpukai-modal__next::before{
  transform:translate(-60%,-50%) rotate(45deg);
}

.block-hanpukai-modal__prev{
  left:-54px;
}

.block-hanpukai-modal__next{
  right:-54px;
}

@media (max-width:767px){
  .block-hanpukai-modal__img{
    max-width:86vw;
    max-height:80vh;
  }

  .block-hanpukai-modal__close{
    top:-24px;
    right:15px;
    font-size:40px;
  }

  .block-hanpukai-modal__prev{
    left:-5px;
  }

  .block-hanpukai-modal__next{
    right:-5px;
  }

  .block-hanpukai-modal__prev::before,
  .block-hanpukai-modal__next::before{
    width:20px;
    height:20px;
    border-top:4px solid #fff;
    border-right:4px solid #fff;
    filter:drop-shadow(0 0 4px #000) drop-shadow(0 0 8px #000);
  }

  .block-hanpukai-modal__content{
    margin-top:-50px;
  }
  .block-hanpukai-modal__content img{
    width:80%;
  }

  .block-hanpukai-modal__switch{
    margin:-38px 0 0px 42px;
    padding:3px 10px;
    font-size:16px;
  }

}


.block-hanpukai-course-goods__item > .block-hanpukai-course-goods__desc,
.block-hanpukai-course-goods__item > .block-hanpukai-course-goods__materials{
  display:none;
}

.block-hanpukai-modal__main{
  display:block;
  max-height:90vh;
  overflow-y:auto;
}

.block-hanpukai-modal__desc{
  margin:10px auto;
  color:#fff;
  font-size:18px;
  line-height:1.25;
  text-align:left;
  background:none;
  max-width:550px;
  padding:10px 10px 0;
}

.block-hanpukai-modal__materials{
  display:none;
  margin-top:10px;
  color:#fff;
  font-size:16px;
  line-height:1.2;
  text-align:left;
  background:none;
  max-width:550px;
  padding:10px 10px 0;
  transition:opacity .25s ease;
}
.block-hanpukai-modal__text-hide{
  opacity:0;
}
.block-hanpukai-modal__desc,
.block-hanpukai-modal__materials{
  transition:opacity .35s ease;
}

.block-hanpukai-modal__desc.is-changing,
.block-hanpukai-modal__materials.is-changing{
  opacity:0;
}

@media (max-width:767px){
  .block-hanpukai-modal__desc{
    font-size:16px;
    max-width:none;
    padding:10px 15px 0;
  }

  .block-hanpukai-modal__materials{
    font-size:15px;
    max-width:none;
    padding:10px 15px 0;
  }
}