@charset "UTF-8";
body,
html {
  margin: 0;
  padding: 0; }

html {
  font-size: 62.5%;
  overflow-x: hidden; }

body {
  font-size: 1.4rem;
  font-family: "lato", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  line-height: 1.6;
  color: #333333;
  position: relative; }

p {
  margin: 0;
  padding: 0;
  color: #333; }

img {
  width: 100%;
  height: auto;
  line-height: 0;
  margin: 0;
  padding: 0;
  vertical-align: bottom; }

.sp {
  display: block; }

.pc {
  display: none; }

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

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  font-weight: normal; }

/*anime*/
.fluffy {
  animation: fluffy1 2s ease infinite; }

@keyframes fluffy1 {
  0% {
    transform: translateY(0); }
  5% {
    transform: translateY(0); }
  10% {
    transform: translateY(0); }
  20% {
    transform: translateY(-15px); }
  25% {
    transform: translateY(0); }
  30% {
    transform: translateY(-15px); }
  50% {
    transform: translateY(0); }
  100% {
    transform: translateY(0); } }
/*anime END*/
/*===============================
 
    メールフォーム
 
================================*/
.p-top-contact__h {
  background: repeating-linear-gradient(-45deg,#f1a237,#f1a237 5px,#ea9d42 0,#ea9d42 10px);
  padding: 23px 0;
  text-align: center;
}
.p-top-contact__h img {
  width: 35%;
}
@media screen and (max-width: 960px){
.p-top-contact__h img {
  width: 60%;
}
}


/* form */
section.form_contact{
  max-width: 900px;
  margin:70px auto;
  padding: 0;
}
section.form_contact p.txt{
  color: #825f28;
  margin-bottom: 30px;
}
section.form_contact p.txt span{
  background-color: #ff665e;
  border-radius: 5.5px;
  display: inline-block;
  color: #fff;
  padding: 5px 7px;
  font-weight: bold;
  margin-right: 7px;
}
form{
  background: #fff;
  padding: 30px;
  background-image: url("../img/contact_img_bak.jpg");
  background-position: right bottom 560px;
  background-repeat: no-repeat;
  background-size: 577px;
  border: solid 10px #d7d7d7;
  border-radius: 10px;
  margin-top: 30px;
}
.form_contact{
  max-width: 960px;
  margin: auto;
  margin-bottom: 70px;
}
.p-top-contact_form_dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.p-top-contact_form_dl dt {
    width: 35%;
    box-sizing: border-box;
    font-size: 18px;
    margin-right: 3%;
    font-size: 15px;
}
.p-top-contact_form_dl dd {
    width: 62%;
    box-sizing: border-box;
    font-size: 15px;
    margin: 0px;
}
.p-top-contact_form_dl dd, .p-top-contact_form_dl dt {
    color: #825f28;
    font-weight: 700;
    line-height: 1;
}
.p-top-contact_form_item-state {
    font-size: 15px;
    border-radius: 5.5px;
    display: inline-block;
    color: #fff;
    padding: 5px 10px;
    text-align: center;
    margin-right: 10px;
    vertical-align: middle;
}
.p-top-contact_form_hissu {
    background-color: #ff665e;
}
.p-top-contact_form_none{
    background-color: #825f28;
}

[type="text"], [type="tel"], [type="email"], [type="number"], select, textarea {
    width: 100%;
    border: 1px solid #c0af93;
    border-radius: 7.5px;
    color: #825f28;
    padding: 10px;
    font-size: 15px;
    box-sizing: border-box;
    min-height: auto;
    background: #fff;
}
input.name{
  margin-left: 5px;
  width: auto;
  max-width: 150px;
}
input.age {
    max-width: 110px;
}
input.tel {
    width: 110px;
    margin: 0px 7px;
    margin-left: 7px;
}
input.tel:first-child {
    margin-left: 0px;
}
input.tel:last-child{
  margin-right: 0px;
}
dd.form-in2 span {
    font-size: 13px;
    font-weight: normal;
    color: #e38f51;
    margin-top: 5px;
    display: block;
}
dd.form-in2 select{
  width: auto;
  min-width: 155px;
  margin-right: 5px;
}
dd.form-in2 select:first-child{
  margin-bottom: 13px;
}
dd.form-in3_radio label{
  display: block;
  margin-bottom: 3px;
}
dd.form-in3_radio label:last-child{
  margin-bottom: 0px;
}
dd.form-in4 input, dd.form-in4 select{
  width: auto;
  width: 155px;
  min-width: 155px;
  margin-right: 5px;
}
button, input, select, textarea{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
form input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}
form input[type="radio"]{
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}
.submit_btn input {
    background: #ff665e;
    border-radius: 8px;
    width: 90%;
    margin: 0 auto;
    max-width: 345px;
    display: block;
    color: #fff;
    font-size: 28px;
    letter-spacing: 1px;
    padding: 8px 0;
    border:0px;
}
div.p-top-contact_form_privacy dt, div.p-top-contact_form_privacy dd{
  font-size: 11px;
  color: #5b3b27;
}
div.p-top-contact_form_privacy dl{
  margin-bottom: 14px;
}
.privacy_policy{
  margin-top: 3%;
}
.privacy_policy h2 {
    background: #ff7800;
    width: auto!important;
    color: #fff;
    font-weight: bold;
    padding: 15px;
    margin-bottom: 15px;
}

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

.pc { display: none !important; }
.sp { display: block !important; }

/*
  フォーム
================================*/
section.form_contact {
    width: 100%;
    margin: 7% auto;
    padding: 0px 3%;
    box-sizing: border-box;
}
form {
    background-size: 87%;
    padding: 7%;
    background-position: right bottom 43%;
}
.p-top-contact_form_dl dt{
  width: 100%;
  font-size: 15px;
}
.p-top-contact_form_dl dd{
  width: 100%;
  margin-top: 3%;
  line-height: 1.4;
}
.p-top-contact_form_item-state{
  font-size: 15px;
}
dd.form-in2 select,{
  min-width: 44%;
}
dd.form-in4 input, dd.form-in4 select{
  width: 40%;
  min-width: 40%;
}
input.name {
    max-width: 40%;
}
input.tel {
    width: 27%;
}
dd.form-in2 select {
    min-width: 37%;
}
.submit_btn input{
  font-size: 18px;
}
.privacy_policy{
  margin-top: 10%;
}
.privacy_policy h2.h2{
  font-size: 13px;
}
.privacy_policy .small{
  font-size: 10px;
}

/* 追加 */
#p-top-hiyoko {
    margin: 3% auto 0px;
}

/* 下層ページ　コロナ */
.inner_02 p{
  text-align: left;
}

/* TOP バナー */
.top-bnr{
}

/* 各メディアも注目 */
#media{
}
#media #media .t-contents{
  width: auto;
}
#media .t-contents .t-contentsinner{
  width: auto;
}
}


/*===============================
 
    フッター
 
================================*/
footer {
  background: #EC9BA5; }
  footer p {
    padding: 30px 0 80px;
    text-align: center; }
    footer p a {
      color: #fff;
      font-size: 1.2rem;
      display: inline-block;
      text-decoration: none; }

/*media Queries タブレットサイズ（768px以上）
----------------------------------------------------*/
/*media Queries PCサイズ（1000px以上）
----------------------------------------------------*/
@media only screen and (min-width: 1000px) {
  .sp {
    display: none; }

  .pc {
    display: block; }

  /*===============================
   
      メールフォーム
   
  ================================*/
  #form-block {
    width: 900px;
    margin: 0 auto;
    padding: 80px 90px; }
    #form-block dl {
      padding: 0 0 40px; }
      #form-block dl dt,
      #form-block dl dd {
        font-size: 2.4rem; }
      #form-block dl dt {
        line-height: 1.2; }
        #form-block dl dt span.yn {
          font-size: 1.6rem; }
      #form-block dl dd #day-list-cl {
        width: 50%; }

  #form_submit input[type="submit"] {
    font-size: 3.0rem;
    width: 300px;
    padding: 0.5em 0; }

  /*===============================
   
      フッター
   
  ================================*/
  footer p {
    padding: 60px 0; }
    footer p a {
      font-size: 1.6rem; } }

/* R7/8/10 ▼▼▼ FV改善（信頼性パーツ・CTA）用の追加CSS ▼▼▼ */

/* 信頼性パーツ 全体を囲むコンテナ */
.trust-badge-container {
  display: flex; /* 要素を横並びにする */
  justify-content: space-around; /* 要素を均等に配置 */
  align-items: flex-start; /* 上揃えで配置 */
  background-color: #FFF5F6; /* 背景色を薄いピンクに */
  padding: 20px 10px;
  border-bottom: 1px solid #f2f2f2;
}

/* 信頼性パーツ 各アイテム */
.trust-badge-item {
  flex: 1; /* 3つのアイテムが均等な幅を持つようにする */
  text-align: center; /* テキストと画像を中央揃えに */
}

/* 信頼性パーツ アイコン画像 */
.trust-badge-item img {
  max-width: 50px; /* アイコンの最大幅を指定 */
  height: auto;
  margin-bottom: 5px;
}

/* 信頼性パーツ テキスト */
.trust-badge-item p {
  font-size: 1.2rem; /* 文字サイズ */
  font-weight: bold;
  color: #EC9BA5; /* テーマカラーに合わせる */
  line-height: 1.4;
  margin: 0;
}

/* FV下のCTAエリア 全体を囲むコンテナ */
.fv-cta-container {
  background-color: #FFF5F6;
  padding: 0 20px 30px;
  text-align: center;
}

/* メインのCTAボタン */
.cta-button-main {
  display: inline-block;
  background-color: #FF7F00; /* 目立つオレンジ色 (既存のフッターボタンを参考) */
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 15px 20px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  width: 100%;
  max-width: 400px; /* PC表示で横に広がりすぎないように */
  box-sizing: border-box;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, transform 0.2s;
}

/* CTAボタンのホバーエフェクト */
.cta-button-main:hover {
  background-color: #e67300; /* 少し濃いオレンジに */
  transform: translateY(-2px); /* 少し浮き上がる動き */
  opacity: 1; /* 既存のa:hover設定を上書き */
}

/* CTAボタン下のマイクロコピー */
.cta-microcopy {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #666;
}


/* -------------------------------------
   PC表示用のスタイル (1000px以上)
-------------------------------------- */
@media only screen and (min-width: 1000px) {

  .trust-badge-container {
    padding: 25px 0;
    max-width: 800px; /* PCでは中央に寄せる */
    margin: 0 auto;
    border-radius: 0 0 10px 10px;
  }

  .trust-badge-item img {
    max-width: 60px; /* PCではアイコンを少し大きく */
  }

  .trust-badge-item p {
    font-size: 1.4rem; /* PCではテキストを少し大きく */
  }

  .fv-cta-container {
    padding-bottom: 40px;
  }

  .cta-button-main {
    font-size: 2.2rem; /* PCではボタンの文字を大きく */
    padding: 20px 40px;
    max-width: 600px;
  }

  .cta-microcopy {
    font-size: 1.4rem; /* PCではマイクロコピーも少し大きく */
  }

}
/* ▲▲▲ 追加CSSここまで ▲▲▲ */

/* ▼▼▼ 【新規】解決策と科学的根拠セクション用のCSS ▼▼▼ */

/* 3つのアプローチを囲むラッパー */
.solution-wrap {
  margin-bottom: 40px;
}

/* 各アプローチのアイテム（カード） */
.solution-item {
  background-color: #fff;
  border: 1px solid #fde4e8; /* 優しいピンク色の枠線 */
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(236, 155, 165, 0.1); /* 影を追加して立体感を出す */
  text-align: center;
}

/* 各アイテムのメイン見出し (h3) */
.solution-item h3 {
  font-size: 2.0rem;
  color: #fff;
  background-color: #EC9BA5; /* テーマカラーのピンク */
  padding: 10px;
  border-radius: 5px;
  margin: -20px -20px 20px -20px; /* カード上部に固定 */
  border-bottom: 3px solid #d98894;
  font-weight: bold;
}

/* 見出し内の数字 (①, ②, ③) */
.solution-item h3 .solution-num {
  display: inline-block;
  background-color: #fff;
  color: #EC9BA5;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin-right: 8px;
  font-size: 1.6rem;
}

.solution-item-inner img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 15px;
}

/* 新しく追加したキャッチコピー用のスタイル */
.solution-headline {
  font-size: 1.8rem;
  font-weight: bold;
  color: #e47181;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px dotted #fbe6e9;
  line-height: 1.5;
}

/* 説明文のスタイル */
.solution-item-inner p {
  font-size: 1.5rem;
  text-align: left; /* 説明文は読みやすいように左揃えに */
  line-height: 1.7;
}

/* 客観的データボックス */
.evidence-box {
  background-color: #FFF5F6;
  border: 2px solid #EC9BA5;
  border-radius: 8px;
  padding: 20px;
  margin-top: 30px;
  text-align: center;
}

.evidence-box h4 {
  font-size: 2.0rem;
  color: #EC9BA5;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.evidence-box .evidence-source {
  font-size: 1.2rem;
  color: #888;
  margin-bottom: 15px;
}

.evidence-box .evidence-graph {
  margin-bottom: 15px;
}

.evidence-box .evidence-caption {
  font-size: 1.6rem;
  line-height: 1.7;
}

/* 重要な数値を強調するスタイル */
.evidence-caption .large-text {
  font-size: 2.4rem;
  font-weight: bold;
  color: #ff0000; /* 強調のために赤色に */
  vertical-align: -3px; /* 周りのテキストと高さを調整 */
}

/* -------------------------------------
   PC表示用のスタイル (1000px以上)
-------------------------------------- */
@media only screen and (min-width: 1000px) {
  /* 3つのアイテムを横並びに */
  .solution-wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* アイテム間の隙間 */
  }

  .solution-item {
    flex: 1; /* 均等な幅に */
    margin-bottom: 0;
  }

  .solution-item h3 {
    font-size: 2.2rem;
  }

  .solution-headline {
    font-size: 2.0rem;
    min-height: 3em; /* PC表示で高さを揃える */
  }
  
  .evidence-box {
    padding: 30px;
  }

  .evidence-box h4 {
    font-size: 2.4rem;
  }
}

/* ▼▼▼ PC表示時のヘッダー背景色を修正するCSS ▼▼▼ */
#header-inner,
#nav-pc {
  background-color: #FFF5F6; /* 全体の背景色である薄いピンクを指定 */
}

/* PC表示時のナビゲーションのリンク背景色を上書き */
@media only screen and (min-width: 1000px) {
  #nav-pc ul li a {
    background: transparent; /* aタグの背景色を透明にして、親要素の背景色が見えるようにする */
  }
}
/* ▲▲▲ ヘッダー背景色修正ここまで ▲▲▲ */
/* ▼▼▼ 【デザイン改善】よくあるご質問アコーディオン用のCSS ▼▼▼ */

/* 各質問項目全体 */
.q_a-item {
  border-bottom: 1px solid #fde4e8; /* 区切り線 */
  margin-bottom: 10px;
}
.q_a-item:last-child {
  border-bottom: none;
}

/* 質問部分 (クリックする部分) */
.q_a-item summary {
  display: flex; /* Qアイコンとテキストを横並びに */
  align-items: flex-start; /* 上揃え */
  position: relative;
  padding: 15px 40px 15px 0; /* 右側に＋マーク用の余白を確保 */
  font-size: 1.6rem;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  list-style: none; /* 標準の▼マークを消す */
  transition: color 0.2s;
}

.q_a-item summary:hover {
  color: #EC9BA5; /* ホバー時にテーマカラーに */
}

/* 標準の▼マークを非表示 (一部ブラウザ用) */
.q_a-item summary::-webkit-details-marker {
  display: none;
}

/* Q. のアイコン */
.q-icon {
  font-family: 'Lato', sans-serif; /* 英字用のフォント */
  font-size: 2.0rem;
  color: #EC9BA5;
  margin-right: 10px;
  line-height: 1.2;
}

/* 回答部分のラッパー */
.a-txt {
  padding: 20px;
  background-color: #FFF5F6; /* 回答エリアの背景色 */
  border-radius: 5px;
  margin: 0 0 20px 0;
}

/* 回答のテキスト */
.a-txt p {
  display: flex;
  align-items: flex-start;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #333;
}

/* A. のアイコン */
.a-icon {
  font-family: 'Lato', sans-serif;
  font-size: 2.0rem;
  color: #EC9BA5;
  margin-right: 10px;
  line-height: 1.2;
}

/* 開閉マーク（＋/－）のスタイル */
.q_a-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: normal;
  color: #EC9BA5;
  transition: transform 0.3s;
}

/* 開いた状態（[open]）の時のスタイル */
.q_a-item[open] summary {
  color: #EC9BA5; /* 開いている時は常にテーマカラーに */
}

.q_a-item[open] summary::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}

/* -------------------------------------
   PC表示用のスタイル (1000px以上)
-------------------------------------- */
@media only screen and (min-width: 1000px) {
  .q_a-item summary {
    font-size: 1.8rem;
    padding: 20px 40px 20px 0;
  }
  .q_a-item summary .q-icon,
  .a-txt .a-icon {
    font-size: 2.2rem;
  }
}
/* ▼▼▼ 最終メッセージ内の強調テキストの視認性を改善するCSS ▼▼▼ */
#talk-block .bty {
  background: none; /* 問題の黄色いマーカー背景を削除 */
  color: #ffff00; /* 文字色自体をはっきりとした黄色に変更 */
  font-size: 1.1em; /* 少しだけ文字を大きくして強調 */
  padding: 0 0.2em; /* 文字の左右に少し余白を持たせる */
  border-bottom: 2px dotted rgba(255, 255, 255, 0.8); /* 主張しすぎない白い点線の下線を引く */
}