@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;
    font-family: "Zen Kaku Gothic New", serif;
    line-height: 1.6;
}


img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
}


ul {
    padding: 0;
    list-style: none;
}


a {
    color: inherit;
    text-decoration: none;
}

a:focus {
    outline: 2px solid #555;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* .zen-kaku-gothic-new-light {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.zen-kaku-gothic-new-regular {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.zen-kaku-gothic-new-medium {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.zen-kaku-gothic-new-bold {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.zen-kaku-gothic-new-black {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
    font-style: normal;
} */


/* header */

header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #161666;
    height: 90px;
    background-color: #ffffffc0;
    z-index: 500;
    transition: all 0.3s ease;
}

header h1 a {
    width: 220px;
    margin: 10px 0 0 50px;
    text-align: center;
    font-weight: normal;
    display: flex;
    align-items: center;
    font-size: 20px;
    transition: all 0.3s ease;

}


header h1 .logo {
    width: 40px;
    margin: 0 10px 0 0;
}

header h1 p {
    line-height: 15px;
    text-align: center;
    letter-spacing: 2px;
}

header h1 p span {
    font-size: 10px;
}

header ul.pc_nav {
    display: flex;
    margin: 0 20px 0 0;
    width: 500px;
    transition: all 0.5s ease;
}

header ul.pc_nav li {
    margin: 0 20px;
    font-size: 13px;
    width: fit-content;
    line-height: 15px;
    position: relative;
    text-align: center;
}

/* スクロール時のスタイル */
header.scrolled h1 {
    opacity: 0;
    transform: translateY(-50px);
}

header.scrolled ul {
    font-size: 16px;
    width: 100%;
    position: absolute;
    justify-content: center;
}



header ul.pc_nav li span {
    font-size: 10px;
}

header ul.pc_nav li a::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #161666;
    bottom: 5px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

header ul.pc_nav li a:hover::after {
    visibility: visible;
    bottom: -5px;
    opacity: 1;
}

/* ハンバーガーメニューボタン（初期は非表示） */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: relative;
margin: 0;
padding: 0;
}

.hamburger__line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #161666;
    margin: 4px 0;
    border-radius: 20px;
}







/* モバイル用ナビゲーション（初期は非表示） */
.mobile_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff95;
    z-index: 999;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

/* ヘッダー部分は固定 */
.mobile-nav-header {
    background-color: #fff;
    color: #161666;
    border-bottom: 1px solid #1616661a;
    width: 100%;
    padding: 0 3% 0 3%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.mobile_nav h1 {
    width: 220px;
    /* margin: 10px 0 0 10px; */
    text-align: center;
    font-weight: normal;
    display: flex;
    align-items: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.mobile_nav h1 .logo {
    width: 40px;
    margin: 0 10px 0 0;
}

.mobile_nav h1 p {
    line-height: 15px;
    text-align: center;
    letter-spacing: 2px;
}

.mobile_nav h1 p span {
    font-size: 10px;

}






/* ナビゲーションのリスト部分 */
.mobile_nav .mobile-nav-ul {
    list-style: none;
    padding: 90px 15px 200px 15px;
    margin: 0 0 0 auto;
    background-color: #fff;
    width: 83%;
    max-height: calc(110vh - 80px);
    /* ヘッダー部分の高さを引く */
    overflow-y:auto
}

.mobile_nav li {
    margin-bottom: 15px;
    color: #161666;
    padding: 10px;
}

.mobile_nav li span {
    font-size: 13px;
}

.mobile_nav li button span {
    font-size: 20px;
}

/* アコーディオン関連 */



.accordion-item{
        border-bottom: 1px solid #1616663a;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header a {
    color: #161666;
    /* 親メニューのリンク色 */
    width:80%;
    text-decoration: none;
    /* font-weight: bold; */
}

/* 開閉ボタン */
.accordion-toggle {
    background: none;
    border: none;
    color: #161666;
    font-size: 20px;
    cursor: pointer;
    /* アイコンを回転させる場合などは transform を利用 */
}

.toggle-icon {
    font-size: 18px;
}

/* サブメニューはデフォルトで非表示 */
.accordion-content {
    display: none;
    margin-left: 15px;
    padding: 10px 20px 10px 0px;
    margin: 0;
    /* 階層がわかるように少しインデント */
}

.accordion-content li {
    width: 96%;
    margin-bottom: 10px;
    padding: 10px 2%;
    border-bottom: 1px dashed #161666;
}

.accordion-content li a {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- スマホ用 --- */
@media screen and (max-width: 768px) {
    header {
        width: 100%;
        padding: 10px 3%;
        height: auto;
        flex-direction: row;
        justify-content: space-between;
    }


        header h1 a {
            width: 220px;
            margin: 10px 0 0 0px;
            text-align: left;
            font-weight: normal;
            display: flex;
            align-items: center;
            font-size: 18px;
            transition: all 0.3s ease;

        }
    
    



    /* PC用メニューを非表示 */
    header .pc_nav {
        display: none !important;
    }

    /* ハンバーガーメニューボタン表示 */
    .hamburger {
        display: block;
    }

           .accordion-item   button{
            width: 25px;
            padding: 0;
           }

    .toggle-icon {
       width: 20px;
    }
}

.hamburger {
    cursor: pointer;
    transition: all 0.3s ease;
}

.hamburger .hamburger__line {
    transition: all 0.3s ease;
}

/* is-active クラスが付いたときのアニメーション */
.hamburger.is-active .hamburger__line:nth-child(1) {
    transform: translateY(7.1px) rotate(45deg);
}

.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .hamburger__line:nth-child(3) {
    transform: translateY(-7.1px) rotate(-45deg);
}

/* メニュー展開時用クラス */
.mobile_nav.-active {
    transform: translateX(0);
}

/* アコーディオンが開いた状態のクラスを付与したら表示 */
.accordion-content.open {
    display: block;
}

/* スクロール時（スマホ用）：ヘッダー全体を上に隠す例 */
@media screen and (max-width: 768px) {
    header {
        transition: transform 0.3s ease;
    }

    header.scrolled-mobile {
        transform: translateY(-100%);
    }
}









/* 全体の土台 */
.mobile-bottom-bar {
    display: none;
    position: fixed;
    /* 画面下部に固定 */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #161666;
    /* お好みの緑色 */
    z-index: 9999;
    /* 前面に表示 */
    padding: 10px 0;
    margin: 0 auto;
}

/* リスト全体のレイアウト */
.mobile-bottom-bar ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    /* 均等配置 */
    align-items: center;
    margin: 0;
    padding: 0;
}

/* 各アイテム共通 */
.mobile-bottom-bar li a {
    display: flex;
    flex-direction: column;
    /* アイコン + テキストを縦配置 */
    align-items: center;
    text-decoration: none;
    color: #fff;
    /* テキスト色は白 */
    font-size: 13px;
}

/* アイコン画像のサンプルスタイル */
.mobile-bottom-bar li a i {
    /* width:28px; */
    font-size: 28px;
    /* height: 28px; */
    margin-bottom: 3px;
}

/* 中央の茶色い丸ボタンだけ、円形にして上に突き出す */
.phone-btn-wrapper {
    /* 他の要素と重ならないように z-index を設定 */
    z-index: 10000;
}




/* 茶色い円形ボタン */
.mobile-bottom-bar .phone-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #fff;
    /* お好みの茶色 */
    display: flex;
    color: #161666;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -30px;
    padding: 10px;
    /* 緑バーより上に出す(高さの半分をマイナス) */
    border: 2px solid #a3a3a3;
    /* 円の外周に緑色の境界を入れる例 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.phone-circle span {
    color: #161666;
}

/* 円の中のアイコン */
.phone-circle i {
    font-size: 25px;
    margin-bottom: 3px;
}

/* メディアクエリ等は必要に応じて追加 */
@media screen and (max-width: 768px) {
    .mobile-bottom-bar {
        display: block;
    }

    .mobile-bottom-bar li a {
        font-size: 12px;
    }

    .phone-circle {
        width: 50px;
        height: 50px;
        margin-top: -25px;
    }

    .phone-circle img {
        width: 20px;
        height: 20px;
    }
}

#phone-status {
    position: absolute;
    top: -40px;
    font-size: 12px;
}






.custom-slider-section {
    margin: 50px auto;
}

.custom-slider-section .swiper-slide img {
    width: 100%;
    height: 230px;
    /* 高さ指定 */
    object-fit: cover;
    /* 画像がエリアにフィット */
}



.custom-slider-section .swiper-container {
    width: 100%;
    height: 230px;
    /* スライダーの高さを指定 */
    overflow: hidden;
}

.custom-slider-section .swiper-wrapper {
    display: flex;
    /* スライドを横並びに配置 */
}

.custom-slider-section .swiper-slide {
    flex: 0 0 auto;
    /* スライドが自動的に幅を取るように */
    margin-right: 10px;
    /* スライド間の余白 */
}

.mySwiperLeft {
    overflow: hidden;
    display: flex;
    margin: 20px auto;
}

@media (min-width: 768px) {
    .custom-slider-section .swiper-slide {
        width: calc(25% - 10px);
        /* 幅の調整と余白を考慮 */
    }
}








/* ======================================
   【基本スタイル】
====================================== */

/* ------------- Promo Section ------------- */
.promo-section {
    display: flex;
    justify-content: center;
    padding: 50px 20px 80px;
    /* background-color: red; */
     align-items: center;
}

.promo-social {
    width: 400px;
    height: 200px;
    background-size: cover;
    margin: 0 20px;
}

/* .promo-recruit {
    background-image: url("../img/page/other/banner_recruit.webp");
}

.promo-social {
    background-image: url("../img/page/other/banner_instagram.png");
} */

/* ------------- Contact Section ------------- */
.contact-section {
    display: flex;
}

.map-container {
    width: 50%;
    height: 450px;
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

.contact-info {
    width: 50%;
    height: 450px;
    padding: 10px 30px;
}

.contact-info ul li {
    display: flex;
    align-items: center;
    width: 80%;
    margin: auto;
    padding: 20px;
    font-size: 18px;
    border-bottom: 1px solid #161666;
}

.contact-info ul li:first-child {
    font-size: 25px;
    font-weight: bold;
    color: #161666;
    border-bottom: 2px solid #161666;
}

.contact-info ul li .logo {
    width: 35px;
    height: 35px;
    margin-right: 10px;
}

.contact-info ul li span {
    width: 20%;
    margin-right: 20px;
}

.hours-schedule {
    width: 100%;
    margin: auto;
    font-size: 13px;
}

.hours-schedule table {
    width: 85%;
    margin: 20px auto;
    background-color: #a3a3a3;
}

.hours-schedule th,
.hours-schedule td {
    padding: 10px;
    text-align: center;
}

.hours-schedule td {
    background-color: #fff;
}










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

.promo-recruit,
    .promo-social {
        width: 90%;
        height: fit-content;
        margin: 10px auto;
    }


}


/* footer */



/* ------------- Footer ------------- */
footer {
    display: flex;
    position: relative;
    padding: 50px 3% 80px;
    background-color: #161666;
    color: #fff;
}

.footer-branding {
    padding-right: 150px;
}

.footer-branding h1 {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    letter-spacing: 3px;
    font-weight: normal;
}

.footer-branding h1 .logo {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.footer-branding ul {
    display: flex;
}

.footer-branding ul li {
    background-color: #fff;
    color: #161666;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 13px;
    margin-right: 10px;
}

.footer-address {
    line-height: 40px;
    letter-spacing: 1px;
}

.footer-address span {
    font-size: 33px;
}

.footer-nav {
    display: flex;
    padding: 0;
    border-left: 0.5px solid #7d7d7d;
}

.footer-nav ul {
    padding-left: 60px;
}

.footer-nav ul li {
    display: flex;
    margin-bottom: 30px;
    align-items: center;
}

.footer-copy {
    position: absolute;
    bottom: 10px;
    width: 94%;
    text-align: center;
}

.footer-nav .sub-nav {
    padding-left: 30px;
    font-size: 13px;
}



.footer-nav ul li i {
    margin: 0 20px 0 0;
    font-size: 10px;
}

/* ======================================
   【レスポンシブ設定】
====================================== */

/* ---------- iPad（1024px以下） ---------- */
@media (max-width: 1024px) {
    .promo-section {
        padding: 60px 20px;
    }

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

    .map-container,
    .contact-info {
        width: 100%;
    }

    .map-container iframe {
        height: 350px;
    }

    .contact-info {
        padding: 20px 10px;
    }

    .contact-info ul li {
        font-size: 16px;
        padding: 15px;
        width: 90%;
    }

    .contact-info ul li:first-child {
        font-size: 20px;
    }

    .contact-info ul li .logo {
        width: 30px;
        height: 30px;
    }

    .contact-info ul li span {
        width: 25%;
        margin-right: 10px;
    }

    .hours-schedule table {
        width: 95%;
        font-size: 12px;
    }

    footer {
        flex-direction: column;
        padding: 50px 3% 50px;
    }

    .footer-branding {
        padding: 0;
        text-align: center;
    }

    .footer-branding h1 {
        justify-content: center;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .footer-branding h1 .logo {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }

    .footer-branding ul {
        justify-content: center;
        flex-wrap: wrap;
        padding: 0;
    }

    .footer-branding ul li {
        margin: 5px;
        font-size: 12px;
    }

    .footer-address {
        text-align: center;
        font-size: 14px;
        line-height: 1.4;
    }

    .footer-nav {
        border-left: none;
        padding: 10px;
        margin: 20px auto 0;
        text-align: center;
    }

    .footer-nav ul {
        margin: 10px 30px;
    }

    .footer-nav ul li {
        font-size: 14px;
    }

    .footer-nav .sub-nav {
        display: none;
    }

    .footer-copy {
        font-size: 15px;
    }
}

/* ---------- スマートフォン（768px以下） ---------- */

@media (max-width: 768px) {
    .promo-section {
        display: block;
        margin: auto;
        padding: 0 10px;
        width: 100%;
    }

    .promo-recruit,
    .promo-social {
        width: 100%;
        height: fit-content;
        object-fit: cover;
        margin: 10px auto;
        max-width: none;
    }

    .contact-section {
        display: none;
    }

    footer {
        flex-direction: column;
        padding: 40px 5% 100px;
    }

    .footer-branding h1 {
        font-size: 28px;
        margin: 0;
        text-align: left;
        width: fit-content;
        align-items: center;
    }

    .footer-branding h1 .logo {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .footer-branding ul {
        width: fit-content;
        margin: 20px 0;
    }

    .footer-branding ul li {
        font-size: 13px;
        padding: 2px 5px;
    }

    .footer-address {
        font-size: 15px;
        text-align: left;
        margin-bottom: 20px;
        line-height: 2;
    }

    .footer-nav {
        display: block;
        text-align: left;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .footer-nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .footer-nav ul li {
        font-size: 15px;
        padding: 20px 10px;
        margin: 0 auto;
        border-bottom: 1px solid #ffffff8d;
    }

               .footer-nav ul li a{
                    width: 100%;
                }
    .footer-copy {
        font-size: 10px;
        margin-top: 20px;
        position: static;
    }
}
/* PC（デフォルト） */
.page_header {
    background-image: url("../img/page/other/page_header.webp");
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.page_header .page_header_title {
    margin: 0;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    padding: 40px 100px 20px;
    font-size: 30px;
    letter-spacing: 2px;
    font-weight: normal;
    border-top-right-radius: 50px;
    line-height: 40px;
}

.page_header .page_header_title span {
    font-size: 13px;
}

.pan {
    background-color: #3B3D6A;
    color: #fff;
    padding: 10px 30px 10px 56px;
    letter-spacing: 5px;
    font-size: 13px;
}

/* iPad向け（1024px以下） */
@media (max-width: 1024px) {
    .page_header {
        height: 250px;
    }

    .page_header .page_header_title {
        padding: 30px 80px 15px;
        font-size: 24px;
        line-height: 20px;
    }

    .page_header .page_header_title span {
        font-size: 11px;
    }

    .pan {
        padding: 8px 20px 8px 40px;
        letter-spacing: 3px;
        font-size: 12px;
    }
}

/* スマートフォン向け（768px以下） */
@media (max-width: 768px) {
    .page_header {
        height: 180px;
    }

    .page_header .page_header_title {
        padding: 20px 40px 10px 40px;
        font-size: 20px;
        line-height: 17px;
        border-top-right-radius: 30px;
    }

    .page_header .page_header_title span {
        font-size: 10px;
        margin: 0 0 0 3px;
    }

    .pan {
        padding: 7px 0 7px 20px;
        letter-spacing: 1px;
        font-size: 10px;
    }
}


/* ===== セクションタイトル ===== */
.section-title {
    font-weight: normal;
    font-size: 33px;
    display: flex;
    align-items: center;
    margin: 0 0 50px;
    position: relative;
}

.section-title:before {
    content: "";
    border-top: 1px solid;
    width: 100px;
    margin-right: 1em;
}



/* top */

.top {
    padding: 90px 20px;
    position: relative;

}

.swiper {
    border-radius: 20px;
    width: 100%;
    height: 90vh;
}

@keyframes zoomUp {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.20);
    }
}

/* アクティブなスライドの画像にズームアップアニメーション */
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
    animation: zoomUp 6s linear both;
}

.swiper-button-next,
.swiper-button-prev {
    display: none !important;
}

.swiper-slide img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/* タイトルの配置 */
.top h2 {
    position: absolute;
    z-index: 300;
    font-size: 65px;
    top: 240px;
    left: 100px;
    color: #fff;
    font-weight: normal;
    line-height: 45px;
    font-family: serif;
    margin: 0;
}

.top h2 p {
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0;
}

/* ■ レスポンシブ対応 ■ */

/* iPad用（1024px以下） */
@media (max-width: 1024px) {
    .swiper {
        height: 80vh;
    }

    .swiper-slide img {
        height: 80vh;
    }

    .top h2 {
        font-size: 50px;
        top: 200px;
        left: 50px;
        line-height: 40px;
    }

    .top h2 p {
        font-size: 16px;
    }
}

/* スマートフォン用（768px以下） */
@media (max-width: 768px) {
    .top {
        padding: 80px 10px;
    }


    .swiper {
        height: 75vh;
    }

    .swiper-slide img {
        height: 75vh;
    }

    .top h2 {
        font-size: 30px;
        top: 230px;
        left: 50px;
        line-height: 30px;
        text-align: center;
    }

    .top h2 p {
        font-size: 10px;
    }
}








/* トップ　診療時間の動くボード */

.ch {
    font-size: 20px;
    position: fixed;
    right: 0;
    top: 400px;
    display: flex;
    transition: top 0.3s ease, right 0.3s ease;
}

.consultation_hour {
    z-index: 100;
}

.consultation_hour_2nd {
    z-index: 90;
}


.chb {
    border: 0.3px solid #fff;
    background-color: #161666;
    color: #fff;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 25px;
    
    writing-mode: vertical-rl;
    padding: 20px 10px;
    letter-spacing: 6px;
    cursor: pointer;
}

.chb i {
    font-size: 20px;
    margin: 0;
}

.ch table {
    background-color: #a3a3a3;
}


.ch th,
.ch td {
    padding: 0 30px;
    text-align: center;
}

.ch td {
    background-color: #fff;
}

.ch table thead {
    background-color: #626370;
    font-size: 20px;
    color: #fff;
}


.consultation_hour.scrolled {
    right: -925px;
}

.consultation_hour.open {
    right: -1025px;
}

.consultation_hour_2nd.closed {
    right: -836px;
}

.consultation_hour_2nd.open {
    top: 400px;
    right: 0;
}


@media (max-width: 1024px) {

.ch {
        top: 400px;
    }

.chb {
        font-size: 20px;
        padding: 12px 10px;
    }

  .ch th,
   .ch td {
        padding: 0 20px;
        font-size: 18px;
    }

    .consultation_hour_2nd.closed {
        right: -680px;
    }

    .consultation_hour_2nd.open {
        top: 400px;
        right: 0;
    }


}


@media (max-width: 768px) {

.ch {
        top: 350px;
        display: none;
    }

.chb {
        font-size: 18px;
        padding: 10px 8px;
        display: none;
    }


   .ch th,
    .ch td {
    padding: 0 15px;
   font-size: 16px;
    }
}



/* スクロールダウン */


.scroll_down {
    display: none;
}


@media (max-width: 768px) {

    .scroll_down {
        display: block;
        position: absolute;
        width: 80%;
        height: 100vh;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 10;
    }

    .scroll_down:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80%;
        background: linear-gradient(180deg, rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%);
    }

    .scroll_down a {
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 13px;
        padding: 10px 10px 110px;
        color: #3B3D6A;
        font-size: 14px;
        font-family: 'Josefin Sans', sans-serif;
        line-height: 1;
        letter-spacing: .2em;
        text-transform: uppercase;
        text-decoration: none;
        writing-mode: vertical-lr;
        transition: .2s;
        overflow: hidden;
        margin: auto;
    }

    .scroll_down a:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 1px;
        height: 100px;
        background: #ddd;
    }

    .scroll_down a:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 1px;
        height: 100px;
        background: #3B3D6A;
    }

    .scroll_down a:hover {
        opacity: .5;
    }

    #type01 a:after {
        animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
    }

    @keyframes sdl01 {
        0% {
            transform: scale(1, 0);
            transform-origin: 0 0;
        }

        50% {
            transform: scale(1, 1);
            transform-origin: 0 0;
        }

        50.1% {
            transform: scale(1, 1);
            transform-origin: 0 100%;
        }

        100% {
            transform: scale(1, 0);
            transform-origin: 0 100%;
        }
    }


}


/* ■ 基本スタイル ■ */
.message {
    width: 100%;
    overflow: hidden;
}

.message h3 {
    text-align: center;
    font-weight: normal;
    line-height: 70px;
    letter-spacing: 2px;
    /* 必要に応じて font-size も追加可能 */
}

/* スワイパーのコンテナ */
.message-container {
    width: 100%;
    height: fit-content;
    /* コンテンツに合わせた高さ */
    margin: 150px auto;
}

/* 各スライド内の画像 */
.message-slide img {
    width: 90%;
    height: 400px;
    border-radius: 20px;
    object-fit: cover;
}

/* スライドの上下オフセット（凸凹効果） */
.message-slide:nth-child(odd) {
    transform: translateY(-60px);
}

.message-slide:nth-child(even) {
    transform: translateY(60px);
}

/* スワイパーラッパーのトランジション */
.message .swiper-wrapper {
    transition-timing-function: linear;
}

/* ■ レスポンシブ対応 ■ */

/* iPad用（1024px 以下） */
@media (max-width: 1024px) {
    .message h3 {
        line-height: 60px;
        font-size: 1.2em;
        /* 調整例 */
    }

    .message-container {
        margin: 100px auto;
    }

    .message-slide img {
        height: 350px;
    }

    .message-slide:nth-child(odd) {
        transform: translateY(-40px);
    }

    .message-slide:nth-child(even) {
        transform: translateY(40px);
    }
}

/* スマートフォン用（768px 以下） */
@media (max-width: 768px) {
    .message h3 {
        line-height: 45px;
        font-size: 0.9em;
        /* さらに小さめに */
    }

    .message-container {
        margin: 100px auto 50px;
    }

    .message-slide img {
        height: 200px;
    }

    .message-slide:nth-child(odd) {
        transform: translateY(-20px);
    }

    .message-slide:nth-child(even) {
        transform: translateY(20px);
    }
}

/* ■ 基本スタイル ■ */
.Topics {
    margin: 50px auto;
    font-family: serif;
    background-color: #161666;
    color: #f3f3f3;
    padding: 100px 4% 50px;
    display: flex;
    position: relative;
    align-items: flex-start;
}

.Topics h3 {
    writing-mode: vertical-rl;
    font-size: 40px;
    letter-spacing: 15px;
    margin: 0 20px 0 0;
}

.Topics ul {
    width: 90%;
    margin: auto;
    list-style: none;
    padding: 0;
}

.Topics ul .alert {
    width: fit-content;
    background-color: #C22E2E;
    padding: 1px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin: 0 0 20px;
    border: none;
}

.Topics ul .alert img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
}

.Topics ul li {
    margin-bottom: 20px;
    border-bottom: 1px solid #fff;
    padding: 15px 10px;
}

.Topics ul li h4 {
    margin: 15px 0;
    font-size: 25px;
    font-weight: normal;
}

.Topics ul li .text {
    line-height: 40px;
    color: #a3a3a3;
}

.Topics .topics_btn {
    display: flex;
    justify-content: flex-end;
    margin: 50px 0 0;
}

.Topics .topics_btn a {
    border: 1px solid #fff;
    width: fit-content;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}

/* ■ iPad向け（1024px以下） ■ */
@media (max-width: 1024px) {
    .Topics {
        padding: 80px 4% 40px;
        /* スタック表示に変更 */
        flex-direction: column;
        align-items: center;
    }

    .Topics h3 {
        /* 縦書きを横書きに変更すると見やすい場合も */
        writing-mode: horizontal-tb;
        font-size: 35px;
        letter-spacing: 15px;
        margin-bottom: 20px;
        text-align: center;
    }

    .Topics ul {
        width: 100%;
    }

    .Topics ul li {
        padding: 12px 10px;
        margin-bottom: 15px;
    }

    .Topics ul li h4 {
        font-size: 22px;
        margin: 12px 0;
    }

    .Topics ul li .text {
        line-height: 35px;
        font-size: 16px;
    }

    .Topics .topics_btn {
        margin: 40px 0 0;
        justify-content: center;
    }

    .Topics .topics_btn a {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* ■ スマートフォン向け（768px以下） ■ */
@media (max-width: 768px) {
    .Topics {
        padding: 50px 4% 30px;
        flex-direction: column;
        align-items: center;
    }

    .Topics h3 {
        writing-mode: horizontal-tb;
        font-size: 30px;
        letter-spacing: 5px;
        margin-bottom: 20px;
        text-align: center;
    }

    .Topics ul {
        width: 100%;
    }

    .Topics ul li {
        padding: 10px 8px;
        margin-bottom: 12px;
    }

    .Topics ul li h4 {
        font-size: 18px;
        margin: 10px 0;
    }

    .Topics ul li .text {
        line-height: 25px;
        font-size: 13px;
    }

    .Topics .topics_btn {
        margin: 30px 0 0;
        justify-content: center;
    }

    .Topics .topics_btn a {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* ■ 基本スタイル ■ */
.Medical {
    padding: 100px 6%;
}

.Medical h3 {
    font-size: 40px;
    margin: 10px auto 20px;
    letter-spacing: 10px;
    color: #161666;
    text-align: center;
}

.Medical h3 span {
    font-size: 20px;
    color: #333;
}

.Medical .text {
    width: fit-content;
    margin: auto;
    line-height: 30px;
    color: #161666;
    margin-bottom: 40px;
}

.Medical ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 auto 50px;
}

.Medical ul li {
    width: 32.3%;
    margin: 10px 0;
    padding: 130px 10px 10px 0;
    background-size: cover;
    position: relative;
    box-sizing: border-box;
    border-radius: 10px;
}

.Medical ul li a {
    text-decoration: none;
    color: inherit;
}

.Medical ul li h4 {
    background-color: #ffffff;
    width: fit-content;
    padding: 3px 5px;
    font-size: 20px;
    margin: 0 0 10px;
}

.Medical ul li p {
    background-color: #fff;
    padding: 3px 5px;
    width: fit-content;
    margin: 0;
    font-size: 14px;
}



/* 背景画像指定 */
.m_1 {

    animation-duration: 1s;
    background-image: url("../img/top/Services_01.JPG");
}

.m_2 {
    animation-duration: 1.5s;
    background-image: url("../img/top/Services_02.webp");
}

.m_3 {
    animation-duration: 2s;
    background-image: url("../img/top/Services_03.webp");
}

.m_4 {
    animation-duration: 2.5s;
    background-image: url("../img/top/Services_04.webp");
}

.m_5 {
    animation-duration: 3s;
    background-image: url("../img/top/Services_05.webp");
}

.m_6 {
    animation-duration: 3.5s;
    background-image: url("../img/top/Services_06.webp");
}

.m_7 {
    animation-duration: 4s;
    background-image: url("../img/top/Services_07.webp");
}

.m_8 {
    animation-duration: 4.5s;
    background-image: url("../img/top/Services_08.webp");
}

.m_9 {
    animation-duration: 5s;
    background-image: url("../img/top/Services_09.webp");
}

.m_10 {
    animation-duration: 5.5s;
    background-image: url("../img/top/Services_10.JPG");
}

.m_11 {
    animation-duration: 6s;
    background-image: url("../img/top/Services_11.webp");
}

.m_12 {
    animation-duration: 6.5s;
    background-image: url("../img/top/Services_12.webp");
    background-position: center;
}



.Medical .m_ather {
    background-image: url("../img/top/md_ather.png");
    background-size: cover;
    padding: 40px;
    box-shadow: 10px 10px 15px -10px;
    margin-top: 20px;
}


.last-service-item{
background-position: center;
background-image: url("../img/top/md_ather.png");
}



.Medical .m_ather h4 {
    text-align: right;
    width: fit-content;
    margin: 0 0 0 auto;
    color: #161666;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 3px;
    line-height: 40px;
}

.Medical .top_click {
    text-align: center;
    margin: 10px auto;
    letter-spacing: 5px;
}

/* ■ iPad向け（1024px以下） ■ */
@media (max-width: 1024px) {
    .Medical {
        padding: 80px 4%;
    }

    .Medical h3 {
        font-size: 35px;
        letter-spacing: 8px;
    }

    .Medical h3 span {
        font-size: 18px;
    }

    .Medical .text {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 30px;
        text-align: center;
    }

    .Medical ul li {
        width: 45%;
        padding: 80px 8px 8px 0;
        margin: 10px 0;
    }

    .Medical ul li h4 {
        font-size: 22px;
    }

    .Medical ul li p {
        font-size: 14px;
    }

    .Medical .m_ather {
        padding: 30px;
    }

    .Medical .m_ather h4 {
        font-size: 18px;
        line-height: 34px;
        letter-spacing: 2px;
    }

    .Medical .top_click {
        font-size: 16px;
    }
}

/* ■ スマートフォン向け（768px以下） ■ */
@media (max-width: 768px) {
    .Medical {
        padding: 0 4%;
    }

    .Medical h3 {
        font-size: 30px;
        letter-spacing: 6px;
        text-align: center;
    }

    .Medical h3 span {
        font-size: 16px;
    }

    .Medical .text {
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        margin-bottom: 20px;
    }

    .Medical ul {
        justify-content: space-between
    }

    .Medical ul li {
        width: 48%;
        padding: 60px 3px 3px;
        margin: 5px 0;
        border-radius: 10px;
    }

    .Medical ul li h4 {
        font-size: 16px;
        font-weight: normal;
    }

    .Medical ul li p {
        display: none;
    }

    .Medical .Medicals_btn a {
        font-size: 14px;
        padding: 5px 8px;
    }

    .Medical .m_ather {
        display: none;
    }

    .Medical .top_click {
        display: none;
    }



}





/* ■ 基本スタイル ■ */
.feature {
    background-color: #161666;
    color: #fff;
    padding: 100px 4%;
}

.feature h3 {
    font-size: 40px;
    letter-spacing: 10px;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature .feature_img {
    width: 70px;
    margin-bottom: 10px;
}

.feature .feature_img img {
    width: 100%;
    height: auto;
}

.feature .text {
    width: fit-content;
    margin: 0 auto 40px;
    line-height: 30px;
    text-align: center;
    width: 80%;
}

.feature ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px auto;
    padding: 0;
    list-style: none;
}

.feature ul li {
    width: 32%;
    background-color: #fff;
    color: #333;
    margin: 10px 0;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 5px;
}

.feature ul li img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.feature ul li h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    font-size: 18px;
}

.feature ul li h4 .btn {
    border-radius: 10px;
}


.feature ul li h4 .feature_li_title{
    border-radius: 10px;
    font-weight: normal;
    padding: 0px 10px;
    font-size: 13px;
    background-color: #3b3d6ab1;
    color: #fff;

    
}

.feature ul li h4 a {
    color: #161666;
    background-color: #f3f3f3;
    padding: 3px 5px;
    text-decoration: none;
    font-size: 14px;
}

.feature .feature_btn {
    text-align: center;
    margin: 50px auto 20px;
}

.feature .feature_btn a {
    border: 1px solid #fff;
    padding: 10px 40px;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.3s ease;
}

.feature .feature_btn a:hover {
    background-color: #fff;
    color: #161666;
}

/* ■ iPad向け（1024px以下） ■ */
@media (max-width: 1024px) {
    .feature {
        padding: 80px 4%;
    }

    .feature h3 {
        font-size: 32px;
        letter-spacing: 8px;
    }

    .feature .text {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 30px;
    }

    .feature ul li {
        width: 48%;
        margin: 10px 1%;
    }

    .feature ul li h4 {
        font-size: 16px;
        margin: 8px;
    }

    .feature ul li h4 a {
        font-size: 13px;
        padding: 2px 4px;
    }

    .feature .feature_btn a {
        padding: 8px 30px;
        font-size: 16px;
    }
}

/* ■ スマートフォン向け（768px以下） ■ */
@media (max-width: 768px) {
    .feature {
        padding: 20px 4% 40px;
    }

    .feature h3 {
        font-size: 28px;
        letter-spacing: 6px;
    }

    .feature .text {
        font-size: 15px;
        line-height: 27px;
        margin-bottom: 20px;
        width: 80%;
    }

    .feature ul {

        align-items: center;
        flex-wrap: wrap;
        margin: 20px auto 0;
        padding: 0;
    }

    .feature ul li {
        width: 48%;
        margin: 10px 0;
    }

    .feature ul li img {
        height: 130px;
    }

    .feature ul li h4 {
        font-size: 13px;
        text-align: center;
        margin: 10px;
        letter-spacing: -1px;
        display: block;
        height: 100%;

    }

    .feature ul li h4 .btn {
        text-align: center;
        margin: 10px auto;
    }

    .feature ul li h4 a {
        font-size: 13px;
        padding: 3px 6px;
    }

    .feature .feature_btn {
        margin: 30px auto 10px;
    }

    .feature .feature_btn a {
        padding: 8px 20px;
        font-size: 15px;
    }
}

/* ===== ナビゲーション ===== */
.about-nav {
    display: flex;
    padding: 0;
    align-items: center;
    width: 70%;
    margin: 50px auto;
    list-style: none;
}

.about-nav-item {
    display: flex;
    align-items: flex-end;
    margin-right: 40px;
}

.about-nav-item i {
background-color: #3B3D6A;
    color: #fff;
    padding: 3px 5px;
    border-radius: 100px 100px;
}

/* ===== 各挨拶ブロック ===== */
.greeting-block {
    width: 70%;
    padding:0 0 50px;
    margin: 0 auto;
}

/* 挨拶内容のレイアウト（横並び） */
.greeting-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* 院長挨拶の場合は上寄せに調整 */
.greeting-block.greeting-director .greeting-layout {
    align-items: flex-start;
    margin: 50px auto;
}

/* ===== メッセージ部（テキスト） ===== */
.greeting-message {
    width: 60%;
}

.greeting-subtitle {
    font-size: 30px;
    margin: 10px 0 20px;
    font-weight: normal;
    line-height: 60px;
    width: fit-content;
}

.greeting-body {
    line-height: 34px;
}

/* ===== プロフィール部 ===== */
.greeting-profile {
    width: 35%;
    font-size: 13px;
    line-height: 25px;
}

.greeting-profile span {
    font-size: 25px;
}

/* ===== 院長挨拶用画像 ===== */
.greeting-image {
    width: 35%;
    height: 300px;
    object-fit: cover;
}

.greeting-image img {
    border-radius: 40px;
}

/* ===== フリップイメージ（ホバーで切り替え） ===== */
.flip-image-container {
    position: relative;
    width: 100%;
    height: 350px;
    perspective: 1000px;
}

.flip-image {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.flip-image-back {
    transform: rotateY(180deg);
}

.flip-image-container:hover .flip-image-front {
    transform: rotateY(180deg);
}

.flip-image-container:hover .flip-image-back {
    transform: rotateY(0deg);
}





/* ===== レスポンシブ：iPad（1024px以下） ===== */
@media (max-width: 1024px) {
    .section-title {
        font-size: 28px;
    }

    .section-title:before {
        width: 80px;
    }

    .about-nav {
        width: 90%;
        margin: 30px auto;
    }

    .about-nav-item {
        margin-right: 20px;
    }

    .greeting-block {
        width: 90%;
        padding: 60px 0;
    }

    .greeting-message {
        width: 65%;
    }

    .greeting-profile {
        width: 35%;
        font-size: 12px;
    }

    .greeting-subtitle {
        font-size: 26px;
        line-height: 50px;

    }

    .greeting-image {
        width: 35%;
        height: 250px;
    }

    .flip-image-container {
        height: 300px;
    }
}

/* ===== レスポンシブ：スマホ（768px以下） ===== */
@media (max-width: 768px) {
    .section-title {
        margin: 0 0 0px;
    }

    .section-title:before {
        margin: 0 20px 0 0;
        width: 30px;
    }

    .about-nav {
        width: 90%;
        margin: 20px auto 0;
    }

    .about-nav-item {
        margin: 10px 10px;
        border: 1px solid #161666;
        padding: 10px;
    }

    .greeting-block {
        width: 90%;
        padding: 40px 0;
    }

    .greeting-chairman .greeting-layout {
        /* flex-direction: column-reverse; */
        align-items: center;
        flex-direction: column;
    }


    .greeting-director .greeting-layout {
        flex-direction: column;
        align-items: center;
    }


    .greeting-message,
    .greeting-profile,
    .greeting-image {
        width: 100%;
        margin: 10px auto;
        

    }
    .flip-image{
        object-fit: cover;         /* 余白なく埋める（トリミング可） */
        object-position: top;      /* トリミングの基準を「上」に固定 */
        display: block;            /* 行間の隙間を防止 */
    }
    .greeting-subtitle {
        font-size: 18px;
        background-color: #161666;
        color: #fff;
        padding: 5px 10px;
        line-height: 40px;

    }

    .flip-image-container {
        height: 250px;
    }
}


































/* サービス紹介セクション */
.services-section {
    width: 100%;
    margin: 100px auto;
}

.section-title {
    font-weight: normal;
    font-size: 33px;
    margin-bottom: 20px;
    text-align: center;
}

.section-text {
    line-height: 40px;
    margin-bottom: 30px;
    /* text-align: center; */
}



/* medical */
.medical-section {
    width: 70%;
    margin: 50px auto;
}

.medical-section .section-text{
    margin: 30px auto 50px;
}

/* サービスリスト */
.medical-list {
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}

.medical-list .medical-item {
    width: 48%;
    margin: 10px 0;
    position: relative;
    padding: 250px 0 0px;
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    border: 0.5px solid #333;
    overflow: hidden;
}

.medical-item h4 {
    background-color: #ffffff;
    margin: 0;
    font-weight: normal;
    padding: 10px 0px;
    letter-spacing: 2px;
    border-radius: 0;
    width: 100%;
    text-align: center;
}


.medical-item h4:hover{
    background-color: #3B3D6A;
    color: #fff;
}
.medical-item p {
    background-color: #fff;
    font-size: 13px;
    width: fit-content;
    padding: 2px 10px;
}

/* 各サービスの背景画像 */
.service-orthopedics {
    background-image: url("../img/page/medical_information/medical_01.JPG");
}

.service-rehabilitation {
    background-image: url("../img/page/medical_information/medical_02.JPG");
}

/* 顧問紹介ボタン */
.advisor-btn {
    border: 0.5px solid #333;
    border-radius: 20px;
    padding: 20px 3%;
    font-size: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: fit-content;
    margin: 0 auto 100px;
}

.medical-section a  {
    width: 100%;
    /* height: fit-content; */
}

.medical-section .advisor-btn:hover{
    color: #fff;
    background-color: #3B3D6A;
}
/* ----- レスポンシブ対応 ----- */

/* iPad（1024px以下） */
@media (max-width: 1024px) {

   
/* medical */
    .medical-section {
        width: 90%;
        margin: 50px auto;
    }

  

    .services-section {
        width: 95%;
        margin: 80px auto;
    }

    .section-title {
        font-size: 28px;
    }

    .section-text {
        font-size: 16px;
        line-height: 36px;
    }

    .services-list {
        margin: 30px 0;
    }

    .service-item {
        padding: 0;
    }

    .advisor-btn {
        padding: 30px 20px;
        font-size: 26px;
    }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
    .services-section {
        width: 95%;
        margin: 60px auto;
    }

    .section-title {
        font-size: 24px;
    }

    .section-text {
        font-size: 14px;
        line-height: 32px;
    }



  .orthopedic_content .intro-layout .intro-image{
    border-radius: 10px;
    margin: 20px auto;
  }

    /* サービスリスト */
    .medical-list {
        margin: 50px 0;
        display: block;
        justify-content: space-between;
        list-style: none;
        padding: 0;
    }

    .medical-list .medical-item {
        width: 100%;
        padding: 150px 0 0;
        border-radius: 20px;
        border: 0.5px solid #333;
        overflow: hidden;
        margin: 20px auto;
    }


    .medical-list .medical-item h4 {
        padding: 10px 0;
    }


    .orthopedic_content .intro-layout .intro-text {
        width: 100%;
    }

    .orthopedic_content .intro-layout .intro-image {
        width: 100%;
    }


    .orthopedic_content .services-section {
        width: 97%;
        margin: 30px auto;
    }

    .orthopedic_content .services-list {
        margin: 0;
        flex-wrap: wrap;
        width: 100%;
    }

    .services-list .service-item {
        width: 48%;
        margin: 10px 0;
        position: relative;
        padding: 20px 0 10px;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
        overflow: hidden;
    }

    .services-list .service-item h4 {
        padding: 3px 10px;
        border-radius: 0;
    }

    .services-list .service-item p {
        font-size: 10px;
    }

    .service-item {
        width: 100%;
        padding: 150px 0 0;
        border-radius: 10px;
    }

    .service-item h4 {
        padding: 15px 0;
        border-radius: 0 0 10px 10px;
    }

    .advisor-btn {
        padding: 15px 10px;
        font-size: 22px;
    }

.services-section .service-item{
    border-radius: 10px;
    height: 230px;
}

}

























/* ===== アクセスセクション ===== */
.access-section {
    width: 70%;
    margin: 50px auto;
}

/* ナビゲーション */
.access-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.access-nav-item a {
    text-decoration: none;
    color: inherit;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.access-nav-item a i {
    background-color: #a3a3a3;
    border-radius: 100%;
    padding: 5px 7px;
}

/* セクションタイトル */
.section-title {
    font-weight: normal;
    font-size: 33px;
    margin: 50px 0 20px;
    text-align: center;
}

/* 診療時間情報 */
.hours-info {
    padding-top: 30px;
    margin: 0 auto 100px;
}

.hours-info table {
    background-color: #a3a3a3;
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    font-size: 20px;
}

.hours-info th,
.hours-info td {
    border: 1px solid #000000;
    padding: 10px 30px;
    text-align: center;
}

.hours-info td {
    background-color: #fff;
    padding: 20px 30px;
}

.hours-info thead {
    background-color: #626370;
    font-size: 20px;
    color: #fff;

}

.hours-info .hours-note {
    font-size: 15px;
    line-height: 30px;
}

/* 地図情報 */
.map-info {
    text-align: center;
    padding-top: 10px;
}

.address-info {
    font-size: 16px;
    display: block;
    margin-bottom: 30px;
}

.address-info a {
    text-decoration: underline;
    color: blue;
}

/* 地図詳細部分 */
.map-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px auto 50px;
}

.map-image {
    flex-shrink: 0;
}

.map-image img {
    max-width: 100%;
    border-radius: 10px;
}

.map-text {
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}

.access-title {
    font-size: 20px;
    margin-bottom: 10px;
}

/* 埋め込みGoogle Map */
.map-iframe {
    width: 100%;
    display: block;
    margin: 0 auto 20px;
    border: 0;
}

/* ===== レスポンシブ対応 ===== */

/* iPad（1024px以下） */
@media (max-width: 1024px) {
    .access-section {
        width: 90%;
        margin: 40px auto;
    }

    .section-title {
        font-size: 28px;
    }

    .access-nav {
        gap: 20px;
        margin-bottom: 30px;
    }

    .hours-info th,
    .hours-info td {
        padding: 8px 20px;
    }

    .hours-info {
        padding-top: 40px;
    }

    .map-details {
        flex-direction: column;
        gap: 20px;
    }

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

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
    .access-section {
        width: 95%;
        margin: 20px auto;
    }

    .section-title {
        font-size: 24px;
    }

    .access-nav {

        margin: 0;
        justify-content: left;
    }

    .access-nav-item a {
        border: 1px solid #333;
        padding: 10px 20px;
        font-size: 16px;
    }

    .hours-info {
        padding: 0;
        text-align: left;
    }

    .hours-info th,
    .hours-info td {
        padding: 3px 2px;
        font-size: 14px;
    }

    .hours-note {
        font-size: 12px;
    }

    .map-details {
        flex-direction: column;
    }

    .map-text {
        font-size: 14px;
        text-align: center;
    }

    .map-iframe {
        height: 200px;
    }

}






























/* ======================================
   ① 共通設定 – Topics Section (PC)
====================================== */

/* 全体コンテナ */
.topics-section {
    width: 70%;
    margin: 50px auto 100px;
}

/* 注意喚起エリア */
.alert-box {
    border: 3px dashed #C22E2E;
    border-radius: 20px;
    padding: 20px 40px;
    margin-bottom: 40px;
}

.alert-box h4 {
    font-size: 36px;
    font-weight: normal;
    margin: 20px 0;
}

.alert-box span {
    display: flex;
    align-items: center;
    width: fit-content;
    color: #fff;
    background-color: #C22E2E;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* メインレイアウト：新着情報一覧とサイドバー */
.topics-flex {
    display: flex;
    justify-content: space-between;
}

/* 新着情報一覧（ニュースリスト） */
.news-list {
    flex: 1;
}

.news-list h4 {
    font-size: 25px;
    margin: 20px 0;
}

.news-list__items {
    border-top: 1px solid #a3a3a3;
    width: 95%;
    padding: 0;
    list-style: none;
}

.news-list__item {
    line-height: 30px;
    border-bottom: 1px solid #a3a3a3;
    padding: 20px 0;
}

.news-list__date {
    font-size: 13px;
}

.news-list__headline {
    font-weight: 600;
    font-size: 20px;
    margin: 10px 0;
}

.news-list__excerpt {
    color: #a3a3a3;
}

/* サイドバー */
.sidebar {
    /* width: 400px; */
    width: fit-content;
    margin: 0 0 0 50px;
}

.sidebar__section {
    margin-bottom: 30px;
}

.sidebar__title {
    color: #161666;
    font-size: 20px;
    margin: 0;
}

.sidebar__content {
    font-size: 13px;
    line-height: 30px;
    text-decoration: underline;
}

/* ※ .topic_text の指定は不要の場合は削除 */

/* ======================================
   ② レスポンシブ対応
====================================== */

/* iPad（1024px以下） */
@media (max-width: 1024px) {
    .topics-section {
        width: 90%;
        margin: 40px auto 80px;
    }

    .topics-flex {
        flex-direction: column;
        gap: 20px;
    }

    .sidebar {
        margin: 30px 0 0;
        width: 100%;
    }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
    .topics-section {
        width: 95%;
        margin: 20px auto 60px;
    }

    .alert-box h4 {
        font-size: 28px;
    }

    .alert-box span {
        font-size: 14px;
        padding: 8px 12px;
        margin-bottom: 15px;
    }

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

    .news-list h4 {
        font-size: 20px;
        margin: 15px 0;
    }

    .news-list__items {
        width: 100%;
    }

    .news-list__item {
        padding: 15px 0;
        font-size: 12px;
    }

    .news-list__headline {
        font-size: 16px;
        margin: 8px 0;
    }

    .news-list__date {
        font-size: 11px;
    }

    .news-list__excerpt {
        font-size: 12px;
    }

    .sidebar {
                margin: 30px 0 0;
        width: 100%;
    }

    .sidebar__title {
        font-size: 18px;
    }

    .sidebar__content {
        font-size: 11px;
        line-height: 22px;
    }
}

















/* ===== 院内設備セクション ===== */
.facility-section {
    width: 70%;
    margin: 50px auto;
}

.section-title {
    font-weight: normal;
    font-size: 33px;
    margin: 50px 0 20px;
    text-align: center;
}

/* リスト全体 */
.facility-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}

/* 各設備アイテム */
.facility-item {
    width: 47%;
    margin-bottom: 50px;
    position: relative;
    text-align: center;
}

.facility-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* キャプション（画像下部に表示） */
.facility-caption {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4;
}

/* ===== レスポンシブ対応 ===== */

/* iPad向け（1024px以下） */
@media (max-width: 1024px) {
    .facility-section {
        width: 90%;
        margin: 40px auto;
    }

    .section-title {
        font-size: 28px;
    }

    .facility-item {
        width: 48%;
        margin-bottom: 40px;
    }

    .facility-item img {
        height: 250px;
    }
}

/* スマートフォン向け（768px以下） */
@media (max-width: 768px) {
    .facility-section {
        width: 95%;
        margin: 20px auto;
    }

    .facility-list {
        flex-direction: column;
        gap: 20px;
    }

    .facility-item {
        width: 100%;
        margin-bottom: 20px;
    }

    .facility-item img {
        height: auto;
    }

    .section-title {
        font-size: 24px;
    }

    .facility-caption {
        font-size: 14px;
    }
}






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






































.connection-section {
    width: 70%;
    margin: 50px auto;
}

.section-text {
    line-height: 40px;
    margin-bottom: 100px;
}

/* ===== レスポンシブ対応 ===== */

/* iPad（1024px以下） */
@media (max-width: 1024px) {
    .connection-section {
        width: 90%;
        margin: 40px auto;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .section-text {
        font-size: 16px;
        line-height: 36px;
        margin-bottom: 80px;
    }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
    .connection-section {
        width: 95%;
        margin: 20px auto;
    }

    .section-title {
        font-size: 24px;
    }

    .section-text {
        font-size: 14px;
        line-height: 32px;
        margin-bottom: 60px;
    }
}










/* ======================================
   【アドバイザー（共通）】
====================================== */

/* コンテナ */
.advisor-section {
    width: 70%;
    margin: 50px auto;
}

/* アドバイザー全体 */
.advisor {
    margin-bottom: 100px;
}

/* 横並びレイアウト */
.advisor-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

/* 画像部分 */
.advisor-image {
    width: 48%;
    height: 360px;
    border-radius: 40px;
    overflow: hidden;
}

.advisor-image .image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.advisor-image .image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}

.advisor-image .image.back {
    transform: rotateY(180deg);
}

.advisor-image .image-container:hover .image.front {
    transform: rotateY(180deg);
}

.advisor-image .image-container:hover .image.back {
    transform: rotateY(0);
}

/* コンテンツ部分 */
.advisor-content {
    width: 48%;
}

.advisor-content h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.advisor-text {
    font-size: 14px;
    line-height: 1.5;
}

/* プロフィールエリア */
.advisor-profiles {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.advisor-profile {
    width: 500px;
    font-size: 13px;
    line-height: 30px;
}

.advisor-profile span {
    font-size: 25px;
}

.advisor-book {
    width: fit-content;
    height: fit-content;
    border: 0.5px solid #000;
    padding: 10px;
}

.advisor-book h2 {
    margin: 0;
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    font-weight: normal;
}

.advisor-book ul {
    padding: 20px;
    margin: 0;
    font-size: 13px;
    line-height: 30px;
}

.advisor-book ul li {
    width: 350px;
    margin: 0;
}

/* ======================================
   【レスポンシブ対応】
====================================== */

/* iPad（1024px以下） */
@media (max-width: 1024px) {
    .advisor-section {
        width: 90%;
        margin: 40px auto;
    }

    .advisor-flex {
        flex-direction: column;
        gap: 20px;
    }

    .advisor-image,
    .advisor-content {
        width: 100%;
    }

    .advisor-image {
        margin-bottom: 20px;
        height: 60vh;
    }

    .advisor-profile,
    .advisor-book {
        width: 100%;
    }

    .advisor-book ul li {
        width: 100%;
    }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
    .advisor-section {
        width: 95%;
        margin: 20px auto;
    }

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

    .advisor-image,
    .advisor-content {
        width: 100%;
    }

    .advisor-image {
        height: 40vh;
        margin-bottom: 0px;
    }

    .advisor-content h4 {
        font-size: 18px;
    }

    .advisor-text {
        font-size: 12px;
        line-height: 1.4;
    }

    .advisor-profile {
        width: 100%;
        font-size: 13px;
        line-height: 24px;
    }

    .advisor-profile span {
        font-size: 20px;
    }

    .advisor-book {
        width: 100%;
    }

    .advisor-book h2 {
        font-size: 16px;
    }

    .advisor-book ul {
        font-size: 12px;
        line-height: 20px;
    }

    .advisor-book ul li {
        width: 100%;
    }
}






/* ======================================
   ① 共通設定（整形外科・リハビリテーション共通）
====================================== */

/* コンテナ全体 */
.orthopedic_content {
    width: 70%;
    margin: 50px auto;
}

/* セクションタイトル */
.section-title {
    font-weight: normal;
    font-size: 33px;
    margin: 50px 0 20px;
    text-align: center;
}

/* 紹介テキスト */
.intro-text,
.st_text {
    width: 48%;
    line-height: 30px;
    margin-bottom: 30px;
}

.rehab_section .intro-text {
    width: 100%;

}

/* 横並びレイアウト */
.flex,
.intro-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 50px 0;
}

/* 画像ブロック */
.img,
.intro-image {
    width: 48%;
    height: 260px;
    border-radius: 40px;
    overflow: hidden;
}

.img img,
.intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.rehab_section .flex .rh_img {
    width: 47%;
}


.rehab_section .flex .rh_text {
    width: 47%;
}

/* ======================================
   ② サービス（診療内容／各種リハビリテーション）固有の設定
====================================== */

.services-section {
    padding: 0;
}

.services-section ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

/* サービス項目（共通：整形外科・リハビリテーション） */
.rehab_section .service-item {
    width: 100%;
    height: 100px;
    margin: 10px 0;
    padding: 100px 0 0 0;
    font-size: 13px;
    position: relative;
    text-align: center;
}

.rehab_section .service-item:last-child {
    display: none;
}

.rehab_section .service-item h4 {
    position: relative;
    top: 20px;
    font-size: 20px;
    padding: 0 10px;
    line-height: 40px;
    background-color: #fff;
    width: fit-content;
    color: #161666;
    border-radius: 0;
}

.rehab_section .services-section p {
    background-color: #fff;
    width: fit-content;
    margin: 30px 0 0;
}


/* リンク飛んだときの位置調整 */
#Sports-link,
#Thrilling-link,
#Insole-link,
#clinic-hours,
#map-info
{

    scroll-margin-top: 110px;


}
/* ======================================
   ③ スタッフ紹介の設定
====================================== */

/* スタッフセクション */
.staff-section {
    margin-top: 50px;
}

.subsection-title {
    padding: 0 10px;
    border-left: 4px solid #3B3D6A;
    color: #000;
    font-size: 20px;
    line-height: 1.2;
    margin: 30px 0 30px;
}

/* スタッフグループ */
.staff-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.staff-item {
    width: 300px;
    margin-bottom: 50px;
}

.staff-image {
    width: 300px;
    height: 200px;
    margin-bottom: 20px;
    overflow: hidden;
}

.staff-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-info {
    width: 300px;
    font-size: 15px;
    line-height: 30px;
}

.staff-name {
    color: #161666;
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: normal;
}

.staff-name span {
    font-size: 14px;
}

.staff-comment {
    font-size: 13px;
    line-height: 30px;
    margin: 10px 0;
}

/* 出勤表 */
.staff-graff {
    margin: 50px auto;
    text-align: center;
}

.staff-graff img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

/* ======================================
   レスポンシブ対応
====================================== */

/* iPad（1024px以下） */
@media (max-width: 1024px) {
    .orthopedic_content {
        width: 90%;
        margin: 40px auto;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .flex,
    .intro-layout {
        /* flex-direction: column; */
        gap: 20px;
    }

    .img,
    .intro-image {
        width: 100%;
        height: 200px;
    }

    /* サービス項目横並び→縦積み */
    .rh_img,
    .service-image,
    .rh_text,
    .service-info {
        width: 100%;
    }

    .staff-group {
        flex-wrap: wrap;
    }

    .staff-item {
        width: 48%;
    }

    .staff-image {
        width: 100%;
    }



}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
    .orthopedic_content {
        width: 95%;
        margin: 20px auto;
    }

    .section-title {
        font-size: 24px;
    }

    .st_text,
    .intro-text {
        font-size: 14px;
        line-height: 26px;
    }

    .intro-layout {
     display: block;
    }

    .orthopedic_content .flex {
        display: block;
    }

    .orthopedic_content .flex .rh_img {
        width: 100%;
    }


    .orthopedic_content .flex .rh_text {
        width: 100%;
    }

    .img,
    .intro-image {
        width: 48%;
        height: 200px;
    }

    .rh_text,
    .service-info {
        font-size: 12px;
    }

    .staff-image {
        width: 100%;
        height: 150px;
    }

    .staff-item {
        width: 48%;
    }

    .staff-info {
        font-size: 10px;
        line-height: 18px;
        width: 100%;
    }

    .staff-name {
        font-size: 15px;
    }

    .staff-name span {
        font-size: 10px;
    }

    .staff-comment {
        font-size: 10px;
        line-height: 14px;
    }
}


.orthopedic-section .services-list {
    justify-content: space-between;
}

.orthopedic-section li {
    background-size: cover;
    width: 33%;
    height: 200px;
    margin: 3px 0;
    border-radius: 5px;
}

.orthopedic-section li h4 {
    background-color: #fff;
    width: fit-content;
    padding: 3px 10px;
    margin: 100px 0 0 0;
}

.orthopedic-section li p {
    background-color: #fff;
    width: fit-content;
    padding: 3px 10px;
}








/* ======================================
   【PC表示用 Proceedings Section】
====================================== */

/* 全体コンテナ */
.proceedings-section {
    width: 80%;
    margin: 50px auto;
}

/* タブ部分 */
.tabs {
    display: flex;

}

.tabs li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 40px;
}

.tabs li a i {
    background-color: #3B3D6A;
    color: #fff;
    padding: 3px 5px;
    border-radius: 100px 100px;
}

/* 選択中タブ */
.tabs li a.active {
    font-weight: bold;
    color: #161666;
}

/* 各タブ表示エリア */
.tab-area {
    background-color: #161666;
    color: #fff;
    padding: 20px 40px;
}

/* タブヘッダー（タイトル部分） */
.tab-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 500px;
    width: 100%;
    margin: 40px 0 60px;
}

.tab-header-left {
    background-color: #ffffff;
    color: #000;
    padding: 10px 0;
    flex: 1;
    text-align: center;
}

.tab-header-right {
    background-color: #000;
    color: #fff;
    padding: 50px 10px 20px 60px;
    flex: 1;
    text-align: center;
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 0 100%);
}

.tab-header-left h1 {
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.tab-header-right h1 {
    font-size: 12px;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* タブエリア内リスト */
.tab-area ul {
    display: block;
}

.tab-area ul li {
    border-left: 4px solid #fff;
    padding: 5px 20px;
    margin: 20px 0 40px;
}

.tab-area ul li h3 {
    font-size: 20px;
    font-weight: normal;
    margin: 0;
}

.tab-area ul li dl {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.tab-area ul li dl dt {
    background-color: #fff;
    color: #000;
    padding: 5px 10px;
    width: 15%;
    text-align: center;
}

.tab-area ul li dl dd {
    width: 70%;
}

/* フェードインアニメーション */
.fade-in {
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ======================================
   【レスポンシブ対応】
====================================== */

/* iPad（1024px以下） */
@media (max-width: 1024px) {
    .proceedings-section {
        width: 90%;
        margin: 40px auto;
    }

    .tabs li {
        margin-right: 20px;
    }

    .tab-header {
        max-width: 100%;
        margin: 20px 0 40px;
    }

    .tab-header-left h1 {
        font-size: 26px;
    }

    .tab-header-right h1 {
        font-size: 14px;
    }

    .tab-area {
        padding: 20px 20px;
    }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
    .proceedings-section {
        width: 95%;
        margin: 20px auto;
    }

    .tabs {
        /* flex-direction: column; */
        flex-wrap: wrap;
        gap: 10px;
    }

    .tabs li {
        margin: 0;
    }

    .tab-header {
        margin: 20px 0 30px;
    }

    .tab-header-left,
    .tab-header-right {
        width: 100%;
    }

    .tab-header-left h1 {
        font-size: 20px;
    }

    .tab-header-right h1 {
        font-size: 12px;
    }

    .tab-area {
        padding: 15px 10px;
    }

    .tab-area ul li {

        border-left: 2px solid #fff;


        padding: 5px 10px;
        margin: 10px 0;
    }

    .tab-area ul li h3 {
        font-size: 16px;
    }

    .tab-area ul li dl {
        font-size: 11px;

    }

    .tab-area ul li dl dt {
        width: 80px;
        padding: 3px 5px;
        /* margin: 0; */
    }

    .tab-area ul li dl dd {
        margin: 0 0 0 10px;

    }
}













#tab3 dl dd {
    width: 100px;
}


#tab3 dl .fit-width {
    width: fit-content;
}



/* poppuup */

/* オーバーレイ全体のスタイル */
.popup-overlay {
    display: none;
    /* 非表示（activeクラスで表示） */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.popup-overlay.active {
    display: flex;
}

/* ポップアップ内コンテンツのスタイル */
.popup-content {
    position: relative;
    max-width:60%;
}

.popup-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* 閉じるボタンのスタイル */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    opacity: 0.8;
}

.popup-close:hover {
    opacity: 1;
}



@media (max-width: 556px){

    .popup-content {
        position: relative;
        max-width: 80%;
    }

/* 閉じるボタンのスタイル */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    opacity: 0.8;
}
}



.news-list img{
    margin: 25px 0;
    line-height: 30px;
    font-size: 15px;
}



.news-text{
    line-height: 15px;
    line-height: 35px;
}


.news-list__excerpt a{
    border: 0.5px solid #333;
    color: #333;
    padding: 3px 5px;
    font-size: 13px;
}

.staff-graff-text{
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
}
.ffe599{
    background-color: #ffe599;
    width: 100px;
    height: 30px;
}






.staff-graff-sports{
    text-align: left;
    line-height: 40px;
}

.staff-graff img{
    margin: 20px auto;
    /* background-color: red; */
}





/* touto */

.touto-section{
    width: 80%;
    margin: auto;
}

.touto-section .flex{
    display: flex;
}


.touto-message{

    margin: 100px auto 50px;
}

.touto-message .title{
    font-size: 40px;
    font-weight: inherit;
    width: 50%;
}

.touto-message .text{
    width: 50%;
    line-height: 30px;
    font-size: 15px;
}

.touto-message .img{
    width: 100%;
    height: fit-content;
}




.touto-section h3 span{
color: #5868FF;
font-size: 13px;
}


.touto-section h3{
    font-size: 33px;
    font-weight: inherit;
}


.touto_strengths h2{
    font-size: 40px;
    margin: 20px 0;
    /* font-weight: inherit; */
}
.strengths{
    margin: 50px auto 80px;
}


.strengths .img{
    width: 50%;
    height: fit-content;
}

.strengths .text{
    width: 48%;
    padding: 0 1%;
    line-height: 35px;
    font-size: 16px;

}






.interview_senior h2{
background-color: #161666;
color: #fff;
margin: 10px 0;
padding: 5px 10px;
font-size: 30px;
width: fit-content;
border-radius: 7px;
line-height: 50px;
}



.interview_senior .hiro{
    background-color: #161666;
    color: #fff;
    padding: 3px 5px;
    width: fit-content;
    font-size: 13px;
    border-radius: 7px;
    margin: 80px 0 0;
}


.interview_senior .department{
    margin: 10px 0 0;
}


.interview_senior .name{
    font-size: 45px;
}

.interview_senior{
    width: 40%;
    min-width: 40%;
}

.interview_img{
    min-width:50%;
    width: 60%;
}




.question h2{
   background-color: #161666;
   color: #fff;
   padding: 5px 20px;
}


.question_img{
    width: 30%;
}

.question_text{
    color: #161666;
    width: 68%;
    padding: 0 1%;
    line-height: 30px;
    font-size: 15px;

}

.question_text h3{
    font-weight: bold;
    margin: 0 0 30px;
}













.touto_links {
    padding: 100px 50px 80px;
    text-align: center;
    background-position: center;
    background-image: url("../img/page/touto/banner.png");
    background-size: cover;
}

.touto_links .touto_name {
    width: 300px;
    margin: auto;
}

.touto_links .touto_title {
    font-size: 40px;
    font-weight: bold;
    margin: 20px auto 30px;
    color: #fff;
    text-shadow: 4px 2px 1px rgba(0, 0, 0, 0.8);
}

.touto_links ul {
    display: flex;
    margin:50px auto;
    padding: 0;
    width: fit-content;
    list-style: none;
}


.touto_links ul a{
width: 100%;
    display: flex;
    align-items: center;
justify-content: space-between;
}
.touto_links .flex{
    padding: 0;
    margin: 0;
}

.touto_links ul li {
    width: 200px;
    background-color: rgb(247, 199, 243);
    padding: 5px 10px;
    text-align: center;
    margin: 0 40px;
    font-size: 20px;
    font-family: sans-serif;
    color: white;
    align-items: center;
    text-align: center;
    font-weight: bold;
    justify-content: space-between;
    display: flex;
    text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.8);

    /* flex-direction: column; */
    position: relative;
}


.touto_links ul li img{
    width: 30px;
    height: fit-content;
    margin: 0 10px 0 0;
}


.touto_links ul li::before {
    color: #fff;
    content: attr(data-description);
    position: absolute;
    width: 90%;
    /* background-color: red; */
    text-align: center;
    top:-25px;
    text-shadow: none;
    font-size: 14px;
    margin-bottom: 0px;
    font-weight: normal;
    display: block;
}

.touto_links ul li .link_content {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    gap: 8px; /* 画像とテキストの間隔 */
}



@media (max-width: 1024px) {

    .touto-section{
        width: 95%;
        margin: auto;
    }
    
    .touto-message{
        margin: 70px auto;
    }
    
    .touto-message .title{
        font-size: 30px;
        /* color: #fff; */
        text-align: center;
        width: 100%;
        margin: 0px auto 50px;
    }
    
    .touto-message .text{
        width: 100%;
    }
    
    
    
    
    
    .touto-section h3 span{
    color: #5868FF;
    font-size: 10px;
    }
    
    
    .touto-section h3{
        font-size: 20px;
        font-weight: inherit;
    }
    
    
    
    .touto_strengths h2{
        font-size: 20px;
        margin: 10px 0;
        /* font-weight: inherit; */
    }
    .strengths{
        margin: 50px auto 80px;
    }
    
    
    .strengths .img{
        width: 100%;
    }










.strengths .text{
    width: 100%;
    padding: 0;
    line-height: 35px;
    font-size: 16px;

}


.interview{
    position: relative;
}



.interview_senior h2{
background-color: #161666;
color: #fff;
margin: 10px 0;
padding: 5px 10px;
font-size: 15px;
width: fit-content;
border-radius: 7px;
line-height: 30px;
}



.interview_senior .hiro{
    background-color: #161666;
    color: #fff;
    padding: 0 5px;
    width: fit-content;
    font-size: 13px;
    border-radius: 7px;
    margin: 80px 0 0;
}


.interview_senior .department{
    margin: 10px 0 0;
width: fit-content;
    background-color: #fff;
    padding: 2px 5px;
}


.interview_senior .name{
    font-size: 45px;
width: fit-content;
    background-color: #fff;
    padding: 2px 5px;

}

.interview_senior{
    width: 100%;
    min-width: 100%;
}

.interview_img{
    /* min-width:55%; */
    width: 65%;
    height: 360px;
    position: absolute;
    z-index:-1 ;
 top:0;
 right: 0;
}

.interview_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.question h2{
   background-color: #161666;
   color: #fff;
   padding: 5px 20px;
   font-size: 20px;
    margin: 10px auto;
}
.question .flex{
  margin: 20px auto 30px;
}
.question_img{
    width: 100%;
}

.question_text{
    color: #161666;
    width: 100%;
    padding: 0%;
    line-height: 30px;
    font-size: 15px;

}

.question_text h3{
    font-weight: bold;
    margin: 0 0 20px;
}













.touto_links {
    padding: 50px;
    text-align: center;
    background-position: center;
    background-image: url("../img/page/touto/banner.png");
    background-size: cover;
}

.touto_links .touto_name {
    width: 250px;
    margin: auto;
}

.touto_links .touto_title {
    font-size: 25px;
    font-weight: bold;
    margin: 20px auto 30px;
    color: #fff;
    text-shadow: 4px 2px 1px rgba(0, 0, 0, 0.8);
}

.touto_links ul {
    display: block;
    margin:50px auto;
}

.touto_links ul li {
    width: 200px;
    background-color: rgb(247, 199, 243);
    padding: 10px;
    text-align: center;
    margin: 30px auto;
    font-size: 15px;
    font-family: sans-serif;
    color: white;
    align-items: center;
    text-align: center;
    font-weight: bold;
    justify-content: space-between;
    display: flex;
    text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.8);
    position: relative;
}


.touto_links ul li img{
    width: 30px;
    height: fit-content;
    margin: 0 10px 0 0;
}


.touto_links ul li::before {
    content:none;
}



}




@media (max-width: 768px){



.touto_links {
    padding: 50px 0;
    background-position: right;
    -webkit-animation: bgroop 20s linear infinite;
    animation: bgroop 20s linear infinite;
}


@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1956px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1956px 0;
    }
}


.touto_links .touto_name {
    width: 80%;
    margin: auto;
}

.touto_links .touto_title {
    font-size: 16px;
    margin: 10px auto;
    text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.8);
}

.touto_links ul {
    display: block;
    margin:20px auto 0;
 width: 90%;
}

.touto_links ul li {
    width: 100%;
    padding: 8px 10px;
    margin: 10px auto;
    font-size: 15px;
}


.touto_links ul li img{
    width: 30px;
    height: 30px;
    margin: 0 0 0 0;
}


.touto_links ul li::before {
    content:none;
}



}
@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

.wrapper{
	overflow: hidden;
}

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

.box{
	width: 220px;
	padding: 20px;
	margin:0 20px 20px 0;
	background: #666;
	color: #fff;
	box-sizing:border-box;
}

.bgextend,
.lineTrigger{
	width: 220px;
	padding: 20px;
	margin:0 20px 20px 0;
	box-sizing:border-box;
}


/*==================================================
ふわっ
===================================*/

/* fadeIn */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.top_fadeInTrigger{
animation-duration: 3s;

}
/* fadeUp */

.fadeUp{
animation-name: fadeUpAnime;
/* animation-duration:0.5s; */
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


.fadeDown{
animation-name: fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* fadeLeft */

.fadeLeft{
animation-name: fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* fadeRight */

.fadeRight{
animation-name: fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
ぱたっ
===================================*/


/* flipDown */
.flipDown{
animation-name: flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}


/* flipLeft */
.flipLeft{
animation-name: flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* flipLeftTop */
.flipLeftTop{
animation-name: flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* flipRight */
.flipRight{
animation-name: flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin: right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* flipRightTop */
.flipRightTop{
animation-name: flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* rotateX */
.rotateX{
	animation-name: rotateXAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
	from{
		transform: rotateX(0);
		opacity: 0;
		}
	to{
		transform: rotateX(-360deg);
		opacity: 1;
		}
}

/* rotateY */
.rotateY{
	animation-name: rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		opacity: 0;
		}
	to{
		transform: rotateY(-360deg);
		opacity: 1;
		}
}

/* rotateLeftZ */
.rotateLeftZ{
	animation-name: rotateLeftZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(-360deg);
		opacity: 1;
		}
}

/* rotateRightZ */
.rotateRightZ{
	animation-name: rotateRightZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(360deg);
		opacity: 1;
		}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ぶわっ、ぽんっ、どどんっ
===================================*/

/* zoomIn */
.zoomIn{
	animation-name: zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}

/* zoomOut */
.zoomOut{
	animation-name: zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* blur */
.blur{
	animation-name: blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にょろっ
===================================*/

/* smooth */
.smooth{
	animation-name: smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  　transform-origin: left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}
/*==================================================
背景色が伸びて出現
===================================*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*右から左*/
.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

/*下から上*/
.bgDUextend::before{
	animation-name:bgDUextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*上から下*/
.bgUDextend::before{
	animation-name:bgUDextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

/*==================================================
枠線が伸びて出現
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content: '';
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content: '';
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
	top:0;
	left:0;
}

.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
	top:0;
	right:0;
}

.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
	bottom:0;
	right:0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
	bottom:0;
	left:0;
}

.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/	
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
	animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
	animation-delay: 0.5s;
}

.delay-time1{  
	animation-delay: 1s;
}

.delay-time15{  
	animation-delay: 1.5s;
}

.delay-time2{  
	animation-delay: 2s;
}

.delay-time25{  
	animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
	animation-duration: 0.5s;
}

.change-time1{  
	animation-duration: 1s;
}

.change-time15{  
	animation-duration: 1.5s;
}

.change-time2{  
	animation-duration: 2s;
}

.change-time25{  
	animation-duration: 2.5s;
}