@charset "UTF-8";
.dm{}

/* ====================
	common
==================== */
@media (max-width: 768px) {
  
  #wrapper {
    position: relative;
    max-width: 768px;
    min-width: 320px;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch
  }
  
	.view-pc,
	.brPc {
		display: none !important;
	}
	.brSp {
		display: block;
		font-size: 1px;
	}
  
}
@media (min-width: 769px) {
  
  body {
    overflow-y: hidden;
  }
  
	.brPc {
		display: block;
		font-size: 1px;
	}
	.view-sp,
	.brSp {
		display: none !important;
	}
  
}

.contents-header {
  display: none;
}


/* ====================
 loading
==================== */

/* ローディング画面背景 */
.loader-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #667F73;
}

/* ローディングアニメーション */
.loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border: 3px solid #F00;
}
.loader::after {
  content: "";
  position: absolute;
  border: 3px solid #0F0;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
}
.loader::before {
  content: "";
  position: absolute;
  border: 3px solid #00F;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
}

.loader {
  border: 3px solid transparent;
  border-top-color: #F0E6D4;
  border-bottom-color: #F0E6D4;
  border-radius: 50%;
  -webkit-animation: loader 2s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
}

.loader::before {
  border: 3px solid transparent;
  border-top-color: #D0B5A1;
  border-bottom-color: #D0B5A1;
  border-radius: 50%;
  -webkit-animation: loader 3s linear infinite;
    -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 3s linear infinite;
}

.loader::after {
  border: 3px solid transparent;
  border-top-color: #EFEBE4;
  border-bottom-color: #EFEBE4;
  border-radius: 50%;
  -webkit-animation: loader 1.5s linear infinite;
  animation: loader 1.5s linear infinite;
    -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
}

@-webkit-keyframes loaders {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* スクロールダウン */
@media (max-width: 768px) {
  
  .scrollDown {
    display: none;
  }
  
}
@media (min-width: 769px) {
  
  .scrollDown {
    position: absolute;
    top: 50%;
    right: 5vh;
    transform: translateY(-50%);
    z-index: 10;
  }
  .scrollDown::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1vh;
    margin: auto;
    width: 2vh;
    height: 1px;
    background: #eee;
    animation: pathmove 1.4s ease-in-out infinite;
    opacity:0;
  }
  @keyframes pathmove{
    0%{
      width: 0;
      left: 1vh;
      opacity: 0;
    }
    30%{
      width: 3vh;
      opacity: 1;
    }
    100%{
      width: 0;
      left: 6vh;
      opacity: 0;
    }
  }
  
}


/* ====================
	header
==================== */


/* ====================
	main
==================== */
@media (max-width: 768px) {
  
  .contents-main {
    background-color: #EFEBE4;
  }
  .contents-main > section {
    display: block;
  }

}
@media (min-width: 769px) {
  
  body {
    overflow-y: hidden;
  }
  .contents-main {
    /*! width: max-content; */
    background-color: #EFEBE4;
    letter-spacing: -.4em;
  }
  .contents-main > section {
    display: block;
  }
  
}


/* ====================
	footer
==================== */
@media (max-width: 768px) {
  
  footer {
    position: relative;
    padding: 3vw 0;
    text-align: center;
  }
  footer .copyright small {
    font-size: 1.4vw;
    color: #ACA7A0;
  }
  
}
@media (min-width: 769px) {
  
  footer {
    position: fixed;
    bottom: 2vh;
    left: 2vh;
    z-index: 100;
  }
  footer .copyright small {
    font-size: 1vh;
    color: #ACA7A0;
  }
  
}


/* ====================
	section common
==================== */
@media (max-width: 768px) {
  
}
@media (min-width: 769px) {

  [data-scroll-direction=horizontal] [data-scroll-section] {
    overflow: hidden;
    /*! width: max-content; */
    height: 100vh;
    letter-spacing: normal;
  }
  
}

/* --------------------
	section1
-------------------- */
@media (max-width: 768px) {
  
  #section1 {
    position: relative;
    padding: 12vw 0;
    display: flex;
    flex-flow: column;
    background-color: #EFEBE4;
    overflow: hidden;
    -webkit-overflow-scrolling: touch
  }
  
  #section1 .sc01-logo-wrap {
    margin: 0 auto 12vw;
    width: 48%;
    order: 1;
  }
  
  #section1 .sc03-header h1 {
    margin-bottom: 4vh;
  }
  #section1 .sc01-logo-wrap h1 img {
    width: 100%;
    filter: invert(64%) sepia(6%) saturate(897%) hue-rotate(100deg) brightness(85%) contrast(81%);
  }

  #section1 .sc01-news-wrap {
    margin: 0 auto 12vw;
    order: 2;
  }
  #section1 .sc01-news-wrap dt {
    font-size: 2vw;
    text-align: center;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
    margin-bottom: 1vh;
  }
  #section1 .sc01-news-wrap dd {
    font-size: 2.6vw;
    text-align: center;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
  }

  #section1 .sc01-read-wrap {
    order: 4;
    text-align: center;
  }
  #section1 .sc01-read-wrap > .inner {
    display: inline-block;
    margin: 0 0 0 4vw;
  }
  #section1 .sc01-read-wrap p {
    text-align: left;
    display: inline-block;
  }
  #section1 .sc01-read-wrap p span {
    font-size: 8.2vw;
    color: #FFF;
    line-height: 1.4;
    letter-spacing: 0.36em;
  }
  #section1 .sc01-read-wrap p span.onColor {
    font-size: 8.2vw;
    color: #667F73;
  }


  /* テキストアニメーション */
  #section1 .sc01-read-wrap p span {
    display: inline-block;
    opacity: 0;
    transform: translateY(1.1em) translateX(0.55em) scale(5);
    transition-property: all;
    transition-duration: 0.78s;
    transition-timing-function: ease;
    will-change: transform;
  }

  #section1 .sc01-read-wrap p span:nth-child(1) {
    transition-delay: 0s;
  }
  #section1 .sc01-read-wrap p span:nth-child(2) {
    transition-delay: 0.06s;
  }
  #section1 .sc01-read-wrap p span:nth-child(3) {
    transition-delay: 0.12s;
  }
  #section1 .sc01-read-wrap p span:nth-child(4) {
    transition-delay: 0.18s;
  }
  #section1 .sc01-read-wrap p span:nth-child(5) {
    transition-delay: 0.24s;
  }
  #section1 .sc01-read-wrap p span:nth-child(6) {
    transition-delay: 0.3s;
  }
  #section1 .sc01-read-wrap p span:nth-child(7) {
    transition-delay: 0.36s;
  }
  #section1 .sc01-read-wrap p span:nth-child(8) {
    transition-delay: 0.42s;
  }
  #section1 .sc01-read-wrap p span:nth-child(9) {
    transition-delay: 0.48;
  }
  #section1 .sc01-read-wrap p span:nth-child(10) {
    transition-delay: 0.54s;
  }
  #section1 .sc01-read-wrap p span:nth-child(11) {
    transition-delay: 0.6s;
  }
  #section1 .sc01-read-wrap p span:nth-child(12) {
    transition-delay: 0.66s;
  }
  #section1 .sc01-read-wrap p span:nth-child(13) {
    transition-delay: 0.72s;
  }
  #section1 .sc01-read-wrap p span:nth-child(14) {
    transition-delay: 0.78s;
  }

  body.loadOn #section1 .sc01-read-wrap p span {
    opacity: 1;
    transform: translateY(0em) translateX(0em) scale(1);
  }


  #section1 .sc01-bs-wrap {
    display: none;
  }

  #section1 .sc01-ph01 {
    position: relative;
    margin: -20vw auto 30vw;
    width: 100%;
    overflow: hidden;
    order: 3;
  }
  #section1 .sc01-ph01 figure {
    padding-top: 77.9%;
  }
  #section1 .sc01-ph01 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }

}
@media (min-width: 769px) {
  
  #section1 {
    width: 100vw;
    background-color: #EFEBE4;
  }
  
  #section1::after {
    content: '';
    display: block;
    background: #667f73;
    position: absolute;
    right: 0;
    top: 0;
    width: 12vh;
    height: 100vh;
  }
  #section1 > div {
    display: inline-block;
  }

  #section1 .sc01-logo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 12vh 0 0 13.2vh;
    width: auto;
    height: 100vh;
    z-index: 10;
  }
  #section1 .sc03-header h1 {
    margin-bottom: 4vh;
  }
  #section1 .sc01-logo-wrap h1 img {
    height: 11.11vh;
  }

  #section1 .sc01-news-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 56vh 0 0 13.2vh;
    width: auto;
    height: 100vh;
    z-index: 10;
  }
  #section1 .sc01-news-wrap dt {
    font-size: 1.6vh;
    letter-spacing: 0.2em;
    margin-bottom: 1vh;
  }
  #section1 .sc01-news-wrap dd {
    font-size: 2vh;
    letter-spacing: 0.2em;
  }

  #section1 .sc01-read-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 64vh 0 0 13.2vh;
    width: auto;
    height: 100vh;
    z-index: 10;
  }
  #section1 .sc01-read-wrap p span {
    font-size: 8.2vh;
    color: #FFF;
    line-height: 1.4;
    letter-spacing: 0.42em;
  }
  #section1 .sc01-read-wrap p span.onColor {
    font-size: 8.2vh;
    color: #667F73;
  }


  /* テキストアニメーション */
  #section1 .sc01-read-wrap p span {
    display: inline-block;
    opacity: 0;
    transform: translateY(1.1em) translateX(0.55em) scale(5);
    transition-property: all;
    transition-duration: 0.78s;
    transition-timing-function: ease;
    will-change: transform;
  }

  #section1 .sc01-read-wrap p span:nth-child(1) {
    transition-delay: 0s;
  }
  #section1 .sc01-read-wrap p span:nth-child(2) {
    transition-delay: 0.06s;
  }
  #section1 .sc01-read-wrap p span:nth-child(3) {
    transition-delay: 0.12s;
  }
  #section1 .sc01-read-wrap p span:nth-child(4) {
    transition-delay: 0.18s;
  }
  #section1 .sc01-read-wrap p span:nth-child(5) {
    transition-delay: 0.24s;
  }
  #section1 .sc01-read-wrap p span:nth-child(6) {
    transition-delay: 0.3s;
  }
  #section1 .sc01-read-wrap p span:nth-child(7) {
    transition-delay: 0.36s;
  }
  #section1 .sc01-read-wrap p span:nth-child(8) {
    transition-delay: 0.42s;
  }
  #section1 .sc01-read-wrap p span:nth-child(9) {
    transition-delay: 0.48;
  }
  #section1 .sc01-read-wrap p span:nth-child(10) {
    transition-delay: 0.54s;
  }
  #section1 .sc01-read-wrap p span:nth-child(11) {
    transition-delay: 0.6s;
  }
  #section1 .sc01-read-wrap p span:nth-child(12) {
    transition-delay: 0.66s;
  }
  #section1 .sc01-read-wrap p span:nth-child(13) {
    transition-delay: 0.72s;
  }
  #section1 .sc01-read-wrap p span:nth-child(14) {
    transition-delay: 0.78s;
  }

  body.loadOn #section1 .sc01-read-wrap p span {
    opacity: 1;
    transform: translateY(0em) translateX(0em) scale(1);
  }


  #section1 .sc01-bs-wrap {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12vh 8.8vh 0 0;
    width: auto;
    height: 100vh;
    z-index: 10;
  }
  #section1 .sc01-bs-wrap img {
    height: 10.7vh;
  }

  #section1 .sc01-ph01 {
    position: absolute;
    right: 0;
    padding-right: 12vh;
    width: 78.9vw;
    height: 100vh;
  }
  #section1 .sc01-ph01 img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100vh;
  }
  
}


/* --------------------
	section2
-------------------- */
@media (max-width: 768px) {
  
  #section2 {
    position: relative;
    width: 100%;
    padding-top: 105%;
    background-color: #667F73;
    overflow: hidden;
  }

  #section2 .sc02-read-wrap {
    position: absolute;
    width: 100%;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
  }
  #section2 .sc02-read-wrap > .inner {
    width: 100%;
  }
  #section2 .sc02-read-wrap h1 {
    margin-bottom: 3vw;
    text-align: center;
    line-height: 1;
  }
  #section2 .sc02-read-wrap h1 img {
    height: 4.8vw; 
  }
  #section2 .sc02-read-wrap p.catch {
    font-size: 3.8vw;
    color: #EFEBE4;
    text-align: center;
    letter-spacing: 0.26em;
    margin-left: 0.26em;
    line-height: 1;
    margin-bottom: 6vw;
  }
  #section2 .sc02-read-wrap p.read {
    font-size: 2.6vw;
    color: #EFEBE4;
    text-align: center;
    letter-spacing: 0.05em;
    margin-left: 0.05em;
    line-height: 2.4;
  }

  #section2 .sc02-ph01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
  #section2 .sc02-ph01 figure {
    position: relative;
    width: 100%;
    height: 100%;
  }
  #section2 .sc02-ph01 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }

  #section2 .sc02-rtext {
    display: none;
  }
  #section2 .bg {
    display: none;
  }
  
}
@media (min-width: 769px) {
  
  #section2 {
    background-color: #667F73;
    overflow: visible;
  }

  #section2 .sc02-read-wrap {
    position: absolute;
    top: 50%;
    left: 38%;
    transform: translate(-50%,-50%);
    z-index: 10;
  }
  #section2 .sc02-read-wrap h1 {
    margin-bottom: 2.4vh;
    line-height: 1;
  }
  #section2 .sc02-read-wrap h1 img {
    height: 4.2vh; 
  }
  #section2 .sc02-read-wrap p.catch {
    font-size: 2.4vh;
    color: #EFEBE4;
    text-align: center;
    letter-spacing: 0.26em;
    margin-left: -0.26em;
    line-height: 1;
    margin-bottom: 3vh;
  }
  #section2 .sc02-read-wrap p.read {
    font-size: 1.6vh;
    color: #EFEBE4;
    text-align: center;
    letter-spacing: 0.2em;
    margin-left: -0.2em;
    line-height: 2.6;
  }

  #section2 .sc02-ph01 {
    position: relative;
    padding-right: 12vh;
    z-index: 2;
  }
  #section2 .sc02-ph01 figure {
    width: 166.1vh;
  }
  #section2 .sc02-ph01 img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100vh;
  }

  #section2 .sc02-rtext {
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 20vh;
    padding-right: 5vh;
  }
  #section2 .sc02-rtext figure {
    will-change: transform;
  }
  #section2 .sc02-rtext figure img {
    width: 4vh;
  }

  #section2 .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
  }
  #section2 .bg span {
    display: block;
    width: 100%;
    height: 100vh;
    background-color: #667F73;
  }
  
}


/* --------------------
	section3
-------------------- */
@media (max-width: 768px) {
  
  #section3 {
    position: relative;
    padding: 0 0 22vw;
    background-color: #D0B5A1;
  }

  #section3 .sc03-header {
    position: relative;
    margin-bottom: 8vw;
    width: auto;
    padding-top: 144%;
    background-image: url(../images/sc03_ph01sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #section3 .sc03-header h1 {
    position: absolute;
    top: 10vw;
    left: 6vw;
  }
  #section3 .sc03-header h1 img {
    height: 22.9vw;
  }
  #section3 .sc03-header .jsBorder {
    position: absolute;
    width: 66vw;
    top: 40vw;
    left: 6vw;
    margin: 0;
    transform: scale(1);
  }
  #section3 .sc03-header .scNo {
    position: absolute;
    top: 46vw;
    left: 6vw;
  }
  #section3 .sc03-header .scNo img {
    height: 3.6vw;
  }

  #section3 .sc03-text-wrap {
    z-index: 10;
  }
  #section3 .sc03-text-wrap > .inner {
    width: 75%;
    margin: auto;
  }
  #section3 .sc03-text-wrap > .inner .sc03-text h2 {
    text-align: center;
    line-height: 1;
    margin-bottom: 3vw;
  }
  #section3 .sc03-text-wrap > .inner .sc03-text h2 img {
    height: 3.2vw;
  }
  #section3 .sc03-text-wrap > .inner .sc03-text p.catch {
    font-size: 3.8vw;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
    margin-bottom: 5vw;
  }
  #section3 .sc03-text-wrap > .inner .sc03-text p.read {
    font-size: 2.6vw;
    white-space: normal;
    letter-spacing: 0.1em;
    text-align: justify;
    line-height: 1.8;
  }
  #section3 .sc03-text-wrap > .inner .sc03-ph04 {
    display: none;
  }

  #section3 .sc03-ph-wrap {
    position: relative;
    width: 75.4%;
    margin: auto;
    padding-top: 68.8%;
  }

  #section3 .sc03-ph-wrap .sc03-ph01 {
    display: none;
  }
  #section3 .sc03-ph-wrap .sc03-ph02 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }
  #section3 .sc03-ph-wrap .sc03-ph03 {
    position: absolute;
    top: 0;
    right: 0;
    width: 32.1%;
    z-index: 2;
  }
  
}
@media (min-width: 769px) {
  
  #section3 {
    background-color: #D0B5A1;
  }
  #section3 > div {
    display: inline-block;
  }

  #section3 .sc03-header {
    position: absolute;
    top: 0;
    left: 0;
    padding: 56.4vh 0 0 10vh;
    width: auto;
    height: 100vh;
    z-index: 20;
  }
  #section3 .sc03-header h1 {
    /*! margin-bottom: 4vh; */
  }
  #section3 .sc03-header h1 img {
    height: 15.9vh;
  }
  #section3 .sc03-header .scNo img {
    height: 2vh;
  }

  #section3 .sc03-text-wrap {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 10;
  }
  #section3 .sc03-text-wrap > .inner {
    position: absolute;
    right: 0;
    bottom: 8%;
    width: 78vh;
    height: 36vh;
  }
  #section3 .sc03-text-wrap > .inner .sc03-text h2 {
    line-height: 1;
    margin-bottom: 2vh;
  }
  #section3 .sc03-text-wrap > .inner .sc03-text h2 img {
    height: 1.8vh;
  }
  #section3 .sc03-text-wrap > .inner .sc03-text p.catch {
    font-size: 1.8vh;
    letter-spacing: 0.2em;
    margin-bottom: 3vh;
  }
  #section3 .sc03-text-wrap > .inner .sc03-text p.read {
    font-size: 1.4vh;
    width: 31vh;
    letter-spacing: 0.01em;
    white-space: normal;
    text-align: justify;
    font-feature-settings: 'pkna' 1;
    line-height: 1.8;
    margin-top: -0.72vh;
  }
  @media screen and (-webkit-min-device-pixel-ratio:0){
    body.miniHeight #section3 .sc03-text-wrap > .inner .sc03-text p.read {
      transform: scale(0.7);
      transform-origin: top left;
      width: calc( 100vh * 0.45);
    }
  }
  #section3 .sc03-text-wrap > .inner .sc03-ph04 {
    width: 41.67vh;
    height: 27vh;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
  #section3 .sc03-text-wrap > .inner .sc03-ph04 figure {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  #section3 .sc03-text-wrap > .inner .sc03-ph04 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    max-width: none;
    height: 100%;
  }

  #section3 .sc03-ph-wrap {
    position: relative;
    margin-left: 14vh;
    margin-right: 76vh;
    height: 100vh;
    z-index: 5;
  }

  #section3 .sc03-ph-wrap .sc03-ph01 {
    position: relative;
    width: 93vh;
    height:100vh;
    z-index: 1;
  }
  #section3 .sc03-ph-wrap .sc03-ph01 figure {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  #section3 .sc03-ph-wrap .sc03-ph01 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    max-width: none;
    height: 100%;
  }
  #section3 .sc03-ph-wrap .sc03-ph02 {
    width: 63vh;
    height: 42vh;
    position: absolute;
    top: 11%;
    right: -45%;
    z-index: 2;
    background-color: #d0b5a1;
  }
  #section3 .sc03-ph-wrap .sc03-ph02 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    max-width: none;
    height: 100%;
    padding: 1vh;
  }
  #section3 .sc03-ph-wrap .sc03-ph03 {
    width: 24.3vh;
    height: 34.197vh;
    position: absolute;
    top: 0;
    right: -62%;
    z-index: 3;
  }
  #section3 .sc03-ph-wrap .sc03-ph03 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    max-width: none;
    height: 100%;
  }
  
}


/* --------------------
	section4
-------------------- */
@media (max-width: 768px) {
  
  #section4 {
    position: relative;
    padding: 8vw 0 8vw 0;
    background-color: #667F73;
  }

  #section4 .sc04-header {
    position: relative;
  }
  #section4 .sc04-header h1 {
    display: none;
  }
  #section4 .sc04-header .jsBorder,
  #section4 .sc04-header .jsBorderY {
    display: none;
  }
  #section4 .sc04-header .scNo {
    position: relative;
  }
  #section4 .sc04-header .scNo::after {
    display: block;
    content: '';
    position: absolute;
    bottom: -20vw;
    left: 9.5vw;
    width: 1px;
    height: 17vw;
    background: #efebe4;
  }
  #section4 .sc04-header .scNo img {
    padding-left: 4vw;
    height: 3.6vw;
  }

  #section4 .sc04-text-wrap {
    position: relative;
    padding-top: 66vw;
    width: 100%;
  }
  #section4 .sc04-text-wrap > .inner {
    width: 100%;
  }
  #section4 .sc04-text-wrap > .inner h2 {
    position: absolute;
    top: 40vw;
    left: -10vw;
    transform:rotate(90deg);
  }
  #section4 .sc04-text-wrap > .inner h2 img {
    width: 42vw;
    height: auto;
    max-width: inherit;
  }
  #section4 .sc04-text-wrap > .inner p.catch {
    position: absolute;
    top: 67.2vw;
    left: 7vw;
    font-size: 3.8vw;
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    color: #FFF;
  }
  #section4 .sc04-text-wrap > .inner .read {
    margin: auto;
    padding-left: 8.9vw;
    width: 75.7%;
  }
  #section4 .sc04-text-wrap > .inner .read p {
    font-size: 2.6vw;
    color: #FFF;
    white-space: normal;
    letter-spacing: 0.1em;
    text-align: justify;
    line-height: 1.8;
  }

  #section4 .sc04-ph01 {
    position: absolute;
    top: -16vw;
    right: -11vw;
    width: 88.5vw;
    z-index: 10;
  }

  #section4 .sc04-ph01 figure {
    
  }
  #section4 .sc04-ph01 img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
  
}
@media (min-width: 769px) {
  
  #section4 {
    background-color: #667F73;
  }
  #section4 > div {
    display: inline-block;
  }

  #section4 .sc04-header {
    position: absolute;
    top: 0;
    left: 0;
    padding: 14vh 0 0 10vh;
    width: 113vh;
    height: 100vh;
    z-index: 10;
  }
  #section4 .sc04-header h1 {
    /*! margin-bottom: 8vh; */
  }
  #section4 .sc04-header h1 img {
    height: 15.9vh;
  }
  #section4 .sc04-header .jsBorderY {
    position: absolute;
    top: 29.9vh;
    left: 24vh;
    width: 1px;
    height: 55.8vh;
    background: #eee;
    transform-origin: top left;
    transform: scale(0);
    transition: transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  #section4 .sc04-header .jsBorderY.jsBorderOn {
    transform: scale(1);
  }
  #section4 .sc04-header .scNo img {
    height: 2vh;
  }

  #section4 .sc04-text-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 39vh 0 0 29vh;
    width: auto;
    height: 100vh;
    z-index: 10;
  }
  #section4 .sc04-text-wrap > .inner {
    width: 72vh;
  }
  #section4 .sc04-text-wrap > .inner h2 {
    margin-bottom: 2vh;
  }
  #section4 .sc04-text-wrap > .inner h2 img {
    height: 1.8vh;
  }
  #section4 .sc04-text-wrap > .inner p.catch {
    font-size: 1.8vh;
    letter-spacing: 0.2em;
    color: #FFF;
    margin-bottom: 2.2vh;
  }
  #section4 .sc04-text-wrap > .inner .read {
    columns: 2 auto;
  }
  #section4 .sc04-text-wrap > .inner .read p {
    font-size: 1.4vh;
    color: #FFF;
    width: 31vh;
    white-space: normal;
    text-align: justify;
    line-height: 1.8;
  }
  @media screen and (-webkit-min-device-pixel-ratio:0){
    body.miniHeight #section4 .sc04-text-wrap > .inner .read p {
      transform: scale(0.7);
      transform-origin: top left;
      width: calc( 100vh * 0.48);
    }
  }

  #section4 .sc04-ph01 {
    height: 80vh;
    margin-top: 10vh;
    margin-left: 103vh;
    margin-right: -6vh;
  }

  #section4 .sc04-ph01 figure {
    width: 80vh;
  }
  #section4 .sc04-ph01 img {
    object-fit: contain;
    object-position: center;
    width: 80vh;
    height: 80vh;
    vertical-align: middle;
  }
  
}


/* --------------------
	section5
-------------------- */
@media (max-width: 768px) {
  
  #section5 {
    position: relative;
    width: 100%;
    padding: 8vw 0 15vw 0;
    background-color: #FFF;
  }

  #section5 .sc05-header {
    position: relative;
    width: auto;
    z-index: 10;
  }
  #section5 .sc05-header h1 {
    display: none;
  }
  #section5 .sc05-header h1 img {
    height: 15.9vh;
    filter: invert(48%) sepia(15%) saturate(407%) hue-rotate(99deg) brightness(96%) contrast(88%);
  }
  #section5 .sc05-header .jsBorder,
  #section5 .sc05-header .jsBorder.jsBorderOn {
    display: none;
  }
  #section5 .sc05-header .scNo {
    position: relative;
    margin-bottom: 19vw;
    text-align: center;
  }
  #section5 .sc05-header .scNo::after {
    display: block;
    content: '';
    position: absolute;
    bottom: -19vw;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 16vw;
    background: #6a8c7d;
  }
  #section5 .sc05-header .scNo img {
    height: 3.6vw;
    filter: invert(48%) sepia(15%) saturate(407%) hue-rotate(99deg) brightness(96%) contrast(88%);
  }

  #section5 .sc05-text-wrap {
    position: relative;
    margin: 0 auto 3vw;
    z-index: 10;
  }
  #section5 .sc05-text-wrap > .inner h2 {
    text-align: center;
    margin-bottom: 3vw;
  }
  #section5 .sc05-text-wrap > .inner h2 img {
    height: 4vw;
    filter: invert(48%) sepia(15%) saturate(407%) hue-rotate(99deg) brightness(96%) contrast(88%);
  }
  #section5 .sc05-text-wrap > .inner p.catch {
    font-size: 3.8vw;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
    margin-bottom: 58vw;
  }
  #section5 .sc05-text-wrap > .inner .read {
    margin: 0 auto 10vw;
    width: 75.7%;
  }
  #section5 .sc05-text-wrap > .inner .read p {
    font-size: 2.6vw;
    white-space: normal;
    letter-spacing: 0.1em;
    text-align: justify;
    line-height: 1.8;
  }

  #section5 .sc05-btn-wrap {
    position: relative;
    width: auto;
    z-index: 10;
  }
  #section5 .sc05-btn-wrap .btn-wrap {
    margin: auto;
    width: 75.7%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #FFF;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP {
    height: 5vh;
    background: linear-gradient(270deg, #d0b5a1, #d4a481);
    background-size: 400% 400%;
    -webkit-animation: btnBgAni 30s ease infinite;
    -moz-animation: btnBgAni 30s ease infinite;
    animation: btnBgAni 30s ease infinite;

  }
  @-webkit-keyframes btnBgAni {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @-moz-keyframes btnBgAni {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @keyframes btnBgAni {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP span:last-child {
    animation: arrow 2.5s infinite;
  }
  @keyframes arrow {
    0% {
      transform: translateX(0);
    }
    60% {
      transform: translateX(10px);
    }
    0%, 60%, 100% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP:hover {
    background: #B09582;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnO {
    height: 3.2vh;
    background-color: #EFEBE4;
    transition: all .8s;
    margin-top: 1vh;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnO:hover {
    background-color: #E1D6C2;
  }
  #section5 .sc05-btn-wrap .btn-wrap > div + div {
    margin-top: auto;
  }
  #section5 .sc05-btn-wrap .btn-wrap > div > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  #section5 .sc05-btn-wrap .btn-wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2vh;
    font-family: 'lato', san-serif;
    letter-spacing: 0.14em;
    text-decoration: none;
  }
  #section5 .sc05-btn-wrap .btn-wrap a span {
    font-size: 2.5vh;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP a {
    text-decoration: none;
    color: #FFF;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP a span {
    display: block;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP a span:first-child {
    margin-right: 3%;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnO a {
    color: #667F73;
  }
  
  #section5 .sc05-ph01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 1;
  }
  #section5 .sc05-ph01 figure {
    position: relative;
    width: 100%;
    padding-top: 105%;
  }
  #section5 .sc05-ph01 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  
}
@media (min-width: 769px) {
  
  #section5 {
    width: 100vw;
    background-color: #EFEBE4;
  }
  #section5 > div {
    display: inline-block;
  }

  #section5 .sc05-header {
    position: absolute;
    top: 0;
    left: 0;
    padding: 14vh 0 0 10vh;
    width: auto;
    height: 100vh;
    z-index: 10;
  }
  #section5 .sc05-header h1 {
    /*! margin-bottom: 8vh; */
  }
  #section5 .sc05-header h1 img {
    height: 15.9vh;
    filter: invert(48%) sepia(15%) saturate(407%) hue-rotate(99deg) brightness(96%) contrast(88%);
  }
  #section5 .sc05-header .jsBorder.jsBorderOn {
    background-color: #667F73;
  }
  #section5 .sc05-header .scNo img {
    height: 2vh;
    filter: invert(48%) sepia(15%) saturate(407%) hue-rotate(99deg) brightness(96%) contrast(88%);
  }

  #section5 .sc05-text-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 39.5vh 0 0 30vh;
    width: 100%;
    height: 100vh;
    z-index: 10;
  }
  #section5 .sc05-text-wrap > .inner {
    width: 72vh;
  }
  #section5 .sc05-text-wrap > .inner h2 {
    margin-bottom: 1.8vh;
  }
  #section5 .sc05-text-wrap > .inner h2 img {
    height: 2.2vh;
    filter: invert(48%) sepia(15%) saturate(407%) hue-rotate(99deg) brightness(96%) contrast(88%);
  }
  #section5 .sc05-text-wrap > .inner p.catch {
    font-size: 1.8vh;
    line-height: 1.8;
    letter-spacing: 0.2em;
  }
  #section5 .sc05-text-wrap > .inner .read {
    position: absolute;
    right: 8vh;
    top: 13vh;
  }
  #section5 .sc05-text-wrap > .inner .read p {
    font-size: 1.4vh;
    width: 34vh;
    white-space: normal;
    letter-spacing: 0.1em;
    text-align: justify;
    line-height: 1.8;
  }
  @media screen and (-webkit-min-device-pixel-ratio:0){
    body.miniHeight #section5 .sc05-text-wrap > .inner .read p {
      transform: scale(0.7);
      transform-origin: top right;
      width: calc( 100vh * 0.48);
    }
  }

  #section5 .sc05-btn-wrap {
    position: absolute;
    top: 0;
    right: 0;
    padding: 84vh 8vh 0 0;
    width: auto;
    height: 100vh;
    z-index: 10;
  }
  #section5 .sc05-btn-wrap .btn-wrap {
    width: 34vh;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #FFF;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP {
    height: 5vh;
    background: linear-gradient(270deg, #d0b5a1, #d4a481);
    background-size: 400% 400%;
    -webkit-animation: btnBgAni 30s ease infinite;
    -moz-animation: btnBgAni 30s ease infinite;
    animation: btnBgAni 30s ease infinite;

  }
  @-webkit-keyframes btnBgAni {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @-moz-keyframes btnBgAni {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @keyframes btnBgAni {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP span:last-child {
    animation: arrow 2.5s infinite;
  }
  @keyframes arrow {
    0% {
      transform: translateX(0);
    }
    60% {
      transform: translateX(10px);
    }
    0%, 60%, 100% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP:hover {
    background: #B09582;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnO {
    height: 3.2vh;
    background-color: #EFEBE4;
    transition: all .8s;
    margin-top: 1vh;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnO:hover {
    background-color: #E1D6C2;
  }
  #section5 .sc05-btn-wrap .btn-wrap > div + div {
    margin-top: auto;
  }
  #section5 .sc05-btn-wrap .btn-wrap > div > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  #section5 .sc05-btn-wrap .btn-wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2vh;
    font-family: 'lato', san-serif;
    letter-spacing: 0.14em;
    text-decoration: none;
  }
  #section5 .sc05-btn-wrap .btn-wrap a span {
    font-size: 2.5vh;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP a {
    text-decoration: none;
    color: #FFF;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP a span {
    display: block;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnP a span:first-child {
    margin-right: 3%;
  }
  #section5 .sc05-btn-wrap .btn-wrap .btnO a {
    color: #667F73;
  }


  #section5 .sc05-ph01 {
    position: relative;
    right: 0;
    padding-left: 27vh;
  }
  #section5 .sc05-ph01 figure {
    width: 100vw;
  }
  #section5 .sc05-ph01 img {
    object-fit: cover;
    object-position: -20vh center;
    width: 100%;
    height: 100vh;
  }
  
}


/* ====================
 scroll Animation
==================== */
.jsBorder {
  height: 1px;
  background-color: #fff;
  width: 100%;
  margin: 3.8vh auto;
  transform-origin: center left;
  transform: scale(0);
  transition: transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.jsBorder.jsBorderOn {
  transform: scale(1);
}