/* ---------------------------------------------------
	common
------------------------------------------------------ */
#pagetit::after {
  background: url(../img/concept/pagetit_bg.png) center;
  background-size: cover;
}

.concept_tit {
  position: relative;
}
.concept_tit .en_tit {
  width: 378px;
  margin-bottom: 0;
  font-size: 4.5rem;
  line-height: 1.9;
  letter-spacing: 0.4em;
  text-align: left;
}
.concept_tit .tit_lead {
  position: absolute;
  left: 0;
  top: 50%;
  right: 0;
  width: 170px;
  margin: 0 auto;
  letter-spacing: 0.3em;
  text-align: center;
  transform: translateY(-50%);
}
.concept_tit .tit_txt {
  width: 410px;
}

.concept_lead {
  margin-top: 8px;
}
.concept_lead .lead_txt {
  width: calc(50% - 80px);
  padding: 32px 80px 0;
  letter-spacing: 0.18em;
}
.concept_lead .lead_txt .txt_container {
  max-width: 380px;
  margin-left: auto;
}
.concept_lead .lead_txt .kerning {
  letter-spacing: -8px;
}
.concept_lead .lead_img {
  width: calc(50% + 80px);
}
.concept_lead .lead_img img {
  width: 100%;
}

@media screen and (max-width: 810px) {
  .concept_tit .en_tit {
    width: 100%;
    margin-bottom: 0;
    font-size: 3rem;
    line-height: 1.9;
    letter-spacing: 0.4em;
    text-align: center;
  }
  .concept_tit .tit_lead {
    position: static;
    width: 100%;
    margin: 32px auto 40px;
    letter-spacing: 0.3em;
    transform: unset;
  }
  .concept_tit .tit_txt {
    width: 100%;
    text-align: center;
  }
  .concept_lead {
    margin-top: 48px;
  }
  .concept_lead .lead_txt {
    width: 100%;
    margin: 0 auto;
    padding: 48px 0 0;
    letter-spacing: 0.18em;
  }
  .concept_lead .lead_txt .txt_container {
    max-width: calc(100% - 40px);
    margin: 0 auto;
  }
  .concept_lead .lead_txt .kerning {
    letter-spacing: -4px;
  }
  .concept_lead .lead_img {
    width: 100%;
    order: -10;
  }
  .concept_lead .lead_img img {
    width: 100%;
  }
}
/* ---------------------------------------------------
		page_nav_wrap
------------------------------------------------------ */
.page_nav_wrap {
  margin-top: 72px;
  padding: 192px 0 160px;
  background: url(../img/common/bg_nami.png) no-repeat center top 200px;
}
@media screen and (min-width: 2001px) {
  .page_nav_wrap {
    background-size: 100%;
  }
}

@media screen and (max-width: 810px) {
  .page_nav_wrap {
    margin-top: 0;
    padding: 72px 0 72px;
    background: url(../img/common/bg_nami.png) no-repeat center top 100px;
    background-size: 1000px;
  }
}
/* ---------------------------------------------------
		ocean
------------------------------------------------------ */
#ocean {
  padding: 192px 0 160px;
}
#ocean .ocean_col {
  width: 90%;
  margin: 48px auto 0;
}
#ocean .ocean_col .col_img {
  width: 23.2%;
}
#ocean .ocean_col .col_img img {
  width: 100%;
}

@media screen and (max-width: 810px) {
  #ocean {
    padding: 72px 0 72px;
  }
  #ocean .ocean_col {
    width: 90%;
    margin: 48px auto 0;
  }
  #ocean .ocean_col .col_img {
    width: 23.2%;
  }
  #ocean .ocean_col .col_img img {
    width: 100%;
  }
}
/* ---------------------------------------------------
		sky
------------------------------------------------------ */
#sky {
  padding: 192px 0 160px;
}
#sky .sky_bg {
  height: 490px;
  margin-top: 48px;
  background: url(../img/concept/sky_img_02.jpg) no-repeat center;
  background-size: cover;
}
#sky .sky_bg img {
  width: 100%;
}

@media screen and (max-width: 810px) {
  #sky {
    padding: 72px 0 72px;
  }
  #sky .sky_bg {
    margin-top: 56px;
    height: 56.333vw;
    background: url(../img/concept/sky_img_02.jpg) no-repeat center;
    background-size: cover;
  }
}
/* ---------------------------------------------------
		sanctuary
------------------------------------------------------ */
#sanctuary {
  position: relative;
  padding: 192px 0 160px;
  background: url(../img/concept/sanctuary_bg_01.png) no-repeat center top 340px;
}
@media screen and (min-width: 2001px) {
  #sanctuary {
    background-size: 100%;
  }
}
#sanctuary .concept_lead {
  margin-bottom: 500px;
}
#sanctuary .sanctuary_col {
  margin-top: 32px;
}
#sanctuary .sanctuary_col .col_img {
  width: calc(50% + 60px);
}
#sanctuary .sanctuary_col .col_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: calc(50% - 100px);
  padding-bottom: 28px;
  padding-right: 24px;
  border-bottom: 1px solid #fff;
}
#sanctuary .sanctuary_col .col_txt .txt_tit {
  margin-bottom: 48px;
  letter-spacing: 0.3em;
  text-align: center;
}
#sanctuary .sanctuary_col .col_txt .txt_btn {
  margin-top: 40px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: right;
}
#sanctuary .sanctuary_col .col_txt .txt_btn a {
  position: relative;
  display: inline-block;
  padding-right: 30px;
  line-height: 1.5;
}
#sanctuary .sanctuary_col .col_txt .txt_btn a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: inline-block;
  background: url(../img/common/icon_arrow_02_blue.svg) no-repeat;
  background-size: 100%;
  width: 18px;
  height: 9px;
  margin-top: -5px;
}

@media screen and (max-width: 810px) {
  #sanctuary {
    padding: 72px 0 72px;
    background: url(../img/concept/sanctuary_bg_01.png) no-repeat center top 640px;
    background-size: 810px;
  }
  #sanctuary .concept_lead {
    margin-bottom: 300px;
  }
  #sanctuary .sanctuary_col {
    margin-top: 32px;
  }
  #sanctuary .sanctuary_col .col_img {
    width: 100%;
  }
  #sanctuary .sanctuary_col .col_txt {
    display: block;
    width: 100%;
    padding: 32px 16px 32px;
  }
  #sanctuary .sanctuary_col .col_txt .txt_tit {
    margin-bottom: 32px;
    letter-spacing: 0.3em;
  }
  #sanctuary .sanctuary_col .col_txt .txt_btn {
    margin-top: 32px;
  }
}
/* ---------------------------------------------------
		another
------------------------------------------------------ */
#another {
  padding: 192px 0 192px;
  background: url(../img/concept/another_bg_01.png) no-repeat left 50vw top 608px, url(../img/concept/another_bg_02.png) no-repeat left calc(50vw - 1000px) bottom;
}
#another .another_img01 {
  margin-top: 48px;
}
#another .another_img01 img {
  max-width: 80%;
}
#another .another_img02 {
  margin-top: 48px;
  text-align: right;
}
#another .another_img02 img {
  max-width: 80%;
}

@media screen and (max-width: 810px) {
  #another {
    padding: 72px 0 96px;
    background: url(../img/concept/another_bg_01.png) no-repeat left 50vw top 608px, url(../img/concept/another_bg_02.png) no-repeat left calc(50vw - 1000px) bottom;
  }
  #another .another_img01 {
    margin-top: 48px;
  }
  #another .another_img01 img {
    max-width: 80%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: right;
  }
  #another .another_img02 {
    margin-top: 48px;
  }
  #another .another_img02 img {
    max-width: 80%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: left;
  }
}