/* ===== 基本設定 / カスタムプロパティ ===== */
:root{
	--BRAND:#53909b;
	--GRAY01:#e5e5e5; /* 追加: レビュー枠線などで使用 */
	--RED01:#b6232a;  /* 追加: 強調テキスト色 */
}

/* ===== 共通 ===== */
.material_name{
	width:50%;
	margin:5% auto; /* 重複定義を1つに集約（後勝ちに合わせて8%版を採用） */
	display:block;
}

.container_materials{
	text-align:center;
	color:var(--BRAND);
	font-weight:900;
	padding:2% 0 1%;
	margin:0 0 8%;
}
.container_materials h2{ font-weight:900;   }

@media screen and (min-width:1001px){
	.container_materials h2{
		font-weight:900;
		font-size:2.5em;
	}
	.fabric_description{ width:1000px; margin:auto; }
	.fabric_description p{ font-size:160%!important; }
	p.scrolldown{ font-size:150%!important; }
}

.scrolldown{
	margin:10% 0 3%;
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
	-moz-animation:blink 1.5s ease-in-out infinite alternate;
	animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{0%{opacity:0;}100%{opacity:1;}}
@-moz-keyframes blink{0%{opacity:0;}100%{opacity:1;}}
@keyframes blink{0%{opacity:0;}100%{opacity:1;}}

.fabric_description_p{
	font-size:110%;
	color:var(--BRAND);
	letter-spacing:2.1px;
	margin:4% 5%;
	padding:8% 2%;
	border-top:1px solid var(--BRAND);
	border-bottom:1px solid var(--BRAND);
}
.dots{
	-webkit-text-emphasis:filled;
	text-emphasis:filled;
}

/* 汎用: 背景画像の安定表示 */
[class*="container_material_"],
[class*="container_material_"] .bg{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

/* ================= ローン（lawn） ================= */
@media (max-width:719px){
	.container_material_lawn{
		background: url(https://www.mangohouse.jp/img/kiji/sp/lawn.jpg) left center / cover no-repeat;
	}
}
@media (min-width:720px){
.container_material_lawn{
	background: url(https://www.mangohouse.jp/img/kiji/lawn.jpg) left center / cover no-repeat;
}
}
.container_material_lawn2{
	padding:25% 0;
	margin:10% 0 0;
	font-size:120%;
}
.container_material_lawn_img2{ background-image:url(https://www.mangohouse.jp/img/kiji/lawn3.jpg); }
.container_material_lawn_img3{
	background-image:url(https://www.mangohouse.jp/img/kiji/lawn4.jpg);
	background-color:rgba(0,0,0,0.3);
	background-blend-mode:color;
}
.container_material_lawn_img4{
	background-image:url(https://www.mangohouse.jp/img/kiji/lawn5.jpg);
	background-color:rgba(0,0,0,0.3);
	background-blend-mode:color;
}

/* ================= ヘリンボン（herringbone） ================= */
@media (max-width:719px){
	.container_material_herringbone{
		background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.7)),
  url(https://www.mangohouse.jp/img/kiji/sp/herringbone.jpg) left center / cover no-repeat;
	}
}
@media (min-width:720px){
.container_material_herringbone{
		background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.7)),
  url(https://www.mangohouse.jp/img/kiji/herringbone.jpg) left center / cover no-repeat;
}
}

.container_material_herringbone2{
	padding:25% 0;
	margin:10% 0 0;
	font-size:120%;
}
.container_material_herringbone_img2{
	background-image:url(https://www.mangohouse.jp/img/kiji/herringbone3.jpg);
	background-color:rgba(0,0,0,0.4);
	background-blend-mode:color;
	color:#fff;
}
.container_material_herringbone_img3{
	background-image:url(https://www.mangohouse.jp/img/kiji/herringbone4.jpg);
	background-color:rgba(0,0,0,0.3);
	background-blend-mode:color;
	color:#fff;
}
.container_material_herringbone_img4{
	background-image:url(https://www.mangohouse.jp/img/kiji/herringbone5.jpg);
	background-color:rgba(0,0,0,0.3);
	background-blend-mode:color;
	color:#fff;
}

/* ================= ジャガード（jacquard） ================= */
@media (max-width:719px){
	.container_material_jacquard{
		background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.7)),
  url(https://www.mangohouse.jp/img/kiji/sp/jacquard.jpg) left center / cover no-repeat;
	}
}
@media (min-width:720px){
.container_material_jacquard{
		background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.7)),
  url(https://www.mangohouse.jp/img/kiji/jacquard.jpg) left center / cover no-repeat;
}
}
.container_material_jacquard2{
	padding:25% 0;
	margin:10% 0 0;
	font-size:120%;
}
.container_material_jacquard_img2{
	background-image:url(https://www.mangohouse.jp/img/kiji/jacquard3.jpg);
	background-color:rgba(0,0,0,0.4);
	background-blend-mode:color;
	color:#fff;
}
.container_material_jacquard_img3{
	background-image:url(https://www.mangohouse.jp/img/kiji/jacquard4.jpg);
	color:#fff;
}
.container_material_jacquard_img4{
	background-image:url(https://www.mangohouse.jp/img/kiji/jacquard5.jpg);
	color:#fff;
}

/* ================= ストライプドビー（stripeddobby） ================= */

@media (max-width:719px){
	.container_material_stripeddobby{
		background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.7)),
  url(https://www.mangohouse.jp/img/kiji/sp/dobby.jpg) left center / cover no-repeat;
	}
}
@media (min-width:720px){
	.container_material_stripeddobby{
		background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.8), rgba(255,255,255,.7)),
  url(https://www.mangohouse.jp/img/kiji/dobby.jpg) left center / cover no-repeat;
}
}
.container_material_stripeddobby2{
	padding:25% 0;
	margin:10% 0 0;
	font-size:120%;
}
.container_material_stripeddobby_img2{
	background-image:url(https://www.mangohouse.jp/img/kiji/stripeddobby2.jpg);
	background-color:rgba(0,0,0,0.4);
	background-blend-mode:color;
	color:#fff;
}
.container_material_stripeddobby_img3{
	background-image:url(https://www.mangohouse.jp/img/kiji/stripeddobby3.jpg);
	color:#fff;
}
.container_material_stripeddobby_img4{
	background-image:url(https://www.mangohouse.jp/img/kiji/stripeddobby4.jpg);
	color:#fff;
}

/* ================= ポイント・メリット（カード群） ================= */
.point-merit-sec{ margin-bottom:6%; }
.point-merit-ttl{
	font-size:26px;
	font-weight:bold;
	letter-spacing:.1em;
	background-color:var(--BRAND);
	color:#fff; text-align:center;
	padding:5px 0;
	position:relative;
}
.point-merit-ttl.icon::after{
	content:'';
	background:url(/asset2023/images/point/point-icon.png) no-repeat bottom / contain;
	width:60px;height:80px;
	position:absolute; bottom:10px; left:10px;
}
.point-merit-list{
	display:flex; flex-wrap:wrap;
	justify-content:space-between;
	row-gap:40px; margin-top:40px;
}
.point-merit-list li{
	border:2px solid var(--BRAND);
	position:relative;
	padding:25px 20px;
}
.point-merit-num{
	background:#fff; position:absolute;
	top:-16px; left:-16px;
	width:70px;height:70px; border-radius:50%;
	display:flex; justify-content:center; align-items:center;
}
.point-merit-num .circle{
	width:60px;height:60px; border-radius:50%;
	background:var(--BRAND);
	display:flex; justify-content:center; align-items:center; flex-direction:column;
	font-size:12px; line-height:1.2; color:#fff;
}
.point-merit-num .txt{ font-size:26px; font-weight:600; }
.point-merit-icon{ width:80%; max-width:100px; margin:0 auto; height:94px; display:flex; align-items:center; }
.point-merit-txt{ margin-top:20px; text-align:center; }
.point-merit-present{ margin-top:10px; text-align:center; color:var(--BRAND); font-weight:bold; }

.point-merit-about{ display:flex; justify-content:space-between; flex-wrap:wrap; row-gap:40px; }
.point-merit-about li{ width:48%; }
.point-merit-about .txt{
	background:#F9E8EA; font-size:20px; text-align:center; padding:20px 0; color:var(--RED01); /* var追加により有効化 */
}

@media screen and (min-width:1001px){ .point-merit-list li{ width:23%; } }
@media screen and (max-width:1000px){ .point-merit-list li{ width:46%; } }

@media screen and (min-width:768px){
	.point-merit-speech{ display:flex; margin:40px auto 0; max-width:640px; width:90%; }
	.point-merit-speech .img{ width:140px; margin-right:20px; }
	.point-merit-speech .txt{ flex:1; padding:4% 5%; }
}
@media screen and (max-width:767px){
	.point-merit-ttl{ font-size:17px; }
	.point-merit-list{ row-gap:20px; }
	.point-merit-list li{ width:100%; }
	.point-merit-icon{ max-width:100px; }
	.point-merit-num .circle{ font-size:11px; }
	.point-merit-num .txt{ font-size:22px; }
	.point-merit-speech{ display:flex; flex-direction:column; margin:40px auto 0; }
	.point-merit-speech .img{ width:90px; margin:0 auto; position:relative; z-index:1; }
	.point-merit-speech .txt{ padding:30px 20px; margin-top:-20px; }
	.point-merit-about li{ width:100%; }
	.point-merit-ttl::after{ width:50px; }
	.point-merit-about .txt{ font-size:17px; }
	.point-merit-plus{ margin:40px auto; }
	.speech-bg .note{ font-size:14px; }
}

/* ================= レビュー表示 ================= */
.material-review{
	position:relative;
	padding:40px 0 30px;
	margin-bottom:50px;
}
.material-review-tit{
	text-align:center;
	font-size:2rem!important;
	font-weight:bold;
	line-height:3rem;
	padding:5px 0;
	margin-bottom:26px;
}
.material-review-wrap{
	max-width:min(calc(100% - 40px), 762px);
	margin:0 auto;
}
.material-review-grid{
	display:grid;
	grid-template-columns:100% 1fr; /* 既存仕様踏襲 */
	gap:0 2%;
}
.material-review-txt{
	color:#fff;
	font-weight:bold;
	grid-column:1 / 3;
}
.material-review-txt p{
	background:#17477d;
	border-radius:10px;
	position:relative;
	padding:2.6%;
	margin-bottom:26px;
	display:flex; justify-content:center;
}
.material-review-txt p::before{
	content:"";
	position:absolute; top:100%; left:10%;
	margin-left:-15px;
	border:15px solid transparent;
	border-top:22px solid #17477d;
}
.material-review-grid_l{ text-align:center; }
.material-review-grid_l p:last-of-type{
	font-size:1.2rem; line-height:1.3; font-weight:bold; white-space:nowrap; margin:5px 10% 0 0;
}

.material-review-grid_r{
	background:#fff; border-radius:10px; padding:20px;
	border:1px solid var(--GRAY01); /* 変数定義で有効化 */
	box-shadow:0 3px 15px -9px #bababa;
}
.material-review-grid_r_sell{
	display:grid; grid-template-columns:31% 1fr; gap:2%;
}
.material-review-grid_r_sell--tit{ font-weight:bold; margin-bottom:6px; }
.material-review .fs-c-rating{ align-items:center; }
.material-review .fs-c-rating__stars{ font-size:1.2rem; }
.material-review .fs-c-rating__value{ font-weight:normal; }

.material-review-grid_r .slick-arrow{
	position:absolute; z-index:2; overflow:hidden; text-indent:100%; white-space:nowrap;
	width:26px; height:26px; top:50%; transform:translateY(-50%); cursor:pointer;
}
.material-review-grid_r .prev-arrow{
	background:url(https://www.mangohouse.jp/asset2023/images/material-review-grid_left.svg) no-repeat center / 100%;
	left:-13px;
}
.material-review-grid_r .next-arrow{
	background:url(https://www.mangohouse.jp/asset2023/images/material-review-grid_right.svg) no-repeat center / 100%;
	right:-13px;
}
.material-review-grid_r .slick-dots{ left:0; }

/* レスポンシブ（レビュー） */
@media screen and (max-width:959px){ .material-review-tit{ font-size:2.4rem; } }
@media screen and (max-width:767px){ .material-review-tit{ margin-bottom:14px; } }

@media screen and (max-width:559px){
	.material-review{ padding:20px 0; }
	.material-review-txt{ font-size:1.4rem; line-height:1.5; grid-column:auto; order:2; margin-bottom:0; align-self:center; }
	.material-review-txt p{ padding:5%; margin:0 0 0 15px; }
	.material-review-txt p::before{
		top:12px; left:-15px;
		border:15px solid transparent; border-right:22px solid #17477d;
	}
	.material-review-grid{ grid-template-columns:30% 1fr; gap:20px 0; }
	.material-review-grid_l{ order:1; }
	.material-review-grid_l p:last-of-type{ font-size:1rem; }
	.material-review-grid_r{ order:3; grid-column:1 / 3; padding:10px; }
	.material-review-grid_r .slick-arrow{ width:20px; height:20px; transform:translateY(calc(-50% - 10px)); }
	.material-review-grid_r .prev-arrow{ left:-11px; margin:10px 10px 10px 0; }
	.material-review-grid_r .next-arrow{ right:-11px; margin:10px 0 10px 10px; }
	.material-review-grid_r_sell{ grid-template-columns:35% 1fr; gap:5px; }
	.material-review-grid_r_sell--tit{ font-size:1.4rem; line-height:1.5; margin-bottom:5px; }
	.material-review-grid_r_sell--star{ font-size:1.4rem; }
}

/* 背景色の敷き詰め（幅条件で分岐） */
@media screen and (max-width:950px){
	.material-review::after{
		background-color:#e6fbff;
		width:100vw; height:100%;
		content:""; display:block;
		position:absolute; top:0; left:calc(50% - 50vw);
		z-index:-1;
	}
}
@media screen and (min-width:950px){
	.material-review{ background-color:#e6fbff; }
}