@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* Reset */
*,
*::before,
*::after { box-sizing: border-box}
html, body { margin: 0; padding: 0; font-family: "Lato", "Noto Sans JP", sans-serif}
h1, h2, h3, h4, h5, h6, p { margin: 0; font-size: inherit; line-height: 150%}
ul, ol { margin: 0; padding: 0; list-style: none}
img, svg { max-width: 100%; height: auto; vertical-align: middle}
figure { margin: 0}
button, input, textarea, select { font: inherit; margin: 0}
button { cursor: pointer}
.sp-only { display: block}
.pc-only { display: none}
@media (max-width: 768px) {
}
@media (min-width: 769px) {
 .sp-only { display: none}
 .pc-only { display: block}
}
/* --------------------
 COMMON
-------------------- */
html { scroll-behavior: smooth}
body { font-family: "Lato", "Noto Sans JP", sans-serif; color: #000; font-size: 14px; background: url(img/bg_body_sp.png) no-repeat top center/100% auto; background-attachment: fixed}
main { padding-top: 80px;}
a { color: #000; text-decoration: none; transition: color 0.5s ease}
.inr { max-width: 1120px; margin: auto; padding: 0 20px}
section h2 {  padding-left: calc(19px + 8px); color: #fa0000; font-size: 40px; font-weight: 400; line-height: 1; background: url(img/icon_dot.png) no-repeat left bottom 13px/19px auto}
section h2 small { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700}
section .inr { max-width: 1080px; margin: auto}
@media (max-width: 768px) {
}
@media (min-width: 769px) {
 body { font-size: 16px; background-image: url(img/bg_body_pc.png)}
 main { padding-top: 130px}
 a:hover { color: #fa0000}
 section h2 { padding-left: calc(28px + 21px);  font-size: 60px; background-size: 28px auto}
 section h2 small { font-size: 20px}
}
 /* --------------------
 HEADER
-------------------- */
header { position: fixed; top: 0; left: 0; width: 100%; padding: 0; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.50) 60%, rgba(255, 255, 255, 0) 100%); transition: background 0.3s ease; z-index: 999}
header .inr { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1080px; margin: auto; font-weight: bold}
header .inr .logo img { width: 52%}
@media (max-width: 767px) {
 header.sp-only { display: flex; align-items: center; height: 80px}
}
@media (min-width: 769px) {
 header { height: 100px; padding: 40px 0 67px; font-size: 20px}
 header .inr .logo img { width: 220px}
 header .inr ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 28.33%}
}
/* スマホハンバーガーメニュー */
@media (max-width: 767px) {
 .menu-button { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.4s ease}
 .menu-button span { display: block; width: 30px; height: 2px; background: #484848; transition:   transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),   opacity 0.2s ease}
 .menu-button.is-open { transform: rotate(180deg)}
 .menu-button.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg)}
 .menu-button.is-open span:nth-child(2) { opacity: 0}
 .menu-button.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg)}
 .nav { position: fixed; top: 80px; right: 0; clip-path: inset(0 0 100% 0); transform: none; transition: clip-path 0.4s ease; z-index: 1000}
 .nav.is-open { clip-path: inset(0 0 0 0)}
 .nav ul { display: block; margin: 0; padding: 0}
 .nav ul li a { display: block; padding: 20px 30px; color: #fff; font-size: 18px; background: #000}
 .nav ul li a span::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 9px; background: url(img/icon_arrow.png) no-repeat right center/11px auto}
 .nav ul li:nth-child(n+2) a { border-top: 1px solid #fff}
}
@media (min-width: 769px) {
  .nav, .menu-button { display: none}
}
/* --------------------
 FV
-------------------- */
/*.fv { background: url(img/bg_fv_sp.png) no-repeat top center/100% auto}
.fv figure { max-width: calc(100% - 40px); margin: auto; text-align: center}
.fv figure .logo { max-width: 40%}
.fv figure .history { filter: drop-shadow(0 2px 4px rgba(0,0,0,.12))}
@media (max-width: 768px) {
 .fv-band { text-align: center}
 .fv-band h1 { margin-bottom: 20px}
}
@media (min-width: 769px) {
 .fv { height: 468px; margin-bottom: 31px; background: url(img/bg_fv_pc.png) no-repeat top center/cover}
 .fv figure { display: flex; align-items: flex-end; max-width: 858px; height: 468px}
 .fv figure .logo { max-width: 41%}
}
*/
.fv img { width: 100%; height: auto; margin-bottom: 22px}
.fv-band { padding: 57px 0; color: #fff; background: linear-gradient( to right, #BF0010 0%, #BF0010 25%, #E92F1A 50%, #BF0010 75%, #E92F1A 100%)}
.fv-band h1 { font-size: 24px}
.fv-band .text { line-height: 200%}
@media (max-width: 768px) {
 .fv-band { text-align: center}
 .fv-band h1 { margin-bottom: 20px}
}
@media (min-width: 769px) {
 .fv-band { padding: 42px 0}
 .fv-band .inr { display: flex; justify-content: space-between; align-items: center}
 .fv-band h1 { width: fit-content!important; font-size: 32px}
 .fv-band .text { width: calc(100% - 49%)}
}
/* --------------------
 GREETING
-------------------- */
.sec-greeting { position: relative; overflow: hidden; clip-path: polygon(0 0, 50% 50px, 100% 0, 100% 100%, 0 100%); margin-top: 50px; padding: 90px 0 0; background: #fff url(img/bg_greeting_sp.png) no-repeat bottom center/100% auto}
.sec-greeting h2 { margin: 0 0 50px}
.sec-greeting .catch { margin: 30px 0}
.sec-greeting p { font-weight: 500; line-height: 180%}
.sec-greeting p+p { margin-top: 1em}
.sec-greeting .sign { margin-top: 55px; font-size: 16px; font-weight: bold; background: #f5fbfd}
.sec-greeting .sign img { mix-blend-mode: multiply}
.sec-greeting .photo { margin-top: -74px}
@media (max-width: 768px) {
 .sec-greeting .catch { max-width: 317px}
 .sec-greeting .sign { text-align: right}
 .sec-greeting .sign img { width: auto; margin-top: 20px; height: 40px}
 .sec-greeting .photo { width: 41%; margin-left: 14px}
}
@media (min-width: 769px) {
 .sec-greeting { clip-path: polygon(0 0, 50% 90px, 100% 0, 100% 100%, 0 100%); margin-top: 112px; padding: 123px 0 0; background-image: url(img/bg_greeting_pc.png)}
 .sec-greeting .greeting-text { padding-right: calc(1080px - 940px - 40px)}
 .sec-greeting .greeting-img { max-width: 991px; padding-right: calc(59px - 20px)}
 .sec-greeting .catch { margin-top: 20px}
 .sec-greeting .sign { margin-top: 170px; margin-left: 45px; font-size: 20px}
 .sec-greeting .sign img { margin-left: 31px}
 .sec-greeting .photo { display: block; margin-top: -150px; margin-left: auto}
}
/* --------------------
 HISTORY
-------------------- */
.sec-history { margin-bottom: 60px; padding: 60px 0 100px; background: #fff url(img/bg_history_sp.png) no-repeat top right -40px /100% auto; clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px))}
.sec-history h2 { width: fit-content; margin: 0 auto 24px}
.sec-history .movie-wrapper { width: 100%; max-width: 640px; margin: auto; aspect-ratio: 16 / 9; border: 1px solid #868080}
.sec-history .movie-wrapper iframe { width: 100%; height: 100%; display: block; border: 0}
@media (min-width: 769px) {
 .sec-history { padding: 120px 0 200px; background: #fff url(img/bg_history_pc.png) no-repeat calc(50% + 280px) top/810px auto; clip-path: polygon( 0 0,
  100% 0,
  100% calc(100% - 120px),
  50% calc(100% + 1px),
  0 calc(100% - 120px));}
 .sec-history h2 { margin-bottom: 50px}
}
/* --------------------
 MASSAGE
-------------------- */
.sec-message { margin-bottom: 100px; padding: 60px 0; background: #fff}
.sec-message .inr {  max-width: 845px; padding: 40px 20px; border: 1px solid #fa0000}
.sec-message h2 { width: fit-content; margin: auto}
.sec-message .catch { width: fit-content; margin: 30px auto}
.sec-message p { line-height: 180%}
.sec-message p+p { margin-top: 1em}
@media (max-width: 768px) {
 .sec-message .inr { margin: 0 20px}
 .sec-message .catch { max-width: 268px}
}
@media (min-width: 769px) {
 .sec-message { margin: 150px 0; padding: 80px 0}
 .sec-message .inr { padding: 60px 103px}
 .sec-message .catch { margin-top: 50px}
 .sec-message p { font-size: 18px}
}
/* --------------------
 FOOTER
-------------------- */
footer { padding: 40px 0 22px; color: #fff; background: linear-gradient( to right, #bf0010 0%, #bf0010 25%, #E92F1A 50%, #BF0010 75%, #E92F1A 100%)}
footer .logo { width: fit-content; margin: auto}
footer ul { display: flex; justify-content: space-between; max-width: 377px; margin: 30px auto}
footer ul li a { display: inline-block; position: relative; padding-right: calc(11px + 9px); color: #fff; font-size: 18px}
footer ul li a::after { content: ""; position: absolute; width: 11px; height: 11px; right: 0; bottom: 2px; background: url(img/icon_arrow.png) no-repeat center center/11px auto; transition: right 0.3s ease}
footer ul li a:hover::after { right: -5px}
footer .corporate { max-width: 640px; margin: auto; padding: 16px 50px; background: #fff}
footer .box-link { display: flex; justify-content: center; align-items: center; height: 54px; padding: 16px 40px; color: #fff; font-size: 16px; background: #000}
footer .box-link span { position: relative; display: block; padding-right: 23px}
footer .box-link span::after { content: ""; position: absolute; width: 13px; height: 13px; right: 0; top: 50%; transform: translateY(-50%); background: url(img/icon_arrow.png) no-repeat center center/13px auto; transition: right 0.3s ease}
footer .box-link span:hover::after { right: -5px}
footer .copyright { margin-top: 20px; font-size: 10px; font-weight: bold; text-align: center}
@media (max-width: 768px) {
 footer .logo { max-width: 82px}
 footer .corporate { text-align: center}
 footer .box-link { margin-top: 20px}
}
@media (min-width: 769px) {
 footer .corporate { display: flex; justify-content: space-between; align-items: center; padding: 20px 59px}
 footer .box-link { font-size: 18px; transition: background-color 0.5s ease}
 footer .box-link:hover { color: #fff; background: #fa0000}
 footer .box-link span { padding-right: 26px}
 footer .box-link span::after { width: 16px; height: 16px; background-size: 16px auto}
 footer ul { margin: 40px auto}
 footer ul li a { padding-right: calc(14px + 9px); font-size: 20px}
 footer ul li a::after { width: 14px; height: 14px; background-size: 14px auto}
 footer ul li a:hover { color: #fff}
 footer .copyright { margin-top: 15px}
}

.inview_fade {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.inview_fade.is-show {
  opacity: 1;
  transform: translateY(0);
}

.inview_fade.delay-1 {
  transition-delay: 0.3s;
}