@charset "UTF-8";
/* base
------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");
:root {
--easing: cubic-bezier(.2, 1, .2, 1);
--transition: .8s var(--easing);
--color-base: #f8f8f8;
--color-theme: #f5695f;
--color-theme-darken: #f12617;


}


@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 640px) {

}

*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

::-moz-selection {
color: #fff;
background: var(--color-theme);
}

::selection {
color: #fff;
background: var(--color-theme);
}


/* slider */
[class*=swiper]:focus {
outline: none;
}

.slide-media,
.thumb-media {
position: relative;
overflow: hidden;
}
.slide-media img,
.thumb-media img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}

/* 前へ / 次へボタン */
.swiper-button-prev, .swiper-button-next {
display: grid;
place-content: center;
width: 6.4rem;
height: 6.4rem;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
}
@media only screen and (min-width: 1201px) {
.swiper-button-prev::before, .swiper-button-next::before {
-webkit-transition: var(--transition);
transition: var(--transition);
}
/*
.swiper-button-prev:hover::before, .swiper-button-next:hover::before {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
*/
}

.swiper-button-prev::before, .swiper-button-next::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
border-radius: 50%;
-webkit-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
}
.swiper-button-prev::after, 
.swiper-button-next::after {
width: 1.2rem;
height: 1.2rem;
content: "";
border: solid #000;
border-width: 3px 3px 0 0;
}
.swiper-button-prev::after {
margin-left: 0.4rem;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.swiper-button-next::after {
margin-right: 0.4rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.swiper-button-disabled {
pointer-events: none;
opacity: 0;
}


.mv01 { position: relative; width: 1200px; margin: 0 auto; height: 760px }
.mv01 .slide-media { height: 760px }

@media only screen and (max-width: 1200px) {

}

.mv01 .swiper-fade .swiper-slide {
-webkit-transition-property: opacity, -webkit-transform !important;
transition-property: opacity, -webkit-transform !important;
transition-property: opacity, transform !important;
transition-property: opacity, transform, -webkit-transform !important;
pointer-events: none;
}
.mv01 .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.mv01 .swiper-pagination {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 3.2rem;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
margin: auto;
}
.mv01 .swiper-pagination-bullet {
display: block;
width: 3px;
height: 4rem;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
background-color: hsla(0,0%,100%,0.40);
}
.mv01 .swiper-pagination-bullet:not(:first-child) {
margin-top: 0.8rem;
}
.mv01 .swiper-pagination-bullet-active {
background-color: var(--color-theme);
}
.mv01 .slide-media {
height: 800px;
}
@media only screen and (max-width: 1200px) {

.mv01 { height: 760px }

.mv01 .slide-media {
height: max(70vh, 70vw);
}

.mv01 .slide-media {
height: max(70vh, 70vw);
}
}
.mv01 .slide-media img {
-webkit-transition: 7s 1s ease-out;
transition: 7s 1s ease-out;
}
.mv01 .slide-title {
font-size: 1.8rem;
font-weight: normal;
line-height: 1.2;
position: absolute;
left: 25px;
bottom: 20px;
text-align: left;
color: #fff;
}
@media only screen and (max-width: 640px) {

.mv01 { height: 80vh; width: 100%;  }
.mv01 .slide-media { height: 80vh }
.mv01 .slide-title { 
font-size: 1.2rem; 
left: 20px;
bottom: 20px;
}

}

.mv01 .swiper-slide[class*=-active] .slide-media img {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.mv01 .swiper-slide[class*=-active] .slide-title {
-webkit-animation: mv01-fadeIn 2s 0.5s var(--easing) both;
animation: mv01-fadeIn 2s 0.5s var(--easing) both;
}

@-webkit-keyframes mv01-fadeIn {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-filter: blur(300px);
filter: blur(300px);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-filter: blur(0);
filter: blur(0);
}
}

@keyframes mv01-fadeIn {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-filter: blur(300px);
filter: blur(300px);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-filter: blur(0);
filter: blur(0);
}
}

.gallery02 { overflow: hidden; position: relative; }
.gallery02 .swiper { overflow: visible; max-width: 800px; margin: 0 auto; }
.gallery02 .swiper-wrapper {  }
.gallery02 .slide { display: block; overflow: hidden; }

.gallery02 .slide-media { display: block; padding-top: 62.5%; }
.gallery02 .slide-media img { -o-object-fit: contain; object-fit: contain; }

.gallery02 .swiper-fade .swiper-slide {
-webkit-transition-property: opacity, -webkit-transform !important;
transition-property: opacity, -webkit-transform !important;
transition-property: opacity, transform !important;
transition-property: opacity, transform, -webkit-transform !important;
pointer-events: none;
}

.gallery02 .swiper-fade .swiper-slide-active { pointer-events: auto; }

.gallery02 .swiper-controller {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 62.5%;
}

.gallery02 .swiper-button-prev, 
.gallery02 .swiper-button-next 
{ position: absolute; z-index: 1; top: 0; bottom: 0; margin: auto; }

.gallery02 .swiper-button-prev { left: -20px; background-color: hsla(359,100%,50%,0); }
.gallery02 .swiper-button-next { right: -20px; background-color: hsla(359,100%,50%,0); }

.gallery02 .thumb-wrapper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.gallery02 .thumb-wrapper { max-width: 676px; margin: auto; }

.gallery02 .thumb-media {
padding-top: 100%;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
border-radius: 0px;
}

.gallery02 .thumb-media img {
-webkit-transition: var(--transition);
transition: var(--transition);
}
.gallery02 .thumb-media-active {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 1;
filter: grayscale(100%);
}
.gallery02 .thumb-media-active img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

.gallery02 .slide-title {
text-align: center ;
font-size: 1.1em;
line-height: 1.1em;
padding: 40px 0 20px;
}

@media only screen and (max-width: 1200px) {

.gallery02 { padding-bottom: 40px }

.gallery02 .swiper-button-prev::before, 
.gallery02 .swiper-button-next::before 
{ }

.gallery02 .swiper-button-prev::after, 
.gallery02 .swiper-button-next::after 
{ }

.gallery02 .swiper-button-prev { left: 0px; }
.gallery02 .swiper-button-next { right: 0px; }

}


@media only screen and (max-width: 640px) {

.gallery02 .slide { width: 100%; margin: 0; padding: 0 }
.gallery02 .slide-media { width: 100%;  }

.gallery02 .slide-title { padding: 40px 0 30px; }
.gallery02 .thumb-wrapper { grid-template-columns: repeat(4, 1fr); }

.swiper-button-prev::after, 
.swiper-button-next::after {
border: solid #fff;
border-width: 3px 3px 0 0;
}

}

@media only screen and (min-width: 1201px) {

.gallery02 { padding-bottom: 100px }

.gallery02 .thumb-media:hover { -webkit-transform: scale(0.9); transform: scale(0.9); }
.gallery02 .thumb-media:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); }

}