:root{
  --space-16: clamp(8px, 2.133vw, 16px);
  --space-20: clamp(10px, 2.667vw, 20px);
  --space-30: clamp(15px, 4vw, 30px);
  --space-40: clamp(20px, 5.333vw, 40px);
  --space-50: clamp(25px, 6.667vw, 50px);
  --space-60: clamp(30px, 8vw, 60px);
  --space-70: clamp(40px, 10.000px + 8vw, 70px);
  --space-100: clamp(50px, 13.333vw, 100px);
}

#honekatuwanko main{
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 500;
  background-color: #fdebc7;
  padding-bottom: 0 !important;
}

#honekatuwanko .wanko-inner {
  max-width: 750px;
  margin-inline:auto;
}

#honekatuwanko .wanko-txt {
  font-size:clamp(14px, -0.000px + 3.733vw, 28px);
  color: #231815;
  line-height: 1.2;
}

#honekatuwanko main .intro-block {
  padding-top: var(--space-70);
  background: url(../img/honekatuwanko/bg-img-01.png) center -30px repeat-x;
  margin-bottom: var(--space-40);
}
  #honekatuwanko .intro-block .wanko-title {
    margin: 0 auto 20px;
    text-align: center;
    line-height: 1.5;
    font-size: clamp(16px, 9.000px + 1.867vw, 23px);
    font-weight:400;
  }
  #honekatuwanko .intro-block .wanko-title span {
    background-color: #f7931e;
    color: #fff;
    text-align: center;
    border-radius: 30vw;
    padding:8px clamp(15px, 5.000px + 2.667vw, 25px);
    border: 4px solid #fff;
  }
  #honekatuwanko .intro-block .wanko-name {
    max-width: 625px;
    width: 96%;
    margin-inline: auto;
  }
  #honekatuwanko .intro-block .wanko-read {
    text-align: center;
    font-size:clamp(18px, 9.000px + 2.4vw, 27px);
    color: #9f5623;
    font-weight: 600;
    letter-spacing: 0.05rem;
    margin-top: var(--space-20);
  }

  #honekatuwanko .wanko-profile-01 {
    position: relative;
    padding: clamp(40px, -20.000px + 16vw, 100px) 0 var(--space-20);
  }
    #honekatuwanko .wanko-profile-01 .wanko-img{
      max-width: 260px;
      width: 34.66%;
      margin-inline:auto;
      position: relative;
    }
    #honekatuwanko .wanko-profile-01 .wanko-phrase {
      max-width: 160px;
      width: 61.56%;
      position: absolute;
      left: 0;
      top: 50%;
      translate: -105% -50%;
    }
    #honekatuwanko .wanko-profile-01 .wanko-hone {
      position: absolute;
      right: 0;
      bottom: 0;
      text-align: center;
    }
    #honekatuwanko .wanko-profile-01 .wanko-hone h3 {
      width: clamp(90px, -16.000px + 28.267vw, 196px);
      margin: 0 auto clamp(4px, 0.000px + 1.067vw, 8px);
    }
    
    #honekatuwanko .wanko-bubble {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    #honekatuwanko .wanko-profile-01  .wanko-bubble {
        position: absolute;
    }
    #honekatuwanko .wanko-b-name {
      left: 0;
      top:0;
      background:url(../../assets_rwd/img/honekatuwanko/bubble-name.png) center center / cover no-repeat;
      aspect-ratio: 263/120;
      width:clamp(131px, -1.000px + 35.2vw, 263px);
      margin: calc(var(--space-20) * -1) 0 0 var(--space-20);
    }
    #honekatuwanko .wanko-b-home {
      right: 0;
      top:0;
      background:url(../../assets_rwd/img/honekatuwanko/bubble-home.png) center center / cover no-repeat;
      aspect-ratio: 260/119;
      width:clamp(130px, -1.000px + 34.933vw, 260px);
      margin: var(--space-30) var(--space-30) 0 0;
    }

  #honekatuwanko .wanko-profile-02 {
    position: relative;
    padding: 10px 0 0;
  }  
    #honekatuwanko .wanko-b-character {
      background: url(../../assets_rwd/img/honekatuwanko/bubble-character.png) center center / cover no-repeat;
      aspect-ratio: 480/168;
      width:clamp(240px, 0.000px + 64vw, 480px);
      margin-left: clamp(15px, 0.000px + 4vw, 30px);
    }
    #honekatuwanko .wanko-b-like {
      background: url(../../assets_rwd/img/honekatuwanko/bubble-like.png) center center / cover no-repeat;
      aspect-ratio: 350/118;
      width:clamp(176px, 1.000px + 46.667vw, 350px);
      margin: 0 0 0 var(--space-100);
    }
    #honekatuwanko .wanko-profile-02 .wanko-img-02 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: clamp(104px, 1.000px + 27.467vw, 207px);
      margin-right:var(--space-20);
    }

  #honekatuwanko .wanko-profile-03 {
    position: relative;
  }  
    #honekatuwanko .wanko-flex-end {
      display: flex;
      justify-content: flex-end;
      margin-bottom: clamp(35px, 0.000px + 9.333vw, 70px);
    }
    #honekatuwanko .wanko-b-skill {
      background: url(../../assets_rwd/img/honekatuwanko/bubble-skill.png) center center / cover no-repeat;
      aspect-ratio: 478/170;
      width:clamp(239px, 0.000px + 63.733vw, 478px);
      margin-right: var(--space-20);
    }
    #honekatuwanko .wanko-b-word {
      background: url(../../assets_rwd/img/honekatuwanko/bubble-word.png) center center / cover no-repeat;
      aspect-ratio: 365/208;
      width:clamp(183px, 1.000px + 48.533vw, 365px);
      margin-left: var(--space-30);
    }
    #honekatuwanko .wanko-img-03 {
      position: absolute;
      left: 0;
      top: 0;
      width: clamp(73px, 1.000px + 19.2vw, 145px);
      margin: clamp(13px, 0.000px + 3.467vw, 26px) 0 0 var(--space-40);
    }
    #honekatuwanko .wanko-img-04 {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: clamp(104px, 0.000px + 27.733vw, 208px);
      margin: 0 0 var(--space-40) var(--space-60);
    }
  #honekatuwanko .wanko-difference {
    background:url(../../assets_rwd/img/honekatuwanko/bg-img-01.png) left -20px repeat;
    padding: var(--space-50) 0 ;
  }
    #honekatuwanko .wanko-dif-wrap {
      max-width: 700px;
      width: 94%;
      margin-inline:auto;
      background-color: #f7f4ef;
      border-radius: var(--space-20);
      padding:var(--space-20) clamp(8px, 0.000px + 2.133vw, 16px) var(--space-30);
    }
    #honekatuwanko .wanko-difference h2 {
      max-width: 668px;
      margin: 0 auto 0;
    }
    #honekatuwanko .wanko-dif-read {
      text-align: center;
      font-size:clamp(16px, 5.000px + 2.933vw, 27px);
      color: #9f5623;
      line-height: 1.4;
      margin: var(--space-20) 0 var(--space-40);
      font-weight: 600;
    }
    #honekatuwanko .wanko-dif-img {
      max-width: 667px;
      margin-inline: auto;
    }
    #honekatuwanko .wanko-difference .wanko-dif-btn {
      width: clamp(210px, -0.000px + 56vw, 420px);
      margin: var(--space-30) auto 0;
      cursor: pointer;
    }

    /* popup */
    #honekatuwanko .wanko-popup{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,0.8);
      z-index:150;
      display: none;
    }
      #honekatuwanko .wanko-dif-answer {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        overflow: auto;
        overscroll-behavior: contain;
        padding: var(--space-30) 0;
      }
      #honekatuwanko .wanko-dif-answer .wanko-inner {
        width: 96%;
        margin: auto;
      }
      #honekatuwanko .wanko-dif-answer .wanko-dif-wrap {
        margin-bottom: var(--space-30);
      }

      #honekatuwanko .wanko-dif-answer .wanko-dif-read {
        margin-bottom: var(--space-30);
      }
      #honekatuwanko .wanko-dif-answer .wanko-dif-btn {
        width: clamp(158px, -1.000px + 42.4vw, 317px);
        margin: 0 auto var(--space-30);
      }
      /* ポップアップ表示中は背面のスクロールを止める */
      body#honekatuwanko.is-wanko-popup-open {
        overflow: hidden;
      }


  
  #honekatuwanko .wanko-bus {
    background-color: #ffdd37;
    padding-bottom: var(--space-60);
  }
  #honekatuwanko .wanko-inner-bus {
    max-width: 648px;
    width: 86.4%;
    margin-inline:auto;
    padding: var(--space-60) 0 var(--space-40);
  }
  #honekatuwanko .wanko-bus-title {
    max-width: 610px;
    width: 94.2%;
    margin: 0 auto var(--space-30);
    display: grid;
    grid-template-columns: 28.2% 1fr;
    grid-template-rows:max-content 1fr;
    grid-column-gap: var(--space-16);
    grid-row-gap: var(--space-16);
    position: relative;
  }
   #honekatuwanko .wanko-bus-title::before {
      content:"";
      background: url(../../assets_rwd/img/honekatuwanko/bg-bus-title.png) center center / cover no-repeat;
      aspect-ratio: 504/235;
      width: clamp(252px, -0.000px + 67.2vw, 504px);
      position: absolute;
      right:0;
      bottom: 0;
    }
  #honekatuwanko .wanko-bus-title .wanko-bus-title__img{ grid-area: 1 / 1 / 3 / 2; }
  #honekatuwanko .wanko-bus-title .wanko-bus-title__heading { grid-area: 1 / 2 / 2 / 3; text-align: center;}
  #honekatuwanko .wanko-bus-title .wanko-bus-title__sub  { grid-area: 2 / 2 / 3 / 3;}

  #honekatuwanko .wanko-bus-title__img img {
    max-width: 172px;
    position: relative;
  }
  #honekatuwanko .wanko-bus-title__heading img {
    max-width: 404px;
    width: 96%;
    position: relative;
  }
  #honekatuwanko .wanko-bus-title_sub p {
    background-color: #004d8e;
    color: #fff;
    width: 86%;
    margin: 0 auto;
    font-size: clamp(17px, 0.000px + 4.533vw, 34px);
    text-align: center;
    border-radius: 30vw;
    border: 4px solid #fff;
    font-weight: 600;
    position: relative; 
  }
  #honekatuwanko .wanko-inner-bus h3 {
    margin: var(--space-16) auto 0;
  }
  #honekatuwanko .wanko-bus-flex {
    display: flex;
    gap:var(--space-30);
    margin: var(--space-40) auto 0;
  }
  #honekatuwanko .wanko-bus-flex .wanko-bus-img-02 {
    width:58.7% ;
    max-width: 380px;
  }
  #honekatuwanko .wanko-bus-txt {
    flex:1;
  }
  #honekatuwanko .wanko-bus-txt p {
    font-size: clamp(16px, 0.000px + 4.267vw, 32px);
    color: #9f5623;
    line-height: 1.3;
    margin-bottom: var(--space-16);
  }
  #honekatuwanko .wanko-bus-txt img {
    max-width: 211px;
    width: 89%;
  }

  #honekatuwanko .wanko-bus-map {
    background-color: #f7f4ef;
    border: clamp(4px, 1.067vw, 8px) solid #fff48c;
    border-radius: clamp(18px, 4.8vw, 36px);
    margin: var(--space-40) auto;
    text-align: center;
    padding-top: clamp(4px, 1.067vw, 8px);
  }  
    #honekatuwanko .wanko-bus-map h3 {
      font-size:var(--space-40);
      color: #9f5623;
      line-height: 1.3;
      font-weight: 600  ;
    }
  #honekatuwanko .wanko-bus-grid {
    display: grid;
    grid-template-columns: 38.2% 1fr;
    grid-template-rows: max-content 1fr;
    grid-column-gap: clamp(7.5px, 0.000px + 2vw, 15px);
    grid-row-gap: var(--space-30);
  }

  #honekatuwanko .wanko-bus-grid--01 {grid-area: 1 / 1 / 2 / 2;}
  #honekatuwanko .wanko-bus-grid--02 {grid-area: 1 / 2 / 2 / 3;}
  #honekatuwanko .wanko-bus-grid--03 {grid-area: 2 / 1 / 3 / 3;}

  #honekatuwanko .wanko-bus-grid--01 img {max-width: 247px;}
  #honekatuwanko .wanko-bus-grid--02 img {max-width: 385px;}

  #honekatuwanko .wanko-back {
    width: clamp(51px, 13.6vw, 102px);
    margin: 0 auto;
    cursor: pointer;
  }