/*
Theme Name: （一社）東京青色申告会連合会
Theme URI: non
Description:
Author:（一社）東京青色申告会連合会
Author URI: non
Version: バージョン 8.0
*/

@charset "utf-8";

.slug-special .content-wrap {
  background-color: #f6f4ef;
}

.content-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

h1 {
  font-size: 1.2rem;
  text-align: center;
  color: #187fc3;
}

h2 {
  font-size: 1.2rem;
  text-align: center;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.8rem;
}

.entry-content {
  overflow-wrap: break-word;
}

.post-list {
  padding: 0;
  color: #187fc3;
}

.post-list a {
  padding: 0;
  color: #187fc3;
}

.post-archive {
  background-color: white;
  overflow-wrap: break-word;
  padding: 4rem 1rem;
}

li {
  display: block;
}

.body-wrapper {
  padding: 1rem;
  background-color: white;
}

img.prison-break {
  max-width: unset; /* 100%の制限を解除 */
  width: calc(100% + 2rem); /* padding分を加えて広げる */
  margin: -1rem; /* padding分を相殺 */
  display: block;
  margin-top: 5rem;
  margin-bottom: 2rem;
}

.rounded-corners {
  border-radius: 3rem;
}

.bottom-corners {
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
}

.top-rounded-corners {
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
}
/*========= ヘッダーのデザイン ===============*/

#header {
  /*position: absolute;*/
  /*top: 0;*/
  max-width: 430px;
  width: 100%;
  height: 70px;
  z-index: 100;
  background-color: white;
}
.home #header,
.slug-first #header,
.slug-existing #header {
  background-color: #38beef;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 100%;
  /*width: 100%;*/
}

.logo {
  flex-shrink: 0;
}

.logo img {
  width: 130px;
  height: auto;
}

/*========= ヘッダー内のアイコン ===============*/

.header-icons {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
}

.header-icons img {
  display: block;
  width: 35px;	
}

@media only screen and (max-width: 767px) {
  .header-icons {
    gap: 8px;
  }
  .header-icons img {
    width: 35px;
  }
}

/*========= ハンバーガーボタン ===============*/

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  /*margin-left: 15px;*/
  padding: 0;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 4px;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s;
}

.hamburger_background {
  background-color: #3e487e;
  padding: 0.3rem;
  border-radius: 5px;
}

/* ハンバーガーボタンのアニメーション */

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

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

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* グローバルナビゲーション */

.global-nav {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: #3e487e;
  transition: all 0.3s ease;
  z-index: 200;
  padding-top: 70px;
}

.global-nav img {
  width: 50px;
}

.center-img {
  display: block;
  margin: 0 auto;
}

.telephone_number {
  text-align: center;
  color: white;
}

a.phone {
  text-decoration: none;
}

.global-nav.active {
  right: 0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-list li a {
  display: block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
}

/* オーバーレイ */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

.close-menu {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
}

/* スクロール防止 */

body.no-scroll {
  overflow: hidden;
}

#container {
  position: relative;
  z-index: 1;
  padding-top: 0;
}

/*========= 被る感じのレイアウトのためのCSS ===============*/

section.fixed {
  position: relative;
  background: #fff;
  /*min-height: 100vh;*/
  padding: 1rem 1.3rem 4rem;
}
section.hero {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* background関連のプロパティはfunctions.phpから動的に出力されるため削除 */
  min-height: 300px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero_text {
  margin-top: 2rem;
  margin-top: 2rem;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 上辺を揃える */
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  font-weight: 900;
}

.hero_text.fade {
  opacity: 0;
}

.hero p {
  writing-mode: vertical-rl;
  color: #fff;
  margin: 0;
  font-weight: bold;
}

.hero .button-container {
  position: absolute;
  bottom: 40px;
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  font-weight: bold;
}

.hero .button-link:hover {
  background: #c8c9ca;
  color: #807da2;
}

.hero .button-link {
  writing-mode: vertical-rl;
  text-decoration: none;
  color: #3e487e;
  background: #fff;
  padding: 1.5rem 0.2rem;
  border-radius: 30px;
  border: 8px solid #bae2f8;
  transition: all 0.3s ease;
  position: relative; /* 擬似要素の位置を調整するため */
  font-weight: bolder;
}

.hero .not_here {
  background: #c8c9ca;
  color: #807da2;
}

.hero .not_here:hover {
  color: #3e487e;
  background: #fff;
}

.hero .current_location::after {
  content: "";
  position: absolute;
  width: 8px; /* ボーダーと同じ太さ */
  height: 50px; /* 線の長さ（適宜調整） */
  background-color: #bae2f8; /* ボーダーと同じ色 */
  bottom: -58px; /* ボタンの下に配置 */
  left: 50%;
  transform: translateX(-50%);
}

section.landing {
  min-height: 50vh;
}

/*========= what_isのためのCSS ===============*/

.what_is {
  background-color: #ffffff !important;
  position: relative;
  z-index: 10; /* 最前面に表示 */
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  margin-bottom: -50px; /* 下のセクションに被せる */
  color: #187fc3;
  padding-bottom: 5rem !important;
  width: calc(100% + 1px);
  box-sizing: border-box;
}

/*========= news_topicのためのCSS ===============*/

.news_topic {
  background-color: #efebe2 !important;
  position: relative;
  z-index: 9;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  margin-bottom: -50px;
  color: #1c50a1;
  padding-bottom: 3rem !important;
  width: calc(100% + 1px);
  box-sizing: border-box;
}

.title-box {
  position: relative;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 0rem !important;
}

.title-box h2 {
  display: inline-block;
  /* margin: 0; */
  font-size: 1.5rem !important;
  font-weight: lighter;
  margin-bottom: 0.2rem;
}

.news_btn {
  position: absolute;
  right: 20px;
  top: 65%;
  transform: translateY(-50%);
  display: inline-block;
  padding: 0.3rem 0.5rem 0.4rem;
  background-color: #005bb5;
  color: #fff;
  text-decoration: none;
  border-radius: 20px; /* 角丸 */
  font-size: 0.6rem;
  font-weight: bold;
  transition: background 0.3s;
}

.news_btn:hover {
  background-color: #0073e6;
}

.news_topic img {
  width: 50%;
  height: auto;
  max-height: 300px; /* 必要に応じて高さを調整 */
  object-fit: contain; /* 画像の縦横比を維持して収める */
  display: block;
  margin: 2rem auto 0;
}

/*外部サイト表示*/

.post-item {
  text-align: left; /* 左寄せ */
  margin-bottom: 15px; /* 間隔 */
  text-align: center;
}

.post-date {
  font-size: 14px;
  color: #666;
}

.post-title {
  font-size: 16px;
  font-weight: normal;
  text-align: start;
}

.post-title a {
  text-decoration: none;
  color: #333;
}

.post-title a:hover {
  color: #0073aa;
}

/*========= introductionのためのCSS ===============*/

.introduction {
  background-color: #ddd780 !important;
  position: relative;
  z-index: 8;
  padding: 0 0 2rem !important;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  margin-bottom: -50px; /* 下のセクションに被せる */
  color: #1c50a1;
  width: calc(100% + 1px);
  box-sizing: border-box;
}

.introduction img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  /* 必要に応じて以下を追加 */
  max-width: none;
  margin-bottom: 2rem;
}

.introduction p {
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*========= inquiryのためのCSS ===============*/

.inquiry {
  background-color: #ebe8b3;
  position: relative;
  z-index: 7;
  padding-top: 6rem; /* 上のセクションとの重なりのための余白 */
  padding-bottom: 1.2rem;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  margin-bottom: -50px; /* 下のセクションに被せる */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* アイテム間の余白 */
  flex-wrap: wrap; /* はみ出す場合に折り返し */
  width: calc(100% + 1px);
  box-sizing: border-box;
}

.inquiry_box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px; /* アイテム間の余白（調整可） */
}

.inquiry_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 150px; /* 画像の最大幅を制限 */
}

.inquiry_inner img {
  width: 100%; /* 画像を親要素に収める */
  height: auto;
  max-width: 45%; /* 画像の最大サイズを制限 */
  margin: 0 auto;
}

.inquiry_inner a {
  width: 100%; /* 画像を親要素に収める */
  height: auto;
}

/*========= aboutのためのCSS ===============*/

.about {
  background-color: #3e487e;
  position: relative;
  color: #fff;
  z-index: 6;
  padding-top: 5rem; /* 上のセクションとの重なりのための余白 */
  padding-bottom: 70px;
  margin-bottom: -50px; /* 下のセクションに被せる */
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  width: calc(100% + 1px);
  box-sizing: border-box;
}

.about p {
  margin: 0.3rem !important;
}

.about a {
  display: flex; /* 横並びにする */
  align-items: center; /* 縦方向中央揃え */
  color: white; /* 文字色を白に */
  text-decoration: none; /* 下線を消す */
}

.about a img {
  margin-right: 8px; /* 画像とテキストの間に余白を追加 */
  height: auto;
  width: 8%;
}

.map_box {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.opening-times {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.opening-times div {
  flex: 1;
  max-width: 50%;
}

.opening-times img {
  /*max-width: 185px;*/
  /* height: auto;*/
  width: 185px; /* 幅を固定 */
  height: 120px; /* 高さを固定 */
  display: block;
  /*object-fit: contain;*/
  object-fit: cover;
  border-radius: 15px;
  border: 3px solid white;
}

@media (max-width: 420px) {
  .opening-times img {
    max-width: 165px;
  }
}

@media (max-width: 376px) {
  .opening-times img {
    max-width: 160px;
  }
}
/*========= プライバシーポリシーのためのCSS ===============*/

.privacy-h1-box {
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  background-color: #f5f2ec;
}

.white-back {
  background-color: white;
  padding: 1rem;
}

.pb-2 {
  padding-bottom: 2rem;
}

/*========= 三大特典のためのCSS ===============*/
.more {
  background-color: #f6f4ef;
}

img.symbol {
  margin: 0 auto;
  width: 10%;
  padding-top: 2rem;
}

.slug-inquiry h1,
.more h1 {
  font-size: 2rem;
  font-weight: 200;
  margin-bottom: 0.2rem;
  color: #163785;
}
.slug-support-booking h1,
.slug-inquiry h1 {
  font-size: 1.8rem;
  font-weight: 200;
  margin-bottom: 0.2rem;
  color: #163785;
}

.great-h2plus {
  font-size: 2rem !important;
  font-weight: 200;
  margin-bottom: 0.2rem;
  color: #163785;
}

.great-h2 {
  color: #4875ba;
  font-weight: 200;
  font-size: 1rem !important;
  margin-top: 0;
}
.more p {
  padding-left: 1rem;
  padding-right: 1rem;
}

.center {
  text-align: center;
}

img.circle {
  width: 50%;
  margin: auto;
  padding: 0.8rem;
}

img.mountain-shape {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

/*ふきだし*/
.balloon1 {
  position: relative;
  display: block;
  background-color: #3782c4;
  color: #fff;
  /*padding: 1rem 1.5rem;*/
  border-radius: 20px;
  text-align: center;
  max-width: 300px;
  margin: 2rem auto 1rem;
}

.balloon1::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #3782c4;
}

.balloon1 p {
  margin: 0 !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: bold;
}

p.vivid-sky-blue {
  color: #0086cd;
  font-size: 1.1rem;
  line-height: 1.7rem;
  margin-bottom: 0.5rem !important;
}

.custom-list {
  list-style: none;
  padding: 0 1rem;
  margin-top: 0;
}
.custom-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: #0086cd;
  font-size: 1.1rem;
  line-height: 1.3rem !important;
}
.custom-list li::before {
  content: "\25C9"; /* ◉ のユニコード */
  position: absolute;
  left: 0;
  top: 0;
  color: #0086cd; /* アイコンの色 */
  font-weight: bold;
}

.custom-list-alt li::before {
  content: "\25CF"; /* ● のユニコード */
  color: #0086cd; /* 別のカラー */
}

.custom-list li span {
  color: #000;
}

.list-small li {
  font-size: 1rem;
  line-height: 1.8rem !important;
}

.list-small li::before {
  content: "\25C9"; /* ◉ のユニコード */
  position: absolute;
  left: 0;
  top: 0;
  color: #0086cd; /* アイコンの色 */
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.5rem;
}

.middle-ul li {
  line-height: 1.8rem !important;
}

.button-container {
  text-align: center; /* 中央揃え */
  margin-top: 20px; /* 上部に余白 */
  display: flex;
  gap: 1rem; /* ボタン間の余白 */
  justify-content: center; /* 中央揃え */
}

.little-box {
  margin-left: 1rem;
  margin-right: 1rem;
  gap: 0.5rem; /* ボタン間の余白 */
  margin-top: 2rem;
}

.custom-button {
  display: inline-block;
  padding: 8px 24px 9px;
  background-color: #3782c4;
  color: #fff;
  border: 5px solid #96b1dc;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-bottom: 1.5rem;
}

.custom-button:hover {
  background-color: #2b6ca8;
}

.yellowbtn {
  background-color: #d3ce52;
  color: #fff;
  border: 5px solid #e4e098;
  border-radius: 30px;
  font-weight: 200;
}

.yellowbtn:hover {
  background-color: #fde182;
}

.little {
  padding: 2px 6px 4px;
  border-radius: 10px;
  font-weight: 200;
  margin-bottom: 0;
}

p.custom-text1 {
  color: #3782c4;
  font-size: 1.2rem;
  text-align: center;
  line-height: 2.5rem;
}

img.free-consultation {
  margin-top: 5rem;
  margin-bottom: 2.5rem;
}

.schedule-table {
  width: 92%;
  border: 2px solid #3782c4;
  border-collapse: collapse;
  margin: 2rem auto 0rem;
}

.schedule-table th {
  font-weight: 200;
  background-color: #3782c4;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  font-size: 15px;
}

.schedule-table td {
  background-color: transparent;
  color: #3782c4;
  text-align: center;
  padding: 5px 10px;
  border-top: 1px solid #3782c4;
}

p.note {
  font-size: 0.8rem;
  margin-top: 0.2rem !important;
}

p.blue1 {
  color: #3782c4;
}

.reservation-button {
  display: inline-block;
  padding: 10px 30px 14px;
  background-color: #3782c4;
  border: 5px solid #96b1dc;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.reservation-button:hover {
  background-color: #96b1dc;
  color: #3782c4;
}

.center {
  text-align: center;
}

/*========= サポート他事業紹介の為のcss ===============*/

p.support-top {
  font-size: 1.1rem;
  color: #3e487f;
  text-align: center;
  margin-top: 1.5rem !important;
}
.support-list {
  margin-top: 1.8rem;
  margin-bottom: 2.5rem;
}

.support-list li {
  color: #3e487f;
  font-size: 0.9rem;
  line-height: 0.9rem;
}

.support-list li::before {
  content: "\25CF"; /* ● のユニコード */
  color: #3e487f; /* アイコンの色 */
  font-weight: 200;
}

.support-listbig li {
  color: #3e487f;
}

.support-listbig li::before {
  color: #3e487f; /* アイコンの色 */
  font-weight: 200;
}

p.support-text {
  color: #3e487f;
  font-size: 0.9rem;
  line-height: 1.5rem;
}

p.bottom-custom {
  color: #3e487f;
  font-size: 0.9rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem !important;
}

.list-custom-top {
  margin-top: 0;
}

.reservation-button2 {
  display: inline-block;
  padding: 8px 30px 10px;
  background-color: #3782c4;
  border: 5px solid #96b1dc;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 1.2rem;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.reservation-button2:hover {
  background-color: #96b1dc;
  color: #3782c4;
}

.center {
  text-align: center;
}

.support-button {
  padding: 9px 83px 10px 83px;
  border: 5px solid #96b1dc;
  border-radius: 30px;
  margin-bottom: 1.5rem;
}
/*========= 入会のご案内の為のcss ===============*/
.color-cornflower-blue {
  color: #4875ba !important;
  margin-top: 1rem;
  margin-bottom: 2.5rem !important;
}

.mrl-1 {
  margin-left: 1rem;
  margin-right: 1rem;
  width: 90%;
}

.list-tiny {
  list-style: none;
  padding: 0 1rem;
  margin-top: 0;
}

.list-tiny li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: #0086cd;
  font-size: 1rem;
  line-height: 1rem;
}

.list-tiny li::before {
  content: "\25CF"; /* ● のユニコード */
  font-size: 0.8rem;
  position: absolute;
  left: 0;
  top: 0;
  color: #0086cd; /* アイコンの色 */
}

.rounded-box {
  background-color: #fbf9f6; /* 背景色 */
  color: #000; /* テキスト色 */
  border: #9fa0a0 solid 1px;
  border-radius: 12px; /* 角丸 */
  padding: 0.2rem 0.5rem; /* 余白 */
  display: inline-block; /* コンテンツ幅に合わせる */
  text-align: center; /* 中央揃え */
  margin-left: 1rem;
}

.rounded-box p {
  font-size: small;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

table.simple-table {
  border-collapse: collapse;
  width: 90%;
  border: 2px solid #8c8c8c;
  margin: 0 auto;
}

td {
  border: 1px solid #8c8c8c;
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: small;
}

.member-box {
  color: #3782c4;
  font-size: 0.9rem;
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.member-title {
  font-weight: 200;
  margin-bottom: 0.3rem;
}

.member-description {
  border-top: 1px solid #3782c4;
  margin-top: 0.3rem !important;
  padding-top: 0.5rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

table.membership-fee-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-family: sans-serif;
  width: 90%;
  margin: 0 auto;
}

.membership-fee-table th {
  background-color: #3782c4;
  color: white;
  text-align: center;
  padding: 10px;
  border: 1px solid white;
}

.membership-fee-table td {
  text-align: center;
  padding: 10px;
  border: 1px solid #d3d3d3;
}

.member-type {
  padding-left: 10px;
}

.notice-list {
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
  color: black;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1.5rem;
}

.notice-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  line-height: 1rem;
}

.notice-list li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: black;
  font-weight: bold;
}

.period-heading {
  font-size: 1rem;
  font-weight: 200;
  margin: 20px 0 10px 0;
  color: #3782c4;
  margin-left: 1rem;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  width: 90%;
  margin: 0 auto;
}

.schedule-table tr td.day-header {
  background-color: #3782c4;
  color: white;
}

.day-header {
  background-color: #3782c4;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: normal;
}

.hours-row {
  background-color: white;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.hours-cell {
  padding: 10px;
}

.note2 {
  font-size: 0.8rem;
  color: #3782c4;
  line-height: 1.2rem;
  margin-top: 15px;
  border-left: #3782c4 solid 2px;
  margin-left: 1.4rem;
  margin-right: 1rem;
  padding-left: 0.5rem;
}
.comments2 {
  font-size: 0.8rem;
  color: #3782c4;
  margin-bottom: 0.5rem !important;
}

/*========= お問い合わせページのためのCSS ===============*/

.slug-inquiry img.symbol {
  margin: 0 auto;
  width: 10%;
  padding-top: 0;
}

/*========= 投稿ページのためのCSS ===============*/

.site-main {
  min-height: 80vh;
}

.single #primary {
  padding: 1rem 1rem 2rem;
}

.single h1 {
  text-align: start;
}
.entry-meta {
  text-align: end;
}
.page-content {
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 1.5rem;
}

.wp-block-preformatted {
  font-size: 14px;
  line-height: 1.8rem;
}
/*========= 投稿一覧ページのためのCSS ===============*/

.archive-content {
  padding-left: 1rem;
  padding-right: 1rem;
}

.archive-content h2 {
  margin-top: 0;
  font-size: 1.2rem;
  color: #187fc3;
  text-align: start;
}

.archive-list {
  padding-left: 0;
}

.archive-content a {
  text-decoration: none;
}

p.archive-item-date {
  margin-bottom: 0.3rem;
}

p.post-date {
  margin: 0;
  font-size: 1rem;
  text-align: start;
}

.post-item a {
  text-decoration: none;
  color: #187fc3;
  margin-top: 1rem;
  text-align: start;
}

.post-item h2 {
  font-size: 1.3rem;
  margin-top: 0.3rem;
}

.post-archive {
  min-height: 80vh;
}

.post-list h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.post-list p {
  margin-top: 0.5rem !important;
  margin-bottom: 0rem !important;
}

.latest-posts {
  margin-bottom: 2rem;
}

/*========= ボタンのためのCSS ===============*/

.button-link-s {
  border-radius: 100px;
  display: block;
  width: 150px;
  padding: 5px 5px 7.5px;
  box-sizing: border-box;
  background: #d3ce52;
  color: #fff;
  text-decoration: none;
  text-align: center;
  margin: 0 auto 2.5rem;
}

.bc {
  border-radius: 100px;
  display: block;
  width: 150px;
  padding: 5px 5px 7.5px;
  box-sizing: border-box;
  background-color: #cd984a;
  color: #fff;
  text-decoration: none;
  text-align: center;
  margin: 0 auto 2.5rem;
}

.google-map {
  margin-top: 1rem;
  border-radius: 100px;
  display: inline-block;
  width: 200px;
  padding: 0.4rem 0 0.7rem;
  box-sizing: border-box;
  background-color: #3e487f;
  border: solid 1px white;
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  margin: 2rem auto 2.5rem;
  height: 50px; /* 高さを指定（適宜調整） */
}

.about_us {
  text-align: center;

  margin: 0 auto;

  color: #000;
}

.about_us img {
  width: 18%;
  margin: 0 auto;
}

.time-box a {
  font-size: small;
  color: #40a5e8;
  margin-top: 0.5rem;
}

#footer {
  position: relative;
  z-index: 3;
  background-color: #3e487e;
}

small {
  color: #fff;
  display: block;
  text-align: center;
  padding: 20px;
}

.page-template-default #footer {
  background-color: white;
}
.page-template-default small {
  color: #000;
}

#primary {
  background-color: white;
  padding: 4rem 1rem 2rem;
}

/*========= パンくずのためのCSS ===============*/

.breadcrumb_box {
  background-color: white;
  padding-left: 1rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
  font-size: small;
}

.page-template-existing .breadcrumb_box,
.page-template-first .breadcrumb_box {
  background-color: #3e487e;
  color: white;
  padding-bottom: 0rem;
  padding-top: 0rem;
}

.page-template-existing .breadcrumb_box a,
.page-template-first .breadcrumb_box a {
  color: white;
}

.breadcrumb_box a {
  text-decoration: none;
}

.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.breadcrumb li {
  margin-right: 10px;
}

.breadcrumb li::after {
  content: ">";
  margin-left: 10px;
}

.breadcrumb li:last-child::after {
  content: "";
}

/*========= BACKbuttonのためのCSS ===============*/

.back-button-box {
  background-color: white;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.back-button {
  background-color: white;
  font-size: 16px;
  color: #cd984a;
  border: #cd984a solid 1px;
  font-weight: lighter;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  margin-top: 1rem;
}

.slug-existing-support .back-button-box,
.slug-join .back-button-box,
.slug-support .back-button-box,
.slug-special .back-button-box {
  background-color: #f6f4ef;
}

.back-button:hover {
  color: white;
  background-color: #cd984a;
}

.slug-existing-support .back-button,
.slug-join .back-button,
.slug-support .back-button,
.slug-special .back-button {
  background-color: #f6f4ef;
}

/*========= ページネーションのためのCSS ===============*/

/*.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  margin-top: 3rem;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #187fc3;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.pagination a:hover {
  background: #145a8d;
}

.pagination .current {
  background: #3e487e;
  width: 48px;
  height: 48px;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  transform: translateY(-4px);
}

.pagination .prev,
.pagination .next {
  font-size: 20px;
  width: 40px;
  height: 40px;
}

.pagination .prev:hover,
.pagination .next:hover {
  background: #145a8d;
}*/

/*footerの為のcss*/
.home #footer {
  background-color: #3782c4;
}

.home small {
  color: white;
}

.single #footer,
.category #footer,
.slug-privacy #footer,
.slug-number #footer,
.slug-inquiry #footer {
  background-color: white;
}

.slug-support-booking #footer,
.slug-join #footer,
.slug-support #footer,
.slug-special #footer,
.slug-existing-support #footer {
  /* background-color: #f6f4ef;*/
  background-color: white;
}

.slug-support-booking small,
.single small,
.category small,
.slug-join small,
.slug-support small,
.slug-special small,
.slug-privacy small,
.slug-number small,
.slug-inquiry small,
.slug-existing-support small {
  color: #000;
}

/*contactfoam7*/
.form-container {
}

/*h2 {
  color: #2c5282;
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 15px;
}*/
p.color {
  color: #187fc3;
}

.form-row {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
}

.label-text {
  display: block;
  margin-bottom: 5px; /* 調整可能 */
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

input[type="date"] {
  margin-bottom: 1rem;
  margin-right: 5px;
}

.form-group {
  align-items: center; /* 縦の位置を揃える */
  gap: 10px; /* 要素間の余白 */
}

.radio-group {
  margin: 15px 0;
}

.radio-option {
  margin: 8px 0;
  display: flex;
  align-items: center;
}

span.wpcf7-list-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

span.wpcf7-list-item input[type="radio"] {
  margin-right: 8px;
}

.date-time-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

textarea {
  height: 150px;
  resize: vertical;
}

select {
  max-width: 100%;
  width: 35%;
  padding: 10px 5px;
}

.form-row p {
  margin-bottom: 0 !important;
}

.drop {
  display: none;
}

p.preferred {
  margin-bottom: 10px !important;
  font-weight: bold;
  margin-top: 0 !important;
}

.label-text-small {
  font-size: 0.8rem;
}

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

.info-box {
  margin-top: 20px;
}

.info-box p,
.form-group p {
  margin-top: 0 !important;
}

.form-group p {
  margin-bottom: 0 !important;
}

.radio-group {
  margin-bottom: 30px;
}

.acceptance-table {
  width: 100%;
  border: none;
  border-collapse: collapse; /* 枠線を完全に消す */
}

.acceptance-table td {
  border: none; /* 各セルの枠線を消す */
  padding: 0; /* 余白を調整（必要なら変更） */
}

.checkbox-cell {
  width: 30px; /* チェックボックスのセルの幅 */
  text-align: center;
}

.text-cell {
  padding-left: 10px; /* テキストの余白 */
}

.text-cell p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.checkbox-cell input[type="checkbox"] {
  width: 15px; /* 横サイズ */
  height: 15px; /* 縦サイズ */
  transform: scale(1.5); /* 拡大 */
}

input[type="submit"] {
  background-color: #187fc3;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: block;
  margin: 0 auto;
  width: 90%;
  text-align: center;
}

input[type="submit"]:hover {
  background-color: #66b3ff;
}

.message-box {
  margin-bottom: 10px;
  margin-top: 30px;
}
.mt-1 {
  margin-top: 3rem;
}
@media screen and (max-width: 420px) {
  .opening-times {
    flex-direction: column-reverse;
  }
  .little-box {
    flex-direction: column;
  }
  p.support-top {
    font-size: 0.9rem;
  }
  p.custom-text1 {
    font-size: 1rem;
  }
  .schedule-table th {
    padding: 5px 10px;
    font-size: 13px;
  }
  .schedule-table td {
    font-size: 14px !important;
  }
  .custom-button {
    padding: 8px 19px;
  }
}
span.comma {
  letter-spacing: -0.2em; /* 文字間隔を詰める */
}

.original {
  background-color: #3782c4 !important;
  color: white;
}

.original h1 {
  color: white;
}

.original h2 {
  color: #d3ce52;
  text-align: start;
}

.custom-text-color {
  transition: color 0.3s ease;
}

input[type="date"] {
  background-color: #fff !important;
}
.wpcf7-select {
  background-color: #fff !important;
}
@media screen and (max-width: 850px) {
  .wpcf7-date {
    width: 100% !important;
    min-width: 300px;
    margin: 0 0 10px 0;
    position: relative;
    padding-left: 1rem;
    height: 40px;
    box-sizing: border-box;
    color: transparent !important;
  }
  .wpcf7-date::before {
    content: "日付を選択する";
    font-size: 16px;
    color: #000;
    white-space: nowrap;
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
  }
}
/* 営業時間の改行を防ぐ */
.business-hours p {
  white-space: nowrap;
}

/* またはインライン表示にする場合 */
.business-hours p {
  display: inline-block;
  white-space: nowrap;
}

/* レスポンシブ対応版 */
.business-hours {
  display: flex;
  flex-wrap: wrap;
}

.business-hours p {
  white-space: nowrap;
  margin: 0;
}