/*
Theme Name: glow care
Author: 上林莉菜
Description: glowcare
Version: 1.0
*/

@charset "utf-8";
/*共通設定*/
/*終わり*/  

/*<section class="fv">*/
.fv {
    width: 100%;
    background-image: url(../img/kensyuu/fv.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    padding-top: 80px;
}

.fv-in {
    padding: 40px 5vw;
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.fv-txt-area {
    max-width: 800px;
    margin: 0 auto;
    background-color: #111;
    color: #fff;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
}
.fv-txt-large {
    font-size:40px;
    color:#fff;
    font-weight:bolder;
    margin-bottom:48px;
}
.fv-txt-small {
    font-size:33px;
    color:#fff;
}
.fv-h1 {
    font-size: 56px;
    color:#F6254C;
}
.fv-h1 span {
    color: #F6254C;
    font-size: 48px;
}
.fv-txt-bottom {
    text-align:center;
    color:#fff;
    font-size:24px;
    font-weight:bold;
    line-height:1.1;
}

/*終わり*/  
/*<section class="detail">*/

.detail-in {
    padding: 120px 0 100px;
    text-align: center;
}
.detail-flex {
    display:flex;
    justify-content:space-between;
    gap:2%;
}
.detail-panel {
    padding:20px 20px 40px;
    width:33.333333%;
    background:#F4F4F4;
}
.detail-panel-img {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:200px;
}
.detail-large-title {
    font-size:32px;
    margin-bottom:40px;
    font-weight: 600;
}
.detail-panel-title {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:80px;
    margin-top:20px;
    font-size:22px;
    color:#F6254C;
}
.detail-panel-text {
    font-size:18px;
    text-align: left;
}


/*<section class="program">*/
.program {
    margin: 40px 0 80px 0;
    padding: 64px 5vw;
    box-shadow: 0 0 40px rgba(0,0,0,0.2);
}

.program-in {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.program-h2 {
    font-size: 32px;
    text-align: center;
}

.program-title {
    text-align: center;
    font-size: 24px;
    color: #F6254C;
    margin-top: 80px;
}

.program-title-01 {
    margin-top: 40px;
}

.program-lead-txt {
    text-align: center;
    margin: 24px;
}

tbody {
    -webkit-text-size-adjust: 100%;
} 

.table-pc {
    width: 100%;
    border: 1px solid #595959;
	border-collapse: collapse;
    font-size: 14px;
}

.table-pc tr {
    width: 100%;
}

.table-pc th {
	border: 1px solid #595959;
	border-collapse: collapse;
    padding: 4px 8px;
    text-align: center;
	background: #EFECE6;
}

.table-pc td {
    border: 1px solid #595959;
	border-collapse: collapse;
    padding: 8px;
}

.table-num {
    text-align: center;
}

.table-pc .th-color-01 {
    background-color: #EFC04A;
}

.table-pc .th-color-02 {
    background-color: #EFD592;
}

.table-pc .th-color-03 {
    background-color: #EFE2C2;
}

.table-yt {
    margin-top: 24px;
}
/*終わり*/


/*<section class="achieve-01">*/
.achieve-01 {
    margin-top: 120px;
}

.achieve-h2 {
    text-align: center;
    font-size: 32px;
}

.achieve-con-01 {
    padding: 24px 40px;
    margin-top: 24px;
    box-shadow: 0 0 40px rgba(0,0,0,0.2);
}

.achieve-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #5B5B5B;
    padding-bottom: 8px;
}

.achieve-title {
    color: #F6254C;
    font-size: 24px;
    font-weight: 800;
}

.red-back {
    display: flex;
    align-items: center;
    gap: 8px;
}

.red-back-txt {
    background-color: #F6254C;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
}

.achieve-flex-01 {
    display: flex;
    align-items: center;
    gap: 64px;
    padding-top: 24px;
    font-weight: 600;
    font-size: 14px;
    width: 90%;
    margin: 0 auto;
}

.achieve-logo {
    max-width: 240px;
    width: 100%;
}

.achieve-flex-02 {
    width: 80%;
    margin: 56px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.achieve-flex-02 .flex-l {
    width: 48%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.achieve-price {
    color: #F6254C;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.achieve-price span {
    font-size: 72px;
    font-family: 'Oswald', sans-serif;
}

.black-back {
    width: 70%;
    margin: 4px 0;
    background-color: #333;
    color: #fff;
    border-radius: 50vh;
    padding: 8px 0;
    font-size: 14px;
}

.achieve-flex-02 .flex-r {
    width: 50%;
}

.url-link {
    font-size: 10px;
    line-height: 1;
}

.synergy {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.synergy-wrap-02,
.synergy-flex {
    display: flex;
    font-size: 12px;
    color: #F6254C;
    font-weight: 600;
    gap: 16px;
}
/*終わり*/


/*<section class="ope">*/
.ope {
    margin-top: 120px;
}

.ope-h2 {
    text-align: center;
    font-size: 32px;
}

.ope-wrap {
    position: relative;
    padding: 24px 40px;
    margin-top: 24px;
    box-shadow: 0 0 40px rgba(0,0,0,0.2);
}

.case-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.case-num {
    background-color: #F6254C;
    color: #fff;
    padding: 4px 16px;
    border-radius: 4px;
}

.case-txt {
    color: #F6254C;
    font-size: 18px;
    font-weight: 600;
}

.ope-flex {
    width: 80%;
    margin: 56px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ope-flex-l {
    width: 70%;
}

.case-txt-01 {
    font-size: 30px;
    font-weight: 600;
}

.case-txt-02 {
    color: #F6254C;
    font-size: 40px;
    font-weight: 600;
}

.case-txt-02 span {
    font-family: 'Oswald', sans-serif;
    font-size: 64px;
}

.case-black-back {
    background-color: #555;
    color: #fff;
    margin-top: 24px;
    padding: 16px 24px;
    border-radius: 4px;
}

.case-black-back p {
    margin-bottom: 8px;
}

.case-black-back .space-none {
    margin-bottom: 0;
}

.ope-flex-r {
    width: 25%;
    text-align: center;
}

.ope-img {
    width: 100%;
}

.ope-back-logo {
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 24%;
    z-index: -1;
}
/*終わり*/


/*<section class="scene">*/
.scene {
    margin-top: 80px;
}

.scene-in {
    padding: 40px;
    background-color: #5B5B5B;
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
    text-align: center;
}

.scene-h2 {
    color: #fff;
    font-size: 32px;
    margin-bottom: 16px;
}
.scene-text {
    font-size: 32px;
    margin-bottom: 10px;
    color:#F6254C;
    font-weight: 600;
}
.scene-text-02 {
    margin-top:80px;
}

.scene-flex {
    display: flex;
    justify-content: center;
    gap: 2%;
    width: 100%;
    margin: 40px 0;
}
.scene-panel {
    width:50%;
    padding:20px;
    background:#fff;
}
.scene-panel-title {
    color:#F6254C;
    margin:20px 0 10px;
    font-size:22px;
    text-align:center;
}
.scene-panel-text {
    text-align:left;
    font-size:18px;
}

/*終わり*/  

/*<section class="program">*/
.price {
    margin-top:80px;
    margin-bottom:110px;
}
.price-in {
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
    padding: 40px;
    text-align: center;
}
.price-title {
    font-size: 32px;
    margin-bottom: 40px;
}
.price-box {
    display:flex;
    gap:2%;
    background:#F4F4F4;
    margin:auto;
    padding: 40px;
    align-items: center;
}
.price-box > div {
    width:50%;
}
.price-texts {
    text-align:left;
}
.price-box-title {
    font-size:22px;
    border-bottom:1px solid #ccc;
    padding-bottom:10px;
    margin-bottom:10px;
}
.price-box-title span {
    font-size:18px;
}
.price-box-text {
    font-size:18px;
}
.price-box-text + .price-box-title {
    margin-top:40px;
}


/*<section class="jukou">*/
.jukou-title {
    font-size: 32px;
    margin-bottom: 40px;
    text-align:center;
}
.jukou-in {
    max-width:1500px;
}
.jukou-panels {
    display:flex;
}
.jukou-panel {
    width:100%;
    background:#F4F4F4;
    padding:30px 10px 50px;
    text-align:center
}
.jukou-panel-num {
    font-size:32px;
    color:#F6254C;
}
.jukou-panel-text {
    margin:20px 0 30px;
    font-size:18px;
    font-weight: 600;
}

.jukou-panels > span {
    align-self:center;
    display:block;
    margin:0 40px;
    width:0;
    height:0;
    border-left:30px solid #F6254C;
    border-top:35px solid transparent;
    border-bottom:35px solid transparent;
}

/*<section class="reason">*/
.form {
    margin-top:120px;
    margin-bottom:110px;
}
.form-in {
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
    padding: 40px;
    text-align: center;
}
.form-title {
    font-size: 32px;
    margin-bottom: 30px;
    text-align:center;
}
.form-text {
    font-size:16px;
    margin-bottom:62px;
}
.form-box {
    max-width:320px;
    margin:auto;
}
.form-input-title {
    font-size:16px;
    text-align:left;
}
.form-input-title span {
    color:#F6254C;
}
.form-input {
    border-radius:0;
    border:1px solid #CCCCCC;
    padding:10px;
    width:100%;
}
.form-line  {
    margin-bottom:20px;
    text-align:left;
}
.form-desc {
    margin-bottom:10px;
    font-size: 12px;
}
.form-button-area {
    display:flex;
    flex-direction:column;
    align-items:center;
}
.form-submit-button {
    margin-top:30px;
    display:inline-block;
    border-radius:0;
    border:0;
    padding:10px;
    font-size:18px;
    color:#fff;
    background:#F6254C;
}

/*<section class="reason">*/

/*タブレット*/
@media (max-width: 1024px) {  
/*共通設定*/
/*終わり*/  

/*<section class="fv">*/
    .fv {
        padding-top: 120px;
    }

    .fv-txt-large {
        font-size:32px;
        margin-bottom:50px;
    }
    .fv-txt-small {
        font-size:24px;
    }
    .fv-h1 {
        font-size:40px;
    }
    .fv-txt-bottom {
        font-size:18px;
        line-height:1.2;
    }
    .jukou-panels {
        flex-direction:column;
    }
    .jukou-panel {
        padding:20px 10px 30px;
    }
    .jukou-panels > span {
        margin:20px 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 35px solid #F6254C;
        border-bottom:none;
    }

    .jukou-panel img {
        width: auto
    }    
/*終わり*/  

/*<section class="program">*/
    .tiktok-area,
    .youtube-area {
        width: 100%;
        margin: 0 auto;
    }

/*終わり*/  
}


/*スマホ*/
@media (max-width: 599px) {
/*<section class="fv">*/
    .fv {
        padding: 90px 1vw 0 1vw;
    }

    .fv-txt-area {
        width: 100%;
        padding: 24px;
    }   
    .fv-txt-large {
        font-size:16px;
        margin-bottom: 40px;
    }
    .fv-h1 {
        font-size: 30px;
    }
    .fv-txt-small {
        font-size:18px;
    }
    .fv-txt-bottom {
        font-size:18px;
        padding:30px 0 0 0;
    }
    .detail {
        padding: 40px 5vw;
    }

    .detail-in {
        padding: 80px 0;
    }

    .detail-large-title {
        font-size:24px;
        margin-bottom:40px;
    }
    .detail-flex {
        display:block;
    }
    .detail-panel {
        width:100% !important;
        padding: 24px 16px;
    }
    .detail-panel + .detail-panel {
        margin-top:20px;
    }

    .detail-panel-img {
        min-height: auto;
    }

    .detail-panel-img img {
        width: 60%;
    }   
    
    .detail-panel-title {
        font-size: 18px;
    }

    .detail-panel-text {
        margin-top: 16px;
    }

    .program-box-title {
        font-size:25px;
    }
    .program-box-lead {
        font-size:25px;
        margin-bottom:40px;
    }
    .program-text {
        padding:20px;
        font-size:18px;
    }
    .scene-text {
        font-size: 24px;
    }
    .scene-panel {
        padding:15px;
    }
    .scene-flex {
        display:block;
    }
    .scene-panel {
        margin-top:20px;
        width:100%;
    }
    .scene-panel-title {
        font-size:18px;
    }
    .scene-panel-text {
        font-size:16px;
    }
    .scene-in {
        padding: 40px 5vw;
        box-shadow: none;
    }

    .scene-h2 {
        font-size: 24px;
    }
    .price-title {
        font-size:24px;
        margin-bottom:60px;
    }
    .price-box {
        display:block;
        padding: 24px 16px;
    }
    .price-box > div {
        width:100%;
    }
    .form {
        padding: 40px 5vw;
        box-shadow: none;
    }
    .form-title {
        margin-bottom:20px;
        font-size:24px;
    }
    .form-text {
        margin-bottom:20px;
        font-size:16px;
        text-align: left;
    }


}

.intro,
.company {
    margin-top: 80px;
}

.intro-in,
.company-in {
    max-width: 1000px;
    margin: 0 auto;
}

.officer-h2,
.company-h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    margin-bottom: 32px;
}
/*終わり*/

/*<section class="intro">*/
.img-flex {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    width: 100%;
    gap: 24px;
    margin-bottom: 60px;
}

.officer-img {
    width: 40%;
}

.officer-name {
    width: calc(60% - 24px);
}

.name-large {
    font-size: 48px;
    font-weight: 600;
}

.name-medium {
    font-family: 'Oswald', sans-serif;
    color: #5B5B5B;
    font-size: 18px;
}

.officer-txt {
    margin-bottom: 60px;
}
/*終わり*/

/*<section class="company">*/
.company {
    background-color: #F4F4F4;
    padding: 80px 5vw;
}

.com-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.com-dl {
    width: 49%;
    display: flex;
    flex-wrap: wrap;
}

.com-dl dt {
    line-height: 1;
    width: 30%;
    border-top: solid 1px #CCCCCC;
    padding: 40px 0;
}

.com-dl dd {
    line-height: 1;
    width: 68%;
    border-top: solid 1px #CCCCCC;
    padding: 40px 0;
}

.address-txt p {
    display: block;
    margin-bottom: 8px;
}

.com-span {
    font-weight: 600;
}

.address-link {
    line-height: 1.5;
    border-bottom: solid 1px #999;
}

.com-span02 {
    display: block;
    margin-top: 40px;
}

.last-dt-02,
.last-dt,
.last-dd {
    border-bottom: solid 1px #CCCCCC;
}
/*終わり*/

/*<section class="contact-btn-area">*/
.contact-btn-area {
    margin-top: 0;
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {  
/*共通設定*/
/*終わり*/  

/*<section class="company">*/
    .com-dl dt {
        width: 40%;
    }

    .com-dl dd {
        width: 60%;
    }
/*終わり*/


/*<section class="detail">*/
    .detail-flex {
        flex-direction: column;
        gap: 24px;
    }

    .detail-panel {
        width:80%;
        margin: 0 auto;
    }
    
/*終わり*/


/*<section class="program">*/
    .table-pc {
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .th-color {
        position: sticky;
        left: 0;
    }

    .th-color::before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        right: -1px;
        height: 100%;
        border-left: 1px solid #595959;
        border-right: 1px solid #595959;
    }
/*終わり*/  


/*<section class="achieve-01">*/
    .achieve-title-wrap-02 {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .red-back-02 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .achieve-flex-01 {
        display: block;
        width: 100%;
    }

    .achieve-logo {
        max-width: 200px;
        width: 100%;
    }

    .achieve-flex-01 .txt-01 {
        margin-top: 16px;
    }

    .achieve-flex-02 {
        width: 100%;
        display: block;
    }
    
    .achieve-flex-02 .flex-l {
        width: 100%;
        align-items: center;
    }
    
    .achieve-flex-02 .flex-r {
        width: 80%;
        margin: 40px auto 0 auto;
    }
    
    .url-link {
        font-size: 12px;
    }

    .synergy {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }   
    
    .synergy-wrap-02,
    .synergy-flex {
        flex-direction: column;
        align-items: flex-start;
        font-size: 14px;
        gap: 4px;
    }
/*終わり*/


/*<section class="ope">*/
    .ope-flex {
        width: 100%;
        flex-direction: column-reverse;
    }

    .ope-flex-l {
        width: 100%;
        margin-top: 24px;
        text-align: center;
    }

    .case-txt-01 {
        font-size: 24px;
    }
    
    .case-txt-02 {
        font-size: 32px;
    }
    
    .case-txt-02 span {
        font-size: 56px;
    }    
/*終わり*/

}


/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
    .officer-h2,
    .company-h2 {
        text-align: center;
    }
/*終わり*/  

/*<section class="intro">*/
    .img-flex {
        display: block;
        margin-bottom: 24px;
    }

    .officer-img {
        width: 100%;
        margin-bottom: 16px;
    }

    .officer-name {
        text-align: center;
        width: 100%;
    }

    .name-large {
        font-size: 32px;
    }

    .name-medium {
        font-size: 16px;
    }

    .officer-txt01 {
        margin-bottom: 80px;
    }

    .officer-txt02 {
        margin-bottom: 40px;
    }
/*終わり*/  

/*<section class="company">*/
    .com-flex {
        display: block;
    }

    .com-dl {
        width: 100%;
    }

    .com-dl dt {
        border-top: solid 2px #111;
    }  
    
    .com-dl dd {
        padding-left: 16px;
    }

    .last-dt-02 {
        border-bottom: solid 2px #111;
    }

/*終わり*/  


/*<section class="program">*/
    .program-h2 {
        font-size: 24px;
    }

    .program-title {
        font-size: 18px;
    }

    .nav-open::before{/* 閉じている時 */
        right: 16px;
    }

    .title-txt {
        font-size: 16px;
        padding: 8px 16px;
    }   
        
    .th-color {
        position: sticky;
        left: 0;
    }
    
    .th-color::before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        right: -1px;
        height: 100%;
        border-left: 1px solid #595959;
        border-right: 1px solid #595959;
    }    

    .table-pc {
        font-size: 10px;
    }
/*終わり*/  


/*<section class="achieve-01">*/
    .achieve-01 {
        margin-top: 80px;
    }

    .achieve-h2 {
        font-size: 24px;
    }  
    
    .achieve-con-01 {
        padding: 24px 16px;
    }

    .achieve-title-wrap {
        flex-direction: column-reverse;
        align-items: flex-start;
    }    

    .achieve-title {
        font-size: 18px;
    }    

    .red-back {
        margin-bottom: 8px;
    }

    .red-back-txt {
        background-color: #F6254C;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }    
    
    .achieve-logo {
        max-width: 160px;
    }

    .achieve-price {
        font-size: 24px;
    }
    
    .achieve-price span {
        font-size: 56px;
    }   
    
    .black-back {
        width: 100%;
    }   
    
    .achieve-flex-02 {
        margin: 56px auto 40px auto;
    }    

    .achieve-flex-02 .flex-r {
        width: 100%;
    }
    
    .url-link {
        font-size: 10px;
    }

    .synergy-txt {
        max-width: 160px;
        width: 100%;
    }

    .synergy-flex {
        margin-bottom: 4px;
    }

    .synergy p {
        font-size: 12px;
    }
/*終わり*/  


/*<section class="ope">*/
    .ope {
        margin-top: 80px;
    }

    .ope-h2 {
        font-size: 24px;
    }

    .ope-wrap {
        overflow: hidden;
        padding: 24px 16px;
    }   
    
    .case-txt-01 {
        font-size: 18px;
    }
    
    .case-txt-02 {
        font-size: 24px;
        line-height: 1.2;
        margin-top: 16px;
    }
    
    .case-txt-02 span {
        font-size: 48px;
    }   
    
    .case-black-back {
        text-align: left;
        padding: 12px 16px;
        font-size: 14px;
    }    

    .ope-flex-r {
        width: 40%;
    }    

    .ope-back-logo {
        top: 40%;
        left: 20%;
        width: 100%;
    }
    
/*終わり*/  


/*<section class="program">*/
    .price-in {
        padding: 24px 16px;
    }

    .price-box-title {
        font-size: 18px;
    }

    .price-box-text-sp {
        font-size:14px;
    }    

    .price-img {
        margin-top: 40px;
    }
/*終わり*/  


/*<section class="form">*/
    .form-in {
        padding: 24px 16px;
    }
/*終わり*/  
}