@charset "UTF-8";
/* ===============================================
# navigation
=============================================== */
/* ===============================================
# z-index管理
=============================================== */
header { z-index: 20; }

.top { z-index: 10; }

/* ===============================================
#擬似要素中央配置 mixin
=============================================== */
/* ===============================================
# SNSカラー
=============================================== */
/* =base
------------------------------------------------------------------------------------------*/
* { box-sizing: border-box; }

html.html_reset { margin: 0 !important; padding: 0 !important; }

body { height: 100%; overflow-y: scroll; background-color: #fff; color: #0A0A0A; font-family: 'Zen Kaku Gothic New','Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.7em; }

body.bg-yellow { background-color: #f7f4e7; }

main { position: relative; }

main.in_main { overflow: visible; }

a { color: #000; text-decoration: none; outline: none; }

a:hover { text-decoration: none; }

a.txt_link { text-decoration: underline; }

a.txt_link:hover { opacity: .8; }

img { vertical-align: bottom; backface-visibility: hidden; width: 100%; }

@media only screen and (max-width: 769px) { main { overflow: hidden; }
  body.scroll_on { overflow-y: scroll; } }

p.text-list, .text-list ul li { padding: 0 0 3px 1.1em; position: relative; }

p:not(:last-of-child).text-list { margin-bottom: 1em; }

.text-list ul li:not(:last-of-child) { margin-bottom: 5px; }

p.text-list::before, .text-list ul li::before { content: "※"; position: absolute; left: 0; }

p.text-list-dotted::before, .text-list-dotted ul li::before { content: "・"; }

p.text-list-circle::before, .text-list-circle ul li::before { content: "●"; }

p.text-list-square::before, .text-list-square ul li::before { content: "■"; }

p.text-list-counter, .text-list-counter ul li { padding-left: 3.1em; }

p.text-list-counter::before, .text-list-counter ul li::before { counter-increment: number 1; content: "" counter(number) ""; }

/* ===============================================
# parts
=============================================== */
.heading { position: relative; text-align: left; font-size: min(3vw,38px); line-height: 1.4em; }

.heading:before { position: absolute; content: ""; width: 0px; height: 0px; top: 0; left: 0; transform: translate(0, 0); }

.stit { position: relative; color: #000; font-size: 18px; font-weight: bold; line-height: 1.4em; padding: 33px 25px; width: 100%; border-radius: 0 10px 10px 0; text-align: center; }

.stit::before { content: attr(data-name) ""; position: absolute; font-size: 40px; line-height: 1.4em; color: #000; opacity: .1; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: lighter; }

.stit.animation { animation: sp-slide 1s forwards; }

.show { animation: head-show 1s forwards ease-in-out; }

@keyframes head-show { 0% { opacity: 0;
    transform: translateY(10%); }
  100% { opacity: 1;
    transform: translateY(0); } }

@keyframes sp-slide { 0% { opacity: 0;
    transform: translateX(-100%); }
  100% { opacity: 1;
    transform: translateX(0); } }

.comingsoon { text-align: center; font-weight: bold; font-size: min(10vw,40px); line-height: 1.4em; padding: 100px 0 60px; width: 92%; margin: 0 auto; }

@media only screen and (min-width: 769px) { .stit { background: none; top: 30px; text-align: center; width: 100%; font-size: 36px; margin-bottom: 100px; }
  .stit:before { left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: 100px; width: 100%; }
  .comingsoon { font-size: 70px; padding: 100px 0 200px; } }

.text-center { text-align: center; }

.font-bold { font-weight: bold; }

.txt { line-height: 2em; font-size: 16px; }

/****** button *****/
.link-button { display: block; width: 100%; max-width: 384px; background: #f00; color: #fff; font-size: 16px; line-height: 1.4em; padding: 25px; text-align: center; margin: 0 auto; box-shadow: 0px 3px 6px #00000029; border-radius: 5px; position: relative; transition: .3s all; }

.link-button:before { position: absolute; content: ""; background: url(../images/button_arrow.svg) center top no-repeat; background-size: cover; top: 50%; transform: translate(0, -50%); right: 10%; width: 19px; height: 4px; transition: .3s all; }

.link-button:hover { transform: scale(1.05); }

.link-button:hover:before { transform: translate(50%, -50%); }

.about-wrap { max-width: 1200px; margin: 0 auto; }

.button { display: block; position: relative; max-width: 280px; width: 92%; margin: 0 auto; border: 1px solid #000; border-radius: 10px; background: #fff; font-size: 16px; padding: 20px; font-weight: bold; text-align: center; color: #000; transition: .2s all; }

.button .tri { position: absolute; content: ""; width: 20px; height: 20px; overflow: hidden; bottom: 8px; right: 8px; border-radius: 4px; transition: .2s all; }

.button .tri:before { content: ''; position: absolute; bottom: 0px; right: 0px; width: 0; height: 0; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent transparent #333 transparent; }

.button:hover { transform: scale(1.03); }

.button:hover .tri { right: 6px; bottom: 6px; }

/******* news共通 ******/
.news_block { margin-bottom: 50px; }

.news_block ul li { padding-bottom: 17px; border-bottom: 1px solid #70707024; }

.news_block ul li .news { display: flex; }

.news_block ul li .news .date { flex-basis: 10%; margin-right: 6%; position: relative; margin-bottom: inherit; color: #5A5A5A; }

.news_block ul li .news .date:before { position: absolute; content: ""; width: 2px; height: 100%; background: #f00; top: 0; right: -20%; }

.news_block ul li .news .tit { flex-basis: 84%; max-width: 84%; margin-bottom: inherit; }

.news_block ul li:not(:last-of-type) { margin-bottom: 17px; }

.news_block ul li:hover { opacity: .6; }

@media only screen and (max-width: 769px) { .news_block { margin-bottom: 50px; }
  .news_block ul li { padding-bottom: 17px; border-bottom: 1px solid #70707024; }
  .news_block ul li .news { display: block; }
  .news_block ul li .news .date { flex-basis: 100%; margin-right: 0%; margin-bottom: .6em; display: inline-block; }
  .news_block ul li .news .date:before { position: absolute; content: ""; width: 100%; height: 2px; top: inherit; right: inherit; bottom: -4px; left: 0; }
  .news_block ul li .news .tit { flex-basis: 100%; max-width: 100%; margin-bottom: inherit; }
  .news_block ul li:not(:last-of-type) { margin-bottom: 17px; } }

/******** swiper ********/
.swiper-button-next { width: 30px; height: 40px; top: 50%; transform: translateY(-50%); right: 2px; margin-top: inherit; }

.swiper-button-next:before { background-image: url(../images/s2_n_arrow.png); position: absolute; content: ""; display: block; width: 100%; height: 100%; left: 0; background-position: center; background-repeat: no-repeat; background-size: contain; }

.swiper-button-prev { width: 30px; height: 40px; top: 50%; transform: translateY(-50%); left: 2px; margin-top: inherit; }

.swiper-button-prev:before { background-image: url(../images/s2_p_arrow.png); position: absolute; content: ""; display: block; width: 100%; height: 100%; left: 0; background-position: center; background-repeat: no-repeat; background-size: contain; }

/* ===============================================
# change
=============================================== */
.pc_only { display: block; }

.sp_only { display: none !important; }

@media only screen and (max-width: 769px) { .pc_only { display: none !important; }
  .sp_only { display: block !important; } }

/* ===============================================
# header
=============================================== */
header { width: 100%; height: 80px; text-align: center; transition: .4s all; position: fixed; background: #c9c9ca; }

header .header-in { display: flex; justify-content: space-between; height: 100%; padding: 0 20px; }

header .header-in .head_logo { z-index: 12; height: 100%; display: flex; align-items: center; max-width: 200px; }

header .header-in .head_logo a img { max-height: 80px; }

header .header-in .menu { height: 80px; transition: .4s all; }

header .header-in .menu #navigation { height: 100%; }

header .header-in .menu ul { height: 100%; display: flex; align-items: center; }

header .header-in .menu ul li { margin-top: 8px; transition: .4s all; }

header .header-in .menu ul li:not(:last-of-type) { margin-right: 30px; }

header .header-in .menu ul li a { color: #fff; text-decoration: none; position: relative; font-size: 14px; line-height: 1em; height: 100%; width: 100%; letter-spacing: 2px; font-weight: 500; padding: 10px 0; transition: .4s all; /***** hover_underline *****/ }

header .header-in .menu ul li a:before { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: #D1202D; bottom: -10px; transform-origin: center top; transform: scale(0, 1); transition: .3s all; }

header .header-in .menu ul li.reserve a { padding: 9px 30px; background: #000; color: #fff; border-radius: 10px; }

header .header-in .sp-trigger { display: none; }

header#h-top { background: transparent; }

header#header-top.active { height: 60px; position: fixed; transition: .4s all; top: -30%; }

header#header-top.active .header-in .menu { height: 60px; transition: .1s all; }

header#header-top.active .header-in .menu ul li { margin-top: 0; transition: .1s all; }

header#header-top.active .header-in .menu ul li a { font-size: 14px; transition: .1s all; }

@media screen and (max-width: 769px) { .in header { background: #c9c9ca; }
  header { width: 100%; height: 60px; position: fixed; }
  header.is-open { z-index: 30; }
  header.is-open .header-in { padding-left: 0; }
  header.is-open .header-in .logo { mix-blend-mode: inherit; }
  header .header-in { display: flex; justify-content: space-between; margin: 0 auto; padding: 0; }
  header .header-in .head_logo { max-width: 120px; padding-left: 10px; }
  header .header-in .head_logo a img { max-height: 60px; }
  header .header-in .menu { position: absolute; display: none; width: 100vw; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); left: 0; transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1) 0s; }
  header .header-in .menu:after { position: absolute; content: ""; background: url(../images/menu_bg.svg) center top no-repeat; bottom: 0px; right: -50px; width: 334px; height: 334px; background-size: contain; opacity: .3; animation: circle 30s backwards infinite linear; z-index: -1; }
  header .header-in .menu.is-open { display: block; transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1) 0s; z-index: 20; transform: translateX(0); top: 60px; }
  header .header-in .menu.is-open:after { z-index: 1; }
  header .header-in .menu .nav-bg { position: absolute; width: 100vw; height: calc(100vh - 60px); top: 0px; right: 0; display: flex; align-items: center; transform: translateX(202px); transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1) 0s; backface-visibility: hidden; overflow: hidden; }
  header .header-in .menu .nav-bg#navigation { height: calc(100% - 60px); }
  header .header-in .menu .nav-bg ul { margin: 0 auto; display: block; width: 70%; height: auto; }
  header .header-in .menu .nav-bg ul li { display: block; padding: 0px 20px; width: 100%; margin-top: 0; text-align: left; opacity: 0; transition: .4s all; margin-bottom: 24px; position: relative; transform: translateX(20%); transition-delay: .1s; }
  header .header-in .menu .nav-bg ul li a { color: #000; text-decoration: none; position: relative; font-size: 18px; display: inline-block; }
  header .header-in .menu .nav-bg ul li.active:before { position: absolute; content: ""; background: #71a4bf; width: 5px; height: 18px; top: 46%; left: 0px; transform: translateY(-50%); }
  header .header-in .menu .nav-bg ul li:nth-of-type(2) { transition-delay: .2s; }
  header .header-in .menu .nav-bg ul li:nth-of-type(3) { transition-delay: .3s; }
  header .header-in .menu .nav-bg ul li.reserve { text-align: center; padding-top: 30px; }
  header .header-in .menu .nav-bg ul li.reserve a { color: #fff; text-align: center; width: 80%; padding: 16px 20px; }
  header .header-in .menu .nav-bg.is-open { transform: translateX(0); z-index: 10; transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1) 0s; }
  header .header-in .menu .nav-bg.is-open ul li { opacity: 1; transform: translateX(0); }
  header .header-in .menu .sp_logo { max-width: 120px; left: 10px; top: -40px; position: fixed; }
  @keyframes circle { 0% { transform: rotate(0); }
    100% { transform: rotate(360deg); } }
  header .header-in .sp-trigger { display: block; color: #fff; position: relative; width: 40px; height: 40px; text-align: center; border-radius: 50%; margin: auto 0; right: 10px; z-index: 10; transition: .4s all; -webkit-transition: -webkit-transform 0.4s; /******** ham01 *******/ /******** ham02 *******/ }
  header .header-in .sp-trigger .nav-icon { position: relative; height: 100%; }
  header .header-in .sp-trigger .nav-icon span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #b76b63; width: 6px; height: 6px; border-radius: 50%; }
  header .header-in .sp-trigger .nav-icon span::before { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; background: #71a4bf; content: ""; width: 6px; height: 6px; border-radius: 50%; }
  header .header-in .sp-trigger .nav-icon span::after { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; background: #e0b380; content: ""; width: 6px; height: 6px; border-radius: 50%; }
  header .header-in .sp-trigger:before { position: absolute; content: ""; width: 100%; height: 100%; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); border-radius: 50%; transition: .4s all; -webkit-transition: -webkit-transform 0.4s; }
  header .header-in .sp-trigger.is-open .nav-icon { position: fixed; top: 7px; right: 7px; }
  header .header-in .sp-trigger.is-open .nav-icon span { top: 20px; transform: inherit; left: inherit; right: 20px; background: #fff; }
  header .header-in .sp-trigger.is-open .nav-icon span:before { transform: translate(-50%, -50%) rotate(45deg); background: #000; width: 24px; height: 2px; left: 50%; border-radius: 0; }
  header .header-in .sp-trigger.is-open .nav-icon span:after { transform: translate(-50%, -50%) rotate(-45deg); background: #000; width: 24px; height: 2px; left: 50%; border-radius: 0; }
  header .header-in .sp-trigger.is-open:before { transform: scale(5); width: 100vw; height: 100vh; left: inherit; pointer-events: none; -webkit-transition: -webkit-transform 0.4s; } }

/* ===============================================
# footer
=============================================== */
footer { padding: 4vw 20px 3vw 0; background: #c9c9ca; color: #fff; position: relative; text-align: center; z-index: 4; border-radius: 200px 0 0 0; }

footer .foot_logo { max-width: 100px; margin: 0 auto 1.6em; }

footer p { color: #fff; }

footer p a { color: #fff; }

footer .foot_nav { margin-bottom: 30px; }

footer .foot_nav ul { display: inline-flex; }

footer .foot_nav li a { color: #fff; font-size: 16px; line-height: 1.4em; font-weight: bold; display: inline-block; padding: 1em 1.2em; position: relative; letter-spacing: .85px; }

footer .foot_nav li a:hover { opacity: .8; }

footer .foot_nav li:not(:last-of-type) a:before { position: absolute; content: "｜"; top: 50%; right: -10px; transform: translateY(-50%); }

footer small { font-size: 12px; line-height: 1.5em; }

footer .nocopy { font-size: 14px; line-height: 1em; }

@media only screen and (max-width: 769px) { footer { position: relative; bottom: inherit; padding: 40px 20px 40px; right: inherit; text-align: right; }
  footer .foot_logo { max-width: 100px; margin-right: 0px; margin-left: auto; margin-bottom: .6em; }
  footer .foot_nav { margin-bottom: 20px; }
  footer .foot_nav ul { display: inherit; }
  footer .foot_nav li a { font-size: 14px; display: block; padding: 0.5em 1em; }
  footer .foot_nav li:not(:last-of-type) a:before { position: absolute; content: ""; top: 50%; right: -10px; transform: translateY(-50%); }
  footer small { font-size: 12px; line-height: 1.5em; width: 94%; margin: 0 auto; display: block; } }

/* ===============================================
# list-page
=============================================== */
.common_pages { max-width: 1000px; margin: 0 auto; width: 92%; padding-top: 150px; }

.common_pages .sub-heading { font-size: 30px; font-weight: bold; line-height: 1.5em; margin-bottom: 1.5em; text-align: center; }

.common_pages .txt { line-height: 1.8em; font-size: 16px; color: #000; }

.common_pages .lead { font-size: 14px; margin-bottom: 40px; line-height: 1.6em; }

.common_pages .block { margin-bottom: 3em; }

.common_pages .ctit { font-weight: bold; margin-bottom: 1.2em; }

.common_pages ol { list-style: decimal; padding-left: 4em; }

.common_pages ol li { margin-bottom: 1em; font-size: 14px; line-height: 2.2em; }

.common_pages ol.in li { list-style-type: none; margin-bottom: .4em; counter-increment: cnt; padding-left: 1.6em; position: relative; }

.common_pages ol.in li:before { content: "(" counter(cnt) ") "; position: absolute; left: 0px; }

.common_pages ol.non { list-style: none; }

.common_pages .bottom-txt.right { text-align: right; }

.common_pages .head-box { margin-bottom: 100px; }

.common_pages .head-box img { display: block; margin-bottom: 50px; }

.common_pages .head-txt { text-align: center; font-size: 16px; font-weight: bold; line-height: 2em; }

@media screen and (max-width: 768px) { .common_pages { padding-top: 80px; width: 100%; }
  .common_pages ol { padding-left: 1em; }
  .common_pages .ctit { margin-bottom: .6em; } }

/* ===============================================
# pagination
=============================================== */
#pagination { position: relative; overflow: hidden; display: flex; margin: 30px auto 0; justify-content: center; }

#pagination .page-numbers { border: 1px solid #ccc; margin-right: 8px; text-decoration: none; height: 40px; line-height: 40px; font-size: 14px; width: 40px; padding: 0 8px !important; text-align: center; }

#pagination .page-numbers.prev { width: 75px; }

#pagination .page-numbers.next { width: 75px; }

#pagination .page-numbers.dots { padding: 0 12px !important; }

#pagination .page-numbers.current { color: #646464; background: #eaeaea; border: none; }

/* ===============================================
# foot-bnr
=============================================== */
.bnr-wrap { margin-bottom: 60px; padding-top: 150px; }

.bnr_box { text-align: center; max-width: 1400px; margin: 0 auto; }

.bnr_box ul li { display: inline-block; width: 25%; transition: .3s all; }

.bnr_box ul li:hover { opacity: .8; }

@media screen and (max-width: 768px) { .bnr-wrap { margin-bottom: 60px; padding-top: 80px; }
  .bnr_box { width: 96%; margin: 0 auto; max-width: 400px; }
  .bnr_box ul li { width: 47.5%; margin-bottom: 1em; }
  .bnr_box ul li:nth-of-type(odd) { margin-right: 3%; } }

/* ===============================================
# animation
=============================================== */
.op, .op2 { position: fixed; top: 0; left: 0; margin: 0 auto; width: 100%; height: 100vh; }

.op { z-index: 99; background: #f2f2f2; animation-duration: 1.2s; animation-delay: 1.4s; animation-fill-mode: forwards; animation-name: top-op; }

.op2 { z-index: 100; background: #FFE600; animation-duration: 0.7s; animation-delay: 0.6s; animation-fill-mode: forwards; animation-name: top-op2; }

@keyframes top-op { 0% { width: 100%;
    left: 0; }
  50% { width: 100%; }
  100% { width: 0%;
    left: 100%; } }

@keyframes top-op2 { 0% { width: 100%;
    left: 0; }
  50% { width: 100%; }
  100% { width: 0%;
    left: 100%; } }

@keyframes imageAnimation { 0% { opacity: 0;
    animation-timing-function: ease-in; }
  10% { opacity: 1;
    animation-timing-function: ease-out; }
  25% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; } }

.anime { position: relative; overflow: hidden; opacity: 0; }
.anime02 { position: relative; opacity: 0; }

/* SLIDE BOX ANIMATION */
@keyframes play { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes maskOut { from { transform: translateX(0); }
  to { transform: translateX(101%); } }

.blkin.isPlay { animation-name: play; animation-duration: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; }

.blkin.isPlay:before { animation-name: maskOut; animation-duration: .4s; animation-delay: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); content: ''; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: #FFE600; }

@keyframes fadeDown { from { transform: translateY(-20%);
    opacity: 0; }
  to { transform: translateY(0);
    opacity: 1; } }

.scroll1.isPlay { animation-name: fadeDown; animation-duration: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; overflow: inherit !important; }

.scroll2.isPlay { animation-name: fadeDown; animation-duration: .4s; animation-delay: .2s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; overflow: inherit !important; }

.scroll3.isPlay { animation-name: fadeDown; animation-duration: .4s; animation-delay: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; overflow: inherit !important; }

.scroll4.isPlay { animation-name: fadeDown; animation-duration: .4s; animation-delay: .6s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; overflow: inherit !important; }

@keyframes play2 { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.8, 0.61, 1.355, 1); }
  0% { opacity: 0 !important;
    transform: scale3d(0.3, 0.3, 0.3); }
  70% {
    transform: scale3d(1.03, 1.03, 1.03); }
  to { opacity: 1;
    transform: scale3d(1, 1, 1); } }

.bounce.isPlay { animation-duration: 1s; animation-name: bounceIn; opacity: 1; overflow: inherit !important; }

@keyframes fade { from { transform: translateY(10%);
    opacity: 0; }
  to { transform: translateY(0);
    opacity: 1; } }

.fadeUp.isPlay { animation-duration: 1.2s; animation-name: fade; opacity: 1; overflow: inherit !important; }

.fadeUp_noFlow.isPlay { animation-duration: 1.2s; animation-name: fade; opacity: 1; }

.fadeUp.delayed.isPlay { animation-duration: 1s; animation-delay: .6s; animation-fill-mode: backwards; animation-name: fade; opacity: 1; overflow: inherit !important; }

@keyframes slide-l { from { transform: translateX(-30%);
    opacity: 0; }
  to { transform: translateX(0);
    opacity: 1; } }

.slide-l.isPlay { animation-duration: .5s; animation-name: slide-l; opacity: 1; overflow: inherit !important; }

@keyframes slide-r { from { transform: translateX(30%);
    opacity: 0; }
  to { transform: translateX(0);
    opacity: 1; } }

.slide-r { animation-duration: .5s; animation-name: slide-r; animation-delay: 3s; opacity: 1; overflow: inherit !important; }

@keyframes rotate-l { from { transform: translateX(-30%) rotate(-45deg);
    opacity: 0; }
  to { transform: translateX(0) rotate(0);
    opacity: 1; } }

.rotate-l.isPlay { animation-duration: .5s; animation-name: rotate-l; animation-fill-mode: forwards; opacity: 1; overflow: inherit !important; }

@keyframes rotate-r { from { transform: translateX(30%) rotate(45deg);
    opacity: 0; }
  to { transform: translateX(0) rotate(0);
    opacity: 1; } }

.rotate-r.isPlay { animation-duration: .5s; animation-name: rotate-r; animation-fill-mode: forwards; opacity: 1; overflow: inherit !important; }

@media only screen and (max-width: 768px) { .scroll1.isPlay { animation-name: play2; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; overflow: inherit !important; }
  .scroll2.isPlay { animation-name: play2; animation-duration: .5s; animation-delay: 0s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; overflow: inherit !important; }
  .scroll3.isPlay { animation-name: play2; animation-duration: .5s; animation-delay: 0s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; overflow: inherit !important; }
  .scroll4.isPlay { animation-name: play2; animation-duration: .5s; animation-delay: 0s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1); position: relative; overflow: inherit !important; }
  .rotate-l.isPlay { animation: none; }
  .rotate-r.isPlay { animation: none; } }

.intro01 .textAnimation .spinChild { display: inline-block; animation: spinLeft 1.6s; animation-fill-mode: backwards; letter-spacing: -15px; }

@media screen and (max-width: 768px) { .intro01 .textAnimation .spinChild { letter-spacing: -3vw; } }

.intro01 .textAnimation.lower .spinChild { letter-spacing: -23px; }

@media screen and (max-width: 768px) { .intro01 .textAnimation.lower .spinChild { letter-spacing: -15px; } }

/* =IE killer
------------------------------------------------------------------------------------------*/
/* =clearfix
------------------------------------------------------------------------------------------*/
/*# sourceMappingURL=common.css.map */