@charset "utf-8";

/* CSS Document */


/* ------------------------------------
PC用レイアウト（768px以上スクリーン）
------------------------------------ */

/* body全体の初期スタイル調整 */
body{
   /* font-size: 62.5%; emの計算をしやすくするための定番設定 */
  font-family: "M PLUS 1", sans-serif;
  font-weight: 500;
  color: #642700;
}



/* ------------------------------------
全体レイアウト/背景設定（PC）
------------------------------------ */

/* 全体エリア（全体背景を設定するにはここ） */
.main{
  background-image: url(../images/top_image_back.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* スクロールしても固定 */
}

/* 記事（ボディ）エリア */
.article{
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  /* font-size: 1.6em; =16px */
  padding-top: 3em;
}

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

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

.br_sp{
  display: none;
}


/* ------------------------------------
上部固定ヘッダー設定
------------------------------------ */

/* 上部固定ヘッダー全体 */
.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: 950px;
  margin: 0 auto;
  overflow: hidden;
}


/* 既存ヘッダーの設定 */
h1 {
    position: absolute;
    top: 0;
    margin: 0 auto;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-size: 1.14rem;
    z-index: -10;
    opacity: 0;
    pointer-events: none;
}

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

/* ------------------------------------
FV設定
------------------------------------ */
.fv_cta_btn{
  background-color: #f8e5d2;
  padding: 1rem;
}


/* ------------------------------------
解決策エリア01設定
------------------------------------ */
#solution_01{
  background-color: #f8e5d2;
  padding: 0.1px 0 1rem;
}

.solution_01_text01{
  text-align: center;
  font-size: 2rem;
  margin-top: 0;
}

#solution_01 h2{
  width: 85%;
  margin: 0 auto;
}

.solution_01_img01{
  width: 85%;
  margin: 0 auto;
}

.solution_01_text02{
  text-align: center;
  font-size: 1.5rem;
  margin-top: 0;
}

.solution_01_inr{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}


/* swiper設定 */
#solution_01 .swiper {
  position: relative;   /* 子要素の絶対位置指定を有効にする */
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 50px auto;
  overflow: hidden;
}

/* スライド画像のスタイル */
#solution_01 .swiper-slide img {
  width: 100%;
  height: auto;           /* 高さを自動にして縦横比を維持 */
  object-fit: contain;    /* 画像全体を表示し、切れないように */
  display: block;
  margin: 0 auto;
}

/* ページネーション（ドット）の位置調整 */
#solution_01 .swiper-pagination {
  position: absolute;
  bottom: 0;          /* ← ドットの上下位置。画像に近づけたいなら数値を小さく */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

#solution_01  .swiper-pagination-bullet-active {
  background-color: #f8e5d2; /* アクティブ時のドットの色 */
}

/* ▼ ナビゲーションボタン（矢印）の色 */
#solution_01 .swiper-button-next,
#solution_01 .swiper-button-prev {
  color: #f8e5d2; /* 矢印の色 */
}

/* ナビゲーションボタン（矢印）の位置調整 */
#solution_01 .swiper-button-prev,
#solution_01 .swiper-button-next {
  position: absolute;
  top: 60%;              /* ← 高さの中央に配置 */
  transform: translateY(-50%);
  z-index: 10;
  color: #f8e5d2;        /* 既存指定と同じ */
}

#solution_01 .swiper-button-prev {
  left: 10px;            /* ← 左の余白 */
}

#solution_01 .swiper-button-next {
  right: 10px;           /* ← 右の余白 */
}


/* ------------------------------------
解決策エリア02設定
------------------------------------ */
#solution_02{
  background-color: #fbe4d7;
  padding: 1rem 0 0;
}

#solution_02 h2{
  width: 80%;
  margin: 0 auto 1.5rem;
}

.solution_02_inr_01{
  display: flex;
  justify-content: center;
}

.solution_02_text{
  text-align: center;
  font-size: 1.5rem;
}

.solution_02_inr_02{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 1rem auto;
}

.solution_02_img05{
  width: 90%;
  margin: 0 auto;
}

.solution_02_img07{
  width: 90%;
  margin: 0 auto;
}


/* ------------------------------------
CTAエリア01設定
------------------------------------ */
#cta_area_01{
  background-color: #f8e5d2;
  padding: 2rem 0 1rem;
}

#cta_area_01 h2{
  width: 90%;
  margin: 0 auto;
}

.cta_area_01_img{
  width: 80%;
  margin: 1rem auto;
}

.cta_area_01_text01{
  text-align: center;
  font-size: 1.5rem;
  color: #e95dfe;
}

.cta_area_01_big{
  font-size: 2rem;
}

.cta_area_01_text02{
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.cta_area_01_arrow{
  width: 5%;
  margin: 0 auto 1rem;
}

.cta_area_01_btn{
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 1rem;
}

/* ------------------------------------
機能エリア設定
------------------------------------ */
#function{
  background-color: #fbe4d7;
  padding: 1rem 0 0.1px;
}

#function h2{
  width: 90%;
  margin: 1rem auto 2.5rem;
}

#function h3{
  font-size: 1.5rem;
  margin: 0;
  color: #e95dfe;
}

#function h4{
  margin: 0;
  color: #e95dfe;
}

.function_inr{
  display: flex;
  align-items: center;
  gap: 15px;
  width: 90%;
  margin: 0 auto 3rem;
}

.function_second{
  flex-direction: row-reverse;
}

.function_img{
  width: 35%;
}

.function_wrap{
  flex-direction: column;
  background-color: #fff;
  padding: 1rem;
  border-radius: 18px;
  box-shadow: 5px 5px 10px 3px rgba(233, 93, 254, 0.5);
  width: 60%;
  height: 90%;
}

.function_no{
  width: 13%;
}

.function_title{
  border-bottom: 2px solid #e95dfe;
  padding-bottom: 0.5rem;
}

/* ------------------------------------
お客様の声エリア設定
------------------------------------ */
#voice{
  background-color: #f8e5d2;
  padding: 1rem 0;
}

#voice h2{
  width: 90%;
  margin: 0 auto 2rem;
}

#voice h3{
  margin: 0;
  padding-bottom: 0.5rem;
  color: #e95dfe;
  border-bottom: 2px solid #e95dfe;
}

.voice_inr{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 0 1rem;
  margin-bottom: 2rem;
}

.voice_second{
  flex-direction: row-reverse;
}

.voice_img{
  width: 30%;
}

.voice_wrap{
  background-color: #fff;
  border-radius: 18px;
  padding: 1rem;
  width: 60%;
  height: 90%;
}

.voice_wrap p{
  margin-bottom: 0;
}

/* ------------------------------------
よくある質問エリア設定
------------------------------------ */
#faq{
  background-color: #fbe4d7;
  padding: 1rem 0;
}

#faq h2{
  width: 90%;
  margin: 0 auto 2rem;
}


/* アコーディオン */
.faq_item {
  width: 90%;
  margin: 0 auto 2rem;
  border-radius: 12px;
  overflow: hidden;
}

.faq_question {
  width: 100%;
  background-color: #e95dfe; /* 紫色 */
  color: #fff;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 16px 20px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  font-family: "M PLUS 1", sans-serif;
}

.faq_question .q_label{
  font-size: 1.5rem;
  width: 10%;
}

.faq_question .q_text{
  width: 100%;
  text-align: left;
  font-size: 16px;
}

.faq_question .faq_question_text p,
.faq_answer .faq_answer_text p{
  margin: 0;
}

.faq_question .arrow {
  width: 12px;
  height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.faq_question.active .arrow {
  transform: rotate(-135deg);
}

.faq_answer {
  background: #fff;
  padding: 16px 20px;
  border-radius: 0 0 12px 12px;
  display: none;
}


.faq_question_text{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 90%;
}

.faq_answer_text{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.faq_answer .faq_answer_text .a_label{
  width: 5%;
}

.faq_answer .faq_answer_text .a_text{
  width: 90%;
  font-size: 14px;
}

.faq_img{
  width: 90%;
  margin: 0 auto;
}


/* ------------------------------------
CTAエリア02設定
------------------------------------ */
#cta_area_02{
  background-color: #f8e5d2;
  padding: 1rem 0 2rem;
}

.cta_area_02_text{
  text-align: center;
  font-size: 1.5rem;
}

.cta_area_02_inr{
  display: flex;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.cta_area_02_img{
  width: 40%;
}

.cta_area_02-copy{
  width: 55%;
}

#cta_area_02 h2{
  width: 90%;
  margin: 1.5rem auto;
}


/* ------------------------------------
footer部分
------------------------------------ */
.footer{
  background-color: #fff;
  padding: 2em 0;
  text-align: center;
  font-size: 12px;
  color: #333;
}

.footer a{
  color: #333;
}

.footer_logo{
  width: 154px;
  margin: 0 auto 2rem;
}



/* ------------------------------------
特商法エリア部分
------------------------------------ */
.terms{
  font-family: 'Klee One', sans-serif;
  color: #333;
  border: none;
  width: 700px;
  padding-bottom: 3rem;
}

.terms h2{
  text-align: center;
}

table{
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  margin: 1em 0;
}
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;
}