@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* CSS Document */
/*----------------------------------------
PC用のレイアウト（768px以上で表示）
----------------------------------------*/
/*--------------------
レイアウト共通設定（PC）
--------------------*/

html {
  font-size: 62.5%; /*62.5にすることで1emが10pxになる（emの計算が楽になる設定）*/
  scroll-behavior: smooth;
}

/*body全体の初期スタイル調整*/
body {
  font-size: 2rem;

  font-family: "Noto Sans JP", 游ゴシック体, "Yu Gothic", YuGothic,
    "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
    Osaka, "ＭＳ Ｐゴシック", "MS PGothic", 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;
  /* 文字をシームレスに変更 */
  font-size: clamp(16px, 2vw + 1rem, 20px);
  /* 行間をシームレスに変更 */

  line-height: clamp(1.2, calc(1em + 0.5vw), 1.8);
}
/*セクションエリアの共通設定(とりあえず入れておきましょう)
*/
section {
  clear: both;
  overflow: auto;
}
/*--------------------
見出しタグ設定（PC）※h2などの共通設定
--------------------*/
h2 {
  margin: 0rem 0rem;
  padding: 0rem;
  font-size: 2.4rem;
  font-weight: 900;
  text-align: center;
}
h3 {
  margin: 0rem 0rem;
  padding: 0rem;
  font-size: 2rem;
  font-weight: bold;
  /*border:1px solid #000000;*/ /*ボックスサイズを視覚的に見れるようにしているだけ*/
}
h4 {
  margin: 0rem 0rem;
  padding: 0rem;
  font-size: 1.8rem;
  font-weight: bold;
}
h5 {
  margin: 0rem 0rem;
  padding: 0rem;
  font-size: 1.6rem;
  font-weight: bold;
}
/*--------------------
全体レイアウト/背景設定（PC用）
--------------------*/
/*全体エリア（全体背景を設定するにはここをいじる）*/
.main {
  background-color: #f2f2f2;
  width: 100%;
  max-width: 650px;
  /* コンテンツの最大幅 */
  margin: 0 auto; /* 中央寄せ */
}
/*記事（ボディ）エリア*/
.article {
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  /* font-size: 1.6rem;  */
}
/*記事（ボディ）エリアの行間*/
.article p {
  line-height: 1.6;
}
/*カラム全体(ボディ)の幅*/
.article,
.top_image_in {
  max-width: 100%; /*SF型の横幅全体*/
  margin: 0 auto;
}
/*--------------------
上部固定ヘッダー設定
--------------------*/
/*上部固定ヘッダー全体の設定*/
.header {
  position: sticky; /*ヘッダーを固定する*/
  position: -webkit-sticky;
  top: 0;
  z-index: 5000;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  overflow: auto;
  width: 100%;
  max-width: 650px; /* 最大幅を設定 */
  margin: 0 auto; /* 中央寄せ */
}
/*ヘッダー内部をカラム幅にする*/
.header_inner {
  max-width: 650px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 0rem 0;
  background-color: #fff;
}

.header_nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0.5rem;
}
.header_right {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
/*ヘッダーのロゴの設定*/
.header_logo {
  display: flex;
  padding-top: 0.3rem;
  flex-grow: 1;
  align-items: center;
}
/*ヘッダーの問い合わせボタンの設定*/
.header_mail {
  background-color: rgba(0, 0, 0, 0);
  width: 23%;
  border-radius: 7px;
  box-shadow: 0 2px 2px 2px rgba(255, 255, 255, 0);
}

/*ヘッダーの電話ボタンの設定*/
.header_tel {
  background-color: rgba(255, 255, 255, 0);

  width: 70%;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 9px;
}
/* ボタンのホバー設定 */
/* .header_mail:hover {
  opacity: 0.8;
}
.header_tel:hover {
  opacity: 0.8;
}
.tel_btn:hover {
  opacity: 0.8;
} */

/*ヘッダー内の画像が常に幅100%になる設定*/
.header_logo img,
.header_mail img,
.header_tel img {
  width: 100%;
}
/*--------------------
セクションの設定
--------------------*/
/* 季節感 */
.sec_01 {
  background-color: #fff;
}
/* 事例集 */
.sec_02 {
  padding: 1.5rem 0rem 0rem;
  background-color: #2861d4;
}
/* 選ばれる理由 */
.sec_03 {
  background-color: #ffffcc;
}
/* ご予約から作業完了までの流れ */
.sec_04 {
  background-color: #88dff3;
}
/* 全国支店拡大中 */
.sec_05 {
  background-color: #fff;
}
/* よくご相談頂く内容 */
.sec_06 {
  background: url(../images/bg_dotted.png);
  padding: 2rem 0rem 0rem;
}
/* フォーム */
#sec_07 {
  padding: 1.5rem 0rem;
  background-color: #e3f5ff;
}
.sec_cta {
  padding: 1.5rem 2rem 0rem;
  margin-bottom: 1rem;
}

/*--------------------
sec_cta
--------------------*/
/* CTAボタン */
.sec_cta {
  padding: 1.5rem 2rem 0rem;
  margin-bottom: 1rem;
}
.tel_btn {
}
.scroll_yaji {
  padding-top: 1rem;
}
/*--------------------
■■↓記事部分■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
--------------------*/
/*--------------------
季節感
--------------------*/

.sec_01 h2 {
  margin-bottom: 2rem;
}
.nayami_inner {
  padding: 0 1rem;
}

/* 悩み画像 */
.nayami_image {
  margin-bottom: 3rem;
}
.omakase {
}
.ansin {
  background-color: #a9e5f6;
  padding: 0rem 1rem;
}
.ansin_p {
  padding: 1rem 0;
}

.ansin_p p {
  font-size: 1rem;
}

/*--------------------
事例集
--------------------*/
.sec_02 h2 {
  /* margin-bottom: 10vw; */
  margin-bottom: clamp(40px, 10vw, 95px);
}
.jirei_inner {
  padding: 0 1rem;
}
.jirei_box {
  position: relative;
  background-color: #fff;
  border: solid 4px #000;
  border-radius: 20px;
  padding: 0 2rem 2rem;
  margin-bottom: clamp(3.5rem, 5vw + 3rem, 7rem);
  padding-top: clamp(40px, 11vw, 72px);
}
.jirei_box p {
  font-weight: 600;
  text-align: justify;
  margin-bottom: 2rem;
}

/* 事例01アイコン */
.jirei_icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
}
.jirei_icon img {
  display: block;
}
/* 事例小アイコン */
.sub_icon_box {
  text-align: center;
}
.jirei_sub_icon {
  display: inline-block;
  padding: 0.3rem 1rem;
  font-weight: 900;
  font-size: clamp(1rem, 1.3vw, 2.5rem);
  color: #fff;
  background-color: #000;
  margin: 0 auto 1rem;
  border-radius: 30px;
  text-align: center;
}

/* 事例タイトル */
.jirei_subtitle {
  text-align: center;
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 4rem);
  margin-bottom: 0.5rem;
}
/* 事例メイン画像 */
.jirei_main_img {
  margin-bottom: 2rem;
}
.jirei_box h4 {
  width: 45%;
  margin-bottom: 0.5rem;
}

/* お客様の顔画像 */
.jirei_koe {
  width: 60%;
  margin: 1rem auto 1rem;
}
.traburu_p {
  margin-bottom: 2rem;
}

/*--------------------
選ばれる理由
--------------------*/
.reason_inner {
  padding: 0 1rem;
}

.sec_03 h2 {
  margin-bottom: 2rem;
}

.reason_box {
  background-color: #fff;
  padding: 1rem;
  border-radius: 20px;
  border: solid 3px #000;
  margin-bottom: 2rem;
}
.reason_box h3 {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.reason_flex {
  display: flex;
  gap: 5px;
  border-top: solid 2px #000;
  padding-top: 1.5rem;
}

.reason_icon {
  padding: 1rem;
  width: clamp(320px, 50vw, 50%);
}
.small_p {
  font-size: 1.3rem;
}

/*--------------------
ステップ
--------------------*/

.sec_04 h2 {
  margin-bottom: 5rem;
}
.step_inner {
  padding: 0 1rem 0;
}
.step_box {
  position: relative;
  display: flex;

  background-color: #fff;
  padding: 3rem 1.5rem;
  gap: 10px;
  border-radius: 20px;
  /* border: solid 3px #3662d7; */
}

.step_icon {
  position: absolute;
  top: -4px;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 20%;
}

.step_p h3 {
  font-weight: 900;
  font-size: 2.5rem;
  padding-top: 2rem;
  margin-bottom: 0.5rem;
  color: #3662d7;
}
.step_p {
  text-align: justify;
}
.step_yaji {
  margin-top: -1.5rem;
}

/*--------------------
よくある質問
--------------------*/
/* タイトル */
.sec_06_h2 {
  background-color: #053e87;

  padding: 1rem 0 2rem;
  margin-bottom: 3rem;
}

/* 質問ボックス */

.qa_contents {
  border-radius: 20px;
  overflow: hidden;
  border: solid 3px #053e87;
  margin-bottom: 2rem;
}

.qa_box {
  padding: 2rem 1rem;
}
.qa_box p {
  text-align: left;
}

.q_box img,
.a_box img {
  width: 35px;
  height: auto;
}

.q_box {
  background-color: #07499d;

  display: flex;
  padding: 0.5rem;
  color: #fff;
}
.q_icon_box {
  display: flex;
  align-items: center;
  /* width: 10%; */
  padding: 0.5rem;
}
.q_p {
  padding: 2rem 1.5rem;
}
/* 回答ボックス */

.a_box {
  background-color: #fff;

  display: flex;
  padding: 0.5rem;
  color: #000;
}

.a_icon_box {
  display: flex;
  align-items: center;
  width: 10%;
  padding: 0.5rem;
}

.a_p {
  padding: 2rem 1.5rem;
}
/*--------------------
フォーム設定
--------------------*/
.sec_07_inner {
  padding: 0 1.5rem 3rem;
}

#sec_07 h2 {
  background-color: #113685;
  padding: 1.5rem 0;
}

/*--------------------
■■↑記事部分■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
--------------------*/

/*--------------------------------------------------
  スマホ用下部固定ボタン（PCは非表示）
  -----------------------------------------------------*/
.bottom_btn_area {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 1000;
  display: none; /* 最初は非表示にする */
}
.bottom_btn_box {
  max-width: 650px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 5px;
  padding: 1rem;
}

.bottom_tell {
}

.bottom_mail {
}
.c-button._shiny {
  display: block;
  position: relative;
  /* padding: 1em 1.5em; */
  /* background-color: #1981f7; */
  /* box-shadow: 0 3px 0 0 #0867d4; */
  border-radius: 4px;
  /* margin: 30px auto; */
  font-weight: bold;
  /* max-width: 500px; */
  color: #fff;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: 300ms;
}
.c-button._shiny::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #ffffff;
  transition: 300ms;
  animation: shinyshiny 2.5s ease-in-out infinite;
}

.c-button._shiny:hover {
  text-decoration: none;
  color: #fff;
  box-shadow: none;
  -webkit-transform: translateY(3px);
}

@-webkit-keyframes shinyshiny {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/*--------------------
会社概要
--------------------*/

.law {
  padding: 0 1rem 0;
}

.law_container {
  margin: 1rem auto;
}

.law_h2 {
  font-size: 3rem;
}
.table-block {
  border: 1px solid #ccc;
  margin: 0 auto;
}

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

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

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

.re {
  text-align: center;
}

/*--------------------
サンクスページ
--------------------*/
.thanks {
  padding: 3rem;
}

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

.thanks a {
  display: flex;
  display: inline-block;
  justify-content: center;
}
.re {
  text-align: center;
}

.bottom_space {
  margin-bottom: 2rem;
}

/*--------------------
フッター部分
--------------------*/
.footer {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  background-color: #113685;
  padding: 2rem 0rem 18rem;
  text-align: center;
  font-size: 1.4rem;
  color: #ffffff;
}
.footer a {
  color: #fff;
}

/*--------------------------------------------------
下部固定ボタン（PCは非表示）
-----------------------------------------------------*/

.fix_menu_smartphone {
  display: none;
}

/*--------------------------------------------------
ctaボタン動き
-----------------------------------------------------*/

.tel_btn {
  animation: none;
  transform-origin: center;
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}