@charset "UTF-8";
/* KV */
.slider-container {
position: relative;
width: calc(100% + (100vw - 100%));
left: 50%;
transform: translateX(-50%);
max-width: 100vw;
overflow: hidden;
aspect-ratio: 5787 / 4093;
}
.slider-wrapper {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slide {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: bottom;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(194, 162, 108, 0.2);
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: background-color 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.slider-arrow:hover {
background-color: rgba(69, 079, 152, 0.4);
}
.slider-arrow::after {
content: "";
width: 12px;
height: 12px;
border-top: 3px solid var(--white-color);
border-right: 3px solid var(--white-color);
border-top: 3px solid var(--Key-color);
border-right: 3px solid var(--Key-color);
display: block;
}
.slider-arrow.prev {
left: 20px;
}
.slider-arrow.prev::after {
transform: rotate(-135deg);
margin-left: 4px;
}
.slider-arrow.next {
right: 20px;
}
.slider-arrow.next::after {
transform: rotate(45deg);
margin-right: 4px;
}
.slider-dots {
position: absolute;
bottom: 20px;
/* left: 50%; */
right: 5vw;
/* transform: translateX(-50%); */
display: flex;
gap: 10px;
z-index: 10;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
cursor: pointer;
border: none;
padding: 0;
transition: background-color 0.3s;
}
.dot.active {
background-color:var(--Key-color);
}
@media screen and (max-width: 898px) {
.slider-arrow { display: none !important;}
}
/* NEWS-SNS */
@media screen and (min-width: 899px) {
.news-sns-container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
}
}
.section-title {
font-size: clamp(40px, 4vw, 48px);
font-weight: 700;
font-family: "Cormorant", serif;
font-optical-sizing: auto;
color: var(--Key-color);
letter-spacing: -0.035em; 
}
.title-news{
text-align: center;
}
@media screen and (min-width: 899px) {
.title-news{
text-align: left;
}
}
.section-box {
width: 100%;
margin-bottom: clamp(2.5rem, 1.16rem + 5.74vw, 4.375rem);
}
@media screen and (min-width: 899px) {
.section-box {
margin-top:0;
}
}
#news {
margin: clamp(20px, 4vw, 50px) auto clamp(80px, 10vw, 150px);
}
.news-list {
padding: 0;
margin: 0;
}
.news-list li {
display: flex;
gap: 20px;
padding: clamp(1rem, 0.89rem + 0.47vw, 1.5rem) clamp(1rem, 0.5rem + 2.1vw, 2.5rem);
margin-bottom: 10px;
margin-bottom: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem);
background-color: rgb(255 255 255 / 0.8);
border-bottom: 2px solid var(--Key-color);
font-size: clamp(14px, calc(0.5rem + 1.5vw), 16px);
font-weight: 500;
border-radius: 3px 3px 0 0;
-webkit-box-shadow:0 0 3px 0 rgba(113,96,69,0.3);
-moz-box-shadow: 0 0 3px 0 rgba(113,96,69,0.3);
box-shadow: 0 0 3px 0 rgba(113,96,69,0.3);
font-family: "Noto Serif JP", serif;
font-weight: 600;
}
.news-date {
flex-shrink: 0;
}
.news-text{
text-align:left;	
}
.news-text a{
color:var(--Key-color);
}
.sns-circle {
width: 80%;
margin:0 auto;
}
@media screen and (min-width: 899px) {
.sns-circle {
width: min(250px, 90%);
}
}
.sns-account {
font-size: 16px;
font-weight: 600;
margin: 1em auto;
}
.sns-button {
display: inline-block;
background-color:var(--Key-color);
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 12px 40px;
border-radius: 3px;
font-size: clamp(1.25rem, 1.07rem + 0.76vw, 1.5rem);
transition: opacity 0.3s;
}
@media screen and (min-width: 899px) {
.sns-button {
font-size: 14px;
}
}
.sns-button:hover {
opacity: 0.8;
}
/* eventOverview */
#eventOverview {
scroll-margin-top: 100px;
}
.event__text{
font-size: clamp(1.5rem, 1.32rem + 0.76vw, 1.75rem);
line-height:1.8;
font-family: "Noto Serif JP", serif;
font-weight: 600;
text-align:left;
}
@media screen and (min-width: 899px) {
.event__text{
font-size: 16px;
text-align:center;
line-height:2.4;
}
}
.event__sub__text{
font-size: 20px;
margin: 20px auto 0;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
text-align:left;
}
.event__sub__text br{
display:none;
}
@media screen and (min-width: 899px) {
.event__sub__text{
text-align:center;
}
.event__sub__text br{
display:block;
}
}
.tab-panel {
padding: clamp(20px, 2vw + 8px, 30px) clamp(30px, 4vw, 50px);
border: solid 1px rgba(221,207,184, .35);
background: 
url("../images/common/upperleft.png") left top / 40px no-repeat,
url("../images/common/upperright.png") right top / 40px no-repeat,
url("../images/common/lowerleft.png") left bottom / 40px no-repeat,
url("../images/common/lowerright.png") right bottom / 40px no-repeat rgba(255,255,255, 0.8);
}
/* notes */
#notes {
margin: 0 auto clamp(40px, 10vh, 100px);
}
#notes .subtitle {
margin-bottom:1em;
text-align:left;
}
@media screen and (min-width: 899px) {
#notes .subtitle {
text-align:center;
}
}
#notes ol{
margin: 1em 0 3em;
width: min(900px, 100%);
list-style: none;
padding-left: 0;
}
@media screen and (min-width: 899px) {
#notes ol{
margin: 1em auto 5em;
}
}
#notes ol li{
text-align:left;
font-size:var(--font16);
font-weight:500;
position: relative;
padding-left: 15px;
padding-bottom: 5px;
}
#notes ol li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
}
#notes ol li ol{
width: min(600px, 100%);
background-color: rgba(194,162,108, .8);
margin: 1em 0 .5em;
padding: 1em 1em .6em;
border-radius: 3px;
}
@media screen and (min-width: 899px) {
#notes ol li ol{
margin: 1em 0 .5em;
}
}
#notes ol li ol li{
color: var(--white-color);
padding-left: 0;
line-height:1.4;
}
#notes ol li ol li::before {
content: none;
}
/* inquiry */
.form{
margin: clamp(10px, 4vw, 15px) auto 0;
padding:clamp(10px, 4vw, 15px) 0 0;
width:min(1080px, 100%);
}
[data-aos="fade-up"] {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); 
}
[data-aos="fade-up"].aos-animate {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@media screen and (max-width: 898px) {
[data-aos="fade-up"] {
transform: translate3d(0, 20px, 0) !important;
}
[data-aos="fade-up"].aos-animate {
transform: translate3d(0, 0, 0) !important;
} 
}