@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* FONTS
--------------------------------------------------*/
.font_ryo_l{
  font-family: ryo-text-plusn, serif;
  font-weight: 300;/* light:300 */
}
.font_dnp_l{
  font-family: dnp-shuei-gothic-kin-std, sans-serif;
  font-weight: 400;/* light:400 */
}
.font_neue_l{
  font-family: neue-haas-unica, sans-serif;
  font-weight: 300;/* light:300 */
}
.font_neue_r{
  font-family: neue-haas-unica, sans-serif;
  font-weight: 400;/* regular:400 */
}
.font_ivy_t{
  font-family: ivymode, sans-serif;
  font-weight: 200;/* thin:200 */
}
.font_ivy_l{
  font-family: ivymode, sans-serif;
  font-weight: 300;/* light:300 */
}


/* BASE STYLE
--------------------------------------------------*/
html {
  font-size: 62.5%;
}

body {
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.75;
  color: #181A1C;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a {
  text-decoration: none;
  color: #181A1C;
}

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

iframe {
  vertical-align: middle;
}

/* CLEAR-FIX */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}


/* モジュール
--------------------------------------------------*/

.font_caslon {
  font-family: adobe-caslon-pro, serif;
  font-weight: 400;
  font-style: normal;
}

.sp {
  display: none;
}

.linkBtn01 {
  margin-top: 45px;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.025em;
}

.linkBtn01 a {
  display: inline-block;
  padding-bottom: 2px;
  color: #877d7b;
  /* border-bottom: 1px solid #877d7b; */
  transition: 0.3s;
  position: relative;
}

.linkBtn01 a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: #877d7b;
  position: absolute;
  left: 0;
  bottom: 0;
}

.linkBtn01.on a::after {
  width: 100%;
  transition: 1s;
  transition-delay: 0.1s;
}

.linkBtn01 a:hover {
  opacity: 0.7;
}

.textBox p+p {
  margin-top: 13px;
}




/* 共通コンテンツ
--------------------------------------------------*/
.header {
  position: relative;
  z-index: 9;
}

.header_logo {
  position: fixed;
  top: 60px;
  left: 60px;
  z-index: 5;
}

.header_logo a {
  width: 121px;
  height: 18px;
  display: block;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

.header_logo svg {
  width: 100%;
  display: block;
}

.header_navBtn {
  width: 20.5px;
  display: block;
  position: fixed;
  top: 60px;
  right: 60px;
  z-index: 10;
  cursor: pointer;
}

.header_navBtn span {
  width: 100%;
  height: 1px;
  display: block;
  background: #383C40;
  transition: 0.3s;
  transition-property: transform;
}

.header_navBtn span+span {
  margin-top: 4px;
}

.header_navBtn.active span:nth-of-type(1) {
  transform: translateY(-6px);
}

.header_navBtn.active span:nth-of-type(2) {
  transform: translateY(-3px);
}

.header_navBtn.active span:nth-of-type(3) {
  transform: translateY(0);
}

.header_navBtn.active span:nth-of-type(4) {
  transform: translateY(3px);
}

.header_navBtn.active span:nth-of-type(5) {
  transform: translateY(6px);
}

.header_vertical .header_logo,
.header_vertical .header_navBtn {
  position: absolute;
}

.gnav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

.gnav.active {
  z-index: 9;
  visibility: visible;
  opacity: 1;
}

.gnav a {
  color: #383C40;
}

.gnav_logo {
  line-height: 1;
}

.gnav_primary,
.gnav_secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gnav_secondary {
  line-height: 1;
}

.gnav_primary a {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.025rem;
  line-height: 1;
}

.header_pos {
  height: 16px;
  font-size: 1.3rem;
  line-height: 1;
  position: fixed;
  bottom: 60px;
  left: 60px;
  z-index: 5;
  overflow: hidden;
}

.header_pos_inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  top: 0;
  transition: 0.3s;
}

.header_pos p {
  height: 16px;
  padding-top: 3px;
  display: inline-block;
}

.header_pos_scroll {
  padding-right: 50px;
  background: url(../image/common/arrow_header_right_b.svg) right top 3px / 40px auto no-repeat;
}

.header_pos_back a {
  display: inline-block;
  padding-left: 50px;
  background: url(../image/common/arrow_header_left_b.svg) left top 1px / 40px auto no-repeat;
}



.header_bar {
  width: 150px;
  height: 2px;
  border-bottom: 1px solid #000;
  position: fixed;
  bottom: 60px;
  right: 60px;
  z-index: 5;
}

.header_bar_pos {
  display: block;
  width: 0;
  height: 2px;
  background: #000;
  transform: translateY(25%);
}

.header_logo a,
.gnav_logo a {
  transition: 0.3s;
}

.header_logo a:hover,
.gnav_logo a:hover {
  opacity: 0.7;
}

.header_logo.white svg,
.header_pos.white svg {
  fill: #fff;
}

.header_navBtn.white span,
.header_bar.white .header_bar_pos {
  background-color: #fff;
}

.header_bar.white {
  border-bottom-color: #fff;
}

.header_pos.white,
.header_pos.white a {
  color: #fff;
}

.header_pos.white .header_pos_scroll {
  background-image: url(../image/common/arrow_header_right_w.svg);
}

.header_pos.white .header_pos_back a {
  background-image: url(../image/common/arrow_header_left_w.svg);
}


/* 横スクロール
--------------------------------------------------*/
body {
  overflow-x: hidden;
  overscroll-behavior: none;
  -ms-overscroll-behavior: none;
  background: #E0E1E2;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

.scrollContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  display: flex;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollContainer::-webkit-scrollbar {
  display: none;
}

.scroll_box {
  width: 1366px;
  padding: 0 60px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
  background: #e6e4e1;
}

.scroll_boxHalf {
  width: 683px;
}

.scroll_box_inner {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.scroll_topBox {
  width: 50vw;
}

.scroll_bg {
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.scroll_bg_large {
  width: calc(100vw + 200px);
}

.scroll_contBox01 {
  width: 676px;
  height: 544px;
  padding-left: 60px;
  position: relative;
}

.scroll_contBox02 {
  width: 570px;
  height: 544px;
  padding: 97px 60px 0 120px;
  position: relative;
}

.scroll_contBox03 {
  width: 623px;
  height: 544px;
  padding: 0 60px;
  position: relative;
}

.scroll_contBox04 {
  width: 571px;
  height: 544px;
  padding: 97px 80px 0;
  position: relative;
}

.scroll_contBox05 {
  width: 690px;
  height: 544px;
  position: relative;
}

.scroll_contBox06 {
  width: 570px;
  height: 544px;
  padding: 130px 80px 0 116px;
  position: relative;
}

.scroll_contBox07 {
  width: 556px;
  height: 544px;
  padding: 130px 80px 0 68px;
  position: relative;
}


.scroll_textBoxMin {
  font-size: 1.3rem;
  letter-spacing: 0.025em;
}

.scroll_textBoxMin .linkBtn01 {
  margin-top: 30px;
}


.scroll_ttl01 {
  color: #fff;
  font-size: 7.2rem;
  line-height: 1;
  letter-spacing: 0.025em;
  position: absolute;
  z-index: 3;
}

.scroll_ttl01_min {
  color: #fff;
  font-size: 5.76rem;
  line-height: 1;
  letter-spacing: 0.025em;
  position: absolute;
  z-index: 3;
}

.scroll_ttl02 {
  font-family: "Yu Mincho Medium", 'YuMincho', "游明朝 Medium", "游明朝体", serif;
  font-size: 2.75rem;
  line-height: 1.75;
  letter-spacing: 0.025em;
  margin: 10px 0 34px;
}

.scroll_ttl02_min {
  font-family: "Yu Mincho Medium", 'YuMincho', "游明朝 Medium", "游明朝体", serif;
  font-size: 2.1rem;
  line-height: 1.4;
  letter-spacing: 0.025em;
  margin: 7px 0 30px;
}

.scroll_ttl03 {
  font-family: "Yu Mincho Medium", 'YuMincho', "游明朝 Medium", "游明朝体", serif;
  font-size: 1.75rem;
  line-height: 1.4;
  letter-spacing: 0.025em;
  margin-bottom: 30px;
}

.scroll_subTtl {
  color: #877d7b;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0em;
}

.scroll_image {
  position: absolute;
  z-index: 1;
}


/* 横スクロール 下層ページ共通 */

.inpage_topBox {
  /* width: 67vw; */
  width: 911px;
  min-width: 0;
}

.inpage_lastBox {
  width: 591px;
  padding-right: 0;
  padding-left: 70px;
}

.inpage_topBox_inner {
  width: 100%;
  padding-top: 130px;
  padding-left: 30px;
  display: flex;
  justify-content: center;
  margin-top: 0;
  position: static;
}

 /*2020.06.17*/
.inpage_textBox {
  width: 405px;
}

p sup {
  vertical-align: text-bottom;
  font-size: 1rem;
}

.s-test{
  font-size: 1rem;
  margin-top: 1rem;
}

.inpage_topBox_ttl {
  color: #fff;
  font-size: 7.8rem;
  line-height: 1;
  letter-spacing: 0.025em;
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 17.3%;
  transform: translateX(47%);
}

.inp_ttl02_min {
  margin-bottom: 30px;
}

/* 下層ページ共通 */
.inp02_wrap {
  width: 100%;
  max-width: 1366px;
  padding: 145px 60px 0;
}

.inp02_enTtl {
  color: #fff;
  font-size: 7.2rem;
  line-height: 1;
  letter-spacing: 0.025em;
  padding-right: 60px;
  text-align: right;
}

.inp02_subTtl {
  color: #877d7b;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0em;
}

.inp02_ttl {
  font-family: "Yu Mincho Medium", 'YuMincho', "游明朝 Medium", "游明朝体", serif;
  font-size: 2.1rem;
  line-height: 1.4;
  letter-spacing: 0.025em;
  margin: 7px 0 21px;
}

.inp02_ttl_1 {
  margin: 7px 0 21px -2px;
}

.inp02_ttl_2 {
  margin: 7px 0 21px -2.5px;
}

.inp02_topmb01 {
  margin-bottom: 125px;
}

.inp02_topmb02 {
  margin-bottom: 130px;
}

.inp02_container {
  width: 100%;
  max-width: 830px;
}




.scrollContainer .footer {
  display: none;
}


.footer {
  display: flex;
  justify-content: space-between;
  padding: 170px 60px 60px;
}

.footer_pos {
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.025em;
}

.footer_pos span {
  letter-spacing: 0;
  margin-right: 10px;
}

.footer_topto {
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.025em;
}

.footer_topto img {
  margin-left: 10px;
}


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

  /* モジュール 1024以下
--------------------------------------------------*/
  .sp {
    display: block;
  }

  .linkBtn01 a::after {
    width: 100%;
  }

  .textBox p+p {
    margin-top: 13px;
  }



  /* 共通コンテンツ 1024以下
--------------------------------------------------*/
  .header {
    display: flex;
    justify-content: space-between;
  }

  .header_vertical {
    padding-top: 46px;
  }

  .header_pos,
  .header_bar {
    display: none;
  }

  .header_logo {
    display: none;
  }

  .header_navBtn {
    top: 30px;
    left: 8%;
  }

  .header_vertical .header_logo,
  .header_vertical .header_navBtn {
    position: fixed;
  }

  .gnav {
    padding: 30px 0 35px;
    overflow-y: scroll;
    display: block;
  }

  .gnav_logo {
    margin-left: 8%;
  }

  .gnav_primary {
    position: absolute;
    right: 0;
    max-width: 300px;
  }

  .gnav_primary li {
    margin: 0;
  }

  .gnav_primary a {
    display: block;
    font-size: 1rem;
    text-align: left;
  }

  .gnav_secondary {
    margin-top: 92px;
  }

  .gnav_secondary a {
    font-size: 1.5rem;
  }

  .gnav_secondary li+li::before {
    font-size: 1.5rem;
    margin: 0 14px;
  }

  .gnav_copyright {
    margin-top: 25px;
  }

  /* 横スクロール 1024以下
--------------------------------------------------*/
  body {
    overflow-x: auto;
    overscroll-behavior: auto;
    background-color: #fff;
  }

  .scrollContainer {
    width: 100%;
    position: static;
    height: auto;
    display: block;
  }

  .scroll_box {
    width: 100%;
    padding-left: 8%;
    padding-right: 8%;
  }

  .scroll_box br {
    display: none;
  }

  .scroll_box .sp {
    display: block;
  }

  .scroll_box img {
    width: 100%;
  }

  .scroll_boxHalf {
    display: block;
    width: 100%;
    padding-top: 0;
  }

  .scroll_box_inner {
    display: block;
    height: auto;
    margin-top: 0;
  }

  .scroll_box_inner_reverse {
    display: flex;
    flex-direction: column-reverse;
  }

  .scroll_topBox {
    width: 100%;
  }

  .scroll_contSpBox {
    position: relative;
  }

  .scroll_bg {
    width: 100%;
    height: auto;
    background-attachment: scroll;
    position: relative;
  }

  .scroll_image {
    position: static;
  }

  .scroll_contBox01,
  .scroll_contBox02,
  .scroll_contBox03,
  .scroll_contBox04,
  .scroll_contBox05,
  .scroll_contBox06,
  .scroll_contBox07 {
    width: 100%;
    height: auto;
    padding: 0;
  }

  .scroll_contBox08 {
    position: relative;
  }

  .scroll_textBoxMin {
    font-size: 1.4rem;
  }

  .scroll_ttl01 {
    font-size: 10.65vw;
  }

  .scroll_ttl01_min {
    font-size: 9.6vw;
  }

  .scroll_ttl01_spMin {
    font-size: 8.6vw;
    line-height: 1.2;
  }

  .scroll_ttl02 {
    font-size: 2.25rem;
    line-height: 1.75;
    margin-top: 4px;
    margin-bottom: 30px;
  }

  .scroll_ttl02_min {
    margin-top: 10px;
    margin-bottom: 28px;
  }

  .scroll_ttl03 {
    font-size: 1.95rem;
    line-height: 1.5;
  }

  .scroll_spMt01 {
    margin-top: 85px;
  }

  .scroll_spMt02 {
    margin-top: 70px;
  }

  .scroll_spMt03 {
    margin-top: 55px;
  }

  .scroll_spMt04 {
    margin-top: 80px;
  }


  /* 横スクロール 下層ページ共通 1024以下 */
  .inpage_topBox_inner {
    height: auto;
    padding-left: 0;
    padding-top: 76px;
    margin-bottom: 75px;
  }

  .inpage_textBox {
    width: 100%;
  }

  .inpage_topBox_ttl {
    position: static;
    transform: translateX(0);
    text-align: right;
    font-size: 4rem;
    margin-bottom: 60px;
  }

  .inpage_lastBox {
    padding-bottom: 75px;
  }

  /* 下層ページ共通 1024以下 */

  .inp02_wrap {
    padding: 60px 8% 0;
  }

  .inp02_enTtl {
    font-size: 4rem;
    letter-spacing: 0.02em;
    margin-bottom: 52px;
    padding-right: 0;
  }

  .inp02_ttl {
    font-size: 2.4rem;
    margin-top: 10px;
    margin-bottom: 28px;
  }


  .inp02_topmb01 {
    margin-bottom: 75px;
  }

  .inp02_topmb02 {
    margin-bottom: 80px;
  }


  .scrollContainer .footer {
    display: flex;
  }

  .footer {
    padding: 148px 8% 30px;
  }

  .scroll_bg_footer {
    width: 100%;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .scroll_bg_footer a {
    color: #fff;
  }








}


@media screen and (min-width:835px) {
  .header_navBtn{
    display: none;
  }
  .gnav{
    padding: 16px 0 0 0;
    height: 90px;
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }
  .gnav_primary{
    position: absolute;
    right: 0;
    width: 510px;
  }
  .gnav_primary li:nth-of-type(3n+1){
    width: 180px;
  }
  .gnav_primary li:nth-child(3n-1){
    width: 225px;
  }
  .gnav_primary li:nth-of-type(3n){
    width: 105px;
  }  
  .scroll_bg img {
    height: 100%;
    width: auto;
    max-width: unset;
  }
}

@media screen and (max-width:1024px) {
  .gnav{
    visibility: unset;
    padding: 18px 0 0 0;
    opacity: 0;
    z-index: 1;
    transition: all 0.4s;
    pointer-events: none;
  }
  .gnav.active{
    pointer-events: auto;
  }
  .gnav_primary{
    position: absolute;
    right: 0;
    max-width: 270px;
  }
  .gnav_primary li {
    padding: 5px 0;
  }
  .gnav_primary li:nth-of-type(3n+1){
    width: 77px;
  }
  .gnav_primary li:nth-child(3n-1){
    width: 112px;
  }
  .gnav_primary li:nth-of-type(3n){
    width: 47px;
  }
}