@charset "utf-8";

#hydroimpact01 {
    padding-top: 100px
}

.hydroimpact01Box {
    border: 1px solid #fe929f;
    position: relative;
    overflow: visible;
    padding: 0 60px 60px
}

#hydroimpact01 h2 {
    text-align: center;
    margin-top: -27px;
    margin-bottom: 50px
}

[data-element-id] #hydroimpact01 .sp h2{
  margin-top: 0;
}

#hydroimpact01 h2 .bg_pink {
    display: inline-block;
    height: 54px;
    line-height: 54px;
    font-size: 28px;
    letter-spacing: .1em;
    padding: 0 30px;
    border-radius: 10px
}

[data-element-id] #hydroimpact01 .sp h2 .bg_pink{
  height: auto;
  text-align: center;
  font-size: 24px;
}

#hydroimpact01 h2:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #fd919d transparent transparent;
    bottom: -6px;
    left: calc(50% - 6px);
    position: absolute
}

#hydroimpact01 ul li {
    width: 50%;
    margin-top: 20px;
    font-size: 22px;
    background: url('/import/tenant_1/www.beppu-hanakago.jp/wp/wp-content/themes/hanakago2021/lib/images/hydroimpact/hydroimpact01_li.png') no-repeat left 0.25em;
    padding-left: 38px;
    line-height: 1.3;
}

.hydroimpact01Box+.p {
    text-align: center;
    font-size: 28px;
    letter-spacing: .1em;
    margin: 30px 0 80px
}

#hydroimpact02 ul.myofascial{
  row-gap: 40px;
}

#hydroimpact02 ul li {
    width: 478px
}

#hydroimpact02 ul.myofascial li{
  width: 31%;
}

#hydroimpact02 ul li h3 {
    margin: 30px 0
}

#hydroimpact02 ul.myofascial li h3{
  margin: 30px 0 10px;
}

#hydroimpact02 ul li h3>span {
    display: block;
    text-align: center
}

#hydroimpact02 ul li h3>span:nth-of-type(1) {
    font-size: 66px;
    background: url('/import/tenant_1/www.beppu-hanakago.jp/wp/wp-content/themes/hanakago2021/lib/images/hydroimpact/hydroimpact02_h3.png') no-repeat center center;
    min-height: 37px
}

#hydroimpact02 ul li h3 >span:nth-of-type(2) {
    font-size: 28px;
    letter-spacing: .1em;
    margin-top: 15px;
    line-height: 1.3;
}

[data-element-id] #hydroimpact02 ul.myofascial li .sp h3>span:nth-of-type(1){
  font-size: 46px;
}

[data-element-id] #hydroimpact02 ul.myofascial li .sp h3 >span:nth-of-type(2){
  font-size: 18px;
        letter-spacing: 0;
}

.hydroimpact02_image.myofascial{
  width: 60%;
  margin: 0 auto;
}

@media(max-width:1024px){
  #hydroimpact02 ul li h3 >span:nth-of-type(2){
    font-size: 20px;
    line-height: 1.5;
  }
}

@media(max-width:599px){
  #hydroimpact02 ul.myofascial{
    row-gap: 20px;
  }
  
  #hydroimpact02 ul.myofascial li{
    width: 48%;
  }
  
  #hydroimpact02 ul.myofascial li h3 >span:nth-of-type(2) {
      font-size: 18px;
              letter-spacing: 0;
  }
  
  #hydroimpact02 ul.myofascial li h3>span:nth-of-type(1){
    font-size: 46px;
  }
  
  .hydroimpact02_image.myofascial{
    width: 80%;
  }
}

#hydroimpact03 ul li+li {
    margin-top: 50px
}

.hydroimpact03_image {
    width: 520px
}

.hydroimpact03_text {
    width: 478px
}

.hydroimpact03_text h4 {
    line-height: 2.2
}

#hydroimpact04 ul li+li {
    margin-top: 50px
}

#hydroimpact04 ul li .imgbox{
  position: relative;
}

#hydroimpact04 ul li .imgbox .img-tit {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 32px;
    font-family: 'Sacramento', cursive;
    color: #fe96a3;
    z-index: 2;
}

.hydroimpact04_text h3 {
    margin-bottom: 0
}

.hydroimpact04_text .p {
    margin-bottom: 10px
}

.hydroimpact04_image div {
    position: relative;
    overflow: visible
}

.hydroimpact04_image div.imgbox:nth-of-type(1):after {
    content: "";
    background: url(/import/tenant_1/www.beppu-hanakago.jp/wp/wp-content/themes/hanakago2021/lib/images/common/arrow01_right_pink.png);
    background-size: 100%;
    width: 14px;
    height: 23px;
    position: absolute;
    display: block;
    top: calc(50% - 11px);
    right: -30px;
    z-index: 2;
}

.hydroimpact04_image div.imgbox.icon-none:nth-of-type(1):after{
  content: none;
}

#hydroimpact05 .box01 {
    padding-left: 260px;
    padding-right: 260px
}

#hydroimpact05 .box01:after {
    content: "";
    display: block;
    position: absolute;
    background: url('/import/tenant_1/www.beppu-hanakago.jp/wp/wp-content/themes/hanakago2021/lib/images/common/box01_before.png');
    width: 242px;
    height: 203px;
    bottom: -30px;
    left: 0;
    transform: scale(-1, -1)
}

#hydroimpact05 dl.type02{
    background: #f9f2e7;
    padding: 30px;
}

#hydroimpact05 dl dt {
    font-size: 20px;
    padding-right: 18px;
    background-color: #f9f2e7
}

#hydroimpact05 dl.type02 dt {
    background-color: #fe929f;
    padding: 10px 30px;
    border-radius: 30px;
    width: fit-content;
    margin: -50px auto 20px;
}

#hydroimpact05 dl dd {
    padding-left: 18px;
    background-color: #f9f2e7
}

#hydroimpact05 dl dd em span {
    font-size: 25px
}

#hydroimpact05 dl>div.up-ta-r {
    position: relative;
    margin-bottom: 20px
}

#hydroimpact05 dl>div.flexSpace:before {
    content: "";
    display: block;
    border-top: 1px solid #666;
    position: absolute;
    top: calc(50% - 1px);
    width: 100%
}

#hydroimpact05 dl+ .p {
    text-align: right
}

.hydroimpact06Box h3 {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 25px;
    margin-bottom: 40px
}

.hydroimpact06Box h4 {
    margin-bottom: 10px
}

.hydroimpact06Box h4 span {
    padding: 5px;
    display: inline-block
}

.hydroimpact06Box ul {
    margin-top: 10px
}

.hydroimpact06Box ul li {
    width: 320px;
    margin-right: 40px
}

.hydroimpact06Box ul li:nth-of-type(3n),
.hydroimpact06Box ul li:last-of-type {
    margin-right: 0
}

.hydroimpact06Box ul li:nth-of-type(n+4) {
    margin-top: 40px
}

.hydroimpact06Box+.hydroimpact06Box {
    margin-top: 80px
}

@media (max-width:768px) {
    #hydroimpact01 h2 .bg_pink {
        height: auto;
        line-height: 1.4;
        font-size: 24px;
        text-align: center;
        padding: 10px 30px
    }

    #hydroimpact01 h2 span br {
        display: inline
    }

    #hydroimpact01 h2 {
        margin-bottom: 20px;
        margin-top: -55px
    }

    #hydroimpact01 ul li {
        width: 100%
    }

    .hydroimpact01Box {
        padding: 0 5vw 5vw
    }

    .hydroimpact01Box+.p {
        font-size: 20px;
        margin-bottom: 30px
    }

    #hydroimpact02 ul li,
    .hydroimpact03_image,
    .hydroimpact03_text,
    .hydroimpact06Box ul li {
        width: 100%;
        margin-right: 0;
        margin-left: 0
    }

    .hydroimpact03_text h3 {
        margin-top: 20px;
        font-size: 24px
    }

    .hydroimpact04_image div.imgbox:nth-of-type(1) {
        margin-bottom: 50px
    }

    .hydroimpact04_image div.imgbox:nth-of-type(1):after {
        background: url('/import/tenant_1/www.beppu-hanakago.jp/wp/wp-content/themes/hanakago2021/lib/images/common/arrow01_down_pink.png');
        background-size: 100%;
        width: 23px;
        height: 15px;
        position: absolute;
        display: block;
        top: auto;
        bottom: -30px;
        right: 50%;
        margin-right: -11px
    }

    #hydroimpact05 .box01 {
        padding: 10vw 5vw
    }

    #hydroimpact05 .box01:after {
        display: none
    }
    
    #hydroimpact05 dl.type02{
        padding: 20px;
        margin-top: 40px;
    }
    
    #hydroimpact05 dl.type02 dt{
      padding: 10px 20px;
      margin: -35px auto 10px;
    }
    
    .hydroimpact06Box ul li+li {
        margin-top: 20px !important
    }

    #hydroimpact05 dl dt {
        font-size: 18px;
        padding-right: 10px
    }

    #hydroimpact05 dl dd {
        padding-left: 10px
    }

    #hydroimpact05 dl dd em span {
        font-size: 22px
    }
    
    #hydroimpact05 dl>div.up-ta-r{
      letter-spacing: -1px;
      font-size: 90%;
      margin-top: 5px;
    }
}

#myofascial-flow .sp{
    width: 100%;
    max-width: none;
}

#myofascial-flow .flowlist .item + li{
  margin-top: 50px;
}

#myofascial-flow .imgbox {
    width: 30%;
    position: relative;
}

#myofascial-flow .imgbox::before {
    content: "\f0dd";
    font-family: "font awesome 5 free";
    font-weight: bold;
    font-size: 30px;
    color: #fe929f;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}

#myofascial-flow .item:last-of-type .imgbox::before{
  content: none;
}

#myofascial-flow .txtbox {
    width: 65%;
}

#myofascial-flow .pink {
    font-size: 28px;
    letter-spacing: .1em;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

[data-element-id] #myofascial-flow .sp .pink{
  font-size: 22px;
}

[data-element-id] #myofascial-flow .sp .pink{
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
}

#myofascial-flow .pink span{
    line-height: 1.5;
}

#myofascial-flow .pink .num {
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    flex-shrink: 0;
}

#myofascial-flow .sub-item {
   background: #fff4f5;
    padding: 20px;
}

#myofascial-flow .sub-item + .sub-item{
  margin-top: 30px;
}

#myofascial-flow .sub-item .imgbox::before{
  content: none;
}

#myofascial-flow .sub-item .pink span{
  font-size: 80%;
}

#myofascial-flow .sub-item .pink .num {
    content: "";
    background: url(/import/tenant_1/www.beppu-hanakago.jp/wp/wp-content/themes/hanakago2021/lib/images/common/title07.png) no-repeat left 0;
    background-size: contain;
    aspect-ratio: 41 / 38;
    width: 35px;
    display: inline-block;
    line-height: 1;
    transform: translateY(15px);
}

#myofascial-flow .sub-item .p{
  font-size: 15px;
}

@media(max-width:1024px){
  #myofascial-flow .pink{
    font-size: 22px; 
  }
}

@media(max-width:599px){
  #myofascial-flow .item{
    position: relative;
  }
  
  #myofascial-flow .item::before{
    content: "\f0dd";
    font-family: "font awesome 5 free";
    font-weight: bold;
    font-size: 30px;
    color: #fe929f;
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  #myofascial-flow .item:last-of-type::before{
    content: none;
  }
  
  #myofascial-flow .imgbox {
    width: 70%;
    margin: 30px auto 0;
  }
  
  #myofascial-flow .imgbox::before{
    content: none;
  }
  
  #myofascial-flow .txtbox {
    width: 100%;
  }
  
  #myofascial-flow .sub-item .p{
    font-size: 14px !important;
  }
}

/* 2025/09/03 */
@media (max-width: 768px) {
  #hydroimpact05.ver02 dl dt {
    width: 100%;
    padding-right: 0;
  }
  
  #hydroimpact05.ver02 dl dd {
    width: 100%;
    padding-left: 0;
    text-align: right;
  }  
}