@charset "utf-8";

#headline .wrap {
	padding-bottom: 90px;
	border-bottom: 1px solid #d2d2d2;
	font-size: 14px;
	line-height: 2.286;
	text-align: center;
}
#headline .text {
	margin: 0 0 55px;
	color: #a78237;
	font-size: 24px;
	letter-spacing: .5em;
	text-align: center;
}

#headline .title {
	height: auto;
	background: none;
	box-shadow: none;
	margin-bottom: 30px;
	padding: 0;
}

.sNav {
	text-align: center;
}
.sNav li {
	display: inline-block;
	margin: 0 0 0 20px;
}
.sNav li:first-child {
	margin: 0;
}
.sNav a,
.sNav strong {
	display: inline-block;
	padding:  15px 12px 30px;
	position: relative;
	font-size: 14px;
	font-weight: normal;
	text-decoration: none;
	line-height: 1;
	transition: 0.5s;
}
.sNav a:hover,
.sNav strong {
	color: #a78237;
}
.sNav a:after,
.sNav strong:after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: #a78237;
	transform: scaleX(0);
	transition: 0.5s;
}
.sNav a:hover:after,
.sNav strong:after {
	transform: scaleX(1);
}
.sNav.foot {
	border-top: 1px solid #d2d2d2;
	padding-top: 55px;
}

section ,
#headline {
    padding: 0 4.688%;
}
section .wrap {
	padding: 0;
}
#headline .wrap {
	padding: 0px 0 90px;
}
section + section .wrap {
	border-top: 1px solid #d2d2d2;
}
@media screen and (max-width:999px) and (min-width:768px) {
	section .wrap {
		margin: 0 auto;
	}
}
.rMore {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 40px;
	color: #222;
	font-size: 15px;
	text-align: center;
}
.rMore i {
	margin: 0 8px 0 0;
	transition: transform 1s;
}
 a:hover .rMore i {
	transform: translateX(5px);
}
.rMore span {
	position: relative;
	transition: color 1s;
}
a:hover .rMore span {
	color: #a78237;
}
a .rMore span::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #a78237;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
a:hover .rMore span::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

	.sp {
		display: none;
	}
@media screen and (max-width:768px) {
	#headline {
		padding: 0 4.688%;
	}

}
@media only screen and (max-width:640px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}

	#headline {
		padding: 0 4.688%;

	}
	#headline .wrap {
		padding: 15.375% 0 12.5%;
		font-size: 12px;
		text-align: left;
	}
	#headline .wrap .mb55 {
		margin-bottom: 28px;
	}
	#headline .text {
		margin: 0 0 10.345%;
		font-size: 16px;
	}
	#headline .title {
		margin: 0 0 35px;
		padding: 0;
		background-image: none;
	}
	#pageTitle {
/*
		background-image: url(../imgs/quality/bg-headline.jpg);
		background-position: right;
		box-shadow: inset 0 5px 5px rgba(0,0,0,.2);
*/
	}

	.sNav li {
		width: 27.586%;
		margin: 12.069% 0 0 4.31%;
	}
	.sNav li:nth-child(3n+1) {
		margin-left: 2.155%;
	}
	.sNav li:nth-child(-n+3) {
		margin-top: 0;
	}
	.sNav a,
	.sNav strong {
		display: block;
		padding: 6.25% 0 calc(6.25% + 10px);
		font-size: 12px;
	}
	.sNav a:hover:after {
		transform: scaleX(1);
	}

	section {
		padding: 0 4.688%;
	}
	section .wrap {
		padding: 13.793% 0;
	}
	section .wrap.last {
		padding-bottom: 13.793%;
	}


	.rMore {
		margin: 5.172% 0 0;
		position: static;
		font-size: 15px;
	}
	 a:hover .rMore i {
		transform: translateX(0);
	}

	.lh2,
	.lh4 {
		text-align: left;
	}
}

	.image img {
		vertical-align: top;
	}

	.logo {
		position: relative;
	}
	.logo:after {
		content: url("../imgs/img-01.png");
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: 110px;
	}
@media only screen and (max-width: 640px) {
	.logo:after {
		content: url("../imgs/img-01.png");
		display: block;
		position: static;
		margin-top: 10px;
		margin-left: 0;
	}
}

	.Numb {
		padding-left: 25px;
	}
	.Numb1 { background: url(../imgs/icn-num1.png) no-repeat 0 2px;}
	.Numb2 { background: url(../imgs/icn-num2.png) no-repeat 0 2px;}
	.Numb3 { background: url(../imgs/icn-num3.png) no-repeat 0 2px;}
	.Numb4 { background: url(../imgs/icn-num4.png) no-repeat 0 2px;}
	.Numb5 { background: url(../imgs/icn-num5.png) no-repeat 0 2px;}
	.Numb6 { background: url(../imgs/icn-num6.png) no-repeat 0 2px;}
	.Numb7 { background: url(../imgs/icn-num7.png) no-repeat 0 2px;}
	.Numb8 { background: url(../imgs/icn-num8.png) no-repeat 0 2px;}

	.clmBox {
		overflow: hidden;
	}
	.clmBox > div {
		float: left;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	.clmBox.clm2 {
		margin-top: -30px;
		margin-left: -3%;
	}
	.clmBox.clm2 > div {
		width: 47%;
		margin-top: 30px;
		margin-left: 3%;
	}
	.clmBox.clm2 > div.clm2-100 {
		width: 97%;
	}

	.clmBox.clm3 {
		margin-top: -30px;
		margin-left: -2.83%;
	}
	.clmBox.clm3 > div {
		width: 30.5%;
		margin-top: 30px;
		margin-left: 2.83%;
	}

	.clmBox.clm3-2 {
		margin-top: -30px;
		margin-left: -2.83%;
	}
	.clmBox.clm3-2 > div {
		/*width: 63.83%;*/
		width: 30.5%;
		margin-top: 30px;
		margin-left: 2.83%;
	}
	.clmBox.clm3-2 > div:first-child {
		width: 24.5%;
		margin-top: 30px;
		margin-left: 2.83%;
	}

	.clmBox.clm4 {
		margin-top: -30px;
		margin-left: -2.5%;
	}
	.clmBox.clm4 > div {
		width: 22.5%;
		margin-top: 30px;
		margin-left: 2.5%;
	}

	.clmBox > div.cl {
		clear: left;
	}
@media only screen and (max-width: 1000px) {
	.clmBox.clm3.hlf > div,
	.clmBox.clm3.hlf > div.db {
		width: 47%;
	}
	.clmBox.clm3-2 > div ,
	.clmBox.clm3-2 > div:first-child {
		width: 47%;
	}
	.clmBox.clm3-2 > div:first-child img {
		width: 100%;
	}
	.clmBox.clm3-2 > div.col1 {
		clear: both;
		padding-top: 30px;
		float: none;
		width: 100%;
		letter-spacing: -0.4em;
	}
	.clmBox.clm3-2 > div.col1 > div {
		display: inline-block;
		letter-spacing: normal;
		vertical-align: top;
		width: 47%;
		margin-left: 2.83%;
	}
	.clmBox.clm3-2 > div.col1 > div:nth-child(2n+1) {
		margin-left: 0;
	}
}
@media only screen and (max-width: 640px) {
	.clmBox.clm2 {
		margin-left: 0;
	}
	.clmBox.clm2 > div {
		float: none;
		width: auto;
		margin-left: 0;
	}
	.clmBox.clm3.hlf,
	.clmBox.clm3 {
		margin-left: 0;
	}
	.clmBox.clm3.hlf > div,
	.clmBox.clm3 > div {
		float: none;
		width: auto;
		margin-left: 0;
	}
	.clmBox.clm3.hlf > div.db,
	.clmBox.clm3 > div.db {
		width: auto;
	}
	.clmBox.clm3-2 {
		margin-left: 0 !important;
	}
	.clmBox.clm3-2 > div {
		float: none !important;
		width: auto !important;
		margin-left: 0 !important;
	}

	.clmBox.clm4 > div {
		width: 47.5%;
	}
	.clmBox.clm4 > div.full {
		width: 97.5%;
	}

	.clmBox > div.cl {
		clear: none;
	}
	.clmBox > div.clsp {
		clear: left;
	}
	.clmBox.clm3-2 > div:first-child img {
		width: auto;
	}
	.clmBox.clm3-2 > div.col1 {
		padding-top: 0;
	}
	.clmBox.clm3-2 > div.col1 > div {
		display: block;
		letter-spacing: normal;
		vertical-align: top;
		width: 100%;
		margin-left: 0%;
	}
	.clmBox.clm3-2 > div.col1 > div:nth-child(2n+1) {
		margin-left: 0;
	}
}

	.mb28 { margin-bottom: 28px;}
	.imgBox {
		display: table;
		width: 100%;
	}
	.imgBox2 {
			display: inline-table;
			width: 48%;
		}


	.imgBox .txtArea,
	.imgBox .phArea {
		display: table-cell;
		vertical-align: top;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	.imgBox2 .txtArea,
	.imgBox .phArea {
		display: table-cell;
		vertical-align: top;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	.imgBox.num1 .phArea {
		width: 142px;
		padding-right: 25px;
		text-align: left;
	}
	.imgBox.num1 .mls {
		letter-spacing: -1px;
	}

	.imgBox2.num1 .phArea {
		width: 142px;
		padding-right: 25px;
		text-align: left;
	}
	.imgBox2.num1 .mls {
		letter-spacing: -1px;
	}
@media only screen and (max-width: 960px) {
	.imgBox.num1 .mls {
		letter-spacing: 0;
	}
	.imgBox2.num1 .mls {
		letter-spacing: 0;
	}
}

	.imgBox.num2 .phArea {
		max-width: 483px;
		width: 483px;
		padding-right: 30px;
		text-align: left;
		vertical-align: top;
	}
	.imgBox.num2 .txtArea {
		text-align: left;
		vertical-align: top;
	}

.imgBox2.num2 .phArea {
		max-width: 483px;
		width: 483px;
		padding-right: 30px;
		text-align: left;
		vertical-align: top;
	}
	.imgBox2.num2 .txtArea {
		text-align: left;
		vertical-align: top;
	}


@media only screen and (max-width: 1000px) {
	.imgBox.num2 .phArea {
		width: auto;
	}
	.imgBox2.num2 .phArea {
		width: auto;
	}
}
@media only screen and (max-width: 640px) {
	.imgBox2 {
			display: inline-table;
			width: 100%;
		}
	.imgBox.num2 .txtArea {
		display: block;
		margin-top: 20px;
	}
	.imgBox.num2 .phArea {
		display: block;
		width: auto;
		padding-right: 0;
		text-align: center;
	}
	.imgBox2.num2 .txtArea {
		display: block;
		margin-top: 20px;
	}
	.imgBox.num2 .phArea {
		display: block;
		width: auto;
		padding-right: 0;
		text-align: center;
	}
}
.commentArea {
	padding: 20px;
	background: #f4f4f4;
	margin-top: 30px;
}
.commentArea .table {
	display: table;
	width: 100%;
}
.commentArea .table > div {
	display: table-cell;
	vertical-align: top;
}
.commentArea .table .phArea {
	width: 100px;
	padding-right: 25px;
}
@media only screen and (max-width: 640px) {
	.commentArea {
		padding: 20px;
		background: #f4f4f4;
		margin-top: 30px;
	}
.commentArea .table {
		display: block !important;
	}
	.commentArea .table > div {
		display: block !important;
	}
	.commentArea .table .phArea {
		width: 100% !important;
		padding-right: 0 !important;
		margin-bottom: 15px;
	}
	.commentArea .table .phArea img {
		width: 100%;
		height: auto;
	}

	
	/* ==========================================================================
   リビングL'skit 画像横並び用（同じ高さ・間隔20px）
   ========================================================================== */
.flex-equal-height {
	display: flex;
	gap: 20px;
	width: 100%;
}
.flex-equal-height > div {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.flex-equal-height > div .image {
	display: flex;
	flex: 1;
	width: 100%;
	height: 100%;
}
.flex-equal-height > div img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 異なる比率の画像をトリミングして同じ高さに揃えます */
}

/* スマホ表示（640px以下）での縦並び化 */
@media only screen and (max-width: 640px) {
	.flex-equal-height {
		flex-direction: column;
		gap: 20px;
	}
	.flex-equal-height > div img {
		height: auto; /* スマホでは画像の比率を維持して縦に並べます */
	}
}
	
body,
input,
textarea,
select,
button {
    font-family:
        "Yu Mincho",
        "YuMincho",
        "游明朝",
        "游明朝体",
        serif !important;
}
	

#siteTitle {
    width: 105px;
    padding: 15px 0 0;
}

@media only screen and (max-width: 959px) {
    #gHeader .wrap {
        padding: 10px 0 10px 15px;
        margin: 0;
    }
    
    #siteTitle {
        width: 75px;
        padding: 0;
        position:relative;
    }
}
	
/* PC・SP共通のスタイル */
.manetitle {
    font-size: 20pt;
    color: #666666;
    line-height: 1.3;
    margin-bottom: 30px;
    letter-spacing: .1em;
}

/* PC（画面幅769px以上）では改行タグを非表示 */
@media screen and (min-width: 769px) {
    .manetitle br.sp {
        display: none;
    }
}

/* SP（画面幅768px以下）での改行を有効化 */
@media screen and (max-width: 768px) {
    .manetitle br.sp {
        display: block;
    }
}
	
	/* スマホ（768px以下）の設定 */
@media screen and (max-width: 768px) {
    .manetitle {
        font-size: 20px;
        text-align: center;
    }

    .manetitle br.sp {
        display: block;
    }
}
	
	
/* 共通（色・行間） */
.lead {
    color: #666666 !important;
    line-height: 1.6 !important;
}
.cap2{
    font-size: 12px;
}

/* PC（769px以上）の文字サイズ */
@media screen and (min-width: 769px) {
    .lead {
        font-size: 18px !important;
    }
}

/* PC（999px以上）の指定 */
@media screen and (min-width: 999px) {
    
    .cap2{
        
        font-size: 12px;
        text-align: right;
    }
}

/* スマホ（768px以下）の文字サイズ */
@media screen and (max-width: 768px) {
    .lead {
        font-size: 14px !important;
    }
}
	
/* ※caption（注記）以外の最初のpタグだけに色を適用 */
#headline .imgBox.num2 .txtArea > p:not(.caption) {
    color: #666666 !important;
}

/* title04 の下余白を縮小 */
.title04.mb30 {
    margin-bottom: 15px !important;
}
	
/* リビングL'skit（clm3-2）中央の「扉をしめた状態」のみ画像を下に配置 */
.clmBox.clm3-2 > div:nth-child(2) .imgBox {
    display: block !important;
}
.clmBox.clm3-2 > div:nth-child(2) .imgBox .phArea,
.clmBox.clm3-2 > div:nth-child(2) .imgBox .txtArea {
    display: block !important;
    width: 100% !important;
}

/* 右側カラム（col1）内の①〜③はランドリーL'skitと同様に横並び（画像左・テキスト右）に指定 */
.clmBox.clm3-2 .col1 .imgBox {
    display: table !important;
    width: 100% !important;
}
.clmBox.clm3-2 .col1 .imgBox .phArea {
    display: table-cell !important;
    width: 46% !important;
    vertical-align: top !important;
    padding-right: 15px !important;
}
.clmBox.clm3-2 .col1 .imgBox .txtArea {
    display: table-cell !important;
    width: 54% !important;
    vertical-align: top !important;
}



.imgBox.num1 .mls {
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: break-all;
}
	
/* 画像エリアの幅を広げる */
.commentArea .table .phArea {
    width: 200px !important;
}

.commentArea .table .phArea img {
    width: 100%;
    height: auto;
}
.commentArea .txtArea p {
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: break-all;
    line-height: 1.8;
    margin: 0;
}
	
/* 画像を囲む親要素に枠線と、はみ出し防止を指定 */
.creave-wl-bg {
    overflow: hidden;
    border: 1px solid #a78300;
    box-sizing: border-box;
}

/* ホバー時に「画像だけ」を拡大 */
.creave-wl-bg img {
    width: 100%;
    transition: opacity 0.5s ease, transform 0.6s ease !important;
    display: block;
}

/* 1. リンク全体のホバー時の透明度変化を無効化 */
.creave-with-laurel-link:hover {
    opacity: 1 !important;
}

/* 2. ホバー時に「中の画像だけ」をなめらかに薄くする */
.creave-with-laurel-link:hover .creave-wl-bg img {
    opacity: 0.7;
    transform: scale(1.1);
}
	
	/* セクション間の強制クリアと上下余白の確保 */
section {
    clear: both;
}
section .wrap {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}
	
	/* PC表示時（769px以上）に対象のclm2のみを下揃えにする */
@media screen and (min-width: 769px) {
    .clmBox.clm2 {
        display: flex;
        align-items: flex-end;
    }
}
	
/* 丸数字装飾用 */
.num-symbol {
    font-size: 18px !important;
    color: #a78237 !important;
}
	
	/* 特定のセクションのみ上揃えにする設定 */
@media screen and (min-width: 769px) {
    .clmBox.clm2.align-top-box {
        align-items: flex-start !important;
    }
}

/* PC表示（769px以上）：クリーナーL'skit（#anc6）①と②の文字を画像の右横に配置 */
@media screen and (min-width: 769px) {
    #anc6 .clmBox.clm3-2 > div:nth-child(2) .imgBox {
        display: table !important;
        width: 100% !important;
    }
    #anc6 .clmBox.clm3-2 > div:nth-child(2) .imgBox .phArea {
        display: table-cell !important;
        width: 50% !important;
        vertical-align: top !important;
        padding-right: 15px !important;
    }
    #anc6 .clmBox.clm3-2 > div:nth-child(2) .imgBox .txtArea {
        display: table-cell !important;
        width: 50% !important;
        vertical-align: top !important;
    }
}
/* クリーナーL'skit（#anc6）①と②をスマホ時でも③と同じ横並び構造に上書き */
@media screen and (max-width: 768px) {
    #anc6 .clmBox.clm3-2 > div:nth-child(2) .imgBox {
        display: table !important;
        width: 100% !important;
    }
    #anc6 .clmBox.clm3-2 > div:nth-child(2) .imgBox .phArea {
        display: table-cell !important;
        width: 50% !important;
        vertical-align: top !important;
        padding-right: 15px !important;
    }
    #anc6 .clmBox.clm3-2 > div:nth-child(2) .imgBox .txtArea {
        display: table-cell !important;
        width: 50% !important;
        vertical-align: top !important;
    }
}
	
/* #anc2 の col1 は元の縦並び（横いっぱいの表示）に戻す */
#anc2 .col1 {
    display: block !important;
}
#anc2 .col1 > .imgBox {
    width: 100% !important;
}

/* #anc6（クリーナーL'skit）の col1 のみ PC表示で2列＆間隔を空ける */
@media screen and (min-width: 769px) {
    #anc6 .col1 {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    #anc6 .col1 > .imgBox2 {
        width: 48% !important; /* 幅を調整して列間の隙間を作成 */
        margin-bottom: 30px;
    }
}
	/* PC・SP共通：l_img-12.png の左揃え指定 */
#anc2 .clmBox.clm2 .image.kakomi {
    text-align: left !important;
}

#anc2 .clmBox.clm2 .image.kakomi img {
    margin-left: 0 !important;
    margin-right: auto !important;
}
	
	@media screen and (min-width: 769px) {
    /* 指定した数値（例: -20px）の分だけ左に移動 */
    .clmBox.clm3-2 > div:nth-child(2) .imgBox {
        transform: translateX(-10px);
    }
}
	
	
/* ==========================================
   クリーナーL'skit (3カラム構成) スタイル
   ========================================== */

/* PC表示（769px以上） */
@media screen and (min-width: 769px) {
    .cleaner-grid {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 20px; /* カラム間の余白 */
    }

    /* 左カラム：メイン画像 */
    .cleaner-col-left {
        width: 32% !important;
    }
    .cleaner-col-left img {
        width: 100%;
        height: auto;
    }

    /* 中央カラム：①と② */
    .cleaner-col-center {
        width: 33% !important;
    }

    /* 右カラム：③〜⑥ */
    .cleaner-col-right {
        width: 33% !important;
    }

    /* ①〜⑥の「画像＋テキスト」をテーブル組み風にして横並びに指定 */
    .cleaner-col-center .imgBox,
    .cleaner-col-right .imgBox {
        display: table !important;
        width: 100% !important;
    }
    
    .cleaner-col-center .imgBox .phArea,
    .cleaner-col-right .imgBox .phArea {
        display: table-cell !important;
        width: 45% !important;
        vertical-align: top !important;
        padding-right: 10px !important;
    }

    .cleaner-col-center .imgBox .txtArea,
    .cleaner-col-right .imgBox .txtArea {
        display: table-cell !important;
        width: 55% !important;
        vertical-align: top !important;
    }
}

/* スマホ表示（768px以下）時の崩れ防止 */
@media screen and (max-width: 768px) {
    .cleaner-grid {
        display: block !important;
    }
    .cleaner-col-left,
    .cleaner-col-center,
    .cleaner-col-right {
        width: 100% !important;
        margin-bottom: 20px;
    }
    .cleaner-col-center .imgBox,
    .cleaner-col-right .imgBox {
        display: table !important;
        width: 100% !important;
        margin-bottom: 20px;
    }
    .cleaner-col-center .imgBox .phArea,
    .cleaner-col-right .imgBox .phArea {
        display: table-cell !important;
        width: 40% !important;
        vertical-align: top !important;
        padding-right: 10px !important;
    }
    .cleaner-col-center .imgBox .txtArea,
    .cleaner-col-right .imgBox .txtArea {
        display: table-cell !important;
        width: 60% !important;
        vertical-align: top !important;
    }
}