@charset "utf-8";

body {
	background: linear-gradient(#b4f5f9, #cee4f6, #e3d7f4, #f3cef3);
	color: #ffffff;
}

.jump {
	margin-top: -66px;
	padding-top: 66px;
}

.header {
	/*background: #95e39c;;*/
}

.header header h1 {
	padding: 20px 0;
	font-size: 4em;
	font-weight: bold;
	text-align: center;
	/*color: #ffffff;
	text-shadow: 0px 0px 5px #18717d, 0px 0px 5px #ababab;*/
	color:#ffffff;
	text-shadow:/*0 1px 2px rgba(0,0,0,.25),*/0 0 8px rgba(255,255,255,.3)0 1px 3px rgba(0,0,0,.25);
}

.header header h1 span {
    padding-left: 40px; /* ロゴの分だけ左に余白を作る */
    position: relative;
}

.header header h1 span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 縦位置を中央に */
    width: 30px;   /* ロゴの大きさ */
    height: 30px;
    background-image: url(../img/rogo.jpg);
    background-size: contain;
    background-repeat: no-repeat;
	text-shadow:/*0 1px 2px rgba(0,0,0,.25),*/0 0 8px rgba(255,255,255,.3)0 1px 3px rgba(0,0,0,.25);
}

.header header h1{
	letter-spacing:.12em;
}

.header header h1 {
    /*background-image: url(../img/top1.jpg);*/
    background-size: cover;      /* 画像を要素いっぱいに広げる */
    background-position: center;
    background-repeat: no-repeat;

    padding: 290px 0;            /* ← 全体を大きく見せるポイント */
    font-size: 3em;
    font-weight: 300;
    color: #f8fbff;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.35),0 0 12px rgba(255,255,255,.2)/*0px 0px 5px #18717d, 0px 0px 5px #007b8b*/;
    position: relative;
	overflow: hidden; 
}

.header header h1 span {
    padding-left: 40px;
    position: relative;
    /*z-index: 0;*/
}

/* 背景画像レイヤー */
.header header h1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../img/top1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; 
}

.header header h1::after{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(210,240,255,.08),
        rgba(180,200,255,.22)
    );

    z-index:1;
}

.header header h1{
	font-family:'Cinzel', serif;
	font-weight:600;
	letter-spacing:.12em;
	text-shadow:0 0 12px rgba(255,255,255,.18);
}

/* 雲共通 */
.cloud-big,
.cloud-small{
    position:absolute;
    pointer-events:none;

    mix-blend-mode:screen;

   /* filter:blur(22px);*/
	filter: blur(18px);

    will-change:transform;
}

/* 大きい雲 */
.header header h1 .cloud-big{

    position:absolute;

    width:95%;
    height:65%;

    top:18%;
    left:-80%;

    background:
        radial-gradient(
            ellipse at 20% 50%,
            rgba(255,255,255,.55),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 50% 40%,
            rgba(255,255,255,.45),
            transparent 60%
        ),
        radial-gradient(
            ellipse at 80% 55%,
            rgba(255,255,255,.35),
            transparent 60%
        );

	opacity:.78;

    z-index:2;

    animation:
        cloudDrift 16s linear infinite;
}

/* 小さい雲 */
.header header h1 .cloud-small{

    position:absolute;

    width:60%;
    height:40%;

    top:45%;
    left:-50%;

    background:
        radial-gradient(
            ellipse at 30% 50%,
            rgba(255,255,255,.45),
            transparent 60%
        ),
        radial-gradient(
            ellipse at 70% 45%,
            rgba(255,255,255,.3),
            transparent 60%
        );

	opacity:.58;

    z-index:2;

    animation:
        cloudDrift2 10s linear infinite;
}


.header .swiper .swiper-wrapper .swiper-slide img {
	width: 100%;
}

		/*-------------ここからページトップ-------------*/
.container {
	width: 960px;
	max-width:90%;
	margin: 0 auto;
	padding: 30px;

	background: #ffffff60/*rgba(255,255,255,.12)*/;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	border-radius: 20px;

	border-bottom: 5px solid #ffffff60;
}

/*.container{
	transition:
	transform .35s ease,
	box-shadow .35s ease;
}

.container:hover{

	transform:translateY(-8px);

	box-shadow:
	0 15px 35px rgba(255,255,255,.25),
	0 0 50px rgba(255,255,255,.15);
}*/

.container{
	position:relative;

	transition:
	transform .35s ease,
	box-shadow .35s ease;
}

/*.container:hover{
	transform:translateY(-8px);

	box-shadow:
	0 15px 35px rgba(255,255,255,.25),
	0 0 50px rgba(255,255,255,.15);

	z-index:100;
}*/

.container:hover{
	transform:
	translateY(-5px)
	scale(1.01);

	z-index:100;

	box-shadow:
	0 15px 35px rgba(255,255,255,.25),
	0 0 50px rgba(255,255,255,.15);
}

.news .container,
.kumohotel-news .container,
.facility .container,
.access .container,
.gallery .container{
	background: #ffffff60/*rgba(255,255,255,.12)*/;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	border-radius: 20px;
	padding: 30px;
}

/*.container {
	width: 960px;
	margin: 0 auto;
	padding: 20px;
	border-bottom: 5px solid #ffffff60;
}*/

.nav{
	background:rgba(255,255,255,.08);

	box-shadow:
	0 0 30px rgba(255,255,255,.25);

	border-bottom:
	1px solid rgba(255,255,255,.25);
}

.nav nav {
	text-align: center;
}

.nav nav a {
	margin: 0 15px;
	text-decoration: none;
	color: #0ea1cd94;
	font-weight: bold;
	text-shadow:
	0 0 6px rgba(255,255,255,.5);
}

.nav nav a:hover{
	color:#ffffff;

	text-shadow:
	0 0 8px rgba(255,255,255,.9),
	0 0 20px rgba(230,220,255,.9),
	0 0 35px rgba(230,220,255,.6);
	opacity:1;
}

section {
	margin: 40px 0;
}

section p,
section li,
section dd,
section dt,
section h3{
	color: #0ea1cd94;
}

section h2{
	color:#f8fbff;

	letter-spacing:.15em;

	border-bottom:none;

	position:relative;

	padding-bottom:15px;
}

section h2{
	display:inline-block;

	color:#0ea1cd94;

	padding:2px 18px;

	background:
	linear-gradient(
		90deg,
		rgba(255,255,255,.35),
		rgba(255,255,255,0)
	);
}

section h2::first-letter {
	font-size: 1.5em;
}

		/*-------------ここからKumoHotelニュース-------------*/
.kumohotel-news {
	/*background: #ffedd2;*/
}

.kumohotel-news .news-item {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.kumohotel-news .news-item img {
	width: 200px;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
}
		/*-------------ここから施設案内-------------*/

.facility .facility-info {
}

.facility .facility-info dt {
	float: left;
}

.facility .facility-info dd {
	margin-left: 120px;
}

.facility .facility-info dd ul {
	margin-left: 20px;
}
		/*-------------ここからアクセスマップ-------------*/

.access {
	/*background: #ffedd2;*/
}

.access iframe {
	width: 100%;
	height: 300px;
}

.access p {
	text-align: center;
}
		/*-------------ここからギャラリー-------------*/

.gallery {
	margin: 0 0 40px 0;
}

.gallery .gallery-item {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.gallery .gallery-item div {
	width: calc((100% - 40px) / 3);
	border-radius: 6px;
	overflow: hidden;
	position: relative;
}

.gallery .gallery-item div img {
	width: 100%;
	height: auto;
}

.gallery .gallery-item div p {
	width: 100%;
	background: #00000060;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom: 0;
}
/*フッター*/
.footer footer {
	padding: 20px;
	font-size: 0.9em;
	text-align: center;
		background-image: url(../img/fut1.png);
	/*background: #95e39c;;*/
}

body{
	background:#b4f5f9, #cee4f6, #e3d7f4, #f3cef3;
}

/*メディアクエリ*/
@media only screen and (max-width: 960px){
	body {
		background: linear-gradient(#b4f5f9, #e3d7f4, #f3cef3);
	}
}

@media only screen and (max-width: 640px){
	body {
		background: linear-gradient(#b4f5f9, #f3cef3);
	}
}

@media only screen and (max-width: 640px){
    .header header h1 {
        padding: 100px 0; /* ← スマホでは高さを半分に */
        background-size: cover; /* そのままでOK */
    }
}

@media only screen and (max-width: 960px){
    .gallery .gallery-item div {
        width: calc((100% - 20px) / 2);
    }
}

@media only screen and (max-width: 640px){
    .header header h1 {
        padding: 80px 0; /* ← 少し大きめに戻すと画像が広く見える */
        background-position: center center; /* ← 左寄り防止 */
        background-size: cover;
    }
}

@media only screen and (max-width: 640px){
    .header .swiper .swiper-wrapper .swiper-slide img {
        height: 200px; /* ← スマホでは少し低めに */
        object-fit: cover;
    }
}

@media only screen and (max-width: 960px){
    .container {
        width: 100%;
        padding: 10px;
    }
}

/* ゆっくり風に流れるアニメーション */
/* 風に漂う感じ */
@keyframes cloudDrift{

0%{
transform:
translateX(-10vw)
translateY(0)
scale(1);

opacity:0;
}

5%{
opacity:.7;
}

25%{
transform:
translateX(25vw)
translateY(-12px)
scale(1.03);
}

50%{
transform:
translateX(55vw)
translateY(8px)
scale(1.06);
}

75%{
transform:
translateX(85vw)
translateY(-14px)
scale(1.08);
}

100%{
transform:
translateX(130vw)
translateY(10px)
scale(1.1);

opacity:0;
}

}



@keyframes cloudDrift2{

0%{
transform:
translateX(-10vw)
translateY(10px);

opacity:0;
}

8%{
opacity:.55;
}

35%{
transform:
translateX(45vw)
translateY(-10px);
}

70%{
transform:
translateX(90vw)
translateY(12px);
}

100%{
transform:
translateX(140vw)
translateY(-8px);

opacity:0;
}

}
.swiper-button-next,
.swiper-button-prev{
	color:#e3d7f4;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
	color:#f3eeff;

	text-shadow:
	0 0 10px #fff,
	0 0 20px #fff,
	0 0 35px #e3d7f4;
}

見つけた！原因はこれだよ??

一番下の

@keyframes cloudDrift2{

...

100%{
	transform:
	translateX(140vw)
	translateY(-8px);

	opacity:0;
}

.swiper-button-next,
.swiper-button-prev{
	color:#e3d7f4;
}

になっている。

つまり、

@keyframes cloudDrift2 の閉じカッコ } が1つ足りない。

本来はこう??

@keyframes cloudDrift2{

0%{
	transform:
	translateX(-10vw)
	translateY(10px);

	opacity:0;
}

8%{
	opacity:.55;
}

35%{
	transform:
	translateX(45vw)
	translateY(-10px);
}

70%{
	transform:
	translateX(90vw)
	translateY(12px);
}

100%{
	transform:
	translateX(140vw)
	translateY(-8px);

	opacity:0;
}

}  /* ← cloudDrift2 の終了 */

その後に

.swiper-button-next,
.swiper-button-prev{
	color:#e3d7f4;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
	color:#f3eeff;

	text-shadow:
	0 0 10px #fff,
	0 0 20px #fff,
	0 0 35px #e3d7f4;
}

.swiper-pagination-bullet{
	background:#e3d7f4 !important;
	opacity:.7;
}

.swiper-pagination-bullet-active{
	background:#ffffff !important;

	box-shadow:
	0 0 10px rgba(255,255,255,.8),
	0 0 20px rgba(227,215,244,.8);
}

}