@charset "UTF-8";

/* CSS Document */
/*-------------------------------------------------------------------------------------
PC用レイアウト（768px以上スクリーン）
----------------------------------------------------------------------------------------*/
/*--------------------------------------------------
共通設定(PC)
-----------------------------------------------------*/
/*body全体の初期スタイル調整*/
body {
  font-size: 62.5%;
  /*emの計算をしやすくするための定番設定*/
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: normal;
  color: #000;
}

/*リンク文字の設定*/
a {
  text-decoration: underline;
}

a:link,
a:visited {
  color: #39f;
}

a:hover,
a:active {
  color: #f60;
}

/*ブラウザのCSSをリセット*/
p {
  margin: 0 !important;
  padding: 0 !important;
}

/*セクションエリアの共通設定*/
section {
  clear: both;
  overflow: auto;
}

/*--------------------------------------------------
見出しタグ設定（PC）
-----------------------------------------------------*/
h2 {
  margin: 0.5em 0em;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}

h3 {
  margin: 0.5em 0em;
  padding: 0.3em 0.6em;
  font-size: 1.6em;
  font-weight: bold;
  border-left: 8px solid #10559A;
  border-bottom: 1px dotted #10559A;
}

h4 {
  margin: 0.5em 0em;
  padding: 0.3em 0.6em;
  font-size: 1.4em;
  border: 1px solid #ccc;
  font-weight: bold;
}

h5 {
  margin: 0.5em 0em;
  padding: 0.1em;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 1px dotted #ccc;
}

/*--------------------------------------------------
全体レイアウト／背景設定（PC）
-----------------------------------------------------*/
/*全体エリア（全体背景を設定するにはここ）*/
.main {
  background-color: #f2f2f2;
}

/*記事(ボディ)エリア*/
.article {
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  font-size: 1.6em;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  /*=16px*/
}

/*記事(ボディ)エリアの行間*/
.article p {
  line-height: 1.6;
}

/*カラム全体の幅を変更する*/
.article,
.top_image_in {
  width: 1000px;
  margin: 0 auto;
  /*真ん中に要素を置きたいときに使う*/
}

/*--------------------------------------------------
上部固定ヘッダー設定
-----------------------------------------------------*/
/*上部固定ヘッダー全体*/
.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 5000;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  overflow: auto;
}

/*ヘッダー内部をカラム幅にする*/
.header_inr {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

/*ヘッダーのロゴ*/
.header_logo {
  width: 20%;
  float: left;
  margin: 0em;
}

/*ヘッダーの問い合わせボタン*/
.header_mail {
  width: 25%;
  float: right;
  margin: 0.8em 0em 0em;
}

/*ヘッダーの電話ボタン*/
.header_tel {
  width: 30%;
  float: right;
  margin: 0.8em 0em 0em;
}

/*ヘッダー内の画像が常に幅100%になるように*/
.header_logo img,
.header_mail img,
.header_tel img {
  width: 100%;
}

/*--------------------------------------------------
sectionの設定
-----------------------------------------------------*/
.seciton_01 {
  padding: 0;
}

.section_02 {
  background-color: #dcdcdc;
  padding: 1.5em 3em;
}

.section_03 {
  padding: 1.5em 3em;
}

.section_04 {
  background-color: #FFFEF0;
  padding: 1.5em 3em;
}

/*--------------------------------------------------
チェックリスト設定
-----------------------------------------------------*/
ul.checklist {
  background-color: #fff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 1em;
}

ul.checklist li {
  background-image: url("../images/icon-check03-red.png");
  background-repeat: no-repeat;
  background-size: 3.5%;
  padding-left: 1.8em;
  margin-bottom: 0.8em;
}

ul.checklist li:last-child {
  margin-bottom: 0em;
}

/*--------------------------------------------------
テーブル設定
-----------------------------------------------------*/
table {
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  margin: 1em 0em;
}

th,
td {
  padding: 0.5em;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

th {
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
}

td {
  background-color: #fff;
  text-align: left;
}

/*スマホでは行が列になるテーブルタグ*/
.table_style_01 {
  text-align: left;
  vertical-align: middle;
}

/*--------------------------------------------------
フォーム設定
-----------------------------------------------------*/
.mailform {
  background-color: #fff;
  margin-bottom: 1em;
  padding: 1em 0em 1.5em;
  box-shadow: 0px 0px 1px #000;
}

.input {
  padding: 0 2em;
}

.input_style {
  background-color: #FFFBF0;
  width: 100%;
  height: 60px;
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 1.4em;
}

input[type="image"] {
  width: 100%;
}

.caution {
  text-align: center;
  font-size: 0.8em;
  color: #F00;
}



/*--------------------------------------------------
よくある質問
-----------------------------------------------------*/
.box_qa {
  background-color: #efefef;
  padding: 1em;
}

.box_qa_q {
  background-color: #fff;
  padding: 1em 2em 1em 3em;
  border-bottom: 1px solid #ccc;
  font-size: 1.2em;
  font-weight: bold;
  color: #D10003;
}

.box_qa_a {
  background-color: #fff;
  padding: 1em 2em 1em 3em;
  border-bottom: 1px solid #ccc;
}

.box_qa_q p,
.box_qa_a p {
  text-indent: -2em;
}

/*--------------------------------------------------
CTAエリア
-----------------------------------------------------*/
.area_cta {
  background-color: #105FA3;
  padding: 1em 3em;
}

.area_cta_inr {
  background-color: #fff;
  padding: 1em 2em;
  overflow: auto;
}

.area_cta_inr_left {
  float: left;
  width: 48%;
}

.area_cta_inr_left:hover {
  opacity: 0.6;
}

.area_cta_inr_right {
  float: right;
  width: 48%;
}

/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
  background-color: #7DD548;
  padding: 2em 0em;
  text-align: center;
  font-size: 1.4em;
  color: #fff;
}

.footer a {
  color: #fff;
}

/*--------------------------------------------------
ファーストビュー
-----------------------------------------------------*/

.top_image_in img {
  width: 100%;
  height: auto;
}

/* PCではPC画像を表示する */
.pc_view {
  display: block;
}

/* PCではスマホ画像を非表示にする */
.sp_view {
  display: none;
}

/* ================================================================= */
/* 冒頭あいさつ導入部分 */
/* ================================================================= */
.section_05 {
  padding: 5em 1em 2em;
}

/* PCではPC用画像を表示 */
.h2_image.pc_view {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* 中央寄せ */
}

/* PCではスマホ用画像を非表示 */
.h2_image.sp_view {
  display: none;
}

.greeting_content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30px;
}

.greeting_image_box {
  width: 30%;
  text-align: center;
  flex-shrink: 0;
}

.greeting_image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.greeting_name {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 10px;
}

.greeting_text_box {
  width: 70%;
  padding-left: 30px;
  line-height: 1.8;
  font-size: 1.4em;
}

.highlight {
  font-weight: bold;
  color: #c90000;
  /* 強調用の色を設定 */
  background: linear-gradient(transparent 70%, #fffacd 70%);
  /* マーカー風の背景色 */

}

/* ================================================================= */
/* コンテナクラス */
/* ================================================================= */
.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}


/* ================================================================= */
/* お客様ストーリー */
/* ================================================================= */
.section_06 {
  padding: 3em 1em;
  background-color: #f7f3ed;
  margin-top: 50px;
}

.container {
  max-width: 800px;
  /* 幅を800pxに制限 */
  margin: 0 auto;
  /* 中央寄せ */
}

.story_block {
  margin-bottom: 40px;
}

.story_image {
  width: 45%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.right_float {
  float: right;
  margin-left: 30px;
}

.left_float {
  float: left;
  margin-right: 30px;
}

.story_block p {
  line-height: 1.8;
  font-size: 1.4em;
}

.story_heading {
  font-size: 1.8em;
  font-weight: bold;
  color: #c90000;
  margin-bottom: 20px;
}

.al-c img {
  margin-bottom: 30px;
}

.strong_text {
  font-weight: bold !important;
  color: #333 !important;
}

/* ================================================================= */
/* CTAボタン（ファーストビュー直下） */
/* ================================================================= */
.cta_main {
  text-align: center;
  background-color: #FFFDD8;
  padding: 30px 0;

}

.cta_main_buttons {
  display: block;
  /* Flexboxを解除し、要素を縦に並べる */
  margin: 0 auto;
}

.cta_button {
  display: block;
  /* inline-blockからblockに変更して横幅いっぱいにする */
  max-width: 600px;
  /* PCでの最大幅を維持 */
  margin: 0 auto 20px;
  /* 中央寄せと下部の余白を追加 */
  animation: float 2s ease-in-out infinite;
}

.cta_button img {
  width: 100%;
  height: auto;
}

/* 静的な画像用のスタイル */
.cta_static_image {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 20px;
}

.cta_static_image img {
  /* PC版のサイズを600pxに設定 */
  max-width: 600px;
  width: 100%;
  height: auto;
}


.cta_text {
  max-width: 800px;
  margin: 20px auto 0;
  padding: 0 15px 20px; /* スマートフォンでの見やすさを考慮 */
  text-align: center;
}

.cta_text h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.cta_text p {
  font-size: 14px;
  line-height: 1.6;
}

/* アニメーションの定義 */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ================================================================= */
/* なぜ？セクション */
/* ================================================================= */
.section_07 {
  padding: 3em 0;
}

.text_content {
  line-height: 1.8;
  font-size: 1.4em;
  padding: 0 20px;
}

.text_content p {
  margin-bottom: 1em;
}

.text_content .strong_text {
  font-weight: bold !important;
  color: #333 !important;
}

.text_content .highlight {
  font-weight: bold;
  color: #c90000;
  background: linear-gradient(transparent 70%, #fffacd 70%);
}

/* ================================================================= */
/* 3つの秘訣（詳細） */
/* ================================================================= */
.section_09 {
  padding: 3em 0;
  background: repeating-linear-gradient(-45deg,
      #fff,
      #fff 10px,
      #ffffe0 10px,
      #ffffe0 20px);
}

.h3_image {
  margin: 30px 0;
  width: 90%;
  height: auto;
}

.secret_detail_block {
  margin-bottom: 50px;
}

.secret_detail_image {
  width: 45%;
  height: auto;
}

.secret_detail_text {
  line-height: 1.8;
  font-size: 1.4em;
}

.secret_detail_text p {
  margin-bottom: 1em;
}

.secret_detail_text ul {
  font-weight: bold;
  /* ここを追加 */
  list-style-type: none;
  margin-bottom: 1em;
  font-weight: bold;
}

/* 新規追加：アンダーライン */
.underline {
  text-decoration: underline;
}

.secret_detail_text li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.8;
}

.secret_detail_text li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #c90000;
}

.secret_summary {
  margin-top: 50px;
  line-height: 1.8;
  font-size: 1.4em;
  text-align: center;
}

.secret_summary ul {
  font-size: 1.2em;
  font-weight: bold;
  /* ここを追加 */
  list-style-type: none;
  margin: 20px auto;
  max-width: 600px;
  text-align: left;
}

/* 新規追加：アンダーライン */
.underline {
  /* マーカーの色をオレンジ色に変更 */
  background: linear-gradient(transparent 60%, #ffcc99 60%);
  /* 明るいオレンジ色 */
  text-decoration: none;
}

.secret_summary li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.secret_summary li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #c90000;
}

/* ================================================================= */
/* ボックススタイル */
/* ================================================================= */
.box {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* ================================================================= */
/* 実績・まとめセクション */
/* ================================================================= */
.section_10 {
  padding: 3em 0;
}

.section_10 .text_content .h2_image {
  margin-bottom: 30px;
  /* 画像の下に余白 */
  width: 100%;
  /* 親要素に合わせて幅を調整 */
  height: auto;
}

.section_10 .text_content p {
  line-height: 1.8;
  font-size: 1.0em;
  margin-bottom: 1.5em;
}

.secret_summary_text {
  font-size: 1.2em;
  font-weight: bold;
}

.section_10 .text_content .data_image {
  margin: 30px auto;
  /* 上下の余白と中央寄せ */
  width: 90%;
  /* 親要素に合わせて幅を調整 */
  height: auto;
  max-width: 600px;
  /* 必要であれば最大幅を設定 */
}

/* ================================================================= */
/* 特典セクション（ワイヤーフレーム版） */
/* ================================================================= */
.section_11 {
  padding: 3em 0;
  background-color: #f7f3ed;
  /* ワイヤーフレームの背景色 */
}

.benefits_box {
  margin-top: 30px;
}

.benefit_item {
  margin-bottom: 50px;
}

.benefit_h3 {
  max-width: 600px;
  width: 90%;
  height: auto;
  margin: 0 auto 30px;
}

.benefit_h3.pc_view {
  display: block;
}

.benefit_h3.sp_view {
  display: none;
}

.benefit_content {
  overflow: hidden;
  margin: -80px 0 0 0;
  padding: 80px 30px 30px 30px;
  background-color: #ffffff;
  /* 白いボックス */
  border-radius: 10px;
}

.benefit_image {
  width: 40%;
  height: auto;
}

.benefit_image.right_float {
  float: right;
  margin-left: 30px;
}

.benefit_image.left_float {
  float: left;
  margin-right: 30px;
}

.benefit_text {
  line-height: 1.8;
  font-size: 22px;
}

.benefit_heading {
  font-weight: bold;
  font-size: 26px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.benefit_text p {
  margin-bottom: 1.5em;
}

/* 箇条書きは今回は不要 */
.benefit_text ul,
.benefit_text li,
.benefit_text li::before {
  display: none;
}


/* ================================================================= */
/* 最終説得パート */
/* ================================================================= */
.section_12 {
  padding: 3em 0;
  background-color: #fff;
}

.reservation_content {
  display: flex;
  /* Flexboxでテキストと画像を横並びにする */
  align-items: flex-start;
  gap: 30px;
  padding: 30px;
}

.reservation_text {
  flex: 1;
  /* テキストが残りのスペースを埋める */
}

.reservation_text p {
  line-height: 1.8;
  font-size: 22px;
  margin-bottom: 1.5em;
}

.reservation_image {
  flex-shrink: 0;
  /* 画像の縮小を防ぐ */
  width: 45%;
  /* 画像の幅を調整 */
}

.reservation_image img {
  width: 100%;
  height: auto;
}

/* ================================================================= */
/* 施術費用セクション */
/* ================================================================= */
.section_13 {
  padding: 3em 0;
  background: repeating-linear-gradient(-45deg,
      #fff,
      #fff 10px,
      #ffffe0 10px,
      #ffffe0 20px);
}

.price_text_content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 22px;
}

.price_text_content p {
  margin-bottom: 1.5em;
}

.price_table_image {
  max-width: 90%;
  height: auto;
  margin-bottom: 10px;
}

.price_disclaimer {
  font-size: 18px;
  font-style: italic;
  margin-bottom: 1.0em;
}

.sche_image {
  max-width: 70%;
  height: auto;
  margin-bottom: 10px;
}

/* ================================================================= */
/* お客様の声セクション */
/* ================================================================= */
.section_21 {
  padding: 3em 0;
  background-color: #f7f3ed;
}



.voice_item {
  padding: 20px;
  margin: 20px 0 10px;
  background-color: #fff;
  border-radius: 10px;
}

.voice_header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.voice_photo {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

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

.voice_title {
  flex-grow: 1;
}

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

.voice_title img.sp_view {
  display: none;
}

.voice_text {
  font-size: 21px;
  line-height: 1.6;
}

/* ================================================================= */
/* 施術の流れセクション */
/* ================================================================= */
.section_23 {
  padding: 50px 0;
}

.flow_list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.flow_item {
  width: calc(50% - 10px);
  /* 2列表示のための幅を設定 */
}

.flow_item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================================= */
/* FAQセクション */
/* ================================================================= */
.section_24 {
  padding: 50px 0;
  background-color: #f7f3ed;
}

.faq_list {
  max-width: 800px;
  margin: 30px auto 0;
}

.faq_item {
  margin-bottom: 20px;
}

.question {
  background-color: #79a13a;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  padding: 15px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.answer {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  line-height: 1.8;
  font-size: 21px;
}

/* ================================================================= */
/* 院長の想いセクション */
/* ================================================================= */
.section_25 {
  padding: 50px 0;
  background-color: #fff;
}

.message_content {
  max-width: 800px;
  margin: 30px auto 0;
  line-height: 1.8;
  font-size: 21px;
}

.message_content p {
  margin-bottom: 20px;
}

.message_content ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.message_content li {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 22px;
  padding-left: 10px;
  border-left: 5px solid #79a13a;
}

.message_image {
  margin-bottom: 30px;
  text-align: center;
  /* 画像を中央配置 */
}

.message_image img {
  width: 100%;
  max-width: 70%;
  /* 画像を70%に縮小 */
  height: auto;
  display: block;
  margin: 0 auto;
  /* 中央配置 */
}

/* ================================================================= */
/* アクセスセクション */
/* ================================================================= */
.section_26 {
  text-align: center;
  padding: 0px 0 10px;
}

.access_content {

  justify-content: space-between;
  margin-top: 30px;
}

.access_info {
  flex: 1;
  font-size: 21px;
  padding-right: 20px;
  line-height: 1.8;
}

.access_info h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.access_info p {
  margin-bottom: 10px;
}

.access_map {
  flex: 1;
}

.access_map iframe {
  margin: 0 auto;
  width: 80%;
  height: 450px;
}

.access_info img {
  width: 640px;
}

/* ================================================================= */
/* お悩みセクション */
/* ================================================================= */
.section_27 {
  padding: 20px 0 70px;
  background-color: #e0e0e0;
  
}

/* お悩みボックス */
.box_nayami {
  background-color: #f8f8f8;
  /* 薄いグレーの背景 */
  border: 2px solid #ccc;
  /* 枠線 */
  padding: 20px;
  border-radius: 10px;
  margin: 0px auto;
  max-width: 800px;
}

.box_nayami p {
  line-height: 1.8;
  font-size: 21px;
}

/* アイコン */
.dame {
  color: #ff4500;
  /* アイコンの色をオレンジに */
}

/* ピンクのラインと太字 */
.pink_line {
  background: linear-gradient(transparent 60%, #ffc0cb 60%);
}

.b {
  font-weight: bold;
}

/* 余白設定（仮） */
.m5-b {
  margin-bottom: 5px;
}

.m5-r {
  margin-right: 5px;
}

/* Font Awesomeのアイコンサイズ */
.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -0.0667em;
}