@charset "UTF-8";
.siteheader { top: 0; }
.siteheader nav a[data-sub*="world"] i { opacity: 1; width: 100%; }

#contents { padding-bottom: 0; color: #fff;}

/**
  [data-ln='story']
**/
[data-ln='story'] .bg_fixed {position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; min-width: 1200px;}

[data-ln='story'] #wrapper{position: relative; z-index: 100;} 

[data-ln='story'] #contents section {width: 680px; margin: 0 auto; min-width: inherit; overflow: hidden; z-index: 100;}
/*
[data-ln='story'] #contents section::after{content: ''; width: 100%; height: 100%; background:url("../img/story/bg01blur.jpg") center top no-repeat; position: absolute; left: 0; top: 0; z-index: -1; filter: blur(0px); background-size: auto 100%;}
*/
[data-ln='story'] #contents section header {margin-bottom: 66px;}
[data-ln='story'] #contents section header h1{-webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; font-size: 117px; color: transparent; letter-spacing: 0.05em; margin: 127px 0 -7px; line-height: 1;}
.ie11 [data-ln='story'] #contents section header h1{color: #fff;}
[data-ln='story'] #contents section p {font-size: 17px; line-height: 40px; transform: rotate(0.05deg); letter-spacing: 0.05em;}
[data-ln='story'] #contents section p + p  {margin: 30px 0 0;}
[data-ln='story'] #contents section header p{font-size: 19px; line-height: 1; margin: -12px 0 0 -30px; letter-spacing: 0.07em;}

[data-ln='story'] #contents section a{color: #fff; font-size: 19px; display: block; width: 68px; height: 68px; margin:55px auto 75px; /*margin: 55px auto 75px;*/ position: relative; transition: opacity 0.5s; animation: arr 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; }
[data-ln='story'] #contents section a:hover{opacity: 0.5;}
[data-ln='story'] #contents section a::after{content: ''; width: 68px; height: 68px; border-left:1px solid #fff; border-bottom:1px solid #fff; position: absolute; left: 50%; bottom: 0; transform: rotate(-45deg); margin: 0 0 11px -34px;}
[data-ln='story'] #contents section#sec02 {padding-bottom: 180px;}
[data-ln='story'] #scrollanchor {position: relative; top: -105px;}



@keyframes arr {
    0% {transform:  translate(0, -15px); opacity: 0;}
   50% {opacity: 1;}
  100% {transform:  translate(0px, 10px); opacity: 0;}
}

@media screen and (min-width: 641px) {
  .siteheader a[data-sub*="world"] i { opacity: 1; }


/**
landscape
**/
.swiper-container.landscape01{margin-bottom: 40px;}
.swiper-container.landscape01 .swiper-slide{position: relative;}
.swiper-container.landscape01 .swiper-slide img {width: 100%; height: auto;}
.swiper-container.landscape01 .swiper-slide .text {width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: left; padding: 0;}
.swiper-container.landscape01 .swiper-slide .text::before{content: ''; background: url("../img/landscape/slide01-pc.jpg") no-repeat left top / cover; width: 400px; height: 100%; position: absolute; left: 0; top: 0; color: #fff; overflow: hidden; text-align: left; background-clip: content-box; filter: blur(7px);}
.swiper-container.landscape01 .swiper-slide .text::after{content: ''; background: rgba(0,0,0,0.25); width: 400px; height: 100%; position: absolute; left: 0; top: 0;}

.swiper-container.landscape01 .swiper-slide.slide02 .text::before{background: url("../img/landscape/slide02-pc.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide03 .text::before{background: url("../img/landscape/slide03-pc.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide04 .text::before{background: url("../img/landscape/slide04-pc.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide05 .text::before{background: url("../img/landscape/slide05-pc.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide06 .text::before{background: url("../img/landscape/slide06-pc.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide07 .text::before{background: url("../img/landscape/slide07-pc.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide08 .text::before{background: url("../img/landscape/slide08-pc.jpg") no-repeat left top / cover;}

.swiper-container.landscape01 .swiper-slide .text.right::before {background-position: right top; left: inherit; right: 0;}
.swiper-container.landscape01 .swiper-slide .text.right,
.swiper-container.landscape01 .swiper-slide .text.right::after  {left: inherit; right: 0;}

.swiper-container.landscape01 .swiper-slide .text h2 {font-size: 26px; line-height: 45px; padding: 0 40px; letter-spacing: 0.1em; margin-bottom: 20px;}
.swiper-container.landscape01 .swiper-slide .text p {font-size: 16px; line-height: 33px; padding: 0 40px; letter-spacing: 0.1em;}
.swiper-container.landscape01 .swiper-slide .text .title {position: relative; margin-bottom: 26px; padding-top: 103px;}
.swiper-container.landscape01 .swiper-slide .text .title p {font-size: 117px; line-height: 104px; position: relative; z-index: 100; -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; color: transparent; padding: 0 0 0 40px; letter-spacing: 0.06em;}
.ie11 .swiper-container.landscape01 .swiper-slide .text .title p{color: #fff;}
.swiper-container.landscape01 .swiper-slide .text .title small {font-size: 19px; text-align: center; position: absolute; left: 0; top: 199px; width: 100%; letter-spacing: 0.08em;}

.swiper-container.landscape01 .swiper-slide .text .in{position: relative; z-index: 100; width: 400px;}
.swiper-container.landscape01 .swiper-slide .text .in::after{content: ''; background-clip: content-box; width: 400px; height: 100%; filter: blur(7px); position: absolute; left: 0; top: 0; z-index:0;}
.swiper-container.landscape01 .swiper-slide .text.right .in {position: absolute; right: 0;}

.swiper-container.landscape02{margin-bottom: 114px;}

/* slider */
  .swiper-container.landscape01, .swiper-container.landscape02 { font-size: 0; line-height: 1; opacity: 0; }
  .windowloaded .swiper-container { opacity: 1; transition: 1s;}
  .swiper-container.landscape01 .swiper-pagination{opacity: 0;}
  .swiper-container.landscape01 .swiper-button-next{ background:none; width: 45px; height: 50px; bottom:22px; margin: 0; right: inherit; left:88px !important; transition: 0.4s; z-index: 100; top: inherit; outline: none !important;}
  .swiper-container.landscape01 .swiper-button-prev{ background:none; width: 45px; height: 50px; bottom:22px; margin: 0; left:32px; transition: 0.4s; z-index: 100; top: inherit; outline: none !important;}
  .swiper-container.landscape01 .swiper-button-next::after,
  .swiper-container.landscape01 .swiper-button-prev::after { content: ''; width: 30px; height: 30px; transform: rotate(45deg); border: 1px solid #fff; position: absolute; left: 50%; top: 50%; border-bottom: none; border-left: none; margin-top: -15px; margin-left: -25px; transition: 0.2s;}
  .swiper-container.landscape01 .swiper-button-next:hover,
  .swiper-container.landscape01 .swiper-button-prev:hover {background-color: rgba(255,255,255,0.1);}

  .swiper-container.landscape02 .swiper-pagination{opacity: 0;}
  .swiper-container.landscape02 .swiper-slide { height: 274px !important; width: 486px !important; margin: 0 4px; overflow: hidden; font-size: 0 !important; position: relative; left: -247px; cursor: pointer;}
  .swiper-container.landscape02 .swiper-slide img {transform-origin: center center; transition: 0.4s;}
  .swiper-container.landscape02 .swiper-slide:hover img {transform: scale(1.2); transition: 0.6s}
  .swiper-container.landscape02 .swiper-slide b{z-index: 10; position: absolute; left: 10px; top: 10px; font-size: 19px; color: #d8245b; width: 80px; height: 20px; text-align: center; background: #fffba7; padding: 4px 0 0;}
  .swiper-container.landscape02 .swiper-slide i {display: block; width: calc( 100% - 12px ); height: calc( 100% - 12px ); border: 6px solid #d8245b; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0; transition: opacity 0.4s;}
  .swiper-container.landscape02 .swiper-slide.active {pointer-events: none;}
  .swiper-container.landscape02 .swiper-slide.active i{opacity: 1;}

  .swiper-container.landscape02 .swiper-button-next{ background: #d8245b; width: 39px; height: 274px; top:0; margin: 0; right:0; border-left: 1px solid #fff; transition: 0.4s; }
  .swiper-container.landscape02 .swiper-button-prev{ background: #d8245b; width: 39px; height: 274px; top:0; margin: 0; left:0; border-right: 1px solid #fff; transition: 0.4s; }
  .swiper-container.landscape02 .swiper-slide img { width: 100%; height: 274px; backface-visibility: hidden;}
  .swiper-container.landscape02 .swiper-button-next::after,
  .swiper-container.landscape02 .swiper-button-prev::after { content: ''; width: 30px; height: 30px; transform: rotate(45deg); border: 1px solid #fff; position: absolute; left: 50%; top: 50%; border-bottom: none; border-left: none; margin-top: -15px; margin-left: -25px; transition: 0.2s;}
  .swiper-container.landscape02 .swiper-button-next:hover,
  .swiper-container.landscape02 .swiper-button-prev:hover { background: #fffba7;}
  .swiper-container.landscape02 .swiper-button-next:hover::after,
  .swiper-container.landscape02 .swiper-button-prev:hover::after { border-color: #d8245b; }
  .swiper-container.landscape01 .swiper-button-next.swiper-button-disabled, .swiper-container.landscape01 .swiper-button-prev.swiper-button-disabled, .swiper-container.landscape02 .swiper-button-next.swiper-button-disabled, .swiper-container.landscape02 .swiper-button-prev.swiper-button-disabled { pointer-events: none; background-color: rgba(221, 221, 221, 0.5); opacity: 0; }
  .swiper-container.landscape01 .swiper-button-next.swiper-button-disabled::after, .swiper-container.landscape01 .swiper-button-prev.swiper-button-disabled::after, .swiper-container.landscape02 .swiper-button-next.swiper-button-disabled::after, .swiper-container.landscape02 .swiper-button-prev.swiper-button-disabled::after { opacity: 0.5; }
  .swiper-container.landscape01 .swiper-button-prev::after, .swiper-container.landscape02 .swiper-button-prev::after { transform: rotate(-135deg); margin: -15px 0 0 -6px; }
  .swiper-container.landscape01 .swiper-button-next, .swiper-container.landscape02 .swiper-button-next { left: inherit; right: -1px; }
  
}

@media screen and (min-width: 641px) {
[data-ln='story'] .bg_fixed i::before,
[data-ln='story'] .bg_fixed::before{content: ''; width: 1600px; height: 100vh; background: url("../img/story/bg01.jpg") center top no-repeat; background-size: cover; position: absolute; left: 50%; top: 0; min-height: 937px; margin-left: -800px; background-attachment: fixed;}
[data-ln='story'] .bg_fixed i {width: 100vw; position: absolute; left: 0; top: 0; transition:opacity 1.8s; z-index: 10; opacity: 0;}
[data-ln='story'] .bg_fixed i::before{position: absolute; background-clip: content-box; width: 680px; height: 100vh; left: 50%; top: 0; filter: blur(7px); z-index: 5; margin-left: -340px;}
[data-ln='story'] .bg_fixed i::after {position: absolute; width: 680px; height: 100vh; left: 50%; top: 0; background: rgba(9,97,186,0.3); z-index: 6; content: ''; margin-left: -340px;}

[data-ln='story'] .bg_fixed span::before,
[data-ln='story'] .bg_fixed::after {content: ''; width: 1600px; height: 100vh; background: url("../img/story/bg02.jpg") center top no-repeat; background-size: cover; position: absolute; left: 0; top: 0; opacity: 0; transition:opacity 1.8s; min-height: 1007px; background-attachment: fixed;}
[data-ln='story'] .bg_fixed span {width:100vw; position: absolute; left: 0%; top: 0; margin-left: 0; opacity: 0; transition:opacity  1.8s; z-index: 11;}
[data-ln='story'] .bg_fixed span::before{position: absolute; background-clip: content-box; width: 680px; height: 100vh; left: 50%; top: 0; filter: blur(7px); z-index: 5; margin-left: -340px;}
[data-ln='story'] .bg_fixed span::after {position: absolute; width: 680px; height: 100vh; left: 50%; top: 0; background: rgba(9,97,186,0.3); z-index: 6; content: ''; margin-left: -340px;}

.ie11 [data-ln='story'] .bg_fixed i::before {background: none;}
.ie11 [data-ln='story'] .bg_fixed i::after {background: rgba(9,97,186,0.7);}
.ie11 [data-ln='story'] .bg_fixed span::before {background: none;}
.ie11 [data-ln='story'] .bg_fixed span::after {background: rgba(9,97,186,0.7);}
[data-ln='story'] #imageloaded i{background: url("../img/story/bg01.jpg"), url("../img/story/bg02.jpg");}

.swiper-container.landscape01 .swiper-slide .text h2 {font-size: calc(26 * 0.75px); line-height: calc(45 * 0.75px); padding: 0 calc(40 * 0.75px); letter-spacing: 0.1em; margin-bottom: calc(20 * 0.75px);}
.swiper-container.landscape01 .swiper-slide .text p {font-size: calc(16 * 0.75px); line-height: calc(33 * 0.75px); padding: 0 calc(40 * 0.75px); letter-spacing: 0.1em;}
.swiper-container.landscape01 .swiper-slide .text .title {position: relative; margin-bottom: calc(26 * 0.75px); padding-top: calc(103 * 0.75px);}
.swiper-container.landscape01 .swiper-slide .text .title p {font-size: calc(90 * 0.75px); line-height: calc(104 * 0.75px); position: relative; z-index: 100; -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; color: transparent; padding: 0 0 0 calc(40 * 0.75px); letter-spacing: 0.06em;}
.swiper-container.landscape01 .swiper-slide .text .title small {font-size:calc(19 * 0.75px); position: absolute; left: 0; top: calc(199 * 0.75px); width: 100%; letter-spacing: 0.08em; text-align: left; padding-left: calc( 44 * 0.75px );}

  .swiper-container.landscape01 .swiper-button-next{bottom:calc( 22 * 0.75px); left:calc( 88 * 0.75px) !important;}
  .swiper-container.landscape01 .swiper-button-prev{bottom:calc( 22 * 0.75px); left:calc(32 * 0.75px);}


}
@media screen and (min-width: 1201px) {

.swiper-container.landscape01 .swiper-slide .text h2 {font-size: calc(26/1600*100vw); line-height: calc(45/1600*100vw); padding: 0  calc(40/1600*100vw); letter-spacing: 0.1em; margin-bottom: calc(20/1600*100vw);}
.swiper-container.landscape01 .swiper-slide .text p {font-size: calc(16/1600*100vw); line-height: calc(33/1600*100vw); padding: 0 calc(40/1600*100vw); letter-spacing: 0.1em;}
.swiper-container.landscape01 .swiper-slide .text .title {position: relative; margin-bottom: calc(26/1600*100vw); padding-top: calc(103/1600*100vw);}
.swiper-container.landscape01 .swiper-slide .text .title p {font-size: calc(70/1600*100vw); line-height: calc(104/1600*100vw); position: relative; z-index: 100; -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; color: transparent; padding: 0 0 0 calc(40/1600*100vw); letter-spacing: 0.06em;}
.swiper-container.landscape01 .swiper-slide .text .title small {font-size: calc(19/1600*100vw); position: absolute; left: 0; top: calc(199/1600*100vw); width: 100%; letter-spacing: 0.08em; padding-left: calc( 44 / 1600 *100vw );}

  .swiper-container.landscape01 .swiper-button-next{bottom:calc( 22 / 1600 * 100vw); left:calc( 88  / 1600 * 100vw) !important;}
  .swiper-container.landscape01 .swiper-button-prev{bottom:calc( 22 / 1600 * 100vw); left:calc( 32 / 1600 * 100vw);}
  
}
@media screen and (min-width: 1601px) {
[data-ln='story'] .bg_fixed i::after {width:calc(680/1600*100vw); margin-left:calc(-340/1600*100vw);}
[data-ln='story'] .bg_fixed i::before{width:100%; padding:0 calc(460/1600*100vw); margin-left:0; left: 0;}
[data-ln='story'] .bg_fixed::before{width: 100%; margin-left: 0; left: 0;}

[data-ln='story'] .bg_fixed span::after {width:calc(680/1600*100vw); margin-left:calc(-340/1600*100vw);}
[data-ln='story'] .bg_fixed span::before{width:100%; padding:0 calc(460/1600*100vw); margin-left:0; left: 0;}
[data-ln='story'] .bg_fixed::after{width: 100%; margin-left: 0; left: 0;}

.swiper-container.landscape01 .swiper-slide .text h2 {font-size: 26px; line-height: 45px; padding: 0 40px; letter-spacing: 0.1em; margin-bottom: 20px;}
.swiper-container.landscape01 .swiper-slide .text p {font-size: 16px; line-height: 33px; padding: 0 40px; letter-spacing: 0.1em;}
.swiper-container.landscape01 .swiper-slide .text .title {position: relative; margin-bottom: 26px; padding-top: 103px;}
.swiper-container.landscape01 .swiper-slide .text .title p {font-size: 65px; line-height: 104px; position: relative; z-index: 100; -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; color: transparent; padding: 0 0 0 40px; letter-spacing: 0.06em;}
.ie11 .swiper-container.landscape01 .swiper-slide .text .title p{color: #fff;}
.swiper-container.landscape01 .swiper-slide .text .title small {font-size: 19px; position: absolute; left: 0; top: 199px; width: 100%; letter-spacing: 0.08em; padding-left: calc( 44px );}

}

[data-ln='story'] .bg_fixed {opacity: 0;}
.windowlaoded [data-ln='story'] .bg_fixed{opacity: 1;}
[data-ln='story'] .bgtrigger {position: fixed; left: 0; top: 0;}
[data-ln='story'] .bg_fixed.bg02::after{opacity: 1;}
[data-ln='story'] .bg_fixed.bg02 i{opacity: 0;}
[data-ln='story'] .bg_fixed.bg02 span,
[data-ln='story'] .bg_fixed.bg02 span::before{opacity: 1;}


@media screen and (max-width: 640px) {
/*  	SP STYLE  *************************************************************/
  .siteheader a[href*="world"] i { opacity: 1; }
  #contents { }
  .bg_fixed { background: url("../img/products/bg-sp.jpg") center top no-repeat; background-size: cover; }
  h1.pagelabel { font-size: 13.90625vw; margin: 15.3125vw 0 -1.5625vw; }
  h2.grade { font-size: 7.34375vw; }

[data-ln='story'] .bg_fixed {min-width:inherit; width: 100vw;}
/*
[data-ln='story'] .bg_fixed i::before{content: '';}
[data-ln='story'] .bg_fixed::before{content: ''; width: 100%; height: 100%; background: url("../img/story/bg01-sp.jpg") center top no-repeat; background-size: cover; position: absolute; left: 0; top: 0;}
[data-ln='story'] .bg_fixed::after {content: ''; width: 100%; height: 100%; background: url("../img/story/bg02-sp.jpg") center top no-repeat; background-size: cover; position: absolute; left: 0; top: 0; opacity: 0; transition:2.5s;}
*/

[data-ln='story'] #contents section {width: 100%; margin: 0 auto;}
[data-ln='story'] #contents section header {margin-bottom: calc(55/640*100vw);}
[data-ln='story'] #contents section header h1{-webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; font-size: calc(117/640*100vw); color: transparent; letter-spacing: 0.05em; margin: 130px 0 -7px; line-height: 1;}
[data-ln='story'] #contents section header p{font-size: calc(19/640*100vw); line-height: 1; margin:calc(-15/640*100vw) 0 0; letter-spacing: 0.03em;}
[data-ln='story'] #contents section header ~ p {font-size: calc(20/640*100vw); line-height: calc(42/640*100vw); transform: rotate(0.05deg); letter-spacing: 0.03em;}
[data-ln='story'] #contents section p + p  {margin: calc(45/640*100vw) 0 0;}
[data-ln='story'] #contents section a{color: #fff; font-size: calc(19/640*100vw); display: block; width: calc(68/640*100vw); height: calc(68/640*100vw); margin:calc(72/640*100vw) auto calc(65/640*100vw); /*margin: 55px auto 75px;*/ position: relative; transition: opacity 0.5s;}
[data-ln='story'] #contents section a:hover{opacity: 0.5;}
[data-ln='story'] #contents section a::after{content: ''; width: calc(68/640*100vw); height: calc(68/640*100vw); border-left:1px solid #fff; border-bottom:1px solid #fff; position: absolute; left: 50%; bottom: 0; transform: rotate(-45deg); margin: 0 0 calc(11/640*100vw) calc(-34/640*100vw);}
[data-ln='story'] #contents section#sec02 {padding-bottom: calc(65/640*100vw); font-size: calc(20/640*100vw); line-height: calc(42/640*100vw);}
[data-ln='story'] #contents section#sec02 p {font-size: calc(20/640*100vw); line-height: calc(42/640*100vw); transform: rotate(0.05deg); letter-spacing: 0.03em;}

[data-ln='story'] #scrollanchor {position: relative; top:calc(-105/640*100vw);}

[data-ln='story'] .bg_fixed i::before,
[data-ln='story'] .bg_fixed::before{content: ''; width: 100vw; height: 100%; background: url("../img/story/bg01-sp.jpg") center top no-repeat; background-size: cover; position: absolute; left: 0; top: 0; margin: 0;}
[data-ln='story'] .bg_fixed i {width: 100%; position: absolute; left: 0; top: 0; transition:2.5s;}
[data-ln='story'] .bg_fixed i::before{position: absolute; background-clip: content-box; width:100%; height: 100vh; left: 0; top: 0; filter: blur(7px); z-index: 5; margin-left: 0; padding: 0 calc(40/640*100vw);}
[data-ln='story'] .bg_fixed i::after {position: absolute; width: calc(560/640*100vw); height: 100vh; left: 50%; top: 0; background: rgba(9,97,186,0.3); z-index: 6; content: ''; margin-left: calc(-280/640*100vw);}

[data-ln='story'] .bg_fixed span::before,
[data-ln='story'] .bg_fixed::after {content: ''; width: 100vw; height: 100%; background: url("../img/story/bg02-sp.jpg") center top no-repeat; background-size: cover; position: absolute; left: 0; top: 0; opacity: 0; transition:2.5s; min-height:inherit;}
[data-ln='story'] .bg_fixed span {width:100%; position: absolute; left: 0; top: 0; margin-left: 0; opacity: 0; transition:2.5s; z-index: 20;}
[data-ln='story'] .bg_fixed span::before{position: absolute; width:100%; height: 100vh; left: 0; top: 0; filter: blur(7px); z-index: 5; margin-left: 0; padding: 0 calc(40/640*100vw);}
[data-ln='story'] .bg_fixed span::after {position: absolute; width: calc(560/640*100vw); height: 100vh; left: 50%; top: 0; background: rgba(9,97,186,0.3); z-index: 6; content: ''; margin-left: calc(-280/640*100vw);}

[data-ln='story'] #imageloaded i{background: url("../img/story/bg01-sp.jpg"), url("../img/story/bg02-sp.jpg");}

}

@media screen and (max-width: 640px) {
/* 	SP STYLE *************************************************************/

/**
landscape
**/
.swiper-container.landscape01 {margin-bottom: 0; position: relative; height: 100vw;}
.slidemask{position: relative;}
.slidemask::after{content: ''; width: 100%; height: 100%; z-index: 1000; position: absolute; left: 0; top: 0;}
.swiper-container.landscape01 .swiper-slide{position: relative; padding-bottom: calc(80/640*100vw);}
.swiper-container.landscape01 .swiper-slide .text {width: 100%; height: 100%; position: static; left: 0; top: 0; text-align: center; padding: 0; height:  calc(755/640*100vw);}
.swiper-container.landscape01 .swiper-slide .text::before{content: ''; background: url("../img/landscape/slide01-sp.jpg") no-repeat left top / cover; width:120%; height: 120%; position: absolute; left: -10%; top: -10%; color: #fff; overflow: hidden; text-align: left; filter: blur(7px);}
.swiper-container.landscape01 .swiper-slide .text::after{content: ''; background: rgba(0,0,0,0.25); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.swiper-container.landscape01 .swiper-slide picture{position: fixed; left: 0; top: 0; opacity: 0;}
.swiper-container.landscape01 .swiper-slide.slide02 .text::before{background: url("../img/landscape/slide02-sp.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide03 .text::before{background: url("../img/landscape/slide03-sp.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide04 .text::before{background: url("../img/landscape/slide04-sp.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide05 .text::before{background: url("../img/landscape/slide05-sp.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide06 .text::before{background: url("../img/landscape/slide06-sp.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide07 .text::before{background: url("../img/landscape/slide07-sp.jpg") no-repeat left top / cover;}
.swiper-container.landscape01 .swiper-slide.slide08 .text::before{background: url("../img/landscape/slide08-sp.jpg") no-repeat left top / cover;}

.swiper-container.landscape01 .swiper-slide .text h2 {font-size: calc(31/640*100vw); line-height: calc(40/640*100vw); padding: 0 calc(60/640*100vw); letter-spacing: 0.1em; margin-bottom:calc(30/640*100vw);}
.swiper-container.landscape01 .swiper-slide .text p {font-size: calc(20/640*100vw); line-height: calc(42/640*100vw); padding: 0 calc(30/640*100vw); letter-spacing: 0.1em;}
.swiper-container.landscape01 .swiper-slide .text .title {position: relative; margin-bottom: calc(50/640*100vw); padding-top: calc(130/640*100vw);}
.swiper-container.landscape01 .swiper-slide .text .title p {font-size: calc(100/640*100vw); line-height: calc(104/640*100vw); position: relative; z-index: 100; -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px; color: transparent; padding: 0 0 0 0;}
.swiper-container.landscape01 .swiper-slide .text .title small {font-size: calc(19/640*100vw); text-align: center; position: absolute; left: 0; top: calc(225/640*100vw); width: 100%; letter-spacing: 0.08em;}

.swiper-container.landscape01 .swiper-slide .text .in{position: relative; z-index: 100; width: 100%;}
.swiper-container.landscape01 .swiper-slide .text .in::after{content: ''; width: 100%; height: 100%; filter: blur(7px); position: absolute; left: 0; top: 0; z-index:0;}
.swiper-container.landscape01 .swiper-slide .text.right .in {position: absolute; right: 0;}

.swiper-container.landscape02{margin-bottom: calc(90/640*100vw); z-index: 2000;}
/* slider */

  .swiper-container.landscape01, .swiper-container.landscape02 { font-size: 0; line-height: 1; opacity: 0;  border: none; position: static;}
  .windowloaded .swiper-container { opacity: 1; transition: 1s; border: none !important;}
  .swiper-container.landscape01 .swiper-slide {height: calc(755/640*100vw) !important; width: 100% !important; border: none !important;}
  .swiper-container.landscape01 .swiper-pagination{opacity: 0;}
  .swiper-container.landscape02 .swiper-slide { height: auto !important; width: 100% !important; margin: 0; overflow: hidden; font-size: 0 !important; position: relative; left: 0; cursor: pointer; border: none !important; margin-bottom: 10vw;}
  .swiper-container.landscape02 .swiper-slide * {border: none !important;}
  
.swiper-container.landscape02 .swiper-slide b {width: calc(72/640*100vw); height: calc(18/640*100vw); font-size: calc(17/640*100vw); left: calc(10/640*100vw); top: calc(10/640*100vw); padding: calc(2/640*100vw) 0 0; position: absolute; color: #d8245b; z-index: 10; background: #fffba7;}

  .swiper-container.landscape02 .swiper-slide i {display: none;}
  .swiper-container.landscape02 .swiper-button-next{ background: #d8245b; width: calc(33/640*100vw); height: calc(156/640*100vw); top:calc(360/640*100vw); margin: 0; right:0; transition: 0.4s; z-index: 2000;}
  .swiper-container.landscape02 .swiper-button-prev{ background: #d8245b; width: calc(33/640*100vw); height: calc(156/640*100vw); top:calc(360/640*100vw); margin: 0; left:0; transition: 0.4s; z-index: 2000;}
  .swiper-container.landscape02 .swiper-slide img { width: 100%; height: auto; backface-visibility: hidden;}
  .swiper-container.landscape02 .swiper-button-next::after,
  .swiper-container.landscape02 .swiper-button-prev::after { content: ''; width: 4.375vw; height: 4.375vw; transform: rotate(45deg); border: 1px solid #fff; position: absolute; left: 50%; top: 50%; border-bottom: none; border-left: none; margin-top: -2.03125vw; margin-left: -3.125vw; transition: 0.2s;}
  
  .swiper-container.landscape01 .swiper-button-prev::after, .swiper-container.landscape02 .swiper-button-prev::after { transform: rotate(-135deg); margin: -2.03125vw 0 0 -1.09375vw; }
  
  
  .swiper-container .swiper-button-prev::after { transform: rotate(-135deg); margin: -2.03125vw 0 0 -1.09375vw; }
  .swiper-container .swiper-button-next { left: inherit; right: 0; }
  
  .swiper-container * {outline: none !important;}
  .swiper-container .swiper-slide::after {display: none;}
  
}


/* animation */
[data-ln='story'] #contents { transform: translateY(0); opacity: 0; transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(2px) brightness(1.1); }
[data-ln='story'] .bg_fixed { transform: translateY(0); opacity: 0; transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(2px) brightness(1.1); }
.imgloaded [data-ln='story'] #contents ,
.imgloaded [data-ln='story'] .bg_fixed { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }

[data-ln='story'] .bg_fixed i{opacity: 0;}
[data-ln='story'] #contents section {opacity:0; filter: blur(7px);}
.windowloaded [data-ln='story'] .bg_fixed i{transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1;}
.windowloaded [data-ln='story'] #contents section{transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1; filter: blur(0);}

@media screen and (min-width: 640px) {
.swiper-container.landscape01 .swiper-slide .text{opacity: 0; filter: blur(7px);}
.swiper-container.landscape01 .swiper-slide.swiper-slide-active .text {transition: 0.6s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1; filter: blur(0);}
}