@charset "UTF-8";
/* 半端ウィンドウ対応 
@media screen and (min-width:1441px) {
} 半端ウィンドウ対応 ここまで */

@media screen and (max-width: 999px) { /*ウィンドウ幅が最大999pxまでの場合に適用*/

/* ===================================================================
　page
==================================================================== */
#page{
	padding-bottom: 32vw;/*vw375---120px*/
}

/* pagehead */
#pagehead{
	background: url(../images/common/bg-texture_head_sp.png) top center no-repeat;
	background-size: 100vw;
	width: 100vw;
	height: auto;
}

#pagehead h1 {
    margin: 14.933333333333335vw 10.666666666666668vw 8vw 10.666666666666668vw;
    font-size: 10.666666666666668vw;
    width: 100%;
}
#pagehead.pagehead-brown{
  background: url('https://yume-sauna.jp/wp/wp-content/uploads/2025/07/wave-divider_brown_sp.png') no-repeat bottom center;
	background-size: 100%;
}
#pagehead.pagehead-white{
  background: url('https://yume-sauna.jp/wp/wp-content/uploads/2025/07/wave-divider_white_sp.png') no-repeat bottom center;
	background-size: 100%;
}

#pagehead .section-title{
	margin: 0;
	padding: 20vw 0 0 0;/*vw375---75px*/
}


#page .page-inner span.accent-font::before {
  width: 4vw;
  height: 4vw;
}	
#page .page-inner span.accent-font{
	margin-bottom: 6.4vw;
    font-size: 5.333333333333334vw;
    letter-spacing: 0.4266666666666667vw;
    padding-left: 6.133333333333333vw;
}
#page .page-inner h2 {
    font-size: 6.4vw;
    letter-spacing: 0.6399999999999999vw;
    margin-bottom: 6.4vw;
}
#page .page-inner .page-inner-sec h2 {
    text-align: center;
    margin-bottom: 10.666666666666668vw;
}		
	
	
/* ===================================================================
　下層汎用タグなど
==================================================================== */
/*404*/
.inner-404{
	padding: 35vw 0 0;/*調整*/
}
.inner-404 .f36 {
  font-size: 5vw;/*調整*/
}

/*table*/
#page table{
	width: 91.46666666666667vw;/*vw375---343px*/
	margin: 0 auto 10.666666666666668vw;/*vw375---0 auto 40px*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4.266666666666667vw;
}
#page tr{
	display: flex;
	align-items: flex-start;
	gap: 4.266666666666667vw;
	align-self: stretch;
    margin-bottom: 7vw;
}
#page tr th {
    width: 30.4vw;
    font-size: 3.9vw;
    line-height: 220%;
    letter-spacing: 0.1em;
}
#page tr td{
	width: 56.8vw;/*調整*/
    font-size: 3.9vw;
    line-height: 220%!important;
    letter-spacing: 0.1em;
	line-height: 220%;
}	
	

/* 2カラム */
.col2{
	display: flex;
	flex-wrap: wrap;
	overflow: auto;
}
.col2 .left{
	flex-basis: 60%;
	max-width: 60%;
}
.col2 .right{
	flex-basis: 40%;
	max-width: 40%;
}

#page p{
	margin-bottom: 2em;
}
	


/* ===================================================================
　page
==================================================================== */
#page {
  padding-bottom: 15vw;
}
.page-inner-sec {
  width: 90vw;
  padding: 8vw 0;
}
    
	
/* ===== ページ内セクション ===== */
.page-aboutus .page-inner-sec {
    padding-top: 19.2vw;
}
  
/*sns シェアボタン*/
.sns-btn-wrap div,
.sns-btn-wrap div a,
.sns-btn-wrap div svg {
    width: 11.733333333333333vw;
    height: 11.733333333333333vw;
}
.sns-share .sns-btn-wrap {
    gap: 6.4vw;
}
#page .sns-share p.textC {
    margin-bottom: 2.1333333333333333vw;
}

    

#page .page-inner.page-aboutus #brown-sec:nth-of-type(1) .brown-sec_in{
	padding: 14.933333333333335vw 4.266666666666667vw 14vw!important;
}
#page .page-inner.page-aboutus #brown-sec:nth-of-type(2) .brown-sec_in{
	padding: 0 4.266666666666667vw 14vw!important;
}
	
	
/* ===================================================================
　about us
==================================================================== */
.page-aboutus{
  padding: 0 0 12vw;
}
#slideshow-aboutus .flex-box {
  flex-direction: row;
  gap: 5vw;
}
#slideshow-aboutus .flex-item {
  width: 90vw !important;
  height: auto !important;
  margin: 0 auto;
}

/* ===== about us リンク ===== */
.aboutus-link {
  width: 90vw;
  grid-template-columns: repeat(1, 1fr);
  gap: 10.666666666666668vw;
  margin: 0 0 19.2vw;
}
#page .aboutus-link-in p{
	margin: 4.266666666666667vw 0 0;
}


#page .page-inner .brown-sec_r_02,
#page .page-inner .brown-sec_l_02,
#page .page-inner .brown-sec_r_01,
#page .page-inner .brown-sec_l_01 {
    max-width: 100%;
}
	
#page .page-inner .brown-sec_r_02,
#page .page-inner .brown-sec_l_01{
	max-width: 100%;
	margin: 14.933333333333335vw auto 0;
	
}	
#slideshow-aboutus {
    padding: 0 0 19.2vw;
}
#slideshow-aboutus .slide {
    margin-bottom: 8.533333333333333vw;
}
#page tr:last-of-type {
    padding: 8.533333333333333vw 0 0;
}

	
/* ===================================================================
　アーカイブページ（works/news）
==================================================================== */
#archive-news .panel_area ul li .title-txt-in {
    display: block;
}
#archive-news .panel_area h2 {
    font-size: 4.8vw;
    letter-spacing: 0.5760000000000001vw;
}
#archive-news .panel_area ul {
    width: 91.46666666666667vw;
}

#archive-news .panel_area ul li.news-item {
  display: block;
  padding: 6.4vw 4.266666666666667vw;
}
#archive-news .panel_area ul .left{
	display: flex;
	justify-content: start;
	align-items: flex-start;
	gap: 4.266666666666667vw;
}
#archive-news .panel_area ul .left .left-in{
	width: 20vw;
	height: 20vw;
}
#archive-news .panel_area ul .left img {
	width: 20vw;
	height: 20vw;
}
#archive-news .panel_area ul .slide-title {
  width: 58.666666666666664vw;
	margin-bottom: 4.266666666666667vw;
}
#archive-news .panel_area ul .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;
}

#archive-news .panel_area ul .right {
  padding: 0;
}
#archive-news .panel_area ul .right p {
	font-size: 4vw;
	font-weight: 400;
	line-height: 220%;
	letter-spacing: 0.4vw;
	font-family: YakuHanJP, "IBMPlexSansJP-Regular", "Hiragino Sans", sans-serif;
}
    
#archive-news .tab_box {
    padding: 14.933333333333335vw 0 0;
}
#archive-works .panel_area ul,
.works-single-related-posts ul {
  grid-template-columns: 1fr;
  gap: 6vw;
  width: 90vw;
}
#archive-news .panel_area ul li {
  flex-direction: column;
  gap: 3vw;
}
#archive-news .panel_area ul li .eyecatching img {
  width: 100%;
  height: auto;
}
#archive-news .panel_area ul li .title-txt {
  width: 100%;
}
.tab_btn {
  font-size: 3.733333333333334vw;
  padding: 3.2vw 4.266666666666667vw;
  letter-spacing: 0.37333333333333335vw;
}
#archive-works #pagehead .pagehead-in,
#archive-news #pagehead .pagehead-in {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}
#archive-works #pagehead .pagehead-in h1, #archive-news #pagehead .pagehead-in h1{
	margin-bottom: 4.266666666666667vw;
}
	
#archive-works #pagehead .btn_area span.cat,
#archive-news #pagehead .btn_area span.cat {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4.266666666666667vw;
    margin-left: 10.666666666666668vw;
    flex-wrap: wrap;
	margin-bottom: 7vw;
}
 #archive-works .panel_area ul li .eyecatching a {
    display: block;
    width: 100%;
    height: auto;
}
#archive-works .panel_area h2 {
    font-size: 4.8vw;
    line-height: 150%;
    letter-spacing: 0.5760000000000001vw;
    margin-bottom: 6.4vw;
}
#archive-works .panel_area ul li img {
    width: 100%;
	height: auto;
    max-height: 68.53333333333333vw;
}
.section-title-02 {
    padding: 14.933333333333335vw 0 0;
    width: 91.46666666666667vw;
   margin: auto;
}
.section-title-02 .date,
.date{
  font-size: 4vw;
	letter-spacing: 0.31999999999999995vw;
	margin-right: 2.1333333333333333vw;
}
.category{
  font-size: 3.733333333333334vw;
  letter-spacing: 0.37333333333333335vw;
}
.category span{
	margin-right: 2.1333333333333333vw;
}
 
  
  
	
/* ===================================================================
　ページネーション
==================================================================== */
.pagination-controls {
  gap: 4vw;
  font-size: 4vw;
}
.pagination-controls button.page-number {
  padding: 2vw 4vw;
}
.pagination-controls button.prev-page,
.pagination-controls button.next-page {
  width: 10vw !important;
  height: 10vw !important;
  background-size: 5vw;
}	
/*シングルページ*/
#page .prevnext {
    align-items: center;
    margin-top: 19.2vw;
	gap: 6.5vw;
}
#page .prevnext img {
    width: 6.4vw;
    height: 6.4vw;
}
#page .prevnext .prev a, #page .prevnext .next a {
    padding: 2.666666666666667vw;
    width: 11.733333333333333vw;
    height: 11.733333333333333vw 
}
#page .prevnext .prev a::after,
#page .prevnext .next a::after {
  width: 11.733333333333333vw;
  height: 11.733333333333333vw;
  background-size: 6.4vw 6.4vw;
}    
#page .prevnext.page_head{
	display: none;
}

/* ===================================================================
施工事例シングル
==================================================================== */
.works-single .image-slider .slick-slide img {
    height: 64vw;
    width: 85.33333333333334vw;
	max-height: none;
}
.works-single .works-sec {
  flex-direction: column;
  width: 90vw;
  padding: 6vw;
  gap: 5vw;
}
.works-single .image-thumbs li {
  width: 12vw;
  height: 12vw;
}
.works-single-related-posts h3 {
  font-size: 5vw;
}
.section-title-02 h1 {
  font-size: 5vw;
}
.works-single .under_article_img_wrap {
  flex-direction: row;
  gap: 4vw;
}
.works-single .under_article_img_wrap img {
  width: 29vw;
  height: auto;
}

.works-single #pagehead .pagehead-in{
	width: 100%;
}
	
.works-single #pagehead h1 .accent-font{
    display: inline-block;
    position: relative;
    margin-top: 0;
}
.works-single #pagehead h1 .accent-font::after{
	content: "";
	width: 13.333333333333334vw;
	height: 1px;
	background: #F1EFEB;
	position: absolute;
	right: -14.5vw;
    top: 50%;
    transform: translateY(-50%);
}
.works-single.news-single #pagehead h1 .accent-font::after{
	background: #474141!important;
}
.works-single.news-single #pagehead h1 .title{
	color: #474141!important;
    padding-left: 0;
	font-size: 4vw;
	display: block;
    margin-top: 2vw;
    letter-spacing: 0.4vw;
}
.works-single.news-single #pagehead h1 .title::before{
	display: none;
}
.works-single #pagehead h1 .title{
	color: #fff!important;
    padding-left: 0;
	font-size: 4vw;
	display: block;
    margin-top: 2vw;
    letter-spacing: 0.4vw;
}
.works-single #pagehead h1 .title::before{
	display: none;
}


.news-single #pagehead h1 .flex,
.works-single #pagehead h1 .flex {
    display: block;
}
.works-sec02 {
    width: 91.46666666666667vw;
    font-size: 4vw;
    letter-spacing: 0.1em;
}
.section-title-02 h1 {
    font-size: 6.4vw;
    line-height: 180%;
    letter-spacing: 0.1em;
    margin: 4.266666666666667vw 0 8.533333333333333vw;
    text-align: left;
}
article.works-single{
	border: none;
}
.beige-bg article.works-single.news-single {
  border-bottom: 0;
}
.works-single .achievement-box {
    font-size: 4vw;
    margin-bottom: 14.933333333333335vw;
}
/********************************************************
*
			お問い合わせ
*
*********************************************************/
.page-contact-top {
  flex-direction: column;
  gap: 5vw;
}
.page-contact .page-inner {
  width: 90vw;
}
.page-contact .form-l {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
#mailform input[type="text"],
#mailform input[type="email"],
#mailform textarea {
  font-size: 4vw;
  padding: 2vw;
  border-radius: 0;/* safari対策 */
}
.page-contact .form-d,
.page-contact .form-t {
  width: 100%;
}
.page-contact-middle {
    padding: 10.666666666666668vw 0 3vw;
}
.page-contact-top {
    margin: 14.933333333333335vw 0 8.533333333333333vw;
}
	
.page-contact-top .btn.white-arrow a {
    padding: 4.266666666666667vw 12.4vw 4.266666666666667vw 6.4vw;
}
.page-contact-top .btn span {
    font-size: 4vw;
    letter-spacing: 0.1em;
}
/* ===== 送信ボタン ===== */
.wpcf7 .submit-btn {
  width: 60.266666666666666vw;
  height: auto;
}
.wpcf7 input[type="submit"] {
  font-size: 4vw;
  width: 60.266666666666666vw;
  padding: 4.266666666666667vw 6.4vw;
}
.wpcf7 .submit-btn::after {
  width: 6.4vw;
  height: 6.4vw;
  top: 7.25vw;
  right: 7.466666666666668vw;
}
.wpcf7 .submit-btn:hover:after {
  right: 5vw;
}
#mailform .wpcf7-list-item {
    display: block;
    margin: 0 auto;
    width: 68vw;
}
#page #mailform p{
    margin-bottom: 0;
    line-height: normal;
}
#page #mailform .form-l p{
	margin-bottom: 4vw;
}
.page-contact .page-inner span.required {
    font-size: 4vw;
}
.page-contact .form-d {
    margin-bottom: 5.5vw;
}
.page-contact .page-inner .form-l-last span.required {
    margin: 0 0 4.266666666666667vw 0;
}

	
/* ===== チェックボックス調整 ===== */
#mailform .list label span {
  padding-left: 8.25vw;
    line-height: 160%;
}
#mailform .list label span::before {
  width: 5vw;
  height: 5vw;
    top: 2vw;
}
#mailform .list label span::after {
  width: 1.8vw;
  height: 2.8vw;
  left: 1.6vw;
    top: 2.5vw;
}

	
	
	
/*****************************
	
	事業案内
	
******************************/
#our_service .fv-text-img .flex h2{
    white-space: nowrap;
}	
#our_service .fv-text-img .flex{
	padding: 0;
    flex-wrap: wrap;
    flex-direction: column-reverse;
	
}
#our_service .attic-banner{
	margin: 19.2vw;
	width: 91.46666666666667vw;
	margin: 0 auto 19.2vw;
}
#our_service .our-strengths h2.midashi{
	padding-top: 19.2vw;
	font-size: 10.666666666666668vw;
	margin-bottom: 10.666666666666668vw;
}
#our_service .our-strengths h2.midashi span.accent-font{
	margin: 4.266666666666667vw auto 0;
    font-size: 4.266666666666667vw;
    line-height: normal;
    letter-spacing: 0.512vw;
}
#our_service .fv-text-img .flex img,
#our_service .our-strengths,
#our_service .about-stove{
    width: 91.46666666666667vw;
	margin: 0 auto 0;
}
#our_service {
    padding: 14.933333333333335vw 0;
}
#our_service .fv-text-img .flex .text {
    width: 91.46666666666667vw;
	margin: 14.933333333333335vw auto 0;
}
#our_service .about-stove .flex{
	display: block;
	margin-bottom: 19.2vw;
}
	#our_service .about-sauna .flex{
	display: block;
	margin-bottom: 19.2vw;
}
#our_service .flex-item,
#our_service .our-strengths .strength.narrow-width .flex .text,
#our_service .our-strengths .flex .text,
#our_service .about-stove .flex-item {
    width: 91.46666666666667vw;
	margin: auto;
}
#our_service .our-strengths .strength.narrow-width .flex img,
#our_service .our-strengths .flex img {
    width: 100%;
	margin-bottom: 8.533333333333333vw;
}
#our_service .our-strengths .strength.narrow-width .flex {
    padding-right: 0;
}
#our_service .our-strengths .flex .text span.accent-font.orange {
    margin: 0 0 8.533333333333333vw;
    font-size: 4.8vw;
    letter-spacing: 0.38399999999999995vw;
}
#our_service .our-strengths .flex .text h2 {
    font-size: 6.2vw;
    margin-bottom: 1em;
}
#our_service .our-strengths .flex.padding-right {
    padding-right: 0;
}
#our_service .our-strengths .strength .flex {
    margin-bottom: calc(21.333333333333336vw - 2em);
}
#our_service .our-strengths .flex.padding-left{
	padding-left: 0;
	flex-direction: column-reverse;
}
#our_service .our-strengths .flex {
	flex-wrap: wrap;
}

#our_service .about-stove p.textC, #our_service .about-sauna p.textC {
    margin-bottom: 14.933333333333335vw;
}
#our_service .about-stove .flex-item .price .en-font {
    font-size: 5.333333333333334vw;
}
#our_service .flex-item .price .f16 {
    font-size: 4.266666666666667vw;
}
#our_service .about-sauna .main-img,
#our_service .about-sauna .main-im,
#our_service .about-stove .main-img{
	text-align: center;
}
#our_service .about-sauna {
	padding-top: calc(19.2vw - 8.533333333333333vw);
}
#our_service .about-stove .flex-item,
#our_service .flex-item{
		margin-top: 10.666666666666668vw;
}
#our_service .flex-item h3 {
    font-size: 7.466666666666668vw;
    letter-spacing: 0.2986666666666667vw;
    margin-bottom: 4.266666666666667vw;
    line-height: 140%;
}
#our_service .flex-item .price .en-font {
    font-size: 6.4vw;
    letter-spacing: 0.512vw;
    line-height: 100%;
    margin-bottom: 4.266666666666667vw;
}
#our_service .flex-item .detail-text p.f12,
#our_service .flex-item .price .f12 {
    font-size: 3.2vw;
}
#our_service .flex-item .f15 {
    font-size: 4vw!important;
	letter-spacing: 0.1em;
	margin-bottom: 4.266666666666667vw;
}
#our_service .flex-item .price{
	margin-bottom: 4.266666666666667vw;
}

#our_service .thumbs {
    display: flex;
    gap: 6.4vw;
}
#our_service .thumbs img {
    width: 18.666666666666668vw;
    height: 18.666666666666668vw;
}
#our_service .about-stove .main-img img,
#our_service .about-sauna .main-img img{
	width: 91.46666666666667vw;
	height: auto;
	margin: 0 auto 4.266666666666667vw auto;;
}
#our_service .flex-item .detail-text p {
    margin-bottom: 6.4vw;
}
#our_service .flow {
    width: 91.46666666666667vw;
    padding: 14.933333333333335vw 0;
    margin: auto auto 19.2vw;
}
#our_service .flow .flex {
    display: flex;
    align-items: flex-start;
    gap: 1.1111111111111112vw;
    width: 100%;
    margin: 0 auto 14.933333333333335vw;
}
#our_service .flow .flex {
    gap: 4.266666666666667vw;
    width: 100%;
    margin: 0 auto 14.933333333333335vw;
}
	
#our_service .flow .step {
    padding: 3.2vw 4.266666666666667vw;
    font-size: 3.733333333333334vw;
    letter-spacing: 0.2986666666666667vw;
	white-space: nowrap;
}
#our_service .flow p{
    line-height: 180%;
}    
#our_service .flow h3 {
    font-size: 6.4vw;
    margin-bottom: 2.1333333333333333vw;
}
#our_service .flow svg {
    left: 11%;
    top: 9.4%;
    height: 57.5%;
}
#our_service .flow .caution {
    margin-left: 0;
}
#our_service .more-question .btn.white-arrow a {
    padding: 4.266666666666667vw 12.466667vw 4.266666666666667vw 6.4vw;
}
#our_service .our-strengths .strength {
    margin-bottom: 21.333333333333336vw;
}	


} 
/*ウィンドウ幅が最大999pxまでの場合に適用¨*/

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