@charset "UTF-8";

@media screen and (max-width: 999px) { /*ウィンドウ幅が最大999pxまでの場合に適用*/
	
/* ===================================================================
　共通
==================================================================== */
/* 共通 */
.pc-none{ display: block; }
.sp-none{ display:none; }
	
pre { white-space: pre-wrap; }
img{ max-width: 100%; }
iframe{ max-width:100%; }

body{
	font-size: 4vw;/*vw375---15px*/
	letter-spacing: 0.4vw;/*vw375---1.5px*/
}	
	
html.no-scroll,
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

	

/* フォントサイズ調整用（PC→SP上書き） */
	.f20{
		font-size: 5.333333333333334vw;
	}
	.sp_f18,
	.f18{
		font-size: 4.8vw;
		letter-spacing: 0.38399999999999995vw;
	}
	.sp_f24{
		font-size: 6.4vw!important;
	}
	.sp_f14{
		font-size: 3.733333333333334vw!important;
	}
	.lh120{ 
	line-height: 120%!important;
	}
	
	.lh140{ 
	line-height: 140%!important;
	}
	
	
/* scroll-hint */
.scroll-hint-icon{
	width: auto!important;
	height: auto!important;
	line-height: 2!important;
}

	
/*余白*/
	.mb20{
		margin-bottom: 5.333333333333334vw!important;
	}
	.mb30{
		margin-bottom: 8vw!important;
	}
	.mb40{
		margin-bottom: 10.666666666666668vw!important;
	}
	.mb50{
		margin-bottom: 13.333333333333334vw!important;
	}
	.mb80{
		margin-bottom: 21.333333333333336vw!important;
	}
	
	
	.mt20{
		margin-top: 5.333333333333334vw!important;
	}
	.mt40{
		margin-top: 10.666666666666668vw!important;
	}
	.mt16{
		margin-top: 4.266666666666667vw!important;
	}
	.mt30{
		margin-top: 8vw!important;
	}
	.mt50{
		margin-top: 13.333333333333334vw!important;
	}
	.mt80{
		margin-top: 21.333333333333336vw!important;
	}

	
/* ===================================================================
　ボタン
==================================================================== */
/* スタンダードボタン（aタグ内に好みのSVG＋spanテキスト） */
.btn a {
  padding: 4.266666666666667vw 6.4vw;
  gap: 2.666666666666667vw;
  justify-content: start;
}
.btn span {
  font-size: 4vw;
  letter-spacing: 0.4vw;
}

/* 矢印マーク */
.btn.white-arrow a{
  padding: 4.266666666666667vw 6.4vw;
}	
.btn.white-arrow a span:after {
  right: -9.066666666666666vw;
  width: 6.4vw;
  height: 6.4vw;
}
.btn.white-arrow a:hover span:after {
  right: -12vw;
}

/* 各部位毎カスタム */
header .btn a{
  justify-content: center;		
	margin: auto;
}
header .btn a,
.btn.learnmore a {
  width: 49.333333333333336vw;
  height: auto;
  padding: 4.266666666666667vw 6.4vw;
}

#catch .btn a {
  width: 67.73333333333333vw;
  height: auto;
}

.btn.more a {
  width: 56vw;
  height: auto;
}

	

/* 横幅いっぱいボタン（共通） */
.width-100-btn a {
  gap: 4.266666666666667vw;
  font-size: 5.333333333333334vw;
  letter-spacing: 0.4266666666666667vw;
  padding: 8.533333333333333vw 0;
}
.width-100-btn a::after {
  width: 11.733333333333333vw;
  height: 11.733333333333333vw;
  background-size: 6.4vw 6.4vw;
}


/* フッター メールフォームボタン */
.footer-mailform-btn {
  position: static;
  transform: none;
  margin-top: 6vw;
  text-align: left;
}
.footer-mailform-btn a {
  justify-content: start;
  width: 100%;
  font-size: 5.333333333333334vw;
  letter-spacing: 0.4266666666666667vw;
  padding: 0;
}
.footer-mailform-btn a span {
  margin: 0 6.4vw 0 0.75vw;
}
.footer-mailform-btn a::after {
  width: 21.333333333333336vw;
  height: 21.333333333333336vw;
  background-size: 6.4vw;
}

	
/* ===================================================================
　ヘッダー（追従グローバルナビ）
==================================================================== */
header{
	padding: 0;
	line-height: 0;	
	height: 19.2vw;
	z-index: 9999;
}
header h1,
#header-logo{
	width: auto;
	z-index: 9991;
	top: 7.6vw;
	left: 4.266666666666667vw;
}
header img{
	width: 42.66666666666667vw;
	height: auto;
	display: block;
}

/* ===================================================================
　ハンバーガーメニュー
==================================================================== */
/*三本線など*/
.hamburger {
    display: block;
    position: fixed;
    cursor: pointer;
    z-index: 9996;
    width: 10.4vw;
    height: 7.6vw;
    top: 5.800000000000001vw;
    right: 4.3999999999999995vw;
}
.hamburger,
.hamburger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.hamburger.dark span:nth-of-type(2):after,
.hamburger.dark span {
	background: #474141;
}
.hamburger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: #F1EFEB;
}	
.hamburger span:nth-of-type(1) { top: 0; }
.hamburger span:nth-of-type(2) { 
	top: 50%;
	transform: translateY(-50%);
}
.hamburger span:nth-of-type(3) { 
	bottom: 0;
}
.hamburger span:nth-of-type(2):after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 1.5px;
	background: #F1EFEB;
	transition: all .4s;
}

	
/*peke（展開時のバツマーク）*/
#hamburger-menu.peke{
		width: 9.206666666666665vw;
		height: 5.333333333333334vw;
    top: 6.933333333333333vw;
    right: 4.996666666666667vw;
}
#hamburger-menu.peke::after {
	content: '';
	transition: all .4s;
}
#hamburger-menu.peke span:nth-of-type(1) {
	transform: translateY(20px) scale(0);
}
#hamburger-menu.peke span:nth-of-type(2) {
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
	background: #F1EFEB;
}
#hamburger-menu.peke span:nth-of-type(2)::after {
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
	background: #F1EFEB;	
}
#hamburger-menu.peke span:nth-of-type(3) {
	transform: translateY(-20px) scale(0);
}


/*展開後のメニュー内部*/
.drawr {
	height: 100%;
	position: fixed;
	top: 0;
	right:0;
	z-index: 9990;
	overflow-y: scroll;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	box-sizing: border-box;
	pointer-events: none;
	width: 100%;
	background: url('https://yume-sauna.jp/wp/wp-content/uploads/2025/06/background-green.jpg') lightgray 0% 0% / 600px 300px repeat;
	display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	}
.drawr.open {
	opacity: 1;
    transition: opacity 0.3s ease;
	pointer-events: auto;

}
#drawrmenu{
	font-size: 4.8vw;
	line-height: normal;
	letter-spacing: 0.5760000000000001vw;
}
#drawrmenu li a {
	display: inline-block;
	line-height: normal;
	margin-bottom: 8.533333333333333vw;
}
	
.drawr-copy p{
	margin-bottom: 0;
}
	
.drawr-copy {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 2em;
		font-size: 2.666666666666667vw;
		line-height: 150%;
		letter-spacing: 0.21333333333333335vw;
}
	
	
/* ===================================================================
　スライド
==================================================================== */
.metaslider .slides img {
  height: 169vw!important;
  object-fit: cover;
}
.slider-clipped {
  height: 164vw; /* 375pxで615px相当 */
}
	
#catch{
	top: 69.86666666666666vw;
	left: 4.266666666666667vw;
}
#catch h2{
	font-size: 6.4vw;
	letter-spacing: 0.38399999999999995vw;
	margin-bottom: 4.266666666666667vw;
}

.wave-divider {
  bottom: 0; /* 波型の位置を調整 */
	z-index: 0;
}
#index #brown-sec .metaslider .flexslider{
	margin-bottom: 14.933333333333335vw;
}


/* ===================================================================
　見出し、p
==================================================================== */
h2 {
  font-size: 10.666666666666668vw;
  letter-spacing: 0.4266666666666667vw;
  margin-bottom: 8.533333333333333vw;
}
span.accent-font {
  font-size: 4.266666666666667vw;
  letter-spacing: 0.512vw;
  margin-top: 4.266666666666667vw;
  padding-left: 1.2em;
  vertical-align: middle;
}
span.accent-font::before {
  width: 3.733333333333334vw;
  height: 3.733333333333334vw;
}
main span.accent-font {
	margin-top: 2.1333333333333333vw;
}

/* index-yumekiko h2 */
.index-yumekiko h2,
h3 {
  font-size: 6.4vw;
  line-height: 180%;
  letter-spacing: 0.31999999999999995vw;
  margin-bottom: 4.266666666666667vw;
}

/* 細かいカスタム */
.index-aboutus h3{
	white-space: normal!important;
}
.index-aboutus .brown-sec_in{
	padding-bottom: 18.666666666666668vw!important;
}
.index-aboutus .brown-sec_r_01 {
    padding: 0;
    margin-bottom: 17.333333333333336vw;
}
.index-aboutus .brown-sec_in_02{
	padding-bottom: 19.2vw;
}
	
footer h2{
	font-size: 12.8vw;
	letter-spacing: 0.512vw;
}
	
p{ margin-bottom: 8.533333333333333vw; }
	
/* ===================================================================
　スクロールダウン
==================================================================== */
#scroll-down {
  bottom: 0;
  left: 0;
}
#scroll-down .scroll-text {
  width: 21.333333333333336vw;/*vw375---80px*/
  height: 21.333333333333336vw;/*vw375---80px*/
	font-size: 3.733333333333334vw;/*vw375---14px*/
	line-height: 100%;
	letter-spacing: 0.2986666666666667vw;/*vw375---1.12px*/
}
#scroll-down .scroll-text:after{
  bottom: 2.933333333333333vw;/*vw375---11px*/
  width: 3.2vw;/*vw1440---12px*/
  height: 4vw;/*vw1440---15px*/
}
#scroll-down .scroll-text:hover:after{
  bottom: 2.6vw;/*調整*/
}

	
/* ===================================================================
　スクロールアップ
==================================================================== */
/* scroll-up */
#scroll-up {
	right: 4.266666666666667vw;/*vw375---16px*/
	bottom: 149vw!important;/*調整*/
	position: absolute!important;
	z-index: 1;
}
#scroll-up .scroll-text {
	width: 16vw;/*vw375---60px*/
	height: 16vw;/*vw375---60px*/

}
#scroll-up .scroll-text img{
  top: 22.5%;
	width: 3.2vw;/*vw375---12px*/
	height: 4vw;/*vw375---15px*/
}
#scroll-up .scroll-text:hover img{
  top: 15%;
}
	

	
	
/* ===================================================================
　#brown-sec
　#green-sec
　#beige-sec
==================================================================== */
/*.brown-sec_in,
.green-sec_in,
.beige-sec_in {
  flex-direction: column;
  padding: 14.933333333333335vw 4.266666666666667vw;
  gap: 5vw;
	flex-wrap: wrap;
}*/
	
.beige-sec_in,	
.brown-sec_in,
.green-sec_in {
  display: block;
  padding: 14.933333333333335vw 4.266666666666667vw!important;
}
.brown-sec_l_02,
.green-sec_l_02,
.beige-sec_l_02,
.brown-sec_r_01,
.green-sec_r_01,
.beige-sec_r_01,
.brown-sec_l_01,
.green-sec_l_01,
.beige-sec_l_01,
.brown-sec_r_02,
.green-sec_r_02,
.beige-sec_r_02 {
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}


#index #brown-sec:nth-of-type(1) .brown-sec_in{
	padding: 20vw 4.266666666666667vw 19.2vw!important;
}
footer .green-sec_in {
  padding: 32vw 4.266666666666667vw!important;
}

.brown-sec_l_02,
.brown-sec_r_01,
.brown-sec_r_02,
.brown-sec_l_01 {
  max-width: 100%;
  flex-basis: 100%;
  margin: 0;
  padding: 0;
}


/* 補足 */
#index #brown-sec .metaslider .slides img {
  width: 100%!important;
  height: auto!important;
}
#index #brown-sec:nth-of-type(1) .brown-sec_l_01{
  margin-top: 12vw;
}
	

#index{
	background: #4A7061;
	padding-bottom: 19.2vw;
}	

.index-yumekiko .green-sec_in{
  height: 210.66666666666666vw;
  padding: 12.083333333333334vw 0 0 0;
  align-items: start;
}
.index-yumekiko .green-sec_l_02{
	padding: 0;
	font-size: 3.733333333333334vw;
	line-height: 180%;
	letter-spacing: 0.2986666666666667vw;
	margin: 3vw 0 8.533333333333333vw;
}
.index-yumekiko .green-sec_r_02{
	padding: 0;
}
	
	
#green-sec.real-photo-bg{
	background: linear-gradient(0deg, rgba(74, 112, 97, 0.30) 0%, rgba(74, 112, 97, 0.30) 100%), url('https://yume-sauna.jp/wp/wp-content/uploads/2025/06/sp_yumekiko_back_re.jpg') lightgray 50% / cover no-repeat;
	background-size: cover;
	position: relative;
	padding-bottom: 18.666666666666668vw!important;
}
#green-sec.real-photo-bg02{
	background: url('https://yume-sauna.jp/wp/wp-content/uploads/2025/06/contact-v2_sp.jpg') no-repeat center center;
	background-size: cover;
}	
	


/* ===================================================================
Swiper - 1（TOPページのWORKS））
==================================================================== */
.swiper-green-sec .green-sec_r_01{
  flex-basis: 100%;
  max-width: 100%;
}
.swiper-green-sec .green-sec_l_01{
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}

	
/* スライド画像 */
.slide-img img {
	aspect-ratio: 343 / 257;
}


/* タイトルなどの表示調整 */
.slide-title span.category {
  margin-right: 0.5vw;
}
.slide-title h3 {
	font-size: 4.8vw;
	line-height: normal;
	letter-spacing: 0.5760000000000001vw;
  margin: 2.1333333333333333vw 0 6,4vw;
}


/* ===================================================================
Swiper - 2（TOPページのNEWS）
==================================================================== */
.swiper-beige-sec .beige-sec_r_01{
  flex-basis: 100%;
  max-width: 100%;
}
.swiper-beige-sec .beige-sec_l_01{
  flex-basis: 100%;
  max-width: 100%;
  padding: 0;
}
	
.news-slide-group {
    padding: 0 0 0 0;
}
	
.news-slide-group li.news-item {
  display: block;
  padding: 6.4vw 4.266666666666667vw;
}
.news-slide-group .left{
	display: flex;
	justify-content: start;
	align-items: flex-start;
	gap: 4.266666666666667vw;
}
.news-slide-group .left .left-in{
	width: 20vw;
	height: 20vw;
}
.news-slide-group .left img {
	width: 20vw;
	height: 20vw;
}
.news-slide-group .slide-title {
  width: 58.666666666666664vw;
	margin-bottom: 4.266666666666667vw;
}
.news-slide-group .slide-title h3 {
	font-size: 4.8vw;
	font-family: YakuHanJP, "IBMPlexSansJP-Medium", "Hiragino Sans", sans-serif;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.5760000000000001vw;
	white-space: normal!important;
	margin: 0 0 4.266666666666667vw;
}

.news-slide-group .right {
  padding: 0;
}
.news-slide-group .right p {
	font-size: 4vw;
	font-weight: 400;
	line-height: 220%;
	letter-spacing: 0.4vw;
	font-family: YakuHanJP, "IBMPlexSansJP-Regular", "Hiragino Sans", sans-serif;
}


/* ===================================================================
Swiperナビゲーションの基本調整
==================================================================== */
.swiper-nav,
.swiper-news-nav{
  gap: 4.266666666666667vw; /* ボタン間のスペース調整はお好みで */
  left: auto;
	right: 4.266666666666667vw;
}
.swiper-nav{
	top: 23vw;
  bottom: auto;
}
.swiper-news-nav{
	top: 23vw;
  bottom: auto;
}
	
.swiper-button-prev,
.swiper-button-next,
.swiper-news-button-prev,
.swiper-news-button-next {
  width: 11.733333333333333vw!important;
  height: 11.733333333333333vw!important;
  background-size: 6.4vw 6.4vw;
}

	
	
/* ===================================================================
　#slideshow
==================================================================== */
#slideshow{
	padding: 10.666666666666668vw 0 19.2vw;
}
#slideshow .flex-item img{
	width: 100%;
	object-fit: cover;
}
#slideshow .flex-item{
	margin-right: 6.933333333333333vw;
}
#slideshow .flex-item_01{
width: 126px;
height: 194px;
	margin-top: 7.708333333333334vw;
}
#slideshow .flex-item_02{
width: 210px;
height: 164px;
}
#slideshow .flex-item_03{
width: 102px;
height: 127px;
	margin-top: 14.933333333333335vw;
}
#slideshow .flex-item_04{
width: 158px;
height: 123px;
	margin-top: 4vw;
}

	
	
/* ===================================================================
　フッター
==================================================================== */
footer.index-footer,footer{
	padding: 0;
}
#footer-nav-sub{
	padding: 6vw 0 0;
}
	

/* SNSボタン */
.sns {
  flex-wrap: wrap;
  gap: 6.4vw;
	margin-top: 8.533333333333333vw;
}
.sns div a {
  width: 11.733333333333333vw;
  height: 11.733333333333333vw;
}
	
	
/* 会社情報エリア */
#footer-about .flex-box {
  flex-direction: column;
  align-items: flex-start;
  padding: 10.666666666666668vw 4.266666666666667vw;
  gap: 6.4vw;
}
#footer-about .flex-box .company .logo {
  width: 53.86666666666666vw;
  height: 10.133333333333333vw;
	margin-bottom: 4.8vw;
}
#footer-about .flex-box .company p:nth-of-type(1) {
  font-size: 4vw;
  letter-spacing: 0.4vw;
	margin-bottom: 2.4vw;
}
#footer-about .flex-box .company p {
  font-size: 3.733333333333334vw;
  letter-spacing: 0.37333333333333335vw;
}
	
.footer-right img{
	width: 80vw;
	height: 19.733333333333334vw;
}

	
/* 下部コピーライトエリア */
#footer-copy p{
	font-size: 2.666666666666667vw;
}
#footer-copy {
    padding: 2.1333333333333333vw 0;
}
	
	
} /*ウィンドウ幅が最大999pxまでの場合に適用¨*/


/* 小さいウィンドウ対応
@media screen and (min-width:0px) and (max-width:600px){
} 小さいウィンドウ対応 ここまで */