@charset "utf-8";
/* CSS Document */
/*----------------------------------------
PC用のレイアウト（768px以上で表示）
----------------------------------------*/
/*--------------------
レイアウト共通設定（PC）
--------------------*/
html {
  font-size: 62.5%; /*62.5にすることで1emが10pxになる（emの計算が楽になる設定）*/
}

/*body全体の初期スタイル調整*/
body {
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo,
    "sans-serif";
  font-weight: normal;
  color: #000000;
}
/*リンク文字の設定*/
a {
  text-decoration: underline;
}
/*一度訪れたリンクの色を変える*/
a:link,
a:visited {
  color: #39f;
}
/*マウスオーバーでリンクの色を変える*/
a:hover,
a:actibe {
  color: #f60;
}
/*ブラウザのCSSをリセット(pタグがスマホでずれないように
)
*/
p {
  margin: 0 !important;
  padding: 0 !important;
}
/*セクションエリアの共通設定(とりあえず入れておきましょう)
*/
section {
  clear: both;
  overflow: auto;
}
/*--------------------
見出しタグ設定（PC）※h2などの共通設定
--------------------*/
h2 {
  margin: 0.5rem 0em;

  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
h3 {
  margin: 0.5rem 0rem;
  padding: 0.3rem 0.6rem;
  font-size: 1.8rem;
  font-weight: bold;
  border-left: 8px solid #ff8931;
  border-bottom: 1px dotted#ff8931;
  /*border:1px solid #000000;*/ /*ボックスサイズを視覚的に見れるようにしているだけ*/
  color: #ff8931;
}
h4 {
  margin: 0.5rem 0rem;
  padding: 0.3rem 0.6rem;
  font-size: 1.4rem;
  font-weight: bold;
}
h5 {
  margin: 0.5rem 0rem;
  padding: 0.1rem;
  font-size: 1.2rem;
  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.6rem; /*16px*/
}
/*記事（ボディ）エリアの行間*/
.article p {
  line-height: 1.7;
}
/*カラム全体(ボディ)の幅*/
.article,
.top_image_in {
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
}

/* liの付与クリア */

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

/*--------------------
上部固定ヘッダー設定
--------------------*/
/*上部固定ヘッダー全体の設定*/
.header {
  position: sticky; /*ヘッダーを固定する*/
  position: -webkit-sticky;
  top: 0;
  z-index: 5000;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  overflow: auto;
}
/*ヘッダー内部をカラム幅にする*/
.header_inner {
  margin: 0 auto;
  padding: 4px 10px 4px;
  max-width: 950px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
/*ヘッダーのロゴの設定*/
.header_logo {
  width: 22%;
  padding-top: 0.6rem;
  margin: 0rem;
}

/*ヘッダーの電話ボタンの設定*/

.header_tel a,
.tel_flex a,
.button a,
.cta_mail_button a {
  text-decoration: none; /* 下線を無効にする */
  color: inherit; /* テキスト色を継承する */
  cursor: pointer; /* カーソルを手の形にする */
  display: flex;
}

.img_tel_box {
  width: 50px;
}

.tel_number {
  font-size: 3.6rem;
  font-weight: bold;
}
.tel_time {
  margin: -11px 0px 0px -5px;
}

.tel_time p {
  font-size: 1.4rem;
  letter-spacing: 0.1px;
}
.header_tel {
  margin-right: 2rem;
  margin-top: -6px;
}

.header_tel_mail_box {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0px 0px 0px;
}

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

/*--------------------
ファーストビュー設定
--------------------*/
.top_image {
  background-image: url("../images/top_image_back.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  height: auto;
}
.top_image_in img {
  width: 100%;
}

.sp_fv {
  display: none;
}

/* ------------------------------
     画像スライダー
  ------------------------------ */

.loopSliderWrap {
  top: 0;
  left: 0;
  height: 350px;
  overflow: hidden;
  position: absolute;
}

.loopSlider {
  background-color: #fff;
  margin: 0px auto 0px;
  max-width: 2100px;
  height: 350px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.loopSlider ul {
  margin: 0;
  padding: 0;
  height: 300px;
  float: left;
  overflow: hidden;
}
.loopSlider ul li {
  margin: 0;
  padding: 0;
  width: 300px;
  height: auto;
  float: left;
  display: inline;
  overflow: hidden;
}

/* ↓loopSlider画像を全部表示するための修正用 */
.loopSliderWrap,
.loopSlider,
.loopSlider ul,
.loopSlider ul li {
  height: 200px;
}

.loopSlider ul li img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* ↑loopSlider画像を全部表示するための修正用 */
/*--------------------
ctaボタンhover設定
--------------------*/

/* 電話ボタン用 */
.tel_flex a {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tel_flex:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cta_tel_img {
  transition: opacity 0.3s ease;
}

.tel_flex:hover .cta_tel_img {
  opacity: 0.8;
}

/* メールボタン用 */

.cta_mail_box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: none;
}

.cta_mail_box:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cta_mail_button img {
  transition: transform 0.3s ease;
}

.cta_mail_button:hover {
  opacity: 0.8;
}

/*--------------------
セクションの設定
--------------------*/
/* ctaエリア用 */

.section_otoiawase {
  padding: 3rem 3rem;
}

.section_price {
  padding: 3rem 3rem;
}
/* 悩みエリア用 */

.section_nayami {
  padding: 1.5rem 3rem 8rem;
  background-image: url(../images/bg_gotyuui.jpg);
}

/* 選ばれる3つの理由 */
.section_3point {
  padding: 3rem 3rem;
}
/* サービスの流れ */

.section_service_step {
  padding: 3rem 3rem;
  background-image: url(../images/big_grid.png);
}

.section_users_voice {
  padding: 3rem 3rem;
}

/* ご注意くださいエリア */
.section_gotyuui {
  padding: 1.5rem 3rem;
}
/* 解決策の提示エリア */
.kaiketu {
  padding: 4rem 3rem;
}
/* よくある質問 */

.qa {
  padding: 1.5rem 3rem;
}
/* ご安心ください */

.ansin {
  padding: 1.5rem 3rem 3rem;
  background-color: #f3f7fb;
}
/* ご利用の流れ */
.step {
  padding: 4rem 5rem 4rem;
  background-color: #2a3f7a;
  margin-bottom: 2rem;
}
.privacy {
  padding: 1.5rem 5rem;
}
.law {
  padding: 1.5rem 5rem;
}

/* お問合せフォーム用エリア */

#contact {
  padding: 1.5rem 5rem;
  height: 500px;
  background-color: #39f;
}

/*--------------------
ctaエリア用
--------------------*/

.cta_container {
  border: 1rem solid #b90100;
  margin: 2rem 0rem;
}

/* cta内の電話とメールの左右振り分け */
.cta_box {
  width: 100%;
  padding: 2rem 2rem 2rem;
}

.cta_tel_box {
  margin-bottom: 2rem;
}

/* ボタン -------*/
/* ボタン文言中央寄せ */

.button {
  display: flex;
  align-items: center;
  width: 200px;
  height: 50px;
  line-height: 30px;
  gap: 0.5rem;
  border-top: 1px solid #9e9e9e;
  background: #0b9c17;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#0ed21e),
    to(#0b9c17)
  );
  background: -webkit-linear-gradient(top, #0ed21e, #0b9c17);
  background: -moz-linear-gradient(top, #0ed21e, #0b9c17);
  background: -ms-linear-gradient(top, #0ed21e, #0b9c17);
  background: -o-linear-gradient(top, #0ed21e, #0b9c17);
  padding: 9px 18px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
  color: white;
  font-size: 20px;
  font-weight: bold;
  /* font-family: Georgia, Serif; */
  text-decoration: none;
  vertical-align: middle;
}
.button:hover {
  border-top-color: #29cf34;
  background: #29cf34;
  color: #ffffff;
}
.button:active {
  border-top-color: #1b435e;
  background: #1b435e;
}

.cta_mail_button:hover {
  border-top-color: #29cf34;
  background: #29cf34;
  color: #ffffff;
}
.cta_mail_button:active {
  border-top-color: #1b435e;
  background: #1b435e;
}

.kessai_syurui {
  padding: 0rem 2rem 2rem 2rem;
}

.highlight_yellow {
  background: linear-gradient(transparent 50%, #ffff00 50%);
}

/* こんな悩みありませんか？エリア */

.nayami_title {
  margin-bottom: -2.5rem;
}

.nayami_conteiner {
  padding: 5rem 3rem 3rem;
  background-image: url(../images/bg_gotyuui.jpg);
}

.nayami_box {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border: solid 3px #ccc;
  border-radius: 10px;
  padding: 2rem 2rem 1rem;
  margin: 3rem 2rem;
  box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.1);
}
.nayami_img_left {
  display: block;
  width: 30%;
  height: auto;
}

.nayami_right {
  width: 67%;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  font-weight: bold;
  padding: 5rem 0rem 0rem;
  line-height: 2.1;
}

.nayami_ul li {
  border-bottom: 2px dotted #000;
}

/* もう大丈夫です。 */
.daijoubu_desu_img {
  margin-top: -9rem;
}

/* 選ばれる３つの理由 */

.point_box {
  padding: 2rem;
  background-color: #fffdef;
  border: 5px solid #ccc;
  margin-bottom: 3rem;
}
.riyu_sub_title_01 {
  border-bottom: 1px dotted #ccc;
  display: block;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.riyu_contents_01 {
  padding: 2rem;
}

.riyu_img_01 {
  display: block;
  padding: 2rem;
  margin-bottom: 2rem;
}

/* 料金表 */

.section_price {
  background-color: #ff8931;
}

.section_price h2 {
  margin-bottom: 3rem;
}

.section_price h3 {
  font-size: 2.5rem;
  font-weight: bold;
}

.price_flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  text-align: center;
  background-color: #fff;
  padding: 3rem 2rem 3rem;
  border-radius: 10px;
}

.price_flex li {
  width: 30%;
  background-color: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.1);
  border: solid #ccc;
}
.price_flex img {
  display: block;
  margin-bottom: 1rem;
}

.price_txt {
  display: flex;
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  background-color: #ff8931;
  color: #fff;
  justify-content: center;
  width: 60%;
  margin-bottom: 0.5rem;
}
.price_ryoukin_txt {
  font-size: 2.5rem;
  font-weight: bold;
}

/* サービスの流れ */

.section_service_step h2 {
  margin-bottom: 3rem;
}

.order_step_area {
  position: relative;
  background-color: #fffdef;
  border: 6px solid #ff8931;
  display: flex;
  justify-content: space-between;
  padding: 18px 24px 18px 158px;
  margin-bottom: 2em;
  border-radius: 10px;
  box-shadow: 0 4px 5px 2px rgba(0, 0, 0, 0.1);
  gap: 1rem;
  align-items: center;
}

.ribbon {
  position: absolute;
  top: -1em;
  left: 1em;
}
.txt {
  width: 80%;
}

.order_step_img {
  width: 60%;
}

/* お客様の声 */

.users_voice_box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;

  background-color: #f3f7fb;
  padding: 2rem;
  border-radius: 10px;
}
.users_voice_box li {
  width: 30%;
}
.users_voice_box img {
  display: block;
  margin: 0 auto;
  width: 80%;
  border-radius: 50%;
}
.users_voice_box h3 {
  border: none;
  text-align: center;
}

/*--------------------
よくある質問
--------------------*/

.qa_conteiner {
  margin-bottom: 0.5rem;
}
.title_qa {
  margin-bottom: 3rem;
}
.list_qa {
  margin-bottom: 1rem;
}
.list_q {
  display: flex;
  align-items: center;
  background-color: #ff8931;
  color: #fff;
  padding: 1.5rem;
}

.list_a {
  display: flex;
  align-items: center;

  background-color: #fafafa;
  padding: 1.5rem;
}

.list_q img,
.list_a img {
  width: 7%;
  padding-right: 0.5rem;
}

/* ご注意ください */

.gotyuui_conteiner {
  padding: 5rem 3rem 3rem;
  background-image: url(../images/bg_gotyuui.jpg);
}
.title_gotyuui_top {
  display: block;
  margin: 0rem auto 1rem;
  width: 60%;
}
.gotyuui_flex {
  display: flex;
  justify-content: center;
  /* テキストを上下中央合わせにする */
  align-items: center;
}

.flex_img_gotyuui01 {
  width: 18%;
}

.gotyuui_txt01 {
  font-size: 2.8rem;
  flex-grow: 1;
  /* テキストを左右中央合わせにする */
  text-align: center;
}

.flex_img_gotyuui02 {
  width: 18%;
}

.img_totyuui03 {
  box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.1);
}

.gotyuui_txt2 {
  padding: 2.5rem 2rem 1rem;
}

.gotyuui_txt2 p {
  font-size: 2.8rem;
  /* テキストを左右中央合わせにする */
  text-align: center;
}
.highlight_white {
  background-color: #fff;
  padding: 0.1rem 0.1rem 0rem 0.3rem;
  line-height: 1.9;
}
.highlight_blue {
  background-color: #2c3e76;
  padding: 0.1rem 0.1rem 0rem 0.3rem;
  line-height: 1.9;
}

.white {
  color: #fff;
}

/* 悪意のある口コミはタイトル */

.sub_title_gotyuui {
  background-image: url(../images/bg_gotyuui.jpg);
  padding-bottom: 3rem;
}

.gotyuui_conteiner_02 {
  text-align: center;
  tab-size: 2rem;
  padding: 2rem 3rem 4rem;
  background-image: url(../images/bg_gotyuui.jpg);
}

.gotyuui_conteiner_02 p {
  margin-bottom: 4rem;
}

.gotyuui_inner {
  padding: 2rem 3rem;
  background-color: #fff;
  box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.3);
}

.gotyuui_p1 {
  font-size: 1.9rem;
}

/* 評価放置の結果リスト */

.case_list_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.case_list_flex li {
  width: 30%;
  margin-bottom: 2rem;
}

.case_list_flex p {
  text-align: left;
}

/* .case_list_flex h3 {
  font-weight: bold;
} */

.case_end {
  text-align: left;
}

/* 解決策の提示 */

.title_kaiketu {
  display: flex;
  justify-content: center;
  background-color: #2c3e76;
  padding: 1rem 0rem 1rem;
}
.title_kaiketu img {
  width: 60%;
}
.kaiketu_conteiner {
  padding: 2rem 3rem;
  background-color: #f3f7fb;
}

.subtitle_kaiketu {
  color: #fff;
  background-color: #2c3e76;
  margin-bottom: 3rem;
  padding: 2rem;
  font-size: 2.4rem;
  letter-spacing: -1px;
  text-align: center;
  font-weight: nomal;
}
.subtitle_kaiketu p {
  line-height: 1.5;
}

.kaiketu_conteiner img {
  display: block;
  width: 90%;
  margin: 0 auto 1.5rem;
}
.subtitle_saikoutiku {
  margin-bottom: 1rem;
}
.subtitle_saikoutiku p {
  text-align: center;
  font-size: 3.2rem;
  color: #2c3e76;
}

.white {
  color: #fff;
}

.kaiketu_txt_small p {
  font-size: 1.6rem;
}

.li_kaiketu {
  width: 90%;
  padding: 1rem 15rem 1rem;
  margin: 0 auto 3rem;
  background-color: #fff;
  font-size: 2.2rem;
}
/* .li_kaiketu li {
  padding-left: 1.4rem;
} */

.fas_icon {
  margin-right: 0.4rem;
  color: #0ca318;
}

/* プラシバシーポリシー */
.privacy_container,
.law_container {
  margin: 0 auto;
}

.pribacy_h2 {
  margin-bottom: 3rem;
  font-size: 3rem;
}

/*--------------------
特商法表記
--------------------*/
.law_h2 {
  font-size: 3rem;
}
.table-block {
  border: 1px solid #ccc;
  margin: 0 auto;
}

.table-block th {
  border: 1px solid #ccc;
  background-color: #f3f7fb;
  padding: 0.5rem;
}

.table-block td {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

.logo_law img {
  display: inline-block;
  margin-bottom: 0.8rem;
}

/* サンクスページ */

.thanks {
  background-image: url(../images/big_grid.png);
  padding: 3rem 3rem;
}
.thanks_contents h2 {
  font-size: 3rem;
}

.thanks_massage_left {
  text-align: center;
  padding: 2rem;
}

.thanks_mail {
  width: 20%;
}
.thanks_kakunin {
  margin: 1rem 2rem 1rem;
  padding: 2rem;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}

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

/* トップページに戻る */

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

/*--------------------------------------------------
スマホ用下部固定ヘッダー（PCは非表示）
-----------------------------------------------------*/

.fix_menu_smartphone {
  display: none;
}
/*--------------------
トップに戻るボタン
--------------------*/
.pagetop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 15px;
}
.pagetop a {
  display: block;
  background-color: #ccc;
  text-align: center;
  color: #222;
  font-size: 1.6rem;
  text-decoration: none;
  padding: 15px 20px;
  opacity: 0.5;
}
.pagetop a:hover {
  display: block;
  background-color: #b2d1fb;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  padding: 15px 20px;
  opacity: 0.5;
}