@charset "utf-8";

/*
 * 共通部品
 * --------------------------------
 */

body {
  margin: 0;
  font-family: 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN';
  color: #282828;
}

/* コンテナ */
.container {
  max-width: 1200px;
  margin: auto;
}

.container.is-content {
  max-width: 900px;
}

/* キャプション */
.caption {
  font-size: 32px;
  font-weight: 300;
  text-align: center;
  letter-spacing: 0.1em;
}

.sub-caption {
  margin: 40px 0;
  font-family: 'Nunito Sans';
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  /* color: #aaa198; */
  color: #000;
}

/* セクション */
.section-image-box {
  padding: 0 40px;
}

.section-image {
  display: block;
  width: 100%;
  height: 550px;
  object-fit: cover;
}

/* 画像と説明文のペア */
.detail-box {
  padding: 100px 40px;
}

.details {
  display: flex;
}

.details + .details {
  margin-top: 100px;
}

.details-item {
  flex: 1;
}

.details-item + .details-item {
  margin-left: 50px;
}

.details-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 説明文 */
.description-title {
  padding-bottom: 16px;
  border-bottom: solid 1px #707070;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.description-text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.86;
  letter-spacing: 0.1em;
}

.description-text + .description-text {
  margin-top: 2em;
}

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

/* スマートフォン */
@media screen and (max-width: 768px) {
  /* セクション */
  .section-image-box {
    padding: 0;
  }

  .section-image {
    height: 460px;
  }

  /* 画像と説明文のペア */
  .detail-box {
    padding: 60px 20px;
  }

  .details {
    flex-direction: column-reverse;
  }

  .details-item + .details-item {
    margin-left: 0;
    margin-bottom: 40px;
  }
}