@charset "utf-8";

/* 共通
-------------------------------------*/

body.lower {
    overflow-x: hidden;
}

.lower main {
    letter-spacing: 0.15em;
}

.lower .post_box .inner,
.lower main:not(:has(.post_box)),
.blog__single__page__header {
    width: 100%;
    max-width: 1180px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 960px) {
    .lower .post_box .inner,
    .lower main:not(:has(.post_box)),
    .blog__single__page__header {
        width: 90%;
    }
}
@media (max-width: 959px) {
    .lower .post_box .inner,
    .lower main:not(:has(.post_box)),
    .blog__single__page__header {
        max-width: 600px;
    }
}

/* 
@media (min-width: 960px) {
    .lower main {
        padding-top: 30px;
    }

}
@media (max-width: 559px) {
    .lower main {
        padding-top: 20px;
    }
}
*/
/* タイトルタグ
-------------------------------------*/
/* 
.lower h2 {
    font-size: 24px;
    text-align: center;
    color: hsla(var(--maincolor-hsl), 1);
    margin-bottom: 30px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-size: clamp(24px, calc(100vw - 960px), 30px);
}

.lower h3 {
    font-size: 20px;
    text-align: center;
    color: var(--maincolor);
    margin-bottom: 25px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-size: clamp(20px, calc(100vw - 960px), 24px);
}

.lower h4 {
    text-align: left;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 18px;
    color: rgba(108, 145, 142, 1);
    font-size: clamp(18px, calc(100vw - 960px), 20px);
} */
/* 
.lower h2 {
    margin-bottom: 30px;
}

.lower h3 {
    margin-bottom: 25px;
}

.lower h4 {
    margin-bottom: 15px;
} */
/*============================================================

 カスタム投稿用のCSS

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* 画像がダミー画像の際の高さ調整(jsでページ内リンクをスクロールする際にずらさないように指定) */
.post_custom_img img[src$="dummy.png"] {
    box-sizing: content-box;
    height: 0 !important;
}

.post_custom_img img.lazyloaded {
    padding-top: 0 !important;
    width: auto !important;
}

.post_box {
    margin-bottom: 60px;
}

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

.post_custom_img_inner {
    display: inline-block;
    max-width: 100%;
}

@media (min-width: 960px) {

    .post_custom_type03 .post_custom_content,
    .post_custom_type04 .post_custom_content {
        text-box-trim: trim-start;
        text-box-edge: cap alphabetic;
    }
}

.post_custom_box {
    display: grid;
    width: 100%;
    justify-content: space-between;
    grid-template-columns: 100%;
}

/*============================================================

 テキスト画像の縦並び

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@media (min-width: 960px) {

    .post_custom_type01 .post_custom_img,
    .post_custom_type02 .post_custom_content {
        order: 1;
        width: 100%;
        margin-bottom: 20px;
    }

    .post_custom_type01 .post_custom_content,
    .post_custom_type02 .post_custom_img {
        order: 2;
        width: 100%;
    }
}

/*============================================================

 テキスト画像の横並び

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@media (min-width: 960px) {
    .post_custom_colume_type01 {
        grid-template-columns: 35% 60%;
    }
    .post_custom_colume_type01:has(>div:only-child){
        grid-template-columns: 60%;
    }
    .post_custom_colume_type02 {
        grid-template-columns: 45% 50%;
    }
    .post_custom_colume_type02:has(>div:only-child){
        grid-template-columns: 50%;
    }

    .post_custom_colume_type03 {
        grid-template-columns: 30% 50%;
    }
    .post_custom_colume_type03:has(>div:only-child){
        grid-template-columns: 50%;
    }

    .post_custom_colume_type04 {
        grid-template-columns: 25% 70%;
    }
    .post_custom_colume_type04:has(>div:only-child){
        grid-template-columns: 70%;
    }
    
    .post_custom_colume_type05 {
        grid-template-columns: 47.5% 47.5%;
    }
    .post_custom_colume_type_base {
        grid-template-columns: 300px 1fr;
        grid-gap: 20px;
    }
    .post_custom_colume_type_base:has(>div:only-child){
        grid-template-columns: 1fr;
    }

    .post_custom_colume_type03.post_custom_type03 .post_custom_img {
        margin-left: 10%;
    }

    .post_custom_colume_type03.post_custom_type04 .post_custom_content {
        margin-left: 10%;
    }
    .post_custom_type04 {
        direction: rtl;
    }
    .post_custom_type04 > *  {
        direction: ltr;
    }
/* 
    .post_custom_type03 .post_custom_img,
    .post_custom_type04 .post_custom_content {
        order: 1;
    }

    .post_custom_type03 .post_custom_content,
    .post_custom_type04 .post_custom_img {
        order: 2;
    } */
}

@media (max-width: 959px) {
    .post_custom_box>div+div {
        margin-top: 20px;
    }

    .post_custom_img {
        text-align: center;
    }

    .post_box {
        margin-bottom: 40px;
    }
}

/*============================================================

 テキスト画像の表示幅

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 960px) {

    .post_custom_width_type02,
    .post_custom_width_type03,
    .post_custom_width_type04,
    .post_custom_width_type_short,
    .post_custom_width_type_1000 {
        margin-left: auto;
        margin-right: auto;
    }

    .post_custom_width_type02 {
        width: 90%;
    }

    .post_custom_width_type03 {
        width: 75%;
    }

    .post_custom_width_type04 {
        width: 50%;
    }
    .post_custom_width_type_1000 {
        max-width: 1000px;
        width: 100%;
    }
}

.post_custom_width_type_short {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 959px) {

    .post_custom_width_type_short.post_custom_type01 .post_custom_img,
    .post_custom_width_type_short.post_custom_type02 .post_custom_img,
    .post_custom_width_type_short.post_custom_type03 .post_custom_img,
    .post_custom_width_type_short.post_custom_type04 .post_custom_img {
        width: 100%;
    }

    .post_custom_width_type_short.post_custom_img_width_sp_type02 .post_custom_img img {
        max-width: 50%;
    }
}

/*============================================================

 スマホでの画像の表示幅

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (max-width: 959px) {
    .post_custom_img_width_sp_type02 .post_custom_img {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

/*==========================================
fade 調整
==========================================*/
.fadein {
    opacity: 0.01;
    visibility: hidden;
    transition: opacity 1s, visibility 0s, transform 1s;
    transform: translateZ(0);
}

.is-fadein {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
}

.fadeinTop {
    transform: translateY(-50px);
}

.fadeinBottom {
    transform: translateY(50px);
}

.fadeinLeft {
    transform: translatex(-50px);
}

.fadeinRight {
    transform: translatex(50px);
}

.fadeinLeftTop {
    transform: translate(-50px, -50px);
}

.fadeinTop.is-fadein,
.fadeinBottom.is-fadein,
.fadeinLeft.is-fadein,
.fadeinRight.is-fadein,
.fadeinLeftTop.is-fadein {
    transform: translate(0, 0);
}

.post_box_bg[style*="background"] {
    padding-top: 40px;
    padding-bottom: 40px;
}
/* 2カラム
-------------------------------------*/

.column2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.column2>div {
    margin-bottom: 20px;
    padding: 20px;
}

.column2>div>ul {
    margin-bottom: 20px;
}

.column2>div>ul:last-child {
    margin-bottom: 0;
}

@media (min-width: 960px) {
    .column2>div {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .column2.sp_block {
        grid-template-columns: 1fr;
    }
}

/* 3カラム
--------------------------------------- */
.column3 {
    display: grid;
    gap: 30px;
}

.column3>div {
    padding: 24px;
}

@media (min-width: 960px) {
    .column3 {
        grid-template-columns: repeat(3, 1fr);
    }
}


.column3_2 {
    display: grid;
    gap: 30px;
}

.column3_2>div {
    padding: 24px;
}

@media (min-width: 960px) {
    .column3_2 {
        grid-template-columns: repeat(6, 1fr);
    }

    .column3_2>div {
        grid-column: span 2;
    }

    .column3_2>div:nth-child(5n+1) {
        grid-column: 2 / 4;
    }
}

/* スタッフ顔写真
-------------------------------------*/
.staff_comments {
    padding: 20px 20px 20px 100px;
    position: relative;
    display: grid;
    align-items: center;
    min-height: 80px;
    line-height: 1.2;
    font-size: 18px;
    margin-bottom: 30px;
    font-family: "noto sans jp", sans-serif;
}

.staff_comments::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-blend-mode: soft-light;
}

.staff_comments_name {
    font-weight: bold;
}

.staff_comments_en {
    font-size: 80%;
    font-family: yuji-syuku;
    letter-spacing: 0.05px;
}

.staff_comments01::before {
    background: url("") 50% 50% / contain no-repeat;
}

/* 蛍光ペン
-------------------------------------*/
.highlighter {
    background: linear-gradient(180deg, rgba(255, 255, 0, 0) 60%, rgb(255, 255, 0) 60%);
}

/* タブ
------------------------------------------------------------------------------ */

/* 基本設定：ラジオボタン自体は隠す */
input[type="radio"] {
    display: none;
}

/* コンテンツは初期状態で非表示 */
.tab-content {
    display: none;
    padding: 24px;
    /* border: 1px solid #ccc; */
    /* margin-top: -1px; */
    background: #fff;
}

/* --- :has() を使った切り替えロジック --- */

/* #tab1がチェックされている時、.content1を表示 */
.tabs-container:has(#tab1:checked) .content1 {
    display: block;
}

/* #tab2がチェックされている時、.content2を表示 */
.tabs-container:has(#tab2:checked) .content2 {
    display: block;
}

/* #tab3がチェックされている時、.content3を表示 */
.tabs-container:has(#tab3:checked) .content3 {
    display: block;
}

/* --- アクティブなタブ（ラベル）の装飾 --- */

.tab-menu {
    display: flex;
    justify-content: center;
    margin: 30px;
    background: #eee;
    max-width: fit-content;
    margin: 30px auto;
    border-radius: 30px;
    padding: 5px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
}

.tab-menu label {
    padding: 10px 20px;
    cursor: pointer;
    background: #f0f0f0;
    /* border: 1px solid #ccc; */
    border-radius: 30px;
}

/* :has() で選択中のラベルに色をつける */
.tab-menu:has(+ .tab-content) label {
    /* 基本スタイル */
}

.tabs-container:has(#tab1:checked) label[for="tab1"],
.tabs-container:has(#tab2:checked) label[for="tab2"],
.tabs-container:has(#tab3:checked) label[for="tab3"] {
    background: #fff;
    border-bottom-color: transparent;
}

/* iframe
-------------------------------------*/

.youtube_container {
    position: relative;
    padding-top: 56.25%;
}
.youtube_container > iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/*========================================================================

ページ毎のcss

========================================================================*/


/* お問い合わせ
-------------------------------------*/

.contactForm_box {
    max-width: fit-content;
    margin: auto;
}

.input-box {
    margin-bottom: 30px;
}

.input-box .error-message {
    display: none;
    color: #f00;
    font-size: 90%;
}

.input-box .wpcf7-not-valid-tip {
    display: none;
}

.input-box:has(.wpcf7-not-valid-tip) .error-message {
    display: block;
}

.input-wrappr {
    position: relative;
    width: 100%;
    max-width: 400px;
    border: 1px solid #c8ccd4;
}

.post_custom_content .input-wrappr p {
    margin-bottom: 0;
}

.input-wrappr input[type="text"],
.input-wrappr input[type="email"],
.input-wrappr input[type="tel"],
.input-wrappr input[type="date"] {
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 0.5em;
    height: 2.5em;
    font-size: 16px;
    font-weight: 500;
    background: none;
    border-radius: 0;
    transition: all 0.15s ease;
    margin-bottom: 0;
}

.input-wrappr .input-name {
    position: absolute;
    inset: 0em auto auto 1em;
    transform-origin: 0 0;
    transition: all 0.2s ease;
}

.input-wrappr:has(textarea) .input-name,
.input-wrappr:has(select) .input-name,
.input-wrappr:has(input:focus) .input-name,
.input-wrappr:has(input:hover) .input-name,
.input-wrappr:has(input:not(:placeholder-shown)) .input-name {
    font-size: .8em;
    /*    inset -1em; auto auto 1em;*/
    inset: -1em auto auto 1em;
    background: #fff;
    padding: 0 .5em;
}

.input-wrappr select {
    border: 0;
    padding: 15px 0.2em 10px 0.2em;
    width: 100%;
}

.input-wrappr textarea {
    border: 0;
    padding: 15px 0.2em 10px 0.5em;
    width: 100%;
    height: 200px;
}

hr.space {
    border: 0;
    margin: 20px;
}

.input-wrappr:has(input[type="checkbox"]),
.input-wrappr:has(input[type="radio"]) {
    border: 0;
    padding-top: 20px;
}

.wpcf7-checkbox .wpcf7-list-item {
    margin-left: 0;
    display: block;
    margin-bottom: 0.5em;
}

.contactForm_box input[type="checkbox"] {
    display: none;
}

.contactForm_box input[type="checkbox"]+.wpcf7-list-item-label {
    padding-left: 30px;
    position: relative;
}

.contactForm_box input[type="checkbox"]+.wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
}

.contactForm_box input[type="checkbox"]+.wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 8px;
    height: 15px;
    border: 2px solid #000;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
    opacity: 0;
}

.contactForm_box input[type="checkbox"]:checked+.wpcf7-list-item-label::after {
    opacity: 1;
}

.contactForm_box_btn {
    text-align: center;
}

.contactForm_box_btn input {
    -webkit-appearance: none;
    padding: 15px 20px;
    background: #50a2cf;
    ;
    border: 0;
    color: #fff;
    min-width: 200px;
    border-radius: 30px;
    font-size: 18px;
    cursor: pointer;
}

.contactForm_box_btn input:hover {
    opacity: 0.7;
}

.contactForm_box_btn .remove_btn {
    border: 1px solid #333;
    background: #fff;
    color: #333;
    margin-top: 40px;
}

.contactForm_box table {
    margin-bottom: 30px;
}

.contactForm_box table th,
.contactForm_box table td {
    padding: 0.8em 1em;
    text-align: left;
}

.contactForm_box table tr:nth-child(2n+1) th,
.contactForm_box table tr:nth-child(2n+1) td {
    background: #eee;
}

.contactForm_box .wpcf7-spinner {
    position: absolute;
}
div#wpcf7cpcnf {
    position: relative;
}
.wpcf7cp-form-hide .contactForm_box {
    display: none;
}
#wpcf7cpcnf table {
    margin: 0 auto;
    width: unset;
    max-width: fit-content;
}

#wpcf7cpcnf table th,
#wpcf7cpcnf table td {
    /* padding: 20px; */
    /* border-bottom: 1px solid #50a2cf; */
	text-align: left;
    display: block;
}
#wpcf7cpcnf table th {
    padding: 0 20px 0;
}
#wpcf7cpcnf table td {
    /* border-bottom: 1px solid #50a2cf; */
    padding: 0 20px 20px;
}
#wpcf7cpcnf table td >p {
    background: #eee;
    padding: 10px 20px;
}
.wpcf7cp-btns {
    display: grid;
    grid-template-rows: auto auto;
    gap: 30px;
    max-width: 200px;
    margin: 0 auto 20px;
    /* padding: 0 3.75%; */
}
.wpcf7cp-btns .wpcf7cp-cfm-submit-btn {
    color: #fff;
    padding: 15px 20px;
    background: #50a2cf;
    border: 1px solid #50a2cf;
    border-radius: 30px;
}
.wpcf7cp-btns .wpcf7cp-cfm-edit-btn {
    order: 2;
    background: #fff;
    padding: 15px 20px;
    border: 1px solid #50a2cf;
    margin: 0;
    border-radius: 30px;
}
@media (max-width: 559px) {
    .wpcf7cp-btns {
        max-width: fit-content;
        padding: 0 3.75%;
    }
}

/* ================================================
Q&A
================================================ */
.qa_box dl {
    margin-bottom: 1em;
    position: relative;
}

.qa_box dt {
    position: relative;
    padding: 0.7em 2em 1em 4.5rem;
    border-bottom: 1px solid;
    border-bottom-color: currentcolor;
    font-weight: bold;
}

.qa_box dd {
    position: relative;
    background: rgba(141, 165, 160, 0.2);
    overflow: hidden;
    transition: 0.3s;
    height: 0;
}

.qa_box_contens {
    padding: 1.5em 2em 2em 4.5rem;
}

.qa_box dt::before,
.qa_box dt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background: #666;
    transition: 0.3s;
}

.qa_box dt::after {
    transform: translateY(-50%) rotate(90deg);
}

.qa_box dl.active dt::before,
.qa_box dl.active dt::after {
    transform: translateY(-50%) rotate(180deg);
}

.qa_box_title {
    position: relative;
    display: inline-block;
}

.qa_box_title::before {
    content: "Q";
    position: absolute;
    font-size: 20px;
    left: -3rem;
    line-height: 1;
    background: #50a2cf;
    ;
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    display: grid;
    justify-content: center;
    align-items: center;
    font-family: 'Tilt Warp', cursive;
    letter-spacing: 0;
    top: 50%;
    transform: translateY(-50%);
}

.qa_box dd::before {
    content: "A";
    position: absolute;
    font-size: 20px;
    left: 20px;
    top: 1.8rem;
    line-height: 1;
    color: #50a2cf;
    ;
    border: 2px solid #50a2cf;
    ;
    background: #fff;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    display: grid;
    justify-content: center;
    align-items: center;
    font-family: 'Tilt Warp', cursive;
    letter-spacing: 0;
}

.qa_box dt {
    border-color: #50a2cf;
    ;
    font-size: 110%;
    transition: 0.3s;
}

.qa_box dt:hover {
    color: rgba(141, 165, 160, 0.5);
}

@media (max-width: 559px) {
    .qa_box dl::before {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* グーグルマップ
-------------------------------------*/
.googlemap_container iframe {
    width: 100%;
    height: 400px;
}


/* 医療費控除テーブル
------------------------------------------------------------------------------ */
:root {
    --th-bg-color: var(--maincolor);
    --inputbtn-bg: var(--maincolor);
}


.page__deduction .inner {
    max-width: 1420px;
    margin: auto;
    padding: 0 5%;
}

.page__deduction .inner>.post_box>article {
    margin-bottom: 40px;
}

.page__deduction img {
    max-width: 100%;
    height: auto;
}

.deduction__table {
    width: 90%;
    margin: auto;
}

.line3>li {
    margin-bottom: 3%;
}

@media (min-width: 960px) {
    .deduction__table {
        width: 900px;
        max-width: 100%;
    }

    .line3>li {
        width: 33.33%;
        float: left;
        box-sizing: border-box;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .line3>li:nth-child(3n+1) {
        padding-right: 2%;
        clear: left;
    }

    .line3>li:nth-child(3n+2) {
        padding-left: 1%;
        padding-right: 1%;
    }

    .line3>li:nth-child(3n+0) {
        padding-left: 2%;
    }

    .page__deduction .inner>.post_box>article {
        margin-bottom: 60px;
    }

}

.deduction__table th,
.deduction__table td {
    padding: 10px;
    border: 1px solid var(--th-bg-color);
}

.deduction__table th {
    background: var(--th-bg-color);
    color: #fff;
}

.deduction__table tr:nth-last-child(n+2) th {
    border-bottom-color: #fff;
}

.deduction__table td {
    border: 1px solid var(--th-bg-color);
}

.deduction__table input {
    padding: 10px;
    width: calc(100% - 5em);
    font-size: inherit;
}

.price__button {
    text-align: center;
    padding: 20px;
}

.price__button button {
    -webkit-appearance: none;
    border: 0;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background: var(--inputbtn-bg);
    box-shadow: inset 0 0 0 1px var(--inputbtn-bg), inset 0 0 0 2px #000;
}

.price__button button:hover {
    opacity: 0.7;
}


/*-------------------------------------
  検索フォームのデザイン
-------------------------------------*/
/* 全体のデザイン */
.whole-search-wrapper {
  position: relative;
  max-width: 416px;
  margin: 0 0 0 auto; /* 右寄せ */
}


/* 検索フォームのラッパー */
.search-form_wrapper {
  display: flex; /* フレックスボックスを使用 */
  width: 100%;
}


/* 入力欄 */
.search-form_input {
  flex: 1; /* 入力欄をフレックスアイテムとして設定 */
  height: 45px;
  padding: 0.5em 1em;
  background-color: #ffffff;
  border: 1px solid #666666;
  border-right: none; /* ボタンとの境界線を削除 */
  border-radius: 5px 0 0 5px;
  font-size: 14px;
  margin: 0 !important;
}


/* 検索ボタン */
.search-form_button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #70c896; /* 青を設定 */
  color: #ffffff;
  border: 1px solid #666666;
  border-left: none; /* 入力欄との境界線を削除 */
  border-radius: 0 5px 5px 0;
  padding: 0 16px;
  cursor: pointer;
  font-size: 16px;
}


.search-form_input:focus,
.search-form_button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(93,133,110, 0.25); /* フォーカス時のスタイル */
}


.search-form_button:hover {
  background-color: #5d856e; /* ホバー時の色 */
}

@media (min-width: 960px){
  .single__page > .inner {
    display: grid;
    grid-template-columns: 1fr 300px;
    max-width: 1180px;
    margin: auto;
    width: 90%;
    gap: 20px;
    align-items: start;
  }
}

.search_list {
  max-width: fit-content;
  margin: auto;
  width: 90%;
}
.search_list > li {
  border-bottom: 1px solid #ccc;
  padding: 5px;
}