@charset "UTF-8";
/* ================================
  　フォントの設定方法
    step1:サイトで使うフォントをすべて洗い出し、Google Fontsにアクセスして"Get font"
    step2:"Get font"したhtmlのコードをheadに貼る
    step3:"Get font"したcssのコードを_variables.scss(このファイル)に貼り、変数名を付ける
    step4:デフォルト以外のフォントを使いたい場面では定義した変数名を呼び出す
   ================================ */
.base__bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}

/* ================================
   Main Layout
   ================================ */
.main-layout {
  position: relative;
  overflow-x: clip;
}

/* ================================
   Main Visual / fv
   ================================ */
.main-hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.main-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* ================================
   Main Body Layout
   ================================ */
.main-body {
  position: relative;
}
@media screen and (min-width: 768px) {
  .main-body {
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.main-body__bg {
  position: absolute;
  inset: 0;
  top: 70px;
  z-index: -1;
  background-image: url("../images/front/concept-deco.png");
  background-repeat: no-repeat;
  background-position: 10px 0;
  background-size: 556px 308px;
}
@media screen and (min-width: 768px) {
  .main-body__bg {
    top: 102px;
    background-image: url("../images/front/pc/concept-deco.png");
    background-repeat: no-repeat;
    background-position: calc(50% + 466px) 0;
    background-size: 1310px 726px;
  }
}

/* ================================
   Sidebar
   ================================ */
/* ================================
   Main Content Column
   ================================ */
.main-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

/* 紙面型では中央寄せしない */
.main-content .container {
  max-width: none;
  margin: 0;
}

/* =====================================
   Section上書き

===================================== */
.section--policy .inner,
.section--guide .inner {
  padding-inline: 20px;
}
@media screen and (min-width: 768px) {
  .section--policy,
  .section--guide {
    padding-bottom: 120px;
  }
  .section--policy .inner,
  .section--guide .inner {
    max-width: 810px;
    padding-inline: 40px;
    margin-inline: auto;
  }
}
.section--policy strong,
.section--guide strong {
  font-weight: 700;
}
.section--policy h3,
.section--guide h3 {
  position: relative;
  margin-bottom: 10px;
  font-size: 16px;
}
.section--policy p,
.section--guide p {
  margin-bottom: 23px;
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .section--policy p,
  .section--guide p {
    margin-bottom: 25px;
  }
}
.section--policy .button,
.section--guide .button {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .section--policy .button,
  .section--guide .button {
    margin-left: 0;
    margin-right: auto;
  }
}

@media screen and (max-width: 767px) {
  .section--policy .container + .container {
    margin-top: 100px;
  }
}
.section--policy .container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}

.section--policy .container .container__inner {
  padding-inline: 20px;
}
.section--policy .container .container__inner > :last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .section--policy .container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    gap: 93px;
    padding-bottom: 228px;
  }
  .section--policy .container .container__inner {
    -ms-flex-preferred-size: 447px;
        flex-basis: 447px;
    padding-left: 0;
    padding-right: 40px;
    margin-left: 0;
  }
  .section--policy .container .policy-img {
    -ms-flex-preferred-size: 640px;
        flex-basis: 640px;
  }
}
@media screen and (min-width: 768px) {
  .section--policy .container--type2 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: right;
        -ms-flex-pack: right;
            justify-content: right;
    padding-bottom: 0;
  }
  .section--policy .container--type2 .container__inner {
    padding-left: 40px;
    padding-right: 0;
    margin-left: auto;
    margin-right: 0;
  }
}
.container--type2 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.container--type2 .policy-img {
  border-radius: 20px 0 0 20px;
}

.section--policy .title--type1 {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .section--policy .title--type1 {
    margin-bottom: 39px;
  }
}

.policy-img {
  border-radius: 0px 20px 20px 0;
  width: 89.0666666667%;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .policy-img {
    border-radius: 0px 40px 40px 0;
  }
}

@media screen and (min-width: 768px) {
  .section--atmosphere {
    padding-bottom: 160px;
  }
}
.section--atmosphere .inner {
  max-width: 1080px;
}

.section--atmosphere .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}
@media screen and (min-width: 768px) {
  .section--atmosphere .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.section--atmosphere .card {
  border-radius: 20px;
  overflow: hidden;
}

/* ================================
   footer
   ================================ */
/* =====================================
    トップに戻るボタン

===================================== */