@charset "UTF-8";

/*********************************************************
					　　　　初期設定
*********************************************************/


html {
    font-family: "Zen Maru Gothic", sans-serif;
    color: #333;
    line-height: 2.2;
    font-weight: 500;
    font-style: normal;
    font-size: min(1.82vw,22px);
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

main {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.inner {
    width: 90%;
    max-width: 1500px;
    height: auto;
    margin: 0 auto;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

.line_break {
    display: inline-block;
}

.table {
    display: table;
}

.table_sp {
    display: none;
}

.sp_480 {
    display: none;
}

/*********************************************************
					　　　　ヘッダー
*********************************************************/

.over {
    position: relative;
    overflow: hidden;
    padding-bottom: 3vw;
    margin-bottom: -3vw;
    width: 100%;
}

header {
    position: relative;
    isolation: isolate;
    width: 100%;
    z-index: 10;
}
header::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%,50%) translateZ(0);

    /* ブラウザに「描画を別枠で準備して」と伝える */
    will-change: transform;

    width: 110%;
    height: 6vw;
    background: url(../img/back_0.webp) no-repeat center / cover;
    z-index: -1;
}

h1 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-200%);
    color: #fff;
}

.head_back {
    background: #fff;
}

.head {
    position: relative;
    display: flex;
    padding: 1em;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1920px;
    height: auto;
    max-height: 100px;
    background: #fff;
    margin: 0 auto;
    line-height: 1.5;
    z-index: 1;
}

.title a {
    display: flex;
    align-items: center;
    gap: .5em;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.title img {
    max-width: 60px;
    width: 5vw;
    height: auto;
}
.main_title {
    font-size: min(1.82vw,28px);
    line-height: 1.1;
    padding-bottom: .2em;
}
.sub_title {
    font-size: min(1.3vw,16px);
    line-height: 1.1;
}
.titile_flex {
    display: block;
    text-align: center;
}

nav {
    display: flex;
    color: #006564;
    width: 45%;
    justify-content: space-between;
}

.menu_01 {
    width: 25%;
}
.menu_02 {
    width: 25%;
}
.menu_03 {
    width: 25%;
}

nav ul li {
    text-align: center;
}

nav a {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 272px;
    text-align: center;
    font-size: min(1.43vw,20px);
    transition: .5s;
    z-index: 2;
}
nav a::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,80%);
    font-size: 18px;
    width: 100%;
    color: #aae8dc;
    font-size: min(1.43vw, 20px);
    line-height: 1;
    z-index: 1;
}
nav ul:nth-child(1) li a::before {
    content: "First-time users";
    font-weight: 400;
}
nav ul:nth-child(2) li a::before {
    content: "Counseling";
    font-weight: 400;
}
nav ul:nth-child(3) li a::before {
    content: "Counselor";
    font-weight: 400;
}
nav a:hover {
    transform: scale(1.1);
}

.resernation {
    border: solid min(.3vw,4px) #006564;
    border-radius: 2em;
    padding: .4em 2.5em .3em 1em;
    color: #006564;
    transition: .5s;
    font-size: min(1.56vw,20px);
}
.resernation:hover {
    transform: scale(1.1);
}
.resernation a {
    position: relative;
}
.resernation a::before {
    position: absolute;
    content: "▶";
    top: 0;
    right: 0;
    transform: translateX(150%);
}


/*********************************************************
					　　　　FV
*********************************************************/

.slider-wrap {
     filter: drop-shadow(0px 5px 10px #8E715480);
}

.fv {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: calc(100vh - 120px);
    z-index: 10;

    -webkit-mask: url("../img/mask.svg#wave-mask");
    mask: url("../img/mask.svg#wave-mask");
    
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;

    /* ▼ Safariの描画バグ対策に追加 */
    will-change: transform, opacity;
}

.splide {
    width: 100%;
    height: 100%;
}

.splide__track {
    height: 100%;
}

.splide__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    max-height: calc(100vh - 120px);
}

.splide__slide {
    flex: 0 0 100%;
    height: auto;
    transition: opacity 2s ease-in-out !important;
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sns {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(20%,-60%);
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 8vw;
    max-width: 100px;
    height: auto;
}
.sns img {
    width: 100%;
    height: auto;
    transition: .5s;
}
.sns img:hover {
    transform: scale(1.1);
}

.inner_max {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    width: 80%;
    max-width: 1920px;
    height: 100%;
}

.title_mozi {
    position: absolute;
    top: 10%;
    left: 0;
    width: 50%;
    max-width: 600px;
    text-align: center;
}
.title_mozi img {
    width: 100%;
    padding-bottom: 1em;
}
.title_mozi::before {
    position: absolute;
    content: "";
    top: 0%;
    left: 0%;
    transform: translate(-25%,-33%);
    width: 200%;
    height: auto;
    aspect-ratio: 2 / 1;
    z-index: -1;
    background: url(../img/back_05.webp) no-repeat center / contain;
}

.sub_copy {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: min(2.08vw,25px);
    color: #4E342E;
    line-height: 1.5;
}
.adress {
    position: absolute;
    top: 10%;
    right: 0;
    width: 17vw;
    height: 17vw;
    max-width: 250px;
    max-height:  250px;
    line-height: 1.5;
    text-align: center;
    align-content: center;
    background: rgba(230, 165, 75, 0.8);
    color: #fff;
    border-radius: 50%;
    box-shadow: 
        inset 0 0 0 min(1vw,10px) rgba(230, 165, 75, 0.8), 
        inset 0 0 0 min(1.2vw,12px) rgba(255, 255, 255, .8);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gunma {
    font-size: min(2.34vw,35px);
    padding-bottom: .5em;
}
.anno {
    font-size: min(1.3vw, 16px);
}

.sub_copy02 {
    position: absolute;
    bottom: 15%;
    right: 5%;
    text-align: center;
    color: #A27B6D;
    line-height: 1.5;
}
.sub_copy02::before {
    position: absolute;
    content: "";
    top: 0%;
    left: 0%;
    transform: translate(-25%,-33%);
    width: 200%;
    height: auto;
    aspect-ratio: 2 / 1;
    z-index: -1;
    background: url(../img/back_04.webp) no-repeat center / contain;
}

/*********************************************************
					　　セクション01
*********************************************************/

.sec {
    padding:min(10vw,150px) 0 min(20vw,300px);
}

/* みどり背景 */
.back01 {
    position: relative;
    background: url(../img/back_00.webp) no-repeat center /cover;
    z-index: 1;
}

.inner_flex {
    display: flex;
    justify-content: space-between;
}
.sec_01_cont {
    width: 49%;
}
.cont_big {
    position: relative;
    display: inline-block;
    font-size: min(2.86vw,35px);
    margin-top: 1.5em;
    z-index: 5;
}
.cont_big::before {
    position: absolute;
    content: "";
    background: rgba(230, 165, 75, 0.7);
    display: block;
    width: 100%;
    height: .8em;
    bottom: 10%;
    left: 0;
    z-index: -1;
}

/* リンク */
.this {
    display: flex;
    justify-content: end;
    align-items: center;
    color: #006564;
    margin-top: 2em;
}
.this p {
    margin-right: 1.5em;
    font-size: min(2.08vw,25px);
}
.arrow {
    position: relative;
    display: block;
    width: 6vw;
    height: 6vw;
    max-width: 80px;
    max-height: 80px;
    border-radius: 50%;
    background: #006564;
}
.arrow::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 50%;

    width: min(2vw,20px);
    height:  min(2vw,20px);
    transform: translate(30%,-50%) rotate(45deg);
    border-top: min(.3vw,3px) solid #fff;
    border-right: min(.3vw,3px) solid #fff;
    transition: .5s;
}
.this:hover .arrow::before {
    transform: translate(60%,-50%) rotate(45deg);
}

/* 画像 */
.back01_img {
    position: relative;
    width: 44%;
}
.back01_img img {
    width: 80%;
    max-width: 360px;
}
.img01 {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transform: translateY(10%);
    transition: 1s;
}
.img02 {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(10%);
    transition: 1s .5s;
    opacity: 0;
}
.sec.active .img01,
.sec.active .img02  {
    opacity: 1;
    transform: translateY(0);
}

/*********************************************************
					　　特徴
*********************************************************/

.sec00 {
    padding: min(10vw,150px) 0;
}
.inner_flex02 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transform: translateY(10%);
    opacity: 0;
    z-index: 10;
}
.back02.active .inner_flex02 {
    animation: white 1s forwards;
}

@keyframes white {
  0% {
    transform: translateY(10%);
    opacity: 0;
	}
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.back02 {
    position: relative;
}
.back02::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    transform: translateY(-95%);
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 1;
    background: url(../img/back_01.webp) no-repeat center /contain;
    z-index: 8;
    pointer-events: none;
}
.moyou {
    position: absolute;
}
.moyou01 {
    top: -10%;
    right: -10%;
    width: 30%;
    max-width: 570px;
    z-index: 9;
}
.moyou02 {
    bottom: 20%;
    left: -15%;
    width: 35%;
    max-width: 670px;
}
.moyou03 {
    bottom: 5%;
    left: 5%;
    width: 20%;
    max-width: 380px;
}

/* 画像 */
.back02_img {
    position: relative;
    width: 44%;
}
.back02_img img {
    width: 90%;
    filter: drop-shadow(0px 5px 10px #8E715480);
    will-change: transform, opacity;
}
.back02_img02 {
    position: absolute;
    bottom: -45%;
    right: -10%;
    width: 75%;
}

.sec_02_cont {
    position: relative;
    text-align: justify;
    width: 49%;
    z-index: 9;
}

h3 {
    font-size: min(5.2vw,60px);
    color: #03a69240;
    line-height: 1;
    font-weight: 400;
}
h4 {
    font-size: min(2.6vw,40px);
    color: #006564;
    padding-bottom: 1.5em;
    line-height: 1.5;
}
.left {
    transform: translateX(-.5em);

}
.orange,
.green {
    position: relative;
    margin-right: .2em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.orange::before,
.green::before {
    position: absolute;
    content: "";
    display: inline;
    bottom: -15%;
    left: 0;
    right: 0;
    height: .8em;
    z-index: -1;
}
.orange::before {
    background: rgba(230, 165, 75, 0.7);
}
.green::before {
    background: rgba(57, 234, 170, 0.5);
}

/* トップボタン */
.top_botton {
		position: fixed;
		bottom: 0;
		right: 0;
		transform: translate(-50%,-50%) scale(1);
		transition: .3s ease;
		width: 6vw;
		height: 6vw;
		max-width: 70px;
        min-width: 40px;
		max-height: 70px;
        min-height: 40px;
		opacity: 0;
		z-index: 100;
}
.top_botton img {
    width: 100%;
    height: 100%;
}
.top_botton:hover {
    transform: translate(-50%,-50%) scale(1.1);
}
.top_botton.show {
    opacity: 1;
}

/*********************************************************
					　　カウンセラー
*********************************************************/

.back03 {
    position: relative;
    background: url(../img/back_02.webp) no-repeat center / cover;
    border-radius: 8em;
    margin-bottom: min(10vw,150px);
    z-index: 5;
}

.sec_03_cont {
    width: 53%;
    text-align: justify;
    transform: translateY(10%);
    opacity: 0;
}
.back03.active .sec_03_cont {
    animation: white 1s forwards;
}

@keyframes white {
  0% {
    transform: translateY(10%);
    opacity: 0;
	}
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.mess {
    font-size: min(2.34vw,30px);
}

.back03_img {
    display: block;
    width: 38%;
    height: auto;
    transform: translateY(10%);
    opacity: 0;
}
.back03_img img {
    will-change: transform, opacity;
    width: 100%;
    border-radius: 3em;
    filter: drop-shadow(0px 5px 10px #8E715480);
}
.back03.active .back03_img {
    animation: white01 1s .5s forwards;
}

@keyframes white01 {
  0% {
    transform: translateY(10%);
    opacity: 0;
	}
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

/*********************************************************
					　　料金案内
*********************************************************/

.back04 {
    position: relative;
}
.white {
    padding: min(5.5vw,100px) min(8vw,150px);
    background: #fff;
    border-radius: 3em;
    transform: translateY(10%);
    opacity: 0;
    filter: drop-shadow(0px 5px 10px #8E715480);
    will-change: transform, opacity;
}
.back04.active .white {
    animation: white 1s forwards;
}

@keyframes white {
  0% {
    transform: translateY(10%);
    opacity: 0;
	}
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.title_c {
    text-align: center;
}

.sub_point {
    color: #006564;
        font-size: min(2.34vw, 30px);
}
.first {
    display: flex;
    justify-content: center;
    margin: 2em auto;
    width: 50%;
    padding: .8em 1.5em;
    border-radius: .5em;
    line-height: 1.2;
    font-size: min(2.34vw, 30px);
    background: #03A69240;
}

/*********************************************************
					　　問い合わせ
*********************************************************/

.back05 {
    display: flex;
    justify-content: right;
}

.inquiry {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1500px;
    padding: 3vw 10vw 3vw 4vw;
    border-radius: 1em;
    background: #f3f4ec;
    justify-content: space-between;
    color: #006564;
    font-size: min(2.34vw, 30px);
    transform: translateX(100%);
}
.back05.active .inquiry {
    animation: inq .8s forwards;
}

@keyframes inq {
  0% {
    transform: translateX(100%);
	}
  100% {
    transform: translateX(5%);
  }
}

.inquiry_this {
    position: relative;
    background: #006564;
    color: #fff;
    border-radius: 2em;
    padding: .5em 3em .5em 1em;
    transition: .5s;
    font-size: min(2.6vw,35px);
}
.inquiry_this::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 10%;
    width: min(2vw, 20px);
    height: min(2vw, 20px);
    transform: translate(30%, -50%) rotate(45deg);
    border-top: min(.3vw, 3px) solid #fff;
    border-right: min(.3vw, 3px) solid #fff;
    transition: .5s;
}
.inquiry_this:hover {
    transform: scale(1.1);
}

/*********************************************************
					　　フッター
*********************************************************/

footer {
    background: #C9E6DD;
    padding: 1.5em 0;
}

.footer_title {
    display: flex;
    justify-content: center;
    margin-bottom: .5em;
}

.copy {
    text-align: center;
    font-weight: 400;
    font-size: min(3.125vw,12px);
}

/*********************************************************
					　トップページSP版
*********************************************************/

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


    /* 初期設定 */

    html {
        font-size: min(3.75vw,18px);
    }

    .pc {
        display: none;
    }
    .sp {
        display: block;
    }

    /* メニュー */

    .title img {
        width: 10vw;
    }

    .titile_flex {
        display: flex;
        align-items: center;
    }

    .nav_sp {
        display: none;
    }
    .main_title {
        font-size: min(5.625vw,24px);
        margin-right: .5em;
    }
    .sub_title {
        font-size: min(3.125vw,16px);
    }

    .navi_sp {
		position: fixed;
		top: 1.5vw;
		right: 1.5vw;
		width: 14vw;
		height: 14vw;
        max-width: 55px;
        max-height: 55px;
		z-index: 110;
		background: #006564;
        border-radius: .5em;
        border: solid 3px #fff;
	}

	.navi_sp span {
		position: relative;
		width: 65%;
		height: min(.8vw,2px);
		background: #fff;
		display: block;
		margin: 0 auto;
		border-radius: 2px;
	}
	.navi_sp span::before,
    .navi_sp span::after{
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        display: block;
        border-radius: 2px;
		transition: 0.2s ease;
    }
    .navi_sp span::before{
        top: max(-2.5vw,-11px);
    }
    .navi_sp span::after{
        bottom: max(-2.5vw,-11px);
    }

    /* バツにする */
	.navi_sp.active span {
		background: transparent; /*opacityにするとほかも消えてしまうから*/
	}
	.navi_sp.active span::before {
		transform: translateY(min(2.6vw,12px)) rotate(-45deg);
	}
	.navi_sp.active span::after {
		transform: translateY(max(-2.5vw,-11px)) rotate(45deg);
	}

    /* メニューを押した後 */
	.nav-sp-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 100;
		visibility: hidden; /*表示しない*/

        /* ▼ 追加：常時、中身を上下左右中央に配置する設定にしておく */
        display: flex;
        justify-content: center;
        align-items: center;

        transition: visibility 0.4s;
	}
	.nav-sp-wrap.active{
        visibility: visible; /*表示する*/
        transition: none;
    }

	/* 背景表示 */
	.nav-back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #fff;
		opacity: 0;
        transition: opacity 0.4s ease;
	}
	.active.nav-sp-wrap .nav-back{
        opacity: 1;
    }

    /* メニュー中身 */
	.navi_botton {
		position: relative;
		width: 100%;
		height: auto;
        font-weight: 600;
        text-align: center;
        opacity: 0;
        transition: opacity 0.4s ease;
        max-height: 100vh;
        overflow-y: auto;

        transition: opacity 0.4s ease;
	}
    .nav-sp-wrap.active .navi_botton {
        opacity: 1;
    }
    .navi_botton li a {
        padding: 10px 0 0;
    }
	.navi_botton li {
		margin: 0 auto min(10vw,50px);
		line-height: 1.5;
	}
    .navi_botton ul:nth-child(1) li {
        width: 3em;
    }
    .navi_botton ul:nth-child(2) li {
        width: 9em;
    }
    .navi_botton ul:nth-child(3) li {
        width: 10em;
    }
    .navi_botton ul:nth-child(4) li {
        width: 8.2em;
    }
    .navi_botton ul:nth-child(5) li {
        width: 14em;
    }


    nav a {
        font-size: min(5vw,20px);
        max-width: initial;
    }
    nav a::before {
        font-size: min(4.37vw,18px);
    }
    .menu_01,
    .menu_02,
    .menu_03 {
        width: 100%;
    }
    nav ul:nth-child(1) li a::before {
        content: "TOP";
        font-weight: 400;
    }
    nav ul:nth-child(2) li a::before {
        content: "First-time users";
        font-weight: 400;
    }
    nav ul:nth-child(3) li a::before {
        content: "Counseling";
        font-weight: 400;
    }
    nav ul:nth-child(4) li a::before {
        content: "Counselor";
        font-weight: 400;
    }
    nav ul:nth-child(5) li a::before {
        content: "Reserve & Inquiry";
        font-weight: 400;
    }
    nav ul:nth-child(5) li {
        margin: 0 auto min(14vw, 70px);
    }

    .sp_sns {
        position: initial;
        flex-direction: initial;
        display: flex;
        transform: initial;
        width: 50%;
        max-width: initial;
        margin: 0 auto;
        justify-content: space-between;
    }
    .sp_sns img {
        width: auto;
        height: 100%;
    }
    .sp_sns a {
        height: 13vw;
        max-height: 80px;
        width: auto;
    }

    /* fv */

    .fv {
        height: 110vw;
        -webkit-mask: url("../img/sp_mask.svg#wave-mask");
        mask: url("../img/sp_mask.svg#wave-mask");
    }

    .inner_max {
        width: 90%;
    }

    .title_mozi {
        top: 8%;
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
    }
    .title_mozi::before {
        width: 300%;
        transform: translate(-35%, -40%);
    }

    .adress {
        width: 33vw;
        max-width: 200px;
        height: 33vw;
        max-height: 200px;
        top: initial;
        bottom: 13%;
    }
    .gunma {
        font-size: min(4.06vw,21px);
    }
    .anno {
        font-size: min(3.125vw,15px);
    }

    .sub_copy {
        font-size: min(3.125vw, 15px);
    }

    .sub_copy02 {
        right: initial;
        left: 0;
        bottom: 20%;
        font-size: min(3.125vw, 15px);
    }

    .orange {
        margin-right: 0em;
    }

    /* アバウト */

    .cont_big {
        font-size: min(5vw,30px);
    }

    .this p {
        margin-right: .5em;
        font-size: min(4.37vw,22px);
    }

    .inner_flex {
        display: block;
    }

    .sec_01_cont {
        width: 100%;
        margin-bottom: 5vw;
    }

    .back01_img {
        display: block;
        width: 100%;
        height: 62vw;
    }
    .img01 {
        top: initial;
        bottom: 0;
    }
    .img02 {
        top: 0;
        bottom: initial;
    }

    .back01_img img {
        width: 55%;
        max-width: 370px;
    }

    .img01 {
        transition: 1s .5s;
    }
    .img02 {
        transition: 1s;
    }


    /* 特徴 */

    h3 {
        font-size: min(9.375vw,40px);
    }

    h4 {
        font-size: min(6.25vw,28px);
    }

    .back02::before {
        transform: scaleX(-1)translateY(-95%);
    }

    .inner_flex02 {
        display: block;
    }
    .sec_02_cont,
    .back02_img {
        width: 100%;
        margin-bottom: 5vw;
    }
    .back02_img02 {
        bottom: -10%;
        right: -30%;
        width: 80%;
    }
    .back02_img img {
        width: 60%;
    }

    .left {
        transform: translateX(0);
    }

    .moyou01 {
        top: 5%;
        right: initial;
        left: -20%;
        width: 60%;
    }
    .moyou02 {
        left: initial;
        right: -15%;
        width: 60%;
    }
    .moyou03 {
        bottom: 5%;
        left: -15%;
        width: 50%;
    }

    /* カウンセラー */

    .back03 {
        border-radius: 3em;
    }

    .sec_03_cont {
        width: 100%;
        margin-bottom: 5vw;
    }

    .mess,
    .sub_point {
        font-size: min(5.625vw,24px);
    }

    .back03_img {
        width: 100%;
        aspect-ratio: 2 / 1;
    }
    .back03_img img {
        filter: drop-shadow(0px 2px 7px #8E715480);
    }

    /* 料金 */

    .white {
        filter: drop-shadow(0px 2px 7px #8E715480);
    }
    
    .first {
        font-size: min(5.625vw,24px);
        width: 100%;
        max-width: 400px;
        padding: .5em 1em;
    }


    /* お問い合わせ */

    .inquiry {
        display: block;
        max-width: 600px;
        border-radius: 3em;
        padding: 4vw 14vw 5vw 5vw;
    }
    .back05.active .inquiry {
        animation: inq .8s forwards;
    }
    @keyframes inq {
    0% {
        transform: translateX(100%);
        }
    100% {
        transform: translateX(10%);
    }
    }
    .inquiry p {
        line-height: 1;
        font-size: min(4.06vw,18px);
        padding: 0 0 1em 2em;
    }

    .inquiry_this {
        display: block;
        width: 100%;
        font-size: min(4.37vw,21px);
        padding: .8em 3em .8em 1.5em;
        line-height: 1.2;
    }
}


/*********************************************************
					　　初めての方へ
*********************************************************/

.sns01 {
    top: 0;
    transform: translate(20%,40%);
}

.fv01 {
    background: url(../img/fv_02.webp?0528) no-repeat bottom / cover;
}

.fv_img {
    position: relative;
    width: 85%;
    max-width: 1920px;
    aspect-ratio: 5 / 3;
    margin: 0 auto;
    max-height: calc(100vh - 200px);
    border-radius: 0 0 2em 2em;
}
.fv_img::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%,99%);
    background: url(../img/top_before.webp) no-repeat bottom / cover;
    width: 100vw;
    height: 6vw;
    z-index: 6;
}

.fv_img img {
    width: 100%;
}
.fv_img h2 {
    position: absolute;
    bottom: 0;
    right: 1%;
    font-size: min(9.765vw,180px);
    transform: translate(0%,10%);
    line-height: .9;
    opacity: 0;
    color: #fff;
    animation: top2 .7s .8s forwards;
}
@keyframes top2 {
  0% {
    transform: translate(0%,10%);
    opacity: 0;
	}
  100% {
    transform: translate(0%,0%);
    opacity: .4;
  }
}

.fv_inner {
    position: absolute;
    width: 85%;
    margin: 0 auto;
    left: 50%;
    bottom: 15%;
    transform: translate(-50%,15%);
    color: #fff;
    filter: drop-shadow(1px 1px 5px #33333390);
    animation: top 1s forwards;
    opacity: 0;
}
@keyframes top {
  0% {
    transform: translate(-50%,15%);
    opacity: 0;
	}
  100% {
    transform: translate(-50%,0%);
    opacity: 1;
  }
}

h5 {
    font-size: min(3.9vw,50px);
}


/*********************************************************
					　　悩み
*********************************************************/

.page_sec {
    padding: min(15vw, 280px) 0 min(14vw, 250px);
}

.page02_back {
    position: relative;
    background: url(../img/back_07.webp) no-repeat bottom / cover;
    width: 100%;
    filter: drop-shadow(0px 5px 10px #8E715480);
    margin-top: 1em;
    z-index: 5;
    will-change: transform, opacity;
}

.page02_back h4 {
    text-align: center;
}

.nayami {
    margin-top: min(7vw,134px);
    margin-bottom: min(14vw,268px);
    display: flex;
    justify-content: space-around;
}

.waku {
    position: relative;
    color: #7A3F33;
    line-height: 2;
}
.waku01 {
    width: 35%;
    max-width: 430px;
    animation: waku 10s infinite;
}
.waku01::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../img/waku_01.webp) no-repeat center / contain;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    filter: drop-shadow(0px 5px 10px #8E715480);
    will-change: transform, opacity;
}
@keyframes waku {
  0% {
    transform: translate(0,0%);
	}
  50% {
    transform: translate(0%,-10%);
 }
  100% {
    transform: translate(0%,0%);
  }
}

.waku02 {
    width: 28%;
    max-width: 370px;
    animation: waku01 10s infinite;
}
.waku02::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../img/waku_02.webp) no-repeat center / contain;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    filter: drop-shadow(0px 5px 10px #8E715480);
    will-change: transform, opacity;
}
@keyframes waku01 {
  0% {
    transform: translate(0,0%);
	}
  50% {
    transform: translate(0%,10%);
 }
  100% {
    transform: translate(0%,0%);
  }
}

.waku03 {
    width: 34%;
    max-width: 450px;
    animation: waku 10s infinite;
}
.waku03::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-45%,-45%);
    background: url(../img/waku_03.webp) no-repeat center / contain;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    filter: drop-shadow(0px 5px 10px #8E715480);
    will-change: transform, opacity;
}
.waku p {
    position: relative;
    text-align: center;
    z-index: 10;
}

.nayami02 {
    display: flex;
    justify-content: center;
    gap: 4em;
    margin-bottom: 10vw;
}
.waku04 {
    width: 34%;
    max-width: 450px;
    animation: waku02 10s infinite;
}
.waku04::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-45%);
    background: url(../img/waku_04.webp) no-repeat center / contain;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    filter: drop-shadow(0px 5px 10px #8E715480);
    will-change: transform, opacity;
}
@keyframes waku02 {
  0% {
    transform: translate(0,0%);
	}
  50% {
    transform: translate(5%,5%);
 }
  100% {
    transform: translate(0%,0%);
  }
}

.waku05 {
    width: 38%;
    max-width: 450px;
    animation: waku03 10s infinite;
}
.waku05::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-45%,-45%);
    background: url(../img/waku_05.webp) no-repeat center / contain;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    filter: drop-shadow(0px 5px 10px #8E715480);
    will-change: transform, opacity;
}
@keyframes waku03 {
  0% {
    transform: translate(0,0%);
	}
  50% {
    transform: translate(-5%,-5%);
 }
  100% {
    transform: translate(0%,0%);
  }
}

.nayami03 {
    color: #fff;
    font-size: min(2.6vw,40px);
    text-align: center;
    filter: drop-shadow(0px 4px 15px #006707);

}

/*********************************************************
					　　違和感
*********************************************************/

.page_sec00 {
    padding: min(18vw, 280px) 0 min(14vw, 250px);
}

.page02_back02 {
    position: relative;
    margin-top: -4em;
    background: url(../img/back_09.webp) no-repeat bottom / cover;
    filter: drop-shadow(0px 5px 10px #8E715480);
    z-index: 3;
    will-change: transform, opacity;
}

.page_flex {
    display: flex;
    gap: 2em;
    justify-content: space-between;
    align-items: center;
    transform: translateY(10%);
    transition: 1s;
    opacity: 0;
}
.page02_back02.active .page_flex,
.page02_back03.active .page_flex {
    transform: translateY(0%);
    opacity: 1;
}

.tree {
    position: relative;
    width: 50%;
    align-content: center;
    z-index: 4;
}
.tree::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    background: url(../img/back_10.webp) no-repeat center / contain;
}
.tree01,
.tree02 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 40%;
    height: auto;
}
.tree01 {
    z-index: 9;
}
.tree02 {
    z-index: 10;
    opacity: 1;
    transition: .5s 2s;
}
.page02_back02.active .tree02 {
    opacity: 0;
}

.tree_cont {
    width: 50%;
    color: #7A3F33;
}
.tree_cont h4 {
    position: relative;
    color: #7A3F33;
    display: inline-block;
    padding-bottom: .8em;
}
.tree_cont h4::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 1.5em;
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translate(150%,-80%);
    background: url(../img/illust_05.webp) no-repeat center / contain;
    opacity: 0;
    transition: 1s .5s;
}
.page02_back02.active .tree_cont h4::before {
    opacity: 1;
    transform: translate(100%,0);
}

.tree_cont p {
    line-height: 3;
}


/*********************************************************
					　　苦手
*********************************************************/

.page_sec01 {
    padding: min(30vw, 440px) 0 min(14vw, 250px);
}

.page02_back03 {
    position: relative;
    margin-top: -11em;
    background: url(../img/back_08.webp) no-repeat bottom / cover;
    z-index: 1;
}
.page02_back03::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 1;
    background: url(../img/grad.webp) no-repeat bottom / cover;
    z-index: 2;
}

.talk_cont {
    width: 50%;
    color: #7A3F33;
    line-height: 3;
    text-align: justify;
}
.talk_cont h4 {
    color: #F29B23;
    padding-bottom: .8em;
}
.talk {
    width: 40%;
    filter: drop-shadow(0px 5px 10px #8E715480);
    will-change: transform, opacity;
}
.talk img {
    width: 100%;
    height: auto;
}

/*********************************************************
					初めての方へSP版
*********************************************************/

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

    /* fv */

    .fv_img {
        width: 95%;
        aspect-ratio: 5 / 6;
    }
    .fv_img::before {
        height: 8vw;
    }

    .fv_inner {
        width: 90%;
        bottom: 9%;
    }

    .fv_inner p {
        text-align: justify;
        line-height: 1.8;
    }

    h5 {
        font-size: min(5vw,29px);
    }

    /* お悩み */
    
    .waku p {
        line-height: 1.8;
    }

    .nayami {
        flex-direction: column;
        margin: 10vw auto min(22vw,92px);
        gap: 3em;
        width: 90%;
        max-width: 480px;
    }
    .waku01 {
        width: 68%;
        max-width: 288px;
    }
    @keyframes waku {
    0% {
        transform: translate(0,0%);
        }
    50% {
        transform: translate(10%,0%);
    }
    100% {
        transform: translate(0%,0%);
    }
    }
    .waku02 {
        display: block;
        margin: 0 0 0 auto;
        width: 56%;
        max-width: 220px;
    }
    .waku02::before {
        transform: translate(-50%, -55%);
    }
        @keyframes waku01 {
    0% {
        transform: translate(0,0%);
        }
    50% {
        transform: translate(-10%,0%);
    }
    100% {
        transform: translate(0%,0%);
    }
    }
    .waku03 {
        width: 68%;
        max-width: 278px;
    }
    .waku03::before {
        transform: translate(-45%, -42%);
    }
    .waku04 {
        display: block;
        margin: 0 0 0 auto;
        width: 72%;
        max-width: 270px;
    }
    .waku04::before {
        transform: translate(-52%, -45%);
    }
    @keyframes waku02 {
    0% {
        transform: translate(0,0%);
        }
    50% {
        transform: translate(-10%,5%);
    }
    100% {
        transform: translate(0%,0%);
    }
    }
    
    .waku05 {
        width: 80%;
        max-width: 315px;
    }
   @keyframes waku03 {
    0% {
        transform: translate(0,0%);
        }
    50% {
        transform: translate(10%,5%);
    }
    100% {
        transform: translate(0%,0%);
    }
    }

    .nayami02 {
        flex-direction: column;
        margin: 6vw auto min(15vw,80px);
        gap: 5.5em;
        width: 90%;
        max-width: 480px;
    }

    .nayami03 {
        font-size: min(4.68vw,20px);
    }

    /* 違和感 */

    .page_sec00 {
        padding: min(34vw, 200px) 0 min(14vw, 250px);
    }

    .page_flex {
        display: block;
    }

    .tree {
        width: 90%;
        margin: 0 auto 10vw;
        aspect-ratio: 2 / 1;
    }
    .tree::before {
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .tree_cont {
        width: 100%;
    }
    .tree_cont p {
        line-height: 2.5;
    }

    /* 話すのが苦手 */

    .page_sec01 {
        padding: min(25vw, 150px) 0 min(18vw, 250px);
    }

    .page02_back03 {
        margin-top: -3em;
    }

    .sp_flex01 {
        display: flex;
        flex-direction: column-reverse;
    }

    .talk_cont {
        width: 100%;
    }
    .talk_cont p {
        line-height: 2.5;
    }

    .talk {
        display: block;
        width: 70%;
        margin:  0 auto;
    }

}

/*********************************************************
					カウンセリング
*********************************************************/

.fv_img02 {
    background: url(../img/fv_03.webp?0528) no-repeat bottom / cover;
}

.page_sec02 {
    padding: min(15vw, 280px) 0 min(17vw, 320px);
}

.page03_back {
    position: relative;
    background: url(../img/back_00.webp) no-repeat bottom / cover;
    width: 100%;
    z-index: 2;
}

.page03_center {
    text-align: center;
    padding-bottom: min(12vw,200px);
}
.page03_center h4 {
    padding-bottom: initial;
}

.page03_inner {
    position: relative;
}

.page03_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    transform: translate(-40%,-10%);
}
.page03_back img {
    width: 100%;
    filter: drop-shadow(0px 5px 10px #8E715480);
}

.page03_img02 {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(10%,100%);
    width: 75%;
}

.process {
    position: relative;
    display: block;
    margin: 0 0 0 auto;
    width: 85%;
    aspect-ratio: 4 / 3.5;
    max-height: 1000px;
}

.huwa {
    position: relative;
    line-height: 1.8;
}
.huwa::before{
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    aspect-ratio: 2.8 / 2;
    background: url(../img/back_10.webp) no-repeat center / contain;
}
.huwa01 {
    position: absolute;
    top: 0;
    left: 5%;
    width: 48%;
    max-width: 540px;
    transform: scale(0);
    opacity: 0;
    transition: 1.5s .5s;
}
.page03_back.active .huwa01 {
    transform: scale(1);
    opacity: 1;
}
.huwa02 {
    position: absolute;
    right: 5%;
    top: 20%;
    width: 48%;
    max-width: 540px;
    transform: scale(0);
    opacity: 0;
    transition: 1.5s 1s;
}
.page03_back.active .huwa02 {
    transform: scale(1);
    opacity: 1;
}
.huwa03 {
    position: absolute;
    left: 0;
    top: 47%;
    width: 55%;
    max-width: 660px;
    transform: scale(0);
    opacity: 0;
    transition: 1.5s 1.5s;
}
.page03_back.active .huwa03 {
    transform: scale(1);
    opacity: 1;
}
.huwa04 {
    position: absolute;
    right: 0;
    bottom: 15%;
    width: 55%;
    max-width: 660px;
    transform: scale(0);
    opacity: 0;
    transition: 1.5s 2s;
}
.page03_back.active .huwa04 {
    transform: scale(1);
    opacity: 1;
}.huwa05 {
    position: absolute;
    left: 10%;
    bottom: 0;
    width: 38%;
    max-width: 420px;
    transform: scale(0);
    opacity: 0;
    transition: 1.5s 2.5s;
}
.page03_back.active .huwa05 {
    transform: scale(1);
    opacity: 1;
}

.number {
    color: #00656480;
    margin-right: .5em;
    font-size: 1.2em;
    line-height: 1;
    font-weight: 600;
}
.huwa p {
    position: relative;
    text-align: center;
    z-index: 10;
}

/*********************************************************
					心の変化
*********************************************************/

.page_sec03 {
    position: relative;
    padding: min(8vw, 150px) 0 min(8vw, 140px);
    text-align: center;
}

.page03_back02 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    z-index: 5;
}
.page03_back02 img {
    margin-top: max(-5vw,-85px);
    width: 100%;
    mask-image: linear-gradient(to top, black 90%, transparent 100%);
}

.page03_cont {
    position: relative;
    margin-bottom: 8em;
    z-index: 5;
}
.page03_cont h3 {
    color: #7A3F3340;
}
.page03_cont h4 { 
    color: #7A3F33;
}

.seesaw {
    position: relative;
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 2em;
    z-index: 5;
}

.ora_02 {
    padding-left: .5em;
    margin: 0 .2em;
}

.change {
    position: relative;
    align-content: center;
    color: #fff;
    width: 30%;
    max-width: 350px;
}
.change01 p {
    filter: drop-shadow(0px 5px 10px #006564);
}
.change02 p {
    filter: drop-shadow(0px 5px 10px #FF0000);
}
.change03 p {
    padding-left: 1em;
    filter: drop-shadow(0px 5px 10px #973C00);
}
.change01::before,
.change02::before,
.change03::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
    aspect-ratio: 2.8 / 2;
    filter: drop-shadow(0px 5px 6px #8E715480);
    will-change: transform, opacity;
}
.change01::before {
    background: url(../img/waku_06.webp) no-repeat center / contain;
}
.change02::before {
    background: url(../img/waku_07.webp) no-repeat center / contain;
}
.change03::before {
    background: url(../img/waku_08.webp) no-repeat center / contain;
}

.change01 {
    animation: change01 6s infinite;
    transform-origin: center;
}

@keyframes change01 {
  0%,5% {
    transform: rotate(-5deg) translateY(50%);
	}
  47%,52% {
   transform: rotate(5deg)translateY(-50%);
	}
  95%,100% {
    transform: rotate(-5deg) translateY(50%);
  }
}

.change02 {
    animation: change02 6s infinite;
    transform-origin: center;
}
@keyframes change02 {
  0%,5% {
    transform: rotate(-3deg);
	}
  47%,52% {
   transform: rotate(3deg);
	}
  95%,100% {
    transform: rotate(-3deg);
  }
}
.change03 {
    animation: change03 6s infinite;
    transform-origin: center;
}

@keyframes change03 {
  0%,5% {
    transform: rotate(-5deg) translateY(-50%);
	}
  47%,52% {
   transform: rotate(5deg)translateY(50%);
	}
  95%,100% {
    transform: rotate(-5deg) translateY(-50%);
  }
}

.dodai {
    margin-bottom: 3em;
}
.dodai01 {
    width: 100%;
    animation: dodai 6s infinite;
    transform-origin: center;
}
@keyframes dodai {
  0%,5% {
    transform: rotate(-5deg);
	}
  47%,52% {
   transform: rotate(5deg);
	}
  95%,100% {
    transform: rotate(-5deg);
  }
}

.triangle {
    width: 15%;
    margin: 0 auto;
    margin-top: -2em;
}
.triangle img {
    width: 100%;
}


/*********************************************************
					　　料金案内
*********************************************************/

.page_sec04 {
    padding: min(18vw, 250px) 0;
}

.page03_back03 {
    width: 100%;
    background: url(../img/back_03.webp) no-repeat center / cover;
}

.price_inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.page03_cont02 {
    padding: min(5vw,100px);
    border-radius: 2em;
    text-align: center;
    background: #fff;
}
.cont02_inner {
    position: relative;
    text-align: left;
    padding: 3vw;
    transform: translateY(10%);
    opacity: 0;
    transition: 1s;
}
.cont02_inner.active {
    transform: translateY(0%);
    opacity: 1;
}

.cont02_inner:nth-child(3) {
    padding: 0 3vw 3vw;
}
.cont02_inner:nth-child(6) {
    padding: 3vw 3vw 0;
}
.cont02_inner::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    border: solid min(.2vw,2px) #66C5D5;
}
.cont02_inner:nth-child(6)::before {
    border: none;
}

table {
    width: 100%;
    margin-top: 2vw;
}
td {
    align-content: center;
}
td span {
    font-size: min(1.82vw, 22px);
}
td:nth-child(1) {
    width: 60%;
}
td:nth-child(2) {
    width: 20%;
    text-align: right;
}
td:nth-child(3) {
    width: 20%;
    font-size: min(2.6vw,28px);
    text-align: right;
}

.cont_bottom {
    margin-top: .5em;
    margin-bottom: 2em;
    text-indent: -1em;
    padding-left: 1em;
}
.cont_top {
    margin-top: .5em;
    text-indent: -1em;
    padding-left: 1em;
}

.page03_cont02 p{
    text-align: justify;
}

.first01 {
    display: inline-flex;
    margin: .5em auto;
    padding: .8em 1.5em;
    border-radius: .5em;
    line-height: 1.2;
    background: #03A69240;
}

/*********************************************************
				　カウンセリングSP版
*********************************************************/

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

    .page_sec02 {
        padding: min(15vw, 280px) 0 min(35vw, 320px);;
    }

    .page03_img {
        top: initial;
        bottom: -10%;
        left: 0;
        width: 45%;
        max-width: 250px;
        transform: translate(-30%, 0%);
    }
    .page03_img00 {
        position: absolute;
        top: 0;
        left: 0;
        width: 55%;
        max-width: 350px;
        transform: translate(-30%, -30%);
    }
    .sp_img00 {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 65%;
        transform: translate(0,40%);
    }
    .page03_img00 img,
    .page03_img01 img {
        filter: none;
    }
    .page03_img02 {
        position: absolute;
        top: 19%;
        left: initial;
        right: 0%;
        transform: translate(25%,0%);
        max-width: 250px;
        width: 37%;
    }
    .page03_img01 {
        position: absolute;
        bottom: 15%;
        right: -10%;
        width: 40%;
    }

    .process {
        aspect-ratio: 1 / 2.2;
        width: 100%;
        max-height: 1100px;
    }

    .huwa01,
    .huwa02 {
        width: 70%;
        max-width: 350px;
    }
    .huwa03,
    .huwa04 {
        width: 90%;
        max-width: 430px;
    }
    .huwa01 {
        right: 5%;
        left: inherit;
        transition: 1.5s;
    }
    .huwa02 {
        top: 21.5%;
        right: initial;
        left: 5%;
        transition: 1.5s .5s;
    }
    .huwa03 {
        top: 44.5%;
        left: initial;
        right: 0;
        transition: 1.5s 1s;
    }
    .huwa04 {
        bottom: 20.5%;
        right: initial;
        left: 0;
        transition: 1.5s 1.5s;
    }
    .huwa05 {
        width: 58%;
        max-width: 300px;
        left: initial;
        right: 0;
        transition: 1.5s 2s;
    }

    .page03_cont {
        margin-bottom: 3em;
    }

    .seesaw {
        justify-content: space-between;
        margin-bottom: 5vw;
    }
    
    .change {
        font-size: min(3.125vw,18px);
        width: 33%;
        line-height: 1.5;
    }
    .triangle {
        margin-top: -4vw;
    }

    /* 料金案内 */

    .table {
        display: none;
    }
    .table_sp {
        display: table;
    }
    .page_sec04 {
            padding: min(28vw, 150px) 0;
    }

    td:nth-child(1) {
        width: 40%;
    }
    td:nth-child(2) {
        width: 30%;
    }
    td:nth-child(3) {
        width: 30%;
        font-size: min(4.375vw,20px);
    }
    td span {
    font-size: min(3.125vw, 16px);
    }

}

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

    .seesaw {
        margin-bottom: 2vw;
    }

    .sp_480 {
        display: block;
    }

    @keyframes change01 {
        0%,5% {
            transform: rotate(-5deg) translateY(20%);
            }
        47%,52% {
        transform: rotate(5deg)translateY(-20%);
            }
        95%,100% {
            transform: rotate(-5deg) translateY(20%);
        }
    }
    @keyframes change03 {
        0%,5% {
            transform: rotate(-5deg) translateY(-20%);
            }
        47%,52% {
        transform: rotate(5deg)translateY(20%);
            }
        95%,100% {
            transform: rotate(-5deg) translateY(-20%);
        }
    }
}

/*********************************************************
					　カウンセラー
*********************************************************/

.fv_img03 {
    background: url(../img/fv_04.webp?0528) no-repeat bottom / cover;
}

.page04_back {
    will-change: transform, opacity;
    background: url(../img/back_13.webp) no-repeat bottom / cover;
    filter: drop-shadow(0px 5px 10px #8E715480);
    margin-top: 1em;
}
.page04_back h3,
.page04_back h4 {
    text-align: center;
}

.page_flex03 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5em;
    opacity: 0;
    transform: translateY(10%);
    transition: 1s;
}
.page_flex03:last-child {
    margin-bottom: initial;
}

.page_flex03.active {
    opacity: 1;
    transform: translateY(0);
}

.p_img {
    width: 40%;
    height: auto;
}
.p_img img {
    border-radius: 3em;
    width: 100%;
    filter: drop-shadow(0px 5px 6px #8E715480);
    will-change: transform, opacity;
}
.p_img01 {
    position: relative;
}
.p_img02 {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(20%,80%);
    width: 60%;
}

.page04_cont {
    width: 52%;
    text-align: justify;
}

.page04_title {
    font-size: min(2.34vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1em;
}
.page_flex03 table {
    width: 52%;
    margin-top: initial;
}

.page_flex03 table td.indent{
    text-indent: -10em;
    padding-left: 10em;
}

.page_flex03 table td:nth-child(1) {
        text-align: left;
        width: 14%;
        align-content: baseline;
}
.page_flex03 table td:nth-child(2) {
        text-align: left;
        width: 86%;
        align-content: baseline;
}

.page_flex03 table td:nth-child(3) {
        text-align: left;
        font-size: min(1.82vw, 22px);
}

.table_bottom {
    padding-bottom: 1em;
}

.p_img03 {
    width: 40%;
}
.p_img03 img {
    border-radius: 3em;
    width: 100%;
    filter: drop-shadow(0px 5px 6px #8E715480);
    will-change: transform, opacity;
}

/*********************************************************
					    利用者の声
*********************************************************/

.page_sec05 {
    padding: min(15vw, 200px) 0 0;
}

.page_flex02 {
    display: flex;
    justify-content: space-between;
    margin-bottom: min(10vw,192px);
    opacity: 0;
    transform: translateY(10%);
    transition: 1s;
}
.page_flex02.active {
     opacity: 1;
    transform: translateY(0%);
}

.page_sec05 h3,
.page_sec05 h4 {
    text-align: center;
}

.peole {
    position: relative;
    text-align: center;
    width: 15%;
}
.p_zulei {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-20%);
    width: 250%;
}

.panel-header {
    position: relative;
    z-index: 10;
    width: 83%;
    cursor: pointer;
}
.panel-header img {
    width: 100%;
}
.peole img {
    position: relative;
    width: 100%;
    z-index: 2;
}

.panel_img_01,
.panel_img_02,
.panel_img_03,
.panel_img_04,
.panel_img_05 {
    position: relative;
}

.panel_img_01::before,
.panel_img_02::before,
.panel_img_03::before,
.panel_img_04::before,
.panel_img_05::before {
    position: absolute;
    content: "";
    top: 50%;
    width: min(4.5vw, 75px);
    height: min(4.5vw, 75px);
    aspect-ratio: 1 / 1;
}
.panel_img_01::before {
    left: 0;
    transform: translate(-70%,0);
    background: url(../img/waku_15.webp) no-repeat center / contain;
}
.panel_img_02::before {
    right: 0;
    transform: translate(70%,0);
    background: url(../img/waku_17.webp) no-repeat center / contain;
}
.panel_img_03::before {
    left: 0;
    transform: translate(-70%,0);
    background: url(../img/waku_19.webp) no-repeat center / contain;
}
.panel_img_04::before {
    right: 0;
    transform: translate(70%,0);
    background: url(../img/waku_21.webp) no-repeat center / contain;
}
.panel_img_05::before {
    left: 0;
    transform: translate(-70%,0);
    background: url(../img/waku_23.webp) no-repeat center / contain;
}
.com_p {
    position: absolute;
    padding: min(2vw,75px) min(9vw,173px) min(2vw,35px) min(4vw,77px);
    top: 50%;
    transform: translate(0,-50%);
    left: 0;
    font-size: min(2.21vw,30px);
    line-height: 1.8;
    text-align: justify;
}

/* アコーディオン */

/* アイコン */
.panel_icon {
    position: absolute;
    top: 0%;
    right: 50%;
    width: 2rem;
    height: 2rem;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    transform: translate(50%, 0%) rotate(0deg);
}
.icon_01 {
    background: #ffd097;
}
.icon_02 {
    background: #94eac9;
}
.icon_03 {
    background: #f2bdf2;
}
.icon_04 {
    background: #8099c9;
}
.icon_05 {
    background: #f2bdbd;
}
.panel_icon::before,
.panel_icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 70%;
    background-color: #fff;
    transition: 0.2s ease;
}
.panel_icon::before {
    transform: translate(-50%, -50%) rotate(90deg);
}
.panel_icon::after {
    transform: translate(-50%, -50%) rotate(180deg);
}
.panel_icon.active {
    transform: translate(50%, 0%) rotate(90deg);
}
/* 横線状態（開いている時）→ before を非表示、after を水平に */
.panel_icon.active::before {
    opacity: 0;
}
.panel_icon.active::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.panel_icon.active .more {
    transform: translate(50%, 50%) rotate(-90deg);
}

/* 中身 */
.panel_cont {
    margin: max(-4vw,-40px) auto 0;
    height: 0;
    transition: height .3s ease-out;
    border-radius: 0 0 2em 2em; 
    overflow: hidden;
    width: 99%;
}
.p_color01 {
    background: #fff1d2;
}
.p_color02 {
    background: #d3ffee;
}
.p_color03 {
    background: #ffedfc;
}
.p_color04 {
    background: #d6e4ff;
}
.p_color05 {
    background: #ffe5e4;
}

.panel_item {
    text-align: justify;
    padding: min(6.5vw,90px) 3vw 3vw; /* ここでpaddingを指定 */
}

.botton {
    position: absolute;
    bottom: 8%;
    right: 2%;
    width: 3.5rem;
    height: 3.5rem;
    min-width: 30px;
    min-height: 30px;
}

.more {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%,0%);
    font-size: min(1.82vw,18px);
}

/*********************************************************
					    カウンセラーSP
*********************************************************/

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

    .page_sec02 {
        padding: min(15vw, 280px) 0 min(35vw, 320px);
    }

    .page_flex03 {
        display: block;
    }

    .p_img {
        width: 60%;
        margin-bottom: 13vw;
    }
    .p_img img {
        border-radius: 2em;
    }
    .p_img02 {
        width: 75%;
        transform: translate(85%, 20%);
    }
    .page04_cont {
        width: 100%;
    }
    .page04_title {
        font-size: min(5vw,22px);
    }

    .page_flex03 table {
        width: 100%;
    }

    .page_flex03 table td:nth-child(1) {
        width: 18%;
        text-align: justify;
    }
    .page_flex03 table td:nth-child(2) {
        text-align: justify;
    }

    .sp_flex03 {
        display: flex;
        flex-direction: column-reverse;
    }

    .p_img03 {
        width: 100%;
        margin-bottom: 8vw;
    }

    /* 利用者の声 */

    .sp_top {
        margin-top: 8vw;
    }

    .page_flex02 {
        flex-direction: column;
        margin-bottom: 20vw;
    }
    .page_flex02:nth-child(7) {
        margin-bottom: 5vw;
    }
    .sp_flex02 {
        flex-direction: column-reverse;
    }

    .peole {
        display: block;
        margin: 0 auto;
        width: 25%;
    }
    .p_zulei {
        transform: translate(-50%,-10%);
        width: 200%;
    }

    /* アコーディオン */
    .panel-header {
        width: 100%;
    }
    .com_p {
        position: relative;
        transform: translate(0,0);
        border-radius: 2em;
        background: #fff;
        font-size: min(4.37vw,21px);
        padding: min(3vw, 75px) min(15vw, 90px) min(3vw, 35px) min(4vw, 77px);
    }

    .com_p_01 {
        border:  solid 4px #ffd097;
    }
    .com_p_02 {
        border:  solid 4px #94eac9;
    }
    .com_p_03 {
        border:  solid 4px #f2bdf2;
    }
    .com_p_04 {
        border:  solid 4px #8099c9;
    }
    .com_p_05 {
        border:  solid 4px #f2bdbd;
    }

    .panel_img_01::before,
    .panel_img_02::before,
    .panel_img_03::before,
    .panel_img_04::before,
    .panel_img_05::before {
        display: none;
    }

    .botton {
        bottom: 5%;
    }

    .more {
        font-size: min(3.75vw,16px);
    }
}