/*ーーーーーーーーーーーーーーーーーー

メインビジュアル

ーーーーーーーーーーーーーーーーーーー*/
#main-visual {
    height: calc(100vh - 200px);
    margin-bottom: var(--space-xxxl);
    position: relative;
}

#main-visual img {
    object-fit: cover;
    height: 100%;
    border-radius: var(--border-radius-m);
}

.mail-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--color-white);
    /* 白背景 */
    border: 1px solid var(--color-pink-primary);
    /* 黄色の枠線 */
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    cursor: pointer;
    transition: background-color 0.4s ease, transform 0.3s ease;
}

.mail-icon:hover {
    transform: translateY(-5px);
}

@media (max-width: 767px) {
    #main-visual {
        padding: 0px;
        height: auto;
        margin-bottom: var(--space-xl);
    }

    #main-visual img {
        border-radius: 0px;
    }

}

/*ーーーーーーーーーーーーーーーーーー

ここのハーツとは

ーーーーーーーーーーーーーーーーーーー*/
#about {
    margin-bottom: var(--space-xl);
}

#about .container .box {
    background-color: var(--color-yellow-light);
    border-radius: var(--border-radius-m);
}

#about .container h2 {
    font-size: var(--font-size-fixed-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent);
    text-align: center;
    margin-bottom: 50px;
}

#about .container p {
    background-color: var(--color-white);
    padding: 20px;
    margin-bottom: 50px;
    border-radius: var(--border-radius-m);
    line-height: var(--line-height-normal);
}

#program {
    margin-bottom: var(--space-xl);
}


#program .container .box {
    background-color: var(--color-yellow-light);
    border-radius: var(--border-radius-m);
}

#program .container h2 {
    font-size: var(--font-size-fixed-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent);
    text-align: center;
    margin-bottom: 50px;
}

#program .container img {
    text-align: center;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 52px;
    border-radius: var(--border-radius-m);
}

#program .container p {
    text-align: left;
    line-height: var(--line-height-normal);
}

#day {
    margin-bottom: var(--space-xl);
}

#day .container .box {
    background-color: var(--color-yellow-primary);
    border-radius: var(--border-radius-m);
    padding: 68px 58px;
}


#day .container .box .text-area p:nth-of-type(2) {
    line-height: var(--line-height-normal);
}

#day .container h2 {
    font-size: var(--font-size-fixed-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent);
    text-align: center;
    margin-bottom: 80px;
}

#day .container ul li {
    justify-content: space-between;
    display: flex;
}

#day .container ul {
    display: flex;
    flex-direction: column;
    gap: 80px;
}


#day .container ul li .img-area {
    width: 38%;
    position: relative;
}

#day .container ul li .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
    border-radius: var(--border-radius-m);
}

#day .container ul li .img-area::before {
    content: "";
    position: absolute;
    top: -37px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: var(--border-radius-full);
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

#day .container ul li:nth-child(1) .img-area::before {
    background: linear-gradient(to bottom right, #a0e030, #86c969);
    box-shadow:
        inset -5px -5px 10px rgba(255, 255, 255, 0.3),
        inset 5px 5px 10px rgba(0, 0, 0, 0.2),
        4px 14px 10px rgba(0, 0, 0, 0.3);
}

#day .container ul li:nth-child(2) .img-area::before {
    background: linear-gradient(to bottom right, #00c6ff, #0072ff);
    box-shadow:
        inset -5px -5px 10px rgba(255, 255, 255, 0.3),
        inset 5px 5px 10px rgba(0, 0, 0, 0.2),
        4px 14px 10px rgba(0, 0, 0, 0.3);
}

#day .container ul li:nth-child(3) .img-area::before {
    background: linear-gradient(to bottom right, #805dd0, #920783);
    /* 紫のグラデーション */
    box-shadow:
        inset -5px -5px 10px rgba(255, 255, 255, 0.3),
        inset 5px 5px 10px rgba(0, 0, 0, 0.2),
        4px 14px 10px rgba(0, 0, 0, 0.3);
}


#day .container ul li .text-area {
    width: 48%;
}

#day .container ul li .text-area p:nth-child(1) {
    font-size: 28px;
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    #about .container .box {
        background-color: var(--color-yellow-light);
        border-radius: var(--border-radius-m);
    }

    #about .container h2 {
        margin-bottom: var(--space-bottm-sp);
    }

    #program .container h2 {
        margin-bottom: var(--space-bottm-sp);
    }

    #program .container img {
        width: 100%;
    }

    ul li .img-area {
        width: 100%;
    }

    #day .container h2 {
        margin-bottom: 80px;
    }

    #day .container ul li .text-area p:nth-child(1) {
        font-size: var(--font-size-fixed-l);
    }

    #day .container ul li .text-area {
        width: 100%;
        padding: 10px;
    }

    #day .container ul li {
        display: flex;
        flex-direction: column;
        margin-bottom: 88px;
        justify-content: center;
    }

    #day .container ul li .img-area img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0 auto;
        margin-bottom: 24px;
    }

    #day .container ul li .img-area {
        width: 100%;
    }

    #day .container .box {
        padding: 52px 32px;
    }

    #day .container ul {
        gap: 0px;
    }

}

/*ーーーーーーーーーーーーーーーーーー

ご利用案内

ーーーーーーーーーーーーーーーーーーー*/

#family {
    margin-bottom: var(--space-xl);
}



#family .container .box {
    background-color: var(--color-yellow-light);
    border-radius: var(--border-radius-m);
}

#family .container h2 {
    font-size: var(--font-size-fixed-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent);
    text-align: center;
    margin-bottom: 50px;
}

#family .container p {
    background-color: var(--color-white);
    border-radius: var(--border-radius-m);
    padding: 20px;
    line-height: var(--line-height-normal);
}

@media (max-width: 767px) {
    #family .container h2 {
        margin-bottom: var(--space-bottm-sp);
    }
}

#topic {
    margin-bottom: var(--space-xl);
}

#topic .container .box {
    background-color: var(--color-yellow-light);
    border-radius: var(--border-radius-m);
}

#topic .container a {
    text-align: center;
}

#topic .flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin: 0 auto;
    padding: 20px;
    margin-bottom: 50px;
}

#topic .flow .step {
    background: var(--color-white);
    border: 2px dashed var(--color-blue-sky);
    height: 425px;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    border-radius: 10px;
    font-size: 24px;
}

#topic .flow .step p {
    font-size: var(--font-size-fixed-s);
    text-align: left;
    padding: 10px;
    line-height: var(--line-height-normal);
    margin: 0 auto;
}

#topic .step::before {
    content: attr(data-number);
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-green-fresh);
    color: var(--color-white);
    width: 80px;
    height: 80px;
    line-height: 75px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 44px;
}

#topic .flow .step:nth-child(2),
#topic .flow .step:nth-child(4) {
    position: relative;
    top: 220px;
}


@media (max-width: 767px) {
    #topic .flow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        display: flex;
        flex-direction: column;
        gap: 80px;
        margin: 0 auto;
        padding: 0px;
        margin-bottom: 40px;
    }

    #topic .flow .step:nth-child(2),
    #topic .flow .step:nth-child(4) {
        position: relative;
        top: 0px;
        /* ←ここで下にずらす！ */
    }

}

#price {
    margin-bottom: var(--space-xl);
}

#price .container .box {
    background-color: var(--color-yellow-light);
    border-radius: var(--border-radius-m);
}

#price .container .text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 80px;
}

#price .container h2 {
    font-size: var(--font-size-fixed-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent);
    text-align: center;
    margin-bottom: 50px;
}

#price .container p {
    text-align: left;
    background-color: var(--color-white);
    padding: 20px;
    text-align: center;
    text-align: left;
    justify-content: end;
    margin: 0 auto;
    border-radius: var(--border-radius-m);
    line-height: var(--line-height-normal);
}

#price .container a {
    text-align: center;
}

#price .table-area .bg {
    background-color: var(--color-white);
    padding: 80px;
}

#price table {
    width: 80%;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin: 0 auto;
}

#price td {
    padding: 15px 10px;
    border-bottom: 1px solid var(--color-green-fresh);
}

#price th {
    background: var(--color-green-fresh);
    color: var(--color-gray-dark);
    font-weight: bold;
    text-align: center;
    padding: 15px 10px;
}

#price td {
    text-align: center;
    color: var(--color-gray-dark);
}

@media (max-width: 767px) {
    #price .container .box {
        background-color: var(--color-yellow-light);
        border-radius: var(--border-radius-m);
    }

    #price .container h2 {
        margin-bottom: var(--space-bottm-sp);
    }

    #price th {
        padding: 8px 10px;
    }

    #price td {
        padding: 8px 10px;
    }

    #price .table-area .bg {
        background-color: var(--color-white);
        padding: 24px 10px;
        margin-bottom: 40px;
        border-radius: var(--border-radius-m);
    }

    #price table,
    #price thead,
    #price tbody,
    #price tr,
    #price th,
    #price td {
        display: block;
        width: 100%;
        text-align: left;
    }

    #price td:nth-child(1),
    #price td:nth-child(3),
    #price td:nth-child(5),
    #price td:nth-child(7) {
        border-bottom: none;
    }

}

/*ーーーーーーーーーーーーーーーーーー

トピックス

ーーーーーーーーーーーーーーーーーーー*/
#new_sub {
    margin-bottom: var(--space-xl);
}

#new_sub .container .text-area {
    display: flex;
    gap: 68px;
    align-items: center;
    margin-bottom: 50px;
    background-color: var(--color-white);
    padding: 15px;
    border-radius: var(--border-radius-m);
    border: none;
    border-left: 4px solid var(--color-pink-deep, #e85298);
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}

#new_sub .container .text-area img {
    width: 200px;
}

#new_sub .container .text-right p {
    text-align: left;
    margin-bottom: 10px;
}

#new_sub .container .text-right p:nth-of-type(2) {
    font-size: var(--font-size-fixed-m);
    font-weight: var(--font-weight-bold);
}

#new_sub .container {
    display: flex;
    gap: var(--space-xl);
    justify-content: space-between;
}

#new_sub .text-wrap {
    width: 100%;
    background-color: var(--color-yellow-primary);
    border-radius: var(--border-radius-m);
    text-align: center;
    position: relative;
}

#new_sub .img-wrap {
    width: 36%;
}

#new_sub .img-wrap img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-m);
}

#new_sub .text-wrap h2 {
    text-align: center;
    font-size: var(--font-size-fixed-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent);
    margin-bottom: 50px;
}

#new_sub .text-area-container {
    margin-bottom: 80px;
    width: 60%;
    margin: 0 auto;
}

@media (max-width: 767px) {

    #new_sub .text-area-container {
        margin-bottom: 80px;
        width: 100%;
        margin: 0 auto;
    }

    #new_sub .container .text-area {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    #new_sub .container .text-right p {
        text-align: center;
    }

    #new_sub .container .text-area img {
        width: 100%;
    }

    #new_sub .text-wrap h2 {
        margin-bottom: var(--space-bottm-sp);
    }
}

/*ーーーーーーーーーーーーーーーーーー

写真ギャラリー

ーーーーーーーーーーーーーーーーーーー*/
#gallery .container {
    background-color: var(--color-yellow-primary);
    border-radius: var(--border-radius-m);
    margin-bottom: var(--space-xl);
}

.img_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    padding: 68px 32px 52px 32px;
}

#gallery .img_box {
    width: calc(33% - 32px);
    position: relative;
    margin-top: 50px;
}

#gallery .img_box img {
    width: 100%;
    border-radius: var(--border-radius-m);
}

#gallery .img_flex .img_box::before {
    content: "";
    position: absolute;
    top: -37px;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 65px;
    border-radius: var(--border-radius-full);
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    background: linear-gradient(to bottom right, #ffffff, #fff0f0);
    box-shadow:
        inset -5px -5px 10px rgba(255, 255, 255, 0.3),
        inset 5px 5px 10px rgba(0, 0, 0, 0.2),
        4px 14px 10px rgba(0, 0, 0, 0.3);
}

#gallery .img_box.color-1::before {
    background: linear-gradient(to bottom right, #ffe0e0, #ffb3b3);
}

#gallery .img_box.color-2::before {
    background: linear-gradient(to bottom right, #e0f7ff, #b3e5ff);
}

#gallery .img_box.color-3::before {
    background: linear-gradient(to bottom right, #e0ffe0, #b3ffb3);
}

@media (max-width: 767px) {
    #gallery .img_box {
        width: 100%;
        position: relative;
    }

}

/*ーーーーーーーーーーーーーーーーーー

よくある質問ページ

ーーーーーーーーーーーーーーーーーーー*/
#qa .container .box {
    background-color: var(--color-yellow-primary);
    margin-bottom: 50px;
    border-radius: var(--border-radius-m);
}

.qa-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 85%;
    margin: 0 auto;
}

.q-text span,
.a-text span {
    display: flex;
    justify-content: center;
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    line-height: normal;
    align-items: flex-start;
}

.q-text span {
    background: linear-gradient(to bottom, #ff0080, #a000a0);
}

.a-text span {
    background: linear-gradient(to bottom, #00C4FF, #0070A3);
}

.q-text {
    display: flex;
    padding: 20px 20px 10px 20px;
    gap: 20px;
    background-color: var(--color-yellow-light);
    text-align: left;
    align-items: center;
    font-size: 24px;
    border-radius: 20px 20px 0 0;
}

.a-text {
    display: flex;
    padding: 20px;
    padding-left: 40px;
    gap: 20px;
    text-align: left;
    align-items: flex-start;
    font-size: 16px;
    line-height: var(--line-height-normal);
    border-radius: 0px 0px 20px 20px;
    background-color: var(--color-yellow-light)
}

@media (max-width: 767px) {

    #qa .qa-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0px;
    }

    #qa .qa-list li {
        margin-bottom: 36px;
    }

    #qa .content {
        font-size: 20px;
    }

    .a-text {
        padding: 20px;
    }

    .q-text span {
        min-width: 40px;
        min-height: 40px;
        font-size: 24px;
    }

    .a-text span {
        min-width: 40px;
        min-height: 40px;
        font-size: 24px;
    }

    .a-text {
        display: flex;

    }

}

/*ーーーーーーーーーーーーーーーーーー

お問い合わせ

ーーーーーーーーーーーーーーーーーーー*/

.contact {
    width: 80%;
    margin: 0 auto;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact_container {
    background: #fff6c7;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 50px;
    padding: 30px;
    border-radius: var(--border-radius-m);
}

.label-decoration {
    line-height: 180%;
}

.submit_btn {
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
    min-width: 100px;
}

.submit_btn input[type="submit"] {
    font-size: 18px;
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.16);
    transition: all 0.3s ease;
    background-color: #ffffff;
    text-align: center;
}

/* ホバー時の変化 */
.submit_btn input[type="submit"]:hover {
    transform: scale(1.05);
    /* 少し大きくする */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    /* 影も強調 */
}

input:-webkit-autofill {
    /* 色はinput要素の背景色（ここでは#fff）にそろえる */
    box-shadow: 0 0 0px 999px #fff inset;
}

input[type="text"]::placeholder {}

/* Microsoft Edge */
input[type="text"]::-ms-input-placeholder {}

/* Internet Explorer */
input[type="text"]:-ms-input-placeholder {}

textarea::placeholder {
    /* プレースホルダーの文字色を指定 */
}

input {
    border-radius: 5px;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    background-color: var(--color-white);
    /*border: 1px solid #CCC;*/
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.16);
}

textarea {
    border-radius: 5px;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    background-color: var(--color-white);
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.16);
}

@media (max-width: 750px) {
    .contact {
        width: 90%;
        padding: 10px 0px;
        margin: 0 auto;
        margin-bottom: 50px;
        max-width: 900px;
    }

    .contact_container {
        background: #fff6c7;
        width: 93%;
        margin: 0 auto;
        margin-bottom: 50px;
        padding: 30px;
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    }
}

/*ーーーーーーーーーーーーーーーーーー

採用情報

ーーーーーーーーーーーーーーーーーーー*/

/* ---------- PC 用 ---------- */
#recruit .content {
    width: 70%;               /* テーブル自体の横幅（固定でもOK） */
    margin: 0 auto 50px;
    table-layout: fixed;      /* 列幅は 1 行目で決定 */
}

/* 1 列目（見出し）を 200px で固定 */
#recruit .content th:first-child,
#recruit .content td:first-child {
    width: 120px;
}

/* 2 列目（本文）は残り全部を使う */
#recruit .content td:last-child {
    width: calc(100% - 200px);
}

/* 共通装飾 */
#recruit .content th,
#recruit .content td {
    border: 1px solid #ccc;
    padding: 20px;
    /* 長い単語も折り返す */
    overflow-wrap: break-word;
    word-break: normal;
    overflow-wrap: anywhere;
}

#recruit .content th {
    background: var(--color-yellow-light);
}

/* ---------- SP 用 ---------- */
@media screen and (max-width: 767px) {
    /* メインのパディングをモバイル用に上書き */
    main {
        padding: 0 10px !important;
    }

    #recruit .content {
        width: 100% !important;
        display: block !important;
        table-layout: auto !important;
        margin: 0 auto 20px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    #recruit .content tr {
        display: block !important;
        margin-bottom: 0 !important;
    }
    #recruit .content th,
    #recruit .content td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 15px !important;
        border: none !important;
    }
    #recruit .content th:first-child,
    #recruit .content td:first-child {
        width: 100% !important;
    }
    #recruit .content td:last-child {
        width: 100% !important;
    }
    #recruit .content th {
        background: var(--color-yellow-light) !important;
        padding-bottom: 8px !important;
        font-size: 0.95em;
        font-weight: bold;
        border-bottom: 1px solid #eee !important;
    }
    #recruit .content td {
        padding-top: 8px !important;
        word-break: normal;
        overflow-wrap: anywhere;
        font-size: 0.9em;
        line-height: 1.8;
    }
    #recruit .content tr + tr th {
        border-top: 1px solid #eee !important;
    }
    /* メールアドレスを一行表示 */
    a[href^="mailto"] {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
}


/*ーーーーーーーーーーーーーーーーーー

投稿ページ

ーーーーーーーーーーーーーーーーーーー*/
#news-single {
    margin-bottom: 50px;
}

#news-single .container {
    text-align: left;
    background-color: var(--color-yellow-primary);
    border-radius: var(--border-radius-m);
    padding: 100px 100px;
}


#news-single h2 {
    font-size: var(--font-size-fixed-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-accent);
    text-align: center;
    margin-bottom: 10px;
}

#news-single .post-date {
    font-weight: var(--font-weight-bold);
    margin-bottom: 50px;
    text-align: center;
    margin-bottom: 10px;
}

.wp-block-image img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    margin-bottom: 24px;
}

#news-single .post-content{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.back-link {
    text-align: right;
}

.back-link a {
    background-color: var(--color-white);
    padding: var(--space-sm);
}

.pagination {
    text-align: center;
    margin-top: 40px;
}

.pagination a,
.pagination span {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 14px;
    border: 1px solid var(--color-blue);
    color: #333;
    text-decoration: none;
    border-radius: 4px;
}

.pagination .current {
    background-color: var(--color-blue-sky);
    color: #fff;
}

@media screen and (max-width: 767px) {
    #news-single .container {
        text-align: left;
        background-color: var(--color-yellow-primary);
        border-radius: var(--border-radius-m);
        padding: 52px 20px;
    }
}

/* =====================
   サービス概要・スケジュール
   ===================== */
#service-overview .box,
#schedule .box {
    background-color: #fff6c7;
    border-radius: 10px;
}

#service-overview h2,
#schedule h2 {
    text-align: center;
    margin-bottom: 30px;
}

#service-overview table,
#schedule table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

#service-overview table th,
#schedule table th {
    background-color: #e85298;
    color: #fff;
    padding: 12px 20px;
    text-align: left;
    white-space: nowrap;
    width: 120px;
    border-bottom: 1px solid #ddd;
}

#service-overview table td,
#schedule table td {
    padding: 12px 20px;
    border-bottom: 1px solid #ddd;
    line-height: 1.8;
}

#schedule .schedule-wrap {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

#schedule .schedule-block {
    flex: 1;
    min-width: 280px;
}

#schedule .schedule-block h3 {
    text-align: center;
    color: #e85298;
    margin-bottom: 15px;
    font-size: 1.2em;
}

@media (max-width: 767px) {
    #schedule .schedule-wrap {
        flex-direction: column;
    }
    #service-overview table th,
    #schedule table th {
        width: 80px;
        padding: 10px;
    }
    #service-overview table td,
    #schedule table td {
        padding: 10px;
    }
}


/* =====================
   お問い合わせページ
   ===================== */

/* 電話案内セクション */
#contact-info .contact-guide {
    text-align: center;
    padding: 20px 0;
}
#contact-info h2 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.5em;
}
#contact-info .contact-guide-text {
    margin-bottom: 25px;
    line-height: 1.8;
    color: #555;
}
.contact-phone-box {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.contact-phone-item {
    text-align: center;
}
.contact-phone-label {
    font-weight: bold;
    color: #e85298;
    margin-bottom: 5px;
    font-size: 1em;
}
.contact-phone-number {
    font-size: 1.8em;
    font-weight: bold;
}
.contact-phone-number a {
    color: #333;
    text-decoration: none;
}
.contact-phone-number a:hover {
    color: #e85298;
}
.contact-phone-hours {
    color: #777;
    font-size: 0.9em;
    margin-bottom: 10px;
}
.contact-form-lead {
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
}

/* CF7フォームのスタイル */
.contact-intro {
    text-align: center;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
    padding-top: 10px;
}
.contact-intro small {
    color: #999;
}
.label-decoration .required {
    color: #e85298;
    font-weight: bold;
    margin-left: 3px;
}
.contact select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    background-color: #fff;
    appearance: auto;
}
.contact .wpcf7-form-control-wrap {
    display: block;
    margin-top: 5px;
}
.submit_btn input[type="submit"] {
    background-color: #e85298;
    color: #fff;
    border: 3px solid #d4447f;
    padding: 18px 70px;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 30px auto 0;
    min-width: 220px;
    box-shadow: 0 4px 8px rgba(232, 82, 152, 0.3);
}
.submit_btn input[type="submit"]:hover {
    background-color: #d4447f;
}

@media (max-width: 767px) {
    .contact-phone-box {
        flex-direction: column;
        gap: 15px;
    }
    .contact-phone-number {
        font-size: 1.5em;
    }
    #contact-info .contact-guide-text {
        font-size: 0.9em;
    }
    .contact-intro {
        font-size: 0.9em;
    }
}

/* ============================================
   アニメーション・動きのあるページ
   ============================================ */

/* スクロールフェードイン */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.fade-in-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* メインビジュアルアニメーション */
#main-visual img {
    animation: slowZoom 20s ease-in-out infinite alternate;
}
@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}
#main-visual {
    overflow: hidden;
}

/* ホバーエフェクト */
.box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section .box:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Q&Aアニメーション */
#qa .qa-list li {
    transition: transform 0.3s ease;
}
#qa .qa-list li:hover {
    transform: translateX(5px);
}

/* ボタンアニメーション */
a[href="/contact"][style*="background-color"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
a[href="/contact"][style*="background-color"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(232,82,152,0.4);
}

/* メールアイコンフロート */
.mail-icon {
    animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ============================================
   スマホレスポンシブ修正
   ============================================ */

/* 採用情報・会社概要 テーブルのモバイル対応 */
@media (max-width: 767px) {
    /* 会社概要ページのテーブル */
    #company table.content {
        width: 100% !important;
        display: block !important;
        table-layout: auto !important;
        margin: 0 auto 30px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    #company table.content tr {
        display: block !important;
    }
    #company table.content th,
    #company table.content td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 15px !important;
        border: none !important;
    }
    #company table.content th {
        background: var(--color-yellow-light) !important;
        font-weight: bold;
        border-bottom: 1px solid #eee !important;
    }
    #company table.content tr + tr th {
        border-top: 1px solid #eee !important;
    }

    /* メールアドレス・電話の改行修正 */
    td a[href^="mailto"] {
        white-space: nowrap;
    }
    
    /* 全体の余白調整 */
    .content__inner {
        padding-left: 10px;
        padding-right: 10px;
    }
    section .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* サービス概要テーブル（ご利用案内ページ） */
    table.content, table.content tr, table.content th, table.content td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    table.content th {
        border-bottom: 1px solid #eee !important;
    }

    /* メールアイコンフロートのモバイル修正 */
    .mail-icon, a.mail-icon, .floating-mail, a[class*="mail"] {
        width: 50px !important;
        height: 50px !important;
        bottom: 15px !important;
        right: 15px !important;
        z-index: 9999 !important;
        position: fixed !important;
    }
    .mail-icon img {
        width: 50px !important;
        height: 50px !important;
    }

    /* お問い合わせ送信ボタン修正 */
    .wpcf7 input[type="submit"], .wpcf7-submit {
        width: 80% !important;
        max-width: 300px !important;
        margin: 20px auto !important;
        display: block !important;
        padding: 15px 20px !important;
        border-radius: 30px !important;
    }

    /* コンテンツがメールアイコンにかぶらないよう下余白 */
    main,
    article {
        padding-bottom: 80px !important;
    }
}


/* ----------------------- メインビジュアル アニメーション ----------------------- */
.mv-animate {
    position: relative;
    overflow: hidden;
}
.mv-animate picture img {
    animation: mvZoomIn 8s ease-out forwards;
    transform-origin: center center;
}
.mv-animate .main-text {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
    animation: mvTextFadeIn 1s ease-out 0.5s forwards;
}
@keyframes mvZoomIn {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes mvTextFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


/* ----------------------- お知らせ記事スタイル ----------------------- */
.single-new_costom .content__inner {
    background: #fff !important;
    padding: 40px 20px !important;
}
.single-new_costom .content__inner article {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}
.single-new_costom .content__inner article h2 {
    font-size: 1.5em;
    line-height: 1.5;
    margin-bottom: 10px;
    text-align: left !important;
    color: #333;
    border-bottom: 3px solid var(--color-pink-deep, #e85298);
    padding-bottom: 15px;
}
.single-new_costom .content__inner article .post-date {
    color: #999;
    font-size: 0.9em;
    margin-bottom: 5px;
}
.single-new_costom .content__inner article .post-content {
    text-align: left !important;
}
.single-new_costom .content__inner article .post-content p {
    text-align: left !important;
    line-height: 1.9;
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #444;
}
.single-new_costom .content__inner .news-section-heading {
    background: #FFF8E1;
    padding: 12px 18px;
    margin: 30px 0 15px;
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    border-left: 4px solid var(--color-pink-deep, #e85298);
    border-radius: 0 6px 6px 0;
}
.single-new_costom .content__inner .news-info-box {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 15px 0 25px;
}
.single-new_costom .content__inner .news-info-box p {
    margin-bottom: 4px;
}
.single-new_costom .content__inner .news-contact-box {
    background: #FFF8E1;
    border: 2px solid #f0d060;
    border-radius: 10px;
    padding: 25px 30px;
    margin: 30px 0 20px;
    text-align: center !important;
}
.single-new_costom .content__inner .news-contact-box p {
    text-align: center !important;
}
.single-new_costom .content__inner .news-contact-box .tel-number {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--color-pink-deep, #e85298);
    margin: 10px 0;
}


/* スクリーンリーダー専用（トップページh1用） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* メインビジュアル h1スタイル */
h1.main-text {
    font-weight: bold;
    margin: 0;
}

/* ----------------------- お知らせ一覧カード改善 ----------------------- */
#new_sub .container .text-area-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#new_sub .container .text-area-link:hover {
    transform: translateY(-2px);
}
#new_sub .container .text-area-link:hover .text-area {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
#new_sub .container .text-area .news-date {
    font-size: 0.8em;
    color: #e85298;
    font-weight: bold;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}
#new_sub .container .text-area .text-right p:last-child {
    font-size: 0.95em;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
}

/* ----------------------- TOPお知らせカード改善 ----------------------- */
#news .container .text-area-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#news .container .text-area-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
#news .container .text-area {
    display: flex;
    align-items: center;
    background: #fff;
    border: none;
    border-left: 4px solid var(--color-pink-deep, #e85298);
    border-radius: 8px;
    padding: 18px 22px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    gap: 15px;
}
#news .container .text-area img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
#news .container .text-area .text-right {
    flex: 1;
    text-align: left;
}
#news .container .text-area .text-right .news-date {
    font-size: 0.8em;
    color: #e85298;
    font-weight: bold;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}
#news .container .text-area .text-right p:last-child {
    font-size: 0.95em;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
}


/* ===== KEN-MOBILE-BLOG-WIDTH : お知らせ記事をスマホで全幅表示 ===== */
@media screen and (max-width: 768px){
  .single-new_costom .content__inner article{ padding: 16px; }
  #news-single .post-content,
  .single-new_costom .content__inner article .post-content{ width: 100%; margin: 0; }
}


/* ===== KEN-MOBILE-TEL : お知らせ記事の電話番号をスマホで1行表示 ===== */
@media screen and (max-width: 768px){
  .post-content a[href^="tel:"]{ white-space: nowrap; font-size: 1.5rem; }
}