@charset "UTF-8";

/************************************************************************************
Reset
*************************************************************************************/

/*! destyle.css v1.0.15 | MIT License | https://github.com/nicolas-cusan/destyle.css */*{box-sizing:border-box}::after,::before{box-sizing:inherit}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}address,blockquote,dl,figure,form,iframe,p,pre,table{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit;font-weight:inherit;margin:0}ol,ul{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;vertical-align:bottom}embed,iframe,object{border:0;vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;border:0;background:0 0;padding:0;margin:0;outline:0;border-radius:0;text-align:inherit}[type=checkbox]{-webkit-appearance:checkbox;appearance:checkbox}[type=radio]{-webkit-appearance:radio;appearance:radio}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer;-webkit-appearance:none;appearance:none}[type=button][disabled],[type=reset][disabled],[type=submit][disabled],button[disabled]{cursor:default}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}select::-ms-expand{display:none}option{padding:0}fieldset{margin:0;padding:0;border:0;min-width:0}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]{outline:0}table{border-collapse:collapse;border-spacing:0}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}template{display:none}[hidden]{display:none}
/* 罫線を1pxに */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
/* フォームデフォルトスタイルを削除 */
input, button, textarea, select {  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;	vertical-align: middle; }
/* ADDED CSS(画像の下にわずかな隙間をなくす) */
img, svg, video { vertical-align:bottom; line-height: 1; }

/* ----------------------------------------------------------------------------------
IE11は必要最低限だけの対応
全体アクセスの3%とか極めて少数なので、バグや装飾ズレは無視
ページ遷移とUIの視認ができるくらいで。ライトモード、ダークモードスタイルの切り替え、
ブレンドモードや変数が使えないので下記スタイルを適用
他個別の対応のものはハックで上書き。時期を見て、全て削除予定
----------------------------------------------------------------------------------- */

a{ color: #212121; }
hr { border-top: 1px solid #e5e5e5; }
.hero { background: #f5f5f5; }
.accordionbox { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.accordion_icon span { background-color: #212121; }
.faq-question { border-top: 1px solid #e5e5e5; }
.catch-icon { fill: #999999; }
.txt-group a.btn { border: solid 1px #e5e5e5; }
.layout3 { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.pager-nav { background: #f5f5f5; }
.pager-title { color: #212121; }
.scroll span::after { background: #212121; }
.layout3 .txt-group h5 { border-bottom: solid 1px #e5e5e5; }
.image-product .thumb { background-color: #f5f7fa;}
.item-grid a.store-btn { border: 1px solid #fff; background: #212121; color: #fff; }
input[type="text"],input[type="email"],textarea { background-color: #f5f5f5; border: 1px solid #e5e5e5; color: #212121; }
input.btn { background-color: #212121; color: #fff; }
input.btn-back { background-color: #fff; color: #212121; }
p.error_messe { color: #ea4c89; }

/************************************************************************************
Color Scheme
*************************************************************************************/


:root {
  --PrimaryText: #212121;
  --SecondaryText: #666;
  --TertiaryText: #999;
  --ErrorText: #ea4c89;
  --Border: #e5e5e5;
  --BaseColor1: #fff;
  --BaseColor2: #f5f5f5;
  --BaseColor3: #eaeaea;
  --ImgBgColor: #f5f7fa;
  --MapBorder: #dceeff;
  --AccentColor: #F5FF14;
}

/* ------ テキスト選択時：ハイライト ------ */
::selection {
  background: var(--PrimaryText);
  color: var(--BaseColor1);
}
::-moz-selection {
  background: var(--PrimaryText);
  color: var(--BaseColor1);
}

/************************************************************************************
TEXT DECORATION
*************************************************************************************/

a {
  color: var(--PrimaryText);
  text-decoration: none;
}
/* ------ 外部サイト ------ */
a.ex-link:after {
  margin: 0 4px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f08e';
}
/* ------ テキストリンク ------ */
.txtlink {
  color: var(--PrimaryText);
  display: inline-block;
  line-height: 1.6;
  position: relative;
}
.txtlink::after {
  background-color: var(--PrimaryText);
  bottom: 0;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(1);
  transform-origin: bottom left;
  transition: transform .3s ease-in-out;
  width: 100%;
}
.txtlink:hover::after {
  transform: scaleX(0);
  transform-origin: bottom right;
}
.txtlink.Secondary{
  color: var(--SecondaryText);
}
.txtlink.Secondary::after {
  background-color: var(--SecondaryText);
}
/* IE11 css hack */
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .txtlink {
      text-decoration: underline;
  }
}

/*************************
BTN
**************************/

.primary-btn {
  font-size: 1.6rem;
  text-align: center;
  border-radius: 100vh;
  line-height: 1.2;
  padding: .9em 1.5em .9em 1.7em;
  background: var(--PrimaryText);
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  color: var(--BaseColor1);
  z-index: 1;
  overflow: hidden;
  margin: 1em 0 0;
}
.primary-btn::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--SecondaryText);
  transition: all 0.2s ease;
}
.primary-btn:hover {
  color: var(--BaseColor1);
}
.primary-btn:hover::after {
  top: auto;
  bottom: 0;
  height: 100%;
}


/************************************************************************************
GRAND LAYOUT
*************************************************************************************/

/* slick.jsがflexboxのために動作不良 */
* {
  min-height: 0;
  min-width: 0;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  background-color: var(--BaseColor1);
  color: var(--PrimaryText);
}
b, strong, .bold{
  font-family: YuGothic, "Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-weight: bold;
}

main {
  background-color: var(--BaseColor1);
}
main img,
main video {
  height: auto;
  max-width: 100%;
  width: 100%;
}
hr {
  border: 0;
  border-top: 1px solid var(--Border);
  display: block;
  height: 1px;
  width: 100%;
}
i {
  display: inline-block;
  margin-right: 0.6em;
  text-align: left;
}
/* ------ スマホだけ改行解除 ------ */
@media screen and (max-width:767px) {
  .br-pc {
    display: none;
  }
}
/* ------ スマホだけ改行追加 ------ */
@media screen and (min-width:768px) {
  .br-sp {
    display: none;
  }
}

/* ------ slick ホバー時のカーソル ------ */
.image-group .slick,
.image-product .slick {
  cursor: grab;
}
.image-group .slick:active,
.image-product .slick:active {
  cursor: grabbing;
}
/************************************************************************************
COMMON HEADER
*************************************************************************************/

.header {
  position: relative;
}
.btn-faq {
  position: fixed;
  display: block;
  z-index: 50;
  mix-blend-mode: difference;
}
.btn-faq svg {
  fill: #fff;
}
.site-logo-zsc {
  position: fixed;
  display: block;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
  z-index: 50;
  mix-blend-mode: difference;
}
.site-logo-zsc svg {
  fill: #fff;
}

/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  .btn-faq {
    left: 16px;
    top: 18px;
  }
  .btn-faq svg {
    height: 27px;
    width: 27px;
  }
  .site-logo-zsc {
    padding: 14px 0;
  }
  .site-logo-zsc svg {
    height: 35px;
    width: 35px;
  }
}
/* ------ TABLET & DESKTOP ------ */
@media screen and (min-width:768px) {
  .btn-faq {
    left: 60px;
    top: 40px;
  }
  .btn-faq svg {
    height: 33px;
    width: 33px;
    opacity: 1;
  }
  .btn-faq:hover svg {
    opacity: .5;
  }
  .site-logo-zsc {
    padding: 30px 0;
  }
  .site-logo-zsc svg {
    height: 52px;
    width: 52px;
  }
}
/* IE11 css hack mix-blend-mode使えない */
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .btn-faq svg {
    fill: #212121;
  }
  *::-ms-backdrop, .site-logo-zsc svg {
    fill: #212121;
  }
}

/************************************************************************************
HAMBURGER MENU
*************************************************************************************/
/* メニュー展開時にスクロール禁止 */
.fixed {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
/* menu-button */
.menu-icon {
  position: fixed;
  height: 32px;
  width: 32px;
  z-index: 100;
  cursor: pointer;
  mix-blend-mode: exclusion;
  background: rgba(33, 33, 33, 0);
}
.menu-icon-line {
  height: 2px;
  width: 32px;
  display: block;
  background-color: #fff;
  margin: 4px 0;
  -webkit-transition: background-color .8s ease, -webkit-transform .2s ease;
  transition: background-color .8s ease, -webkit-transform .2s ease;
  transition: transform .2s ease, background-color .8s ease;
  transition: transform .2s ease, background-color .8s ease, -webkit-transform .2s ease;
}
.menu-icon-line-top {
  width: 32px;
}
.menu-icon-line-bottom {
  width: 32px;
  float: right;
}
body.nav-active .menu-icon-line-top {
  -webkit-transform: translateX(0) translateY(6px) rotate(45deg);
          transform: translateX(0) translateY(6px) rotate(45deg);
}
body.nav-active .menu-icon-line-bottom {
  -webkit-transform: translateX(0) translateY(-5px) rotate(-45deg);
          transform: translateX(0) translateY(-5px) rotate(-45deg);
}

/* Menu Navigation */
.nav {
  position: fixed;
  font-family: din-condensed, sans-serif;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  z-index: 80;
  line-height: 1;
}
.nav:before,
.nav:after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.3);
  z-index: -1;
  -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.7s;
  transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.7s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.7s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.7s,
  -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.7s;
  -webkit-transform: translateX(0%) translateY(-100%);
          transform: translateX(0%) translateY(-100%);
}
.nav:after {
  background: #fff;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav:before {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
}
.nav-content {
  visibility: hidden;
  position: fixed;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  width: 100%;
  text-align: center;
  font-weight: 400;
  cursor: pointer;
}
.nav-list li:not(:nth-child(1)) {
  margin-top: .5em;
}
.nav-list-item {
  position: relative;
  display: block;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
  opacity: 0;
  -webkit-transform: translate(0%, 100%);
          transform: translate(0%, 100%);
  -webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
  transition: opacity .2s ease, -webkit-transform .3s ease;
  transition: opacity .2s ease, transform .3s ease;
  transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav {
  visibility: visible;
}
body.nav-active .nav:before,
body.nav-active .nav:after {
  -webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
}
body.nav-active .nav:before {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
body.nav-active .nav-content {
  visibility: visible;
}
body.nav-active .nav-list-item {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav-list-item:nth-child(0) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
body.nav-active .nav-list-item:nth-child(1) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
body.nav-active .nav-list-item:nth-child(2) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
body.nav-active .nav-list-item:nth-child(3) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
body.nav-active .nav-list-item:nth-child(4) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
body.nav-active .nav-list-item:nth-child(5) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
body.nav-active .nav-list-item:nth-child(6) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
  margin-top: 1em;
}

.sns-share-text {
  color: #999;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  padding-top: 2.4em;
}
.sns-share {
  display: block;
  height: 30px;
  margin-top: 16px;
}
.sns-share span{
  display: inline-block;
}
.sns-share span svg {
  display: inline-block;
  fill: #999;
}
.sns-fb svg {
  vertical-align: top;
  height: 22px;
  width: 22px;
}
.sns-tw svg {
  vertical-align: top;
  height: 23px;
  width: 23px;
}
.sns-line svg {
  vertical-align: top;
  height: 24px;
  width: 25px;
}

/* menu-link */
.menu-link{
	color: #141414;
  display: inline-flex;
	overflow: hidden;
	position: relative;
  text-decoration: none;
}
/* Text-Rolling effect */
.menu-link8::before{
  left: 0;
  top: 0;
  transform: translate3d(0, 140%, 0);
}
.menu-link8 .menu-link__label,
.menu-link8:hover::before{
	transform: translate3d(0, 0, 0);
}
.menu-link8:hover .menu-link__label{
  transform: translate3d(0, -140%, 0);
}
/* menu-link-text */
.menu-link-text::before{
  content: attr(data-menu-link-text);
	color: #141414;
  position: absolute;
}
.menu-link-text::before,
.menu-link-text .menu-link__label{
  transition-property: transform;
	transition-timing-function: cubic-bezier(.86, .6, .08, 1.01);
	transition-duration: .3s;
}
.menu-link-text:hover::before,
.menu-link-text:hover .menu-link__label{
	transition-duration: .4s;
}

/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  .menu-icon {
    right: 16px;
    top: 15px;
  }
  .nav-content {
    font-size: 5vh;
  }
  .sns-share span{
    margin: 4px 14px 0;
  }
  .nav-list li:not(:nth-child(1)) {
    margin-top: .7em;
  }
  body.nav-active .nav-list-item:nth-child(6) {
    margin-top: 1.4em;
  }
}
/* ------ TABLET & DESKTOP ------ */
@media screen and (min-width:768px) {
  .menu-icon {
    right: 60px;
    top: 42px;
  }
  .nav-content {
    font-size: 7vh;
  }
  .sns-share span{
    margin: 0 6px;
  }
  .nav-list li:not(:nth-child(1)) {
    margin-top: .5em;
  }
  .sns-share span svg:hover {
    fill: #666;
  }
}

/* IE11 css hack mix-blend-mode使えない */
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .menu-icon-line {
    background-color: #212121;
  }
  *::-ms-backdrop, body.nav-active .menu-icon-line {
    background-color: #fff;
  }
}

/************************************************************************************
FOOTER
*************************************************************************************/

/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  .foot-wrap {
    padding: 0;
  }
  .mega-navi {
    display: none;
  }
  .footer {
    background: var(--BaseColor1);
    display: flex;
    flex-direction: column;
    font-size: 3.6vw;
    font-family: din-condensed, sans-serif;
    font-style: normal;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    text-align: center;
    width: 100%;
  }
  .foot-nav {
    display: inline-block;
    margin: 40px 0 24px;
  }
  .foot-nav-text {
    display: inline;
    font-weight: 300;
    margin: 0 16px;
  }
  .foot-nav-text a {
    color: var(--PrimaryText);
  }
  .foot-nav-text a:hover {
    color: var(--TertiaryText);
  }
  .copyright {
    font-size: 3.6vw;
    font-weight: 300;
    margin: 0 0 32px;
    text-align: center;
  }
}
/* ------ DESKTOP ------ */
@media screen and (min-width:768px) {
  .foot-wrap {
    padding: 0 60px;
  }
  .footer {
    background: var(--BaseColor1);
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-family: din-condensed, sans-serif;
    font-style: normal;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    text-align: left;
    width: 100%;
  }
  .foot-nav {
    display: inline-block;
    margin: 40px 0;
  }
  .foot-nav-text {
    font-weight: 300;
    display: inline;
    margin-right: 24px;
  }
  .foot-nav-text a {
    color: var(--PrimaryText);
  }
  .foot-nav-text a:hover {
    color: var(--TertiaryText);
  }
  .copyright {
    font-weight: 300;
    margin: 40px 0;
    text-align: right;
  }
}

/************************************************************************************
SCROLL ICON
*************************************************************************************/

/* ------ SCROLL ICON ------ */
.scroll {
  transition-property: opacity;
  transition-duration: 1s;
}
.scroll.hiden {
  opacity: 0;
}
.scroll span {
  color: var(--PrimaryText);
  display: inline-block;
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  letter-spacing: .4em;
  line-height: 1;
  overflow: hidden;
  position: fixed;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  -ms-writing-mode: tb-rl;
  z-index: 50;
}
.scroll span::after {
  background: var(--PrimaryText);
  content: '';
  position: absolute;
}
.scroll span::before {
  background: rgba(255, 255, 255, .5);
  content: '';
  position: absolute;
}
.scroll span::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ------ MOBILE ------ */
@media screen and ( max-width:1023px) {
  .scroll span {
    bottom: 20px;
    font-size: 10px;
    padding: 10px 0 88px 3px;
    right: 10px;
    text-indent: -1000px;
  }
  .scroll span::after {
    border-radius: 1px;
    bottom: 0;
    height: 50px;
    left: 50%;
    width: 2px;
  }
  .scroll span::before {
    border-radius: 1px;
    bottom: 0;
    height: 50px;
    left: 50%;
    width: 2px;
  }
}
/* ------ TABLET & PC ------ */
@media screen and (min-width:1024px) {
  .scroll span {
    font-size: 10px;
    padding: 10px 0 88px 3px;
    right: 24px;
    top: 40%;
  }
  .scroll span::after {
    border-radius: 2px;
    bottom: 0;
    height: 80px;
    left: 50%;
    width: 4px;
  }
  .scroll span::before {
    border-radius: 2px;
    bottom: 0;
    height: 80px;
    left: 50%;
    width: 4px;
  }
}
/* IE11 css hack */
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .scroll {
      display: none;
  }
}
/************************************************************************************
TOP Firstview
*************************************************************************************/

.have-fun-text,
.paradise-island-text {
  color: var(--PrimaryText);
  display: block;
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
}

@media screen and ( max-width:767px) {
  .hero {
    background: var(--BaseColor2);
  }
  .full {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
  }
  .hero-video {
    display: flex;
    align-items: flex-start;
    position: relative;
  }
  .top-video {
    max-width: 767px;
  }
  .have-fun-text {
    font-size: 28px;
    left: 32px;
    position: absolute;
    top: -64px;
  }
  .paradise-island-text {
    font-size: 12px;
    position: absolute;
    right: 32px;
    top: -64px;
  }
  .sitename_sp {
    bottom: -151px;
    fill: var(--PrimaryText);
    height: 181px;
    left: 32px;
    position: absolute;
    width: 180px;
  }
  .logotype {
    margin-top: 0px;
    z-index: 10;
  }
  .sitename_pc {
    display: none;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 962px) {
  .hero {
    background: var(--BaseColor2);
  }
  .full {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
  }
  .hero-video {
    display: flex;
    align-items: flex-start;
    position: relative;
  }
  .top-video {
    margin-top: -120px;
  }
  .have-fun-text {
    font-size: 36px;
    left: 10%;
    position: absolute;
    top: -200px;
  }
  .paradise-island-text {
    font-size: 18px;
    position: absolute;
    right: 10%;
    top: -200px;
  }
  .sitename_sp {
    bottom: -224px;
    fill: var(--PrimaryText);
    height: 324px;
    left: 10%;
    position: absolute;
    width: 320px;
  }
  .logotype {
    margin-top: 0px;
    z-index: 10;
  }
  .sitename_pc {
    display: none;
  }
}
/* ------ DESKTOP ------ */
@media screen and (min-width:963px) {
  .hero {
    background: var(--BaseColor2);
  }
  .full {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
  }
  .hero-video {
    display: flex;
    align-items: flex-start;
    position: relative;
  }
  .top-video {
    width: 50vw;
    max-width: 50vw;
  }
  .have-fun-text {
    font-size: 72px;
    margin: -2px 40px 0 0;
    width: 114px;
  }
  .paradise-island-text {
    font-size: 28px;
    margin: 0 0 0 12%;
    width: 27px;
  }
  .sitename_sp {
    display: none;
  }
  .logotype {
    z-index: 10;
  }
  .sitename_pc {
    fill: var(--PrimaryText);
    width: 75vw;
    margin-top: -5%;
    box-sizing: border-box;
  }
}

/* 読み込んだら斜め下から表示 */
.liner {
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.29, 0.135, 0.055, 1);
  animation-fill-mode: both;
  transform-origin: 0% 50%;
}
.liner:nth-child(1) {
  animation-delay: 0.1s;
}
.liner:nth-child(1) a::after {
  animation-delay: 0.25s;
}
.liner:nth-child(2) {
  animation-delay: 0.2s;
}
.liner:nth-child(2) a::after {
  animation-delay: 0.5s;
}
.liner:nth-child(3) {
  animation-delay: 0.3s;
}
.liner:nth-child(3) a::after {
  animation-delay: 0.75s;
}
.liner:nth-child(4) {
  animation-delay: 0.4s;
}
.liner:nth-child(4) a::after {
  animation-delay: 1s;
}
.animation .liner {
  animation-name: liner-appear;
}
.animation .liner a::after {
  animation-name: underline-appear;
}
@keyframes liner-appear {
  0% {
    transform: rotate(5deg) translate3D(0, 50%, 0);
    opacity: 0;
  }
  100% {
    transform: rotate(0) translate3D(0, 0, 0);
    opacity: 1;
  }
}
@keyframes underline-appear {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}


/************************************************************************************
TOP PickUp
*************************************************************************************/

/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  .pickup-wrap {
    margin: 0;
  }
  .top-sub-title {
    font-size: 3.2rem;
    margin: 64px 0 16px;
  }
  .pickup-content {
    display: flex;
    flex-wrap: wrap;
  }
  .pickup-content a {
    display: block;
    height: 100%;
    width: 100%;
  }
  .col1,
  .col2,
  .col3,
  .col4 {
    border-bottom: solid 2px var(--BaseColor2);
    padding: 32px 0;
    position: relative;
    text-align: left;
    width: 100%;
  }
  .bundle1,
  .bundle2,
  .bundle3,
  .bundle4 {
    margin: 0 32px;
  }
  .pickup-shoulder-txt {
    font-size: 2rem;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
  }
  .pickup-title {
    font-size: 4.2rem;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 0.9;
    margin-bottom: 1.2rem;
    text-align: left;
  }
  .pickup-copy-txt {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 24px;
    color: var(--SecondaryText);
  }
  .img-set1,
  .img-set2 {
    position: relative;
  }
  .img-set1 figure,
  .img-set2 figure {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    z-index: 5;
  }
  .illust-ama {
    position: absolute;
    bottom: -24px;
    right: -16px;
    width: 33%;
    z-index: 10;
  }
  .illust-agenashiku {
    position: absolute;
    top: -36px;
    right: -16px;
    width: 45%;
    z-index: 10;
  }
  .illust-gozamami {
    position: absolute;
    top: -24px;
    right: -16px;
    width: 42%;
    z-index: 10;
  }
  .illust-urunosachi {
    position: absolute;
    top: -32px;
    right: -16px;
    width: 42%;
    z-index: 10;
  }
  .illust-furuzamami {
    position: absolute;
    bottom: -10px;
    right: -18px;
    width: 34%;
    z-index: 10;
  }
  .illust-zsc {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36%;
    z-index: 10;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1023px) {
  .pickup-wrap {
    margin: 10%;
  }
  .top-sub-title {
    font-size: 4.8rem;
    margin: 64px 0 40px;
  }
  .pickup-content {
    display: flex;
    flex-wrap: wrap;
  }
  .pickup-content a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .col1,
  .col2,
  .col3,
  .col4 {
    padding: 40px 0 10%;
    position: relative;
    text-align: left;
    width: 100%;
  }
  .bundle1,
  .bundle2,
  .bundle3,
  .bundle4 {
    margin: 0;
  }
  .pickup-shoulder-txt {
    font-size: 3vw;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .pickup-title {
    font-size: 12vw;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 0.9;
    margin-bottom: 8px;
    text-align: left;
  }
  .pickup-copy-txt {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .img-set1,
  .img-set2 {
    position: relative;
  }
  .img-set1 figure,
  .img-set2 figure {
    border-radius: 15px;
    behavior: url(border-radius.htc);
    position: relative;
    overflow: hidden;
    z-index: 5;
  }
  .illust-ama {
    position: absolute;
    top: -110px;
    right: -20px;
    width: 30%;
    z-index: 10;
  }
  .illust-agenashiku {
    position: absolute;
    top: -110px;
    right: 10px;
    width: 30%;
    z-index: 10;
  }
  .illust-gozamami {
    position: absolute;
    top: -110px;
    right: 10px;
    width: 30%;
    z-index: 10;
  }
  .illust-urunosachi {
    position: absolute;
    top: -110px;
    right: 10px;
    width: 30%;
    z-index: 10;
  }
  .illust-furuzamami {
    position: absolute;
    bottom: -30px;
    right: -54px;
    width: 36%;
    z-index: 10;
  }
  .illust-zsc {
    position: absolute;
    top: -160px;
    right: 40px;
    width: 30%;
    z-index: 10;
  }
}
/* ------ DESKTOP ------ */
@media screen and ( min-width:1024px) {
  .pickup-wrap {
    margin: 128px 0;
  }
  .top-sub-title {
    font-size: 4.8rem;
    margin: 128px 0 80px;
  }
  .pickup-content {
    display: flex;
    flex-wrap: wrap;
  }
  .pickup-content a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .col1 {
    position: relative;
    text-align: left;
    width: 63%;
  }
  .col2 {
    margin-top: 172px;
    padding-bottom: 128px;
    position: relative;
    text-align: left;
    width: 37%;
  }
  .col3 {
    margin-top: -160px;
    position: relative;
    text-align: left;
    width: 37%;
  }
  .col4 {
    position: relative;
    text-align: left;
    width: 63%;
  }
  .bundle1 {
    margin: 0 10% 0 26.8%;
  }
  .bundle2 {
    margin: 0 18.4% 0 6.4%;
  }
  .bundle3 {
    margin: 0 6.4% 0 18.4%;
  }
  .bundle4 {
    margin: 0 26.8% 0 10%;
  }
  .pickup-shoulder-txt {
    font-size: 1.4vw;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .pickup-title {
    font-size: 5vw;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 0.9;
    margin-bottom: 8px;
    text-align: left;
  }
  .pickup-copy-txt {
    color: var(--SecondaryText);
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 40px;
  }
  .img-set1,
  .img-set2 {
    position: relative;
  }
  .img-set1 figure,
  .img-set2 figure {
    border-radius: 15px;
    behavior: url(border-radius.htc);
    overflow: hidden;
    position: relative;
    z-index: 5;
  }
  .img-set1 figure img,
  .img-set2 figure img {
    transition: 500ms;
  }
  .img-set1 figure:hover img,
  .img-set2 figure:hover img {
    transform: scale(1.1);
  }
  .illust-ama {
    position: absolute;
    bottom: -40px;
    right: -30px;
    width: 36%;
    z-index: 10;
  }
  .illust-agenashiku {
    position: absolute;
    top: -88px;
    right: -48px;
    width: 40%;
    z-index: 10;
  }
  .illust-gozamami {
    position: absolute;
    bottom: -65px;
    right: -60px;
    width: 40%;
    z-index: 10;
  }
  .illust-urunosachi {
    position: absolute;
    top: -80px;
    right: -48px;
    width: 42%;
    z-index: 10;
  }
  .illust-furuzamami {
    position: absolute;
    bottom: -42px;
    right: -80px;
    width: 36%;
    z-index: 10;
  }
  .illust-zsc {
    position: absolute;
    top: -80px;
    right: -12px;
    width: 36%;
    z-index: 10;
  }
}
/* ------ イラストふわふわ揺れる ------ */
.fluffy1 {
  animation: fluffy1 3.5s ease infinite;
}
@keyframes fluffy1 {
  0% {
    transform: translateY(0)
  }
  5% {
    transform: translateY(0)
  }
  10% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-10px)
  }
  25% {
    transform: translateY(0)
  }
  30% {
    transform: translateY(-10px)
  }
  50% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(0)
  }
}
.fluffy2 {
  animation: fluffy2 3.5s ease infinite;
}
@keyframes fluffy2 {
  0% {
    transform: translateX(0)
  }
  5% {
    transform: translateX(0)
  }
  10% {
    transform: translateX(0)
  }
  20% {
    transform: translateX(-10px)
  }
  25% {
    transform: translateX(0)
  }
  30% {
    transform: translateX(-10px)
  }
  50% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(0)
  }
}

/************************************************************************************
SEA / TIPS / ITEM INDEX
*************************************************************************************/

h2 {
  font: 100%/1 din-condensed, YuGothic, "Yu Gothic Medium", "Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-feature-settings: "palt";
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
}
.card {
  text-align: left;
  overflow: hidden;
}
.card a {
  display: block;
  height: 100%;
  width: 100%;
}
.card h3 {
  color: var(--PrimaryText);
  line-height: 1.4;
}
.card p {
  color: var(--TertiaryText);
  font: 100%/1 din-condensed, sans-serif;
  font-weight: 300;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}

/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  h2 {
    font-size: 3.2rem;
  }
  .page-tit {
    padding: 128px 0 40px 0;
  }
  .card-container {
    margin: 0 32px 40px;
  }
  .card-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .card {
    margin: 0 0 40px;
    position: relative;
    width: 100%;
  }
  .card figure {
    background: var(--BaseColor1);
    border-radius: 15px;
    behavior: url(border-radius.htc);
    max-height: 394px;
    max-width: 700px;
    overflow: hidden;
    position: relative;
  }
  .card img {
    vertical-align: top;
  }
  .card h3 {
    font-size: 1.6rem;
    margin: 16px 0 4px 0;
  }
  .card p {
    font-size: 1.4rem;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1023px) {
  h2 {
    font-size: 4.8rem;
  }
  .page-tit {
    padding: 160px 0 48px 0;
  }
  .card-container {
    margin: 0 8% 48px;
  }
  .card-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card {
    margin-bottom: 80px;
    width: 45%;
  }
  .card figure {
    background: var(--BaseColor1);
    border-radius: 15px;
    behavior: url(border-radius.htc);
    max-height: 394px;
    max-width: 700px;
    overflow: hidden;
    position: relative;
  }
  .card figure img {
    margin: 0;
    vertical-align: top;
  }
  .card h3 {
    font-size: 1.6rem;
    margin: 16px 0 4px;
  }
  .card p {
    font-size: 1.4rem;
  }
}
/* ------ DESKTOP ------ */
@media screen and ( min-width:1024px) {
  h2 {
    font-size: 4.8rem;
  }
  .page-tit {
    padding: 160px 0 48px 0;
  }
  .card-container {
    margin: 0 auto 96px;
    padding: 0 120px;
    max-width: 1640px;
  }
  .card-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card {
    margin-bottom: 80px;
    width: 27%;
  }
  .card a:hover {
    opacity: 0.8;
  }
  .card figure {
    background: var(--BaseColor1);
    border-radius: 15px;
    behavior: url(border-radius.htc);
    max-height: 394px;
    max-width: 700px;
    overflow: hidden;
    position: relative;
    z-index: 5;
  }
  .card figure img {
    transition: 500ms;
  }
  .card figure:hover img {
    transform: scale(1.1);
  }
  .card h3 {
    font-size: 1.6rem;
    margin: 16px 0 4px;
  }
  .card p {
    font-size: 1.4rem;
  }
}

/************************************************************************************
SEA & TIPS DETAIL TEMPLATE
*************************************************************************************/

/* ----- MAIN VISUAL BACKGROUND-IMAGE BEGIN ---*/
/* ------ MOBILE ------ */
@media screen and ( max-width:450px) {
  div#ama {
    background: url(/assets/sea/ama/thumbnail.jpg) no-repeat center center;
  }
  div#furuzamami {
    background: url(/assets/sea/furuzamami/thumbnail.jpg) no-repeat center center;
  }
  div#agenashiku {
    background: url(/assets/sea/agenashiku/thumbnail.jpg) no-repeat center center;
  }
  div#gahi {
    background: url(/assets/sea/gahi/thumbnail.jpg) no-repeat center center;
  }
  div#amuro {
    background: url(/assets/sea/amuro/thumbnail.jpg) no-repeat center center;
  }
  div#urunosachi {
    background: url(/assets/sea/urunosachi/thumbnail.jpg) no-repeat center center;
  }
  div#yuhina {
    background: url(/assets/sea/yuhina/thumbnail.jpg) no-repeat center center;
  }
  div#north_furuzamami {
    background: url(/assets/sea/north_furuzamami/thumbnail.jpg) no-repeat center center;
  }
  div#nitacave {
    background: url(/assets/sea/nitacave/thumbnail.jpg) no-repeat center center;
  }
  div#sunset {
    background: url(/assets/tips/sunset/thumbnail.jpg) no-repeat center center;
  }
  div#sunrise {
    background: url(/assets/tips/sunrise/thumbnail.jpg) no-repeat center center;
  }
  div#milkyway {
    background: url(/assets/tips/milkyway/thumbnail.jpg) no-repeat center center;
  }
  div#gozamami {
    background: url(/assets/tips/gozamami/thumbnail.jpg) no-repeat center center;
  }
  div#sup_day {
    background: url(/assets/tips/sup/thumbnail.jpg) no-repeat center center;
  }
  div#sup_sunset {
    background: url(/assets/tips/sup_sunset/thumbnail.jpg) no-repeat center center;
  }
}
/* ------ TABLET & PC ------ */
@media screen and ( min-width:451px) {
  div#ama {
    background: url(/assets/sea/ama/main.jpg) no-repeat center center;
  }
  div#furuzamami {
    background: url(/assets/sea/furuzamami/main.jpg) no-repeat center center;
  }
  div#agenashiku {
    background: url(/assets/sea/agenashiku/main.jpg) no-repeat center center;
  }
  div#gahi {
    background: url(/assets/sea/gahi/main.jpg) no-repeat center center;
  }
  div#amuro {
    background: url(/assets/sea/amuro/main.jpg) no-repeat center center;
  }
  div#urunosachi {
    background: url(/assets/sea/urunosachi/main.jpg) no-repeat center center;
  }
  div#yuhina {
    background: url(/assets/sea/yuhina/main.jpg) no-repeat center center;
  }
  div#north_furuzamami {
    background: url(/assets/sea/north_furuzamami/main.jpg) no-repeat center center;
  }
  div#nitacave {
    background: url(/assets/sea/nitacave/main.jpg) no-repeat center center;
  }
  div#sunset {
    background: url(/assets/tips/sunset/main.jpg) no-repeat center center;
  }
  div#sunrise {
    background: url(/assets/tips/sunrise/main.jpg) no-repeat center center;
  }
  div#milkyway {
    background: url(/assets/tips/milkyway/main.jpg) no-repeat center center;
  }
  div#gozamami {
    background: url(/assets/tips/gozamami/main.jpg) no-repeat center center;
  }
  div#sup_day {
    background: url(/assets/tips/sup/main2.jpg) no-repeat center center;
  }
  div#sup_sunset {
    background: url(/assets/tips/sup_sunset/main2.jpg) no-repeat center center;
  }
}
/* ----- MAIN VISUAL BACKGROUND IMAGE END ---- */

main section {
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.detail-wrap {
  background: var(--BaseColor1);
}
.primary b {
  color: var(--PrimaryText);
  display: inline-block;
  font-family: din-condensed, sans-serif;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
  position: relative;
}
.primary b span {
  font-weight: 400;
}

.catch-icon {
  display: block;
  fill: var(--TertiaryText);
  height: 48px;
  margin: 48px auto 16px;
  width: 48px;
}
.detail-tit {
  color: var(--SecondaryText);
  font-feature-settings: "palt";
  font-weight: normal;
  letter-spacing: 0.1em;
}
.evaluation {
  display: block;
  fill: var(--SecondaryText);
  height: 12px;
  margin: 0 auto 96px;
  width: 170px;
}
.image-group {
  text-align: left;
}
.txt-group {
  text-align: left;
}
.text-sign1 {
  bottom: -15%;
  position: absolute;
  right: 0;
  width: 50%;
  z-index: 10;
}
.text-sign1b {
  left: 0;
  position: absolute;
  top: -15%;
  width: 50%;
  z-index: 10;
}
.txt-group a.btn {
  border-radius: 32px;
  behavior: url(border-radius.htc);
  margin-top: 1.5em;
  line-height: 1;
  font-size: 1.6rem;
  text-align: center;
  padding: 1.2em 1.2em 1.2em 1.8em;
  background: transparent;
  transition: all 0.3s ease;
  position: relative;
  display: block;
  color: var(--PrimaryText);
  border: 1px solid var(--Border);
  z-index: 1;
  overflow: hidden;
  box-shadow: 0px 8px 8px -8px rgba(0,0,0,0.1);

}
.txt-group a.btn::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--PrimaryText);
  transition: all 0.3s ease;
}
.txt-group a.btn:hover {
  color: var(--BaseColor1);
}
.txt-group a.btn:hover::after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.layout3 .txt-group h5 {
  border-bottom: solid 1px var(--Border);
  color: var(--PrimaryText);
  letter-spacing: 0.05em;
  line-height: 1.6;
}
.layout3 .txt-group p.map-info {
  color: var(--SecondaryText);
  display: block;
  line-height: 1.8;
  text-align: left;
}
/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  .detail-wrap {
    padding: 128px 0 0 0;
  }
  div#ama,
  div#furuzamami,
  div#agenashiku,
  div#gahi,
  div#amuro,
  div#urunosachi,
  div#yuhina,
  div#north_furuzamami,
  div#nitacave,
  div#sunset,
  div#sunrise,
  div#milkyway,
  div#gozamami,
  div#sup_day,
  div#sup_sunset {
    background-size: contain;
    height: 0;
    padding-top: 56.28%;/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
  }
  .primary b {
    font-size: 12vw;
    margin: 48px 0 0 0;
  }
  .primary b.with-icon {
    font-size: 12vw;
    margin: 0 0 0 0;
  }
  .primary h2.detail-tit {
    font-size: 4.3vw;
    line-height: 1.6;
    margin: 8px 0 16px 0;
  }
  .layout1,
  .layout2 {
    margin: 0 0 96px 0;
  }
  .txt-group {
    padding: 0 40px;
  }
  .txt-group h3 {
    font-size: 2rem;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 40px 0 24px;
  }
  .txt-group p {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0 0 8px;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  .txt-group p.caution {
    color: var(--SecondaryText);
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin: 16px 0 0;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  .txt-group p.auxiliary {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin: 32px 0 0;
    text-justify: inter-ideograph;
  }
  /* ------ iPhoneで見るとFont Awesomeアイコン位置が崩れるので対策 ------ */
  .txt-group p.for-iPhone {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0 0 8px;
    text-align: left;
  }
  h4.detail-subtit {
    color: var(--PrimaryText);
    font-size: 7vw;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.05em;
    margin: 48px 0;
  }
  .layout3 {
    margin: 0 0 96px 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .layout3 .txt-group h5 {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 32px 0 12px;
  }
  .layout3 .txt-group p.map-info {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: left;
    margin: 0 0 1.4rem;
  }
  .pager-nav {
    margin-bottom: 96px;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-size: 4.8rem;
    font-style: normal;
    letter-spacing: 0.05em;
    background: var(--BaseColor2);
    transition: all 0.3s ease;
    z-index: 1;
  }
  .pager-title {
    padding: 3em 0;
    color: var(--PrimaryText);
    display: block;
    font-size: 8vw;
    font-weight: 400;
    line-height: 1;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
  }
  .pager-title::before {
    content: 'NEXT';
    font-size: 4vw;
    font-weight: 300;
    position: absolute;
    top: 30%;
    left: 45.3%;
    text-align: center;
  }
  .pager-title::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px var(--PrimaryText);
    border-right: solid 2px var(--PrimaryText);
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -5px;
    transform: rotate(45deg);
    transition: all .3s;
  }
  .pager-title:hover::after {
    right: 20px;
  }
  .layout3 .image-group {
    border: solid 1px var(--MapBorder);
  }
}
/* ------ TABLET PC ------ */
@media screen and ( min-width:768px) {
  .detail-wrap {
    padding: 136px 0 0 0;
  }
  div#ama,
  div#furuzamami,
  div#agenashiku,
  div#gahi,
  div#amuro,
  div#urunosachi,
  div#yuhina,
  div#north_furuzamami,
  div#nitacave,
  div#sunset,
  div#sunrise,
  div#milkyway,
  div#gozamami,
  div#sup_day,
  div#sup_sunset {
    background-size: contain;
    height: 0;
    padding-top: 580px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .primary b {
    font-size: 13vw;
    margin: 56px 0 0 0;
  }
  .catch-icon {
    fill: var(--TertiaryText);
    height: 64px;
    margin: 80px auto 24px;
    width: 64px;
  }
  b.with-icon {
    font-size: 10vw;
    margin: 0 0 0 0;
  }
  .detail-tit {
    font-size: 2vw;
    line-height: 1.4;
    margin: 16px 0 16px 0;
  }
  .evaluation {
    height: 15px;
    margin: 0 auto 10%;
    width: 220px;
  }
  .layout2,
  .layout1 {
    margin: 0 auto 10%;
    max-width: 600px;
  }
  .txt-group h3 {
    font-feature-settings: "palt";
    font-size: 2.2rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 40px 0 24px;
  }
  .txt-group p {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    line-height: 2;
    margin: 0 0 8px;
  }
  .txt-group p.caution {
    color: var(--SecondaryText);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
    padding: 16px 0 0 0;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  .txt-group p.auxiliary {
    color: var(--SecondaryText);
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin: 32px 0 0 0;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  h4.detail-subtit {
    color: var(--PrimaryText);
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-size: 4rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 8% 0;
  }
  .layout3 {
    margin: 0 auto 10%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    max-width: 600px;
  }
  .layout3 .txt-group h5 {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 40px 0 12px;
  }
  .layout3 .txt-group p.map-info {
    font-size: 1.6rem;
  }
  .pager-nav {
    margin-bottom: 96px;
    font-family: din-condensed, sans-serif;
    font-feature-settings: "palt";
    font-size: 4.8rem;
    font-style: normal;
    letter-spacing: 0.08em;
    background: var(--BaseColor2);
    transition: all 0.3s ease;
    z-index: 1;
  }
  .pager-title {
    padding: 2.4em 0;
    color: var(--PrimaryText);
    display: block;
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
  }
  .pager-title::before {
    content: 'NEXT';
    position: absolute;
    top: 32%;
    left: 47.2%;
    font-size: 1.8rem;
    font-weight: 300;
  }
  .pager-title::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 0;
    border-top: solid 2px var(--PrimaryText);
    border-right: solid 2px var(--PrimaryText);
    position: absolute;
    top: 50%;
    right: 72px;
    margin-top: -6px;
    transform: rotate(45deg);
    transition: all .3s;
  }
  .pager-title:hover::after {
    right: 62px;
  }
  .layout3 .image-group {
    border: solid 1px var(--MapBorder);
  }
}

/************************************************************************************
ITEM DETAIL
*************************************************************************************/

.item-wrap b {
  color: var(--PrimaryText);
  display: inline-block;
  font-family: din-condensed, sans-serif;
  font-feature-settings: "palt";
  line-height: 1;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.item-wrap h2 {
  color: var(--SecondaryText);
  font-feature-settings: "palt";
  font-weight: normal;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.item-wrap h3 {
  color: var(--PrimaryText);
  font-family: din-condensed, sans-serif;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}
.item-wrap p {
  color: var(--TertiaryText);
  font-feature-settings: "palt";
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.image-product {
  min-height: 0%;
}
.image-product .thumb {
  background-color: var(--ImgBgColor);
}
.txt-product {
  text-align: left;
}
.txt-product h4,
.txt-product h4.single-img {
  color: var(--PrimaryText);
  line-height: 1.2;
}
.txt-product p.description {
  color: var(--SecondaryText);
  text-align: justify;
  text-justify: inter-ideograph;
}
.txt-product p.price {
  color: var(--TertiaryText);
}
.item-grid a.store-btn {
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  border-radius: 8px;
  behavior: url(border-radius.htc);
  border: 1px solid var(--BaseColor1);
  margin: auto 32px 0;
  line-height: 1.2;
  font-size: 2rem;
  text-align: center;
  padding: 1.2em 1.2em 1em 1.8em;
  background: var(--PrimaryText);
  transition: all 0.3s ease;
  position: relative;
  display: block;
  color: var(--BaseColor1);
  z-index: 1;
  overflow: hidden;
}
.item-grid a.store-btn::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--SecondaryText);
  transition: all 0.3s ease;
}
.item-grid a.store-btn:hover {
  color: var(--BaseColor1);
}
.item-grid a.store-btn:hover::after {
  top: auto;
  bottom: 0;
  height: 100%;
}


/* ------ MOBILE ------ */

@media screen and ( max-width:767px) {
  .item-wrap {
    max-width: 767px;
    margin: 0 auto;
  }
  .item-wrap b {
    line-height: 1;
    letter-spacing: 0.02em;
    display: inline-block;
    font-size: 3.2rem;
    margin: 128px 0 0 0;
  }
  .item-wrap h2 {
    letter-spacing: 0.1em;
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 8px 0 64px 0;
  }
  .item-wrap h3 {
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 32px 0 40px;
  }
  .item-category {
    display: flex;
    flex-direction: column;
    margin: 0 0 48px;
  }
  .item-grid {
    width: calc(100% / 1);
    margin-bottom: 72px;
  }
  .image-product {
    padding: 0 0;
  }
  .txt-product {
    text-align: left;
    padding: 0 40px 24px;
  }
  .txt-product h4,
  .txt-product h4.single-img {
    font-size: 2rem;
    margin: 40px 0 16px 0;
  }
  .txt-product p.description {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 8px 0 0 0;
  }
  .txt-product p.description-sub {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 4px 0 0 0;
  }
  .txt-product p.price {
    font-size: 1.2rem;
    margin: 8px 0 0 0;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1023px) {
  .item-wrap {
    margin: 0 auto;
    max-width: 1023px;
  }
  .item-wrap b {
    display: inline-block;
    font-size: 6rem;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 168px 0 0 0;
  }
  .item-wrap h2 {
    font-size: 2.2rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 8px 0 96px 0;
  }
  .item-wrap h3 {
    font-size: 3.2rem;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 64px 0 40px;
  }
  .item-category {
    display: flex;
    justify-content: space-between;
    margin: 0 10% 48px;
  }
  .item-grid {
    border: 1px solid var(--BaseColor1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 48px;
    width: calc(100% / 3);
  }
  .txt-product {
    padding: 0 16px 16px;
    text-align: left;
  }
  .txt-product h4 {
    font-size: 1.8rem;
    margin: 0;
  }
  .txt-product h4.single-img {
    font-size: 1.8rem;
    margin: 30px 0 0 0;
  }
  .txt-product p.description {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 8px 0 0 0;
  }
  .txt-product p.description-sub {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 4px 0 0 0;
  }
  .txt-product p.price {
    font-size: 1.2rem;
    margin: 8px 0 0 0;
  }
  .item-grid a.store-btn {
    margin: auto 16px 0;
  }
}


/* ------ DESKTOP ------ */

@media screen and ( min-width:1024px) {
  .item-wrap {
    margin: 0 auto;
    max-width: 1640px;
    padding: 0 120px;
  }
  .item-wrap b {
    display: inline-block;
    font-size: 5vw;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 168px 0 0 0;
  }
  .item-wrap h2 {
    font-size: 2.2rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 8px 0 96px 0;
  }
  .item-wrap h3 {
    font-size: 3vw;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 64px 0 40px;
  }
  .item-category {
    display: flex;
    justify-content: space-between;
    margin: 0 0 80px;
  }
  .item-grid {
    border: 0.5px solid var(--BaseColor1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    width: calc(100% / 3);
  }
  .txt-product {
    padding: 0 32px 24px;
    text-align: left;
  }
  .txt-product h4 {
    font-size: 1.8rem;
    margin: 8px 0 0 0;
  }
  .txt-product h4.single-img {
    font-size: 1.8rem;
    margin: 38px 0 0 0;
  }
  .txt-product p.description {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 16px 0 0 0;
  }
  .txt-product p.description-sub {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 4px 0 0 0;
  }
  .txt-product p.price {
    font-size: 1.2rem;
    margin: 8px 0 0 0;
  }
}


/************************************************************************************
ABOUT
*************************************************************************************/

.about {
  background: var(--BaseColor1);
}
.about-wrap {
  text-align: center;
}
.about-inner {
  background: #fff;
  margin: 0 auto;
}
.credit-tit {
  color: #666;
  display: block;
  font-family: din-condensed, sans-serif;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: center;
}
.credit-name {
  font-family: din-condensed, sans-serif;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.18em;
  line-height: 2;
  display: block;
  text-align: center;
}
.credit-name {
  color: #666;
}
.credit-name a {
  color: #666;
}
.credit-name a:hover {
  color: #262626;
}
.credit-name i {
  padding-bottom: 0.2em;
  margin-left: 0.2em;
}
/* ------ MOBILE ------ */

@media screen and ( max-width:767px) {
  .about-wrap {
    padding: 63px 0 0 0;
  }
  .keybg {
    height: 326px;
    overflow: hidden;
    position: relative;
  }
  .slider {
    background-color: #212121;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .slider .image {
    animation: anime 15s 0s infinite;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  .slider .image:nth-of-type(1) {
    background-image: url(/assets/about/key_sp1.jpg);
  }
  .slider .image:nth-of-type(2) {
    animation-delay: 5s;
    background-image: url(/assets/about/key_sp2.jpg);
  }
  .slider .image:nth-of-type(3) {
    animation-delay: 10s;
    background-image: url(/assets/about/key_sp3.jpg);
  }
  #logo-motion {
    height: 173px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 76px;
    width: 230px;
    z-index: 10;
  }
  .about-inner {
    padding: 48px 0 80px;
  }
  #overview {
    width: 320px;
    height: 192px;
    margin: 0 auto 48px;
  }
  .credit {
    padding: 0 20px;
  }
  .credit-tit {
    font-size: 1.4rem;
    margin: 0 0 8px 0;
  }
  .credit-name {
    font-size: 1.2rem;
  }
}
/* ------ TABLET & DESKTOP ------ */
@media screen and (min-width:768px) {
  .about-wrap {
    padding: 128px 0 0 0;
  }
  .keybg {
    height: 500px;
    overflow: hidden;
    position: relative;
  }
  .slider {
    background-color: #212121;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .slider .image {
    animation: anime 15s 0s infinite;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  .slider .image:nth-of-type(1) {
    background-image: url(/assets/about/key_pc1.jpg);
  }
  .slider .image:nth-of-type(2) {
    animation-delay: 5s;
    background-image: url(/assets/about/key_pc2.jpg);
  }
  .slider .image:nth-of-type(3) {
    animation-delay: 10s;
    background-image: url(/assets/about/key_pc3.jpg);
  }
  #logo-motion {
    height: 300px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 104px;
    width: 400px;
    z-index: 10;
  }
  .about-inner {
    padding: 72px 0 96px;
  }
  #overview {
    height: 230px;
    margin: 0 auto 72px;
    width: 383px;
  }
  .credit {
    padding: 0 20px;
  }
  .credit-tit {
    font-size: 1.4rem;
    margin: 0 0 8px 0;
  }
  .credit-name {
    font-size: 1.4rem;
  }
}
@keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}
/************************************************************************************
FAQ
*************************************************************************************/

.faq-nav-list {
  color: var(--PrimaryText);
  font-feature-settings: "palt";
  font-style: normal;
  text-align: center;
}
.faq-nav-text {
  font-size: 1.6rem;
  font-weight: normal;
  margin-top: 12px;
}
.faq-tit {
  color: var(--PrimaryText);
  font-feature-settings: "palt";
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1;
}
.accordionbox {
  border-top: 1px solid var(--Border);
  border-bottom: 1px solid var(--Border);
  padding: 0;
}
.faq-question {
  background: var(--BaseColor1);
  border-top: 1px solid var(--Border);
  cursor: pointer;
  display: block;
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  transition: all .3s;
}
.faq-q-title {
  font-weight: normal;
}
.faq-question:first-child {
  border-top: none;
}
.caution-txt {
  font-size: 1.4rem;
  line-height: 1.8;
}
.faq-img {
  margin: 48px 0 0;
}
.faq-map-img {
  border: 1px solid var(--Border);
  border-radius: 15px;
  max-width: 440px;
}
/* accordion icon */
.accordion_icon {
  margin-left: auto;
  height: 30px;
  position: relative;
  top: 3px;
  width: 30px;
}
.accordion_icon,
.accordion_icon span {
  box-sizing: border-box;
  display: inline-block;
  transition: all .4s;
}
.accordion_icon span {
  background-color: var(--PrimaryText);
  border-radius: 4px;
  height: 2px;
  left: 6px;
  position: absolute;
  width: 50%;
}
.accordion_icon span:nth-of-type(1) {
  top: 5px;
  transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
  top: 5px;
  transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
  display: none;
}
.accordion_icon.active span:nth-of-type(2) {
  top: 5px;
  transform: rotate(180deg);
}


/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  #faq-sea,
  #faq-hostel,
  #faq-foods,
  #faq-ferry,
  #faq-festival,
  #faq-other {
    margin-top: -96px;
    padding-top: 96px;
  }
  .faq-wrap {
    background: var(--BaseColor1);
    margin: 0 auto;
    max-width: 767px;
  }
  .faq-nav {
    background: var(--BaseColor1);
    display: inline-block;
    margin: 0 0 80px;
    width: 324px;
  }
  .faq-nav-list {
    background: var(--BaseColor1);
    float: left;
    margin: 0 17px 30px 17px;
    width: 74px;
  }
  .faq-nav-list a svg {
    fill: var(--PrimaryText);
  }
  .faq-nav-list a:active svg {
    fill: var(--TertiaryText);
  }
  .faq-wrap h3.faq-tit {
    font-size: 6vw;
    margin-bottom: 40px;
  }
  .faq-inner {
    margin: 0;
  }
  .accordionbox {
    margin: 0 auto 96px;
  }
  .faq-question:active {
    background: var(--BaseColor2);
  }
  .faq-q-title {
    font-size: 4.7vw;
    margin: 8px 32px;
  }
  .accordion_icon {
    margin: 10px 24px 0 0;
  }
  .faq-answer {
    background: var(--BaseColor1);
    color: var(--SecondaryText);
    display: none;
    font-size: 1.6rem;
    line-height: 1.8;
    padding: 16px 0 64px;
    text-align: left;
    text-justify: inter-ideograph;
  }
  .faq-txt {
    margin: 0 32px 8px;
  }
  .faq-subtxt {
    margin: 24px 32px 0;
  }
  .faq-img {
    margin: 32px 0 0;
  }
  .faq-map-img {
    border: none solid var(--Border);
    border-radius: 0;
    max-width: 100%;
  }
  .faq-indent-2 {
    padding-left: 2em;
    text-indent: -2em;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1279px) {
  #faq-sea,
  #faq-hostel,
  #faq-foods,
  #faq-ferry,
  #faq-festival,
  #faq-other {
    margin-top: -152px;
    padding-top: 152px;
  }
  .faq-wrap {
    margin: 0 auto;
    max-width: 1279px;
  }
  .faq-nav {
    background: var(--BaseColor1);
    display: inline-block;
    margin: 0 10% 144px;
  }
  .faq-nav-list {
    background: var(--BaseColor1);
    float: left;
    margin: 0;
    width: calc(100% / 6);
  }
  .faq-nav-list a svg {
    fill: var(--PrimaryText);
  }
  .faq-nav-list a:hover svg {
    fill: var(--SecondaryText);
  }
  .faq-nav-list a:active svg {
    fill: var(--TertiaryText);
  }
  .faq-nav-list svg {
    width: 60%;
  }
  .faq-wrap h3.faq-tit {
    font-size: 2.6rem;
    margin-bottom: 40px;
  }
  .faq-inner {
    margin: 0 10%;
  }
  .accordionbox {
    margin: 0 auto 128px;
  }
  .faq-question:hover {
    background: var(--BaseColor2);
  }
  .faq-q-title {
    font-size: 1.8rem;
    margin: 10px 0 0 16px;
  }
  .accordion_icon {
    margin: 10px 10px 0 0;
  }
  .faq-answer {
    background: var(--BaseColor1);
    color: var(--SecondaryText);
    display: none;
    text-align: left;
    font-size: 1.6rem;
    line-height: 1.8;
    max-width: 440px;
    margin: 16px auto 64px;
  }
  .faq-txt {
    margin: 0 0 8px 0;
  }
  .faq-subtxt {
    margin: 20px 0 0;
  }
  .faq-indent-2 {
    padding-left: 2em;
    text-indent: -2em;
  }
}
/* ------ DESKTOP ------ */
@media screen and ( min-width:1280px) {
  #faq-sea,
  #faq-hostel,
  #faq-foods,
  #faq-ferry,
  #faq-festival,
  #faq-other {
    margin-top: -152px;
    padding-top: 152px;
  }
  .faq-wrap {
    margin: 0 auto;
  }
  .faq-nav {
    background: var(--BaseColor1);
    display: inline-block;
    margin: 0 20% 144px;
  }
  .faq-nav-list {
    background: var(--BaseColor1);
    float: left;
    margin: 0;
    width: calc(100% / 6);
  }
  .faq-nav-list a svg {
    fill: var(--PrimaryText);
  }
  .faq-nav-list a:hover svg {
    fill: var(--SecondaryText);
  }
  .faq-nav-list a:active svg {
    fill: var(--TertiaryText);
  }
  .faq-nav-list svg {
    width: 60%;
  }
  .faq-wrap h3.faq-tit {
    font-size: 2.6rem;
    margin-bottom: 40px;
  }
  .faq-inner {
    margin: 0 20%;
  }
  .accordionbox {
    margin: 0 auto 128px;
  }
  .faq-question:hover {
    background: var(--BaseColor2);
  }
  .faq-q-title {
    font-size: 1.8rem;
    margin: 10px 0 0 16px;
  }
  .accordion_icon {
    margin: 10px 10px 0 0;
  }
  .faq-answer {
    background: var(--BaseColor1);
    color: var(--SecondaryText);
    display: none;
    font-size: 1.6rem;
    line-height: 1.8;
    padding: 16px 80px 64px;
    text-align: left;
    text-justify: inter-ideograph;
  }
  .faq-txt {
    margin: 0 0 1em 0;
  }
  .faq-subtxt {
    margin: 20px 0 0;
  }
  .faq-indent-2 {
    padding-left: 2em;
    text-indent: -2em;
  }
}

/************************************************************************************
CONTACT
*************************************************************************************/

#formWrap {
  color: var(--PrimaryText);
}
#formWrap p {
  line-height: 1.8;
}
.form-set {
  margin: 0 auto;
  width: 100%;
}
.form-set p {
  font-size: 1.6rem;
  margin: 0 0 8px 0;
}
p.error_messe {
  color: var(--ErrorText);
  line-height: 2;
}
#formWrap form div {
  color: var(--PrimaryText);
  padding: 16px 0 0 0;
}
input[type="text"],
input[type="email"],
textarea {
  background-color: var(--BaseColor2);
  border: 1px solid var(--Border);
  color: var(--PrimaryText);
  font-size: 1.6rem;
  margin: 0 0 24px 0;
  outline: none;
  padding: 10px;
  transition: all .3s;
  -webkit-transition: all .3s;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  background-color: var(--BaseColor1);
  border: 1px solid var(--Border);
  box-shadow: 0 0 10px var(--Border);
  color: var(--PrimaryText);
}
/* 入力エリアの入力前の文字色 */
::-webkit-input-placeholder {
  color: var(--TertiaryText);
}
::-moz-placeholder {
  color: var(--TertiaryText);
}
:-ms-input-placeholder {
  color: var(--TertiaryText);
}
div.form-btn {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
input.btn {
  background-color: var(--PrimaryText);
  border-style: none;
  color: var(--BaseColor1);
  cursor: pointer;
  font-size: 1.6rem;
  margin: 4px;
  padding: 1em 2.5em;
  border-radius: 32px;
  behavior: url(border-radius.htc);
}
input.btn-back {
  background-color: var(--BaseColor1);
  border-style: none;
  color: var(--PrimaryText);
  cursor: pointer;
  font-size: 1.6rem;
  margin-top: 24px;
  padding: 1em 2.5em;
  text-decoration: underline;
}
input.btn:hover {
  background-color: var(--SecondaryText);
}

/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  #formWrap {
    margin: 0 32px 80px;
  }
  #formWrap h3 {
    font-size: 1.6rem;
  }
  #formWrap p {
    font-size: 1.6rem;
  }
  .form-set input.name,
  .form-set input.mail {
    width: 100%;
  }
  .form-set textarea.comment {
    height: 140px;
    width: 100%;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1279px) {
  #formWrap {
    margin: 0 10% 128px;
  }
  #formWrap h3 {
    font-size: 2rem;
  }
  #formWrap p {
    font-size: 1.6rem;
  }
  .form-set input.name,
  .form-set input.mail {
    width: 50%;
  }
  .form-set textarea.comment {
    height: 140px;
    width: 100%;
  }
}
/* ------ DESKTOP ------ */
@media screen and (min-width:1280px) {
  #formWrap {
    margin: 0 20% 128px;
  }
  #formWrap h3 {
    font-size: 2rem;
  }
  #formWrap p {
    font-size: 1.6rem;
  }
  .form-set input.name,
  .form-set input.mail {
    width: 50%;
  }
  .form-set textarea.comment {
    height: 140px;
    width: 100%;
  }
}

/************************************************************************************
TERMS OF USE / PRIVACY POLICY
*************************************************************************************/

.inner-text {
  text-align: left;
}
.inner-text h3 {
  color: var(--PrimaryText);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.inner-text p {
  color: var(--SecondaryText);
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-ideograph;
}
.inner-text p.enactment {
  text-align: right;
}

/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  .inner-text {
    margin: 0 32px;
  }
  .inner-text h3 {
    font-size: 2rem;
  }
  .inner-text p {
    font-size: 1.6rem;
  }
  .inner-text p.enactment {
    margin-bottom: 48px;
  }
}
/* ------ TABLET ------ */
@media screen and ( min-width:768px) and (max-width: 1279px) {
  .inner-text {
    margin: 0 10%;
  }
  .inner-text h3 {
    font-size: 2rem;
  }
  .inner-text p {
    font-size: 1.6rem;
  }
  .inner-text p.enactment {
    margin-bottom: 128px;
  }
}
/* ------ DESKTOP ------ */
@media screen and (min-width:1280px) {
  .inner-text {
    margin: 0 20%;
  }
  .inner-text h3 {
    font-size: 2rem;
  }
  .inner-text p {
    font-size: 1.6rem;
  }
  .inner-text p.enactment {
    margin-bottom: 128px;
  }
}

/************************************************************************************
revealEffects - boxSlideIn.js
*************************************************************************************/

.motion-box {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.motion-box:after {
  background: var(--BaseColor2);
  bottom: 0;
  content: '';
  left: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  transform: translate3d(-101%, 0, 0);
  width: 100%;
}
.revealEffects.show .motion-box:after {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.revealEffects.done .motion-box:after {
  transform: translate3d(103%, 0, 0);
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.motion-box .motion-inner {
  display: inline-block;
  opacity: 0;
}
.revealEffects.done .motion-box .motion-inner {
  opacity: 1;
}

/************************************************************************************
CSS ANIMATIONS - jQuery.inview.js
*************************************************************************************/

/* ------ WORD TRADITION (splitting.js) ------ */
.char{
  opacity: 0;
}
.char-off{
  opacity: 1;
  transition: transform .5s cubic-bezier(.3, 0, .3, 1), opacity .5s linear;
  transition-delay: calc( 30ms * var(--char-index) );
}


/* ------ MENU TRADITION ------ */
.menu-transition {
	opacity: 0;
	transform: translate(0, -40px);
	-webkit-transform: translate(0, -40px);
	transition: 0.5s;
  animation-timing-function: ease-out;
}
.menu-transition-off {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}
/* ------ TRADITION-1 ------ */
.scroll-fadeUpS {
  opacity: 0;
  transition: 0.5s;
  transform: translate(0, 40px);
  -webkit-transform: translate(0, 40px);
}
.scroll-fadeUpS-off {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transition-timing-function: ease;
}
/* ------ TRADITION-2 ------ */
.scroll-fadeUp {
  opacity: 0;
  transition: 1s;
  transform: translate(0, 40px);
  -webkit-transform: translate(0, 40px);
}
.scroll-fadeUp-off {
  opacity: 1.0;
  transition-timing-function: ease;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/************************************************************************************
CLEARFIX / MARGIN
*************************************************************************************/

/* ------ clearfix ------ */
.clearfix:after {
  clear: both;
  content: '';
  display: block;
}
/* ------ margin ------ */
.mb8 {
  margin-bottom: 8px;
}
.mb16 {
  margin-bottom: 16px;
}
.mb24 {
  margin-bottom: 24px;
}
.mb-M {
  margin-bottom: 32px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb48 {
  margin-bottom: 48px;
}
.mb56 {
  margin-bottom: 56px;
}
.mb64 {
  margin-bottom: 64px;
}
.mb72 {
  margin-bottom: 72px;
}
.mb80 {
  margin-bottom: 80px;
}
/* ------ indent style ------ */
p.indent1 {
  line-height: 1.5 !important;
  padding-left: 1em;
  position: relative;
}
p.indent1:before {
  content: "・";
  left: 0;
  position: absolute;
  top: 0;
}
p.indent2 {
  line-height: 1.5 !important;
  padding-left: 1em;
  position: relative;
}
p.indent2:before {
  content: "※";
  left: 0;
  position: absolute;
  top: 0;
}

/*************************
SNS SHARE / SUB CATCH
**************************/
.sub-catch-side {
  color: #fff;
  position: fixed;
  top: 50%;
  right: 30px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 16px;
  height: 184px;
  z-index: 10;
  mix-blend-mode: difference;
}
.sns-share-side {
  color: #fff;
  position: fixed;
  top: 50%;
  left: 30px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 16px;
  height: 184px;
  z-index: 10;
  mix-blend-mode: difference;
}
.vertical-writing {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  font-family: din-condensed, sans-serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.25em;
  line-height: 1.3;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.vertical-writing-sns {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  font-family: din-condensed, sans-serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.25em;
  line-height: 1.3;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.vertical-writing-sns::after {
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 32px;
  background-color: #fff;
  left: 8px;
  bottom: -44px;
}
.sns-list {
  margin-top: 56px;
}
.sns-item-fb {
  width: 16px;
  height: 16px;
  margin-top: 15px;
  fill: #fff;
}
.sns-item-tw {
  width: 16px;
  height: 16px;
  margin-top: 15px;
  fill: #fff;
}
.sns-item-fb:hover,
.sns-item-fb:active,
.sns-item-tw:hover,
.sns-item-tw:active {
  opacity: .7;
}
/* ------ MOBILE ------ */
@media screen and ( max-width:767px) {
  .sub-catch-side {
    display: none;
  }
  .sns-share-side {
    display: none;
  }
}