@charset "UTF-8";

body,html {
margin:0;
padding:0;
font-family:"Noto Sans JP",sans-serif;
overflow-x:hidden
}

img {
width:100%;
height:auto;
vertical-align:bottom
}

figure {
margin:0
}

picture img {
width:100%;
height:auto;
vertical-align:top
}

#header {
position:fixed;
top:-100px;
left:0;
width:100%;
background-color:#FFF;
z-index:1000;
transition:top .3s ease-in-out
}

#header.show {
top:0
}

h1 {
display:none
}

h3 {
display:none
}

.header-flex-container {
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 5%
}

.header-logo img {
max-width:180px;
height:auto
}

.header-ul {
list-style:none;
margin:0;
padding:0;
display:flex;
gap:2em
}

.header-li a {
font-family:"Noto Sans JP",sans-serif;
font-weight:300;
color:#7C9097;
text-decoration:none;
font-size:1em;
letter-spacing:.1em
}

#hamburger {
display:none
}

.first-view {
position:relative;
width:100%;
height:100vh;
overflow:hidden
}

.first-view video {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover
}

.video-pc {
display:block
}

.video-mobile {
display:none
}

.svg-title {
position:absolute;
bottom:-3px;
left:50%;
transform:translateX(-50%);
height:auto;
max-width:1000px;
padding-left:1em;
padding-right:1em
}

p {
margin:0
}

a {
text-decoration:none;
cursor:pointer;
color:#4D4D4D4D
}

nav {
margin:0 0 0 auto
}

.flex {
display:flex
}

ul {
list-style:none;
margin:0 auto;
padding:0
}

.pc-nav {
color:#E6e6e6
}

.sp-nav {
display:none
}

.image-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:50px
}

.image-item img {
width:100%;
height:auto;
display:block
}

#footer {
background-color:#7C9097;
padding:40px 20px;
text-align:center;
border-top:1px solid #e7e7e7;
color:#FFF;
font-family:"Noto Sans JP",sans-serif
}

.footer-logo img {
width:auto;
height:70px
}

.address a {
color:#FFF;
text-decoration:none
}

.navi-row {
display:flex;
flex-direction:column;
align-items:center
}

.navi,.sns-navi {
list-style:none;
padding:0;
margin:20px 0;
display:flex;
flex-wrap:wrap;
justify-content:center;
font-family:"Noto Sans JP",sans-serif
}

.navi li,.sns-navi li {
margin:10px 15px
}

.navi li a {
color:#FFF;
font-family:"Noto Sans JP",sans-serif;
font-size:1.2em;
text-decoration:none;
transition:color .3s ease
}

.navi li a:hover {
opacity:.7
}

.sns-navi li a {
font-size:3em;
color:#FFF;
transition:color .3s ease
}

.sns-navi li a:hover {
opacity:.7
}

.copyright {
font-size:.9em;
color:#FFF;
font-family:"Noto Sans JP",sans-serif;
margin-top:30px
}

@media screen and (max-width: 768px) {
.navi-row {
flex-direction:column
}

.navi,.sns-navi {
flex-direction:column;
align-items:center
}

.navi li,.sns-navi li {
margin:10px 0
}
}

@media screen and (max-width: 600px) {
#footer {
padding:30px 15px
}

.address br.sp-br {
display:none
}

.sns-navi {
flex-direction:row;
justify-content:center
}

.sns-navi li {
margin:10px 15px
}

.copyright {
margin-top:20px
}
}

@media screen and (max-width: 767px) {
.image-grid {
grid-template-columns:repeat(2,1fr)
}
}

.content-wrapper {
display:flex;
align-items:center;
justify-content:center;
gap:20px
}

.side-image {
max-width:70px;
height:auto
}

.normal-box2 {
margin:.1em 0;
padding:.7em;
background-color:#FFF;
border-radius:1em
}

.normal-box2 td {
margin:0;
padding:0
}

.text-image-container {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2vw;
width:100%;
margin:0 auto;
padding:5vw 0
}

.typing-animation::after {
content:'';
border-right:1px solid #333;
margin-left:2px;
animation:flashing 1s linear infinite;
opacity:0
}

@keyframes flashing {
0%,100% {
opacity:0
}

50% {
opacity:1
}
}

.heading-2 {
font-family:"Noto Sans JP",sans-serif;
font-size:clamp(1rem,0.862rem + 0.59vw,1.563rem);
font-weight:350;
text-align:center;
line-height:3em;
letter-spacing:.3em;
color:#FFF;
margin:0 auto
}

.heading-3 {
font-family:"Noto Sans JP",sans-serif;
font-size:clamp(1.125rem,0.989rem + 0.68vw,1.5rem);
font-weight:300;
text-align:center;
line-height:2em;
letter-spacing:.3em;
color:#FFF;
margin:0 auto
}

h2 {
font-family:"Jost",sans-serif;
font-size:clamp(3.125rem,2.492rem + 3.16vw,6.25rem);
font-weight:500;
text-align:center;
color:#7C9097;
margin:0 auto
}

.caption {
font-family:"Noto Sans JP",sans-serif;
font-size:clamp(1rem,0.818rem + 0.91vw,1.5rem);
font-weight:300;
text-align:center;
letter-spacing:.3em;
color:#4D4D4D;
margin:0 auto
}

* {
margin:0;
padding:0;
box-sizing:border-box
}

#page-top a {
display:flex;
justify-content:center;
align-items:center;
background:#4D4D4D;
border-radius:5px;
width:60px;
height:60px;
color:#D5C78C;
text-align:center;
text-transform:uppercase;
text-decoration:none;
font-size:1em;
letter-spacing:.1em;
transition:all .3s;
font-family:"Jost",sans-serif
}

#page-top a:hover {
background:#777
}

#page-top {
position:fixed;
left:10px;
bottom:10px;
z-index:50;
opacity:0;
transform:translateX(-100px)
}

#page-top.LeftMove {
animation:LeftAnime .5s forwards
}

@keyframes LeftAnime {
from {
opacity:0;
transform:translateX(-100px)
}

to {
opacity:1;
transform:translateX(0)
}
}

#page-top.RightMove {
animation:RightAnime .5s forwards
}

@keyframes RightAnime {
from {
opacity:1;
transform:translateX(0)
}

to {
opacity:0;
transform:translateX(-100px)
}
}

.container {
position:relative;
margin:0 auto;
max-width:1080px;
z-index:2
}

.background {
background-color:#7C9097;
background-size:cover;
position:relative
}

.flex {
margin:0 auto;
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
}

.flex-col2 {
width:calc((100% - 25px) / 2);
display:flex;
justify-content:center;
flex-wrap:wrap;
flex-direction:column
}

.flex-left {
width:28.75%
}

.flex-right {
width:68.75%
}

.flex-row-reverse {
flex-direction:row-reverse
}

.heading-banner {
font-family:"Zen Kaku Gothic New",sans-serif;
font-size:clamp(1.438rem,1.278rem + 0.8vw,1.875rem);
font-weight:500;
text-align:center;
line-height:2.5em;
letter-spacing:.2em;
color:#4D4D4D;
margin:0 auto
}

.heading-banner::after {
content:"";
display:block;
width:100%;
height:1px;
background-color:#4D4D4D;
margin:.1em auto 0
}

.text-banner {
font-family:"Zen Kaku Gothic New",sans-serif;
font-size:clamp(1rem,0.841rem + 0.8vw,1.438rem);
font-weight:300;
text-align:center;
line-height:2em;
letter-spacing:.1em;
color:#4D4D4D;
margin:0 auto
}

.phone-banner {
font-family:"Jost",sans-serif;
font-size:clamp(1.438rem,1.278rem + 0.8vw,1.875rem);
font-weight:500;
text-align:center;
line-height:2em;
letter-spacing:.1em;
color:#6CC;
margin:0 auto
}

.phone-banner a {
color:#6CC;
text-decoration:none
}

.floating-banner {
position:fixed;
z-index:10;
bottom:1em;
right:2em;
width:300px;
display:none;
box-sizing:border-box
}

.floating-banner a {
display:block
}

.floating-banner__image {
max-width:100%
}

.link-caption {
font-size:clamp(0.938rem,0.892rem + 0.23vw,1.063rem);
line-height:2em;
letter-spacing:.1em;
font-weight:400;
color:#4D4D4D;
text-align:center;
font-family:"Noto Sans JP",sans-serif;
margin-top: 1vw
}

@media screen and (max-width: 768px) {
.floating-banner {
display:block;
width:100%;
bottom:0;
left:0;
right:0
}
#page-top a {
border-radius:4px;
width:50px;
height:50px
}
#page-top {
left:5px;
bottom:5px
}
.text {
font-size:14px
}
}

.svganimeblock {
margin:auto;
text-align:center;
max-width:800px;
width:100%
}

.svganimeblock svg {
width:100%
}

.svganimeblock svg path {
fill-opacity:0;
transition:fill-opacity .5s;
fill:none;
stroke:#FFF
}

.svganimeblock svg.done path {
fill:#FFF;
fill-opacity:1;
stroke:none
}

@keyframes shine {
100% {
left:125%
}
}

.sp-view {
display:none
}

.checkbox-container {
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
width:100%;
box-sizing:border-box;
margin:0;
padding:0
}

.checkbox-item {
display:flex;
align-items:center;
width:100%;
max-width:600px;
margin:0;
font-family:"Noto Sans JP",sans-serif;
font-size:clamp(0.938rem,0.855rem + 0.35vw,1.25rem);
font-weight:350;
text-align:left;
line-height:1.5em;
letter-spacing:.1em;
color:#4D4D4D;
box-sizing:border-box
}

.checkmark {
width:30px;
height:30px;
background-color:#FFF;
border:2px solid #4D4D4D;
border-radius:3px;
margin-right:1em;
position:relative
}

.checkmark:after {
content:"";
position:absolute;
left:5px;
top:-7px;
width:15px;
height:25px;
border:solid #E8382F;
border-width:0 2px 2px 0;
transform:rotate(45deg)
}

.youtube {
width:100%;
aspect-ratio:16 / 9
}

.youtube iframe {
width:100%;
height:100%
}

h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(1.125rem, 0.784rem + 1.45vw, 1.875rem);
    font-weight: 350;
    color: #4D4D4D;
    text-align: center;
    position: relative;
}

h4::before,
h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #CAC5C3;
}

h4::before {
    margin-right: 0.5em; /* テキスト左右のスペース */
}

h4::after {
    margin-left: 0.5em; /* テキスト左右のスペース */
}

h4 span {
    padding: 0 0.5em; /* テキスト周りのスペース */
    background: #fff; /* テキスト周囲に背景色を付ける */
    letter-spacing: 0.1em;
}

.swiper-container {
position:relative;
width:100%;
height:100%
}

.text {
font-size:15px;
line-height:1.6em;
letter-spacing:.1em;
font-weight:350;
text-align:left;
color:#4D4D4D;
text-align:justify
}

.swiper-slide {
max-width:2000px;
width:100%;
height:auto;
display:flex;
align-items:center;
justify-content:center;
position:relative
}

.swiper-slide img {
width:105%;
height:100%;
object-fit:cover
}

.swiper-wrapper {
transition-timing-function:linear
}

@media (min-width: 1024px) {
.swiper-slide {
height:800px
}
}

@media (max-width: 768px) {
.swiper-slide {
height:300px;
padding:0;
margin:0
}

.swiper {
padding:0
}

.swiper-slide img {
width:130%;
height:auto;
object-fit:cover
}
.text {
font-size:13px
}
}

.mbottom-5 {
margin-bottom:5px
}

.mbottom-10 {
margin-bottom:10px
}

.mbottom-15 {
margin-bottom:15px
}

.mbottom-30 {
margin-bottom:30px
}

.mbottom-50 {
margin-bottom:50px
}

.mbottom-70 {
margin-bottom:70px
}

.mbottom-100 {
margin-bottom:100px
}

.mbottom-200 {
margin-bottom:200px
}

.mtop-200 {
margin-top:200px
}

.mtop-100 {
margin-top:100px
}

.mtop-50 {
margin-top:50px
}

.mtop-70 {
margin-top:70px
}

.mtop-30 {
margin-top:30px
}

.mtop-15 {
margin-top:15px
}

.mtop-10 {
margin-top:10px
}

.mtop-5 {
margin-top:5px
}

.pbottom-200 {
padding-bottom:200px
}

.pbottom-100 {
padding-bottom:100px
}

.pbottom-70 {
padding-bottom:70px
}

.pbottom-50 {
padding-bottom:50px
}

.pbottom-30 {
padding-bottom:30px
}

.pbottom-15 {
padding-bottom:15px
}

.pbottom-10 {
padding-bottom:10px
}

.pbottom-5 {
padding-bottom:5px
}

.ptop-200 {
padding-top:200px
}

.ptop-150 {
padding-top:150px
}

.ptop-100 {
padding-top:100px
}

.ptop-70 {
padding-top:70px
}

.ptop-50 {
padding-top:50px
}

.ptop-30 {
padding-top:30px
}

.ptop-15 {
padding-top:15px
}

.ptop-10 {
padding-top:10px
}

.ptop-5 {
padding-top:5px
}

.sp-br {
display:none
}

.br-sp {
display:block
}

.map-container {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
max-width:100%;
background:#f0f0f0;
margin:0 auto
}

.map-container iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0
}

@media screen and (max-width: 1279px) {
.container {
padding:0 25px
}

.mbottom-5 {
margin-bottom:3px
}

.mbottom-10 {
margin-bottom:5px
}

.mbottom-15 {
margin-bottom:7px
}

.mbottom-30 {
margin-bottom:15px
}

.mbottom-50 {
margin-bottom:25px
}

.mbottom-70 {
margin-bottom:35px
}

.mbottom-100 {
margin-bottom:50px
}

.mtop-200 {
margin-top:100px
}

.mtop-100 {
margin-top:50px
}

.mtop-70 {
margin-top:35px
}

.mtop-50 {
margin-top:25px
}

.mtop-30 {
margin-top:15px
}

.mtop-15 {
margin-top:7px
}

.mtop-10 {
margin-top:5px
}

.mtop-5 {
margin-top:3px
}

.pbottom-200 {
padding-bottom:100px
}

.pbottom-100 {
padding-bottom:50px
}

.pbottom-70 {
padding-bottom:35px
}

.pbottom-50 {
padding-bottom:25px
}

.pbottom-30 {
padding-bottom:15px
}

.pbottom-15 {
padding-bottom:7px
}

.pbottom-10 {
padding-bottom:5px
}

.pbottom-5 {
padding-bottom:3px
}

.ptop-200 {
padding-top:100px
}

.ptop-150 {
padding-top:75px
}

.ptop-100 {
padding-top:50px
}

.ptop-70 {
padding-top:35px
}

.ptop-50 {
padding-top:25px
}

.ptop-30 {
padding-top:15px
}

.ptop-15 {
padding-top:7px
}

.ptop-10 {
padding-top:5px
}

.ptop-5 {
padding-top:3px
}
}

@media screen and (max-width: 990px) {
li {
display:inline;
margin:0 auto;
font-size:15px
}

#header {
position:fixed;
top:-100px;
left:0;
width:100%;
background-color:#FFF;
z-index:1000;
transition:top .3s ease-in-out
}

.header-flex-container {
padding:2% 3%
}

.header-logo img {
height:50px
}

.sp-nav {
z-index:30;
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#7C9097;
transform:translateY(-100%);
transition:transform .7s ease-in-out,opacity .7s ease-in-out;
display:block
}

.sp-nav.toggle {
transform:translateY(0)
}

#hamburger {
display:block;
width:30px;
height:25px;
margin:0;
position:relative;
z-index:999
}

#hamburger span {
position:absolute;
top:50%;
left:0;
width:100%;
height:2px;
background-color:#7C9097;
transform:translateY(-50%)
}

#hamburger::before,#hamburger::after {
content:'';
position:absolute;
left:0;
width:100%;
height:2px;
background-color:#7C9097
}

#hamburger::before {
top:0
}

#hamburger::after {
bottom:0
}

.sp-nav ul {
padding:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100%
}

.sp-nav li {
margin:0;
padding:0;
font-family:"Noto Sans JP",sans-serif;
font-size:18px;
letter-spacing:.1em
}

.sp-nav li span {
font-size:16px;
color:#fff
}

.sp-nav li a,.sp-nav li span {
display:block;
padding:20px 0;
color:#fff
}

.sp-nav .close {
position:relative;
padding-left:20px
}

.sp-nav .close::before,.sp-nav .close::after {
content:'';
position:absolute;
top:50%;
left:0;
display:block;
width:16px;
height:1px;
background:#E6e6e6
}

.sp-nav .close::before {
transform:rotate(45deg)
}

.sp-nav .close::after {
transform:rotate(-45deg)
}

.header-ul {
display:none
}

.header-li {
margin-bottom:10px;
font-family:"Jost","Noto Sans JP","sans-serif"
}

.header-li:hover {
opacity:.7
}
}
@media screen and (max-width: 475px) {
h4 {
font-size:18px;
}
}
@media screen and (max-width: 767px) {
.first-view {
height:auto
}

.first-view video {
position:relative;
width:100%;
height:auto;
object-fit:contain
}

.video-pc {
display:none
}

.video-mobile {
display:block
}

.svg-title {
bottom:-3px;
max-width:600px
}

.mbottom-15 {
margin-bottom:1.5vw
}

.mbottom-30 {
margin-bottom:2vw
}

.mbottom-50 {
margin-bottom:5vw
}

.mbottom-70 {
margin-bottom:7vw
}

.mbottom-100 {
margin-bottom:10vw
}

.mtop-200 {
margin-top:20vw
}

.mtop-100 {
margin-top:7vw
}

.mtop-70 {
margin-top:7vw
}

.mtop-50 {
margin-top:5vw
}

.mtop-30 {
margin-top:2vw
}

.mtop-15 {
margin-top:1.5vw
}

.pbottom-200 {
padding-bottom:20vw
}

.pbottom-100 {
padding-bottom:10vw
}

.pbottom-70 {
padding-bottom:7vw
}

.pbottom-50 {
padding-bottom:5vw
}

.pbottom-30 {
padding-bottom:3vw
}

.pbottom-15 {
padding-bottom:1.5vw
}

.ptop-200 {
padding-top:20vw
}

.ptop-100 {
padding-top:10vw
}

.ptop-70 {
padding-top:7vw
}

.ptop-50 {
padding-top:5vw
}

.ptop-30 {
padding-top:3vw
}

.ptop-15 {
padding-top:1.5vw
}

.ptop-150 {
padding-top:15vw
}

.container {
padding:0 5vw
}

.flex:last-child {
margin-bottom:0
}

.flex-col2 {
width:100%;
height:auto
}

.flex-col2:first-child {
margin-bottom:2vw
}

.flex-col2 p {
margin:0 auto;
display:block
}

.flex-col2 picture img {
width:100%;
height:auto;
margin:0 auto;
display:block
}

.flex-col3 {
width:100%
}

.flex-col3:nth-child(-n+2) {
margin-bottom:5vw
}

.flex-left {
margin-bottom:5vw;
width:100%
}

.flex-right {
width:100%
}

.flex-row-reverse {
flex-direction:row
}

.sp-br {
display:block
}
}

@media(min-width: 768px) {
a[href^="tel:"] {
pointer-events:none
}
}