@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&family=Noto+Sans+JP:wght@300&display=swap");
@import url(reset.css);
* { margin: 0; padding: 0; }

.Gothic-Noto { font-family: 'Noto Sans JP', sans-serif; }

.Gothic-Barlow { font-family: ltc-bodoni-175, serif; font-weight: 400; font-style: normal; }

.Gothic-Helvetica { font-family: Arial, Helvetica, "sans-serif"; }

a { text-decoration: none; }

h1 { position: absolute; top: 10px; left: 28px; font-size: 10px; font-family: a-otf-ryumin-pr6n, serif; font-weight: 300; font-style: normal; /**font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-weight: normal**/ font-weight: lighter; font-feature-settings: "palt"; }
@media screen and (max-width: 960px) { h1 { display: none; } }

img { width: 100%; height: auto; }

body, html { font-family: a-otf-ryumin-pr6n, serif; font-weight: 300; font-style: normal; /**font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-weight: normal**/ font-size: 16px; line-height: 1.5; background-color: #FFFFFF; }

.page-wrap { background: #80c3bf; overflow: hidden; padding-top: 128px; padding-bottom: 128px; }
@media screen and (max-width: 1200px) { .page-wrap { padding-top: 126px; padding-bottom: 126px; } }
@media screen and (max-width: 960px) { .page-wrap { padding-top: 124px; padding-bottom: 124px; } }
@media screen and (max-width: 768px) { .page-wrap { padding-top: 60px; padding-bottom: 60px; } }
.page-wrap #main { position: relative; }
.page-wrap #main .note { position: absolute; bottom: 5px; right: 5px; z-index: 1; color: #fff; }
.page-wrap #main .note.bk { color: #000; }
.page-wrap #main .note.ts { text-shadow: 0 0 1px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.4), 0 0 3px rgba(0, 0, 0, 0.2); }
@media screen and (max-width: 768px) { .page-wrap #main .note.sp-alr { right: auto; left: 5px; } }
.page-wrap #main h4 { text-align: center; color: #000; font-family: ltc-bodoni-175, serif; font-weight: 400; font-style: normal; font-size: 65px; line-height: 1; letter-spacing: 7px; }
@media screen and (max-width: 768px) { .page-wrap #main h4 { font-size: 40px; } }
@media screen and (max-width: 500px) { .page-wrap #main h4 { font-size: 30px; } }
.page-wrap #main .text-only { padding: 130px 5% 70px; }
@media screen and (max-width: 768px) { .page-wrap #main .text-only { padding: 70px 5% 60px; } }
.page-wrap #main .main-txt { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; text-shadow: 0 0 0.2em #000, 0 0  0.2em #000; }
.page-wrap #main .main-img { position: relative; z-index: 0; background: #ddd; line-height: 0; }
.page-wrap #main .main-img img { width: 100%; height: auto; }

.page-inner { background: #fff; width: 100%; max-width: 1000px; padding: 10px 40px 40px; margin: 0 auto; box-sizing: border-box; }
@media screen and (max-width: 768px) { .page-inner { padding: 10px 20px 30px; } }

.section-class { width: 100%; max-width: 1000px; margin: 0 auto; }

.blend-dif { mix-blend-mode: difference; }

.pc { display: block; }
@media screen and (max-width: 768px) { .pc { display: none; } }

.sp { display: none; }
@media screen and (max-width: 768px) { .sp { display: block; } }

.page-note { padding: 10px 0; margin: 0 auto; }

.note { font-size: 0.625rem; color: #333333; line-height: 1.7; }
.note.right { width: 100%; text-align: right; }

.cf::after { content: ""; display: block; clear: both; }

.aw { display: inline-block; }

.text-xs { font-size: 0.75rem; line-height: 2.2; letter-spacing: 0.1em; }

.text-s { font-size: 0.875rem; line-height: 2.2; letter-spacing: 0.1em; }

.text-m { font-size: 1rem; line-height: 1.7; letter-spacing: 0.05em; }

.text-l { font-size: 1.2rem; line-height: 1.7; letter-spacing: 0.05em; }

.text-xl { font-size: 1.6rem; line-height: 1.7; letter-spacing: 0.2em; }

@media screen and (max-width: 768px) { .text-xs { font-size: 0.7rem; }
  .text-s { font-size: 0.8rem; }
  .text-m { font-size: 0.925rem; }
  .text-l { font-size: 1.1rem; }
  .text-xl { font-size: 1.4rem; } }
@media screen and (max-width: 640px) { .text-xs { font-size: 10px; /*0.625rem;*/ }
  .text-s { font-size: 12px; /*0.725rem;*/ }
  .text-m { font-size: 13px; /*0.875rem;*/ }
  .text-l { font-size: 1.0rem; }
  .text-xl { font-size: 1.2rem; } }
.copy-ttl { font-size: 2rem; line-height: 1.7; letter-spacing: 0.2em; }
@media screen and (max-width: 768px) { .copy-ttl { font-size: 1.8rem; } }
@media screen and (max-width: 640px) { .copy-ttl { font-size: 1.6rem; } }

.copy-ttl-en { font-size: 4rem; line-height: 1.7; letter-spacing: 0.2em; font-family: 'Barlow Semi Condensed', sans-serif; color: #000000; }
@media screen and (max-width: 768px) { .copy-ttl-en { font-size: 3.6rem; } }
@media screen and (max-width: 640px) { .copy-ttl-en { font-size: 3.0rem; } }

/*--------------------------------

gnav

--------------------------------*/
.gnav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-wrap: nowrap; }
.gnav div, .gnav li { min-height: 0%; }
.gnav li { position: relative; text-align: center; font-family: ltc-bodoni-175, serif; font-weight: 400; font-style: normal; font-feature-settings: "palt"; }
.gnav li::after, .gnav li:first-child:before { content: ""; display: block; position: absolute; top: 30%; right: 0%; width: 1px; height: 40%; background-color: #c7c7c7; }
.gnav li:first-child:before { right: auto; left: 0%; }
.gnav li a, .gnav li .soon { padding: 10px 0; display: block; width: 100%; }
.gnav li a span, .gnav li .soon span { width: 100%; }
.gnav li a .new, .gnav li .soon .new { color: #D22; font-size: 10px; position: absolute; top: 0; right: 0; padding: 2px; }
.gnav li a .text-m, .gnav li .soon .text-m { letter-spacing: -0.05em; }
.gnav li a { /**color:$color1;**/ color: #000; position: relative; }
.gnav li a::after { content: ""; display: block; width: 100%; height: 2px; /**background-color: $color1;**/ background-color: #000; opacity: 0; transition: 0.3s ease 0s opacity; position: absolute; bottom: 0; left: 0; }
.gnav li.current a:after, .gnav li:hover a:after { opacity: 1; }
.gnav li .soon { color: #c7c7c7; }
.gnav li.concept { width: 10.3603603604%; }
.gnav li.design { /*width:131 / 1110 * 100%;*/ width: 13.2994923858%; }
.gnav li.plan { /*width:75 / 1110 * 100%;*/ width: 7.614213198%; }
.gnav li.equipment { /*width:243 / 1110 * 100%;*/ width: 24.6700507614%; /**.text-m{
	letter-spacing: 0.05rem;
}**/ }
.gnav li.modelroom { /*width:153 / 1110 * 100%;*/ width: 15.5329949239%; }
.gnav li.access { /*width:105 / 1110 * 100%;*/ width: 10.6598984772%; }
.gnav li.location { /*width:125 / 1110 * 100%;*/ width: 12.6903553299%; }
.gnav li.development { /*width:163 / 1110 * 100%;*/ width: 16.5482233503%; }
@media screen and (max-width: 1200px) { .gnav li a, .gnav li .soon { /**.text-m{ font-size:14px!important; }**/ } }
@media screen and (max-width: 960px) { .gnav { flex-wrap: wrap; }
  .gnav li a .text-m, .gnav li .soon .text-m { font-size: 12px !important; }
  .gnav li a .new, .gnav li .soon .new { /**color: #ffe825;**/ } }
@media screen and (max-width: 768px) { .gnav li a, .gnav li .soon { /**.text-m{ font-size:16px!important; }**/ } }
@media screen and (max-width: 500px) { .gnav li a, .gnav li .soon { /**.text-m{ font-size:14px!important; }**/ } }

/*--------------------------------

header

--------------------------------*/
header { display: block; width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background-color: #FFFFFF; /*@media screen and (max-width:$bp01){  .guide-box{ position: absolute; top:10px; right: 28px; width:360px; ul{ li{ width:calc(60% - 1px); &.outline{ width:calc(40% - 1px); order: 1; margin-bottom: 2px; } &.map    { width:calc(40% - 1px); order: 3; } &.request{ order: 2; margin-bottom: 2px;} &.limited{ order: 4;} a{ width:100%!important; } }  } }
}*/ /*@media screen and (max-width:$bp02){ .header-logo{ width:380px; top:28px; left: 28px; }  .guide-box{ position: absolute; top:12px; right: 28px; width:320px; .text-s{ font-size:12px!important; } }
}*/ }
header .header-inner { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
header .header-box { position: relative; width: 100%; height: 80px; }
header .header-logo { width: 436px; position: absolute; top: 36px; left: 28px; }
header .guide-box { position: absolute; top: 24px; right: 28px; }
header .guide-box ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
header .guide-box ul div, header .guide-box ul li { min-height: 0%; }
header .guide-box ul a { color: #FFFFFF; display: block; padding: 0px 0; background-color: #000000; text-align: center; width: 130px; margin-left: 5px; position: relative; font-feature-settings: "palt"; transition: 0.2s linear 0s opacity; }
header .guide-box ul a:hover { opacity: 0.6; }
header .guide-box ul a::before { content: ""; width: 32px; height: 100%; display: none; position: absolute; top: 0; left: 0; background-position: center center; background-repeat: no-repeat; background-size: contain; }
header .guide-box ul li.outline { text-indent: 0.5em; }
header .guide-box ul li.outline a::before { display: block; background-image: url("../img/share/img-icon-outline.png"); }
header .guide-box ul li.map { text-indent: 0.5em; }
header .guide-box ul li.map a::before { display: block; background-image: url("../img/share/img-icon-map.png"); }
header .guide-box ul li.request { text-indent: 1em; }
header .guide-box ul li.request a { width: 190px; background-color: #00a0e9; }
header .guide-box ul li.request a::before { display: block; background-image: url("../img/share/img-icon-request.png"); }
header .guide-box ul li.reserve { text-indent: 1em; }
header .guide-box ul li.reserve a { width: 190px; background-color: #eea116; }
header .guide-box ul li.reserve a::before { display: block; background-image: url("../img/share/img-icon-reserve.png"); }
header .guide-box ul li.limited a { width: 190px; background-color: #000000; }
header .gnav-box { width: 96%; max-width: 1110px; margin: 0 auto; }
header .gnav-box .map, header .gnav-box .outline { display: none; }
header .guide-menu-btn { display: none; position: absolute; top: -5px; right: 20px; }
header .guide-menu-btn ul { display: block; width: 30px; padding-bottom: 100%; font-size: 0; position: relative; overflow: hidden; }
header .guide-menu-btn ul li { width: 100%; height: 2px; background-color: #333333; position: absolute; transition: 0.2s ease 0.5s transform ,  0.2s ease 0s opacity; }
header .guide-menu-btn ul li:nth-child(1) { top: 15%; left: 0; }
header .guide-menu-btn ul li:nth-child(2) { top: 50%; left: 0; transform: translateY(-50%); }
header .guide-menu-btn ul li:nth-child(3) { bottom: 15%; left: 0; }
header .guide-menu-btn ul li:nth-child(4) { opacity: 0; top: calc(50% - 1px); left: 0%; transition-delay: 0s; transition-duration: 1s; }
header .guide-menu-btn ul li:nth-child(5) { opacity: 0; top: calc(50% - 1px); left: 0%; transition-delay: 0s; transition-duration: 1s; }
header .guide-menu-btn ul li:nth-child(6) { opacity: 0; top: calc(50% - 1px); left: 0%; transition-delay: 0s; transition-duration: 1s; }
header .guide-menu-btn ul li:nth-child(7) { opacity: 0; top: calc(50% - 1px); left: 0%; transition-delay: 0s; transition-duration: 1s; }
header .guide-menu-btn.active ul li:nth-child(1) { transform: translateX(-100%); transition-delay: 0s; }
header .guide-menu-btn.active ul li:nth-child(2) { transform: translateY(-50%) translateX(-100%); transition-delay: 0.1s; }
header .guide-menu-btn.active ul li:nth-child(3) { transform: translateX(-100%); transition-delay: 0.2s; }
header .guide-menu-btn.active ul li:nth-child(4) { opacity: 1; transform: rotate(-315deg); transition-delay: 0.4s; transition-duration: 1s; }
header .guide-menu-btn.active ul li:nth-child(5) { opacity: 1; transform: rotate(-45deg); transition-delay: 0.4s; transition-duration: 2s; }
@media screen and (max-width: 1350px) { header .guide-box { position: absolute; top: 10px; right: 28px; width: 560px; }
  header .guide-box ul li { /*width:calc(60% - 1px);*/ }
  header .guide-box ul li.outline { /*width:calc(33% - 1.5px);*/ width: calc(50% - 1px); order: 3; }
  header .guide-box ul li.map { /*width:calc(33% - 1.5px);*/ width: calc(50% - 1px); order: 4; }
  header .guide-box ul li.request { width: calc(50% - 1px); order: 1; margin-bottom: 2px; }
  header .guide-box ul li.reserve { width: calc(50% - 1px); order: 2; margin-bottom: 2px; }
  header .guide-box ul li.limited { width: calc(34% - 1px); order: 5; }
  header .guide-box ul li a { width: 100% !important; } }
@media screen and (max-width: 1050px) { header .header-logo { width: 380px; top: 28px; left: 28px; }
  header .guide-box { position: absolute; top: 12px; right: 28px; width: 335px; }
  header .guide-box ul li.outline { /*width:calc(26% - 1.5px);*/ text-indent: 1em; }
  header .guide-box ul li.map { /*width:calc(28% - 1.5px);*/ text-indent: 0.8em; }
  header .guide-box ul li.request { width: calc(50% - 1px); }
  header .guide-box ul li.reserve { width: calc(50% - 1px); }
  header .guide-box ul li.limited { width: calc(46% - 1px); }
  header .guide-box .text-s { font-size: 12px !important; letter-spacing: 0; } }
@media screen and (max-width: 768px) { header .header-box { height: 40px; }
  header .header-logo { width: 300px; position: relative; top: auto; left: auto; margin: 20px auto 0; }
  header .gnav-box { display: none; }
  header .guide-box { display: none; }
  header .guide-menu-btn { display: block; top: -5px; } }
@media screen and (max-width: 640px) { header .header-box { height: 40px; }
  header .header-logo { width: 240px; margin: 20px 0 0 15px; }
  header .guide-menu-btn { top: -5px; right: 15px; } }

/*--------------------------------

spNav

--------------------------------*/
.spNav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 900; pointer-events: none; display: none; }
.spNav .spNav-inner { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.spNav .spNav-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #80c3bf; /**background-color: rgba(18,72,140,1);**/ transform: translateX(100%); transition: 0.3s cubic-bezier(0.5, 0, 0.25, 1) 0s transform; }
.spNav .spNav-bg .spNav-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-image: url("../img/share/img-spnav-bg.jpg"); background-size: cover; background-position: 40% 20%; background-repeat: no-repeat; opacity: 0; transition: 0.2s linear 0s opacity; }
.spNav .spNav-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; z-index: 900; }
.spNav .spNav-box .gnav { opacity: 0; transition: 0.3s ease 0s opacity; }
.spNav .spNav-box .gnav li { width: 49%; transform: translateY(200%); opacity: 0; transition: 1s cubic-bezier(0, 0.67, 0.25, 1) 0s transform, 0.5s cubic-bezier(0.5, 0, 0.25, 1) 0s opacity; }
.spNav .spNav-box .gnav li a { color: #000; }
.spNav .spNav-box .gnav li .soon { color: #8C8C8C; }
.spNav .spNav-box .gnav li::before { display: none; }
.spNav .spNav-box .gnav li::after { width: 100%; height: 1px; background-color: transparent; border-bottom: 1px solid #000; top: auto; bottom: 0; opacity: 0.15; }
.spNav.active { transition-duration: 0.1s; pointer-events: auto; }
.spNav.active .spNav-bg { transform: translateX(0%); }
.spNav.active .spNav-bg .spNav-bg-img { transition-delay: 0.5s; transition-duration: 1s; opacity: 0.2; }
.spNav.active .gnav { opacity: 1; }
.spNav.active .gnav li { opacity: 1; transform: translateY(0%); }
.spNav.active .gnav li:nth-child(1) { transition-delay: 0.1s; }
.spNav.active .gnav li:nth-child(2) { transition-delay: 0.1s; }
.spNav.active .gnav li:nth-child(3) { transition-delay: 0.2s; }
.spNav.active .gnav li:nth-child(4) { transition-delay: 0.2s; }
.spNav.active .gnav li:nth-child(5) { transition-delay: 0.3s; }
.spNav.active .gnav li:nth-child(6) { transition-delay: 0.3s; }
.spNav.active .gnav li:nth-child(7) { transition-delay: 0.4s; }
.spNav.active .gnav li:nth-child(8) { transition-delay: 0.4s; }
.spNav.active .gnav li:nth-child(9) { transition-delay: 0.5s; }
.spNav.active .gnav li:nth-child(10) { transition-delay: 0.5s; }

/*--------------------------------

footer

--------------------------------*/
.footer { font-family: 'Noto Sans JP', sans-serif; margin-top: 50px; margin-bottom: 30px; }
.footer .footer-inner { width: 96%; max-width: 1125px; margin: 0 auto; }
.footer .footer-tel { width: 90%; max-width: 332px; margin: 0 auto 5%; text-align: center; }
.footer .footer-tel .text-s { font-feature-settings: "palt"; }
.footer .footer-box .space { display: none; width: 100%; }
.footer .footer-box ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.footer .footer-box ul div, .footer .footer-box ul li { min-height: 0%; }
.footer .footer-box ul li.corp1 { width: 25.0666666667%; }
.footer .footer-box ul li.corp2 { width: 31.2888888889%; }
.footer .footer-box ul li.corp3 { width: 13.6888888889%; }
.footer .footer-box ul li.corp4 { width: 16.5333333333%; }
.footer .footerholiday { margin: -4% auto 5%; text-align: center; font-size: 0.875rem; line-height: 1.5; color: #c30d23; font-feature-settings: "palt"; }
.footer .footerholiday .inner { display: inline-block; padding: 1rem; background: #f8ecec; border: solid 1px #ba9797; }
.footer .new-tsukuba { width: 90%; max-width: 480px; margin: 0 auto 5%; text-align: center; }
.footer .new-tsukuba a:hover { opacity: 0.7; }
.footer .new-tsukuba img { width: 100%; height: auto; vertical-align: top; }
.footer .new-tsukuba .ttl { display: flex; align-items: center; margin: 0 auto 0.5rem; font-weight: bold; }
.footer .new-tsukuba .ttl::before, .footer .new-tsukuba .ttl::after { content: ''; height: 1px; background-color: #333; flex-grow: 1; }
.footer .new-tsukuba .ttl::before { margin-right: 1rem; }
.footer .new-tsukuba .ttl::after { margin-left: 1rem; }
.footer .new-tsukuba .bnr { max-width: 480px; margin: 0 auto 0.2rem; }
@media screen and (max-width: 640px) { .footer .new-tsukuba { margin: 0 auto 10%; }
  .footer .new-tsukuba .ttl { font-size: 0.9rem; } }
@media screen and (max-width: 768px) { .footer { padding-bottom: 70px; }
  .footer .footer-inner { width: 80%; max-width: 700px; }
  .footer .footer-box .space { display: block; }
  .footer .footer-box ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .footer .footer-box ul div, .footer .footer-box ul li { min-height: 0%; }
  .footer .footer-box ul li.corp1 { width: 40.2857142857%; margin-right: 5%; }
  .footer .footer-box ul li.corp2 { width: 50.2857142857%; }
  .footer .footer-box ul li.corp3 { width: 22%; margin-right: 5%; }
  .footer .footer-box ul li.corp4 { width: 26.5714285714%; } }
@media screen and (max-width: 640px) { .footer .footer-tel { margin-bottom: 10%; }
  .footer .footer-inner { width: 90%; max-width: 700px; }
  .footer .footer-box .space { display: none; }
  .footer .footer-box ul { display: block; }
  .footer .footer-box ul li.corp1 { width: 56.4%; margin: 0 auto 5%; }
  .footer .footer-box ul li.corp2 { width: 70.4%; margin: 0 auto 5%; }
  .footer .footer-box ul li.corp3 { width: 30.8%; margin: 0 auto 5%; }
  .footer .footer-box ul li.corp4 { width: 37.2%; margin: 0 auto 5%; }
  .footer .holiday { margin: -8% auto 10%; } }

/*--------------------------------

fix-footer

--------------------------------*/
.fix-footer { display: none; position: fixed; z-index: 1000; width: 100%; bottom: 0; left: 0; pointer-events: none; }
.fix-footer .fix-footer-inner { pointer-events: auto; background-color: #FFFFFF; transition: 0.3s ease-out 0s transform; transform: translateY(100%); padding: 5px; }
.fix-footer .fix-footer-inner ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.fix-footer .fix-footer-inner ul div, .fix-footer .fix-footer-inner ul li { min-height: 0%; }
.fix-footer .fix-footer-inner ul li { width: calc(25% - 1px); position: relative; }
.fix-footer .fix-footer-inner ul li a { width: 100%; display: block; padding: 12px 0; text-align: center; background-color: #000000; color: #FFFFFF; line-height: 0; }
.fix-footer .fix-footer-inner ul li a .text-s { font-feature-settings: "palt"; letter-spacing: 0; vertical-align: middle; }
.fix-footer .fix-footer-inner ul li a::before { content: ""; /*display: inline-block;
margin-right: 3px;
width:16px;
height: 16px;
*/ display: block; margin: 0 auto 0px; vertical-align: middle; width: 20px; height: 20px; /*position: absolute;
top:0%;
left: 50%;
transform: translate(-50%,-20px);*/ background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #FFFFFF; border-radius: 5px; overflow: hidden; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
.fix-footer .fix-footer-inner ul li.otoiawase { /*width:23%;*/ }
.fix-footer .fix-footer-inner ul li.otoiawase a::before { background-image: url("../img/share/img-icon-otoiawase.png"); }
.fix-footer .fix-footer-inner ul li.otoiawase a::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #787878; }
.fix-footer .fix-footer-inner ul li.map { /*width:27%;*/ }
.fix-footer .fix-footer-inner ul li.map a::before { background-image: url("../img/share/img-icon-map-bk.png"); }
.fix-footer .fix-footer-inner ul li.map a::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #787878; }
.fix-footer .fix-footer-inner ul li.request { /*width:25%;*/ }
.fix-footer .fix-footer-inner ul li.request a { background-color: #00a0e9; }
.fix-footer .fix-footer-inner ul li.request a::before { background-image: url("../img/share/img-icon-request-bk.png"); }
.fix-footer .fix-footer-inner ul li.reserve { /*width:25%;*/ }
.fix-footer .fix-footer-inner ul li.reserve a { background-color: #eea116; }
.fix-footer .fix-footer-inner ul li.reserve a::before { background-image: url("../img/share/img-icon-reserve-bk.png"); }
.fix-footer .fix-footer-inner ul li.limited { /*width:25%;*/ }
.fix-footer .fix-footer-inner ul li.limited a { background-color: #000000; }
.fix-footer .fix-footer-inner ul li.limited a::before { background-image: url("../img/share/img-icon-limited-bk.png"); }
.fix-footer.frameIn .fix-footer-inner { transform: translateY(0%); }
@media screen and (max-width: 768px) { .fix-footer { display: block; } }
@media screen and (max-width: 500px) { .fix-footer .fix-footer-inner { padding: 3px; /*ul{ li{ a::before{width:15px; height: 15px;} }
}*/ } }
@media screen and (max-width: 330px) { .fix-footer .fix-footer-inner { padding: 2px; } }

/*--------------------------------

loader

--------------------------------*/
.loader-container { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: auto; }
.loader-container .loader-seek { width: 80%; max-width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; transition: 1s ease 0s opacity; }
.loader-container .loader-seek .loader-seek-inner { position: relative; width: 100%; overflow: hidden; }
.loader-container .loader-seek .loader-seek-inner::before { content: ""; display: block; width: 100%; padding-bottom: 2px; background-color: rgba(0, 160, 233, 0.2); }
.loader-container .loader-seek .loader-seek-inner::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #00a0e9; animation: 1s ease 0s loader-seek-motion infinite; }
@keyframes loader-seek-motion { 0% { transform: translateX(100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(-100%); } }
.loader-container .loader-inner { position: relative; width: 100%; height: 100vh; }
.loader-container li.loader-border { width: 100%; height: 20vh; background-color: #FFFFFF; position: absolute; left: 0%; }
.loader-container li.loader-border:nth-child(1) { top: 0%; animation-delay: 0.5s !important; }
.loader-container li.loader-border:nth-child(2) { top: 20%; animation-delay: 0.7s !important; }
.loader-container li.loader-border:nth-child(3) { top: 40%; animation-delay: 0.9s !important; }
.loader-container li.loader-border:nth-child(4) { top: 60%; animation-delay: 1.1s !important; }
.loader-container li.loader-border:nth-child(5) { top: 80%; animation-delay: 1.3s !important; }
.loader-container.active { pointer-events: none; }
.loader-container.active .loader-seek { opacity: 0; }
.loader-container.active li.loader-border { animation: 1s loader-border-motion 0s ease forwards; }
@keyframes loader-border-motion { 0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); } }
/*--------------------------------

mask effect

--------------------------------*/
.alpha-target { display: inline-block; -webkit-mask-image: url("../img/share/spritesheet3.png"); mask-image: url("../img/share/spritesheet3.png"); -webkit-mask-mode: alpha; -webkit-mask-repeat: no-repeat; /*@media screen and (max-width:420px){ -webkit-mask-size: 420px auto; @keyframes mi_motion{ 0%{   -webkit-mask-position:0%     0px;} 100%{ -webkit-mask-position:0% -2296.875px;} }
}*/ }
.alpha-target.a-delay-02 { animation-delay: 0.2s !important; }
.alpha-target.a-delay-03 { animation-delay: 0.3s !important; }
.alpha-target.a-delay-04 { animation-delay: 0.4s !important; }
.alpha-target.a-delay-05 { animation-delay: 0.5s !important; }
.alpha-target.a-delay-06 { animation-delay: 0.6s !important; }
.alpha-target.a-delay-07 { animation-delay: 0.7s !important; }
.alpha-target.a-delay-08 { animation-delay: 0.8s !important; }
.alpha-target.a-delay-09 { animation-delay: 0.9s !important; }
.alpha-target.a-delay-10 { animation-delay: 1s !important; }
.alpha-target.a-delay-11 { animation-delay: 1.1s !important; }
.alpha-target.a-delay-12 { animation-delay: 1.2s !important; }
.alpha-target.a-delay-13 { animation-delay: 1.3s !important; }
.alpha-target.a-delay-14 { animation-delay: 1.4s !important; }
.alpha-target.a-delay-15 { animation-delay: 1.5s !important; }
@keyframes mi_motion { 0% { -webkit-mask-position: 0%     0px; }
  100% { -webkit-mask-position: 0% -7000px; } }
@media screen and (max-width: 640px) { .alpha-target { -webkit-mask-size: 650px auto; }
  @keyframes mi_motion { 0% { -webkit-mask-position: 0%     0px; }
    100% { -webkit-mask-position: 0% -3500px; } } }
.alpha-target .Gothic-Barlow { letter-spacing: 0.3em; transition: 1s ease 0s letter-spacing; }
.alpha-target.aos-animate { animation: mi_motion 1s steps(35) forwards; }
.alpha-target.aos-animate .Gothic-Barlow { letter-spacing: 0.1em; }

/*--------------------------------

common

--------------------------------*/
.conversion_prtxt { text-align: center; color: #00a0e9; font-size: 17px; letter-spacing: 0.1em; padding: 30px 0; }

.cvLink { display: flex; justify-content: center; width: 90%; margin: 4rem auto 0; }
.cvLink li { width: 100%; /*max-width: 370px;*/ max-width: 350px; /*margin: auto;*/ margin: 0 1%; }
.cvLink li a { display: block; width: 100%; text-align: center; text-decoration: none; color: #fff; font-size: 21px; background: #00a0e9; padding: 10px 0; }
.cvLink li a:hover { opacity: 0.7; }
.cvLink li.common_req a { background: #00a0e9; }
.cvLink li.common_res a { background: #eea116; }

.subwin .cvLink { margin: 1rem auto 6rem; }

@media screen and (max-width: 640px) { .cvLink { flex-direction: column; margin: 5% auto 0; }
  .cvLink li { max-width: inherit; margin: 2% auto; }
  .cvLink li a { font-size: 18px; }
  .subwin .cvLink { margin: 4% auto 2%; } }
/*--------------------------------

subwin

--------------------------------*/
.sub-control { width: 90%; max-width: 370px; margin: 3rem auto 1rem; }
.sub-control ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.sub-control ul div, .sub-control ul li { min-height: 0%; }
.sub-control ul li { width: 48%; }
.sub-control ul li a { font-size: 16px; width: 100%; display: block; background-color: #333333; color: #FFFFFF; padding: 0.5rem 0; transition: 0.3s ease 0s opacity; }
.sub-control ul li a:hover { opacity: 0.5; }
@media screen and (max-width: 768px) { .sub-control ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .sub-control ul div, .sub-control ul li { min-height: 0%; }
  .sub-control ul li a { font-size: 12px; } }

@media print { .guide-box, .sub-control, .cvLink, .spNav { display: none; }
  .page-wrap .page-inner .section-class, .page-wrap .page-inner .section-inner, .map-cls { margin: 0 auto; padding: 0; }
  .section-class { padding-top: 0; }
  .page-wrap, .page-wrap .page-inner { padding-top: 0; margin: 0 auto; width: 500px; }
  header { position: relative; }
  header .header-box { height: 60px; }
  header .header-logo { width: 200px; } }
