@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- concept :ページ共通枠（ヘッダーの逃げ／コンテンツ幅）
- concept_ttl :ページタイトルの余白（h1本体は common.css の .page_ttl）
- concept_hero :メインビジュアル
- concept_message :本文
- concept_duo :2分割画像
- concept_wide :横長画像
-------------------------*/
/* ---- conceptページ用 変数 ---- */
/* 本文のline-heightで文字の上下に生まれる余白。
   FigmaのAuto Layout paddingは「文字ボックス（Text Layout Box）」基準のため、
   この分を相殺するとFigmaのpadding値をそのままCSSへ書ける。
   PC : (47px − 文字実寸13px) / 2 = 17px
   SP : (36px − 文字実寸12px) / 2 = 12px */
/* 各ビジュアルのFigma実寸（アスペクト比）。
   Sassのバージョン差で「/」が除算評価されないよう文字列で保持する */
/*=======================================
　concept
=======================================*/
/* 既存ヘッダーは position:absolute のため、ページ側で開始位置を確保する */
.concept {
  padding-top: 105px;
  /* ヘッダーがハンバーガーへ切り替わる幅（xl）で高さも切り替わる */
}
@media screen and (max-width: 1024px) {
  .concept {
    padding-top: 60px;
  }
}
.concept .concept__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PC/SPで改行位置が異なる箇所の制御 */
.concept-br--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .concept-br--sp {
    display: inline;
  }
}

/*=======================================
　concept_ttl
=======================================*/
.concept__head {
  padding-bottom: 60px;
  /* SPはFigmaの Breadcrumb→h1 / h1→MV が各30px（Frame間のgap・padding）。
     h1のline-heightで生じる上下の余白（計約10px）を差し引いて25pxとする */
}
@media screen and (max-width: 768px) {
  .concept__head {
    padding: 25px 0;
  }
}

/*=======================================
　concept_hero
=======================================*/
/* Figma Frame 748（PC 1440×800／SP 375×550）。写真も縦書きコピーもFigma上ABSOLUTE */
.concept-hero {
  position: relative;
  /* 写真の表示枠 */
  /* Figmaのトリミング（scaleMode: CROP / imageTransform）を比率で再現。
     width＝枠幅に対する画像の表示幅、left/top＝枠に対する画像の表示開始位置 */
  /* 縦書きコピー（Figma ABSOLUTE / PC x469 y296・SP x82 y225） */
}
.concept-hero .concept-hero__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1440 / 800;
}
@media screen and (max-width: 768px) {
  .concept-hero .concept-hero__media {
    aspect-ratio: 375 / 550;
  }
}
.concept-hero .concept-hero__img {
  position: absolute;
  width: 118.857%;
  height: auto;
  left: -11.484%;
  top: -8.409%;
  max-width: none;
}
@media screen and (max-width: 768px) {
  .concept-hero .concept-hero__img {
    width: 226.316%;
    left: -60.26%;
    top: -1.227%;
  }
}
.concept-hero .concept-hero__copy {
  position: absolute;
  left: 32.569%;
  top: 37%;
  width: 5.595%;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .concept-hero .concept-hero__copy {
    left: 21.867%;
    top: 40.909%;
    width: 14.741%;
  }
}
.concept-hero .concept-hero__copy img {
  display: block;
  width: 100%;
  height: auto;
}

/*=======================================
　concept_message
=======================================*/
.concept-message {
  /* 上下paddingはFigmaのFrameごとに異なるためmodifierで指定する */
  padding-right: 20px;
  padding-left: 20px;
  /* line-heightの上下余白を相殺し、Figmaのpadding値をそのまま使えるようにする */
  /* 末尾のyamatoyaロゴ（Figma Frame 674 gap 100px / SP 70px） */
}
.concept-message .concept-message__body {
  margin-top: -17px;
  margin-bottom: -17px;
}
@media screen and (max-width: 768px) {
  .concept-message .concept-message__body {
    margin-top: -12px;
    margin-bottom: -12px;
  }
}
.concept-message .concept-message__txt {
  font-weight: 500;
  font-size: 18px;
  line-height: 47px;
  text-align: center;
  color: #666666;
  /* Figma上の空行1行分 */
}
@media screen and (max-width: 768px) {
  .concept-message .concept-message__txt {
    font-size: 16px;
    line-height: 36px;
  }
}
.concept-message .concept-message__txt + .concept-message__txt {
  margin-top: 47px;
}
@media screen and (max-width: 768px) {
  .concept-message .concept-message__txt + .concept-message__txt {
    margin-top: 36px;
  }
}
.concept-message .concept-message__logo {
  margin-top: 100px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .concept-message .concept-message__logo {
    margin-top: 70px;
  }
}
.concept-message .concept-message__logo img {
  display: inline-block;
  width: 321px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .concept-message .concept-message__logo img {
    width: 200px;
  }
}

/* Figma Frame 674 padding 80 0 */
.concept-message--01 {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .concept-message--01 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

/* Figma Frame 749 padding 100 0 */
.concept-message--02 {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .concept-message--02 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

/* Figma Frame 674 padding 100 0 150 0 */
.concept-message--03 {
  padding-top: 100px;
  padding-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .concept-message--03 {
    padding-top: 70px;
    padding-bottom: 100px;
  }
}

/*=======================================
　concept_duo
=======================================*/
/* Figma Clip path group（PC 1440×450／SP 375×150）。SPでも横2分割のまま */
.concept-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.concept-duo .concept-duo__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 720 / 450;
}
@media screen and (max-width: 768px) {
  .concept-duo .concept-duo__item {
    aspect-ratio: 187.5 / 150;
  }
}
.concept-duo .concept-duo__img {
  position: absolute;
  height: auto;
  max-width: none;
}
.concept-duo .concept-duo__item--01 .concept-duo__img {
  width: 267.629%;
  left: -83.786%;
  top: -92.399%;
}
@media screen and (max-width: 768px) {
  .concept-duo .concept-duo__item--01 .concept-duo__img {
    width: 285.395%;
    left: -92.775%;
    top: -66.549%;
  }
}
.concept-duo .concept-duo__item--02 .concept-duo__img {
  width: 243.341%;
  left: -47.704%;
  top: -37.333%;
}
@media screen and (max-width: 768px) {
  .concept-duo .concept-duo__item--02 .concept-duo__img {
    width: 261.609%;
    left: -55.435%;
    top: -22.667%;
  }
}

/*=======================================
　concept_wide
=======================================*/
/* Figma Frame 750 / Frame 753（PC 1440×450／SP 375×150） */
.concept-wide {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1440 / 450;
}
@media screen and (max-width: 768px) {
  .concept-wide {
    aspect-ratio: 375 / 150;
  }
}
.concept-wide .concept-wide__img {
  position: absolute;
  width: 107.917%;
  height: auto;
  left: -3.958%;
  top: -99.176%;
  max-width: none;
}
@media screen and (max-width: 768px) {
  .concept-wide .concept-wide__img {
    width: 110.667%;
    left: -5.333%;
    top: -75.869%;
  }
}