@charset "utf-8";

/* CSS Document */


html {
    overflow-x: hidden;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.maingrafic {
    display: none;
    /* 読み込みが完了するまで非表示 */
}

body {
    font-family: "Gothic Medium BBB", "Noto Sans JP", sans-serif;
    overflow-x: hidden;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.7em;
    text-align: justify;
}


ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;

}

img,
video {
    max-width: 100%;
    vertical-align: bottom;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    margin-bottom: 1em;
    padding: 0;
}

a:hover {
    color: #BFC0C0 !important;
}

h2 {
    font-size: 1.6rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 1em;
}

.mb-2 {
    margin-bottom: 2em;
}

.mb-3 {
    margin-bottom: 3em;
}

.pr-35 {
    padding-right: 35px;
}

.pl-35 {
    padding-left: 35px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-40 {
    padding-left: 40px;
}

.pt-05 {
    padding-top: .5em;
}

.pt-1 {
    padding-top: 1em;
}

.pt-2 {
    padding-top: 2em;
}

.pb-1 {
    padding-bottom: 1em;

}

.pb-2 {
    padding-bottom: 2em;

}

.pb-35 {
    padding-bottom: 35px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-65 {
    padding-bottom: 65px;
}

.pb-75 {
    padding-bottom: 75px;
}

.bold {
    font-weight: bold;
}

.UDShinL {
    font-family: "UD Shin Go Conde90 L", "Noto Sans JP", sans-serif;
}

/*header*/
header {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0px 0px;
    color: #333;
    font-size: 16px;
    letter-spacing: 0px;
    line-height: 1.6em;
}

.hamburger {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 1s ease, opacity 1s ease;
    z-index: 100;
    pointer-events: auto;
}

.hamburger.open {
    background-color: #fff;
}

.hamburger-outer {}

.hamburger span {
    color: #fff;
    display: block;
    margin-top: 27px;
}

.hamburger .hamburger-text {
    font-weight: bold;
    margin-top: -16px;
    font-size: 14px;
    text-align: center;
}

.hamburger {
    background-color: #000;
    padding: 10px 20px;
    height: 95px;
    border-radius: 0px 0px 7px 7px;
    margin-right: 0px;
    width: 120px;
    position: fixed;
    top: 0;
    right: 0;
}


.hamburger-button {
    display: block;
    margin: 0 auto;
    width: 50px;
    height: 5px;
    background-color: #fff;
    /* 真ん中の棒 */
    position: relative;
    transition: all 0.3s ease;
}

.hamburger-button::before,
.hamburger-button::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.hamburger-button::before {
    top: -15px;
    /* 上の棒 */
}

.hamburger-button::after {
    top: 15px;
    /* 下の棒 (bottomをtopに変更) */
}

.hamburger.open .hamburger-button {
    background-color: transparent;
}

.hamburger.open .hamburger-button::before {
    transform: rotate(45deg);
    top: 7px;
    background-color: #000;
}

.hamburger.open .hamburger-button::after {
    transform: rotate(-45deg);
    top: 7px;
    background-color: #000;
}






.maingrafic {
    width: 100%;
    height: 60vh;
    font-size: 16px;
    /* 適当な背景画像に置き換えてください */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.maingrafic-content {
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    /* 透明な背景 */
    padding: 20px;
    border-radius: 10px;
}


.logo-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: fadeInOut 3.5s ease forwards;
    filter: blur(20px);
    /* 初期状態でブラーを強めに設定 */
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        filter: blur(30px);
        /* 透明かつ強いブラー */
    }

    10% {
        opacity: 1;
        filter: blur(5px);
        /* 少しブラーが残る */
    }

    30% {
        opacity: 1;
        filter: blur(1px);
        /* ほぼクリアな状態に近づく */
    }

    100% {
        opacity: 0;
        filter: blur(0);
        /* 完全にクリアな状態 */
    }
}


header {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 1s ease, opacity 1s ease;
}



header.show_header,
.subMenu.show_header,
#navMenu.show_header,
.hamburger.show_header {
    opacity: 1;
    transform: translate(0, 0);
}


.maingrafic {
    position: relative;
    width: 100%;
    height: calc(100vh);
    overflow: hidden;
    z-index: -1;
    margin-top: -95px;
}


.maingrafic-bg {
    background-image: url('../images/maingrafic01.jpg');
    background-size: cover;
    background-position: center top;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.maingrafic-bg-2 {
    background-image: url('../images/maingrafic02.jpg');
    background-size: cover;
    background-position: center top;
    opacity: 0;
    /* 最初は見えない */
    visibility: hidden;
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.maingrafic-bg-3 {
    background-image: url('../images/maingrafic03.jpg');
    background-size: cover;
    background-position: center top;
    opacity: 0;
    /* 最初は見えない */
    visibility: hidden;
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.maingrafic-bg,
.maingrafic-bg-2,
.maingrafic-bg-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1.5s ease-in-out;
    opacity: 0;
    display: none;
}

.maingrafic-bg.show,
.maingrafic-bg-2.show,
.maingrafic-bg-3.show {
    display: block;
    opacity: 1;
}

.maingrafic-cover {
    background-image: url('../images/maingrafic_cover.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease;
}

.maingrafic-cover01,
.maingrafic-cover02 {
    position: absolute;
    opacity: 0;
    transform: scale(10);
    /* 初期サイズ400% */
    transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s ease-out;
    /* スムーズなアニメーション */
}

.maingrafic-cover01 {
    top: calc(50% - 192px);
    left: calc(50% - 35px);
    transform: translate(-50%, -50%) scale(10);
    /* 初期位置とサイズ */
}

.maingrafic-cover02 {
    bottom: calc(50% - 260px);
    right: calc(50% - 590px);
    transform: scale(10);
    /* 初期サイズ400% */
}

/* 出現時のクラス */
.maingrafic-cover01.show,
.maingrafic-cover02.show {
    opacity: 1;
    transform: scale(.8);
    /* 元のサイズに縮小 */
}



.vertical-catchphrase {
    position: absolute;
    top: -100%;
    left: calc(50vw - 440px);
    /* 画面の中央に配置 */
    transform: translateX(-50%);
    /* 中央揃え */
    height: 100%;
    transition: top 1s ease;
    /* アニメーション */
    writing-mode: vertical-rl;
    padding-top: 1em;
    font-size: 1.8em;
    line-height: 2.07;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
    opacity: 0;
}

.vertical-catchphrase.show {
    top: 15%;
    opacity: 1;
}

.vertical-catchphrase span {
    display: block;
    color: #fff;
}

/* キャッチフレーズのアニメーション完了後に表示 */
.vertical-catchphrase.show {
    top: 15%;
    /* 表示位置に移動 */
    opacity: 1;
    /* 表示 */
}

.text-lifeis,
.maingrafic-logo {
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: 50;
}

.text-lifeis {
    position: absolute;
    top: 52.2%;
    left: calc(50% - -17px);
    overflow: hidden;
    /* 文字がはみ出さないようにマスク */
    width: 364px;
    /* 画像の幅に合わせて固定 */
    height: auto;
}

.text-lifeis img {
    position: relative;
    /* 画像の位置を相対位置に変更 */
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    clip-path: inset(0 100% 0 0);
    /* 初期状態で右側が完全に隠れている */
    transition: clip-path 2s ease;
    /* クリップのアニメーション */
}

.text-lifeis.show img {
    clip-path: inset(0 0 0 0);
    /* クリップを解除して画像全体を表示 */
}




.text-lifeis.show {
    opacity: 1;
    width: 364px;
    /* 必要な幅を指定して表示されるように */
}

.text-lifeis.show img {
    transform: translateX(0);
    /* タイピング風に左から表示 */
}

.maingrafic-logo {
    position: absolute;
    bottom: 10%;
    left: -100%;
    /* 画面外からスタート */
    transition: left 1.5s ease;
    /* 左からのスライドアニメーション */
}

.maingrafic-logo.show {
    opacity: 1;
    left: calc(50vw - 595px);
    /* 最終位置に移動 */
}


#canvas {
    z-index: 100;
}

header.show_header {
    z-index: 10;
}

/*メニュー*/

.subMenu {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 1s ease, opacity 1s ease;
}

.subMenu {
    display: flex;
    justify-content: space-around;
    /* 項目を均等に配置 */
    list-style-type: none;
    /* リストマークを削除 */
    margin: 0;
    padding: 0;
    line-height: 1.1em;
    margin-top: 20px;
    margin-right: 120px;
    z-index: 20;
    letter-spacing: 0px;
}

.subMenu ul {
    display: flex;
    list-style: none;
    /* リストマークを削除 */
    padding: 0;
    /* 項目間に隙間を設ける */
}

.subMenu li {
    text-align: center;
    padding: 0 0px;
    width: 120px;
    border-left: 2px solid #969696;
    font-size: 14px;
}

.subMenu li:first-child {}


.subMenu li a {
    color: #333;
    /* テキストの色 */
    text-decoration: none;
    /* 下線を削除 */
    font-weight: bold;
    display: block;
}

.subMenu li a:hover {
    color: #BFC0C0;

}

.subMenu li img {
    display: block;
    margin: 0 auto;
    width: auto;
    /* 適当なアイコンサイズに調整 */
    height: 50px;
    margin-bottom: 5px;
    /* テキストとの間にスペース */
}

.subMenu li:last-child img {
    width: 50px;
    height: auto;
    margin-bottom: 8px;
}


nav#navMenu ul.navMenu_list {
    flex-direction: column;
}


nav#navMenu ul.navMenu_list {
    list-style-type: none;
    margin: 0;
    text-align: left;
    display: flex;
    padding: 2em 40px;
}

nav#navMenu ul.navMenu_list li {
    border-bottom: 1px solid #fff;
    padding-bottom: 1em;
    margin-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    line-height: 1.5em;
    text-indent: -1em;
    padding-left: 2em;
    letter-spacing: 0;
}

nav#navMenu ul.navMenu_list li:first-child {
    border-top: 1px solid #fff;
    padding-top: 1em;
}

nav#navMenu ul li {
    display: inline;
    font-weight: bold;
}

nav#navMenu ul.navMenu_list li a {
    color: #fff;
    text-decoration: none;
    font-size: bold;
}

nav#navMenu {
    display: none;
    background-color: #00020C;
    width: 100%;
    text-align: right;
    /* デフォルトで非表示 */
    opacity: 0;
    width: 490px;
    height: 100vh;
    padding-top: 130px;
    position: fixed;
    top: 0px;
    right: 0;
    z-index: 10;
    transition: transform .3s ease, opacity .3s ease;
}



#navMenu.show_header {
    display: none;
}

nav#navMenu.show {
    display: block;
    animation: appear .5s ease;
}

@keyframes appear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.subMenu-open {
    display: flex;
    justify-content: space-around;
    /* 項目を均等に配置 */
    list-style-type: none;
    /* リストマークを削除 */
    margin: 0;
    padding: 0;
    line-height: 1.1em;
    margin-right: 120px;
    z-index: 20;
    letter-spacing: 0px;
}

.subMenu-open ul {
    position: absolute;
    top: 20px;
    left: 10px;
    display: flex;
    list-style: none;
    /* リストマークを削除 */
    padding: 0;
    /* 項目間に隙間を設ける */
}

.subMenu-open li {
    text-align: center;
    padding: 0 0px;
    width: 120px;
    border-left: 2px solid #fff;
    font-size: 14px;
}

.subMenu-open li:first-child {
    border-left: none;
}


.subMenu-open li a {
    color: #fff;
    /* テキストの色 */
    text-decoration: none;
    /* 下線を削除 */
    font-weight: bold;
    display: block;
}

.subMenu-open li a:hover {
    color: #BFC0C0;
}

.subMenu-open li img {
    display: block;
    margin: 0 auto;
    width: auto;
    /* 適当なアイコンサイズに調整 */
    height: 50px;
    margin-bottom: 5px;
    /* テキストとの間にスペース */
}

.subMenu-open li:last-child img {
    width: 50px;
    height: auto;
    margin-bottom: 8px;
}


/* タイトル動き */

.vertical-text {
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 2rem;
    position: relative;
    letter-spacing: 0;
    position: relative;
    /* 追加 */
}

h3.vertical-text {
    font-weight: normal;
}

.line {
    font-size: 1.95rem;
    padding: 0.5em 10px;
    margin: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    /* 重要: 背景と文字を重ねるため */
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    /* 背景色を黒に修正 */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.8s ease;
    z-index: 0;
    /* 背景を後ろに */
}

.text {
    position: relative;
    color: #fff;
    /* 文字色を白に修正 */
    z-index: 1;
    /* 背景より前に表示 */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.8s ease 0.3s;
}

.line.revealed .background {
    clip-path: inset(0 0 0 0);
}

.line.revealed .text {
    clip-path: inset(0 0 0 0);
}

/*　追記　*/
:root {
    --cover-size: clamp(100px, 16vw, 259px);
    --cover-size2: clamp(100px, 10vw, 180px);
    --lifeis-width: clamp(150px, 20vw, 364px);
    --logo-width: clamp(100px, 18vw, 297px);
}

/* maingrafic-cover01, maingrafic-cover02 */
.maingrafic-cover01 {
    width: var(--cover-size) !important;
    height: var(--cover-size) !important;
}

.maingrafic-cover02 {
    width: var(--cover-size2) !important;
    height: var(--cover-size2) !important;
}

/* text-lifeis の修正 */
.text-lifeis {
    width: var(--lifeis-width) !important;
}

.maingrafic-logo {
    width: var(--logo-width) !important;
}

@media screen and (max-width: 1680px) {
    .maingrafic-cover01 {
        top: calc(50% - 192px);
        left: calc(50% - 38px);
    }

    .maingrafic-cover02 {
        bottom: calc(50% - 244px);
        right: calc(50% - 565px);
    }

}

@media screen and (max-width: 1440px) {
    .maingrafic-cover01 {
        top: calc(50% - 162px);
        left: calc(50% - 39px);
    }

    .maingrafic-cover02 {
        bottom: calc(50% - 204px);
        right: calc(50% - 475px);
    }

    .line {
        font-size: 1.55rem;
    }

}

@media screen and (max-width: 1280px) {
    .maingrafic-cover01 {
        top: calc(50% - 132px);
        left: calc(50% - 48px);
    }

    .maingrafic-cover02 {
        bottom: calc(50% - 159px);
        right: calc(50% - 369px);
    }

    .line {
        font-size: 1.15rem;
        padding: 0.5em 2px;
    }

    .vertical-catchphrase {
        left: calc(50vw - 290px);
    }

    .maingrafic-logo.show {
        left: calc(50vw - 435px);
    }

}

/* 白背景透明化 */
.mix-blend-mode {
    mix-blend-mode: darken;
}

/* フェード */
.fade,
.fade-first,
.fade-second {
    opacity: 0;
    /* 最初は非表示 */
    transform: translateY(20px);
    /* 下に20px移動している状態 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-first {
    transition-delay: 0s;
    /* すぐに表示 */
}

.fade {
    transition-delay: 0.3s;
    /* 0.3秒遅れて表示 */
}

.fade-second {
    transition-delay: 0.6s;
    /* 0.6秒遅れて表示 */
}

.visible {
    opacity: 1;
    /* 表示 */
    transform: translateY(0);
    /* 元の位置に移動 */
}

/*一括表示*/
.fade-bulk .fade-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-bulk .fade-item.visible {
    opacity: 1;
    transform: translateY(0);
}



/* content */
.btn-flow-img {
    transition: all 0.3s ease;
}

.btn-flow-img:hover {
    background-color: #E6E6E6;
}

.container {
    max-width: 1064px;
    margin: 0 auto;
    padding: 0 20px;
}

.flex {
    display: flex;
}

.flex-end {
    align-items: flex-end;
}

.space-between {
    justify-content: space-between;
}

.row-reverse {
    flex-direction: row-reverse;
}


.block-outer {
    padding-bottom: 75px;
}

.block-outer-top {
    padding-top: 75px;
}

/* タイトル追加変更 */
.title-new-world .text,
.title-kinshi-ranshi .text,
.title-anzen .text,
.title-cost .text {
    color: #000;
}

.title-new-world .line,
.title-kinshi-ranshi .line,
.title-anzen .line,
.title-cost .line {
    font-size: 1.7rem;
    letter-spacing: 2px;
    padding: 0.5em 9px;
}

.title-new-world .background,
.title-anzen .background,
.title-cost .background {
    background-color: #fff;
}

.title-kinshi-ranshi .background,
.title-anzen .background,
.title-cost .background {
    background-color: #D6D6D6;
}

.bg-half-gray {
    width: 100vw;
    /* 横幅を100vwに設定 */
    background: linear-gradient(to right, white 50%, #EDEDED 50%);
    /* 左半分が白、右半分が#EDEDED */
    margin-left: calc(-50vw + 50%);
    /* 左側の余白を計算 */
    margin-right: calc(-50vw + 50%);
    /* 右側の余白を計算 */
}

.bg-gray {
    width: 100vw;
    /* 横幅を100vwに設定 */
    background-color: #EDEDED;
    /* 左半分が白、右半分が#EDEDED */
    margin-left: calc(-50vw + 50%);
    /* 左側の余白を計算 */
    margin-right: calc(-50vw + 50%);
    /* 右側の余白を計算 */
    padding: 75px 0;
    margin-bottom: 75px;
}

.bg-gray-name-box {
    padding: 40px 0 60px;
}

.merit-text {
    margin-left: -100px;
    width: 95%;
    font-size: 20px;
}

.relative {
    position: relative;
}

.icon_eyes01 {
    position: absolute;
    width: 245px;
    top: -242px;
    right: 0;
}

.douga-box .douga-box-left {
    width: 72.5%;
}

.douga-right {
    width: 23%;
}

.title-kinshi-ranshi {
    position: absolute;
    top: 3px;
    right: calc(50% + 35px);
}

.flex-box-half {
    width: 50%;
}





.title-anzen {
    position: absolute;
    top: 35px;
    left: calc(50% + 75px);
}

h2.title-big {
    font-size: 2.3rem;
}

h2.midashi {
    font-family: "Midashi Go MB31", "Gothic MB101", "Noto Sans JP", sans-serif;
    line-height: 1.5em;
}

.midashi {
    font-family: "Midashi Go MB31", "Gothic MB101", "Noto Sans JP", sans-serif;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.profile-box-left {
    width: 53%;
    background-image: url('../images/block01/photo05.png');
    background-repeat: no-repeat;
    background-size: 105%;
    background-position: right top;
    height: 385px;
}

.name-box {
    position: absolute;
    top: 31px;
    right: 172px;
}

.name-box h4 {
    font-size: 1.8rem;
    margin-bottom: 0.6em;
}

.name-box h3 {
    font-size: 2.3rem;
}

.profile-box-right {
    width: 45%;
}

.title-cost {
    position: absolute;
    top: 0;
    right: 0;
}

.bg_cost {
    background-image: url(../images/block01/photo06.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: left center;
    height: 460px;
    width: 100%;
}

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

.recomend-list li {
    margin-bottom: 20px;
    background-color: #C9DCDC;
    padding: 0.4em 3em;
    font-size: 1.3em;
}

.letter-space3 {
    letter-spacing: 3px;
}

.title-merit {
    color: #fff;
    font-size: 2.1rem;
    letter-spacing: 5px;
    width: 100vw;
    background-color: #7AC9CA;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 25px 0;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title_icon_icl01 {
    height: 50px;
    margin-right: .5em;
}

.title_icon_icl02 {
    height: 50px;
    margin-left: .2em;
}

.merit-item {
    width: calc(50% - 15px);
}

.merit-item:first-child::after,
.merit-item:nth-child(2)::after {
    content: '';
    display: block;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    height: 2px;
    background-color: #EDEDED;
    margin-top: 20px;
}

.merit-item:nth-child(2n) {
    position: relative;
}

.merit-item:nth-child(2n)::before {
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    background-color: #EDEDED;
    position: absolute;
    left: 0;
    top: 0;
}

.merit-item:nth-child(4)::before {
    height: calc(100% + 30px);
    top: -30px;
}

.frex-wrap {
    flex-wrap: wrap;
}

.flex-merit {
    gap: 30px;
}

.flex-merit-item {
    display: flex;
    height: 350px;
    flex-flow: column;
    justify-content: space-between;
}

.merit-item .number-merit {
    margin-left: 22px;
    margin-top: 10px;
}

.merit-item h3 {
    font-size: 2rem;
    display: inline-block;
    font-weight: normal;
    color: #fff;
    background-color: #7AC9CA;
    padding: 0.35em 1em;
    margin-bottom: 0.2em;
}

.merit-item p {
    margin-left: 22px;
}

.merit-item01,
.merit-item02,
.merit-item03,
.merit-item04 {
    background-image: url(../images/block02/illust_merit01.png);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: top 10px right;
    padding-top: 20px;
}

.merit-item03,
.merit-item04 {
    padding-top: 0px;

}

.merit-item02 {
    background-image: url(../images/block02/illust_merit02.png);
    background-size: 47%;
}

.merit-item03 {
    background-image: url(../images/block02/illust_merit03.png);
    background-size: 76%;
    padding-bottom: 35px;
}

.merit-item04 {
    background-image: url(../images/block02/illust_merit04.png);
    background-size: 65%;
    padding-bottom: 35px;
}

.table_anzen {
    border-collapse: collapse;
    border-top: 4px solid #fff;
    padding: 0px 0;
    margin-bottom: 75px;
}

.table_anzen img {
    max-width: inherit;
}

.table_anzen tr {
    position: relative;
}

.table_anzen td,
.table_anzen th {
    border-bottom: 4px solid #fff;
}

.table_anzen th {
    width: 8%;
    text-align: center;
    position: relative;
}

.table_anzen th::after {
    content: '';
    display: block;
    width: 4px;
    height: calc(100% - 14px);
    background-color: #fff;
    position: absolute;
    top: 7px;
    right: -5px;
}

.table_anzen .table_anzen_td02 {
    width: 22%;
    font-size: 1.5rem;
    line-height: 1.5em;
    font-weight: bold;
    padding: 0.5em 1em;
    position: relative;
}

.table_anzen .table_anzen_td02:after {
    content: '';
    display: block;
    width: 4px;
    height: calc(100% - 14px);
    background-color: #fff;
    position: absolute;
    top: 7px;
    right: 0;
}

.table_anzen .table_anzen_td03 {
    padding: .5em .5em 1em 1em;
    letter-spacing: 0px;
}

.bg-white-cell {
    background-color: #fff;
}

.bg-gray-cell {
    background-color: #969696;
    color: #fff;
}

.table-tekiou th {
    text-align: center;
    font-size: 1.5em;
    padding: .5em 0;
    font-weight: bold;
}

.table-tekiou td {
    padding: 2.5em 5em;
}

.title-big2 {
    font-size: 1.8rem;
}

.icon_eyes04 {
    max-width: inherit;
    height: 95px;
    margin-left: 10px;
}

.icon_vs {
    max-width: inherit;
    height: 35px;
    margin-bottom: -4px;
}

.gap55 {
    gap: 55px;
}

.icon_eyes05 {
    max-width: inherit;
    height: 95px;
    margin-right: 10px;
}

.flex-flow {
    justify-content: space-between;
    align-items: center;
}

.number-block {
    width: 60px;
    text-align: center;

}

.flow-block {
    background-color: #fff;
    margin-bottom: 35px;
}

.flow-block .nagare-block span {
    display: flex;
    background-color: #EDEDED;
    padding: 0.2em 1em;
    width: 230px;
    text-align: center;
    height: 72px;
    align-items: center;
    justify-content: center;
}

.flow-block h4 {
    font-size: 2.3em;
    margin-bottom: 0;
    font-weight: normal;
    width: 188px;
    position: relative;
}

.flow-block .nagare-block {
    width: 254px;
}

.flow-block .disc-flow-block {
    width: 354px;
    padding-right: 0.5em;
}

.triangle {
    position: relative;
}

.triangle:before {
    content: '';
    position: absolute;
    top: 50%;
    right: -17px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 17px solid #EDEDED;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.pad35 {
    padding: 20px 66px;
}

.gap20 {
    gap: 20px;
}

.flow-block h4:after {
    content: '';
    display: block;
    width: 2px;
    height: 100px;
    background-color: #EDEDED;
    margin-top: 10px;
    position: absolute;
    top: -42px;
    right: 6px;
}

/* 初期状態：非表示（高さ0、透明） */
.flow-block-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* 表示状態：高さを設定し、透明度を100%に */
.flow-block-content.show {
    max-height: 1000px;
    /* コンテンツの高さに合わせて調整 */
    opacity: 1;
}

.disc-flow-block p {
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1;
    visibility: visible;
    /* 非表示時も要素を占有させる */
}

.disc-flow-block p.hidden {
    opacity: 0;
    visibility: hidden;
    /* 非表示にする */
}

/* デフォルトのスタイル設定 */
.disc-flow-block {
    display: block;
    transition: all 0.3s ease-in-out;
}

.flow-block-content {
    display: none;
    transition: all 0.3s ease-in-out;
}

/* .hiddenクラスの追加: 要素を非表示にするために使用 */
.hidden {
    display: none !important;
}

.hidden.disc-flow-block {
    display: none !important;
}

/* .showクラスの追加: flow-block-contentを表示させる */
.show {
    display: block !important;
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-out {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.btn-flow {
    position: relative;
    display: flex;
}

.btn-flow:before {
    content: '';
    display: block;
    width: 2px;
    background-color: #B0B0B0;
    height: calc(100% - 14px);
    position: absolute;
    top: 7px;
    left: -2px;
}

.btn-flow-none-line:before {
    content: none
}

.container02 {
    width: 820px;
    margin: 0 auto;
}

.flex_kyousei {
    width: 710px;
    margin: 0 auto;
    font-size: 2.3rem;
    margin-bottom: 35px;
}

.flex_kyousei th {
    background-color: #7AC9CA;
    text-align: center;
    color: #fff;
    padding: 0.6em 0;
    border: 2px solid #969696;
}

.flex_kyousei td {
    text-align: center;
    color: #969696;
    padding: 0.6em 0;
    border-left: 2px solid #969696;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-top: none;
}


.flex_kyousei table:last-child th {
    background-color: #C7C07D;

}

.font-small {
    font-size: 80%;
}

.pb-20 {
    padding-bottom: 20px;
}

.title-with-line {
    position: relative;
    font-size: 24px;
    /* タイトルの大きさは調整してください */
    padding-right: 20px;
    /* 線とテキストの間隔 */
}

.title-with-line::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: calc(100% - 5em);
    /* 線の長さを調整 */
    height: 2px;
    background-color: black;
    /* 線の色 */
    transform: translateY(-50%);
}

.jaccs-box h4 {
    background-color: #EDEDED;
    display: inline-block;
    padding: 0.5em 2em 0;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
    line-height: 1.6em;
    margin-bottom: -10px;
}

.flex-jaccs {
    padding: 15px 2em;
    background-color: #EDEDED;
    border-radius: 0 10px 10px 10px;
    margin-top: -12px;
    margin-bottom: 35px;
}

.flex-jaccs p {
    width: 70%;
    margin-right: 20px;
}

.flex-jaccs img {
    width: 299px;
}

.font-small02 {
    font-size: 90%;
}

.q-mark {
    width: 60px;
    text-align: center;
}

.flex-faq {
    font-size: 1.6rem;
    font-weight: normal;
    background-color: rgba(122, 201, 202, 0.37);
    border-top: 4px solid #fff;
    padding: 20px 0;
    border-bottom: 4px solid #fff;
}

.faq-block {
    margin-top: -4px;
}

.q-text {
    width: 100%;
    padding-right: 10px;
}

.q-text h3 {
    margin-bottom: 0;
    font-size: 1.6rem;
    font-weight: normal;
}

.btn-faq {
    margin-right: 10px;
}

.faq-content {
    line-height: 2em;
}

.faq-content .flex {
    padding: 20px 0;
}

.faq-content .q-mark {
    font-size: 2rem;
    color: #7AC9CA;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    /* スライドアニメーション */
    opacity: 0;
    /* 初期状態は透明 */
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    /* スライドとフェードを同時に実行 */
}

.faq-content.show {
    max-height: 500px;
    /* コンテンツの高さに応じて調整 */

    opacity: 1;
    /* 表示時は完全に不透明 */
}

.flex-contact-line .contact-line-box3 {
    width: 45%;

}

.mb-35 {
    margin-bottom: 35px;
}

.ml-05 {
    margin-left: 0.5em;
}

.mt-75 {
    margin-top: 35px;
}

.color-green {
    color: #39B24A;

}

.icon-stone {
    position: absolute;
    bottom: -33px;
    right: -119px;
    width: 180px;
}

.container03 {
    width: 1040px;
    margin: 0 auto;
    position: relative;
}

.container04 {
    width: 894px;
    margin: 0 auto;
    position: relative;
}

.business-hours {
    width: 47%;
}

.footer-logo {
    width: 24%;

}

.sitemap {
    width: 28%;
    margin-left: 26px;

}

.sitemap .font-small {
    font-size: 70%;
    line-height: 2.1em;
}

.sitemap li {
    margin-left: 1em;
}

.sitemap::before {
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: -16px;
}

.btn-yellow {
    background-color: #FFD21A;
    border-radius: 15px;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #000;
    font-size: 80%;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: center;
}

.btn-black {
    color: #fff;
    background-color: #000;
    width: 95%;
    margin: 0 auto;

}

.tel-number {
    font-size: 1.9rem;
    border-top: 1px solid #969696;
    margin-top: 17px;
    padding-top: 15px;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

footer a {
    text-decoration: none;
    color: #000;
}

.title-access {
    font-weight: normal;
    font-size: 2.1rem;

}

.title-access .font-small {
    font-size: 80%;

}

.title-access .font-small02 {
    font-size: 45%;
    vertical-align: middle;

}

.business-box-logo {
    width: 121px;
    margin-right: 40px;
}

.footer-logo-icl {
    margin-bottom: 25px;
    margin-top: 28px;
}

.illust_eye06 {
    margin-bottom: -14px;
    margin-right: 0px;
}

.business-hours-outer {
    position: absolute;
    left: 0;
    width: 47vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background-color: #fff;
    padding: 40px 20px;
    height: fit-content;
}

.business-hours-inner {
    display: flex;
    justify-content: end;
}

.copyright {
    padding: 1.5em 0;
    font-size: 85%;
}

footer .bg-gray {
    margin-bottom: 0;
    padding-bottom: 0;
}

.map-container iframe {
    filter: grayscale(100%);
    /* 白黒フィルターを適用 */
}

/*　きらり　*/

.eye-icon {
    background-image: url(../images/block01/bg_eye.svg);
    background-repeat: no-repeat;
    width: 190px;
    height: 107px;
    background-size: cover;
    position: relative;
    display: inline-block;
}

.eye-icon-eyes {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 106px;
    border-radius: 50%;
    /* 目の玉が丸い形状 */
    overflow: hidden;
    /* 丸い形状に輝きをクリップ */
}

.eye-icon-eyes img {
    width: 135px;
    border-radius: 50%;
    /* 画像も丸くする */
}

.reflection {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.reflection:after {
    content: "";
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180px;
    left: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transform: rotate(45deg);
    animation: reflection 5s ease-in-out infinite;
}

@keyframes reflection {
    0% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    87% {
        transform: scale(0) rotate(45deg);
        opacity: 0.3;
    }

    88% {
        transform: scale(3) rotate(45deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(40) rotate(45deg);
        opacity: 0;
    }
}

.icon_eyes02 {
    display: block;
    width: 170px;
    position: inherit;
    margin-left: -15px;
}

.eye-icon2 {
    background-image: url(../images/block01/bg_eye2.svg);
    width: 100%;
    background-size: 100%;
}

.eye-icon-eyes2 {
    width: 95px;
}

.icon_eyes03 {
    display: block;
    width: 170px;
    position: inherit;
    margin-left: -15px;
    height: 96px;
}

.eye-icon3 {
    background-image: url(../images/block01/bg_eye3.svg);
    width: 100%;
    background-size: 100%;
    height: 96px;
}

.eye-icon-eyes3 {
    width: 95px;
}

.icon_eyes04 {
    display: block;
    width: 170px;
    position: inherit;
    margin-left: -15px;
    height: 96px;
}

.eye-icon4 {
    background-image: url(../images/block01/bg_eye4.svg);
    width: 100%;
    background-size: 100%;
}

.eye-icon-eyes4 {
    width: 95px;
}

.icon_eyes05 {
    display: block;
    width: 170px;
    position: inherit;
    margin-left: 15px;
    height: 96px;
}

.eye-icon5 {
    background-image: url(../images/block01/bg_eye5.svg);
    width: 100%;
    background-size: 100%;
}

.eye-icon-eyes5 {
    width: 95px;
}

.icon_eyes06 {
    display: block;
    width: 170px;
    position: inherit;
    margin-right: 15px;
    height: 96px;
}

.eye-icon6 {
    background-image: url(../images/block01/bg_eye6.svg);
    width: 100%;
    background-size: 100%;
    height: 100%;
}

.eye-icon-eyes6 {
    width: 100px;
}

.icon_eyes07 {
    display: block;
    width: 170px;
    position: inherit;
    margin-right: 15px;
    height: 96px;
}

.eye-icon7 {
    background-image: url(../images/block01/bg_eye7.svg);
    width: 100%;
    background-size: 100%;
}

.eye-icon-eyes7 {
    width: 110px;
}

.icon_eyes08 {
    display: block;
    width: 170px;
    position: inherit;
    height: 96px;
    margin: 0 auto;
}

.eye-icon8 {
    background-image: url(../images/block01/bg_eye8.svg);
    width: 100%;
    background-size: 100%;
}

.eye-icon-eyes8 {
    width: 113px;
}

.icon_eyes09 {
    display: block;
    width: 170px;
    position: inherit;
    height: 96px;
    margin: 0 auto;
}

.eye-icon9 {
    background-image: url(../images/block01/bg_eye9.svg);
    width: 100%;
    background-size: 100%;
}

.eye-icon-eyes9 {
    width: 94px;
}

.icon-stone2 {
    position: absolute;
    bottom: -26px;
    right: -106px;
    width: 151px;
}

.illust_eye01 {
    position: absolute;
    top: -125px;
    right: 10px;
    width: 165px;
}

h2.midashi.mb-0 {
    margin-bottom: 0;
}

.only-pc {
    display: block;
}

.only-pc-inline {
    display: inline;
}

.only-sp {
    display: none;
}

.only-sp-inline {
    display: none;
}


#map {
    height: 400px;
    width: 100%;
}

input.only-pc {
    width: 299px;
}

/*メニュー背景*/
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* 薄い黒40% */
    visibility: hidden;
    /* 初期状態で非表示 */
    opacity: 0;
    /* アニメーションのための透明度 */
    transition: opacity 0.3s ease;
    z-index: 10;
    /* メニューの下に配置するための適切な値 */
}

.menu-overlay.show {
    visibility: visible;
    opacity: 1;
}



@media screen and (max-width: 1024px) {
    body {
        word-break: break-all;
    }

    .maingrafic-bg {
        background-image: url('../images/mobile/maingrafic02_sp.png');
        background-position: center center;
    }

    .maingrafic-bg-2 {
        background-image: url('../images/mobile/maingrafic02_sp.png');
        background-position: center center;
    }

    .maingrafic-bg-3 {
        background-image: url('../images/mobile/maingrafic03_sp.png');
        background-position: center center;
    }

    .vertical-catchphrase.show {
        top: 4%;
        left: 212px;
    }

    .text-lifeis {
        position: absolute;
        top: 95.2%;
        left: calc(50% - 240px);
        width: 480px !important;
    }

    .maingrafic-logo.show {
        left: inherit;
        width: 343px !important;
        right: 20px;
    }

    .line {
        font-size: 1.85rem;
        padding: 2em 10px 0.5em;
    }

    .maingrafic-logo {
        bottom: 67%;
    }

    .maingrafic-cover01 {
        width: 27% !important;
        height: auto !important;
        top: 45%;
        left: 24%;
    }

    .maingrafic-cover02 {
        width: 18% !important;
        height: auto !important;
        bottom: 10%;
        right: 10%;
    }

    .sitemap::before {
        left: -4px;
    }

    .sitemap {
        width: 28%;
        margin-left: 10px;
    }

    .footer-logo {
        width: 24%;
    }

    .business-hours {
        width: 45%;
    }

    .business-hours-outer {
        width: 45vw;
        padding: 40px 10px;
    }
}

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

@media screen and (max-width: 580px) {
    .title_icon_icl02 {
        margin-left: .1em;
    }

    input.only-sp {
        width: 50%;
        float: right;
        margin-left: 1em;
    }


    .only-pc {
        display: none;
    }

    .only-pc-inline {
        display: none;
    }

    .only-sp {
        display: block;
    }

    .only-sp-inline {
        display: inline;
    }

    body {
        font-size: 14px;
    }


    .table-tekiou td {
        padding: 1.5em 6em;
    }

    .flex_kyousei {
        width: 100%;
    }

    .container02 {
        width: 100%;
    }

    .container03 {
        width: 100%;
    }

    .container04 {
        width: 100%;
    }

    .flex {
        display: block;
    }

    .business-hours {
        width: 100%;
    }

    .business-hours-outer {
        position: inherit;
        left: 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .business-hours-inner {
        justify-content: start;
    }


    .title-anzen {
        left: inherit;
        right: 0;
    }

    .line {
        font-size: 1.15rem;
        padding: 2em 0px 0.5em;
    }

    .vertical-catchphrase.show {
        top: 6%;
        left: 115px;
    }

    .vertical-text {
        line-height: 1.8rem;
    }

    .text-lifeis {
        position: absolute;
        top: 92.2%;
        left: calc(50% - 135px);
        width: 270px !important;
    }

    .maingrafic-logo {
        bottom: 56%;
        right: -200px;
        transition: all 1.2s ease;
    }

    .maingrafic-logo.show {
        width: 153px !important;
        right: 20px;
    }

    .maingrafic-bg {
        background-position: center -70px;
    }

    .maingrafic-bg-2 {
        background-position: center -70px;
    }

    .maingrafic-bg-3 {
        background-position: center -70px;
    }

    .maingrafic-cover01 {
        top: inherit;
        bottom: 35%;
    }

    .maingrafic-cover02 {
        bottom: 13%;
    }

    .logo-animation {
        width: 70%;
    }

    .hamburger .hamburger-text {
        margin-top: -14px;
        font-size: 60%;
        text-align: center;
    }

    .hamburger-button {
        width: 28px;
        height: 3px;
    }

    .hamburger-button::before,
    .hamburger-button::after {
        width: 28px;
        height: 3px;
    }

    .hamburger-button::after {
        top: 12px;
    }

    .hamburger-button::before {
        top: -12px;
    }

    .hamburger {
        padding: 10px 10px;
        height: 65px;
        width: 70px;
        border-radius: 0px 0px 0px 0px;
    }

    .hamburger span {
        margin-top: 15px;
    }

    nav#navMenu {
        width: 100%;
    }

    nav#navMenu ul.navMenu_list {
        font-size: 15px;
    }

    .subMenu-open ul {
        top: inherit;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }


    .menu-logo {
        position: absolute;
        top: 62px;
        left: 58px;
        width: 160px;
    }

    .subMenu-open li {
        font-size: 10px;
        line-height: 1.2em;
    }

    .subMenu-open li img {
        display: block;
        margin: 0 auto;
        width: auto;
        height: 32px;
        margin-bottom: 5px;
    }

    .subMenu-open li:last-child img {
        width: 30px;
        height: auto;
        margin-bottom: 7px;
    }

    .subMenu-open li {
        width: 77px;
    }

    .hamburger.open .hamburger-button::before {
        top: 7px;
        background-color: #000;
    }

    .hamburger.open .hamburger-button::after {
        top: 7px;
        background-color: #000;
    }

    .hamburger.open {
        background-color: #fff;
    }

    .merit-text {
        margin-left: 0;
        width: 100%;
    }

    .douga-box .douga-box-left {
        width: 100%;
    }

    .douga-right {
        display: flex;
        justify-content: flex-end;
    }


    .eye-icon-eyes {
        width: 54px;
    }

    .icon_eyes01 {
        width: 102px;
        top: -23%;
        right: -59%;
    }

    .eye-icon-eyes7 {
        width: 65px;
    }

    .eye-icon-eyes8 {
        width: 68px;
    }

    .eye-icon {
        width: 103px;
        height: 58px;
    }

    .mix-blend-mode {
        margin-top: -160px;
        width: 67%;
        margin-bottom: 2em;
    }

    .merit-text {
        width: 62%;
        margin-bottom: 0em;
        font-size: 16px;
    }

    .title-new-world .line,
    .title-kinshi-ranshi .line,
    .title-anzen .line,
    .title-cost .line {
        font-size: 1.1rem;
        padding: 0.5em 4px;
        line-height: 1em;
    }

    .flex-box-half {
        width: 100%;
    }

    .rens-box-img {
        display: flex;
        justify-content: flex-end;
    }

    .rens-box-img img {
        width: 65%;
    }

    .title-kinshi-ranshi {
        position: absolute;
        top: 0px;
        right: inherit;
        left: 0;
    }

    h2.title-big {
        font-size: 1.2rem;
    }

    .icon_eyes02 {
        margin-left: -5px;
    }

    .pb-75 {}

    .icon_eyes04 {
        height: 56px;
        margin: 0 auto;
    }

    .name-box h4 {
        font-size: 0.8rem;
        margin-bottom: 1em;
    }

    .name-box h3 {
        font-size: 1.3rem;
    }

    .about-icl-box-sp {
        margin-top: -157px;
    }

    .pr-35 {
        padding-right: 0;
    }

    .flex-sonoda-photo-sp {
        display: flex;
        justify-content: flex-start;
    }

    .flex-sonoda-photo-sp img {
        width: 50%;
    }

    .illust_eye01 {
        position: absolute;
        top: -90px;
        right: 0px;
        width: 95px;
    }

    .icon_eyes05 {
        margin: 0 auto;
        height: 56px;
    }

    .icon_vs {
        height: 22px;
        margin-bottom: 1px;
    }

    .icon_eyes06 {
        height: 56px;
        margin: 0 auto;
    }

    .icon_eyes07 {
        height: 56px;
    }

    .genkin {
        position: absolute;
        top: -1px;
        right: 0;
        width: 110px;
        background-color: #fff;
        z-index: 100;
        padding: 0 0px 0 10px;
    }

    .flex-jaccs {
        padding: 15px 1em 10px;
    }

    .jaccs-box h4 {
        padding: 0.5em 1em 0;
        font-weight: bold !important;
        font-family: noto sans, sans-serif;
    }

    .jaccs-box {
        margin-bottom: 75px;
    }

    .icon_eyes08 {
        height: 56px;
    }

    .flex-faq {
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
    }

    .icon_eyes09 {
        margin-bottom: 1em;
        height: 56px;
    }

    .contact-line-box-sp {
        padding: 40px 0 75px;
    }

    .btn-yellow {
        font-size: 110%;
    }

    .sitemap::before {
        left: 15px;
    }

    .sitemap .font-small {
        font-size: 90%;
        margin-left: 3em;
    }

    .sitemap li {
        margin-left: 0em;
    }

    .sitemap {
        width: 75%;
    }

    .pb-75-sp {
        padding-bottom: 75px;
    }

    .pl-75 {
        padding-left: 0;
    }

    h2 {
        font-size: 1.2rem;
    }

    .flex-sp {
        display: flex;
    }

    .icon_eyes03 {
        margin-left: -5px;
        height: 56px;
    }

    .full-width {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .flex-reverse {
        flex-direction: row-reverse;
    }

    .name-box {
        top: 9px;
        right: 36px;
        line-height: 0.5em;
    }

    .pb-65 {
        padding-bottom: 0px;
    }

    .profile-box-right h2 {
        padding: 0.5em 0;
        text-align: center;
        margin-bottom: 0;
    }

    .icon_eyes02 {
        position: inherit;
        height: 56px;
        margin-bottom: 1em;
    }

    .profile-box-left {
        height: 181px;
    }

    .merit-item {
        width: 100%;
    }

    .bg_cost {
        background-image: url(../images/mobile/photo06.png);
        height: 380px;
        background-size: 100%;
    }

    h2.title-big {
        line-height: 0.8rem;
    }

    .recomend-list li {
        padding: 0.4em 2em;
        font-size: 1em;
    }

    .pb-75 {
        padding-bottom: 55px;
    }

    .recomend-list li {
        margin-bottom: 10px;
    }

    .title-merit {
        margin-bottom: 0;
    }

    .merit-item01,
    .merit-item02,
    .merit-item03,
    .merit-item04 {
        padding-top: 0px;
        padding-top: 5px;
    }

    .merit-item01,
    .merit-item02,
    .merit-item03,
    .merit-item04 {
        background-size: 59%;
    }

    .merit-item02 {
        background-size: 52.5%;
    }

    .merit-item03 {
        background-size: 70%;
    }

    .merit-item h3 {
        padding: 0.35em 0.4em;
    }

    .merit-item04 {
        background-size: 65%;
    }

    .recomend-list {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .title-merit {
        font-size: 1.3rem;
    }

    .title_icon_icl01,
    .title_icon_icl02 {
        height: 40px;
    }

    .title-merit {
        padding: 13px 0;
    }

    .merit-item .number-merit {
        margin-left: 2px;
    }

    .merit-item h3 {
        font-size: 1.4rem;
    }

    .merit-item p {
        margin-left: 0;
    }

    .flex-merit-item {
        height: 280px;
        border-bottom: 1px solid #EDEDED;
        padding-bottom: 1em;
        margin-bottom: 1em;
    }

    .merit-item:first-child::after,
    .merit-item:nth-child(2)::after {
        content: none;
    }

    .merit-item:nth-child(2n)::before {
        content: none;
    }

    .bg_photo03 {
        position: relative;
    }

    .bg_photo03::after {
        content: '';
        display: block;
        background-color: #EDEDED;
        position: absolute;
        top: 0;
        left: -50%;
        width: 100%;
        height: 112.5%;
        z-index: -1;
    }

    .pb-75-sp {
        padding-bottom: 75px;
    }

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

    .title-big2 {
        font-size: 1.2rem;
    }

    .text-center-sp {
        text-align: center;
    }

    .table_anzen th {
        width: inherit;
    }

    .table_anzen th img {
        height: 16px;
        margin-bottom: 3px;
    }

    .table_anzen .table_anzen_td02 {
        width: inherit;
        font-size: 1.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .table_anzen_td02 img {
        margin-top: 2px;
        margin-right: 17px;
    }

    .table_anzen {
        margin-bottom: 15px;
    }

    .table-tekiou th {
        font-size: 1.9em;
        padding: .8em 0;
    }

    .table_anzen th::after {
        content: none;
    }

    .table_anzen .table_anzen_td02:after {
        content: none;
    }

    .table_anzen tr:nth-child(2n-1):after {
        content: none;
    }

    table.table_anzen.only-sp {
        padding-top: 1em;
    }

    .table-tekiou-sp {
        display: inline-table;
        border-spacing: 0;
    }

    th.bg-white-cell {
        border-bottom: 2px solid #EDEDED;
    }

    th.bg-gray-cell {
        border-bottom: 2px solid #EDEDED;
    }

    .bg-gray-sp-kinhi {
        padding-bottom: 0;
        margin-bottom: 75px;
    }

    .mb-20-sp {
        margin-bottom: 20px;
    }

    .mb-35-sp {
        margin-bottom: 35px;
        display: block;
    }

    .flex-wrap-sp {
        flex-wrap: wrap;
    }

    .number-block {
        width: 10%;
        margin-left: 15px;
    }

    .flow-block .nagare-block {
        width: 44%;
        height: 100px;
        display: flex;
        align-items: center;
    }

    .flow-block .nagare-block span {
        width: 147px;
        height: 54px;
        line-height: 1.4;
        justify-content: center;
        padding: 0.2em 0em;
    }

    .flow-block h4 {
        width: 42%;
        font-size: 1.5em;
    }

    .flow-block h4:after {
        content: none;
    }

    .flow-block .disc-flow-block {
        width: 94%;
        margin: 0 auto 1em;
        text-align: center;
    }

    .pad35 {
        padding: 20px 20px;
    }

    .flow-block .disc-flow-block::before {
        content: "";
        display: block;
        height: 2px;
        background-color: #EDEDED;
        margin-bottom: 1em;
        width: 96%;
        margin: 0em 2% 1em;
    }

    .flex_kyousei {
        font-size: 1.2rem;
    }

    .jaccs-box img {
        float: right;
        width: 50%;
        margin-left: 1em;
    }

    .flex-jaccs p {
        width: 100%;
    }

    .q-text h3 {
        font-size: 1rem;
        margin-right: 1em;
    }

    .flex-faq {
        padding: 8px 0;
    }

    .flex-contact-line .contact-line-box3 {
        width: 80%;
        margin: 1em auto 0;
    }

    .flex-sp-bottom {
        display: flex;
        flex-direction: column;
    }

    .business-hours {
        order: 3;
        width: 100%;
        margin: 0 auto;
    }

    .footer-logo {
        order: 1;
        width: 65%;
        margin: 0 auto 1em;
    }

    .sitemap {
        order: 2;
        width: 77%;
        margin: 0 auto 5em;
    }

    .business-hours-outer {
        width: 100vw;
    }

    .business-box-logo {
        width: 121px;
        margin: -5em auto 1em;
    }

    .business-hours-inner {
        justify-content: center;
    }

    .btn-yellow {
        border-radius: 25px;
        padding: 1.3em 1em;
        position: absolute;
        width: 64%;
    }

    .tel-number {
        margin-bottom: 35px;
    }

    .business-hours-outer {
        padding: 40px 40px 24px;
    }


    .title-access {
        font-size: 1.5rem;
        line-height: 0.7em;
        text-align: center;
    }

    .copyright {
        font-size: 80%;
    }

    .illust_eye06 {
        margin-bottom: -15px;
        margin-right: -2px;
        height: 40px;
        width: auto;
    }

    .icon-stone2 {
        position: absolute;
        bottom: -44px;
        right: -1px;
        width: 111px;
    }

    .btn-black {
        width: 100%;
        position: inherit;
    }

    h2.midashi {
        font-size: 4.5vmin;
    }

    h2.title-big {
        font-size: 4vmin;
    }

    .douga-right {
        width: 100%;
    }

    .btn-flow:before {
        content: none;
    }

    #AboutSonoda .pl-40 {
        padding-left: 0;

    }

    .mb-sp-1 {
        margin-bottom: 1em;

    }



}

@media screen and (max-width: 420px) {
    .triangle:before {
        right: -10px;
    }

    .flow-block .nagare-block span {
        width: 135px;
    }

    .merit-text {
        font-size: 14px;
    }

    .about-icl-box-sp {
        margin-top: -139px;
    }

    .title-big2 {
        font-size: 1.1rem;
    }

    .table_anzen .table_anzen_td02 {
        font-size: 1.1rem;
    }

    .table-tekiou th {
        font-size: 1.4em;
    }

    .table-tekiou td {
        padding: 1.5em
    }

    .number-block {
        margin-left: 8px;
    }

    .flow-block .disc-flow-block::before {
        width: 100%;
        margin: 0em 0% 1em;
    }

    .sitemap {
        width: 85%;
    }

    .footer-logo {
        width: 75%;
    }

    .btn-yellow {
        width: 100%;
        position: inherit;
    }

    .title-new-world .line,
    .title-kinshi-ranshi .line,
    .title-anzen .line,
    .title-cost .line {
        padding: 0.5em 2px;
    }

    root {
        font-size: 13px;
    }

    nav#navMenu ul.navMenu_list li {
        border-bottom: 1px solid #fff;
        padding-bottom: .6em;
        margin-bottom: .6em;
        text-indent: -1em;
        padding-left: 2em;
        padding-right: 1em;
        line-height: 1.5em;
    }

    nav#navMenu ul.navMenu_list {
        font-size: 14px;
    }
}

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

    body {
        font-size: 14px;
        /* 380px以下の場合にフォントサイズを小さくする */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 90%;
        /* 見出しも少し小さくする */
    }

    p,
    a,
    li {
        font-size: 85%;
        /* その他のテキストも少し小さくする */
    }

    h2.midashi {
        font-size: 3.5vmin;
    }

    .line {
        font-size: 0.95rem;
        margin: 0 4px;
    }

    .title-new-world .line,
    .title-kinshi-ranshi .line,
    .title-anzen .line,
    .title-cost .line {
        font-size: 0.95rem;
        padding: 0.5em 2px;
    }

    .name-box h3 {
        font-size: 0.85rem;
    }

    .name-box h4 {
        font-size: 0.7rem;
    }

    .table_anzen .table_anzen_td02 {
        font-size: 0.95rem;
    }

    .flow-block h4 {
        width: 37%;
    }

    .flex_kyousei {
        font-size: 1rem;
    }

    .q-text h3 {
        font-size: 0.9rem;
    }

    .profile-box-left {
        height: 156px;
    }
}

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

    body {
        font-size: 13px;
        /* 380px以下の場合にフォントサイズを小さくする */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 95%;
        /* 見出しも少し小さくする */
    }

    p,
    a,
    li {
        font-size: 75%;
        /* その他のテキストも少し小さくする */
    }

    h2.midashi {
        font-size: 4vmin;
    }

    .line {
        font-size: 0.75rem;
        margin: 0 2px;
    }

    .title-new-world .line,
    .title-kinshi-ranshi .line,
    .title-anzen .line,
    .title-cost .line {
        font-size: 0.75rem;
        padding: 0.3em 2px;
    }

    .name-box h3 {
        font-size: 0.75rem;
    }

    .name-box h4 {
        font-size: 0.5rem;
    }

    .table_anzen .table_anzen_td02 {
        font-size: 0.75rem;
    }

    .flow-block h4 {
        width: 33%;
    }

    .flex_kyousei {
        font-size: .8rem;
    }

    .vertical-catchphrase.show {
        top: 9%;
        left: 105px;
    }

    .text-lifeis {
        position: absolute;
        top: 92.2%;
        left: calc(50% - 100px);
        width: 220px !important;
    }

    .maingrafic-logo.show {
        width: 123px !important;
        right: 20px;
    }

    .eye-icon-eyes img {
        width: 72px;
        border-radius: 50%;
    }

    .eye-icon-eyes {
        width: 40px;
    }

    .eye-icon {
        width: 71px;
        height: 40px;
    }

    .icon_eyes01 {
        width: 71px;
        top: 17%;
        right: -59%;
    }

    .illust_eye01 {
        position: absolute;
        top: -90px;
        right: 0px;
        width: 65px;
    }

    .flow-block .nagare-block {
        width: 46%;
    }

    .eye-icon-eyes7 {
        width: 45px;
    }

    .eye-icon-eyes8 {
        width: 46px;
    }

    .tel-number {
        font-size: 1.65rem;
        text-align: center;
    }

    .title-access {
        font-size: 1.3rem;
    }

    .merit-text {
        font-size: 80%;
    }

    .merit-text {
        font-size: 112%;
    }

    .icon-stone2 {
        position: absolute;
        bottom: -11px;
        right: -41px;
        width: 69px;
    }

}