@charset "UTF-8";
/*----------------------------------------------------

	読み込み専用のマスターファイルです。
	このファイルに直接スタイルを書き込まないでください。

----------------------------------------------------*/
/*--------------------------
	Base
--------------------------*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/*----------------------------------------------------

	リセットCSS調整ファイルです。
	リセットCSSを調整、カスタマイズしたい場合に編集します。

----------------------------------------------------*/
/* ====================================================

	EXAMPLES FONT-SIZE
	------------------
	 77% = 9px
	 85% = 10px
	 93% = 11px
	100% = 12px
	108% = 13px
	116% = 14px
	124% = 15px
	131% = 16px
	139% = 17px
	147% = 18px
	154% = 19px
	162% = 20px
	170% = 21px
	177% = 22px
	185% = 23px
	193% = 24px
	200% = 25px
	---------------

====================================================*/
html {
  font-size: 62.5%;
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 52.5%;
  }
}

body {
  *font-size: small;
  *font: x-small;
  _font-size: 14px;
}

ul,
li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  word-break: break-all;
}

img {
  vertical-align: middle;
}

* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: inherit;
}

/*----------------------------------------------------

	サイトの基本設定のファイルです。
	最初の設定以外、基本変更することはありません。

----------------------------------------------------*/
/*--------------------------
	フォントの設定
--------------------------*/
/*--------------------------
	カラーの設定
--------------------------*/
/*--------------------------
	レイアウトの設定
--------------------------*/
/*--------------------------
	グリッドのガター
--------------------------*/
/*--------------------------
	レスポンシブの設定
--------------------------*/
/*--------------------------
  アニメーションの設定
--------------------------*/
/*----------------------------------------------------

	Mixinをまとめたファイルです。
	基本的に変更することはありません。
	Mixinを追加したい場合、_mixin_●●.scssという
	別ファイルを生成し、追加してください。

----------------------------------------------------*/
/*--------------------------
	レスポンシブ関連
--------------------------*/
/*----------------------------------------------------

	自作関数をまとめたファイルです。
	基本的に変更することはありません。
	自作関数を追加したい場合、_functions_●●.scssという
	別ファイルを生成し、追加してください。

----------------------------------------------------*/
/*----------------------------------------------------

	初期設定を行うファイルです。
	デフォルトの設定を行う時以外、基本的に編集することはありません。

----------------------------------------------------*/
html {
  font-size: 10px;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 0.83333vw; /* 10px / 1200px * 100 */
  }
}
@media screen and (max-width: 700px) {
  html {
    font-size: 2.66666667vw; /* 10px / 375px * 100 */
  }
}

body {
  background: #fff;
  color: #000;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "Zen Kaku Gothic New", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.8;
}
@media screen and (max-width: 700px) {
  body {
    font-size: 1.4rem;
  }
}

.wrap {
  overflow: hidden;
  position: relative;
}

img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}

sup {
  font-size: 50%;
  vertical-align: super;
}

/*--------------------------
	Layout
--------------------------*/
/*----------------------------------------------------

	レイアウト設定のファイルです。
	レイアウトに関する汎用性の高いスタイルをまとめています。
	基本的には編集することはありません。

	命名規則として、クラス名の頭に 
	l-* (Layoutのl)という接頭辞をつけることを推奨します。

----------------------------------------------------*/
.l-section {
  margin: 8rem 0;
}
@media screen and (max-width: 700px) {
  .l-section {
    margin: 4rem 0;
  }
}

.l-inner {
  margin: 0 auto;
  width: 1080px;
}
@media screen and (max-width: 1200px) {
  .l-inner {
    width: 90%;
  }
}
@media screen and (max-width: 700px) {
  .l-inner {
    padding: 0 2.5rem;
    width: 100%;
  }
}

.l-flex {
  display: flex;
}
.l-flex--aic {
  align-items: center;
}

.l-pos-relative {
  position: relative;
}

.l-pos-center {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.l-clearfix:after {
  clear: both;
  content: "";
  display: block;
}

.l-left {
  float: left;
}

.l-right {
  float: right;
}

/*--------------------------
	module
--------------------------*/
.mv {
  margin-top: 12.2rem;
  padding: 3.5rem 0;
}
@media screen and (max-width: 700px) {
  .mv {
    margin-top: 6.6rem;
    padding: 1.5rem 0 4.5rem;
  }
}
.mv__product-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 700px) {
  .mv__product-flex {
    flex-direction: column-reverse;
  }
}
.mv__product-title {
  padding-left: 4rem;
  display: flex;
  flex-direction: column;
  width: 50%;
}
@media screen and (max-width: 700px) {
  .mv__product-title {
    padding: 0;
    text-align: center;
    width: 100%;
  }
}
.mv__product-ttl01 {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  line-height: 1.2;
  padding-bottom: 2rem;
}
@media screen and (max-width: 700px) {
  .mv__product-ttl01 {
    font-size: 1.2rem;
    padding-bottom: 1;
  }
}
.mv__product-ttl02 {
  font-size: 3.2rem;
  color: #50B1D1;
  font-weight: 400;
  font-family: "soleil", sans-serif;
  letter-spacing: 0.2rem;
  line-height: 1;
  padding-bottom: 3rem;
}
@media screen and (max-width: 700px) {
  .mv__product-ttl02 {
    font-size: 2.1rem;
    padding-bottom: 2rem;
    line-height: 1.2;
    letter-spacing: 0.1rem;
  }
}
.mv__product-ttl03 {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.4rem;
  line-height: 1.4;
  padding-bottom: 6rem;
}
@media screen and (max-width: 700px) {
  .mv__product-ttl03 {
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: 0.2rem;
    padding-bottom: 5rem;
  }
}
.mv__product-trouble-txt {
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 500;
}
@media screen and (max-width: 700px) {
  .mv__product-trouble-txt {
    font-size: 1.3rem;
  }
}
.mv__product-img {
  width: 50rem;
}
@media screen and (max-width: 700px) {
  .mv__product-img {
    width: 25rem;
    padding-bottom: 2.5rem;
  }
}
.mv__guide-single {
  margin-top: 12.2rem;
  background-color: #50B1D1;
  padding: 10rem 0;
}
@media screen and (max-width: 700px) {
  .mv__guide-single {
    margin-top: 6.6rem;
    padding: 5rem 0;
  }
}
.mv__guide-single-ttl-set {
  position: relative;
}
.mv__guide-single-ttl {
  color: #fff;
}
.mv__guide-single-ttl01 {
  font-size: 2.6rem;
  font-weight: 400;
  font-family: "soleil", sans-serif;
  letter-spacing: 0.2rem;
  line-height: 1;
  padding-left: 4rem;
  position: relative;
}
@media screen and (max-width: 700px) {
  .mv__guide-single-ttl01 {
    font-size: 2rem;
    padding-left: 2rem;
  }
}
.mv__guide-single-ttl01::before {
  content: "";
  position: absolute;
  background-image: url(../images/common/guide-single-arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.2rem;
  height: 2rem;
  top: 50%;
  left: 1.5%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 700px) {
  .mv__guide-single-ttl01::before {
    width: 0.8rem;
    height: 1.2rem;
  }
}
.mv__guide-single-ttl02 {
  font-size: 3.2rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  line-height: 1;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}
@media screen and (max-width: 700px) {
  .mv__guide-single-ttl02 {
    font-size: 1.8rem;
    padding-bottom: 2rem;
  }
}
.mv__guide-single-ttl03 {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.4rem;
  line-height: 1;
  padding-left: 4rem;
  position: relative;
}
.mv__guide-single-ttl03::before {
  content: "";
  position: absolute;
  background-image: url(../images/common/surprise-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 3rem;
  height: 3rem;
  top: 40%;
  left: 1.5%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 700px) {
  .mv__guide-single-ttl03::before {
    width: 2.3rem;
    height: 1.9rem;
    top: 40%;
    left: 3.5%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 700px) {
  .mv__guide-single-ttl03 {
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
    line-height: 1;
    padding-left: 3rem;
    position: relative;
  }
}
.mv__guide-single-time {
  background: #fff;
  display: inline-block;
  padding: 1.7rem 2.5rem 1.7rem 5.5rem;
  border-radius: 1.5rem;
  line-height: 1;
  position: absolute;
  bottom: -100%;
  left: 0%;
  font-size: 1.8rem;
  font-weight: 500;
}
@media screen and (max-width: 700px) {
  .mv__guide-single-time {
    font-size: 1.3rem;
    left: -10%;
    border-radius: 0 1.5rem 1.5rem 0;
    padding: 1rem 4.5rem 1rem 6rem;
    bottom: -75%;
  }
}
.mv__guide-single-working-time {
  display: flex;
  align-items: center;
  line-height: 1;
  position: relative;
}
.mv__guide-single-working-time::before {
  content: "";
  position: absolute;
  background-image: url(../images/guide-single/timer-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.5rem;
  height: 2.5rem;
  top: 60%;
  left: -2rem;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 700px) {
  .mv__guide-single-working-time::before {
    width: 1.7rem;
    height: 1.7rem;
    top: 50%;
    left: -1.7rem;
  }
}
.mv__guide-single-working-time01 {
  padding-right: 1.5rem;
  border-right: solid 0.2rem #99AEB5;
  position: relative;
  top: -0.3rem;
}
@media screen and (max-width: 700px) {
  .mv__guide-single-working-time01 {
    padding-right: 1.2rem;
  }
}
.mv__guide-single-working-time02 {
  padding-left: 1.5rem;
}
@media screen and (max-width: 700px) {
  .mv__guide-single-working-time02 {
    padding-left: 1.2rem;
  }
}
.mv__guide-single-minutes {
  font-size: 3.2rem;
  color: #50656C;
  font-weight: 500;
  font-family: "soleil", sans-serif;
  padding: 0 0.8rem;
}
@media screen and (max-width: 700px) {
  .mv__guide-single-minutes {
    font-size: 2.1rem;
    padding: 0 0.4rem;
  }
}
.mv__guide-single-level {
  font-size: 2.4rem;
  color: #50656C;
  font-weight: 500;
  padding: 0 0.8rem;
}
@media screen and (max-width: 700px) {
  .mv__guide-single-level {
    font-size: 1.6rem;
  }
}

#topbtn {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  right: 3rem;
  width: 8rem;
  height: 8rem;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background-color: #666;
  cursor: pointer;
  z-index: 999;
  opacity: 1;
}
@media screen and (max-width: 700px) {
  #topbtn {
    right: 1.5rem;
    width: 5.5rem;
    height: 5.5rem;
  }
}

#topbtn span {
  color: #fff;
  font-size: 1.8rem;
  font-family: "soleil", sans-serif;
  letter-spacing: 0.1rem;
  padding-top: 0.5rem;
  line-height: 1;
}
@media screen and (max-width: 700px) {
  #topbtn span {
    font-size: 1.4rem;
  }
}

#topbtn::before {
  content: "";
  background-image: url(../images/common/top-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0px;
}
@media screen and (max-width: 700px) {
  #topbtn::before {
    width: 1.5rem;
    height: 1.5rem;
  }
}

#topbtn:hover {
  opacity: 0.8;
}

/*--------------------------
	page
--------------------------*/
/* フェードイン付与 */
.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background-color: #fff;
}
.header__contents {
  padding: 6.5rem 0 2rem 5rem;
  border-bottom: solid 0.1rem #99AEB5;
  width: 95%;
}
@media screen and (max-width: 700px) {
  .header__contents {
    width: 90%;
    padding: 2.8rem 0 1.25rem 2.5rem;
  }
}
.header h1 {
  color: #828587;
  font-size: 2rem;
  font-family: "soleil", sans-serif;
  font-weight: 400;
}
@media screen and (max-width: 700px) {
  .header h1 {
    font-size: 1.4rem;
  }
}

.contact {
  background-color: #F2F2F2;
  padding: 8rem 0;
}
@media screen and (max-width: 700px) {
  .contact {
    padding: 4rem 0 5rem;
  }
}
.contact__ttl {
  text-align: center;
  position: relative;
  margin-bottom: 6rem;
}
@media screen and (max-width: 700px) {
  .contact__ttl {
    margin-bottom: 1.5rem;
  }
}
.contact__ttl::before {
  content: "";
  position: absolute;
  bottom: -25%;
  left: 0;
  background-color: #50B1D1;
  width: 10rem;
  height: 0.2rem;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 700px) {
  .contact__ttl::before {
    content: none;
  }
}
.contact__txt01 {
  color: #50B1D1;
  font-size: 1.6rem;
  font-family: "soleil", sans-serif;
  font-weight: 400;
  letter-spacing: 0.1rem;
  margin-bottom: 1.5rem;
  line-height: 1;
}
.contact__txt02 {
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding-bottom: 1.5rem;
  padding-top: 1.7rem;
}
@media screen and (max-width: 700px) {
  .contact__txt02 {
    font-size: 1.4rem;
    padding-bottom: 0;
    padding-top: 1rem;
  }
}
.contact__tel-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 700px) {
  .contact__tel-flex {
    background: #50B1D1;
    padding: 1.5rem 0 1.8rem;
  }
}
.contact__icon {
  width: 7.5rem;
}
@media screen and (max-width: 700px) {
  .contact__icon {
    width: 3.7rem;
    position: relative;
    bottom: -0.3rem;
  }
}
.contact__tel {
  padding-left: 1rem;
  padding-bottom: 1rem;
}
@media screen and (max-width: 700px) {
  .contact__tel {
    padding-bottom: 0;
    line-height: 2;
  }
}
.contact__tel-txt01 {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 700px) {
  .contact__tel-txt01 {
    font-size: 1.5rem;
    color: #fff;
  }
}
.contact__tel-txt02 {
  font-size: 4.6rem;
  font-weight: 400;
  line-height: 1;
  color: #50B1D1;
  font-family: "soleil", sans-serif;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 700px) {
  .contact__tel-txt02 {
    font-size: 1.1rem;
    font-family: "Zen Kaku Gothic New";
    color: #fff;
    font-weight: bold;
  }
}
.contact__week-txt {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  line-height: 1;
  color: #50B1D1;
  text-align: center;
}

.footer {
  background-color: #000;
  padding: 4rem 0 6rem;
}
@media screen and (max-width: 700px) {
  .footer {
    padding: 1.5rem 0 3rem;
  }
}
.footer .l-inner {
  padding-top: 0;
  padding-bottom: 0;
}
.footer__nav {
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 0 auto;
  padding-bottom: 5rem;
}
@media screen and (max-width: 700px) {
  .footer__nav {
    font-size: 1.3rem;
    width: 100%;
    padding-bottom: 2.5rem;
    justify-content: flex-end;
  }
}
.footer__nav-link-common {
  transition: 0.3s;
}
.footer__nav-link-common:hover {
  opacity: 0.7;
}
.footer__link {
  padding: 0 6rem 0 6rem;
  border-right: solid 0.1rem #fff;
  transition: 0.3s;
}
@media screen and (max-width: 700px) {
  .footer__link {
    padding: 1rem 4.3rem 1rem 3.3rem;
  }
}
.footer__link:nth-child(2) {
  border-right: none;
  padding: 0 0 0 6rem;
}
@media screen and (max-width: 700px) {
  .footer__link:nth-child(2) {
    padding: 1rem 0 1rem 3.3rem;
  }
}
.footer__links {
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}
@media screen and (max-width: 700px) {
  .footer__links {
    margin-bottom: 2.5rem;
  }
}
.footer__links-item {
  width: 50%;
  padding: 0 6rem;
}
.footer__links-item:first-child {
  text-align: right;
  border-right: 1px solid #fff;
}
.footer__links-item a {
  padding: 4px 0;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  display: inline-block;
}
.footer__links-item a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 700px) {
  .footer__links-item:first-child {
    padding: 0 4.7rem 0 0;
  }
  .footer__links-item:nth-child(2) {
    padding: 0 0 0 1.9rem;
  }
  .footer__links-item a {
    padding: 9px 0;
    font-size: 1.3rem;
  }
  .footer__links-item a:hover {
    text-decoration: none;
  }
}
.footer__logo {
  text-align: center;
  width: 13%;
  margin: 0 auto;
}
@media screen and (max-width: 700px) {
  .footer__logo {
    width: 40%;
  }
}

.list:last-of-type {
  padding-bottom: 12rem;
}
@media screen and (max-width: 700px) {
  .list:last-of-type {
    padding-bottom: 1.5rem;
  }
}
.list__heading {
  background-color: #50B1D1;
}
.list__ttl {
  padding: 5.5rem 0 5.5rem 0;
  color: #fff;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 700px) {
  .list__ttl {
    padding: 3rem 0 3rem 0;
    font-size: 1.6rem;
  }
}
.list__item {
  border-bottom: solid 0.1rem #828587;
}
.list__item:last-child {
  border-bottom: none;
}
.list__item-hov:hover {
  transition: 0.3s;
}
.list__item-hov:hover .list__question {
  color: #99AEB5;
}
.list__item-flex {
  padding: 5rem 0 5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media screen and (max-width: 700px) {
  .list__item-flex {
    padding: 3.7rem 0 3.5rem 0;
    align-items: flex-start;
  }
}
.list__w {
  color: #387D93;
  font-size: 2.2rem;
  font-family: "soleil", sans-serif;
  letter-spacing: 0.1rem;
  width: 12%;
  line-height: 1;
}
@media screen and (max-width: 700px) {
  .list__w {
    font-size: 1.8rem;
    width: 20%;
    line-height: 1.6;
  }
}
.list__question {
  width: 80%;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  transition: 0.3s;
  line-height: 1;
  align-self: center;
}
@media screen and (max-width: 700px) {
  .list__question {
    font-size: 1.4rem;
    line-height: 1.6;
  }
}
.list__question:hover {
  color: #99AEB5;
}

.guide-single__explanation {
  background: #F2F2F2;
  padding: 9rem 0 7rem;
}
@media screen and (max-width: 700px) {
  .guide-single__explanation {
    padding: 4.8rem 0 3rem;
  }
}
.guide-single__explanation-txt {
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 700px) {
  .guide-single__explanation-txt {
    font-size: 1.5rem;
  }
}

.checkpoint {
  padding: 7rem 0 3rem;
}
@media screen and (max-width: 700px) {
  .checkpoint {
    padding: 4rem 0 4rem;
  }
}
.checkpoint__heading {
  font-size: 2rem;
  font-weight: bold;
  padding-left: 4rem;
  position: relative;
}
@media screen and (max-width: 700px) {
  .checkpoint__heading {
    font-size: 1.6rem;
  }
}
.checkpoint__heading::before {
  content: "";
  position: absolute;
  background-image: url(../images/guide-single/check-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2rem;
  height: 1.6rem;
  top: 50%;
  left: 1%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 700px) {
  .checkpoint__heading::before {
    width: 1.5rem;
    height: 1.2rem;
    top: 50%;
    left: 4%;
  }
}
.checkpoint__btn-list {
  padding-top: 1rem;
}
@media screen and (max-width: 700px) {
  .checkpoint__btn-list {
    padding-top: 0;
  }
}
.checkpoint__btn-item {
  font-size: 1.8rem;
  font-weight: bold;
  color: #50656C;
  letter-spacing: 0.1rem;
  border-bottom: solid 0.1rem #99AEB5;
  transition: 0.3s;
}
@media screen and (max-width: 700px) {
  .checkpoint__btn-item {
    font-size: 1.6rem;
  }
}
.checkpoint__btn-item:last-child {
  border-bottom: none;
}
.checkpoint__btn-item:hover {
  transition: 0.3s;
}
.checkpoint__btn-item:hover .checkpoint__btn-pd {
  color: #A7B2B5;
}
.checkpoint__btn-pd {
  padding: 3rem 0 3rem 4rem;
  position: relative;
  transition: 0.3s;
}
@media screen and (max-width: 700px) {
  .checkpoint__btn-pd {
    padding: 2rem 0 2rem 4rem;
  }
}
.checkpoint__btn-pd::before {
  content: "";
  position: absolute;
  background-image: url(../images/guide-single/checkpoint-arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.6rem;
  height: 2.6rem;
  top: 50%;
  left: 1.2%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 700px) {
  .checkpoint__btn-pd::before {
    width: 2rem;
    height: 2rem;
    top: 50%;
    left: 4%;
  }
}
.checkpoint__btn-pd:hover {
  color: #A7B2B5;
}

.checkpoint-common__heading {
  background-color: #50B1D1;
  padding: 2.7rem 0 2.2rem;
  box-shadow: 0px 6px 0px 1px #387D94;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__heading {
    padding: 1.7rem 0 1.5rem;
  }
}
.checkpoint-common__heading-txt {
  color: #fff;
}
.checkpoint-common__sub-heading {
  font-size: 1.6rem;
  font-weight: bold;
  padding-bottom: 1rem;
  border-bottom: solid 0.1rem #fff;
  line-height: 1;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__sub-heading {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 700px) {
  .checkpoint-common__sub-heading-number {
    font-size: 1.8rem;
  }
}
.checkpoint-common__main-heading {
  line-height: 1;
  padding-top: 2rem;
  font-size: 2.4rem;
  letter-spacing: 0.2rem;
  line-height: 1.2;
  font-weight: 500;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__main-heading {
    font-size: 1.8rem;
    line-height: 1.2;
  }
}
.checkpoint-common__container {
  background: #F2F2F2;
  padding: 10rem 0;
  border-bottom: solid 0.5rem #387D93;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__container {
    padding: 5rem 0;
  }
}
.checkpoint-common__container:last-of-type {
  border-bottom: none;
}
.checkpoint-common__container--02 {
  padding-bottom: 2rem;
}
.checkpoint-common__container--white {
  background: #fff;
}
.checkpoint-common__container-inner {
  width: 1080px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .checkpoint-common__container-inner {
    width: 90%;
  }
}
@media screen and (max-width: 700px) {
  .checkpoint-common__container-inner {
    padding: 0 2.5rem;
    width: 100%;
  }
}
.checkpoint-common__step {
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: 8rem;
  line-height: 1;
  display: flex;
  align-items: baseline;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__step {
    font-size: 2rem;
    flex-direction: column;
    padding-bottom: 4rem;
  }
}
.checkpoint-common__small {
  color: #828587;
  font-family: "soleil", sans-serif;
  font-weight: 300;
  font-size: 3.2rem;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__small {
    font-size: 2rem;
    padding-bottom: 2rem;
  }
}
.checkpoint-common__number {
  font-family: "soleil", sans-serif;
  font-weight: 300;
  font-size: 7.8rem;
  color: #000;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__number {
    font-size: 4.1rem;
  }
}
.checkpoint-common__txt {
  font-size: 2.4rem;
  font-weight: bold;
  padding-left: 4.3rem;
  letter-spacing: 0.1rem;
  line-height: 1.2;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__txt {
    font-size: 1.5rem;
    padding-left: 0;
    line-height: 1.2;
    letter-spacing: 0.1rem;
  }
}
.checkpoint-common__photo-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5rem 0;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__photo-wrap {
    gap: 2.5rem 0;
  }
}
.checkpoint-common__photo-img {
  width: 50rem;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__photo-img {
    width: 100%;
  }
}
.checkpoint-common__photo-pdb {
  padding-bottom: 5rem;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__photo-pdb {
    padding-bottom: 2.5rem;
  }
}
.checkpoint-common__caption {
  font-size: 1.8rem;
  padding-left: 3rem;
  position: relative;
  border-left: solid 0.2rem #99AEB5;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__caption {
    font-size: 1.3rem;
    padding-left: 2rem;
    letter-spacing: 0.1rem;
  }
}
.checkpoint-common .youtube {
  width: 100%;
  aspect-ratio: 16/9;
  margin-top: 8rem;
}
@media screen and (max-width: 700px) {
  .checkpoint-common .youtube {
    margin-top: 4rem;
  }
}
.checkpoint-common .youtube iframe {
  width: 100%;
  height: 100%;
  margin-bottom: 5rem;
}
@media screen and (max-width: 700px) {
  .checkpoint-common .youtube iframe {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    margin-bottom: 2.5rem;
  }
}
.checkpoint-common__management {
  font-size: 1.3rem;
  text-align: right;
  padding-top: 5rem;
  font-weight: 400;
}
@media screen and (max-width: 700px) {
  .checkpoint-common__management {
    padding-top: 5rem;
  }
}

.floating-btn {
  position: fixed;
  top: 35rem;
  right: 0;
  background-color: #ECEFF1;
  border-radius: 1.5rem 0 0 1.5rem;
  transition: 0.3s;
  z-index: 800;
  vertical-align: middle;
  display: flex;
  justify-content: center;
}
.floating-btn:hover {
  background-color: #50B1D1;
}
.floating-btn:hover .floating-btn__pd {
  color: #fff;
}
.floating-btn:hover .floating-btn__pd p::before {
  transition: 0.3s;
  background-image: url(../images/guide-single/floathing-icon-hov.svg);
}
.floating-btn__pd {
  width: 5.5rem;
}
.floating-btn__pd p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 8rem 1.3rem 5rem;
  letter-spacing: 0.4rem;
  transition: 0.3s;
}
.floating-btn__pd p::before {
  content: "";
  position: absolute;
  background-image: url(../images/guide-single/floathing-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.5rem;
  height: 2.5rem;
  top: 24%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}

.floating-btn-animation {
  display: block;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.floating-btn-animation.visible {
  opacity: 1;
}

.floating-btn-animation.hidden {
  opacity: 0;
  pointer-events: none;
}

.floating-btn-sp {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 900;
  transition: opacity 0.3s ease;
}

.floating-btn-archive {
  width: 26%;
  background-color: #EBEFF1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  font-weight: bold;
  padding-left: 1rem;
  position: relative;
}
.floating-btn-archive::before {
  content: "";
  position: absolute;
  background-image: url(../images/guide-single/floathing-icon-archive-sp.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.5rem;
  height: 1.5rem;
  top: 50%;
  left: 28%;
  transform: translate(-50%, -50%);
}

.floating-btn-tel {
  background-color: #50B1D1;
  width: 52%;
  padding: 1.25rem 3rem;
  border-radius: 0 1.5rem 0 0;
}

.floating-tel-sp {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  font-size: 1.4rem;
  position: relative;
  padding-left: 3rem;
  line-height: 1.4;
}
.floating-tel-sp::before {
  content: "";
  position: absolute;
  background-image: url(../images/guide-single/floathing-sp-tel-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 3.4rem;
  height: 2.8rem;
  top: 50%;
  left: 13%;
  transform: translate(-50%, -50%);
}

/*--------------------------
	state
--------------------------*/
/*----------------------------------------------------

	JavaScriptなどの制御による状態の変化を表すスタイルの設定ファイルです。
	汎用的なstateのスタイルをまとめています。
	基本的には編集することはありません。

	命名規則として、クラス名の頭に 
	is-* という接頭辞をつけることを推奨します。

----------------------------------------------------*/
/*--------------------------
	レスポンシブ関係 ファブレットはなし
--------------------------*/
@media screen and (max-width: 1000px) {
  .is-Pc {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .is-Tab {
    display: none;
  }
}
@media screen and (min-width: 1001px) {
  .is-Tab {
    display: none;
  }
}

@media screen and (min-width: 701px) {
  .is-Sp {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .is-Pc_Tab {
    display: none;
  }
}

@media screen and (min-width: 1001px) {
  .is-Tab_Sp {
    display: none;
  }
}/*# sourceMappingURL=style.css.map */