@charset "UTF-8";

/* 設定 */
:root {
    --scrollbar: 0;

    --accentcolor: #009499;
    --paleyellowgreen: #AAD47B;
    --palegreenpale: #E9F5DC;
    --white: #ffffff;
    --maincolor: #E06B43;
    --paleorange: #F59B78;
    --yelloworange: #FAC146;
    --textcolor: #59301F;
    --backgroundbeige: #FFFAF2;
    --stronglinecolor: #99FFE4;
    --stronglinecolor-y: #FFE77A;
    --linkhovercolor: #FAC146;
    --headercolor: rgba(0,148,153,.5);

    --roundfont: "Kiwi Maru", system-ui;
    --textfont: 'IBM Plex Sans JP','Noto Sans JP','Roboto','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    --YHfont: YakuHanJP,'IBM Plex Sans JP','Noto Sans JP','Roboto','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;

    --footerfontsize: 0.875rem;
    --footerlineheight: 1.29;
    --footerblockbetween: 12px;

    --dropshadow-white: 0 0 4px var(--white);
    --dropshadow-green448: 4px 4px 8px rgba(170, 212, 123, 0.5);
    --dropshadow-green044: 0 4px 4px rgba(170, 212, 123, 0.5);
    --dropshadow-yellow448: 4px 4px 8px rgba(250, 193, 70, 0.3);
    --dropshadow-yellow-444: -4px 4px 4px rgba(250, 193, 70, 0.3);
}

body {
    overflow-x: hidden;
}

/*
    仮公開中の一時的な表示
------------------------------- */
section#pagetop {
    position: relative;
}
#underconstruction {
    color: var(--linkhovercolor);
    text-align: center;
    position: absolute;
    top: 10vh;
    left: 15vw;
    z-index: 100000;
    background-color: rgba(216, 216, 216, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    block-size: fit-content;
    padding: 2rem 3rem;
    border: 1px solid var(--white);
    border-radius: 10px;

}
#underconstruction #notice {
    font-size: 62pt;
    font-weight: 700;
}
#underconstruction p {
    block-size: fit-content;
}
#underconstruction .postscript {
    color: var(--yelloworange);
}
/* -----------------仮公開対応 ここまで */

/* 予約ボタン */
.reservbtn01 {
    width: 300px;
    height: 50px;
    background: var(--accentcolor);
    border: 1px solid var(--stronglinecolor);
    box-shadow: var(--dropshadow-green448);
    border-radius: 1000px;
    font-family: var(--roundfont);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.0;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
    display: flex;
}
.reservbtn01 a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    color: var(--white);
    transition:all 0.15s;
}
.reservbtn01 a:hover {
    color: var(--white);
}
.reservbtn01:hover {
    background-color: var(--linkhovercolor);
    border: 1px solid var(--white);
    box-shadow: var(--dropshadow-yellow448);
    transition:all 0.15s;
}

/* 予約ボタンsection  */
section.reservbtn-sec {
    width: fit-content;
    margin-inline: auto;
    padding-top: 100px;
    padding-bottom: 130px;
    letter-spacing: 0.02em;
}
#reservbtn-sec02 {
    padding-top: 0;
}
#reservbtn-sec03 {
    padding-top: 130px;
}

  

/* index-top section */

.index-topsect {
    padding-top: 40px;
    width: 100%;
    height: 600px;
    overflow: hidden;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 57.5%, rgba(0, 148, 153, 0.06) 100%);
    mix-blend-mode: multiply;

}
.index-topsect div.wrapper {
    position: relative;
    height: 560px;
}
.toptext {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-inline: 15px;
    z-index: 3;
}
.toptext .reservbtn01 {
    margin-top: 60px;
}
#top-reservbtn02 {
    display: none;
}
.index-topsect h2 {
    font-size: 2rem;
    width: fit-content;
    line-height: 1.5;
    text-align: center;
    margin-top: 60px;
    letter-spacing: normal;
}
.index-topsect .top-p1 {
    letter-spacing: 0.03em;
    font-weight: 600;
    margin-top: 100px;
}

.index-topsect .top-p2 {
    font-size: 1.5rem;
    /* letter-spacing: 0.03em; */
    font-weight: 600;
    color: var(--maincolor);
    margin-top: 100px;
    margin-top: 40px;
}

.toplogocut {
    -webkit-filter: drop-shadow( -4px 4px 4px rgba(242, 230, 213, 1.0) );
    filter: drop-shadow( -4px 4px 4px rgba(242, 230, 213, 1.0) );
    z-index: 2;
}
.toplogocut img {
    position: absolute;
    top: 0;
    right: -40px;
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    /* 大きさを変更 */
    width: 581px;
    height: 555px;
    object-fit: cover;
    object-position: 55% 50%;
    aspect-ratio: 1188 / 950;
}

.topbtmlink {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 3;
    text-align: right;
    font-weight: 500;
}
.topbtmlink a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* 比較section 1 */
.boldmaincolor {
    font-weight: 500;
    color: var(--maincolor);
}
.comparecontainer {
    position: relative;
    width: 100%;
    height: 240px;
}
p.compare-left {
    margin-inline: 270px;
}
p.compare-right {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-inline: 270px;
    text-align: right;
}
img.compare-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 236px;
}
img.compare-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 240px;
    height: 236px;
}

#plb01-btmtext {
    text-align: center;
}



/* 比較section2  */
#plobrem02 .comparecontainer {
    margin-top: 100px;
}
.fs12 {
    font-size: 0.75rem;
}
.fs10 {
    font-size: 0.625rem;
}
.color-green {
    color: var(--accentcolor);
}

#plobrem02 .container800 {
    margin-top: 120px;
}

.orangegrad {
    background: linear-gradient(180deg, rgba(255, 250, 242, 0) 0%, rgba(255, 250, 242, 0.5) 3%, rgba(250, 193, 70, 0.5) 10%, rgba(250, 193, 70, 0.5) 82%, rgba(255, 250, 242, 0.5) 94%, rgba(255, 250, 242, 0) 99.5%);
    mix-blend-mode: multiply;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 60px;
    margin-top: 40px;
}
#orangegrad-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--maincolor);
}
.orangegrad img {
    width: 450px;
    height: 398px;
    margin-top: 25px;
}
#plb02-btmtext {
    margin-inline: auto;
    max-width: 1030px;
    padding-inline: 15px;
    text-align: center;
    padding-bottom: 60px;
}


/* もっと身近にsection */

#kokage {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 18%, rgba(255, 255, 255, 0.5) 28%, rgba(255, 255, 255, 0) 35%),url(../images/top-linden-aquq.jpg);
    background-repeat: no-repeat;
    background-position: 15% 50%;
    background-size: contain;
}
#kokage .wrapper {
    margin-block: 160px;
}
#kokage h2 {
    letter-spacing: normal;
}

/* Points section  */
section#calmtree-points {
    width: 100%;
}
#point1, #point2, #point3 {
    margin-top: 130px;
    position: relative;
    padding-bottom: 80px;
    border-bottom: 1px dashed var(--linkhovercolor);
}
.point-point{
    display: block;
    width: fit-content;
    font-size: 1.5rem;
    text-underline-offset: -10px;
    text-decoration: underline;
    text-decoration-thickness: 17px;
    text-decoration-color:  var(--stronglinecolor-y);
    text-decoration-skip-ink: none;
    margin-bottom: 5px;
}
#point1-bgimg, #point2-bgimg, #point3-bgimg {
    position: absolute;
    top: -70px;
    right: -200px;
    -webkit-filter: opacity(70%) drop-shadow(var(--dropshadow-yellow-444));
    filter: opacity(70%) drop-shadow(var(--dropshadow-yellow-444));
    z-index: 2;
    width: 600px;
    height: 532px;
    aspect-ratio: 9/8;
}
.textcontainer{
    position: relative;
    max-width: 640px;
    z-index: 3;
}
#calmtree-points .textcontainer {
    text-shadow:1px 1px 0 var(--backgroundbeige), -1px -1px 0 var(--backgroundbeige),
    -1px 1px 0 var(--backgroundbeige), 1px -1px 0 var(--backgroundbeige),
    0px 1px 0 var(--backgroundbeige),  0-1px 0 var(--backgroundbeige),
    -1px 0 0 var(--backgroundbeige), 1px 0 0 var(--backgroundbeige);
} 
.pointimgcontainer {
    position: relative;
    max-width: 460px;
    margin-left: 60px;
    margin-top: 60px;
    text-shadow: none;
}
#point1 .pointimgcontainer img {
    width: 40px;
    height: 60px;
    position: absolute;
    top: 10px;
    left: 0;
}
p.fukidashi {
    position: relative;
    box-sizing: border-box;
    width: fit-content;
    padding: 8px 15px;
    font-family: var(--roundfont);
    font-weight: 300;
    font-size: 0.9375rem;
    letter-spacing: normal;
    text-shadow: none;
    color: var(--accentcolor);
    background-color: var(--white);
    border: 1px solid var(--paleyellowgreen);
    border-radius: 8px;
    margin-left: 75px;
}
p.fukidashi::before {
    position: absolute;
    content: '';
    background-image: url(../images/fukitail.svg);
    display: block;
    width: 13px;
    height: 9px;
    left: -12.5px;
}
#point1 p.fukidashi::before {
    top: 22px;
}
.pointcontainer-text {
    font-size: 0.75rem;
}


    /* point2  */
    #point2 {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    #point2-bgimg {
        position: absolute;
        left: -200px;
    }
    #point2 .pointimgcontainer {
        margin-left: auto;
        margin-right: auto;
    }
    #point2 .pointimgcontainer img {
        width: 38px;
        height: 60px;
        position: absolute;
        top: 50px;
        left: 40px;
    }
    #point2 p.fukidashi {
        padding: 4px 15px;
    }
    #point2 p.fukidashi::before {
        top: 11px;
    }
    #fuki2-1 {
        margin-left: 115px;
    }
    #fuki2-2 {
        margin-top: 5px;
        margin-left: 150px;
    }

    /* point3  */
    #point3 {
        border-bottom: none;
        padding-bottom: 40px;
    }
    #point3 .pointimgcontainer img {
        width: 36px;
        height: 61px;
        position: absolute;
        top: 30px;
        left: 0;
    }
    #point3 p.fukidashi::before {
        top: 34px;
    }
    #point3 p.fukidashi  {
        width: 290px;
    }

/* 続けやすいsection  */
#continuable {
    padding-top: 180px;
    padding-bottom: 30px;
}
#continuable h2 {
    margin-bottom: 80px;
}
img#piechart {
    width: 90%;
    aspect-ratio: 138/103;
    margin-inline: auto;
}
#continuable-p1 {
    margin-top: 20px;
}
#continuable-p2 {
    margin-top: 40px;
}


/* カウンセリングについてsection  */
#aboutcounseling .twoframe {
    border: 0.5px solid var(--paleorange);
    padding: 20px;
}

#aboutcounseling h3 i {
    color: var(--linkhovercolor);
}
#aboutcounseling .mklist {
    margin-left: 2rem;
}
.fa-display {
    font-size: 20px;
    margin-right: 8px;
}
.fa-tag {
    font-size: 20px;
    margin-right: 10px;
}
.postscript {
    color: var(--maincolor);
    margin-left: 2rem;
    margin-right: 2rem;
}
.postscript::before {
    content: '※';
    margin-left: -1rem;
}
.postscript span {
    display: block;
    margin-left: 1rem;
    color: var(--linkhovercolor);
    font-size: 0.9375rem;
    margin-top: 5px;
}

/* カウンセラー紹介section  */
.counselorplofcontainer {
    border: 1px dashed var(--paleyellowgreen);
    width: 100%;
    padding: 10px 30px 60px 30px;
}
.counselorplofcontainer .frame-left {
    width: 30%;
    min-width: fit-content;
}
.counselorplofcontainer .frame-right {
    width: 64%;
}
h3.counselorname {
    border-bottom: 1px solid var(--headercolor);
    height: 70px;
    margin-left: 20px;
    position: relative;
    color: var(--textcolor);
    font-family: var(--textfont);
    font-weight: 400;
    font-size: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    margin-bottom: 70px;
}
h3.counselorname::before {
    display: block;
    position: absolute;
    bottom: -1.25px;
    left: -20px;
    content: '';
    width: 74px;
    height: 70px;
    background-image: url(../images/plofheaderlogo.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    -webkit-filter: opacity(80%);
    filter: opacity(80%);
}
.plofphoto {
    display: block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--stronglinecolor);
    margin-inline: auto;
}
.plofaddtext {
    text-align: center;
}
.counselormessage {
    font-family: var(--roundfont);
    font-weight: 300;
    font-size: 0.9375rem;
    color: var(--accentcolor);
    background-color: var(--white);
    border: 1px solid var(--paleyellowgreen);
    border-radius: 8px;
    padding: 0px 20px 25px 20px;
    letter-spacing: normal;
}
.counselormessage::before {
    content: 'メッセージ';
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    width: 140px;
    height: 36px;
    /* font-family: var(--roundfont);
    font-weight: 300;
    font-size: 0.9375rem; */
    color: var(--white);
    background-color: var(--paleyellowgreen);
    border-radius: 1000px;
    margin-top: -18px;

}
.counselormessage p {
    margin-top: 18px;
}
.counselormessage p:first-child {
    margin-top: 20px;
}

.counselorsfield h4 {
    display: flex;
    align-items: center;
    line-height: 1.0;
    color: var(--accentcolor);
    font-weight: 500;
}
.counselorsfield h4 i {
    color: var(--paleyellowgreen);
}
.fa-tag {
    font-size: 19px;
    margin-right: 10px;
}

ul.fields li {
    display: inline-block;
    width: fit-content;
    padding: 8px 15px 5px 15px;
    border-radius: 1000px;
    border: 1px solid var(--textcolor);
    line-height: 1.1;
    margin: 2px 0px;
    font-size: 16px;
}
ul.fields li:last-child {
    padding: 0;
    border: none;
    font-size: 14px;
    margin-bottom: 0;
}


/* カウンセリングの流れsection */
#counselingflow h2 {
    margin-top: 20px;
    margin-bottom: 83px;
}
.flowcontainer {
    width: 480px;
    margin-inline: auto;
}
.flowblock {
    width: 100%;
    padding: 0 60px 40px 60px;
    border: 2px solid var(--yelloworange);
    border-radius: 8px;
    background-color: var(--white);
}
div#step1::before, div#step2::before,div#step3::before,div#step4::before {
    content: 'Step.1';
    display: flex;
    width: 116px;
    height: 36px;
    margin-left: -44px;
    margin-top: -18px;
    justify-content: center;
    align-items: center;
    color: var(--white);
    background-color: var(--paleorange);
    border-radius: 1000px;
    font-family: var(--roundfont);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.0;
    letter-spacing: 0.1em;
    padding-bottom: 4px;
}
div#step2::before {
    content: 'Step.2';
}
div#step3::before {
    content: 'Step.3';
}
div#step4::before {
    content: 'Step.4';
}
.flowblock img.flowicon {
    width: 100%;
    height: 80px;
    object-fit: contain;
    margin-inline: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}
.flowblock h3 {
    font-size: 0.9375rem;
    text-align: center;
}
#step2 h3, #step4 h3 {
    margin-top: 10px;
}
.flowblock p {
    font-size: 0.875rem;
    width: 100%;
    padding-top: 15px;
}
.flowarrow .arrowicon {
    width: 86px;
    height: 40px;
    background-image: url(../images/flowarrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-inline: auto;
}
.flowarrow {
    margin-top: 30px;
    margin-bottom: 40px;
    -webkit-filter: opacity(36%);
    filter: opacity(36%);
}
#counselingflow .beigemaindiv {
    padding-bottom: 100px;
}

/* アイコンつき見出し  */
h2.iconheader,h3.iconheader {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.iconheader span, .iconheader i, .iconheader img {
    display: block;
}
.iconheader i, .iconheader img {
    color: var(--linkhovercolor);
    margin-top: 8px;
}
i.fa-yen-sign {
    font-size: 24px;
    margin-right: 8px;
    margin-top: 4px;
}
i.fa-credit-card {
    font-size: 24px;
    margin-right: 8px;
    margin-top: 5px;
}

.compsec h2.iconheader i {
    color: var(--paleyellowgreen);
}
.fa-person-chalkboard {
    font-size: 24px;
    margin-right: 8px;
}
img#japanmap {
    width: 28px;
    height: 32px;
    margin-right: 8px;
    margin-top: 0;
}
img#openbook {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    margin-top: 4px;
}

/* 料金section */
#fee h2 {
    letter-spacing: 0.1em;
}
.feecontainer {
    width: 100%;
    border: 1px solid var(--paleorange);
    border-radius: 8px;
    padding-inline: 15px;
    padding-bottom: 50px;
}
.feecontainer h3 {
    width: fit-content;
    height: fit-content;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 30px;
    padding-block: 6px;
    border: 1px solid var(--paleorange);
    border-radius: 1000px;
    background-color: var(--white);
    margin-inline: auto;
    margin-top: -18px;
}
.feeminiblock {
    width: fit-content;
    margin-inline: auto;
}
.feeminiblock h4 {
    color: var(--textcolor);
    border-bottom: 2px solid var(--yelloworange);
    margin-bottom: 10px;
    margin-top: 40px;
}
.feeminiblock tr {
    line-height: 1.5;
}
.feeminiblock th, .feeminiblock td {
    font-size: 0.875rem;
    font-weight: 400;
}
.feeminiblock th {
    width: calc( 13em + 40px );
    letter-spacing: 0.02em;
    text-align: left;
    padding-left: 10px;
}
.feeminiblock td:nth-of-type(1) {
    width: 3em;
    text-align: right;
}
.feeminiblock td:nth-of-type(2) {
    width: calc( 6em + 20px );
    text-align: right;
    padding-right: 10px;
}

#keijifeetext {
    color: var(--textcolor);
    font-size: 0.75rem;
    text-align: right;
    margin-right: 10px;
    margin-top: 10px;
}

#feeframe02 p.postscript:nth-child(1) {
    font-size: 0.875rem;
    margin-top: 30px;
    text-align: right;
    margin-right: 10px;
    margin-bottom: 30px;
}

#feeframe02 div.postscript {
    font-size: 0.75rem;
    margin-top: 50px;
}
#feeframe02 div.postscript::before {
    content: '';
}
#feeframe02 div.postscript h4 {
    font-family: var(--textfont);
    margin-left: -1em;
}
#feeframe02 div.postscript p {
    margin-top: 10px;
}

/* 支払い方法section */
.centercolumn {
    max-width: 800px;
    margin-inline: auto;
}
#paymethod p {
    max-width: fit-content;
    margin-inline: auto;
}
div#cancellpolicy {
    width: 64%;
    padding: 15px 35px 30px 35px;
    border: 2px solid var(--maincolor);
    color: var(--maincolor);
    margin-inline: auto;
    margin-top: 40px;
}
div#cancellpolicy h3 {
    font-family: var(--textfont);
}

/* 受付時間section  */
table#hourstable {
    width: 480px;
    border-collapse: collapse;
    margin-inline: auto;
}
table#hourstable tr {
    line-height: 1.0;
}
table#hourstable th, table#hourstable td {
    text-align: center;
    font-weight: 400;
    color: var(--textcolor);
    /* background-color: var(--backgroundbeige); */
    padding-block: 16px;
    border: 1px solid rgba(89, 48, 31, .25);
    border-spacing: 0;
}
table#hourstable th.name {
    width: 16%;
    letter-spacing: 0.2em;
}
table#hourstable td {
    width: 12%;
}
#officehours p {
    width: 480px;
    margin-inline: auto;
    color: var(--maincolor);
    margin-top: 20px;
}

/* 知っておいていただきたいことsection  */
#pleaseknow .beigemaindiv {
    padding-bottom: 100px;
}
#pleaseknow .twoframe {
    width: calc( 50% - 40px );
}

/* クライアントの声section  */
#customervoice .beigemaindiv {
    padding-bottom: 100px;
}

        /* slickの調整 */
        #customervoice .slider {
            width: 100%;
            margin-top: 90px;
            position: relative;
        }
        #customervoice .slider .slider-item {
            width: 310px;
            height: 390px;
            background-color: var(--white);
            padding: 30px 25px;
            border: 2px solid var(--linkhovercolor);
            border-radius: 8px;;
            margin-inline: 15px;
        }
        .iconwrapper img {
            display: block;
            width: 100px;
            height: 100px;
            margin-inline: auto;
        }
        .iconwrapper p {
            text-align: center;
            font-family: var(--roundfont);
            font-size: 14px;
            line-height: 1.0;
            font-weight: 400;
            color: var(--maincolor);
            margin-top: 20px;
        }
        .voicewrapper {
            margin-top: 20px;
        }
        .voicewrapper p {
            font-size: 12px;
            line-height: 1.5;
        }
        .slide-arrow{
            position: absolute;
            top: 40%;
            z-index: 2;
        }
        .prev-arrow{
            left: -10px;
            width: 45px;
            height: 45px;
            cursor: pointer;
        }
        .next-arrow{
            right: -10px;
            width: 45px;
            height: 45px;
            cursor: pointer;
        }

        .slick-dots li button:before
        {
            font-size: 10px;
            opacity: .3;
            color: var(--paleorange);
            margin-top: 10px;
        }
        .slick-dots li.slick-active button:before
        {
            opacity: 1.0;
            color: var(--paleorange);
        }



/* FAQ section  */
div.faqblock {
    position: relative;
    padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed var(--linkhovercolor);
}
div.faqblock::before {
    content: 'Q';
    position: absolute;
    top: 10px;
    left: 0;
    font-family: var(--roundfont);
    font-size: 36px;
    font-weight: 500;
    color: var(--linkhovercolor);
}
.faqblock h3 {
    font-size: 1.125rem;
    font-weight: 400;
    min-height: 32px;
    margin-left: 42px;
}
.faqblock p {
    font-size: 0.875rem;
    /* margin-top: 6px; */
    margin-left: calc( 42px + 1.125rem );
}
div.faqblock:first-child {
    margin-top: -10px;
}

    /* アコーディオン部分　 */
    #accordion-btn {
            width: fit-content;
            height: 35px;
            background-color: var(--linkhovercolor);
            color: var(--white);
            border: 1px solid var(--paleorange);
            box-shadow: var(--dropshadow-yellow448);
            border-radius: 1000px;
            font-family: var(--roundfont);
            font-weight: 400;
            font-size: 15px;
            line-height: 1.0;
            letter-spacing: normal;
            padding: 8px 15px;
            text-align: center;
            cursor: pointer;
            margin-inline: auto;
            margin-top: 50px;
    }
    #accordion-btn:hover {
            background-color: var(--paleorange);
    }
    .accordion-content  {
        display: none;
    }




/* クロージングsection  */
#closing h2 {
    margin-top: 40px;
}
#closing img {
    display: block;
    width: 340px;
    height: 340px;
    mix-blend-mode: multiply;
    -wenkit-filter: opacity(65%);
    filter: opacity(65%);
    margin-inline: auto;
    margin-top: 20px;
}
#closing .beigemaindiv {
    padding-bottom: 30px;
}
#closing p {
    margin-top: 60px;
}
#closing p:first-child {
    margin-top: 80px;
}

/* 予約ボタンBIG section  */
#reservbtn-big {
    padding-top: 190px;
    padding-bottom: 90px;
    position: relative; 
}
section.reservbtn-sec#reservbtn-big {
    width: 100%;
}
#reservbtn-big .reservbtn01 {
    width: 480px;
    height: 80px;
    margin-inline: auto;
    font-size: 24px;
}
#reservaddtext {
    margin-top: 80px;
    padding-inline: 15px;
}
#reservaddtext p {
    text-align: center;
    font-size: 0.875rem;
    margin-top: 10px;
}
#reservaddtext p:first-child {
    margin-top: 0;
}
#reservaddtext a {
    font-weight: 500;
    color: var(--maincolor);
    text-decoration: underline;
}
#reservaddtext span {
    font-weight: 500;
    color: var(--maincolor); 
}

/* 法人トップsection  */
#companytop {
    padding-top: 40px;
}
#companytop-photo {
    width: 100%;
    height: 510px;
    background: linear-gradient(135deg, rgba(0, 148, 153, 0.9) 0.24%, rgba(0, 148, 153, 0) 71.57%),url(../images/yuka-working.jpg);
    background-repeat: no-repeat;
    background-position: 55% 50%;
    background-size: cover;
    mix-blend-mode: multiply;
    border-top: 0.5px solid var(--accentcolor);
    border-bottom: 0.5px solid var(--headercolor);
}
#companytop-photo .centercolumn {
    height: 100%;
    position: relative;
}
#companytop-photo p {
    position: absolute;
    top: 230px;
    left: -80px;
    color: var(--white);
    font-family: var(--roundfont);
    font-weight: 500;
    font-size: 64px;
    line-height: 1.0;
    text-shadow:2px 2px 0 var(--accentcolor), -2px -2px 0 var(--accentcolor),
    -2px 2px 0 var(--accentcolor), 2px -2px 0 var(--accentcolor),
    0px 2px 0 var(--accentcolor),  0 -2px 0 var(--accentcolor),
    -2px 0 0 var(--accentcolor), 2px 0 0 var(--accentcolor);
}
#companytop-text {
    background-color: var(--paleyellowgreen);
    color: var(--white);
    font-family: var(--roundfont);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.9;
    padding-block: 25px;
}

/* 企業研修等section  */
.comproundblock {
    width: 100%;
    border: 2px solid var(--headercolor);
    border-radius: 8px;
    padding-inline: 30px;
    padding-bottom: 15px;
    margin-top: 80px;
}
.comproundblock:first-child {
    margin-top: 0;
}
.comproundblock h3 {
    width: fit-content;
    height: fit-content;
    padding-block: 5px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 30px;
    border: 2px solid var(--headercolor);
    border-radius: 1000px;
    background-color: var(--palegreenpale);
    margin-left: -15px;
    margin-top: -18px;
}
#training ul li:last-child {
    text-align: right;
    list-style-type: none;
}
.compbigtextp-maincolor {
    color: var(--maincolor);
    font-size: 1.25rem;
    margin-top: 20px;
    text-align: right;
}
.compsec .postscript {
    color: var(--accentcolor);
    font-size: 0.75rem;
}

/* 代表紹介section  */
#yuka-intro .counselorplofcontainer {
    border: 1px solid var(--headercolor);
    width: 100%;
    padding: 10px 30px 60px 30px;
}
#yuka-intro h3.counselorname {
    color: var(--maincolor);
}
#yuka-intro .plofphoto {
    width: 300px;
    height: 300px;
}
#yuka-intro .plofaddtext {
    text-align: center;
    margin-top: 40px;
}

.compminiblockheader {
    font-family: var(--textfont);
    font-size: 16px;
    line-height: 1.0;
    width: fit-content;
    padding: 5px 15px 3px 15px;
    border: 1px solid var(--headercolor);
}

#yuka-career ul {
    color: var(--accentcolor);
    font-size: 0.875rem;
    padding: 15px 30px;
    border: 1px dashed var(--headercolor);
    max-width: 600px;
    margin-inline: auto;
}
#yuka-career ul li {
    margin-left: 1em;
}
#specialty-therapy {
    max-width: 600px;
    padding: 30px;
    background-color: var(--palegreenpale);
    margin-inline: auto;
}
#specialty-therapy h5 {
    font-family: var(--textfont);
    font-size: 1rem;
    text-align: center;
}


/* 理念section  */
#philosophy {
    padding-top: 80px;
}
#philosophy h2 {
    width: 100%;
    background: linear-gradient(90deg, rgba(170, 212, 123, 0) 0%, #AAD47B 50%, rgba(170, 212, 123, 0) 100%);
    padding-block: 3px;
    margin-top: 177px;
}
#philosophy span::before {
    content: '';
    display: block;
    width: 180px;
    height: 173px;
    margin-top: -187.5px;
    background-image: url(../images/gradlinelogo03.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    margin-inline: auto;
    margin-bottom: 15px;
}
#philosophy span {
    display: block;
    width: 100%;
    background-color: var(--white);
    line-height: 1.0;
    padding-block: 15px;
}
#philosophy p {
    margin-top: 40px;
    margin-inline: 15px;
}
#philosophy p:first-child {
    margin-top: 60px;
}
#philosophy img {
    display: block;
    width: 480px;
    height: 480px;
    mix-blend-mode: multiply;
    -webkit-filter: opacity(80%);
    filter: opacity(80%);
    margin-inline: auto;
    margin-top: 20px;
}

/* 対応可能な地域section  */
#availablecase h2 {
    margin-bottom: 40px;
}
#availablecase ul {
    margin-inline: auto;
    width: fit-content;
}
#availablecase ul li {
    width: fit-content;
    margin-left: 1em;
    color: var(--accentcolor);
}

/* 対応可能な内容section  */
#availablecase .centercolumn {
    margin-top: 100px;
}
#availableaddtext {
    text-align: center;
    margin-top: 40px;
}

/* お問い合わせボタンsection  */
#inquirybtnsect p {
    font-size: 1.25rem;
    color: var(--accentcolor);
    text-align: center;
    margin-top: 120px;
}
#inquirybtn {
    width: 280px;
    height: 50px;
    background: var(--backgroundbeige);
    border: 1px solid var(--maincolor);
    box-shadow: var(--dropshadow-yellow448);
    font-family: var(--roundfont);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.0;
    letter-spacing: normal;
    text-align: center;
    color: var(--maincolor);
    display: flex;
    margin-inline: auto;
    margin-top: 40px;
    margin-bottom: 120px;
}
#inquirybtn svg {
    fill: currentColor;
    margin-left: 8px;
}
#inquirybtn a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        color: var(--maincolor);
        transition:all 0.15s;
}
#inquirybtn a:hover {
    color: var(--white);
}
#inquirybtn:hover {
    background-color: var(--linkhovercolor);
    border: 1px solid var(--white);
    color: var(--white);
    box-shadow: 4px 4px 8px rgba(245, 155, 120, 0.4);;
    transition:all 0.15s;
}

/*
    特定商取引法に基づく表記.html
*/
.legal_info {
    padding-top: 140px;
    padding-bottom: 200px;
}
.legal_info p {
    margin-bottom: .5rem;
}
.legal_info h2 {
    text-align: center;
}
.legal_info h3 {
    margin-bottom: 5px;
    margin-top: 40px;
}
.legal_info .postscript {
    font-size: 1rem;
    margin-left: 1rem;
}
.legal_info a {
    text-decoration: underline;
}
#mailadress {
    width: 257px;
    height: 19px;
}
#phonenumber {
    width: 137px;
    height: 14px;
}



/* --------------------------------------------------- 
        タブレット対応
------------------------------------------------------*/
@media (min-width: 701px) and (max-width: 1030px) {

    /* 比較section 1 */
    .comparecontainer {
        position: relative;
        height: max-content;
    }
    p.compare-left {
        margin-inline: 0px;
    }
    p.compare-right {
        position: relative;
        margin-inline: 0px;
        text-align: right;
        margin-top: 20px;
    }
    img.compare-left {
        position: relative;
        margin-top: 10px;
    }
    img.compare-right {
        position: relative;
        margin-top: 10px;
    }

    /* 比較section2  */
    #plobrem02 .comparecontainer {
        margin-top: 60px;
    }
    #plobrem02 .container800 {
        margin-top: 80px;
    }
    .orangegrad {
        padding-bottom: 60px;
        margin-top: 20px;
    }
    #orangegrad-text {
        font-size: 1rem;
    }
    .orangegrad img {
        width: 305px;
        height: 270px;
        margin-top: 20px;
    }

    /* もっと身近にsection */
    #kokage {
        background-position: 60% 50%;
        background-size: cover;
        text-align: center;
    }

   /* Points section  */
   section#calmtree-points .beigemaindiv {
    overflow: hidden;
}
    #point1, #point2, #point3 {
        margin-top: 100px;
        padding-bottom: 40px;
        border-bottom: none;
    }
    #point1-bgimg, #point2-bgimg, #point3-bgimg {
        position: absolute;
        top: -70px;
        right: -50px;
        width: 282px;
        height: 250px;
    }
    .textcontainer{
        position: relative;
        max-width: 100%;
        z-index: 3;
    }
    .textcontainer h3 {
        max-width: 70%;
    }
    .textcontainer p.mt-m,
    .textcontainer p.mt60 {
        padding-inline: 1rem;
    }
    .pointimgcontainer {
        margin-left: 0;
        margin-inline: auto;
    }

    p.fukidashi {
        font-size: 0.875rem;
    }
    #point2-bgimg {
        position: absolute;
        left: auto;
        right: -50px;
    }
    #point2 .pointimgcontainer img {
        position: absolute;
        left: 0px;
    }
    #fuki2-1 {
        margin-left: 70px;
    }
    #fuki2-2 {
        margin-left: 105px;
    }
    #point3 p.fukidashi  {
        width: 260px;
    }

    /* 続けやすいsection  */
    #continuable {
        padding-top: 140px;
        padding-bottom: 30px;
    }
    #continuable h2 {
        margin-bottom: 60px;
    }
    p#piechartcontainer{
        width: 480px;
        aspect-ratio: 138/103;
        margin-inline: auto;
    }
    #continuable-p1 {
        margin-top: 0;
    }
    #continuable-p2 {
        margin-top: 10px;
    }

 /* カウンセラー紹介section  */
    #counselors h2 {
        margin-top: 70px;
    }
    .counselorplofcontainer {
        width: 100%;
        padding: 10px 15px 40px 15px;
    }
    .counselorplofcontainer .frame-left {
        width: 100%;
        min-width: fit-content;
    }
    .counselorplofcontainer .frame-right {
        width: 100%;
        margin-top: 60px;
    }
    h3.counselorname {
        border: 1px solid var(--headercolor);
        background-color: var(--palegreenpale);
        height: 50px;
        font-size: 1rem;
        display: flex;
        align-items: center;
        padding-left: 40px;
        padding-bottom: 0px;
        margin-left: 10px;
        margin-bottom: 40px;
        margin-top: 20px;
    }
    h3.counselorname::before {
        margin-left: 0px;
        left: -20px;
        -webkit-filter: opacity(100%);
        filter: opacity(100%);
    }
    .counselormessage {
        font-size: 0.875rem;
        letter-spacing: normal;
    }
    ul.fields li {
        padding: 8px 15px 5px 15px;
        line-height: 1.1;
        font-size: 14px;
    }
    ul.fields li:last-child {
        font-size: 12px;
    }
    #counselors .postscript {
        margin-left: 1rem;
        margin-right: 0;
        font-size: 12px;
    }


    /* 料金section */
    #fee h2 {
        margin-top: 20px;
    }
    .feecontainer {
        width: 480px;
        margin-inline: auto;
    }
    #familycounseladdtext {
        max-width: 480px;
        margin-inline: auto;
    }

    /* 支払い方法section */
    div#cancellpolicy {
        padding: 15px;
        margin-top: 40px;
    }
    div#cancellpolicy h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    /* 知っておいていただきたいことsection  */
    #pleaseknow .beigemaindiv {
        padding-bottom: 80px;
    }
    #pleaseknow .twoframe {
        width: 100%;
    }

    /* slickの調整 */
    #customervoice .slider {
        width: 480px;
        margin-top: 60px;
        margin-inline: auto;
        position: relative;
    }
    #customervoice .slider .slider-item {
        height: 360px;
    }
    /* FAQ section  */
    #faq .wrapper {
        padding-inline: 30px;
    }

     /* 予約ボタンBIG section  */
    #reservbtn-big {
        padding-top: 110px;
        padding-bottom: 80px;
    }

    /* 法人トップsection  */

    .compsec h2.iconheader {
        justify-content: flex-start;
    }
    .compsec .centercolumn {
        width: 100%;
        padding-inline: 15px;
    }
    #companytop-photo {
        height: 360px;
        background: linear-gradient(113deg, rgba(0, 148, 153, 0.9) 0.24%, rgba(0, 148, 153, 0) 71.57%),url(../images/yuka-working.jpg);
        background-repeat: no-repeat;
        background-position: 55% 50%;
        background-size: cover;
        mix-blend-mode: multiply;
    }
    #companytop-photo p {
        position: absolute;
        top: 160px;
        left: calc( 50% - 200px);
        font-weight: 400;
        font-size: 32px;
    }
    #companytop-text {
        font-size: 1rem;
        line-height: 1.5;
        padding-block: 20px;
        padding-inline: 25px;
    }
    /* 企業研修等section  */
    .compsec .postscript {
        margin-inline: 1rem;
    }

}

/* --------------------------------------------------- 
        スマートフォン対応
------------------------------------------------------*/
@media (max-width: 700px) {

    /*
        仮公開中 表示
    ---------------------- */
    #underconstruction {
        right: 0;
        left: 0;
        margin: auto;
    }
    #underconstruction #notice {
        font-size: 32pt;
    }

    /* 予約ボタンsection */
    section.reservbtn-sec {
        padding-bottom: 90px;
    }
    #reservbtn-sec01 {
        padding-top: 60px;
    }
    #reservbtn-sec02 {
        margin-top: -20px;
    }
    #reservbtn-sec03 {
        padding-top: 90px;
    }


    /* index-top section */
    .index-topsect {
        background: transparent;
    }
    .index-topsect h2 {
        width: 100%;
        font-size: 1.25rem;
        line-height: 1.5;
        margin-top: 30px;
        letter-spacing: normal;
    }
    .index-topsect .top-p1 {
        font-size: 0.8125rem;
        margin-top: 190px;
    }
    .index-topsect .top-p2 {
        font-size: 0.9375rem;
        /* letter-spacing: 0.03em; */
        margin-top: 35px;
    }
    .topbtmlink {
        font-size: 0.875rem;
    }

    .toptext .reservbtn01 {
        display: none;
    }
    #top-reservbtn02 {
        display: block;
        position: absolute;
        bottom: -80px;
        right: 15px;
        text-align: center;
        color: var(--palegreenpale);
    }
    #top-reservbtn02 svg {
        fill: currentColor;
        margin-left: 7px;
        width: 64px;
        height: 50px;
        margin-top: 8px;
    }
    #top-reservbtn02 a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--palegreenpale);
        background: var(--accentcolor);
        border-radius: 50%;
        border: 1px solid var(--palegreenpale);
        width: 100px;
        height: 100px;
        text-align: center;
        transition:all 0.3s;
        -webkit-filter: drop-shadow(var(--dropshadow-green448));
        filter: drop-shadow(var(--dropshadow-green448));
    }
    #top-reservbtn02 a:hover {
        background-color: var(--linkhovercolor);
        color: var(--white);
        border: 1px solid var(--white);
        -webkit-filter: drop-shadow(var(--dropshadow-yellow448));
        filter: drop-shadow(var(--dropshadow-yellow448));
    }
    #top-reservbtn02 {
        font-family: var(--roundfont);
        font-size: 18px;
        line-height: 1.0;
        letter-spacing: 0.05em;
        margin-top: 5px;
    }

    .toplogocut img {
        position: absolute;
        top: 0;
        right: -80px;
        -webkit-clip-path: url(#svgPath);
        clip-path: url(#svgPath);
        /* 大きさを変更 */
        width: 379px;
        height: 364px;
        object-fit: cover;
        object-position: 55% 50%;
        aspect-ratio: 1188 / 950;
    }


    /* 比較section 1 */
    .comparecontainer {
        position: relative;
        height: max-content;
    }
    p.compare-left {
        margin-inline: 0px;
    }
    p.compare-right {
        position: relative;
        margin-inline: 0px;
        text-align: right;
        margin-top: 20px;
    }
    img.compare-left {
        position: relative;
        margin-top: 10px;
        width: 126px;
        height: 124px;
    }
    img.compare-right {
        position: relative;
        margin-top: 10px;
        width: 126px;
        height: 124px;
    }
    #plb01-btmtext {
        margin-top: 40px;
    }

    /* 比較section2  */
    #plobrem02 .comparecontainer {
        margin-top: 60px;
    }
    #plobrem02 .container800 {
        margin-top: 80px;
    }
    .orangegrad {
        padding-bottom: 60px;
        margin-top: 20px;
    }
    #orangegrad-text {
        font-size: 1rem;
    }
    .orangegrad img {
        width: 305px;
        height: 270px;
        margin-top: 20px;
    }

    /* もっと身近にsection */
    #kokage {
        background-position: 60% 50%;
        background-size: cover;
    }

    /* Points section  */
    section#calmtree-points .beigemaindiv {
        overflow: hidden;
    }
    #point1, #point2, #point3 {
        margin-top: 100px;
        padding-bottom: 40px;
        border-bottom: none;
    }
    #point1-bgimg, #point2-bgimg, #point3-bgimg {
        position: absolute;
        top: -70px;
        right: -120px;
        width: 282px;
        height: 250px;
    }
    .textcontainer h3 {
        max-width: 240px;
    }
    .textcontainer p.mt-m,
    .textcontainer p.mt60 {
        padding-inline: 1rem;
    }
    .pointimgcontainer {
        margin-left: 0;
    }
    p.fukidashi {
        font-size: 0.875rem;
    }
    #point2-bgimg {
        position: absolute;
        left: auto;
        right: -120px;
    }
    #point2 .pointimgcontainer img {
        position: absolute;
        left: 0px;
    }
    #fuki2-1 {
        margin-left: 70px;
    }
    #fuki2-2 {
        margin-left: 105px;
    }
    #point3 p.fukidashi  {
        width: 260px;
    }

    /* 続けやすいsection  */
    #continuable {
        padding-top: 140px;
        padding-bottom: 30px;
    }
    #continuable h2 {
        margin-bottom: 60px;
    }
    img#piechart {
        width: 268px;
        height: 197px;
        aspect-ratio: 138/103;
    }
    p#piechartcontainer{
        margin-left: calc( 50% - 120px);
    }
    #continuable-p1 {
        margin-top: 0;
    }
    #continuable-p2 {
        margin-top: 10px;
    }
    
    /* カウンセリングについてsection  */
    #aboutcounseling .mklist {
        margin-left: 1rem;
    }
    #aboutcounseling .postscript {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .postscript span {
        margin-left: 0;
        font-size: 0.75rem;
    }

    /* カウンセラー紹介section  */
    #counselors h2 {
        margin-top: 70px;
    }
    .counselorplofcontainer {
        width: 100%;
        padding: 10px 15px 40px 15px;
    }
    .counselorplofcontainer .frame-left {
        width: 100%;
        min-width: fit-content;
    }
    .counselorplofcontainer .frame-right {
        width: 100%;
        margin-top: 60px;
    }
    h3.counselorname {
        border: 1px solid var(--headercolor);
        background-color: var(--palegreenpale);
        height: 50px;
        font-size: 1rem;
        display: flex;
        align-items: center;
        padding-left: 40px;
        padding-bottom: 0px;
        margin-left: 10px;
        margin-bottom: 40px;
        margin-top: 20px;
    }
    h3.counselorname::before {
        margin-left: 0px;
        left: -20px;
        -webkit-filter: opacity(100%);
        filter: opacity(100%);
    }
    .plofphoto {
        width: 150px;
        height: 150px;
    }
    .counselormessage {
        font-size: 0.875rem;
        padding: 0px 15px 20px 15px;
        letter-spacing: normal;
    }
    ul.fields li {
        padding: 8px 15px 5px 15px;

        line-height: 1.1;
        font-size: 14px;
    }
    ul.fields li:last-child {
        font-size: 12px;
    }
    #counselors .postscript {
        margin-left: 1rem;
        margin-right: 0;
        font-size: 12px;
    }

    /* カウンセリングの流れsection */
    .flowcontainer {
        width: 100%;
    }
    .flowblock {
        width: 100%;
        padding: 0 15px 30px 15px;
    }
    div#step1::before, div#step2::before,div#step3::before,div#step4::before {
        margin-left: 0px;
    }
    .flowblock h3 {
        font-size: 0.9375rem;
        margin-bottom: 10px;
    }
    .flowblock p {
        font-size: 0.75rem;
    }
    .flowblock img.flowicon {
        margin-top: 25px;
        margin-bottom: 15px;
    }
    #counselingflow .beigemaindiv {
        padding-bottom: 50px;
    }

    /* 料金section */
    #fee h2 {
        margin-top: 20px;
    }
    .feeminiblock th, .feeminiblock td {
        font-size: 0.75rem;
        letter-spacing: 0.02em;
    }
    #keijifeetext {
        font-size: 0.625rem;
    }
    #feeframe02 p.postscript:nth-child(1) {
        font-size: 0.75rem;
        margin-top: 10px;
    }

    /* 支払い方法section */
    div#cancellpolicy {
        width: 100%;
        padding: 15px;
        margin-top: 40px;
    }
    div#cancellpolicy h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    /* 受付時間section  */
    table#hourstable {
        width: 100%;
    }
    table#hourstable th, table#hourstable td {
        padding-block: 10px;
        font-size: 0.875rem;
    }
    .centercolumn p {
        max-width: 100%;
    }

    /* 知っておいていただきたいことsection  */
    #pleaseknow .beigemaindiv {
        padding-bottom: 80px;
    }
    #pleaseknow .twoframe {
        width: 100%;
    }

    /* クライアントの声section  */
    #customervoice .beigemaindiv {
        padding-bottom: 60px;
    }
    #customervoice .slider {
        margin-top: 60px;
    }

    /* FAQ section  */
    #faq h2 {
        margin-top: 40px;
    }
    .faqblock p {
        margin-left: 42px;
    }

    /* クロージングsection  */
    #closing img {
        display: block;
        width: 200px;
        height: 200px;
    }

    /* 予約ボタンBIG section  */
    #reservbtn-big {
        padding-top: 110px;
        padding-bottom: 120px;
    }
    #reservbtn-big .reservbtn01 {
        width: 300px;
        height: 50px;
        font-size: 20px;
    }
    #reservaddtext {
        margin-top: 60px;
    }
    #reservaddtext p {
        /* text-align: left; */
        font-size: 0.75rem;
        margin-top: 15px;
    }

    /* 法人トップsection  */

    .compsec h2.iconheader {
        justify-content: flex-start;
    }

    .compsec .centercolumn {
        width: 100%;
        padding-inline: 15px;
    }
    #companytop-photo {
        width: 100%;
        height: 180px;
        background: linear-gradient(113deg, rgba(0, 148, 153, 0.9) 0.24%, rgba(0, 148, 153, 0) 71.57%),url(../images/yuka-working.jpg);
        background-repeat: no-repeat;
        background-position: 55% 50%;
        background-size: cover;
        mix-blend-mode: multiply;
    }
    #companytop-photo p {
        position: absolute;
        top: 80px;
        left: calc( 50% - 100px);
        font-weight: 400;
        font-size: 24px;
    }
    #companytop-text {
        font-size: 0.875rem;
        line-height: 1.5;
        padding-block: 20px;
        padding-inline: 25px;
    }

    /* 企業研修等section  */
    .comproundblock {
        padding-inline: 15px;
        padding-bottom: 20px;
        margin-top: 35px;
    }
    .comproundblock h3 {
        margin-left: 0;
    }
    .comproundblock ul li, .comproundblock p {
        font-size: 0.875rem;
    }
    p.compbigtextp-maincolor {
        font-size: 1.125rem;
    }
    .compsec .postscript {
        margin-inline: 1rem;
    }

    /* 代表紹介section  */
    #yuka-intro .counselorplofcontainer {
        padding: 10px 15px 20px 15px;
    }
    #yuka-intro .plofphoto {
        width: 150px;
        height: 150px;
    }
    #yuka-intro .plofaddtext {
        margin-top: 20px;
    }
    #yuka-career ul {
        padding: 5px 15px;
        max-width: calc( 100% - 70px );
        margin-inline: auto;
    }

    /* 理念section  */
    #philosophy h2 {
        margin-top: 102px;
    }
    #philosophy span::before {
        width: 102px;
        height: 98px;
        margin-top: -112.5px;
    }
    #philosophy p:first-child {
        margin-top: 40px;
    }
    #philosophy img {
        width: 300px;
        height: 300px;
        margin-top: 0;
    }

    /* 対応可能な内容section  */
    #availablecase .centercolumn {
        margin-top: 80px;
    }
    #availablecase h2 {
        margin-bottom: 30px;
    }
    #availablecase ul {
        margin-left: 1rem;
    }
    #availableaddtext {
        text-align: left;
        font-size: 0.875rem;
        margin-top: 40px;
    }

    /* お問い合わせボタンsection  */
    #inquirybtnsect p {
        font-size: 1rem;
        text-align: left;
        margin-top: 40px;
    }
    #inquirybtn {
        margin-top: 80px;
        margin-bottom: 100px;
    }

    body {
        overflow-x: hidden;
    }

}