@charset "UTF-8";

.title_container{
    background: #80c5c2;
    top: -28px;
    left: 0;
    max-width: 600px;
    padding: 5rem 3rem 3rem 5rem;
    position: absolute;
}

@media screen and (max-width:768px){
.title_container{
        margin: auto;
        padding: 3rem;
        width: 90%;
        right: 0;
    }
}

.title_container h2{
    color: #fff;
    font-size: 32px;
    margin-bottom: 2rem;
    line-height: 1.6;
}

@media screen and (max-width: 768px){
.title_container h2{
        text-align: center;
    }
}

@media screen and (max-width: 576px){
.title_container h2{
        font-size: 4.8vw;
        margin-bottom: 1.5rem;
    }
}


.title_container p{
    color: #fff;
    line-height: 1.8;
}

@media screen and (max-width: 576px){
.title_container p{
        font-size: 14px;
    }
}


@media screen and (max-width:768px){
    #text1 + section .inner_item_txt p{
        font-size: 21px;
        line-height: 30px;
    }
}   

.main-container{
    display: flex;
    gap: 35px;
    
}

@media screen and (max-width: 900px){
.main-container{
        display: block;
    }
}

.img-container{
    max-width: 830px;
}

@media screen and (max-width: 900px){
.img-container{
        margin-bottom: 2.5rem;
        max-width: 100%;
        position: static;
        width: 100%;
    }
}

.text-container{
    max-width: 350px;
    
}

@media screen and (max-width: 900px){
.text-container{
        max-width: 900px;
        position: static;
        width: 100%;
    }
}

.text_container,
.subtitle_small{
    letter-spacing: 7px;
    margin-bottom: 0.5rem;
}

.subtitle_small{
    color: #80c5c2;
    font-family: "Hiragino Mincho ProN", "MS PMincho", serif;
    display: block;
    font-size: 24px;
    max-width: 160px;
}

@media screen and (max-width: 900px){
.subtitle_small{
        max-width: 100%;
        text-align: center;
    }
}

.subtitle h2{
    font-size: 25px;
    letter-spacing: 2px;
    line-height: 1.5;
    margin-bottom: 3rem;
}

@media screen and (max-width: 900px){
.subtitle h2{
        text-align: center;
    }
}

@media screen and (max-width: 768px){
        font-size: 21px;
        line-height: 1.3;
        margin-bottom: 2rem;
}

.content dt{
    font-weight: bold;
}

.tab{
    display: none;
}

@media screen and (max-width: 900px){
    .tab_none{
        display: none;
    }
    .tab{
        display: block;
    }
}

.pc_none{
    display: none;
    
}

@media screen and (max-width: 900px){
    .sp_none{
        display: none;
    }
}

@media screen and (max-width:900px){
.pc_none{
    display: block;
    }
}

/*------------------調整------------------*/
#new_part + section .content_wrapper {
    position: relative;
    height: 100%;
}

#new_part + section .title_container {
    width: 100%;
    max-width: 800px;
    padding: 3rem;
    position: static;
    margin: 0 auto!important;
}

#new_part + section .title_container {
    padding: 3rem 0;
}

#new_part + section .title_container h2 {
    padding: 0 3rem;
}

#new_part + section .title_container p {
    padding: 0 3rem;
}

@media screen and (max-width: 768px){
#new_part + section .title_container {
    width: 100%;
    max-width: 100%;
}
}

@media screen and (max-width: 576px) {
.subtitle h2 {
    font-size: 19px;
}

.content dt {
    color: #80c5c2;
    font-size: 19px;
    font-family: Hiragino Mincho ProN, MS PMincho, serif;
}

.subtitle h2 {
    text-align: left;
}
}

/*----根本治療×トレーニング×食事指導のfont-size変更----*/
.h-title{
    letter-spacing: 0.2rem;
    font-size: 2.2rem;
}
.h-title span{
    font-weight: bold;
}
@media screen and (max-width:800px){
    .h-title{
        font-size: 1.8rem;
    }
    .h-title span{
        font-size: 2.1rem;
    }
}

/*----痛み完治への3ステップfont-size変更----*/
#top_step + section p{
    font-size: 4.2rem;
}
#top_step_text + section .text-strong{
    font-weight: bold;
}

#top_step_text + section p{
  font-size: 2.2rem;
}

@media screen and (max-width:800px){
    #top_step + section p{
        font-size: 2.4rem;
    }

    #top_step_text + section p{
       font-size: 1.8rem;
    }
    
    #top_step_text + section .text-strong{
        font-size: 2.1rem;
    }
}

/*-------TOP痛み完治へのステップ---------*/
#top_step01 + .contents_box01 .inner_item_txt .heading,
#top_step02 + .contents_box01 .inner_item_txt .heading,
#top_step03 + .contents_box01 .inner_item_txt .heading{
    display: flex;
    flex-direction: column-reverse;
}

#top_step01 + section .inner_item_txt .heading p, 
#top_step02 + section .inner_item_txt .heading p, 
#top_step03 + section .inner_item_txt .heading p{
  width: fit-content;
}

@media screen and (max-width:900px) and (min-width:801px){
  #top_step01 + .contents_box01 .inner_item_txt, 
  #top_step02 + .contents_box01 .inner_item_txt,
  #top_step03 + .contents_box01 .inner_item_txt{
     margin-left: 0;
}
 #top_step02 + .contents_box01 .inner_item_txt{
   margin-right: 0;
}
}

@media screen and (max-width:900px){
#top_step01 + section .inner_item_txt .heading h3, 
#top_step02 + section .inner_item_txt .heading h3, 
#top_step03 + section .inner_item_txt .heading h3{
   font-size: 2.3rem !important;
}
}

@media screen and (max-width:350px) {
  #top_step01 + section .inner_item_txt .heading p, #top_step02 + section .inner_item_txt .heading p, #top_step03 + section .inner_item_txt .heading p{
   font-size: 1.6rem;
}
}
/*------ヘッダー背景色---------*/
@media screen and (max-width:900px) {
  header#pattern4 {
    background: rgba(128, 197, 194, 1);
}
}

/*-----------MV下リード文の六角形背景-------------*/
#top_lead + .contents_box01{
  position: relative;
  overflow: visible;
}

#top_lead + .contents_box01::after{
  position: absolute;
  content: "";
  width: 33%;
  top: 63%;
  transform: translateY(-50%);
  right: 5%;
  aspect-ratio: 1/1;
  background: url(/common/upload_data/be-quality-of-lifejp/image/20230825163048.png) no-repeat center / contain;
  opacity: 1;
}

#top_lead + .contents_box01::before{
  position: absolute;
  content: "";
  width: 33%;
  top: 63%;
  transform: translateY(-50%);
  right: 0%;
  aspect-ratio: 1/1;
  background: url(/common/upload_data/be-quality-of-lifejp/image/20230825163051.png) no-repeat center / contain;
  opacity: 1;
}

@media screen and (max-width:900px){
#top_lead + .contents_box01::after {
    width: 100%;
    max-width: 400px;
    top: 60%;
    transform: translateY(-50%);
    right: -20%;
}
#top_lead + .contents_box01::before{
  top: auto;
  bottom: 0;
  left: 50%;
  right: auto;
  transform: translate(-50%,0);
  width: 90%;
  max-width: 500px;
  aspect-ratio: 6/1;
}
}


/*-----------------------------痛み完治への3ステップの調整---------------------------------*/
@media screen and (min-width: 901px) and (max-width: 1280px) {
#top_step01 + section .inner_item_img:before, #top_step02 + section .inner_item_img:before, #top_step03 + section .inner_item_img:before {
    font-size: 7.8vw;
}

#top_step01 + section.contents_box01:before, #top_step02 + section.contents_box01:before, #top_step03 + section.contents_box01:before {
    font-size: 7.0vw;
}

#top_step01 + .contents_box01 .inner_item_txt, #top_step03 + .contents_box01 .inner_item_txt {
    padding: 80px 30px 80px 13vw !important;
}

#top_step02 + .contents_box01 .inner_item_txt {
    padding: 80px 13vw 80px 30px !important;
}
}

#top_case04 + .composite_box01 .inner_item_img img {
    object-position: 50% top;
}