:root{
  --header-bg:#111;
  --fg:#fff;
  --line:rgba(255,255,255,.12);
  --panel:#1a1a1a;
  --tap:rgba(255,255,255,.08);

  /* 高さは端末で可変 */
  --header-h:56px;          /* ~639px */
}
@media (min-width:640px){
  :root{ --header-h:64px; } /* 640px~ */
}

#tokuten,
#point,
#category,
#howto,
#payment,
#information,
#attn {
  margin-top:-50px;
  padding-top: 50px;
}

#tokuten {
  margin-top:-50px;
  padding-top: 0;
}


/* 上部固定＋全幅 */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: var(--fg);
  /* iOSノッチ対応（任意） */
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
background: linear-gradient(to right,  #82c039 0%,#005ca7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  height: 65px;
}

@media (max-width:640px){
  .site-header{
    height: 60px;
  }
}

/* 中身は最大幅1040pxに中央寄せ */
.header-inner{
  max-width: 1040px;
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width:640px){
  .header-inner{ padding: 0 20px; }
}

.logo img{ display:block; height:32px; width:auto; }

@media (max-width:640px){
  .logo img{ display:block; height:22px; width:auto; }
}


/* 右側（ボタン3つ＋ハンバーガー） */
.right-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.action-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:36px; border-radius:10px;
  background:transparent; transition:background .15s ease;
  margin:0 5px;
}
@media (max-width:640px){
  .action-btn{
    width:auto; height:25px;
    margin:0 0px;
  }
}
.action-btn:hover{ background:var(--tap); }
.action-btn img{ width:auto; height:36px; display:block; }

/* ハンバーガー（3本線は前回の安定版） */
.nav-toggle{ display:none; }
.hamburger{
  position:relative;
  width:42px; height:36px;
  border-radius:10px; display:inline-block;
  cursor:pointer; transition:background .15s ease;
  font-size:0; line-height:0;
}
.hamburger:hover{ background:var(--tap); }
.hamburger span{
  position:absolute; left:50%; top:50%;
  width:22px; height:2px; background:var(--fg);
  transform:translate(-50%, -50%);
  border-radius:1px; margin:0; padding:0;
}
.hamburger span:nth-child(1){ transform:translate(-50%, calc(-50% - 6px)); }
.hamburger span:nth-child(2){ transform:translate(-50%, -50%); }
.hamburger span:nth-child(3){ transform:translate(-50%, calc(-50% + 6px)); }
.site-header.is-open .hamburger span:nth-child(1){ transform:translate(-50%, -50%) rotate(45deg); }
.site-header.is-open .hamburger span:nth-child(2){ opacity:0; }
.site-header.is-open .hamburger span:nth-child(3){ transform:translate(-50%, -50%) rotate(-45deg); }

/* 下方向に開くメニュー */
.menu-panel{
  background:var(--panel);
  border-bottom:0;
  overflow:hidden;
  max-height:0;
  transition:max-height .25s ease;
  background: linear-gradient(to right,  #82c039 0%,#005ca7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.site-header.is-open .menu-panel{ max-height:320px; } /* 必要なら調整 */
.menu-panel ul{
  max-width:1040px; margin:0 auto;
  padding:8px 16px 14px;
  list-style:none; display:grid; gap:4px;
}
@media (min-width:640px){
  .menu-panel ul{ padding:8px 20px 14px; }
}
.menu-panel a{
  display:block; padding:10px 8px; border-radius:8px;
  color:var(--fg); text-decoration:none; line-height:1.2;
}
.menu-panel a:hover{ background:var(--tap); }

/* 固定ヘッダー分の押し上げ（ページ本文用） */
body{
  /* メニュー展開はオーバーレイ表示。本文はヘッダーバーの高さ分だけ下げる */
  padding-top: var(--header-h);
  margin:0;

  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;

  line-height: 1.35;
}

/* 画像のベースラインずれ対策 */
img{ vertical-align: middle; }


h2 {
    width:700px;
    display: block;
    margin:auto;
    padding:80px 0 0 0;
}
@media (max-width:640px){ 
  h2 {
    width:90%;
    display: block;
    margin:auto;
    padding:50px 0 0 0;
  }
}

h2 img {
    width: 100%;
    height: auto;
}

h3 {
    height: auto;
    width: 400px;
    text-align: center;
    display:block;
    margin:10vw auto 3vw;
  }
  h3 img{
    display:block; width:100%; height:100%;
  }

@media (max-width:640px){ 
  
}

h4 {
    height: auto;
    width: 500px;
    text-align: center;
    display:block;
    margin:4vw auto 3vw;
  }
  h4 img{
    display:block; width:100%; height:100%;
  }

h5 {
  font-size: 1.25rem;
  text-align: center;
  margin:2rem 0 1rem 0;
}

h5.greenleft {
  margin:2rem 0 1rem 0;
  border-left:8px solid #6FBA2C ;
  text-align: left;
  padding: 0 0 0 10px;
  font-size:1.3rem;
}

@media (max-width:640px){ 
  h5 {
    font-size: 1.1rem;
    text-align: center;
    margin:1rem 0 0.5rem 0;
  }

  h5.greenleft {
    border-left:8px solid #6FBA2C ;
    text-align: left;
    padding: 0 0 0 10px;
    font-size:1.1rem;
  }
}

a.btn {
  width:400px;
  display: block;
  margin:3rem auto;
}
a.btn img {
  width: 100%;
}

section {
    padding:20px 0;
}

.keizoku {
  background-color: #82C039;
  padding:0px 0 80px;
}
.keizoku .section_inner {
  width:700px;
  margin: auto;
  padding:0 50px;
}
@media (max-width:640px){
  .keizoku {
    padding:0px 0 20px;
  }
  .keizoku .section_inner {
    width:calc(100% - 32px);
    margin: auto;
    padding:0 16px;
  }
}

#point .section_inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#point .section_inner div {
  width:46%;
  margin:0 0 30px 0;
}
@media (max-width:640px){

  #point .section_inner {
    display: block;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #point .section_inner div {
    width:100%;
    margin:0 0 30px 0;
  }
}
#point .section_inner div p {
  margin:1rem 0 0 0;
  padding: 0;
}

.section-kv {
    width: 100%;
    background:url(https://3vbibuzz.user.webaccel.jp/wp-content/themes/bellmare_20250109//bell12_2026/images/main_kv.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom:0;
}
.kv_inner {
    padding-top: 30vw;
    padding-bottom: 0vw;
    width: 70%;
    max-width: 850px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    @media (max-width:640px){
        .kv_inner {
            padding-top: 15rem;
            padding-bottom: 0;
            width: 85%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        h3 {
          height: auto;
          width: 90%;
          text-align: center;
          display:block;
          margin:10vw auto 0vw;
        }
        #howto h3,
        #payment h3,
        #information h3,
        #attn h3,
        .footer-inner h3 {
          height: auto;
          width: 60%;
          text-align: center;
          display:block;
          margin:10vw auto 0vw;
        }
        h4 {
          height: auto;
          width: 100%;
          text-align: center;
          display:block;
          margin:4vw auto 3vw;
        }
        a.btn {
          width:300px;
          display: block;
          margin:2rem auto;
        }
    }
.kv_inner img {
    width: 100%;
    display: block;
}

.section_inner {
  max-width: 1040px;
  margin: 16px auto;
  padding: 0 16px;
}
.section_inner img {
  width: 100%;
  margin:0.5rem 0;
}
.section_inner p {
  padding: 0 16px;
  text-align: justify;
}
.section_inner p.center {
  text-align: center;
}
.section_inner p span {
  color: #666;
}


.h2-image {
  height: auto;
  width: 400px;
  text-align: center;
  display:block;
  margin:10vw auto 3vw;
}
.h2-image img{
  display:block; width:100%; height:100%;
}
.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0;
}

@media (max-width:640px){
    .h2-image {
      height: auto;
      width: 300px;
      text-align: center;
      display:block;
      margin:20vw auto 3vw;
    }
}

/* ===== Footer base ===== */
  .site-footer{
    width: 100%;
    background: #fff;   /* 指定色 */
    color: #000;           /* 文字は黒 */
  }
  .site-footer a{ color: inherit; text-decoration: none; }
  .site-footer a:hover{ text-decoration: underline; }

  /* 幅はここまでと同じ：max 1040 / 640pxブレーク */
  .footer-inner{
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px 16px 20px;
    display: block;
    text-align: center;
  }
  .footer-logo {
    width: 6rem;
    display: block;
    margin:auto;
  }
  .footer-logo img {
    width: 100%;
  }
  
  .footer-address p {
    font-size: 1.2rem;
    margin:0.25rem 0 1rem;
  }
  .footer-copy {
    font-size: 1rem;
  }

  

  .formlink {
    padding: 1rem 2rem;
    border: 1px solid #000;
    display: inline-block;
  }
  @media (max-width:640px){
    .footer-inner{
      padding: 20px 12px 5px;
    }
    .footer-content {
      padding-bottom: 50px;
    }
    .footer-logo {
      width: 6rem;
    }
    h2#footer-heading {
      padding:0.25rem 4rem;
      font-size:1.2rem;
    }
    .footer-address p {
      font-size: 0.85rem;
      margin:0.25rem 0;
      line-height: 1.1;
    }
    .footer-copy {
      font-size: 0.85rem;
      margin:20vw 0 0 0;
    }
  }



/* 写真スライダー */

/* ===== 基本指定 ===== */
.photo-slider{ width:100%; margin: 0; padding: 0;background-color: #000; }
.photo-viewport{
  overflow: hidden;
  width: 100%;
}

/* スピードと間隔は変数で管理 */
.photo-slider{
  --gap: 0;
  --duration: 40s;   /* 流れる速さ（長いほどゆっくり） */
}

/* 横一列に並べ、トラック自体を左に流す */
.photo-track{
  display: flex;
  gap: var(--gap);
  width: max-content;                 /* コンテンツ幅ぶんだけ広がる */
  animation: slide-left var(--duration) linear infinite;
  margin: 0;
}

/* 写真カード（4:3・幅はvwで可変） */
.photo-track li{
  list-style: none;
  flex: 0 0 auto;
  width: 35vw;                         /* SP既定幅 */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.photo-track img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* PC（≥640px）は 20vw に */
@media (min-width:640px){
  .photo-track li{ width: 20vw; }
  .photo-slider{ --duration: 45s; }
}

/* 無限ループ用アニメーション
    同じ並びを2巡ぶん入れているので、-50%まで動かして継ぎ目なしに */
@keyframes slide-left{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 好み：端の角を見せたい時のマスク（任意）
.photo-viewport{
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
} */


.join_btn {
  position: fixed;
  right: 0;
  bottom:5vw;
  width:30vw;
  max-width: 390px;
  cursor: pointer;
  z-index: 4000;
}
.join_btn img {
  width: 100%;
}
@media (max-width:640px){ 
  .join_btn {
    position: fixed;
    right: 0;
    bottom:5vw;
    width:70vw;
  }
}


/* BENEFIT */

.benefit {
background: #000;
padding: 30px 0;
}
.benefit dl {
  padding: 0px;
  display: flex;
  align-items: flex-start;
  margin:30px 50px 50px 50px;
}
.benefit dt {
  width: 15%;
}
.benefit dt img {
  width: 100%;
}
.benefit dd {
  width: 85%;
}
.benefit dd .ttl img {
  height: 2rem;
  width: auto;
}
.benefit dd .ttl2 img {
  height: 4rem;
  width: auto;
}
.benefit dd p {
  color: #fff;
  margin: 0.5rem 0;
  padding: 0;
  text-align: justify;
}
.benefit dd span {
  color: #ccc;
  margin: 0.5rem 0;
  padding: 0;
  font-size:0.9rem;
  text-align: justify;
}
.benefit dd img {
  width:50%;
}

@media (max-width:640px){ 
  .benefit {
  padding: 10px;
  }
  .benefit dl {
    margin:20px 30px 20px 20px;
  }
  .benefit dt {
    width: 25%;
  }
  .benefit dd {
    width: 75%;
    padding:0;
    margin:0 0 0 1rem;
  }
  .benefit dd .ttl img {
    height: 1.2rem;
    width: auto;
  }
  .benefit dd .ttl2 img {
    height: 2.8rem;
    width: auto;
  }
  .benefit dd p {
    padding: 0;
  }
  .benefit dd span {
    font-size:0.9rem;
  }
  .benefit dd img {
    width:100%;
  }
}


.schedule h4 {
  margin:4vw auto 1vw;
  padding:0;
}
.schedule .bluettl {
  background-color: #005ca7;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding:0.5rem;
}
.schedule p.read {
  text-align: center;
  font-size: 1.25rem;
}
.schedule p span.red {
  font-weight: bold;
  color: #ff0000;
}

.schedule_inner {
  background-color: #E6E6E6;
  padding:30px;
}
@media (max-width:640px){ 
  .schedule h4 {
    margin:8vw auto 1vw;
    padding:0;
  }
  .schedule .bluettl {
    font-size: 1rem;
    font-weight: bold;
    padding:0.5rem;
  }
  .schedule p {
    padding:0 10px;
  }
  .schedule p.read {
    font-size: 1rem;
  }

  .schedule_inner {
    background-color: #E6E6E6;
    padding:10px;
  }
  .schedule_graph {
    overflow-x: scroll;

  }
  .schedule_graph img {
    width:700px;
    display: block;
  }
}


.payment {
  padding:0 0 20px 0;
}

.payment h4 {
  margin:4vw auto 1vw;
  padding:0;
  width:50%;
}
.payment h4 img {
  width: 100%;
}
@media (max-width:640px){ 
  .payment h4 {
    margin:4vw auto 1vw;
    padding:0;
    width:70%;
  }
}
.payment h5 {
  margin:0vw auto 1vw;
  padding:0;
  font-size:1.5rem;
}
.payment h5.green {
  margin:3rem 0 1rem 0;
  color:#6FBA2C ;
  position: relative; /*positionをrelativeに指定*/
}
.payment h5.green::after {
  position: absolute; /*positionをabsoluteに指定*/
  content: "";
  background-color: #6FBA2C;/*下線の色*/
  width: 80px; /*線の幅*/
  height: 3px; /*線の太さ*/
  bottom: -5px; /*線のタテ位置*/
  left: 50%;  /*線のヨコ位置*/
  transform: translateX(-50%);　/*線のヨコ位置*/
}
.payment .bluettl,
.payment .greenttl {
  background-color: #005ca7;
  border: 1px solid #005ca7;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding:0.5rem;
}
.payment .greenttl {
  background-color: #6FBA2C;
  border: 1px solid #6FBA2C;
}
.payment .bluebox {
  border: 1px solid #005ca7;
  text-align: center;
  padding:40px;
}
.payment .greenbox {
  border: 1px solid #6FBA2C;
  text-align: center;
  padding:40px;
}
.payment .bluebox2 {
  border: 1px solid #005ca7;
  border-top:0px;
  text-align: center;
  padding:40px;
}
.payment .bluebox img {
  width: 50%;
}
.payment .redttl {
  background-color: #ff0000;
}
.payment .blackttl {
  background-color: #000;
}
.payment p.read {
  text-align: center!important;
  font-size: 1.25rem;
  font-weight: bold;
}
.payment p span.red {
  font-weight: bold;
  color: #ff0000;
}
@media (max-width:640px){ 
  .payment {
    padding:12px 16px 0;
  }

  .payment h4 {
    margin:4vw auto 1vw;
    padding:0;
  }
  .payment h5 {
    margin:0vw auto 1vw;
    padding:0;
    font-size:1.2rem;
  }
  .payment h5.green {
    margin:2rem 0 1rem 0;
  }
  .payment .bluettl,
  .payment .greenttl {
    font-size: 1rem;
    font-weight: bold;
    padding:0.5rem;
  }
  .payment .greenttl {
  }
  .payment .bluebox {
    padding:20px;
  }
  .payment .greenbox {
    padding:20px;
  }
  .payment .bluebox2 {
    padding:20px;
  }
  .payment .bluebox img {
    width: 100%;
  }
  .payment .blackttl {
    background-color: #000;
  }
  .payment p.read {
    font-size: 1rem;
  }
}



.information {
  padding:0 0 100px 0;
}

.information h4 {
  margin:4vw auto 1vw;
  padding:0;
}
.information .bluettl,
.information .redttl,
.information .blackttl {
  background-color: #005ca7;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding:0.5rem;
}
.information .redttl {
  background-color: #ff0000;
}
.information .blackttl {
  background-color: #000;
}
.information p.read {
  text-align: center;
  font-size: 1.25rem;
}
.information p span.red {
  font-weight: bold;
  color: #ff0000;
}
.information a {
  display: block;
  margin:3rem auto;
  width: 40%;
}
.information a img {
  width: 100%;
}

@media (max-width:640px){
  .information {
    padding:16px 16px 50px;
  }

  .information h4 {
    margin:4vw auto 1vw;
    padding:0;
  }
  .information .bluettl,
  .information .redttl,
  .information .blackttl {
    font-size: 1rem;
  }
  .information p.read {
    text-align: center;
    font-size: 1rem;
  }
  .information a {
    display: block;
    margin:3rem auto;
    width: 80%;
  }
  .information a img {
    width: 100%;
  }

}


/* タブ */

.tab-section{
      --header-h: 0px;
      --adminbar-h: 0px;
      --sticky-top: calc(var(--header-h) + var(--adminbar-h));

      /* タブごとの色 */
      --c1:#2e7d32; --c2:#1565c0; --c3:#c62828;

      --radius:14px;
      --bar-bg: color-mix(in srgb, canvas 92%, #000 8%);
      --bar-border: color-mix(in srgb, #000 14%, transparent);
      --chip-fg: color-mix(in srgb, #000 80%, #fff 20%);
      --panel-bg: color-mix(in srgb, canvas 96%, #000 4%);
      --shadow: 0 2px 14px rgba(0,0,0,.08);
      overflow: visible;
    }
    .tab-section *{ box-sizing:border-box; }
    .tab-section h3{ margin:0; font-size:1rem; }

    .tabs{ max-width:1040px; margin:0 auto; padding:24px 16px 40px; overflow:visible; }

    /* ラジオ隠し */
    .tabs input[type="radio"]{
      position:absolute; inline-size:1px; block-size:1px;
      margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
    }

    /* Sticky ラッパ（壊れにくい構成） */
    .sticky-wrap{ position:-webkit-sticky; position:sticky; top:60px; z-index:50; }

    .tab-bar{
      display:grid;
      grid-template-columns: repeat(3, 1fr); /* 常に3等分 */
      gap:0px; padding:20px 0 0 0px;
      background:#fff;
      border:1px solid var(--bar-border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:visible; /* 横スクロール無効 */
    }

    /* タブ共通（色はクラスで上書き） */
    .tab{
      /* --tab-color:#888; */
      display:inline-flex; align-items:center; justify-content:center;
      min-inline-size:auto;                  /* ← 横幅固定を解除 */
      padding: clamp(8px, 2.6vw, 12px) clamp(8px, 3.2vw, 14px);
      font-size: clamp(13px, 3.6vw, 16px);   /* 画面幅に合わせて縮小 */
      border-radius: calc(var(--radius) - 6px);
      background: color-mix(in srgb, var(--tab-color) 16%, transparent);
      color: #fff;
      font-weight:600; line-height:1; cursor:pointer; user-select:none;
      border:1px solid color-mix(in srgb, var(--tab-color) 40%, transparent);
      transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
      outline:none;
      white-space: nowrap;                   /* 1行キープ（幅足りない時はclampで縮小） */
      overflow:hidden; text-overflow:ellipsis;
      font-size:1.35rem;
    }
    .tab:where(:hover,:focus-visible){
      transform: 0;
      border-color: color-mix(in srgb, var(--tab-color) 70%, transparent);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--tab-color) 18%, transparent);
    }

    /* 個別色 */
    .tab--1{ background-color: #82C039; }
    .tab--2{ background-color: #005CA7; }
    .tab--3{ background-color: #000000; }

    /* アクティブタブの見た目 */
    #tab1:checked ~ .sticky-wrap .tab--1{
    }
    #tab1:checked ~ .sticky-wrap .tab--2{
    }
    #tab1:checked ~ .sticky-wrap .tab--3{
    }

    /* ===== パネル（ボーダーは選択タブ色に追従） ===== */
    .panels{
      --active-color: color-mix(in srgb, #000 12%, transparent);
      margin-top:0;
      border-radius: var(--radius);
      background: var(--panel-bg);
      border:2px solid var(--active-color);
      overflow: visible; /* stickyを阻害しない */
    }
    #panel1 {border: 2px solid #82c039;}
    #panel2 {border: 2px solid #005CA7;}
    #panel3 {border: 2px solid #000000; background:#000;}

    .panel{ display:none; padding:20px 18px; animation: fadeIn .18s ease; }
    @keyframes fadeIn{ from{opacity:0; translate:0 0px} to{opacity:1; translate:0 0} }

    #tab1:checked ~ .panels{ --active-color: var(--c1); }
    #tab2:checked ~ .panels{ --active-color: var(--c2); }
    #tab3:checked ~ .panels{ --active-color: var(--c3); }

    #tab1:checked ~ .panels .panel[data-tab="1"]{ display:block; }
    #tab2:checked ~ .panels .panel[data-tab="2"]{ display:block; }
    #tab3:checked ~ .panels .panel[data-tab="3"]{ display:block; }

    /* === レスポンシブ ===
       スマホ時も横スクロール無し：3等分・自動縮小で収める */
    @media (max-width: 640px){
      .tab-bar{ gap:0px; }                 /* 余白を微調整 */
      .tab{ font-size: clamp(12px, 3.8vw, 15px);
            padding: clamp(7px, 2.8vw, 10px) clamp(6px, 3vw, 12px); }
    }

.panels p.center {
  text-align: center;
}
.pricebox {
  border:1px solid #000;
  padding:30px 50px;
  width:50%;
  margin: 40px auto;
}
#panel3 .pricebox {
  border:0;
  padding:30px 50px;
  width:50%;
  margin: 40px auto;
  background: linear-gradient(45deg, #fcee21 0%,#fef0a7 35%,#fef0a7 73%,#fcee21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.pricebox img {
  display: block;
  margin:auto;
  width: 50%;
}
@media (max-width: 640px){
  .pricebox {
    border:1px solid #000;
    padding:30px 50px;
    width:calc(100% - 100px);
    margin: 20px auto;
  }
  #panel3 .pricebox {
    border:0;
    padding:30px 50px;
    width:calc(100% - 100px);
    margin: 20px auto;
    background: linear-gradient(45deg, #fcee21 0%,#fef0a7 35%,#fef0a7 73%,#fcee21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }
  .pricebox img {
    display: block;
    margin:auto;
    width: 80%;
  }
}
.tokuten_box {
  padding:0px 0px;
  width:70%;
  margin: 20px auto;
}
@media (max-width:640px){
  .tokuten_box {
    padding:0px 0px;
    width:100%;
    margin: 20px auto;
  }
}
.tokuten_box p {
  text-align: justify;
  margin:10px 0;
  font-size: 1.125rem;
  padding: 0;
}
#panel3 p {
  color: #fff;
}
.tokuten_box p.strongred {
  font-size: 1.6rem;
  font-weight: bold;
  color:red;
}
#panel3 p.stronggold {
  font-size: 1.6rem;
  font-weight: bold;
  color:#FCEE21;
}
@media (max-width:640px){
  .tokuten_box p {
  font-size: 1rem;
  }
  .tokuten_box p.strongred {
    font-size: 1.45rem;
    font-weight: bold;
    color:red;
  }
  #panel3 p.stronggold {
    font-size: 1.45rem;
    font-weight: bold;
    color:#FCEE21;
  }
}

#panel3 h5 {
  color:#ccc;
}
.tokuten_box p span {
  color:#333;
  font-size: 1rem;
}
#panel3 .tokuten_box p span {
  color:#ccc;
  font-size: 1rem;
}
.tokuten_box h4 {
  width:400px;
  padding:20px 0 10px;
  text-align: left;
  margin:0;
}
@media (max-width:640px){
  .tokuten_box h4 {
    width:100%;
    padding:20px 0 10px;
  }
}
.tokuten_box img {
  display: block;
  width: 100%;
}
.tokuten_box img.sm {
  display: block;
  width: 80%;
  margin:auto;
}
@media (max-width:640px){
  .tokuten_box img.sm {
    display: block;
    width: 100%;
    margin:auto;
  }
}
.tokuten_box h4 img {
  display: block;
  width: 100%;
}

.kyotu_1,
.kyotu_2 {
  width:1040px;
  margin:10px auto;
  background-color: #E2DFEF;
  padding:50px 0;
}.kyotu_2 {
  background-color: #DEF1FB;
}

@media (max-width:640px){
  .kyotu_1,
  .kyotu_2 {
    width:calc(100% - 32px - 40px);
    margin:10px auto;
    padding:0 20px 20px 20px;
  }
}

.tokuten_tablewrap {
  width:850px;
  margin:auto;
}
@media (max-width: 640px){
  .tokuten_tablewrap {
    width:100%;
    margin:auto;
    overflow-x: scroll;
  }
}
.tokuten_tablewrap table {
  border: 0;
  width: 100%;
  font-size:1.35rem;
  line-height: 1.2;
}
@media (max-width: 640px){
  .tokuten_tablewrap table {
    font-size:1.25rem;
  }
}
.tokuten_tablewrap table td {
  text-align: center;
  padding: 0.5rem;
}
.tokuten_tablewrap table td:first-child {
  background-color: #333;
  color: #fff;
  font-size: 1.125rem;
}
@media (max-width: 640px){
  .tokuten_tablewrap table td:first-child {
    font-size: 1rem;
  }
}
.tokuten_tablewrap table td:nth-child(2) {
  background-color: #bde391;
}
.tokuten_tablewrap table td:nth-child(3) {
  background-color: #88b8df;
}
.tokuten_tablewrap table td:nth-child(4) {
  background-color: #fef9b2;
}
.tokuten_tablewrap table thead th {
  background-color: #333;
  color: #fff;
  font-size: 1rem;
  padding:0.5rem;
}
.tokuten_tablewrap table thead th:nth-child(1) {
  width:46%;
}
.tokuten_tablewrap table thead th:nth-child(2),
.tokuten_tablewrap table thead th:nth-child(3),
.tokuten_tablewrap table thead th:nth-child(4) {
  width:18%;
}
.tokuten_tablewrap table thead th:nth-child(2) {
  background-color: #82C039;
}
.tokuten_tablewrap table thead th:nth-child(3) {
  background-color: #005CA7;
}
.tokuten_tablewrap table thead th:nth-child(4) {
  background-color: #000;
  color: #FCEE21;
}
@media (max-width: 640px){
  .tokuten_tablewrap table th,
  .tokuten_tablewrap table td {
    white-space: nowrap;
  }
}



@media (max-width: 640px){
  .information h5 {
    text-align: left!important;
  }
}

.attn img.sm {
  width: 40%;
  display: block;
  margin:10px auto;
  padding:0 0;
}

@media (max-width: 640px){
  .attn img.sm {
    width: 80%;
    display: block;
    margin:10px auto;
    padding:0 0;
  }
}


/* スライダー */

.section-featured{ max-width:1040px; margin:16px auto; padding:0 16px; }
@media (min-width:640px){ .section-featured{ padding:0 20px; } }
.h2-image img{ display:block; width:100%; height:auto; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.card{ display:block; text-decoration:none; color:inherit; border-radius:12px; overflow:hidden; background:#111; border:1px solid rgba(255,255,255,.12); }
.title{ margin:10px 10px 12px; font-size:15px; line-height:1.35; color:#fff; }

.section-promo{
max-width:1040px; margin:16px auto; padding:0 16px;
}
@media (min-width:640px){ .section-promo{ padding:0 20px; } }
.visually-hidden{
position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); border:0;
}

.event_inner {
  width: 1040px;
  padding:0 0 70px 0;
}
ul.event_slider {
  margin:0;
  padding:0;
}
.event_slider li {
  padding:20px;
  background: #F2F2F2;
  margin: 0 8px;
  border-radius: 14px;
}
.event_slider li a {
  text-decoration: none;
  color: #000;
}
.thumb{ margin:0; aspect-ratio:1/1; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
p.title {
  font-weight: bold;
  padding:0;
  margin:0;
  font-size: 1rem;
}
p.date {
  font-weight: bold;
  padding:0;
  margin:8px 0 5px;
  font-size: 0.8rem;
}

@media (max-width: 640px){
  .event_inner {
    width: 100%;
    padding:0 0 50px 0;
  }
  .event_slider li {
    padding:12px;
    background: #F2F2F2;
    margin: 0 5px;
    border-radius: 14px;
  }
  p.title {
    font-weight: bold;
    padding:0;
    margin:0;
    font-size: 1rem;
  }
  p.date {
    font-weight: bold;
    padding:0;
    margin:8px 0 5px;
    font-size: 0.8rem;
  }
}