@charset "UTF-8";

/************************ indexページ ここから ************************/

#howto{
    max-width:1020px;
    padding:0 20px;
    margin:0 auto;
}

/* index ページタイトル */
div.howto_main{
    position:relative;
    color: #fff;
    margin: 0 auto;
    padding:80px 0 0 90px;
    max-width: 980px;
    height:340px;
    background:url(../img/howto_main.png) center bottom/cover no-repeat;
    z-index:1;
    box-sizing:border-box;
}
#howto div.howto_main img{
    display:inline-block;
    vertical-align: bottom;
    max-width:480px;
}
#howto div.howto_main img.sp_title{display:none;}

#howto p.message{
    color:#3E3A39;
    font-size:1.8rem;
    line-height:2;
    font-weight:500;
    text-align:center;
    margin:30px auto;

}

/* index 各扉リスト*/
div.area{
    position:relative;
    width:100%;
    max-width:900px;
    padding:0;
    margin:0 auto;
    background:#fff;
    box-shadow:10px 12px 12px rgba(0,0,0,0.1),-2px 0 12px rgba(0,0,0,0.1);
}
div.area + div.area{margin-top:40px;}

div.area div.page_title{
    display:flex;
    justify-content:center;
    align-items:center;
    height:250px;
}
div.area.school div.page_title{background:url(../img/school_mv.jpg) center/cover no-repeat;}
div.area.family div.page_title{background:url(../img/family_mv.jpg) center/cover no-repeat;}
div.area.treatment div.page_title{background:url(../img/treatment_mv.jpg) center/cover no-repeat;}
div.area.life div.page_title{background:url(../img/life_mv.jpg) center/cover no-repeat;}

#howto div.page_title h3{
    position:relative;
    color:#fff;
    font-size:3.2rem;
    line-height:1;
    padding-top:89px;
}
div.area div.page_title h3::before{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    content:"";
    display:inline-block;
    width:74px;
    height:74px;
}
div.area.school div.page_title h3::before{background:url(../img/school_icon.svg) top/contain no-repeat;}
div.area.family div.page_title h3::before{background:url(../img/family_icon.svg) top/contain no-repeat;}
div.area.treatment div.page_title h3::before{background:url(../img/treatment_icon.svg) top/contain no-repeat;}
div.area.life div.page_title h3::before{background:url(../img/life_icon.svg) top/contain no-repeat;}


div.area div.page_list{
    display:flex;
    justify-content:space-between;
    padding:30px 40px;
}
div.area div.page_list ul{width:calc((100% - 60px)/2);}
div.area div.page_list ul li + li{margin-top:15px;}
div.area div.page_list ul li{
    position:relative;
    line-height:1;
    padding-left:16px;
}
#howto div.area div.page_list ul li::before{
    position:absolute;
    top:3px;
    left:0;
    content:"";
    display:inline-block;
    border:6px solid transparent;
    border-left:8px solid #F3901D;
}
#howto div.area div.page_list ul li a{
    display:inline-block;
    font-size:1.4rem;
    line-height:1.4;
    color:#3E3A39;
}
#howto div.area div.page_list ul li a:hover{text-decoration:underline;}

br.br480{display:none;}
br.br767{display:none;}


@media screen and (max-width:991px){

/* index ページタイトル */
div.howto_main{padding:70px 0 0 60px;}    
#howto div.howto_main img.pc_title{max-width:52vw;}

}


@media screen and (max-width:767px){

/********** index ページタイトル **********/
div.howto_main{
    margin: 0 calc(50% - 50vw);
    padding:12vw 10px 0;
    width: 100vw;
    text-align:center;
    height:min(105vw,800px);
    background:url(../img/howto_main_sp.png) center top/cover no-repeat;
}
#howto div.howto_main img.pc_title{display:none;}
#howto div.howto_main img.sp_title{
    display:inline-block;
    max-width:min(62vw,480px);
}

#howto p.message{
    font-weight:600;
    text-align:left;
}

/* index 各扉リスト*/
div.area div.page_list{padding:20px;}    

br.br767{display:inline;}

}


@media screen and (max-width:599px){


/********** index ページタイトル **********/
div.howto_main{padding-top:8vw;}

/* index 各扉リスト*/
div.area div.page_title{height:min(58vw,435px);}
div.area.school div.page_title{background:url(../img/school_mv_sp.jpg) center/cover no-repeat;}
div.area.family div.page_title{background:url(../img/family_mv_sp.jpg) center/cover no-repeat;}
div.area.treatment div.page_title{background:url(../img/treatment_mv_sp.jpg) center/cover no-repeat;}
div.area.life div.page_title{background:url(../img/life_mv_sp.jpg) center/cover no-repeat;}

/* index 各扉リスト*/    
#howto div.area div.page_list{display:block;}
#howto div.area div.page_list ul{width:auto;}
#howto div.area div.page_list ul + ul{margin-top:15px;}


}


@media screen and (max-width:480px){



br.br480{display:inline;}

}

/* index 各扉リストnew*/    
#howto div.area div.page_list ul li a u{
    display:inline-block;
    font-size:1.3rem;    
    color:#E4007F;
}


/************************ indexページ ここまで ************************/





/************************ 子ページ ここから ************************/

/*タイトル*/
div.category_title{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    width: 100%;
    height:215px;
    z-index:1;
    box-sizing:border-box;    
}
div.school div.category_title{background:url(../img/school/school_main.jpg) center bottom/cover no-repeat;}
div.family div.category_title{background:url(../img/family/family_main.jpg) center bottom/cover no-repeat;}
div.treatment div.category_title{background:url(../img/treatment/treatment_main.jpg) center bottom/cover no-repeat;}
div.life div.category_title{background:url(../img/life/life_main.jpg) center bottom/cover no-repeat;}

#howto div.category_title h2{
    color:#fff;
    font-size:4rem;
    font-weight:600;
    line-height:1;
    text-align:center;
}
#howto div.category_title h2 span{
    display:block;
    font-size:2.2rem;
    line-height:1;
    letter-spacing:-1pt;
    padding-bottom:15px;
}

/*プルダウンメニュー*/
div.category_link{
    position:relative;
    z-index:100;
    margin:45px auto;
    z-index:1;
}

div.page-link-prev-next + div.category_link{margin-top:60px;}
#howto div.page-link-prev-next{margin-top:40px;}


div.pagenav_btn{
    position:relative;
    max-width:623px;
    margin:0 auto;
    z-index:0;
    cursor:pointer;
}
div.pagenav_btn::before{
    position:absolute;
    content:"";
    top:50%;
    transform:translateY(-50%);
    left:-37px;
    display:inline-block;
    width:74px;
    height:74px;
    z-index:1;
}

div.school div.pagenav_btn::before{background:url(../img/school/icon.svg) center/contain no-repeat;}
div.family div.pagenav_btn::before{background:url(../img/family/icon.svg) center/contain no-repeat;}
div.treatment div.pagenav_btn::before{background:url(../img/treatment/icon.svg) center/contain no-repeat;}
div.life div.pagenav_btn::before{background:url(../img/life/icon.svg) center/contain no-repeat;}

div.pagenav_btn::after{
    position:absolute;
    content:"";
    top:50%;
    margin-top:-10px;
    right:23px;
    display:inline-block;
    width:12px;
    height:12px;
    border:2px solid transparent;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg);
    transition:0.3s ease;
}
div.pagenav_btn.active::after{
    margin-top:-2px;
    transform:rotate(135deg);
}

div.pagenav_btn span{
    display:block;
    font-size:2rem;
    line-height:1.2;
    font-weight:600;
    color:#F3901D;
    padding:15px 50px;
    border:2px solid #F3901D;
    border-right:60px solid #F3901D;
    background:#fff;
    border-radius:8px;
}

div.pagenav_li{
    position:absolute;
    top:30px;
    left:-37px;
    right:0;
    padding:50px 20px 20px;
    max-width:660px;
    margin:0 auto;
    display:none;
    background:#efefef;
    z-index:-1;
    box-sizing:border-box;
}
div.pagenav_li div.flex{
    display:flex;
    justify-content:space-between;
}
div.pagenav_li ul{width:calc((100% - 40px)/2);}

div.pagenav_li ul li{
    position:relative;
    line-height:1;
    padding-left:16px;
}
div.pagenav_li ul li + li{margin-top:10px;}
div.pagenav_li ul li::before{
    position:absolute;
    top:3px;
    left:0;
    content:"";
    display:inline-block;
    border:6px solid transparent;
    border-left:8px solid #F3901D;
}
div.pagenav_li ul li a{
    display:inline-block;
    font-size:1.4rem;
    line-height:1.4;
    color:#3E3A39;
}
div.pagenav_li ul li a:hover,
div.pagenav_li ul li a.current{color:#f3901d;}

div.pagenav_li ul li a u{
    display:inline-block;
    font-size:1.3rem;    
    color:#E4007F;
}

/*レビューエリア*/
div.review_area{
    position:relative;
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:0;
    background:#fff;
    box-shadow:10px 12px 12px rgba(0,0,0,0.1),-2px 0 12px rgba(0,0,0,0.1);
}
div.review_area + p.min{
    max-width:900px;
    margin:15px auto 0;
    font-size:1.2rem;
    text-indent:-1em;
    padding-left:1em;
}

#howto div.review_area h3{
    color:#fff;
    font-size:2.8rem;
    padding:20px 35px;
    background:#f3901d;
}
div.review_inner{padding:30px 0 40px; margin:0 40px;}

div.review_title{
    position:relative;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    padding-right:40px;
}
div.review_title div + div{margin-left:30px;}

div.review_title div img{max-width:136px;}
#howto div.review_title div p.heading{
    color:#F3901D;
    font-size:2.4rem;
    font-weight:700;
    line-height:1.6;
}
#howto div.review_title span.new {
    background: #E4007F;
    color: #fff;
    font-size: 1.4rem;
    border-radius: 1.4rem;
    padding: 0 1.4rem;
    font-weight: bold;
}
div.review_title div p.data{
    color:#231815;
    font-size:1.4rem;
    letter-spacing:0;
    margin-top:5px;
}
div.review_title div.icon{
    position: absolute;
    right:0;
    top: 50%;
    transform: translatey(-50%);
    width: 30px;
    height: 30px;
    border:1px solid #ccc;
    border-radius:15px;
  }
div.review_title div.icon span {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
div.review_title div.icon span:before,
div.review_title div.icon span:after {
    position: absolute;
    content: "";
    display: block;
    transition: all 0.4s;
    background: #F3901D;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 2px;
    transform: translate(-50%, -50%);
  }
div.review_title div.icon span:before {transform: translate(-50%, -50%) rotate(90deg);}
div.review_title div.icon span.open:before {transform: translate(-50%, -50%) rotate(0deg);}

div.review_txt{
    display:none;
    padding:30px 30px 0;
}
#howto div.review_txt p {
    color:#231815;
    font-size:1.8rem;
    line-height:2;
}
div.review_inner + div.review_inner{border-top:1px solid #ccc;}

div.page-link-prev-next{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

br.br599{display:none;}

/* タブ */
div.links_tab_style{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    width:100%;
    max-width:900px;
    margin:40px auto 0;
}
div.links_tab_style div{
    display:flex;
    justify-content:space-between;
    width:calc(50% - 10px);
}
div.links_tab_style a{
    display:block;
    color:#fff;
    font-size:1.8rem;
    line-height:1;
    font-weight:800;
    width:calc((100% - 20px)/2);
    background:#DCDDDD;
    border-radius:8px 8px 0 0;
    transition:0.3s ease;
}
div.links_tab_style a:hover,
div.links_tab_style a.current{background:#F3901D;}

div.links_tab_style a.current::after{
    position:absolute;
    left:0;
    bottom:-3px;
    content:"";
    display:inline-block;
    width:100%;
    height:3px;
    background:#F3901D;
}

div.links_tab_style a span{
    position:relative;
    display:block;
    padding:18px 10px 18px 50px;
}
div.links_tab_style a span::before{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:15px;
    content:"";
    display:inline-block;
    width:28px;
    height:28px;
}

div.links_tab_style div:first-child a span::before{background:url(../img/tab_school_icon.svg) center/28px no-repeat;}

div.links_tab_style div:first-child a:nth-child(2) span{padding-left:55px;}
div.links_tab_style div:first-child a:nth-child(2) span::before{
    width:33px;
    height:33px;
    background:url(../img/tab_family_icon.svg) top 3px center/33px no-repeat;
}
div.links_tab_style div:last-child a:nth-child(1) span::before{background:url(../img/tab_treatment_icon.svg) center/28px no-repeat;}
div.links_tab_style div:last-child a:nth-child(2) span::before{background:url(../img/tab_life_icon.svg) center/28px no-repeat;}


@media screen and (max-width:991px){

div.sp_reverse{
    display:flex;
    flex-wrap:wrap;
    flex-direction: column-reverse;
}
div.sp_reverse > div:first-child{margin-top:40px;}

div.links_tab_style{max-width:100%;}
div.links_tab_style div{width:calc(50% - 5px);}
div.links_tab_style a{
    width:calc((100% - 10px)/2);
    font-size:1.6vw;
}

}


@media screen and (max-width:767px){


/*プルダウンメニュー*/
div.pagenav_btn{
    max-width:calc(100% - 37px);
    margin-right:0;
}

div.pagenav_btn::after{
    margin-top:-8px;
    right:15px;
    width:10px;
    height:10px;
}

div.pagenav_btn span{
    font-size:1.8rem;
    letter-spacing:-0.25pt;
    padding:15px 30px 15px 45px;
    border-right:40px solid #F3901D;
}

div.pagenav_li{
    left:0;
    max-width:100%;
}
div.pagenav_li div.flex{flex-wrap:wrap;}
div.pagenav_li ul{width:auto;}
div.pagenav_li ul + ul{margin-top:10px;}

/*レビューエリア*/
#howto div.review_area h3{
    font-size:2.2rem;
    padding:15px 20px;
}

div.review_inner{padding:30px 0 40px; margin:0 30px;}

div.review_title div + div{margin-left:25px;}

div.review_title{padding-right:35px;}
div.review_title div img{max-width:100px;}
#howto div.review_title div p.heading{
    font-size:2rem;
    line-height:1.4;
}
#howto div.review_title span.new {
    font-size: 1.2rem;
    border-radius: 1.2rem;
    padding: 0 1.2rem;
}
div.review_title div.icon{
    width: 24px;
    height: 24px;
    border-radius:12px;
}
div.review_txt{padding:30px 0 0;}


/* タブ */
div.links_tab_style{
    position:static;
    flex-wrap:wrap;
}
div.links_tab_style div{
    position:relative;
    width:100%;
}
div.links_tab_style div + div{margin-top:20px;}
div.links_tab_style a{font-size:1.8rem;}
div.links_tab_style div:first-child a:nth-child(2) span{padding-left:50px;}
div.links_tab_style div:first-child a:nth-child(2) span::before{left:10px;}

div.sp_reverse > div:first-child{margin-top:30px;}

br.br{display:none;}

}


@media screen and (max-width:599px){


/*タイトル*/
div.category_title{height:min(50vw,335px);}
div.school div.category_title{background:url(../img/school/school_main_sp.jpg) center bottom/cover no-repeat;}
div.family div.category_title{background:url(../img/family/family_main_sp.jpg) center top/cover no-repeat;}
div.treatment div.category_title{background:url(../img/treatment/treatment_main_sp.jpg) center bottom/cover no-repeat;}
div.life div.category_title{background:url(../img/life/life_main_sp.jpg) center bottom/cover no-repeat;}

#howto div.category_title h2{font-size:3.2rem;}


/*プルダウンメニュー*/
div.category_link{margin:120px auto 30px;}
div.page-link-prev-next + div.category_link{margin-top:120px;}

div.pagenav_btn{max-width:100%;}

div.pagenav_btn::before{
    top:-90px;
    transform:translate(-50%,0);
    left:50%;
}    

div.pagenav_btn span{padding:15px 30px 15px 20px;}

div.pagenav_li{
    top:90%;
    left:0;
    right:0;
    padding:25px 20px 20px;
}

/*レビューエリア*/
div.review_title div + div{margin-left:15px;}    
#howto div.review_title div p.heading{font-size:3.2vw;}


/* タブ */
div.links_tab_style a{
    font-size:min(3.2vw,1.6rem);
    width:calc((100% - 10px)/2);
}

div.links_tab_style a span::before{left:12px;}
div.links_tab_style div:first-child a:nth-child(2) span::before{background:url(../img/tab_family_icon.svg) top 5px center/33px no-repeat;}

br.br599{display:inline;}

}


@media screen and (max-width:480px){


/*タイトル*/
div.category_title{
    width:100vw;
    margin:0 calc(50% - 50vw);
}
/*レビューエリア*/
div.review_inner{
    padding:20px 0;
    margin:0 15px;
}    
#howto div.review_title{
    flex-wrap:wrap;
    padding:0;
    background:#fff;
}
div.review_title div{
    width:100%;
    justify-content:center;
    margin:0 auto;
}

div.review_title div img{
    display:inline-block;
    max-width:136px;
}
#howto div.review_title div p.heading{
    font-size:min(5.2vw,2rem);
    letter-spacing:-0.5pt;
}
div.review_title div p.data{font-size:1.2rem;}

div.review_title div:first-child{text-align:center;}
div.review_title div + div{
    position:relative;
    margin:15px auto 0;
    padding:0 35px 0 0;
}

div.review_txt{padding-top:15px;}        


}


/************************ 子ページ ここまで ************************/