@charset "UTF-8";

body, html {
    font-family: YuMincho, "Hiragino Mincho ProN", serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロールを無効化 */
}

.header {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 0px 20px; */
    z-index: 10;
}

.logo {
    height: 50px;
    padding-left: 30px;
}

.header-contact {
    display: flex;
    margin-right: 50px;
}

.contact-img {
    max-height: 80px; /* 適切な高さを設定 */
    width: auto; /* 幅を自動調整 */
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 11;
    position: relative;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    transition: 0.3s;
}

.mobile-menu {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00AEEF;
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* 初期状態：非表示 */
  opacity: 0; /* 不透明度をゼロに */
  transform: translateY(-100%); /* 上に隠す */
  transition: opacity 0.5s ease, transform 0.5s ease; /* トランジション */
}

.mobile-menu.active {
    visibility: visible; /* 要素を表示可能にする */
    display: flex;
    /* 表示状態 */
    opacity: 1; /* 完全に表示 */
    transform: translateY(0); /* 元の位置に戻す */
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu li {
    margin-bottom: 20px;
}

.mobile-menu li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

/* 閉じるボタン */
.close-menu {
    position: absolute; /* 親要素の中で絶対位置 */
    top: 20px;         /* 上からの位置 */
    right: 20px;       /* 右からの位置 */
    background: none;  /* 背景色を削除 */
    border: none;      /* 枠線を削除 */
    color: white;      /* 文字色を白に設定 */
    font-size: 24px;   /* フォントサイズ調整 */
    cursor: pointer;   /* ポインタ表示 */
    z-index: 12;       /* 他の要素の前に表示 */
}



.hero {
    position: relative;
    width: 100%;
    height: auto;
}

.hero-image {
    width: 100%;
    height: auto;
}

.hero-text {
    position: absolute;
    top: 50%; /* 垂直中央揃え */
    left: 50%; /* 水平中央揃え */
    transform: translate(-50%, -50%); /* 中央揃え */
    text-align: center;
    color: rgba(255, 255, 255, 0.9); /* テキスト色 */
    z-index: 1;
    padding: 10px 20px; /* テキストの周りに余白を作る */
}

.hero-subtitle {
    font-size: clamp(16px, 3vw, 20px); /* レスポンシブ対応 */
    letter-spacing: 2px;
    margin: 0;
}

.hero-title {
    font-size: clamp(24px, 5vw, 40px); /* レスポンシブ対応 */
    font-weight: bold;
    margin: 5px 0 0;
}

.hero-overlay {
    position: absolute;
    bottom: 8px;
    z-index: 11;
    width: 100%;
}

.hero-overlay table {
    width: 50%;
    border-collapse: collapse;


}
.hero-overlay th, td {
    text-align: center;
    padding: 12px;
}

.hero-overlay th {
    background-color: #00BFFF;
    color: white;
    font-weight: 100;
    font-size: 13px;
    border : 0px solid #00BFFF;
}

.hero-overlay td {
    background-color: #FFFFFF;
    border-bottom: 1px solid #ddd;
}

.hero-overlay tbody tr:first-child {
    border-bottom: 2px solid #00BFFF;
}

.hero-overlay th:first-child {
    width: 170px;
}

.hero-overlay-note{
  display: flex;
  max-width: 80%;
}

.hero-schedule{
  background-color: #DFF7FF;
  width: 350px;
}

.hero-schedule-note {
    font-size: 12px;
    color: #555;
    text-align: left;
    margin-top: 15px;
    line-height: 1.5;
    font-weight: bold;
    padding-left: 10px;
}


.circle {
    color: #00BFFF;
    font-size: 10px;
}
.triangle {
    color: #00BFFF;
    font-size: 15px;
}
.slash {
    color: #00BFFF;
    font-size: 12px;
}
.time {
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
}

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden; /* 横スクロールを隠す */
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 3s ease;
}

.carousel-item.active {
    opacity: 1; /* 表示 */
    visibility: visible;
    position: relative; /* 最初のスライドを表示 */
    z-index: 1;
}


.schedule-img {
    width: 40%;
    /* max-width: 600px; */

}

.list-section {
    padding: 40px 20px;
    text-align: center;
}

#fotter-list-section .list-section {
  background-color: #eaf6fc;
}


.list-menu {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.menu-item {
    text-align: center;
    font-size: 14px;
    text-decoration: none; /* 下線を消す */
    color: inherit; /* 親要素の文字色を継承する */
}

.menu-english {
    display: block;
    color: #00BFFF; /* 青文字 */
    font-size: 12px;
    text-transform: uppercase; /* 英語を大文字に */
    font-weight: bold;
    margin-bottom: 4px;
}

.menu-japanese {
    color: #333; /* 黒文字 */
    font-size: 14px;
}

.news-section {
    background-color: #F8F6EE; /* 背景色 */
    padding: 40px 150px; /* セクションの余白 */
    text-align: center;
}

.news-container {
    max-width: 800px; /* コンテンツ幅 */
    margin: 0 auto; /* 中央寄せ */
}

.news-title {
    font-size: 16px;
    color: #00BFFF; /* 青色 */
    margin-bottom: -18px;
    letter-spacing: 2px;
    font-weight: 500;
}

.news-subtitle {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333; /* 黒色 */
    letter-spacing: 3px;
    font-weight: bold;
}

.news-list {
    list-style: none; /* 項目マークを消す */
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.news-list a,
.news-list-sp a {
    text-decoration: none;
    color: inherit;
}

.news-list-sp {
    display: none;
    list-style: none; /* 項目マークを消す */
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.news-list li, .news-list-sp li {
    font-size: 16px;
    margin-bottom: 20px;
    color: #333;
    display: flex;
    gap: 10px;
    padding-bottom: 5px; /* ボーダーとの間隔を調整 */
    border-bottom: 1px dashed #ddd; /* 下線を追加 */
}





.flow-section {
    background-color: #f9f9f9;
    padding: 40px 20px;
    text-align: center;
}

.flow-header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}

.flow-background {
    font-size: 80px;
    color: rgba(0, 122, 204, 0.1); /* 薄い青色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    white-space: nowrap;
    letter-spacing: 5px;
}

.flow-title {
    position: relative;
    z-index: 1;
    font-size: 30px;
    color: #333;
    font-weight: 500;
}


.flow-steps-img {
    max-width: 800px; /* 画像の幅を調整 */
    height: auto; /* アスペクト比を維持 */
    margin: 0 auto; /* 中央寄せ */
    display: block;
}


.step {
    font-size: 16px;
    color: #007acc;
    padding: 10px 20px;
    border: 1px solid #007acc;
    border-radius: 5px;
    background-color: #fff;
}

.flow-details {
    display: flex;
    margin-top: 50px;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.detail {
    max-width: 250px;
    text-align: center;
}

.detail-text {
    text-align: left;
}

.detail-img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.detail h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.detail p {
    font-size: 10px;
    color: #555;
    line-height: 2;
    margin: 0px -15px;
}

.flow-body-care-banner-img {
    max-width: 800px; /* 画像の幅を調整 */
    height: auto; /* アスペクト比を維持 */
    margin: 0 auto; /* 中央寄せ */
    padding-top:20px;
    display: block;
}


/* Service Cards */
.service-cards {
    display: flex;
    justify-content: center;
    /* gap: 40px; */
    flex-wrap: wrap;
    padding-top:40px;
}

.service-card {
    max-width: 400px;
    text-align: center;
    background-color: #f9fbfe;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.service-card-white{
  background-color: white;
}

.service-img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.service-card h3 {
    font-size: 30px;
    color: #333;
    margin: 10px 0;
}

.service-card p {
    font-size: 12px;
    color: #555;
    margin: 15px 40px;
    line-height: 1.6;
    text-align: left;
}

.service-more-img {
    width: 70%; /* ボタンの幅を調整 */
    margin: 0 auto; /* 中央揃え */
    padding-bottom: 20px;
    display: block;
    padding: 20px;
}

/* Contact Section */
.contact-section {
    background-color: #EDEFF1;
    padding: 60px 20px;
    text-align: center;
    position: relative;
}

.contact-container{
  width: 800px;
}

.contact-background {
    font-size: 80px;
    color: rgba(0, 0, 0, 0.05); /* 薄い黒色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    white-space: nowrap;
    letter-spacing: 15px;
}


.contact-title {
    font-size: 36px;
    color: #333;
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0;
    font-weight: 500;
}


.contact-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 40px;
}


.contact-header p {
    font-size: 30px;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.contact-subtitle-img{
  width: 100%;
  max-width: 614px;
  margin-bottom: 10px;
}

.contact-content .contact-note {
    font-size: 10px;
    color: #777;
    margin: -10px 0 -35px 0;
}




.google-map-section {
    background-color: #ccc; /* 背景色を設定 */
    height: 300px; /* セクションの高さを設定 */
    position: relative; /* 子要素の絶対配置用 */
}


.store-info-section {
    background-color: #eaf6fc;
    padding: 40px 15px;
    text-align: center;
}

.store-header {
    margin-bottom: 20px;
}

.store-logo {
    display: block;
    margin: 0 auto 10px;
    width: 400px;
    height: auto;
}

.store-address {
    font-size: 14px;
    color: #333;
    margin-bottom: 30px;
}

.contact-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* ボタン間の隙間を10pxに設定 */
    margin-top: 10px;
}

.contact-button {
    flex: 1;
    max-width: 235px; /* 最大幅を統一 */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center;
    align-items: center;
    height: 75px; /* 高さを固定 */
    overflow: hidden; /* 子要素の溢れを隠す */
}

.contact-buttons-big {
    display: flex;
    justify-content: center;
    gap: 10px; /* ボタン間の隙間を10pxに設定 */
    margin-top: 50px;
}

.contact-button-big  {
    flex: 1;
    max-width: 300px; /* 最大幅を統一 */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center;
    align-items: center;
    height: 96px; /* 高さを固定 */
    overflow: hidden; /* 子要素の溢れを隠す */
}

.contact-btn-img {
    max-height: 100%; /* ボタンの高さに収まるように設定 */
    max-width: 100%; /* ボタンの幅に収まるように設定 */
    object-fit: cover; /* ボタンの領域全体を埋める */
}



.schedule {
    max-width: 500px;
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
}

.schedule-fotter-img {
    width: auto;
    max-width: 500px;
}

.schedule-note {
    font-size: 12px;
    color: #555;
    text-align: left;
    margin-top: 20px;
    line-height: 1.5;
    font-weight: bold;
}

.schedule table {
    width: 100%;
    border-collapse: collapse;


}
.schedule th, td {
    text-align: center;
    padding: 12px;
}
.schedule th {
    background-color: #00BFFF;
    color: white;
    font-weight: 100;
    font-size: 13px;
}

.schedule td {
    background-color: #FFFFFF;
    border-bottom:  1px solid #ddd;
}

.schedule tbody tr:first-child {
    border-bottom: 2px solid #00BFFF;
}

.schedule th:first-child {
    width: 170px;
}



.footer {
    background-color: #00BFFF;
    color: #fff;
    text-align: center;
    padding: 1px 0;
}

.scroll-to-top {
    position: fixed; /* 常に画面の特定位置に表示 */
    bottom: 20px; /* 画面下からの距離 */
    right: 20px; /* 画面右からの距離 */
    width: 60px; /* ボタンのサイズ */
    height: 60px; /* ボタンのサイズ */
    background-color: #00AEEF; /* ボタンの背景色 */
    border: none; /* ボーダーを削除 */
    border-radius: 50%; /* ボタンを円形に */
    color: white; /* アイコンの色 */
    font-size: 24px; /* アイコンのサイズ */
    display: flex; /* 中央揃えのためのフレックスボックス */
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    cursor: pointer; /* クリック可能に */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
    transition: opacity 0.3s ease-in-out; /* フェードイン・アウトアニメーション */
    opacity: 0; /* 初期状態で非表示 */
    visibility: hidden; /* 初期状態で見えないように */
    z-index: 1000; /* 他の要素の上に表示 */
}

.scroll-to-top:hover {
    background-color: #0077AA; /* ホバー時の色 */
}

.scroll-to-top.show {
    opacity: 1; /* 表示状態 */
    visibility: visible; /* 表示状態 */
}



/* スマホ表示用スタイル */
@media screen and (max-width: 960px) {

  .header {
    position: absolute;
    top: 0;
    right: 0;
    width: auto; /* 必要な幅のみ使用 */
    align-items: flex-end; /* 右寄せ */
    padding: 10px;
    background: transparent; /* 背景を透明に */
}

    .logo {
        display: none; /* logo.jpgを非表示 */
    }

    .header-contact {
        display: flex; /* 横並び */
        flex-direction: row; /* ボタンを横並び */
        margin: 0;
    }

    .contact-img {
        margin: 0;
        height: 40px; /* 画像の高さを小さく調整 */
        width: auto;
    }

    .hamburger-menu {
        display: flex;
        margin-bottom: 12px;
    }


    .hero {
        position: relative;
    }

    .hero-image {
        position: relative;
    }

    .hero-overlay{
      position: static;
      width: auto;
      height: auto;
    }

    .hero-overlay-note{
      flex-direction:column;
      max-width:100%;
      padding: 10px 15px 40px 15px;
    }

    .hero-overlay table{
      width: 100%;
    }

    .hero-schedule{
      width: 100%;
    }

    .hero-overlay th{
      font-size:11px;
    }

    .time{
      font-size: 12px;
    }

    .hero-schedule-note{
      font-size: 11px;
      margin-top:5px;
      margin-bottom: 20px;
    }

    .schedule-img {
        width: 97%; /* スマホ表示時に画像を全幅表示 */
        margin: 10px;
    }

    .schedule-fotter-img {
        width: 100%; /* スマホ表示時に画像を全幅表示 */
    }

    .list-section {
        display: none;
    }

    .store-logo {
        display: block;
        margin: 0 auto 10px;
        max-width: 300px;
        height: auto;
    }

    .news-section {
    padding: 40px 20px;
  }

  .news-list {
    display: none;
  }

  .news-list-sp {
    display: block;
    text-align: left;
  }

  .flow-title {
      letter-spacing: 7px;
  }

    .flow-body-care-banner-img{
      max-width: 400px; /* 画像の幅を調整 */
      width: 100%;
      height: auto;
      margin-bottom: 10px;
      text-align: center;
    }

    .flow-steps-img{
      max-width: 350px; /* 画像の幅を調整 */
      height: auto; /* アスペクト比を維持 */
      margin: 0 auto; /* 中央寄せ */
      padding-top:20px;
      display: block;
    }

    .detail {
        max-width: 340px;
    }

    .detail p {
      margin: 0 -10px 20px -10px;
    }

    .flow-details {
        display: inline-block;
        margin-top: 50px;
    }

    .service-cards {
        display: inline-block;
        text-align: center;
    }

    .service-card {
      margin-top: 20px;
      box-shadow: none;
    }

    .service-card p {
      font-size: 13px;
      margin: 15px 5px;
    }

    .service-more-img {
    width: 80%;
    padding: 0 0 20px 0;
    }

    .service-card-white {
      background-color: #f9f9f9;
    }

    .contact-header p {
        font-size: 20px;
        letter-spacing: 5px;
    }

    .contact-background {
      font-size: 60px;
      letter-spacing: 10px;
    }

    .contact-buttons {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央揃え */
        gap: 10px; /* ボタン間の隙間を調整 */
    }

    .contact-buttons-big {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央揃え */
        gap: 10px; /* ボタン間の隙間を調整 */
        margin: 0;
    }

    .contact-button {
        max-width: 300px; /* ボタンの幅を調整 */
    }

    .contact-subtitle-img{
      width :100%;
      max-width: 300px;
    }

    .contact-note{
      display: none;
    }

    .schedule-note {
        padding-left: 12px;
    }

    .scroll-to-top{
      display: none;
    }

    .hero-overlay table{
      width: 100%;
    }

    .schedule{
      width: 100%;
    }

    .schedule th{
      font-size:11px;
    }

    .hero-schedule-note{
      font-size: 11px;
      margin-top:5px;
      margin-bottom: 20px;
    }


    .circle{
      font-size: 8px;
    }

    .triangle{
      font-size: 10px;
    }

    .slash {
        font-size: 8px;
    }

}

/* お問い合わせ */
.wpcf7 {
    max-width:800px;
    margin:0 auto;
}

/* テーブル */
.contact-table{
    width:100%;
    border-collapse:collapse;
}

.contact-table tr{
    border-bottom:1px solid #ddd;
}

/* 左タイトル */
.contact-item{
    width:30%;
    text-align:left;
    padding:20px;
    vertical-align:middle;
    background:#f7f7f7;
}

/* 右入力 */
.contact-body{
    width:70%;
    padding:20px;
}

/* input */
.form-text{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    font-size:16px;
    box-sizing:border-box;
}

/* textarea */
.form-textarea{
    width:100%;
    height:160px;
    padding:10px;
    border:1px solid #ccc;
    font-size:16px;
    box-sizing:border-box;
}

/* 必須 */
.contact-item span{
    color:#fff;
    background:red;
    font-size:12px;
    padding:2px 6px;
    margin-left:6px;
}

/* ボタン */
.contact-submit{
    display:block;
    margin:40px auto 0;
    padding:12px 40px;
    background:#333;
    color:#fff;
    border:none;
    cursor:pointer;
    font-size:16px;
}

.contact-submit:hover{
    opacity:.8;
}

/* 確認画面 */
#wpcf7cpcnf table{
    width:100%;
    border-collapse:collapse;
}

#wpcf7cpcnf tr{
    border-bottom:1px solid #ddd;
}

#wpcf7cpcnf th{
    width:30%;
    text-align:left;
    padding:20px;
    background:#f7f7f7;
}

#wpcf7cpcnf td{
    width:70%;
    padding:20px;
}

#wpcf7cpcnf td p{
    margin:0;
    padding:10px;
    border:1px solid #ccc;
    background:#fff;
}

/* textarea風 */
#wpcf7cpcnf tr:last-child td p{
    min-height:160px;
    white-space:pre-wrap;
}

/* スマホ */
@media(max-width:768px){

.contact-table,
.contact-table tbody,
.contact-table tr,
.contact-table th,
.contact-table td{
display:block;
}

.contact-item{
background:none;
padding-bottom:5px;
}

.contact-body{
padding-top:0;
width:95%;
}

}

@media (max-width: 480px) {
    .contact-body {
        width: 90%;
    }
}

/* 確認画面ボタン中央寄せ */
.wpcf7cp-btns{
    text-align:center;
    margin-top:40px;
}

/* ボタンデザイン */
.wpcf7cp-btns button{
    padding:12px 40px;
    font-size:16px;
    border:none;
    cursor:pointer;
    margin:0 10px;
}

/* 修正ボタン */
.wpcf7cp-cfm-edit-btn{
    background:#999;
    color:#fff;
}

/* 送信ボタン */
.wpcf7cp-cfm-submit-btn{
    background:#333;
    color:#fff;
}

#wpcf7cpcnf th{
width:30%;
text-align:left;
padding:20px;
background:#f7f7f7;
}

#wpcf7cpcnf td{
width:70%;
padding:20px;
}

#wpcf7cpcnf td p{
margin:0;
padding:10px;
border:1px solid #ccc;
background:#fff;
box-sizing:border-box;
text-align:left;
}

/* 確認画面 項目名表示 */
#wpcf7cpcnf tr:nth-child(1) th::before{
content:"お名前";
}

#wpcf7cpcnf tr:nth-child(2) th::before{
content:"ふりがな";
}

#wpcf7cpcnf tr:nth-child(3) th::before{
content:"電話番号";
}

#wpcf7cpcnf tr:nth-child(4) th::before{
content:"メールアドレス";
}

#wpcf7cpcnf tr:nth-child(5) th::before{
content:"お問い合わせ内容";
}

/* thデザイン */
#wpcf7cpcnf th{
width:30%;
text-align:left;
padding:20px;
background:#f7f7f7;
font-weight:normal;
}

/* 入力内容 */
#wpcf7cpcnf td p{
text-align:left;
}