@charset "utf-8";
/*----------------------------------------------------------------
  craftsmanship
----------------------------------------------------------------*/
.craftsmanship { position: relative; padding-top: 20px; font-family: 'Suranna', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, serif; color: #000; }
.craftsmanship img { width: 100%; height: auto; }
.craftsmanship-wrap { position: relative; margin: 0 auto; }
.craftsmanship-content { display: grid; gap: 28px; position: relative; }

@media screen and (max-width: 800px) {
  .craftsmanship-wrap { padding: 0 14px; }
}

@media screen and (min-width: 801px) {
  .craftsmanship { padding-top: 36px; }
  .craftsmanship-wrap { padding: 0 72px; }
  .craftsmanship-content { gap: 88px; }
}

/* title */
.craftsmanship-title { position: relative; margin-bottom: 40px; text-align: center; }
.craftsmanship-title-site { font-size: 22px; font-weight: 400; line-height: 2.1818181818; }
.craftsmanship-title-name { margin-top: -3px; font-size: 16px; font-weight: 400; line-height: 2.1875; }

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

@media screen and (min-width: 801px) {
  .craftsmanship-title { margin-bottom: 42px; }
  .craftsmanship-title-site { font-size: 22px; line-height: 2.1818181818; }
  .craftsmanship-title-name { margin-top: -3px; font-size: 16px; line-height: 2.1875; }
}

/* media */
.craftsmanship-media { position: relative; margin-bottom: 32px; }
.craftsmanship-media-content { padding-bottom: 38px; border-bottom: 1px solid rgba(102,102,102,0.4039); }
.craftsmanship-media-file { position: relative; aspect-ratio: 393 / 222; }
.craftsmanship-media-file iframe { display: block; width: 100%; height: 100%; }

@media screen and (max-width: 800px) {
  .craftsmanship-media .craftsmanship-wrap { padding: 0 20px; }
}

@media screen and (min-width: 801px) {
  .craftsmanship-media { margin-bottom: 72px; }
  .craftsmanship-media .craftsmanship-wrap { padding: 0 34px; }
  .craftsmanship-media-content { padding-bottom: 72px; }
}

/* block */
.craftsmanship-block { position: relative; }
.craftsmanship-block-text { font-size: 16px; line-height: 2.1875; }
.craftsmanship-block-text p + p { margin-top: 2.1875em; }
.craftsmanship-block-title { text-align: center; font-size: 22px; line-height: 2.1818181818; }
.craftsmanship-block-title:not(:first-child) { margin-top: 48px; }
.craftsmanship-block-title:not(:last-child) { margin-bottom: 28px; }
.craftsmanship-block-image { margin: 0 auto; }
.craftsmanship-block-image figcaption { display: block; text-align: center; font-size: 22px; line-height: 2.1818181818; }
.craftsmanship-block-image figcaption:not(:first-child) { margin-top: 18px; }
.craftsmanship-block-image.is-w-small { width: 75.3488372093%; }
.craftsmanship-block-image.is-w-mid { width: 81.8604651162%; }

.craftsmanship-block-image + .craftsmanship-block-text { margin-top: 28px; }
.craftsmanship-block-text + .craftsmanship-block-image { margin-top: 72px; }

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

@media screen and (min-width: 801px) {
  .craftsmanship-block-text { font-size: 16px; line-height: 2.1875; }
  .craftsmanship-block-text p + p { margin-top: 2.1875em; }
  .craftsmanship-block-title { font-size: 22px; line-height: 2.1818181818; }
  .craftsmanship-block-title:not(:first-child) { margin-top: 140px; }
  .craftsmanship-block-title:not(:last-child) { margin-bottom: 28px; }
  .craftsmanship-block-image figcaption { font-size: 22px; line-height: 2.1818181818; }
  .craftsmanship-block-image figcaption:not(:first-child) { margin-top: 36px; }
  .craftsmanship-block-image.is-w-small { width: 43.0555555555%; }
  .craftsmanship-block-image.is-w-mid { width: 75.8333333333%; }

  .craftsmanship-block-image + .craftsmanship-block-text { margin-top: 62px; }
  .craftsmanship-block-text + .craftsmanship-block-image { margin-top: 126px; }
}