@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');
/*reset*/
*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}img{display: block;}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(dialog:modal){all:revert}
/*reset end*/
:root {
  --color-01: #343434;--color-02: #ffd231;--color-03: #242424;--color-04: #1a2129;--color-05: #1a2228;
  --fontsize-01: 87.5%;
}
body {font-size: 100%;font-family: "Noto Sans JP", sans-serif, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;line-height: 1.5;overflow-x: hidden;position: relative;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-feature-settings: "palt";}
img {width: 100%;height: auto;display: block;}
body,a {color: var(--color-01);}
a {display: block; text-decoration: none; }
ul {list-style: none; }
h1,h2,h3,h4,div,p,ul,li,a,span,p,th,td {font-weight: normal;box-sizing: border-box;}
input:focus {outline: none;}
iframe {border: none;}
select {outline: none;}
.btn {transition: 0.4s; }
.pc {display: block !important;}
.sp {display: none !important;}
.cf::after {content: "";display: table;clear: both;}
.gothic {font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
.noto {font-family: "Noto Sans JP", sans-serif;}
.mincho {font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
.barlow {font-family: "Barlow", sans-serif;}
.object-fit {object-fit: cover;font-family: 'object-fit: cover;'}
.caption00::after {content: 'image';color: #fff;font-size: 10px;position: absolute;right: 0.5em;bottom: 0.3em;z-index: 100;opacity: 0.6;}
.caption01 {font-size: 62.5%;line-height: 1.15;text-align: center;padding: 0.3em 0.5em;background: rgba(0,0,0,0.5);position: absolute;left: 0;bottom: 0;z-index: 1000;}
.caption01-Right {left: auto;right: 0;}
.caption01.fix01 {color: #333;background: rgba(255,255,255,0.75);}
.caption01.fix02 {text-align: right;background: transparent;opacity: 0.9;}
.caption01.fix03 {color: #333;background: transparent;}
.caption01.fix04 {color: #333;padding: 0;background: transparent;top: calc(100% + 1em);bottom: auto;}
.caption01.fix05 {color: #fff;font-size: 87.5%;padding: 0;background: transparent;opacity: 1;}
.caption01.fix06 {color: #fff;}
.mw1800 {width: 90%; max-width: 1800px; margin: auto;}
.mw1700 {width: 90%; max-width: 1700px; margin: auto;}
.mw1600 {width: 90%; max-width: 1600px; margin: auto;}
.mw1500 {width: 90%; max-width: 1500px; margin: auto;}
.mw1400 {width: 90%; max-width: 1400px; margin: auto;}
.mw1300 {width: 90%; max-width: 1300px; margin: auto;}
.mw1200 {width: 90%; max-width: 1200px; margin: auto;}
.mw1100 {width: 90%; max-width: 1100px; margin: auto;}
.mw1000 {width: 90%; max-width: 1000px; margin: auto;}
.mw900 {width: 90%; max-width:  900px; margin: auto;}
.mw800 {width: 90%; max-width:  800px; margin: auto;}
.mw700 {width: 90%; max-width:  700px; margin: auto;}
.mw600 {width: 90%; max-width:  600px; margin: auto;}
.mw500 {width: 90%; max-width:  500px; margin: auto;}
.loader-wrap {position: fixed;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background: #fff;z-index: 10000;}
body.loaded .loader-wrap {opacity: 0;transition: 0.4s linear 0.4s;pointer-events: none;}
.loader,.loader:after {border-radius: 50%;width: 10em;height: 10em;}
.loader {margin: 60px auto;font-size: 10px;position: relative;text-indent: -9999em;border-top: 1.1em solid rgba(224,224,224, 0.2);border-right: 1.1em solid rgba(224,224,224, 0.2);border-bottom: 1.1em solid rgba(224,224,224, 0.2);border-left: 1.1em solid #e0e0e0;-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);-webkit-animation: load8 1.1s infinite linear;animation: load8 1.1s infinite linear;}
@-webkit-keyframes load8 {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes load8 {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
.invert {filter: brightness(0) invert(1);}
.effect01 {opacity: 0;}
.effect01.staging {opacity: 1;transition: 0.7s;}
.effect02 {transition: clip-path 0.4s, transform 0.4s;-webkit-clip-path: inset(0 0 100% 0);clip-path: inset(0 0 100% 0);transform: translateY(100%);}
.effect02.staging {-webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);transform: translateY(0);}
.effect03 {transform: translateY(2em);opacity: 0;}
.effect03.staging {transform: translateY(0);opacity: 1;transition: 0.7s;}

/* ------------------------------------------------------------------- */
html,
body {width: 100%;overflow-x: hidden;}
body {opacity: 0;}
body.loaded {opacity: 1;transition: 0.8s linear 0.4s;}
header {background: #fff;position: fixed;top: 0;left: 0;right: 0;z-index: 9999;}
header .container {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin: 0 auto;padding: 1em 0;transition: 0.4s;}
header .container h1 {width: 23%;max-width: 350px;padding: 0 0 0 1.5em;box-sizing: border-box;transition: 0.4s;}
header .container > div {width: 76%;box-sizing: border-box;position: relative;}
header .container > div nav {text-align: right;}
header .container > div nav:nth-child(1) ul {letter-spacing: -0.4em;}
header .container > div nav:nth-child(1) ul li {display: inline-block;letter-spacing: 0;}
header .container > div nav:nth-child(1) ul li + li {margin-left: 2.5em;}
header .container > div nav:nth-child(1) ul li a {font-size: 93.75%;padding-left: 1.5em;position: relative;}
header .container > div nav:nth-child(1) ul li a::before {width: 1em;height: 1px;background: var(--color-01);position: absolute;top: 50%;left: 0;transform: translate(0,-50%);}
header .container > div nav:nth-child(1) ul li.reserve,
header .container > div nav:nth-child(1) ul li.request {text-align: center;width: 8em;height: calc(100% + 2em);margin: 0;position: absolute;top: -1em;}
header .container > div nav:nth-child(1) ul li.request {right: 8em;}
header .container > div nav:nth-child(1) ul li.reserve {right: 0;}
header .container > div nav:nth-child(1) ul li.reserve a,
header .container > div nav:nth-child(1) ul li.request a {color: #fff;white-space: nowrap;padding: 0;height: 100%;}
header .container > div nav:nth-child(1) ul li.reserve a::before,
header .container > div nav:nth-child(1) ul li.request a::before {display: none;}
header .container > div nav:nth-child(1) ul li.reserve a span,
header .container > div nav:nth-child(1) ul li.request a span {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
header .container > div nav:nth-child(1) ul li.request a {background: #aaa;}
header .container > div nav:nth-child(1) ul li.reserve a {background: #999;}
header .container > div nav:nth-child(2) ul {margin-right: 1em;}
header .container > div nav:nth-child(2) ul li {display: inline-block;margin: 0 1em;}
header .container > div nav:nth-child(2) ul li a {font-size: 112.5%;line-height: 2;text-align: center;}
header .container > div nav:nth-child(2) ul li a span {font-weight: 600;}
header .container > div nav:nth-child(2) ul li a span::before {display: inline-block;content: '';width: 1em;height: 2px;margin-right: 0.5em;vertical-align: super;background: #333;}
#billboard {position: relative;}
.billboard-style-01 {padding: 15em 0;}
.billboard-style-01 h2 {color: #fff;font-size: 250%;letter-spacing: 0.05em;}
.billboard-style-01.fix01 h2 {text-align: right;}
.billboard-style-01 h2 span {}
.billboard-style-02 {position: relative;}
.billboard-style-02::after {display: block;content: '';width: 120%;height: 100%;background: var(--color-05);z-index: 2;position: absolute;top: 0;left: 0;clip-path: polygon(0% 0, 100% 0, 86% 100%, 0 100%);}
.billboard-style-02::before {display: block;content: '';width: 100%;height: 30em;background-color: #bbb;background-repeat:no-repeat;background-position:center;background-size: cover;z-index: 1;}
.billboard-style-02 h2 {position: absolute;top: 50%;left: calc(50% - 1em);transform: translate(-50%,-50%);z-index: 100;opacity: 0;}
body.loaded .billboard-style-02::after {width: 46%;transition: 0.5s ease-out 0.5s;}
/*body.loaded .billboard-style-02::before {filter: grayscale(100%);transition: 0.3s linear 1.25s;}*/
body.loaded .billboard-style-02 h2 {left: 50%;opacity: 1;transition: 0.3s linear 0.8s;}
.ttl-style-01 {color: #fff;}
.ttl-style-01 span {font-size: 250%;font-weight: 700;margin-right: 0.25em;}
.ttl-style-01::after {content: attr(data-title);color: var(--color-02);font-size: 125%;font-weight: 700;font-family: "Barlow", sans-serif;letter-spacing: 0.01em;vertical-align: middle;}
.ttl-style-02 {text-align: center;}
.ttl-style-02::before {display: block;content: attr(data-title);color: var(--color-02);font-size: 125%;font-weight: 700;font-family: "Barlow", sans-serif;}
.ttl-style-02 span {font-size: 187.5%;font-weight: 700;}
.btn-style-01 {font-size: 112.5%;text-align: center;line-height: 4;width: 80%;max-width: 22em;margin: 0.5em auto 0;background: var(--color-02);position: relative;transition: 0.4s;}
.btn-style-01::after {display: block;content: '';width: 3em;height: 2px;background: linear-gradient(to right,#000 50%,var(--color-02) 50%);position: absolute;top: calc(50% - 1px);right: -1.5em;transition: 0.4s;}
.btn-style-01::before {display: block;content: '';width: 0;height: 100%;background: #ff7f31;position: absolute;left: 0;bottom: 0;transition: 0.4s;}
.btn-style-01 span {font-weight: 600;letter-spacing: 0.1em;position: relative;z-index: 100;}
#contentsWrap {}
footer {padding: 8em 0 1em;background: var(--color-02);}
footer .container {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: baseline;}
footer .container > div {width: 46%;}
footer .container > div:nth-child(1) {transform: translateY(-2em);}
footer .container > div:nth-child(1) figure {width: 80%;max-width: 360px;margin-bottom: 2em;}
footer .container > div:nth-child(1) div {margin-left: 5em;}
footer .container > div:nth-child(1) div address {margin-bottom: 0.5em;}
footer .container > div:nth-child(1) div address span {display: inline-block;margin-right: 0.5em;}
footer .container > div:nth-child(2) {text-align: right;}
footer .container > div:nth-child(2) ul {margin-bottom: 2em;}
footer .container > div:nth-child(2) ul li {display: inline-block;margin: 1em 1.5em;}
footer .container > div:nth-child(2) ul li:last-child {margin-right: 0;}
footer .container > div:nth-child(2) ul li a {display: block;letter-spacing: 0.1em;}
footer .container > div:nth-child(2) ul li a span {font-weight: 600;}
footer .container > div:nth-child(2) p {color: #555;font-size: 62.5%;}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
}
@media only screen and (max-width: 1400px) {
  header .container {padding: 0.5em 0;}
  header .container > div {}
  header .container > div nav:nth-child(1) ul li.reserve,
  header .container > div nav:nth-child(1) ul li.request {width: 6em;height: calc(100% + 1em);top: -0.5em;}
  header .container > div nav:nth-child(1) ul li.request {right: 6em;}
  header .container > div nav:nth-child(1) ul li + li {margin-left: 1em;}
  header .container > div nav:nth-child(2) ul li + li {margin-left: 1em;}
}
@media only screen and (max-width: 1200px) {
  header .container h1 {width: 30% !important;}
  header .container > div {padding-right: 0;width: 68%;}
  header .container > div nav:nth-child(1) ul li.request {margin-left: 1em;}
  header .container > div nav:nth-child(1) ul li.reserve,
  header .container > div nav:nth-child(1) ul li.request {position: relative;top: -0.5em !important;right: 0;}
  header .container > div nav:nth-child(1) ul li.reserve a,
  header .container > div nav:nth-child(1) ul li.request a {padding: 0.75em 0;}
  header .container > div nav:nth-child(1) ul li.reserve a span,
  header .container > div nav:nth-child(1) ul li.request a span {position: static;transform: none;}
  header .container > div nav:nth-child(2) ul {margin: 0 1em 0 0 !important;}
  footer {padding: 6em 0 1em;}
  footer .container > div:nth-child(2) ul li {margin: 1em 0.5em;}
  footer .container > div:nth-child(2) ul li a {font-size: 87.5%;}
}
@media only screen and (max-width: 1100px) {
  header .container > div nav:nth-child(1) ul::before {display: none;}
}
@media only screen and (max-width: 960px) {
  header .container > div nav:nth-child(2) ul li {margin: 0 0.5em;}
  header .container > div nav:nth-child(2) ul li a {font-size: 100%;}
  footer {padding: 3em 0 2em;}
  footer .container > div {width: 100% !important;}
  footer .container > div:nth-child(1) {text-align: center;transform: none;}
  footer .container > div:nth-child(1) figure {margin: 0 auto 2em;}
  footer .container > div:nth-child(1) div {margin-left: 0;}
  footer .container > div:nth-child(2) ul {text-align: center;margin: 1em 0 2em;}
  footer .container > div:nth-child(2) p {text-align: center;}
}
@media only screen and (min-width: 768px) {
  a[href*="tel:"] {pointer-events: none;cursor: default;text-decoration: none;}
  .btn:hover {opacity: 0.7;transition: 0.4s;}
  .btn-style-01:hover {transition: 0.4s;}
  .btn-style-01:hover::after {background: linear-gradient(to right, #000 50%, #ff7f31 50%);transition: 0.4s;}
  .btn-style-01:hover::before {width: 100%;transition: 0.4s;}
  body.scrolled header .container {padding: 0.5em 0;transition: 0.4s;}
  body.scrolled header .container h1 {width: 20% !important;transition: 0.4s;}
  body.scrolled header .container > div nav:nth-child(2) ul li a {font-size: 100%;}
  body.scrolled header .container > div nav:nth-child(2) ul li a span::before {line-height: 1;transition: 0.4s;}
}
@media only screen and (max-width: 767px) {
  .pc {display: none !important;}
  .sp {display: block !important;}
  br.sp {line-height: 0;}
  .scroller {overflow-x: scroll;position: relative;}
  .scroller:before {content: "";display: block;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url("../img/common/common_swipe.png")no-repeat 50% 50%;background-size: 35% auto;z-index: 2;}
  .scroller:after {content: "";display: block;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms;position: absolute;top: 0;left: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.65);width: 210%;padding: 3%;z-index: 1;}
  .scroller.on:before,
  .scroller.on:after {opacity: 0;}
  .scroller img {width: 200%;opacity: 0.5;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms;}
  .scroller.on img {opacity: 1;}
  body {font-size: 4vw;}
  header {position: relative;}
  header .container {padding: 0;}
  header .container h1 {padding: 0.5em 0;margin: 0 auto;width: 100% !important;max-width: 100%;background: #fff;position: fixed;top: 0;left: 0;right: 0;z-index: 1000;transition: 0.4s;}
  header .container h1 a figure img {height: 2.5em;transition: 0.4s;}
  body.scrolled header .container h1 {padding: 0.5em 0;transition: 0.4s;}
  body.scrolled header .container h1 a figure img {height: 1.75em;transition: 0.4s;}
  header .container > div nav:nth-child(1) {display: flex;flex-wrap: wrap;justify-content: space-between;width: 22vw;height: 22vw;background: #fff;position: fixed;left: 0;bottom: 0;z-index: 1000;}
  header .container > div nav:nth-child(1) ul {display: flex;width: 80%;}
  header .container > div nav:nth-child(1) ul li {text-align: center;width: 25% !important;margin: 0 !important;position: relative;}
  header .container > div nav:nth-child(1) ul li a {padding: 3em 0 0.5em !important;position: relative;}
  header .container > div nav:nth-child(1) ul li a::after {display: block;content: '';width: 2em;height: 2em;margin: 0 auto;background: #aaa;position: absolute;top: 0.75em;left: 0;right: 0;z-index: 100;}
  header .container > div nav:nth-child(2) {width: 100vw;height: 100vh;background: rgba(0, 0, 0, 1);position: fixed;top: 50%;left: 50%;opacity: 0;pointer-events: none;transition: 0.4s;transform: translate(-50%,-50%);}
  header .container > div nav:nth-child(2)::after {display: block;content: '';width: 100%;height: 100%;background: url("../img/common/common_img01_sp.webp") no-repeat center/cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: -1;opacity: 0.7;}
  header .container > div nav:nth-child(2) ul {text-align: center;margin: 0 !important;width: 100%;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);}
  header .container > div nav:nth-child(2) ul li {display: block;margin: 0 !important;}
  header .container > div nav:nth-child(2) ul li a {display: block;color: #fff;font-size: 137.5%;letter-spacing: 0.1em;padding: 1em 0;transform: translateX(-1.5em);opacity: 0;}
  header .container > div nav:nth-child(2) ul li a span::before {display: none;width: 1em;height: 0.5em;background: url("../img/common/common_icon01.svg") no-repeat center/contain;}
  #btnNavView {width: 100%;background: var(--color-02);position: relative;}
  #btnNavView a {text-align: center;height: 100%;}
  #btnNavView a span:nth-child(1) {display: block;width: 50%;height: 2px;margin: 0 auto;background: #000;position: absolute;top: 40%;left: 0;right: 0;}
  #btnNavView a span:nth-child(1)::before,
  #btnNavView a span:nth-child(1)::after {display: block;content: '';width: 100%;height: 2px;background: #000;position: absolute;}
  #btnNavView a span:nth-child(1)::before {top: 0.75em;}
  #btnNavView a span:nth-child(1)::after {bottom: 0.75em;}
  #btnNavView a span:nth-child(2) {display: block;}
  #btnNavView a span:nth-child(3) {display: none;}
  #btnNavView a span + span {font-size: 87.5%;font-weight: 600;position: absolute;left: 0;right: 0;bottom: 0.75em;}
  body.open header #btnNavView a span:nth-child(1) {background: transparent;}
  body.open header #btnNavView a span:nth-child(1)::before,
  body.open header #btnNavView a span:nth-child(1)::after {top: 0;bottom: 0;}
  body.open header #btnNavView a span:nth-child(1)::before {transform: rotate(35deg);}
  body.open header #btnNavView a span:nth-child(1)::after {transform: rotate(-35deg);}
  body.open header #btnNavView a span:nth-child(2) {display: none;}
  body.open header #btnNavView a span:nth-child(3) {display: block;}
  /*body.open header .container h1 {opacity: 0.7;}*/
  body.open header .container > div nav:nth-child(2) {opacity: 1;pointer-events: auto;transition: 0.4s;}
  body.open header .container > div nav:nth-child(2) ul li:nth-child(1) a {opacity: 1;transform: translateX(0);transition: 0.2s ease-out 0s;}
  body.open header .container > div nav:nth-child(2) ul li:nth-child(2) a {opacity: 1;transform: translateX(0);transition: 0.2s ease-out 0.1s;}
  body.open header .container > div nav:nth-child(2) ul li:nth-child(3) a {opacity: 1;transform: translateX(0);transition: 0.2s ease-out 0.2s;}
  body.open header .container > div nav:nth-child(2) ul li:nth-child(4) a {opacity: 1;transform: translateX(0);transition: 0.2s ease-out 0.3s;}
  .billboard-style-02::before {height: 17em;}
  .billboard-style-02 h2 {width: 86%;}
  .billboard-style-02 h2::after {display: block;}
  .billboard-style-02 h2 span {font-size: 175%;}
  .ttl-style-01 span {font-size: 200%;}
  .ttl-style-01::after {font-size: 100%;}
  .btn-style-01 {margin-top: 1.5em;}
  #contentsWrap {}
  footer {padding: 3em 0 0.5em;}
  footer .container > div:nth-child(1) {padding-bottom: 5em;}
  footer .container > div:nth-child(2) ul {display: none;}
  footer .container > div:nth-child(2) p {text-align: right;}
}
@media (orientation: landscape) and (max-width: 767px){}
@media print {
  body {font-size: 1.2vw;-webkit-print-color-adjust: exact;}
  .observe {opacity: 1 !important;transform: none !important;}
  /*top*/
  body#index #service ul li a {clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%) !important;}
  /*about*/
  body#about #history > div table tr th::after,
  body#about #history > div table tr th span:nth-child(2)::before,
  body#about #history > div table tr td span,
  body#about #history > div table tr th span {opacity: 1;transform: translateX(0);}
  body#about #profile iframe {width: 100%;height: 300px;}
  body#about #history > div table tr th span:nth-child(2)::before {display: none;width: 7px;height: 7px;}
  body#about #history > div table tr th::after {height: 100%;}
  /*recruit*/
  body#recruit #contact {font-size: 1.1vw;}
  body#recruit #contact > div:nth-child(1) figure {width: 35%;}
}