@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Martel:wght@200;300&family=Raleway:wght@300&display=swap');


:root {
  --base-font: 16px;
  --color-yellow: #ffcb01;
  --color-glay: #ccc;
  --color-white: #fff;
  --width-base: 1268px;
  --ff-serif: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

fieldset,
img {
  border: 0;
}

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

/* # =================================================================
# component
# ================================================================= */
/* c-container */
.c-container {
  margin-left: auto;
  margin-right: auto;
}

.c-container.-l {
  width: 1268px;
}

.c-container.-m {
  width: 1086px;
}

/* c-headind__title */
.c-headind__title {
  position: relative;
}

.c-headind__title.-underbar {
  padding-bottom: 30px;
}

.c-headind__title.-underbar::before {
  content: '';
  width: 66px;
  height: 1px;
  background-color: var(--color-glay);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.c-headind__title--en,
.c-headind__title--jp {
  display: block;
}

.c-headind__title--en.-l {
  font-size: 30px;
  font-weight: 200;
  line-height: calc(45 / 30);
  font-family: 'Martel', serif;
}

.c-headind__title--en.-m {
  font-size: 27px;
  font-weight: 300;
  font-family: 'Raleway', sans-serif;
}

.c-headind__title--jp {
  font-size: 20px;
  line-height: calc(45 / 20);
  font-weight: 500;
}

.c-copy {
  font-size: var(--base-font);
  line-height: 1.875;
  font-weight: 500;
}

.c-btn {
  display: block;
  background-color: var(--color-yellow);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
  padding: .7em 1.4em .6em;
  width: 162px;
  color: #000;
  font-family: "Helvetica Neue", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.c-banner-line {
  position: relative;
}

.c-banner-line::before,
.c-banner-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.c-banner-line.-single::after {
  border: 2px solid var(--color-white);
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.c-banner-line.-double::before {
  border: 3px solid var(--color-yellow);
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.c-banner-line.-double::after {
  border: 2px solid var(--color-glay);
  width: calc(100% - 26px);
  height: calc(100% - 26px);
}

@media screen and (max-width: 599px) {

  /* c-container */
  .c-container.-l {
    width: calc(100% - 16vw);
  }

  .c-container.-m {
    width: calc(100% - 16vw);
  }

  /* c-headind__title */
  .c-headind__title {
    line-height: 1.5;
  }

  .c-headind__title.-underbar {
    padding-bottom: 8vw;
  }

  .c-headind__title.-underbar::before {
    width: 8.8vw;
  }

  .c-headind__title--en,
  .c-headind__title--jp {
    display: block;
    font-weight: 500;
  }

  .c-headind__title--en.-l {
    font-size: 6.2666vw;
    font-weight: 200;
  }

  .c-headind__title--en.-m {
    font-size: 5.46666vw;
  }

  .c-headind__title--jp {
    font-size: 4.8vw;
  }

  .c-copy {
    font-size: 4vw;
    line-height: 1.875;
  }

  .c-btn {
    font-size: 3.7333vw;
    padding: 1em 1.4em .9em;
    width: 34vw;
  }

  .c-banner-line.-single::after {
    width: calc(100% - 11px);
    height: calc(100% - 13px);
  }

  .c-banner-line.-double::before {
    width: calc(100% - 11px);
    height: calc(100% - 13px);
  }

  .c-banner-line.-double::after {
    width: calc(100% - 17px);
    height: calc(100% - 19px);
  }
}

/* # =================================================================
# utility
# ================================================================= */
.u-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.u-martel {
  font-family: 'Martel', serif;
}

.u-raleway {
  font-family: 'Raleway', sans-serif;
}

.u-pc {
  display: block;
}

.u-sp {
  display: none;
}

@media screen and (max-width:599px) {
  .u-pc {
    display: none;
  }

  .u-sp {
    display: block;
  }
}

/* # =================================================================
# wrapper
# ================================================================= */
.wrapper {
  overflow: hidden;
  font-family: var(--ff-serif);
  color: #000;
  padding: 0 0 120px;
}

@media screen and (max-width:599px) {
  .wrapper {
    padding: 0 0 calc((100 / 750) * 100vw);
  }
}


/* # =================================================================
# main-title
# ================================================================= */
.main__title {
  text-align: center;
  margin: 0 0 60px;
}

.main__title .c-headind__title--jp {
  font-size: 30px;
  line-height: 1;
}

@media screen and (max-width:599px) {
  .main__title {
    margin: 0 0 13.3333vw;
  }

  .main__title .c-headind__title--jp {
    font-size: 6.2666vw;
  }
}

/* # =================================================================
# main-visual
# ================================================================= */
.main-visual {
  position: relative;
}

.main-visual__inner {
  width: 100%;
}

.main-visual__text {
  margin: 52px auto 0;
  text-align: center;
}

.main-visual__title {
  margin: 0;
}

.main-visual__lead {
  margin: 6px 0 0;
}

@media screen and (max-width: 599px) {
  .main-visual__inner {
    width: 100%;
  }

  .main-visual__image {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .main-visual__text {
    margin: 8vw auto 0;
  }

  .main-visual__title {
    margin: 0;
  }

  .main-visual__title .c-headind__title--en {
    white-space: nowrap;
  }

  .main-visual__title .c-headind__title--jp {
    line-height: calc(65 / 35);
  }

  .main-visual__lead {
    width: 77.3333vw;
    margin: 1.3333vw auto 0;
    font-size: 4vw;
  }
}

/* # =================================================================
# change-since
# ================================================================= */
.change-since {
  position: relative;
}

.change-since__inner {
  padding: 40px 0 0;
  margin: 40px auto 0;
  border-top: 1px solid var(--color-glay);
  display: flex;
  justify-content: space-between;
}

.change-since__image {
  width: 634px;
}

.change-since__text {
  width: 563px;
}

.change-since__title {
  font-family: 'Martel', serif;
  font-size: 27px;
  font-weight: 200;
  line-height: 1;
}

.change-since__copy {
  margin: 28px 0 0;
}

@media screen and (max-width:599px) {
  .change-since__inner {
    padding: 9.3333vw 0 0;
    display: block;
  }

  .change-since__image {
    width: 100%;
  }

  .change-since__text {
    width: 100%;
  }

  .change-since__title {
    font-size: 5.46666vw;
    margin: 4.5333vw 0 0;
  }

  .change-since__copy {
    margin: 4.5333vw 0 0;
  }
}

/* # =================================================================
# four-chapters
# ================================================================= */
.four-chapters {
  position: relative;
}

.four-chapters__inner {
  padding: 40px 0 0;
}

.four-chapters__head {
  text-align: center;
}

.four-chapters__title .c-headind__title--en,
.four-chapters__title .c-headind__title--jp {
  display: block;
  /* font-size: 30px; */
  line-height: calc(45 / 30);
}

.four-chapters__body {
  margin: 35px 0 0;
}

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

.four-chapters__item {
  width: 483px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.four-chapters__item:nth-child(n+3) {
  margin: 50px 0 0;
}

.four-chapters__item:nth-child(even)::before {
  content: '';
  width: 1px;
  height: 444px;
  background-color: var(--color-glay);
  position: absolute;
  top: 50px;
  left: -60px;
}

.four-chapters__text {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.four-chapters__text--title {
  margin: 24px 0 0;
}

.four-chapters__text--copy {
  margin: 6px 0 43px;
}

.four-chapters__text--btn {
  margin-top: auto;
}

@media screen and (max-width:599px) {
  .four-chapters {
    position: relative;
  }

  .four-chapters__inner {
    padding: 13.3333vw 0 0;
  }

  .four-chapters__head {
    text-align: center;
  }

  .four-chapters__title .c-headind__title--en,
  .four-chapters__title .c-headind__title--jp {
    line-height: calc(75 / 47);
  }

  .four-chapters__body {
    margin: 45px 0 0;
  }

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

  .four-chapters__item {
    width: 100%;
  }

  .four-chapters__item:nth-child(n+2),
  .four-chapters__item:nth-child(n+3) {
    margin: 8vw 0 0;
    padding: 8vw 0 0;
  }

  .four-chapters__item:nth-child(even)::before,
  .four-chapters__item:nth-child(n+2)::before,
  .four-chapters__item:nth-child(3)::before {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
  }

  .four-chapters__item:nth-child(3)::after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-glay);
  }

  .four-chapters__text--title {
    margin: 6.666vw 0 0;
    text-align: center;
  }

  .four-chapters__text--copy {
    margin: .8vw 0 0;
  }

  .four-chapters__text--btn {
    margin: 4vw auto 0;
  }
}

/* # =================================================================
# locally
# ================================================================= */
.locally {
  position: relative;
}

.locally__inner {
  padding: 60px 0 0;
}

.locally__head {
  text-align: center;
}

.locally__title.c-headind__title.-underbar {
  padding-bottom: 20px;
}

.locally__body {
  margin: 35px 0 0;
}

.locally__banner--inner {
  display: flex;
  align-items: center;
}

.locally__banner--text {
  width: 444px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 10;
}

.locally__banner--title {
  font-size: 25px;
  line-height: calc(38 / 25);
  font-weight: 300;
}

.locally__banner--copy {
  font-size: 18px;
  line-height: calc(27/ 18);
  margin: .5em 0 0;
}

.locally__banner--btn {
  margin: 20px 0 0;
}

.locally__banner--thum {
  width: 824px;
}

@media screen and (max-width:599px) {
  .locally {
    position: relative;
  }

  .locally__inner {
    padding: 90px 0 0;
  }

  .locally__head {
    text-align: center;
  }

  .locally__body {
    margin: 45px 0 0;
  }

  .locally__banner--inner {
    display: flex;
    flex-direction: column-reverse;
  }

  .locally__banner--text {
    width: 100%;
    padding: 8vw 0 13.333vw;
  }

  .locally__banner--title {
    font-size: 5.0666vw;
  }

  .locally__banner--copy {
    font-size: 3.7333vw;
  }

  .locally__banner--thum {
    width: 100%;
  }
}


/* # =================================================================
# commitments
# ================================================================= */

.commitments {
  position: relative;
}

.commitments__inner {
  padding: 60px 0 0;
}

.commitments__head {
  text-align: center;
}

.commitments__title.c-headind__title.-underbar {
  padding-bottom: 20px;
}

.commitments__body {
  margin: 35px 0 0;
}

.commitments__banner--inner {
  display: flex;
  align-items: center;
}

.commitments__banner--text {
  width: 444px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 10;
}

.commitments__banner--title {
  font-size: 25px;
  line-height: calc(38 / 25);
  font-weight: 300;
}

.commitments__banner--copy {
  font-size: 18px;
  line-height: calc(27/ 18);
  margin: 0.5em 0 0;
}

.commitments__banner--btn {
  margin: 20px 0 0;
}

.commitments__banner--thum {
  width: 824px;
}

@media screen and (max-width:599px) {
  .commitments {
    position: relative;
  }

  .commitments__inner {
    padding: 90px 0 0;
  }

  .commitments__head {
    text-align: center;
  }

  .commitments__body {
    margin: 45px 0 0;
  }

  .commitments__banner--inner {
    flex-direction: column-reverse;
  }

  .commitments__banner--text {
    width: 100%;
    padding: 8vw 0 13.333vw;
  }

  .commitments__banner--title {
    font-size:5.0666vw;
  }

  .commitments__banner--copy {
    font-size: 3.7333vw;
  }

  .commitments__banner--btn {
    margin: 20px 0 0;
  }

  .commitments__banner--thum {
    width: 100%;
  }

}