@charset "UTF-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● style_matchingsystem.css                             */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    各種import                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    カラー設定                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* カラー定義
  ------------------------------------ */
/* 引数でキーを指定して
    上記のマップで定義したカラーを返すfunction
  ------------------------------------ */
/* カラー定義
  ------------------------------------ */
/*
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    プロパティ                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    継承用（試作）                                */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 仮）疑似要素

        ::before, ::after で要素付加するときに書きがちな処理
  ------------------------------------ */
/* 画像の伸縮表示
      img要素に対して適用する。imgの幅と高さも定義すること
      上記「アスペクト比を保った表示ボックス」と併用推奨
  ------------------------------------ */
._img_contain {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

._img_cover {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    mixin 定義                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* アスペクト比を保った表示ボックス
    ※ 旧ブラウザを無視するなら  aspect-ratio: ●/●; で済むが
       非対応ブラウザにも適用したい場合の処理
       ・横幅は基本100％で扱う。100%幅以外にしたい場合はこの要素よりも親要素で適用させる

    想定しているHTML構造
      <p class="Image">
        <img src="XXXX">
      </p>
    などで、.Image に適用させ、img に object-fit でフィット方法を併記して使う


    適用例 ）
     .Image{
         @include aspect-ratio(); //デフォルトのアスペクト比を使う場合
     }
     .Image{
         @include aspect-ratio(6 / 19); //個別にアスペクト比を指定して使う場合
     }
  ------------------------------------------------------------------------ */
/* flex 関連のプロパティをまとめて定義

    適用例 ）
     .hogehoge{
         @include flex();
     }
     .hogehoge{
         @include flex(center, flex-end);
     }
  ------------------------------------------------------------------------ */
/* text-shadow 関連のプロパティをまとめて定義

     適用例 ）
      .hogehoge{
          @include text-shadow-bk(0.5);
      }
   ------------------------------------------------------------------------ */
/* レスポンシブ 対応用 ブレイクポイントによる条件分岐
    適用例 ）
    @include media-query(under-bp-m) {
       $breakpoint-m よりも小さいウィンドウ幅の処理をここに書く
    }
  ------------------------------------------------------------------------ */
body.MatchingSystem #ContentsDivision .TargetColumn {
  text-align: center;
}

body.MatchingSystem #ContentsDivision .TargetColumn .Column {
  position: relative;
  z-index: 1;
  padding-top: 5rem;
}

body.MatchingSystem #ContentsDivision .TargetColumn .Column:after {
  content: "";
  width: 350px;
  height: 175px;
  border: solid 4px #f7f2ef;
  border-radius: 175px 175px 0 0;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  z-index: -1;
}

body.MatchingSystem #ContentsDivision .TargetColumn .Heading {
  font-size: 125%;
}

body.MatchingSystem #ContentsDivision .TargetColumn .Button {
  font-size: 112.5%;
  margin-top: 0.5em;
  position: relative;
  top: 0;
}

body.MatchingSystem #ContentsDivision .TargetColumn .Button:hover {
  top: 3px;
}

body.MatchingSystem #ContentsDivision .TargetColumn .Button:after {
  content: none;
}

body.MatchingSystem #ContentsDivision .TargetColumn .Button span[class*="icon-"] {
  font-size: 125%;
  margin-right: 0.25em;
  font-size: 175%;
  margin-right: 0.25em;
  line-height: 1rem;
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.2em;
}

body.MatchingSystem #ContentsDivision [id].Heading {
  padding-top: 75px;
}

body.MatchingSystem #ContentsDivision .TermsBox {
  border: double 3px #f7f2ef;
  -webkit-box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.02) inset;
          box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.02) inset;
  border-radius: 20px;
  margin-bottom: 0.75em;
}

@media screen and (min-width: 768px), print {
  body.MatchingSystem #ContentsDivision .TermsBox {
    padding: 30px 30px 30px 45px;
  }
}

@media screen and (max-width: 767px) {
  body.MatchingSystem #ContentsDivision .TermsBox {
    padding: 20px 10px 20px 15px;
  }
}

body.MatchingSystem #ContentsDivision .TermsBox .inner {
  overflow-y: auto;
  overflow-x: hidden;
  height: 55vh;
  padding-right: 1em;
}

body.MatchingSystem #ContentsDivision .TermsBox .inner p {
  line-height: 1.5;
}

@media screen and (min-width: 768px), print {
  body.MatchingSystem #ContentsDivision .TermsBox .inner p {
    font-size: 95%;
  }
}

@media screen and (max-width: 767px) {
  body.MatchingSystem #ContentsDivision .TermsBox .inner p {
    font-size: 90%;
  }
}

body.MatchingSystem #ContentsDivision #TermsCheckText,
body.MatchingSystem #ContentsDivision #TermsCheckText2 {
  margin: 1em 0;
  font-size: 110%;
}

body.MatchingSystem #ContentsDivision #TermsCheckText label,
body.MatchingSystem #ContentsDivision #TermsCheckText2 label {
  cursor: pointer;
  padding: 0.25em;
}

body.MatchingSystem #ContentsDivision #TermsCheckText label {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(60%, rgba(238, 122, 122, 0.33)));
  background: linear-gradient(transparent 70%, rgba(238, 122, 122, 0.33) 60%);
}

body.MatchingSystem #ContentsDivision #TermsCheckText2 label {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(60%, rgba(244, 187, 112, 0.33)));
  background: linear-gradient(transparent 70%, rgba(244, 187, 112, 0.33) 60%);
}