@charset "UTF-8";
/*
Theme Name: nekokobo
Theme URI: https://caxemibr.me/nekokobo/themes/nk/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: WordPress 4.9.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: twentynineteen
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* common */
html, body, div, h1, h2, h3, h4, h5, h6,
p, address, blockquote,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset, input {
	margin: 0;
	padding: 0;
	font-size: 100%;
}
body {
	background: #fff;
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 13px;
    *font-size: small;
    *font:x-small;
    font-weight: 300;
	line-height: 1.0;
	text-align: left;
	/*overflow-x: auto;*/
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
    font-size:inherit;
    font:1em;
}

ul li, ol li {
	list-style-type: none;
}

img {
	border: 0;
	vertical-align: middle;
	max-width: 100%;
	/* 2021.11.04 */
	height: auto;
}

a {
	text-decoration: none;
}

.sp-only {
	display: none !important;
}

.clear {
	clear: both;
}


/* #header */
#header {
    background-color: rgba(40,40,40, .8);
	position: fixed;
	left: 0px;
    top: 0px;
    width: 100%;
    height: 75px;
    z-index: 1000;
}
#header .inr {
	max-width: 1050px;
	margin: auto;
	padding: 0 15px 15px;
	overflow: hidden;
}
#header .logo {
	float: left;
	width: 65px;
	margin: 4px 0 0 5px;
}
#header #sp-gnav-btn {
	display: none;
}
#header #gnav {
	float: right;
	display: block;
}
#header #gnav ul {
	overflow: hidden;
	font-size: 0;
}
#header #gnav li {
	display: inline-block;
}
#header #gnav li a {
	color: #fff;
	font-size: 16px;
	line-height: 75px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding: 0 20px;
}
#header #gnav li a:hover {
    color: #25A4B7;
}

/* Fixed header（#header）でコンテンツ開始位置が被らないように余白を追加（contact / contact_con のみ） */
body:has(#nk-contact) .site-main,
body:has(#nk-contact) #main,
body:has(#nk-seko) .site-main,
body:has(#nk-seko) #main {
	margin-top: 80px;
}

@media (max-width: 768px) {
	body:has(#nk-contact) .site-main,
	body:has(#nk-contact) #main,
	body:has(#nk-seko) .site-main,
	body:has(#nk-seko) #main {
		margin-top: 60px;
	}
}


/* #footer */
#footer {
	background: #222;
	border-top: solid 50px #444;
	padding: 60px 0 0;
	text-align: center;
}
#footer .links {
	width: 180px;
    margin: 50px auto;
    text-align: left;
}
#footer .links li a {
	color: #fff;
	font-size: 16px;
    line-height: 100%;
    display: inline-block;
	padding: 10px 15px;
	transition: .3s;
}
#footer .links li a:hover {
    color: #25A4B7;
}
#footer #pagetop {
	background: #222;
    text-align: center;
}
#footer #pagetop img {
    background: #fff;
	transition: .3s;
}
#footer #pagetop:hover img {
    background: #25a4b7;
}
#footer .bottom-bar {
	background: #000;
}
#footer .bottom-bar .inr {
	color: #fff;
	line-height: 57px;
	max-width: 1050px;
	margin: auto;
	padding: 0 15px;
	overflow: hidden;
}
#footer .data {
	float: left;
	font-size: 12px;
}
#footer .copyright {
	float: right;
	font-size: 12px;
	letter-spacing: 1px;
}

/* top-mv */
.top-mv {
	background-size: cover;
    text-align: center;
    padding: 75px 0 0;
    position: relative;
}
.top-mv .catch {
    font-family: serif;
    font-size: 36px;
	color: #FFFFFF;
    text-shadow: 0px 0px 15px #000000 !important;
    line-height: 170%;
    padding: 10px 0 80px;
}
.top-mv .down-arrow {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    color: rgb(250,250,250);
    font-size: 50px;
    cursor: pointer;
  	animation: arwBound 0.7s ease infinite alternate;
}
@keyframes arwBound {
	0% {transform: translateY(0px);}
	100% {transform: translateY(-20px);}
}

/* top-area01 */
.top-area01 {
    text-align: center;
    padding: 100px 0;
}

/* top-area02 */
.top-area02 {
	background: url(img/index/koyanagi5.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
    padding: 142px 0;
}
.top-area02 .ttl {
	color: #fff;
	font-size: 50px;
	font-weight: bold;
	line-height: 60px;
	text-align: center;
    text-shadow: 0px 0px 10px #666;
}

/* top-area03 */
.top-area03 {
	max-width: 1050px;
	margin: auto;
	padding: 80px 15px;
	overflow: hidden;
}
.box-block {
	overflow: hidden;
}
.box-block .box {
	float: left;
	width: 33.333%;
	padding: 0 15px;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
}
.box-block .box .img {
    background-repeat: no-repeat;
    background-position: center center;
    -moz-background-size: cover;
    background-size: cover;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin: 0 0 30px;
    overflow: hidden;
    display: inline-block;
	box-sizing: border-box;
}
.top-area03 .box.box01 .img {
    background-image: url(img/index/tobira-image-silhouette-tobira.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box02 .img {
    background-image: url(img/index/tobira-image-silhouette-oyako.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box03 .img {
    background-image: url(img/index/tobira-image-silhouette-mado.png);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box04 .img {
    background-image: url(img/index/tobira-image-silhouette-toy.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box05 .img {

    background-image: url(img/index/tobira-image-silhouette-blind.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box06 .img {
    background-image: url(img/index/tobira-image-silhouette-ranma.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box07 .img {
    background-image: url(img/index/tobira-image-silhouette-high-door.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box08 .img {
    background-image: url(img/index/tobira-image-silhouette-kitchen-mini-tobira.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box09 .img {
    background-image: url(img/index/tobira-image-silhouette-wide-plus.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box10 .img {
    background-image: url(img/index/tobira-image-silhouette-sk.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}
.top-area03 .box.box11 .img {
    background-image: url(img/index/tobira-image-silhouette-yk.jpg);
    width: 70%;
    max-width: 231px;
    height: 231px;
}






.box-block .box .img a {
	display: block;
}
.box-block .box .img .hover-txt {
	background: rgba(0,0,0, .3);
	color: #fff;
    font-size: 24px;
    padding-top: 102.5px;
    height: 231px;
    opacity: 0;
    /*transform: translateY(80px);*/
    transition: .3s;
}
.box-block .box .img:hover .hover-txt {
    opacity: 10;
}
.box-block .box .ttl {
	color: #464646;
    font-size: 30px;
    margin: 0 0 20px;
}
.box-block .box .txt {
    font-size: 16px;
    line-height: 220%;
    text-align: left;
    margin: 0 0 20px;
}
.box-block .btn {
    background: #E4AA01;
    color: #fff;
    font-size: 16px;
    display: inline-block;
    padding: 10px 18px;
    transition: .3s;
}
.box-block .btn:hover {
    background: #25a4b7;
}



/* top-area04 */
.top-area04 {
	background: url(img/index/onitsuka1.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
    padding: 142px 0;
}
.top-area04  .inr {
	max-width: 1050px;
	margin: auto;
	/*padding: 0 15px;*/
}
.top-area04 .ttl {
	color: #fff;
	font-size: 50px;
	font-weight: bold;
	text-align: left;
    text-shadow: 0px 0px 10px #666;
}

/* top-area05 */
.top-area05 {
	max-width: 1050px;
	margin: auto;
	padding: 150px 15px 80px;
	overflow: hidden;
}
.info-box-block {
	overflow: hidden;
}
.info-box {
	float: left;
	width: 50%;
	padding: 0 15px;
	margin: 0 0 70px;
	overflow: hidden;
	box-sizing: border-box;
}
.info-box-img {
	float: left;
	width: 25%;
}
.info-box-img img {
	width: 100%;
	height: auto;
}
.info-box-txt {
	float: right;
	width: 75%;
	padding: 0 0 0 15px;
	font-size: 16px;
	box-sizing: border-box;
}
.info-box-data {
	color: #25A4B7;
	font-weight: bold;
    margin-right: 15px;
    letter-spacing: 1px;
}
.info-box-ttl a  {
	color: #000;
	font-weight: bold;
    line-height: 170%;
    margin: 5px 0;
    display: block;
}
.info-box-excerpt a {
	color: #333;
	font-size: 12px;
	line-height: 2.0;
}
.info-box a:hover {
	color: #E4AA01;
	text-decoration: underline;
}


/* top-area06 */
.top-area06 {
	background: url(img/index/unnamed.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
    padding: 142px 0;
}
.top-area06  .inr {
	max-width: 1050px;
	margin: auto;
	/*padding: 0 15px;*/
}
.top-area06 .ttl {
	color: #fff;
	font-size: 50px;
	font-weight: bold;
	text-align: left;
    text-shadow: 0px 0px 10px #666;
}

/* top-area07 */
.top-area07 {
	max-width: 1050px;
	margin: auto;
	padding: 80px 15px;
	overflow: hidden;
}
.top-area07 .box-block .box .inr {
	overflow:hidden;
	width:100%;
	height:200px;
	margin: 0 0 40px;
	position:relative;
}
.top-area07 .box-block .box a .hover-txt {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position:absolute;
    max-height:0px;
    width:100%;
    height:50px;
    font-size: 16px;
    line-height: 50px;
    overflow:hidden;
    background:#222;
    color:white;
}
.top-area07 .box-block .box a:hover .hover-txt {
    max-height: 50px;
}
.top-area07 .box-block .box .img {
    border-radius: 0;
    overflow: hidden;
    width: 100%;
    height: 200px;
    position: relative;
    webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.top-area07 .box-block .box a:hover .img {
    -ms-transform: translateY(50px);
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}
.top-area07 .box.box01 .img {
    background-image: url(img/index/nekokobo-banner_instagram.jpg);
}
.top-area07 .box.box02 .img {
    background-image: url(img/index/nekokobo-banner-BASE_top_pc.jpg);
}
.top-area07 .box.box03 .img {
    background-image: url(img/index/nekokobo-banner_facebook.jpg);
}
.top-area07 .box-block .box .ttl {
	text-align: left;
}
.top-area07 .box-block .box .btn {
	float: left;
}

/* .container */
.container {
	max-width: 1130px;
	padding: 80px 15px 0;
	margin: 0 auto;
	box-sizing: border-box;
}

/* .product-block01 */
.product-block01 {
	margin: 0 auto 50px;
}
.product-block01 .sns_icon {
	overflow: hidden;
	margin: 50px auto 0;
}
.product-block01 .sns_icon li {
	float: left;
    width: 30%;
    margin-left: 30px;
}


/* .product-block02 */
.product-block02 {
	width: 600px;
	margin: 0 auto 50px;
}
.product-block02 .ttl {
	border-bottom: 5px dotted #808080;
	color: #25A4B7;
	font-size: 21px;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.2;
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.product-block02 .ttl:hover {
	color: #E4AA01;
	text-decoration: underline;
}

/* item-page-ttl01 */
.item-page-ttl01 {
	color: #3c3c3c; 
	font-size: 45px; 
	font-weight: bold;
	line-height: 1.2;
	border-bottom: 5px dotted #808080;
    padding-bottom: 14px;
    margin-bottom: 14px;
}

/* item-merit */
.item-merit {
	background:url(img/product/back-silhouette1.png) no-repeat 100px; 
	background-size:contain;
	width: 1100px;
	margin: 0 auto;
}
.item-merit-list {
	float: left; 
	padding-right: 10px; 
	width: 580px;
}
.item-merit-list-style {
	font-size: 24px; 
	font-weight: bold; 
	line-height: 1.5; 
	border-bottom: 2px solid #e4aa01;
}
.item-merit-list img {
	position:relative; 
	top:5px;
}
.item-merit-img {
	float: left; 
	margin-left: 50px; 
	padding-right: 10px; 
	width: 380px;
}
.item-merit-img img {
	width: 380px; 
	display: block; 
	margin: 0 auto; 
	border:10px solid rgb(242, 242, 242); 
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px; 
	transform: rotate(10deg);
}
.item-merit-note {
	clear: both;
	border-top: 1px dotted #333;
	width:700px; 
	padding-left: 50px; 
	font-size: 16px;
	line-height: 1.5;
}

/* item-merit02 */
.item-merit02 {
	background:url(img/product/back-silhouette3.png) no-repeat right; 
	background-size:contain;
	width: 1100px;
	margin: 150px auto 0;
	overflow: hidden;
}
.item-merit02-img {
	float: left; 
	width: 400px;
}
.item-merit02-img img {
	width: 380px; 
	display: block; 
	margin: 0 auto; 
	border:10px solid rgb(242, 242, 242); 
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}
.item-merit02-txt {
	font-size: 16px;
	line-height: 1.5;
	float: left;
	margin-left: 20px; 
	width: 680px;
}
.item-merit02-txt span {
	font-weight: bold; 
	border-bottom: 2px solid #b71232;
}

/* item-merit03 */
.item-merit03 {
	margin: 150px auto; 
	overflow: hidden;
}
.item-merit03-img {
	float: left; 
	width: 460px;
	text-align: right;
}
.item-merit03-txt {
	float: left; 
	margin: 150px 0 0 50px; 
	width: 520px;
	font-size: 16px;
	line-height: 1.5;
}

/* item-feature */
.item-feature {
	margin-top:150px; 
	overflow: hidden;
}
.item-feature-box {
	font-size: 16px;
	line-height: 1.5;
	float: left; 
	display: block; 
	width: 350px; 
	margin: 0 20px 20px 0;
}
.item-feature-box:nth-child(4),
.item-feature-box:nth-child(7) {
	margin: 0 0 20px 0;
}
.item-feature-box .f-style01 {
	color:#b71232; 
	font-size: 17px; 
	font-weight: bold;
}
.item-feature-box .f-style02 {
	font-size:16px; 
	font-weight: bold; 
	border-bottom: 2px solid #e4aa01;
}
.item-feature-box .f-style03 {
	color:#AAA; 
	font-size: 14px;
}
.item-feature-box .f-style04 {
	font-size: 14px;
}

/* item-voice */
.item-voice {
	margin-top:150px; 
}

/* item-brand */
.item-brand {
	margin-top:150px;
	overflow: hidden;
}
.item-brand-txt {
	font-size: 16px;
	line-height: 1.5;
	float: left;
	width: 600px;
	height: 450px;
	padding-right: 10px;
	box-sizing: border-box;
	background:url(img/product/back-silhouette4.png) no-repeat 100px;
	background-size: 460px 460px;
}
.item-brand-txt .f-style01 {
	color:#AAA; 
	font-size: 14px;
}
.item-brand-txt .f-style02 {
	color:red;
	font-size: 14px;
	font-weight:bold;
}
.item-brand-img {
	float: left; 
	width: 450px; 
}
.item-brand-img img {
	width: 450px;
	display: block;
	margin: 0 auto 20px auto;
	border:10px solid rgb(242, 242, 242);
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}

/* item-mov */
.item-mov {
	margin-top:150px; 
}
.item-mov-txt {
	float: left;
	width: 400px;
	margin: 100px 50px 0 50px;
	font-size: 16px;
	line-height: 1.5;
}
.item-mov-img {
	overflow: hidden;
}

/* item-photo */
.item-photo {
	margin:150px 0 80px; 
}

/* item-cashback */
.item-cashback {
	width: 1100px; 
	height: 700px; 
	padding-top: 50px;
}
.item-cashback-inr {
	font-size: 16px;
	line-height: 1.5;
	width: 1100px; 
	height: 600px; 
	padding: 220px 0 0 50px; 
	box-sizing: border-box; 
	background:url(img/product/lazuli-cashback.jpg) no-repeat;
}
.item-cashback .f-style01 {
	font-weight: bold; 
	background-color:#f8e352;
}
.item-cashback .f-style02 {
	font-weight: bold; 
	border-bottom: 2px solid red;
}
.item-cashback .f-style03 {
	color:#AAA; 
	font-size: 14px;
}

/* item-repayment */
.item-repayment {
	margin: 20px auto 0;
}
.item-repayment-main {
	width: 1100px; 
	height: 1000px; 
	padding: 70px 50px 50px 70px; 
	box-sizing: border-box; 
	background:url(img/product/lazuli-icon-guarantee.png) no-repeat;
	font-size: 16px; 
	line-height: 1.5;
}
.item-repayment-ttl {
	height:204px; 
	margin-top: 0; 
	margin-bottom: 45px; 
	color: #3c3c3c; 
	font-size: 45px !important; 
	font-weight: bold;
}
.item-repayment-ttl span {
	color: #b71232;
}
.item-repayment-main .f-style01 {
	font-weight: bold; 
	background-color:#f8e352;
}
.item-repayment-main .f-style02 {
	color: #808080; 
	font-size: 14px;
}
.item-repayment-main .f-style03 {
	color: #b71232; 
	font-size: 21px;
}
.item-repayment-ex {
	margin-top:30px;
	overflow: hidden;
}
.item-repayment-ex-txt {
	float: left; 
	width: 580px;
	font-size: 16px; 
	line-height: 1.5;
}
.item-repayment-ex-txt .f-style01 {
	margin-top: 0; 
	color: #b71232; 
	font-size: 24px; 
	font-weight: bold;margin-top: 0; 
	color: #b71232; 
	font-size: 24px; 
	font-weight: bold;
}
.item-repayment-ex-txt .f-style02 {
	color: #e4aa01;
}
.item-repayment-ex-mov {
	float: left; 
	width: 500px; 
	margin-left: 20px;
}

/* item-size */
.item-size {
	width: 1100px;
	margin-top:150px;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.5;
}
.item-size-box {
	float: left; 
	width: 550px;
}
.item-size .f-style01 {
	color: red;
}
.item-size .img {
	clear: both;
	padding: 100px 0 0;
}
.item-size .img02 {
	margin: 15px 0 0;
}
.item-size .img02 img {
	margin: 20px 0 0;
}

/* item-check */
.item-check {
	margin-top:150px;
}
.item-check .inr01 {
	background:url(img/product/back-silhouette6.png) no-repeat right top;  
	background-size: 800px;
}
.item-check .inr02 {
	background:url(img/product/back-silhouette5.png) no-repeat right bottom;
	font-size: 16px;
	line-height: 1.5;
}
.item-check .inr02 a {
	color: #25A4B7;
}
.item-check .inr02 a:hover {
	color: #E4AA01;
	text-decoration: underline;
}
.item-check.type02 {
	margin: 150px 0 100px;
	width: auto;
}
.item-check.type02 .inr01,
.item-check.type02 .inr02 {
	background: none;
}
.item-check .ttl01 {
	width: 700px; 
	padding:10px 0 5px; 
	margin: 30px 0 10px;
	box-sizing: border-box; 
	border-top: 1px dashed; 
	border-bottom: 1px dashed;
}
.item-check .ttl01:nth-child(2) {
	margin: 0 0 10px;
}
.item-check .ttl01 span {
	margin-bottom:0; 
	color:#b71232; 
	font-size:24px; 
	font-weight:bold;
}
.item-check .ttl01 span.type02 {
	margin-bottom:0; 
	color:#e4aa01; 
	font-size:24px; 
	font-weight:bold;
}
.item-check .img {
	width: 500px;
	margin: 10px 0;
}
.item-check .f-style01 {
	font-size: 21px;
}
.item-check .f-style02 {
	color: #e4aa01;
}

/* #cart */
#cart {
    margin: 150px 0 100px;
    font-size: 16px;
}
#cart a {
	color: #25A4B7;
}
#cart a:hover {
	color: #E4AA01;
	text-decoration: underline;
}
#cart .l-flo {
	float: left;
	max-width:500px; 
	padding: 15px;
	margin: 10px 10px 50px;
}
#cart h3{
	border-bottom: 5px dotted #808080;
    padding-bottom: 14px;
    margin-bottom: 14px;
    font-size: 21px;
    font-weight: bold;
}
.cart-info h3{
	border: none !important;
}
.cart-info p{
	margin-top: 10px;
	font-size: 14px;
}
.cart-info input {
	color: #FFFFFF;
	background-color: #e4aa01;
	padding: 5px 10px;
}
#cart .neko_h2 {
	font-size: 140%;
    font-weight: 600;
	line-height: 1.2;
    margin: 0 0 10px 0;
    padding: 10px 0 0 0;
}
#cart .price-style {
	font-size:200%; 
	font-weight:bold;
}
#cart .price-style span {
	font-size:50%;
}
#cart .cart-note {
	color: red; 
	font-size:120%; 
	font-weight:bold;
}
#cart .inr {
	margin-top:20px;
}
#cart .f-style01 {
	color:#b71232;
}
#cart .f-style02 {
	color: #333; 
	font-size: 16px; 
	font-weight: bold;
}
#cart .f-style03 {
	font-size: 21px;
}

/* review */
.review {
	margin-top:150px; 
}

/* rating-form */
.rating-form {
	margin: 0 0 100px;
}
.rating-form h4 {
	font-size: 19px;
    font-weight: 600;
	line-height: 1.2;
    margin: 0 0 10px 0;
    padding: 10px 0 0 0;
}
.rating-form label {
	font-weight: bold;
}
.rating-form input,
.rating-form textarea {
	color: #333;
	padding: 10px;
}
.rating-form input,
.rating-form textarea {
	color: #333;
	padding: 10px;
}
.review-ttl,
.rating-result {
	font-size: 19px;
    font-weight: 600;
    margin: 15px 0 0;
    display: inline-block;
}
.rating-result {
	font-size: 19px;
    font-weight: 600;
}
.rating-entry-details-list h4 {
	display: none;
}
.rating-entry-details-list-inner {
    margin: 30px 0 0;
    width: 100%;
}
.rating-entry-details-list-inner .mrp-rating-entry-meta,
.rating-entry-details-list-inner .mrp-rating-entry-details {
    border: 1px solid #bbb;
    padding: 10px 15px 7px;
    line-height: 2.2;
    background: #fff;
    box-sizing: border-box;
}
.rating-entry-details-list-inner .mrp-rating-entry-meta {
	padding: 28px 15px;
}

/* item-qa */
.item-qa {
	margin: 150px auto 0; 
}
.item-qa .img {
	margin: 0 0 10px; 
}
.item-qa .txt {
	font-size: 16px;
	line-height: 1.5;
}
.item-qa .txt span {
	font-size: 21px;
}
.item-qa .txt a {
	color: #25A4B7;
}
.item-qa .txt a:hover {
	color: #E4AA01;
	text-decoration: underline;
}

/* saigoni */
#saigoni {
	margin-top:150px;
}
#saigoni .inr01 {
	background:url(img/product/back-silhouette8.png) no-repeat right top;
}
#saigoni .inr02 {
	background:url(img/product/back-silhouette9.png) no-repeat right bottom;
}
#saigoni p {
	font-size: 16px;
	line-height: 1.5;
	margin: 20px 0 0;
}

/* page-activity */
.page-activity {
	margin-top:150px;
	overflow: hidden;
}
.page-activity .left {
	float: left; 
	width: 540px;
}
.page-activity .right {
	float: right; 
	width: 540px;
	margin-left: 20px;
}
.page-activity .txt {
	margin-top:10px; 
	font-size: 24px; 
	font-weight: bold; 
	text-align: center;
}

/* page-activity */
.page-activity {
	margin-top:150px;
	overflow: hidden;
}
.page-activity .left {
	float: left; 
	width: 540px;
}
.page-activity .right {
	float: right; 
	width: 540px;
	margin-left: 20px;
}
.page-activity .txt {
	margin-top:10px; 
	font-size: 24px; 
	font-weight: bold; 
	text-align: center;
}

/* page-cart-go */
.page-cart-go {
	padding: 50px 0;
	box-sizing: border-box; 
	background:url(img/product/back-silhouette7.png) no-repeat right; 
	background-size:contain;
	font-size: 16px;
	line-height: 1.5;
}
.page-cart-go a {
	color: #25A4B7;
}
.page-cart-go a:hover {
	color: #E4AA01;
	text-decoration: underline;
}

.page-cart-go .f-style01 {
	font-size: 21px;
}

/* page-attention */
.page-attention {
	margin: 150px 0 100px;
	font-size: 16px;
	line-height: 1.5;
}

/* page-attention02 */
.page-attention02 {
	width: 730px;
	margin: 20px 0 100px;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.5;
}
.page-attention02 .f-style01 {
	color:red; 
	font-weight:bold; 
	font-size:24px;
	display: block;
}
.page-attention02 .f-style02 {
	font-weight:bold; 
	font-size:21px;
	display: inline-block;
	margin: 15px 0 0;
}
.page-attention02 .f-style03 {
	font-size: 18px;
	display: block;
	margin: 5px 0 0;
}
.page-attention02 .f-style04 {
	color:red; 
	font-weight:bold; 
	font-size:21px;
	display: inline-block;
	margin: 15px 0 0;
}
.page-attention02 .f-style05 {
	color:red; 
	font-weight:bold; 
	font-size:18px;
	display: inline-block;
	margin: 15px 0 0;
}
.page-attention02-img img {
	width:710px; 
	display: block; 
	margin: 15px auto 7px; 
	border:10px solid rgb(242, 242, 242); 
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}

/* ranma-ttl */
.ranma-ttl01 {
    color: #333;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 0 5px white;
    margin: 0 0 10px 0;
    padding: 10px 0 0 0;
    position: relative;
}
.ranma-ttl01:before {
  content: "";
  position: absolute;
  background: #eb6100;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}
.ranma-ttl02 {
    border-bottom: 5px dotted #808080;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 0 14px;
    margin-bottom: 14px;
}
.ranma-ttl03 {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 0 0;
    margin-bottom: 14px;
}

/* ranma-box */
.ranma-box {
    position: relative;
    margin: 32px 0;
    padding: 0.5em 1em;
    border: solid 3px red;
}
.ranma-box .ranma-box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: red;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.ranma-box p {
    margin: 0; 
    padding: 0;
}

/* ranma-qualify */
.ranma-qualify {
	margin-top:10px; 
	overflow: hidden;
}
.ranma-qualify-txt {
	float: left;
	width: 600px;
	max-width: 100%;
	height: 450px;
	padding-right: 10px;
	box-sizing: border-box;
	background:url(img/product/back-silhouette1.png) no-repeat 100px;
	background-size: 60%;
	font-size: 16px;
    line-height: 1.5;
}
.ranma-qualify-txt a {
	color: #25A4B7;
}
.ranma-qualify-txt a:hover {
	color: #E4AA01;
	text-decoration: underline;
}
.ranma-qualify-txt .f-style01 {
	color:#000000; 
	font-size: 14px;
}
.ranma-qualify-txt .f-style01 p{
	color:#000000; 
	font-size: 21px;
}
.ranma-qualify-txt .f-style01 ul{
	color:#000000; 
	font-size: 18px;
}
.ranma-qualify-img {
	float: left; 
	width: 450px; 
}
.ranma-qualify-img img {
	width: 450px;
	display: block;
	margin: 0 auto 20px auto;
	border:7px solid #595757item-link;
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}
.ranma-qualify-img_sp img {
	width: 100%;
	display: block;
	margin: 0 auto 50px auto;
	border:10px solid #d7832d;
	border:5px solid #FFFFFF;
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}
.ranma-qualify-img2 {
	margin-top: 50px;
}
.ranma-qualify-img2 img {
	width: 550px;
	max-width: 100%;
	display: block;
	margin: 0 auto 20px auto;
}

/* ranma-target */
.ranma-target {
	clear: both;
	margin-top:150px; 
}
.ranma-target-txt {
	width: 600px;
	max-width: 100%;
	height: 450px;
	padding-right: 10px;
	box-sizing: border-box;
	background:url(img/product/back-silhouette2.png) no-repeat 100px;
	background-size: 60%;
	font-size: 16px;
	line-height: 1.5;
}
.ranma-target-txt .f-style01 {
	color:#000000; 
	font-size: 16px;
	line-height: 1.5;
}


/* ranma-otoku */
.ranma-otoku {
	margin-top:50px;
	overflow: hidden;
}
.ranma-otoku .ranma-ttl02 {
	border-bottom: 5px dotted red;
}
.ranma-otoku-txt {
	float: left;
	width: 600px;
	max-width: 100%;
	height: 450px;
	padding-right: 10px;
	box-sizing: border-box;
	background:url(img/product/back-silhouette8.png) no-repeat 100px;
	background-size: 60%;
	font-size: 16px;
    line-height: 1.5;
}
.ranma-otoku-txt a {
	color: #25A4B7;
}
.ranma-otoku-txt a:hover {
	color: #E4AA01;
	text-decoration: underline;
}
.ranma-otoku-txt .f-style01 {
	color:#000000; 
	font-size: 16px;
}


/* ranma-saisun */
.ranma-saisun {
	margin-top:50px; 
	font-size: 16px;
    line-height: 1.5;
}
.ranma-saisun-txt {
	width: 600px;
	max-width: 100%;
	height: 450px;
	padding-right: 10px;
	box-sizing: border-box;
	background:url(img/product/back-silhouette5.png) no-repeat 100px;
	background-size: 60%;
	font-size: 16px;
	line-height: 1.5;
}
.ranma-saisun-txt .f-style01 {
	color:#000000; 
}
.ranma-saisun-txt .f-style02 {
	color:red; 
}
.ranma-saisun-img {
	width: 600px; 
	max-width: 100%;
}
.ranma-saisun-img img {
	width: 600px;
	max-width: 100%;
	display: block;
	margin: 10px auto;
	border:10px solid #d7832d;
	border:5px solid #FFFFFF;
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}
.ranma-saisun-img .style1{
	color: red;
	font-weight: bold;
	text-decoration: underline;
}
.ranma-saisun-img2 {
	width: 1100px; 
	max-width: 100%;
}
.ranma-saisun-img2 img {
	width: 1100px;
	max-width: 100%;
	display: block;
	margin: 10px auto;
	border:10px solid #d7832d;
	border:5px solid #FFFFFF;
	border-radius:20px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}

/* ranma-ita */
.ranma-ita-img p {
	width: 420px;
	max-width: 100%;
	display: block;
	margin: 10px auto;
	color:red; 
}
.ranma-ita-img img {
	width: 300px;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	border:5px solid #FFFFFF;
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}
#cart .ranma-price-style {
	font-size:200%; 
	font-weight:bold;
}
#cart .ranma-price-style span {
	font-size:50%;
}

/* top-headline */
.top-headline {
    color: #FFFFFF;
    font-size: 50px;
	font-weight: bold;
    text-shadow: 0px 0px 10px #666666;
    margin: 50px 0 200px;
}

/* manual-block01 */
.manual-block01 {
    font-size: 16px;
    line-height: 1.5;
}
.manual-block01 .lead {
    margin: 50px auto;
}

/* blog */
.blog-type.content-area {
	max-width: 1100px;
	padding: 125px 15px;
	margin: 0 auto;
	overflow: hidden;
	box-sizing: border-box;
}
.blog-type.content-area #main {
	float: left;
	width: 66.6%;
}
.entry-title {
	font-weight: bold;
    line-height: 160%;
    font-size: 24px;
    margin: 40px 0 10px;
}
.entry-header {
	margin-bottom: 45px;
}
.entry-content {
	line-height: 1.5;
}
.entry-content p {
	font-size: 16px;
}
.entry-content figure {
	margin-bottom: 50px;
}
.entry-header .entry-date {
    color: #25A4B7;
    vertical-align: text-top;
    margin-left: 5px;
}
.entry-header .byline,
.entry-header .updated,
.entry-header .comment-count,
.entry-header .edit-link {
	display: none;
}
.entry-footer,
.comments-area,
.comment-respond {
	display: none;
}
.blog-type.content-area #secondary {
	float: right;
	width: 31%;
	font-size: 16px;
	padding: 50px 0 0;
}
.widget-title {
	font-size: 24px;
	font-weight: 500;
    line-height: 1.1;
    margin: 0 0 20px;
}
.widget-area a {
	color: #25A4B7;
    display: block;
    padding: 10px 15px;
}
.widget-area a:hover {
	color: #E4AA01;
}
.widget-area .search-form {
	margin-bottom: 70px;
}
.screen-reader-text {
	display: none;
}
.post-navigation {
	margin: 100px auto 0;
	overflow: hidden;
}
.post-navigation a {
	color: #25A4B7;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
}
.post-navigation a:hover {
	color: #E4AA01;
}
.post-navigation a .meta-nav {
	color: #333;
}
.nav-previous {
	float: left;
	width: 50%;
	text-align: left;
}
.nav-next {
	float: right;
	width: 50%;
	text-align: right;
}

/* 2022.8.26 */
.sb_instagram_header.sbi_centered .sbi_header_text .sbi_bio, .sb_instagram_header.sbi_centered .sbi_header_text .sbi_bio_info, .sb_instagram_header.sbi_centered .sbi_header_text h3 {
	color: #000;
}
#sb_instagram .sb_instagram_header.sbi_large .sbi_bio {
	line-height: 160%;
}

/******* 991px **************************************************/
@media screen and (max-width: 991px) {

/* common */
img {
	width: 100%;
	height: auto;
}
.pc-only {
	display: none !important;
}
.sp-only {
	display: block !important;
}


/* #header */
#header #sp-gnav-btn {
	width: 70px;
	height: 70px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	display: block;
	z-index: 80;
}
#header #sp-gnav-btn:after {
	content: '\f0c9';
	color: #888;
	font-family: FontAwesome;
	font-size: 28px;
	position: absolute;
	top: 23px;
	left: 24px;
	z-index: 90;
}
#header #gnav {
	background: rgba(40, 40, 40, .8);
	/*margin: 7.5px -15px;*/
	position: fixed;
	top: 80px;
	left: 0;
	z-index: 70;
	width: 100%;
	/*display: none;*/
	/*width: 100%;*/
	padding: 7.5px 0;
 	overflow: auto;
 	display: none;
}
#header #gnav li {
	display: block;
}
#header #gnav li a {
	line-height: 20px;
    padding: 10px 20px;
    display: block;
}
#header #gnav li a:hover {
	background: #080;
	color: #fff;
}

/* #footer */
#footer {
	padding: 30px 0 0;
}
#footer .logo {
	display: none;
}
#footer .links {
	/*display: none;*/
}
#footer #pagetop {
	/*display: none;*/
}
#footer #pagetop img {
	width: 25%;
}
#footer .data {
	display: none;
}
#footer .copyright {
	float: none;
	text-align: center;
}

/* top-area01 */
.top-area01 {
	width: 90%;
	margin: 0 auto 50px auto;
}

/* top-area02 */
.top-area02 {
	background-attachment: inherit;
    padding: 80px 15px 15px;
}
.top-area02 .ttl {
	text-align: left;
}

/* top-area04 */
.top-area04 {
	background-attachment: inherit;
    padding: 80px 15px 15px;
}

/* top-area06 */
.top-area06 {
	background-attachment: inherit;
    padding: 80px 15px 15px;
}

/* .container */
.container {
	padding: 80px 15px 0;
}

/* .product-block01 */
.product-block01 .sns_icon li {
    margin-left: 10px;
}

/* .product-block02 */
.product-block02 {
	width: auto;
}

/* item-page-ttl01 */
.item-page-ttl01 {
	font-size: 27px; 
}

/* item-merit */
.item-merit {
	background: none;
	width: auto;
}
.item-merit-note {
	font-size: 14px;
	width: auto; 
	padding-left: 0; 
	border-top: none;
	margin: 15px 0 0;
}

/* item-merit02 */
.item-merit02 {
	background:url(img/product/back-silhouette3.png) no-repeat right bottom;
    background-size: 45%;
	width: auto;
	margin: 30px auto 0;
}
.item-merit02-img {
	float: none; 
	width: auto;
}
.item-merit02-img img {
	width: auto; 
	border: none; 
	border-radius: 0; 
	box-shadow: none;
}
.item-merit02-txt {
	float: none; 
	margin: 15px 0 0; 
	width: auto;
}

/* item-merit03 */
.item-merit03 {
	margin:30px auto; 
}
.item-merit03-img {
	float: none; 
	width: auto;
	text-align: center;
}
.item-merit03-txt {
	float: none; 
	margin: 10px 0; 
	width: auto;
}

/* item-feature */
.item-feature {
	margin-top:20px; 
}
.item-feature-box {
	float: none; 
	width: auto; 
	margin: 0 0 10px;
}
.item-feature-box:nth-child(4),
.item-feature-box:nth-child(7) {
	margin: 0 0 10px;
}

/* item-voice */
.item-voice {
	margin-top:20px; 
}

/* item-brand */
.item-brand {
	margin-top:20px; 
}
.item-brand-txt {
	float: none;
	width: auto;
	height: auto;
	padding-right: 0;
	background: none;
}
.item-brand-img {
	float: none; 
	width: auto; 
	margin: 20px 0 0;
}
.item-brand-img img {
	width: auto;
	display: block;
	margin: 0 auto 20px auto;
	border:10px solid rgb(242, 242, 242);
	border-radius:15px; 
	box-shadow:rgba(113, 135, 164, 0.690196) 0px 0px 6px 3px;
}

/* item-mov */
.item-mov {
	margin-top:20px; 
}
.item-mov-txt {
	float: none;
	width: auto;
	margin: 20px 0 0;
}
.item-mov-img {
	overflow: hidden;
}

/* item-photo */
.item-photo {
	margin:20px 0; 
}

/* item-cashback */
.item-cashback {
	width: auto; 
	height: auto; 
}

/* item-repayment */
.item-repayment {
	margin: 50px auto 0;
}
.item-repayment-ex-txt {
	float: none; 
	width: auto;
}
.item-repayment-ex-mov {
	float: none; 
	width: auto; 
	margin-left: 0;
}

/* item-size */
.item-size {
	width: auto;
	margin-top:30px;
}
.item-size iframe {
	width: 100%;
	height: 300px;
}

/* item-check */
.item-check {
	margin-top:20px;
	width: auto;
}
.item-check .inr01 {
	background:url(img/product/back-silhouette6.png) no-repeat right top;  
	background-size: 800px;
}
.item-check .inr02 {
	background:none;
}
.item-check.type02 {
	margin: 20px 0 30px;
}
.item-check .ttl01 {
	width: auto; 
}
.item-check .img {
	width: auto;
}

/* #cart */
#cart {
	margin: 70px 0 0;
}
#cart .l-flo {
	float: none;
	max-width:none; 
}
#cart h3{
	margin-top: 30px;
	padding-bottom: 10px;
}
#cart iframe {
	width: 100%;
}

/* review */
.review {
	margin-top: 50px; 
}

/* rating-form */
.rating-form {
	margin: 0 0 30px;
}
.rating-entry-details-list-inner {
    margin: 30px 0 0;
}
.rating-entry-details-list-inner .mrp-rating-entry-meta {
    display: block;
    width: 100%;
    text-align: left;
    border-top: none;
    border-bottom: dashed 1px #bbb;
    padding: 20px 15px 6px;
}
.rating-entry-details-list-inner tr:first-child .mrp-rating-entry-meta {
    display: block;
    border-top: solid 1px #bbb;
}
.rating-entry-details-list-inner .mrp-rating-entry-details {
    display: block;
    border-top: none;
}


/* item-qa */
.item-qa {
	margin: 45px auto 0; 
}

/* saigoni */
#saigoni {
	margin-top:30px;
}
#saigoni .inr01 {
	background:url(img/product/back-silhouette8.png) no-repeat right 50px;
	background-size: 80% auto;
}
#saigoni .inr02 {
	background:url(img/product/back-silhouette9.png) no-repeat right bottom;
	background-size: 80% auto;
}

/* page-activity */
.page-activity {
	margin-top:30px;
}
.page-activity .left {
	float: none; 
	width: auto;
}
.page-activity .right {
	float: none; 
	width: auto;
	margin: 20px 0;
}
.page-activity .txt {
	text-align: left;
}

/* page-cart-go */
.page-cart-go {
	background: none;
	padding: 0;
}

/* page-attention */
.page-attention {
	margin: 30px 0;
}

/* page-attention02 */
.page-attention02 {
	width: auto;
	margin: 20px 0;
}
.page-attention02 .f-style01 {
	font-size:20px;
}
.page-attention02 .f-style02 {
	font-size:18px;
}
.page-attention02 .f-style03 {
	font-size: 16px;
}
.page-attention02 .f-style04 {
	font-size:18px;
}
.page-attention02 .f-style05 {
	font-size:16px;
}
.page-attention02-img img {
	width: 98%; 
}

/* ranma-qualify */
.ranma-qualify-txt {
	width: auto;
	height: auto;
}

/* top-headline */
.top-headline {
    margin: 50px 0 80px;
}

/* 2022.8.26 */
.sb_instagram_header.sbi_centered .sbi_header_text .sbi_bio, .sb_instagram_header.sbi_centered .sbi_header_text .sbi_bio_info, .sb_instagram_header.sbi_centered .sbi_header_text h3 {
	font-size: 19px;
	color: #000;
}

#sb_instagram .sb_instagram_header.sbi_large .sbi_bio {
	font-size: 16px;
	line-height: 160%;
}


}

/* 2021.11.09 レビュー項目読み込みボタン */
a.load-more::after {
	font-family: "FontAwesome";
	content: "\f103";
	font-size: 20px;
	font-weight: 100;
	vertical-align: middle;
	margin-left: 8px;
}
a.load-more {
	width: 20%;
	display: block;
	margin: 1rem auto;
	border-radius: 5px;
	background-color: #ff6666;
	padding: 1em 1em 0.8em 1em;
	font-weight: bold;
	color: #fff;
	transition: 0.3s;
}

a.load-more:hover {
	transform: translateY(-3px);
}

/******* 768px **************************************************/
@media screen and (max-width: 768px) {

/* top-mv */
.top-mv {
	background-size: 150% auto;
    text-align: center;
    padding: 75px 0 0;
    position: relative;
}
.top-mv .catch {
    font-size: 24px;
    line-height: 170%;
    padding: 50px 0 20px;
}
.top-mv .down-arrow {
    bottom: 3px;
    font-size: 20px;
  	animation: none;
}

/* top-area01 */
.top-area01 {
    padding: 30px 0 0;
}

/* top-area03 */
.box-block .box {
	float: none;
	width: auto;
	padding: 0;
	margin: 0 auto 75px;
}
.top-area03 .box.box01 .img {
    background-image: url(img/index/tobira-image-silhouette-tobira.jpg);
}

.top-area03 { /* 2022.08.16 */
	padding-bottom: 55px;
}
/* top-area05 */
.top-area05 {
	padding: 70px 15px 0;
}

.info-box {
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 70px;
}

/* blog */
.blog-type.content-area {
	padding: 50px 15px;
}
.blog-type.content-area #main {
	float: none;
	width: auto;
}
.blog-type.content-area #secondary {
	float: none;
	width: auto;
}

/* 2021.11.09 レビュー項目読み込みボタン */
a.load-more {
	width: 50%;
}

/* 2022.8.26 */
.sb_instagram_header.sbi_centered .sbi_header_text .sbi_bio, .sb_instagram_header.sbi_centered .sbi_header_text .sbi_bio_info, .sb_instagram_header.sbi_centered .sbi_header_text h3 {
	font-size: 19px;
	color: #000;
}

#sb_instagram .sb_instagram_header.sbi_large .sbi_bio {
	font-size: 16px;
	line-height: 160%;
}

}






/* GPTテスト */



/* ===== 基調トーン：高級感×木の温もり ===== */
:root{
  --ink:#1f2937;          /* 濃い墨色 */
  --sub:#6b7280;          /* 灰青 */
  --cream:#f7f3ee;        /* 和紙っぽい生成り */
  --wood:#a07448;         /* 木口の茶 */
  --leaf:#7c8b5a;         /* 渋いオリーブ */
  --accent:#c9a86a;       /* 真鍮ゴールド */
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:14px;
}

body{
  background:#fff;
  color:var(--ink);
  font-feature-settings:"palt" 1;
}

/* ===== ヒーロー実績バンド ===== */
.hero-stats{
  background:linear-gradient(180deg, #fff, var(--cream));
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.hero-stats__inr{
  max-width:1100px; margin:0 auto; padding:16px clamp(16px,4vw,32px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.hero-stat{
  background:#fff; border:1px solid #eee; border-radius:var(--radius);
  padding:14px; text-align:center; box-shadow:var(--shadow);
}
.hero-stat__kpi{ display:block; font-weight:700; letter-spacing:.02em; color:var(--wood); }
.hero-stat__big{ font-size:clamp(28px,5vw,36px); line-height:1; margin-right:4px;}
.hero-stat__label{ display:block; font-size:12px; color:var(--sub); margin-top:6px;}
.hero-stat--media .hero-stat__kpi{ color:var(--accent); }

/* ===== 設置例カルーセル（横スライド） ===== */
.install-carousel{ max-width:1100px; margin:24px auto; padding:0 clamp(12px,4vw,24px);}
.install-carousel__head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.install-carousel__ttl{
  font-size:clamp(18px,3.2vw,22px); font-weight:700; letter-spacing:.04em;
}
.install-carousel__nav{ display:flex; gap:8px; }
.ic-btn{
  border:1px solid #ddd; background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer;
}
.install-carousel__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:80%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px;
}
.install-card{ scroll-snap-align:center; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.install-card img{ display:block; width:100%; height:auto; }

/* PC時はカード幅を調整 */
@media (min-width:768px){
  .install-carousel__track{ grid-auto-columns:32%; }
}

/* ===== 固定追従CTA ===== */
.floating-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  padding:10px clamp(10px,4vw,18px); background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(6px);
  border-top:1px solid #e8e6e2;
}
.fcta-btn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  padding:12px 10px; background:#fff; border:1px solid #ddd; border-radius:12px; font-weight:700; color:var(--ink);
  box-shadow:var(--shadow);
}
.fcta-btn--primary{
  background:linear-gradient(180deg, #fff, #fbf8f2); border-color:#e1d8c7;
}
.fcta-btn:active{ transform:translateY(1px); }

/* 画面下にCTAが来る分、最下部に余白 */
body{ margin-bottom:72px; }
@media (min-width:768px){ body{ margin-bottom:80px; } }

/* 既存セクションの余白を軽く整える（テーマを壊さない範囲） */
.top-area02 .ttl, .top-area06 .ttl{ letter-spacing:.06em; }
.box .btn{ border-radius:10px; }

/* アクセシビリティ（フォーカス見える化） */
a:focus, button:focus{ outline:2px solid var(--leaf); outline-offset:2px; }


/* ==== 横スクロール撲滅パッチ ==== */
/* ページ外へのはみ出しを根こそぎ止める */
html, body { max-width: 100%; overflow-x: hidden; }

/* にゃんがーど診断ページ: overflow-x:hidden / clip が html,body にあると position:sticky が死ぬ（祖先の非 visible overflow）。
   横はみ出しは #nyanguard-root .nyg-editorCol { overflow-x: clip } で抑える。body には visible のみ。 */
@media (min-width: 960px) {
	html:has(#nyanguard-root),
	body:has(#nyanguard-root) {
		overflow-x: visible !important;
	}
}

/* 画像・動画のはみ出し防止（既存画像にも効く） */
img, video { max-width: 100%; height: auto; display: block; }

/* ヒーロー実績：スマホで4列が詰まり過ぎると溢れるので2列化 */
.hero-stats__inr { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px){
  .hero-stats__inr { grid-template-columns: repeat(4, 1fr); }
}

/* カルーセルの外側は必ずビューポート内に収める */
.install-carousel { overflow: hidden; max-width: 100%; }

/* トラックは内側で収める（パディング/ギャップの合算で+数px溢れるのを防止） */
.install-carousel__track{
  box-sizing: border-box;
  max-width: 100%;
  margin-inline: 0 !important;
  padding-inline: 2px;            /* 0だとスナップ端の切れを感じるので薄く余白 */
  overflow-x: auto;                /* トラック内スクロールのみ許可 */
  scrollbar-gutter: stable both-edges; /* スクロールバー出現での押し広げ抑制（対応ブラウザで有効） */
}

/* グリッド自動幅が gap と合算で 100% 超えないように調整 */
.install-carousel__track { gap: 12px; }
.install-carousel__track { grid-auto-columns: calc(80% - 6px); } /* 80% - gap/2 相当 */
@media (min-width: 768px){
  .install-carousel__track { grid-auto-columns: calc(32% - 8px); }
}

/* カード自身が最小幅を主張して外にはみ出さないように */
.install-card { min-width: 0; }

/* 固定CTAまわりのはみ出し防止（モバイルで稀に1px溢れる対策） */
.floating-cta{
  left: 0; right: 0;
  max-width: 100%;
  box-sizing: border-box;
  border-left: 0; border-right: 0;
}

/* 既存の .pc-only / .sp-only 内の横幅指定画像も安全側に倒す */
.pc-only img, .sp-only img { width: 100%; height: auto; }

/* 万一 100vw を使っている既存CSSの副作用を潰す（別テーマ由来のよくある原因） */
[class*="wrap"], [class*="container"] { max-width: 100%; }



/* ============ NAVボタン：ガラス丸型＋真鍮リム ============ */
.install-carousel { position: relative; }
.install-carousel__nav {
  position: absolute; inset: 0; pointer-events:none; /* ボタン以外クリック可 */
}
.ic-btn{
  pointer-events:auto;
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(201,168,106,.65);            /* 真鍮風の縁 */
  box-shadow: 0 6px 18px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(8px) saturate(1.2);
  color:#6d5536; /* 木口ブラウン寄り */
  transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease;
}
.ic-btn svg { width:22px; height:22px; }
.ic-btn--prev{ left:12px; }
.ic-btn--next{ right:12px; }
.install-carousel:hover .ic-btn{ opacity:1; }
@media (hover:hover){
  .ic-btn{ opacity:.92; }
  .ic-btn:hover{
    transform:translateY(-50%) translateZ(0) scale(1.04);
    box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9);
  }
}
.ic-btn:active{ transform:translateY(-50%) scale(.98); }

/* 画面幅が狭い時は少し小ぶりに & 端寄せ */
@media (max-width: 480px){
  .ic-btn{ width:42px; height:42px; }
  .ic-btn--prev{ left:8px; }
  .ic-btn--next{ right:8px; }
}

/* ============ 追従CTA：ピル型＋真鍮エッジ＋落ち着きグラデ ============ */
.floating-cta{
  gap:10px;
  background: rgba(255,255,255,.9);
  border-top: 1px solid rgba(201,168,106,.35);
  box-shadow: 0 -6px 24px rgba(0,0,0,.06);
}
.fcta-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(201,168,106,.35);            /* 真鍮の薄い縁 */
  background:
    linear-gradient(180deg, #fff, #fbf8f2);           /* 和紙→生成り */
  color:#2b2b2b; font-weight:700; letter-spacing:.02em;
  box-shadow: 0 8px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration:none;
}
.fcta-btn--primary{
  background:
    linear-gradient(180deg, #fffef8, #f6efe0);
  border-color: rgba(201,168,106,.6);
}
.fcta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,1);
}
.fcta-btn:active{ transform: translateY(0); }

.fcta-ic{
  width:18px; height:18px; flex:0 0 18px; opacity:.9;
}

/* 狭幅では2段組で読みやすく */
@media (max-width: 420px){
  .floating-cta{
    grid-template-columns:1fr 1fr; 
  }
  .floating-cta .fcta-btn:nth-child(1){ grid-column:1 / -1; } /* 購入はこちらを横幅いっぱい */
}

/* アクセシブルなフォーカス */
.ic-btn:focus-visible, .fcta-btn:focus-visible{
  outline: 2px solid #7c8b5a; outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(124,139,90,.25), 0 8px 20px rgba(0,0,0,.08);
}


/* Hero stats：3項目レイアウト */
.hero-stats__inr{
  max-width:1100px; margin:0 auto; padding:16px clamp(16px,4vw,32px);
  display:grid; gap:12px;
  grid-template-columns: repeat(2, 1fr); /* SPは2列 */
}
@media (min-width:768px){
  .hero-stats__inr{ grid-template-columns: repeat(3, 1fr); } /* PCは3列 */
}




.top-mv::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05) 40%, transparent);
  pointer-events:none;
}

/* ===== CTAラグジュアリー強化 ===== */

/* プライマリだけ少し文字間を広く、真鍮エッジを強調 */
.fcta-btn--primary{
  letter-spacing: .03em;
  background: linear-gradient(180deg, #fffdf7, #f3e8d4);
  border-color: rgba(201,168,106,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 28px rgba(0,0,0,.10),
    0 0 0 1px rgba(201,168,106,.2);
}

/* 全ボタン共通の影と奥行きを1段強め */
.fcta-btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 24px rgba(0,0,0,.08),
    0 0 0 1px rgba(201,168,106,.15);
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}

/* ホバー時はふわっと浮かせる */
.fcta-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 12px 32px rgba(0,0,0,.14),
    0 0 0 1px rgba(201,168,106,.25);
}

/* 押下時にふんわり戻す */
.fcta-btn:active{
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.05),
    0 6px 18px rgba(0,0,0,.10);
}



/* top-area01 の画像/バナーを強制センター */
.top-area01{
  /* 何が当たっていても真ん中に寄せる安全策 */
  display: grid;
  justify-items: center;   /* ←これで子要素が水平中央に */
}

.top-area01 img{
  display:block;           /* 画像をブロック化 */
  margin-inline:auto;      /* ブロックを中央に */
  max-width:100%;
  height:auto;
}

/* a がインラインのままでも中央化されるが、念のため */
.top-area01 a{ display:inline-block; }


/* ========= ボタン2つ並びレイアウト ========= */
.btn-wrap {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* 共通ボタン */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 12px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: all .25s ease;
  min-width: 150px; /* 幅の揃え */
  height: 44px;     /* 高さ統一 */
}

/* 詳細ボタン */
.btn-detail {
  background: #F8D861;
  color: #2F2415;
  border-color: #f0c93f;
}
.btn-detail:hover {
  background: #FBEA9B;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* 購入ボタン（メイン） */
.btn-buy {
  background: #C9A86A;
  color: #2F2415;
  font-weight: 700; /* 強調 */
  letter-spacing: .02em;
  padding: 11px 26px; /* 横をほんの少し広く */
  border-color: rgba(201,168,106,.35);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.btn-buy:hover {
  background: #D8BB80;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* 影と奥行きを少し強める（全体の統一感） */
.btn, .btn-buy {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              0 6px 14px rgba(0,0,0,.06);
}

/* モバイルでは縦並びで整列 */
@media (max-width: 480px){
  .btn-wrap {
    flex-direction: column;
    align-items: center;
  }
  .btn, .btn-buy {
    width: 80%;
    min-width: unset;
  }
}

.btn-buy::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 40%,
    rgba(255,255,255,0) 100%);
  opacity:.1;
  pointer-events:none;
}
.btn-buy{ position:relative; overflow:hidden; }

/* まず既存を無力化 */
.btn[data-variant]{
  background-image: none !important;
  filter: none !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  min-width: 150px; height: 44px; padding: 11px 22px;
  box-sizing: border-box !important;
}

/* 詳細＝明るい黄 */
.btn[data-variant="detail"]{
  background: #F8D861 !important;
  color: #2F2415 !important;
  border: 1px solid #f0c93f !important;
}
.btn[data-variant="detail"]:hover{ background:#FBEA9B !important; }

/* 購入＝真鍮ゴールド（主導線） */
.btn[data-variant="buy"]{
  background: #C9A86A !important;
  color: #2F2415 !important;
  border: 1px solid rgba(201,168,106,.35) !important;
  font-weight: 700; letter-spacing: .02em;
  padding: 11px 26px; /* ほんの少し大きめ */
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
}
.btn[data-variant="buy"]:hover{ background:#D8BB80 !important; }

/* 行揃え */
.btn-wrap{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:stretch; }
@media (max-width:480px){
  .btn-wrap{ flex-direction:column; }
  .btn[data-variant]{ width:80%; min-width:unset; }
}

/* ボタン並び中央寄せ（強制） */
.btn-wrap {
  display: flex;
  justify-content: center !important;  /* ←ここを上書き */
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}




/* ===== Hero Stats（4項目） ===== */
.hero-stats{
  background:linear-gradient(180deg, #fff, var(--cream));
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

.hero-stats__inr{
  max-width:1100px;
  margin:0 auto;
  padding:16px clamp(16px,4vw,32px);
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2,1fr); /* SP:2列×2行 */
}

@media (min-width:768px){
  .hero-stats__inr{
    grid-template-columns:repeat(4,1fr); /* PC:4列 */
  }
}

.hero-stat{
  background:#fff;
  border:1px solid #eee;
  border-radius:var(--radius);
  padding:14px;
  text-align:center;
  box-shadow:var(--shadow);
}

.hero-stat__kpi{
  display:block;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--wood);
}
.hero-stat__big{
  font-size:clamp(28px,5vw,36px);
  line-height:1;
  margin-right:4px;
}
.hero-stat__label{
  display:block;
  font-size:12px;
  color:var(--sub);
  margin-top:6px;
}
.hero-stat--media .hero-stat__kpi{
  color:var(--accent);  /* 真鍮ゴールド */
}

/* ホバー時に軽く浮く演出（任意） */
.hero-stat:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}



/* バナーを横幅いっぱいに表示 */
.top-area01{
  width: 100vw;            /* ビューポート全幅 */
  position: relative;
  left: 50%;               /* ラッパー中央基準 */
  right: 50%;
  margin-left: -50vw;      /* ラッパー制約を解除 */
  margin-right: -50vw;
  padding: 0;              /* 余白リセット */
  text-align: center;      /* 中央揃え */
  box-sizing: border-box;
  overflow: hidden;
}

.top-area01 img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;          /* テーマのmax-width制限を解除 */
  margin: 0 auto;
}



/* ===== Review Snippet（Hero直下） ===== */
.top-review-snippet{
  background: linear-gradient(180deg,#fff,#faf8f4);
  border-top:1px solid #eee; border-bottom:1px solid #eee;
  padding: clamp(14px,2vw,18px) 0  clamp(16px,2.5vw,22px);
  position: relative; overflow: clip;
}

.review-head{
  max-width:1100px; margin:0 auto; padding: 0 clamp(14px,4vw,24px);
}
.review-ttl{
  font-weight:700; font-size: clamp(16px,2.6vw,18px);
  color:#3a2e1a; letter-spacing:.04em; display:flex; gap:.75em; align-items:baseline;
}
.review-meta{ font-weight:500; font-size:.92em; color:#6b7280; }

/* 横スクロール（スナップ） */
.review-slider{
  max-width:1100px; margin:10px auto 0; padding: 0 clamp(14px,4vw,24px) 2px;
  display:grid; grid-auto-flow:column; grid-auto-columns: 82%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-gutter: stable both-edges;
}
@media(min-width:768px){ .review-slider{ grid-auto-columns: 32%; } }

/* レビューカード */
.review-item{
  scroll-snap-align:center; background:#fff; border-radius:16px;
  border:1px solid #eee;
  /* 木の温もり寄せの淡いグラデ＋柔らかい影 */
  background-image: linear-gradient(180deg, #ffffff, #fffaf2);
  box-shadow:
    0 10px 28px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  padding:16px 16px 14px; position:relative;
}

/* 星5（真鍮ゴールド） */
.review-stars{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:#E6B800;  /* 星色 */
  letter-spacing: 1px;
  font-size:14px;
  margin-bottom:8px;
}

/* 本文と署名 */
.review-txt{
  font-size:15px; line-height:1.65; color:#2f2415; font-style:italic;
  padding-left: 10px; border-left: 3px solid rgba(201,168,106,.35); /* 真鍮寄りの引用線 */
}
.review-name{
  display:block; text-align:right; margin-top:8px; font-size:13px; color:#7a7a7a;
}

/* カードの上に薄い木目ハイライト（控えめ） */
.review-item::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.45) 40%, rgba(255,255,255,.0) 100%);
  opacity:.12;
}


/* トップのスライドの高さ調整など */
.top-mv {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 60vh, 720px);
  background-size: cover;
  background-position: center;
  transition: background-image 0.8s ease-in-out;
}


/* ========== 1) 「TVメディアで紹介」の文字を大きく ========== */
/* ラベルだけ少し拡大（SP/PC共通） */
.hero-stats .hero-stat--media .hero-stat__label{
  font-size: 15px;        /* 既定12px→13pxに上げる */
  letter-spacing: .02em;
}
@media (min-width: 768px){
  .hero-stats .hero-stat--media .hero-stat__label{
    font-size: 20px;      /* PCでさらに見やすく */
  }
}

/* ========== 2) フッターのロゴをセンタリング ========== */
/* 画像でもブロックでも中央寄せに統一 */
#footer .logo{
  float: none !important;
  margin: 0 auto 20px !important;
  display: block !important;
  text-align: center;
}
#footer .logo img{
  display: inline-block;
}

/* ========== 3) 「運営メディア」のボタンを中央寄せ ========== */
/* 既存の float:left を無効化して中央に */
.top-area07 .box-block .box .btn{
  float: none !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.top-area07 .box-block{
  text-align: center; /* 子要素のinline-block/inline-flexを中央寄せ */
}

/* ========== 4) 「窓」のボタン縦位置を他商品と揃える（PCのみ） ========== */
/* 各 .box を縦並びフレックスにして、ボタン行(.btn-wrap)を底に寄せる */
@media (min-width: 768px){
  .top-area03 .box-block .box{
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .top-area03 .box-block .box .btn-wrap{
    margin-top: auto;   /* ここで下寄せ */
  }
  /* 説明テキスト下の余白を少し抑えて均しやすく */
  .top-area03 .box-block .box .txt{
    margin-bottom: 10px;
  }
}


/* PCではヒーローを少し背高に＆見せたい位置を上寄せ */
@media (min-width: 992px){
  .top-mv{
    min-height: clamp(560px, 72vh, 840px); /* ←高さを少し増やす */
    background-position: center 30%;        /* ←被写体がやや上にある想定なら上寄せ */
    background-size: cover;                 /* 既定 */
  }
}

/* ===== Hero（ファーストビュー）視認性アップ ===== */
.top-mv, .hero, .nk-hero, .top-area, .top-visual {
  position: relative;
}

/* 画像の上にうっすら暗幕（特に下部を暗くして白文字を読みやすく） */
.top-mv::after, .hero::after, .nk-hero::after, .top-area::after, .top-visual::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.15) 60%,
    rgba(0,0,0,.28) 80%,
    rgba(0,0,0,.45) 100%
  );
  pointer-events:none;
}

/* 縦並びコピー（例：.catch）をくっきり */
.top-mv .catch, .hero .catch, .nk-hero .catch, .top-area .catch, .top-visual .catch {
position: relative;
color: #fff;
font-weight: 800;
line-height: 1.5;
letter-spacing: .06em;

/* --- 控えめに深みを出す三層影 --- */
text-shadow:
  0 2px 6px rgba(0,0,0,.55),
  0 4px 18px rgba(0,0,0,.35),
  0 0 30px rgba(0,0,0,.25);

/* --- 縁取りを細く・柔らかく --- */
-webkit-text-stroke: 0.5px rgba(0,0,0,.25);

/* --- 奥行き補助：自然な柔光 --- */
filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));

z-index: 2;

/* --- 自動サイズ調整 --- */
font-size: clamp(28px, 6.4vw, 64px);

}

/* 縦並びで行間が詰まると読みにくいので少し息継ぎ */
.top-mv .catch br, .hero .catch br, .nk-hero .catch br { line-height: 1.2; }

/* モバイルは少しだけ左に余白を作り、被りを避ける */
@media (max-width: 767px) {
  .top-mv .catch, .hero .catch, .nk-hero .catch {
    margin-left: 2vw;
  }
}

/* ===== フッターロゴ：モバイルでの暴走防止 ===== */
@media (max-width: 767px) {
  .site-footer .logo img,
  .footer .logo img,
  #footer .logo img,
  .footer-logo img {
    max-width: 160px;   /* お好みで 140–180px の範囲で */
    height: auto;
    width: 100%;
  }
  /* はみ出し対策（親に影響される場合） */
  .site-footer .logo,
  .footer .logo,
  #footer .logo,
  .footer-logo {
    max-width: 160px;
    margin: 0 auto;
  }
}


.review-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.review-link:hover .review-item {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: all .3s ease;
}

/* 設置例カルーセルの基本設定 */
.install-carousel { position: relative; }

/* トラックをスクロールコンテナにする（横スクロール＋スナップ） */
.install-carousel__track {
  display: flex;
  gap: var(--ic-gap, 12px);        /* JSがこの値を読み取ってステップ計算します */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;   /* スナップで中途半端停止を防ぐ */
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--ic-edge, 12px); /* 端のカードが少し見切れる余白（任意） */
  scroll-behavior: smooth;
}

/* 各カードはスナップ対象・固定幅 */
.install-card {
  flex: 0 0 auto;
  width: min(86vw, 520px);         /* スマホは画面の約8割、PCは最大520px */
  scroll-snap-align: center;
  position: relative;
  z-index: 1;                      /* 画像よりは上、ナビよりは下 */
}
.install-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ナビゲーション（常に最前面＆クリック可） */
.install-carousel__nav {
  position: absolute;
  inset: 0;
  z-index: 5;                      /* 画像やトラックより前面に */
  pointer-events: none;            /* コンテナはクリックを通す */
  isolation: isolate;              /* 新しいスタッキングコンテキストを作る（被り防止） */
}
/* 実ボタンは pointer-events を有効化して押せるように */
.ic-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  touch-action: manipulation;      /* モバイルのタップ反応を良く */
}
.ic-btn svg { width: 22px; height: 22px; }
.ic-btn--prev { left: 6px; }
.ic-btn--next { right: 6px; }

/* 端に到達したら薄く＆非活性風（JSが .is-start/.is-end を付けます） */
.install-carousel.is-start .ic-btn--prev,
.install-carousel.is-end   .ic-btn--next {
  opacity: .35; filter: grayscale(1);
}


/* =========================================================
 * 1) 「きっかけ」画像（kikkake.png）が横幅いっぱいになるのを抑える
 *    ─ 下のバナー画像と同じトーンで中央寄せ＆共通最大幅に
 * =======================================================*/
.top-area01 > img:first-of-type {
  display: block;
  margin: 0 auto;
  width: min(92vw, 1040px); /* 画面に応じて縮む＆最大幅を統一 */
  height: auto;
}
/* 下のリンク付きバナーも同じ幅感で揃える（任意。不要なら削除可） */
.top-area01 a > img {
  display: block;
  margin: 0 auto;
  width: min(92vw, 1040px);
  height: auto;
}

/* =========================================================
 * 2) 商品一覧のサムネが左寄りに見えるのをセンターに補正
 *    ─ 背景画像・ボックス自体を中央に揃える
 * =======================================================*/
/* グリッド（横並び）の中央寄せ */
#product-list .box-block,
#product-list-option .box-block,
#product-list-karineko .box-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 中央揃え */
  gap: 32px 24px;
}

/* 各商品カードの最大幅を適度に制限（デザインの崩れ防止） */
#product-list .box,
#product-list-option .box,
#product-list-karineko .box {
  max-width: 420px;          /* お好みで 360〜460px 程度に調整可 */
  margin: 0 auto;            /* 1列時も中央に */
}

/* サムネ領域（背景画像の場合）をセンター表示に強制 */
#product-list .box .img,
#product-list-option .box .img,
#product-list-karineko .box .img {
  background-position: center center !important;
  background-size: cover;          /* 余白が出るなら contain へ変更 */
  margin-left: auto;
  margin-right: auto;
  /* 必要なら明示幅・比率を固定
     width: 100%; aspect-ratio: 4 / 3; */
}

/* ホバー文字や内側要素も中央に見えるように配置調整 */
#product-list .box .img .hover-txt-wrap,
#product-list-option .box .img .hover-txt-wrap,
#product-list-karineko .box .img .hover-txt-wrap {
  display: grid;
  place-items: center;
  text-align: center;
}

/* =========================================================
 * 3) 「オプションパーツ」「カリネコ」が1商品しかない時のセンタリング
 *    ─ すでに flex + justify-content:center で中央寄せ済み
 *      念のため1項目時の余白もきれいに
 * =======================================================*/
#product-list-option .box-block > .box:only-child,
#product-list-karineko .box-block > .box:only-child {
  margin-left: auto;
  margin-right: auto;
}


/* ===== 設置例タイトルを常に中央揃え ===== */
.install-carousel__head {
  text-align: center;
}

.install-carousel__ttl {
  display: inline-block;
  margin: 0 auto 0.5em;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

/* ナビゲーションボタンをタイトルの両側にきれいに配置 */
.install-carousel__nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

/* ===== 設置例 見出し：シンプルモダン ===== */
.install-carousel__ttl {
  position: relative;
  display: inline-block;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
  letter-spacing: 0.1em;
  color: #333;
  text-align: center;
  padding-bottom: 0.4em;
}

.install-carousel__ttl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #bfa26a 0%, #e3d8b3 100%);
  transform: translateX(-50%);
  border-radius: 1px;
}

.install-carousel__ttl::before {
  content: "Example Gallery";
  display: block;
  font-size: 0.75em;
  font-weight: 400;
  color: #999;
  letter-spacing: 0.05em;
  margin-bottom: 0.25em;
}


/* スマホ：レビュー1枚をほぼ全幅にする（左右に8pxだけ余白） */
@media (max-width: 767px){
  .review-slider{ 
    display:flex; gap:12px; padding:0 8px 2px;
    overflow-x:auto; scroll-snap-type:x mandatory;
  }
  .review-slider > *{ 
    flex:0 0 calc(100% - 16px);  /* ← 画面幅 - 左右余白 */
    scroll-snap-align:center;
  }
}


/* PC：カードを等高化 ＋ 本文を6行でトリミング */
@media (min-width: 768px){
  .review-slider{ display:grid; grid-auto-flow:column; grid-auto-columns:32%; gap:12px; }
  .review-item{ display:flex; flex-direction:column; height:100%; }
  .review-txt{ 
    flex:1; 
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; 
    overflow:hidden;
  }
}


/* topのバナーを常に画面いっぱい（テーマの内側幅に縛られない） */
.top-area01{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; padding:0; text-align:center;
}
.top-area01 img, .top-area01 a>img{
  display:block; width:100vw; max-width:none; height:auto; margin:0 auto;
}


@media (max-width: 767px){
  .review-slider{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding:0 10px;
    scroll-snap-type:x mandatory;
  }
  .review-item{
    flex:0 0 85%; /* ← 前後が15%分だけ覗く */
    scroll-snap-align:center;
    border-radius:12px;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
  }
}



.top-mv {
  min-height: 80vh !important;
  background-color: rgba(255,0,0,0.2);  /* 見えやすい色付け */
}

.mv-placeholder {
  background-color: #f7f3ee; /* 生成り色など */
}

.mv-placeholder {
  background-image: url('<?php echo esc_url( get_template_directory_uri() ); ?>/img/index/top1.jpg');
  background-position: center 40%;
}
@media (min-width: 992px) {
  .mv-placeholder {
    background-image: url('<?php echo esc_url( get_template_directory_uri() ); ?>/img/index/koyanagi5.jpg');
    background-position: center 45%;
  }
}

.install-carousel__track {
  scroll-snap-type: x mandatory;      /* スナップを必須とする */
  scroll-behavior: smooth;            /* スムーズスクロール */
  display: flex;
  overflow-x: auto;
  gap: 12px;
}

.install-card {
  flex: 0 0 auto;
  scroll-snap-align: center;          /* 各カードを中央にスナップ */
  /* 幅は既存の設定維持 */
}


.install-carousel__track {
  scroll-snap-type: x mandatory;
}
.install-card {
  scroll-snap-align: start;
}

/* レビューカルーセル用 */
.review-slider {
  overflow-x: auto;          /* 横スクロール可 */
  scroll-snap-type: x mandatory;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(80%);  /* 見える幅を80％にして隣のカード少し見えるように */
  gap: 16px;
  padding: 0 16px;            /* 両端に余白を持たせる */
}

.review-item {
  scroll-snap-align: start;
  width: 100%;                /* カードはコンテナ幅 */
  box-sizing: border-box;
}

/* PC表示時に高さを明示して縦スクロールバーを消す */
@media (min-width: 992px) {
  .review-slider {
    height: auto;          /* 内容に応じて自動で高さ */
    max-height: 300px;     /* 必要なら最大高さを制限 */
    overflow-y: hidden;    /* 縦スクロール禁止 */
  }
}


.review-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;       /* カード幅を80%にして左右に次のカードがチラ見え */
  gap: 16px;                     /* カード間の余白 */
  padding: 0 8% ;                /* 両サイドに余白（左右チラ見せ用） */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.review-item {
  scroll-snap-align: start;
  width: 100%;
  box-sizing: border-box;
}

/* PC表示時に縦スクロールバー出ないよう高さを調整 */
@media (min-width: 992px) {
  .review-slider {
    max-height: 300px;     /* 必要に応じて調整 */
    overflow-y: hidden;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.pc-only img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.product-block01,
.product-block02,
.item-merit,
.item-feature,
.item-brand,
.item-cashback,
.item-repayment,
.item-size,
.item-check,
#cart,
.review {
  margin-bottom: 60px;
}
.item-merit-list-style img[src*="lazuli-icon-heart.png"] {
  width: 24px;    /* アイコンの望ましい幅に調整してください（例：24px） */
  height: auto;
  vertical-align: middle;  /* リストテキストに行揃え */
  margin: 0 8px 0 0;       /* アイコンとテキスト間の余白 */
}


/* --- Simple Hero (1枚表示) --- */
.top-mv.simple-hero picture,
.top-mv.simple-hero img{
  display:block;
  width:100%;
  height:clamp(420px, 60vh, 720px);
  object-fit:cover;
  object-position:center 40%;
}

/* PCは少し背高 & 見せたい位置を上寄せ */
@media (min-width: 992px){
  .top-mv.simple-hero img{
    height:clamp(560px, 72vh, 840px);
    object-position:center 45%;
  }
}

/* テキスト/矢印が画像の上に載るように */
.top-mv__inner{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center; text-align:center; padding:2rem;
}
.top-mv .catch{ color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.top-mv .down-arrow{ color:#fff; }

/* ==== Simple Hero の仕上げ（上下のはみ出し色を消す） ==== */
.top-mv.simple-hero{
  /* 旧ヒーローの余白＆背景を無効化 */
  padding: 0 !important;
  margin-top: 75px;           /* 固定ヘッダーぶんだけ下げる */
  background: none !important;
  position: relative;
  overflow: hidden;
  line-height: 0;             /* 画像下に出る余白(行間)をゼロに */
}
/* 旧ヒーロー用のオーバーレイを無効化（薄い色が乗らないように） */
.top-mv.simple-hero::after{
  content: none !important;
}

/* 画像の表示領域を明示。
   ※数字はお好みで：スマホはやや低め、PCは少し高め */
.top-mv.simple-hero picture,
.top-mv.simple-hero img{
  display:block;
  width:100%;
  height:clamp(420px, 60vh, 720px);
  object-fit:cover;
  object-position:center 40%;
}

@media (min-width: 992px){
  .top-mv.simple-hero img{
    height:clamp(560px, 72vh, 840px);
    object-position:center 45%;
  }
}

/* --- ヒーロー部分 調整 --- */
.top-mv.simple-hero {
  padding: 0 !important;
  margin-top: 75px;   /* ヘッダー分の余白確保 */
  position: relative;
  overflow: hidden;
}

/* 画像領域の高さを少し縮めてスキマを詰める */
.top-mv.simple-hero picture,
.top-mv.simple-hero img {
  width: 100%;
  height: clamp(480px, 55vh, 700px); /* 60vh → 55vh に調整 */
  object-fit: cover;
  object-position: center 40%;
}

/* スマホ時の矢印位置調整 */
@media (max-width: 991px) {
  .top-mv .down-arrow {
    position: absolute;
    bottom: 20px;       /* 矢印を下方向に少し下げる */
    left: 50%;           /* 中央寄せ */
    transform: translateX(-50%);
    right: auto;         /* 右端指定を解除 */
  }
}

/* PCのキャッチ文字サイズ調整 */
@media (min-width: 992px) {
  .top-mv .catch {
    font-size: clamp(2.8rem, 4vw, 3.6rem);  /* 小さめ基準に */
    line-height: 1.2;
    max-width: 90%;
    margin: 0 auto;
  }
}
/* ==== ヒーローの余白修正（上下の白帯除去） ==== */
.top-mv.simple-hero {
  margin-top: 75px;
  padding: 0 !important;
  background: none !important;
  overflow: hidden;
  position: relative;
  line-height: 0;
}

.top-mv.simple-hero picture,
.top-mv.simple-hero img {
  width: 100%;
  height: 100vh;              /* 画面全高にフィット */
  object-fit: cover;
  object-position: center 40%; /* 被写体をやや上寄せ */
  display: block;
}

/* PC用タイトルサイズ調整（はみ出し防止） */
@media (min-width: 992px) {
  .top-mv .catch {
    font-size: clamp(2.2rem, 3vw, 3rem);
    line-height: 1.1;
    max-width: 80%;
    margin: 0 auto;
  }
}

/* スマホ矢印の位置修正（中央寄せ） */
@media (max-width: 991px) {
  .top-mv .down-arrow {
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
}

/* ===== 強制適用：ヒーロー画像上下空白をゼロに ===== */
body .top-mv.simple-hero,
body .top-mv.simple-hero picture,
body .top-mv.simple-hero img {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 500px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: none !important;
  overflow: hidden !important;
}
@media (max-width: 767px) {
  body .top-mv.simple-hero,
  body .top-mv.simple-hero picture,
  body .top-mv.simple-hero img {
    height: 60vh !important;
    min-height: 300px !important;
    object-position: center top !important;
  }
}
/* ─── 上部の空きをさらに詰める ─── */
body .top-mv.simple-hero {
  margin-top: 0 !important;   /* ヘッダー分の余白をゼロに */
  padding-top: 0 !important;
}

/* ─── キャッチ文字の文字間／行間調整（PC） ─── */
@media (min-width: 992px) {
  .top-mv.simple-hero .catch {
    font-size: clamp(2.4rem, 3vw, 3.2rem) !important;
    line-height: 1.5 !important;       /* 行間を広げて読みやすく */
    letter-spacing: 0.05em !important;  /* 文字間を少し開く */
    max-width: 80% !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
  }
}
/* ==== 強制：スマホ版ヒーロー縦長化＆上下隙間ゼロ化 ==== */
body .top-mv.simple-hero,
body .top-mv.simple-hero picture,
body .top-mv.simple-hero img {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 60vh !important;         /* スマホ用：画面高さの60%に固定 */
  min-height: 350px !important;
  max-height: 600px !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: none !important;
  overflow: hidden !important;
}

/* PC以上（992px以上）での補正 */
@media (min-width: 992px) {
  body .top-mv.simple-hero,
  body .top-mv.simple-hero picture,
  body .top-mv.simple-hero img {
    height: 70vh !important;
    min-height: 500px !important;
    max-height: none !important;
    object-position: center top !important;
  }
}

/* === 強制オーバーライド：ヒーロー上下隙間ゼロ＆スマホ縦長調整 === */
html body section.top-mv,
html body section.top-mv.simple-hero,
html body .top-mv,
html body .top-mv.simple-hero {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  min-height: 400px !important;
  overflow: hidden !important;
  background: none !important;
}

html body section.top-mv.simple-hero picture,
html body section.top-mv.simple-hero img,
html body .top-mv.simple-hero picture,
html body .top-mv.simple-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

@media (max-width: 767px) {
  html body section.top-mv.simple-hero,
  html body .top-mv.simple-hero {
    height: 65vh !important;
    min-height: 300px !important;
  }
  html body section.top-mv.simple-hero picture,
  html body .top-mv.simple-hero picture,
  html body section.top-mv.simple-hero img,
  html body .top-mv.simple-hero img {
    height: 100% !important;
    object-position: center top !important;
  }
}
/* ==== 上部透過フィルム除去 強化版 ==== */
/* 全てのセクション・ヘッダーを対象に透過背景とフィルタ解除 */
header[role="banner"],
header.hero,
div.top-mv,
section.hero,
section.top-mv,
.top-mv,
.hero {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* 疑似要素にも適用 */
header.hero::before,
header.hero::after,
div.top-mv::before,
div.top-mv::after,
section.top-mv::before,
section.top-mv::after {
  content: none !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
}


/* --- FAQ ページスタイル --- */
.faq-page-container {
  max-width: 1100px;
  margin: 0 auto 100px auto;
  padding: 20px 15px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  color: #333;
}

.faq-hero {
  text-align: center;
  margin-bottom: 60px;
}

.faq-title {
  font-size: 48px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #2a2a2a; /* 木目／キャットトーンに応じて調整 */
}

.faq-intro {
  font-size: 18px;
  color: #555;
  max-width: 800px;
  margin: 0 auto;
}

.faq-content .faq-shortcode {
  margin-top: 50px;
}

/* Ultimate FAQ プラグイン出力に対するカスタムスタイル */
.ewd-ufaq-faqs { /* プラグインの基本ラッパー */
  border-top: 1px solid #ddd;
}
.ewd-ufaq-faqs .ewd-ufaq-faq-title {
  font-size: 20px;
  font-weight: 600;
  padding: 16px 20px;
  background-color: #fbf8f4; /* 淡い木目／キャットに合う色 */
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.ewd-ufaq-faqs .ewd-ufaq-faq-title:hover {
  background-color: #f4f1ed;
}
.ewd-ufaq-faqs .ewd-ufaq-faq-body {
  padding: 20px;
  background-color: #fff;
  color: #444;
  line-height: 1.6;
}
.ewd-ufaq-faqs .ewd-ufaq-faq-title .ewd-ufaq-post-margin-symbol span {
  font-size: 24px;
  color: #b07c4a; /* アコーディオン記号にアクセントカラー */
}

/* 質問間隔を広めにする */
.ewd-ufaq-faqs .ewd-ufaq-faq {
  margin-bottom: 16px;
}

/* フッター部 */
.faq-footer {
  text-align: center;
  margin-top: 60px;
  color: #555;
}
.faq-footer .faq-contact {
  font-size: 27px;
  font-weight: bold;
  margin-bottom: 16px;
}
.faq-footer .faq-contact a {
  color: #b07c4a;
  text-decoration: underline;
}
.faq-footer .faq-note {
  font-size: 14px;
  color: #b00000;
  line-height: 1.4;
}



/* === 最新情報投稿 用スタイル === */
.info-post {
  max-width: 900px;
  margin: 80px auto;
  padding: 0 20px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: #333;
  line-height: 1.6;
  box-sizing: border-box;
}

.info-header {
  text-align: center;
  margin-bottom: 30px;
}

.info-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

.info-header .important-heading {
  color: #b00000;
}

.info-box {
  background: #fff;
  border-radius: 12px;
  padding: 30px 35px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  margin-bottom: 50px;
}

.info-box.notice {
  background: #faf8f4;
  border-left: 6px solid #b38b5d;
}

.info-box.important {
  background: #fff8f8;
  border-left: 6px solid #c44a4a;
}

.info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-box li {
  margin-bottom: 16px;
  padding-left: 1em;
  position: relative;
}

.info-box li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #b38b5d;
  font-weight: bold;
}

.info-box a {
  color: #b38b5d;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .info-post {
    margin: 60px auto;
    padding: 0 15px;
  }
  .info-header h2 {
    font-size: 22px;
  }
  .info-box {
    padding: 20px 25px;
    margin-bottom: 40px;
  }
}
/* === 最新情報投稿 用スタイル === */
.info-post {
  max-width: 900px;
  margin: 80px auto;
  padding: 0 20px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: #333;
  line-height: 1.6;
  box-sizing: border-box;
}

.info-heading {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  color: #222;
}
.info-heading + .info-box {
  margin-top: 20px;
}

.info-box {
  background: #fff;
  border-radius: 12px;
  padding: 30px 35px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  margin-bottom: 50px;
}
.info-box.notice {
  background: #faf8f4;
  border-left: 6px solid #b38b5d;
}
.info-box.important {
  background: #fff8f8;
  border-left: 6px solid #c44a4a;
}
.info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-box li {
  margin-bottom: 16px;
  padding-left: 1em;
  position: relative;
}
.info-box li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #b38b5d;
  font-weight: bold;
}
.info-box a {
  color: #b38b5d;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .info-post {
    margin: 60px auto;
    padding: 0 15px;
  }
  .info-heading {
    font-size: 22px;
    margin-bottom: 20px;
  }
  .info-box {
    padding: 20px 25px;
    margin-bottom: 40px;
  }
}
/* ===== 最新情報投稿ページ 強制レイアウト修正 ===== */
body.single-post .entry-content,
body.page-template-archive-info .entry-content,
.info-post {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  box-sizing: border-box !important;
  clear: both !important;
}

/* 投稿本文内の幅指定インラインスタイルをリセット */
body.single-post .entry-content [style*="width"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* カード型レイアウト強制 */
.info-post .info-box {
  width: 100% !important;
  display: block !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* モバイル対応 */
@media (max-width: 767px) {
  body.single-post .entry-content,
  .info-post {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}


/* ===== About（ねこ工房について） ===== */
.nk-about{
  padding: 80px 0 120px;
  background:
    radial-gradient(1200px 600px at 50% -220px, rgba(179,139,93,0.06), transparent 60%),
    #fff;
}
.nk-about__wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.nk-about__head{
  text-align: center;
  margin-bottom: 28px;
}
.nk-about__title{
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.35;
  font-weight: 700;
  color: #2a2a2a;
  letter-spacing: .04em;
  margin: 0;
}
.nk-about__bar{
  width: 72px;
  height: 4px;
  margin: 14px auto 0;
  background: #b38b5d; /* ウォールナット系アクセント */
  border-radius: 999px;
}

/* カード */
.nk-about__card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
  overflow: hidden;
}
.nk-about__body{
  padding: clamp(24px, 3vw, 40px);
  color: #333;
  line-height: 1.95;
  font-size: clamp(15px, 1.8vw, 17px);
}
.nk-about__body p{
  margin: 0 0 1.2em;
}
.nk-about__body br{ line-height: 2.2; }

/* 強調・リンクのトーン */
.nk-about__body em,
.nk-about__body strong{ color: #7a5532; }
.nk-about__body a{
  color: #b38b5d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 余白最適化（サイト全体のヘッダーが固定の場合の微調整用：必要ならON）
#header.is-fixed + .nk-about { padding-top: 96px; }
*/

@media (max-width: 767px){
  .nk-about{ padding: 56px 0 80px; }
  .nk-about__bar{ width: 56px; height: 3px; }
}
/* スマホ時にタイトル上へ余白を追加 */
@media (max-width: 767px){
  .nk-about__head{
    margin-top: 40px; /* ← この値で上の余白を調整（30〜60pxで好みに） */
  }
}


/* 施工業者紹介＆代理店募集バナー画像のサイズ調整 */
	.entry-content img[src*="kikkake.png"],
.entry-content img[src*="sekougyousha.png"],
.entry-content img[src*="agency_recruitment-banner.png"],
img[src*="kikkake.png"],
img[src*="sekougyousha.png"],
img[src*="agency_recruitment-banner.png"] {
  display: block !important;
  margin: 40px auto !important;
  max-width: 1100px !important;  /* ← PC最大幅 */
  width: 90% !important;         /* 可変幅 */
  height: auto !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

/* スマホ表示では全幅 */
@media (max-width: 767px){
	.entry-content img[src*="kikkake.png"],
  .entry-content img[src*="sekougyousha.png"],
  .entry-content img[src*="agency_recruitment-banner.png"],
	img[src*="kikkake.png"],
  img[src*="sekougyousha.png"],
  img[src*="agency_recruitment-banner.png"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 5px auto !important;
    box-shadow: none !important;
  }
}

.review-more-wrap {
  text-align: center;
  margin-top: 1.2rem;   /* ← 上との余白を詰めた */
  margin-bottom: 2.5rem; /* 下に適度な呼吸スペース */
}

/* 高級感 × 立体感ボタン */
.review-more-btn {
  display: inline-block;
  background: linear-gradient(145deg, #d4b68b 0%, #b99263 100%);
  color: #fff;
  padding: 0.9rem 2.6rem;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all 0.25s ease;
  position: relative;
  top: -0.3rem; /* ← わずかに上方向に寄せて中央感を補正 */
}

/* ホバー時 */
.review-more-btn:hover {
  background: linear-gradient(145deg, #e1c39c 0%, #c8a471 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18),
              inset 0 1px 0 rgba(255,255,255,0.5);
}

/* クリック時 */
.review-more-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) inset;
}

/* セクションの横幅ガイド */
.top-review-snippet { max-width: 1100px; margin: 0 auto; padding: 0 clamp(12px,4vw,24px); }

/* スライダー本体 */
#reviewSlider{
  position: relative;
  overflow: hidden;                  /* はみ出し隠す */
  padding: 8px 2px 18px;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

/* JSで生成する内部トラック */
#reviewSlider .rv-track{
  display: flex;
  gap: 14px;
  will-change: transform;
}

/* 各カードの幅（SPは画面の約85%、PCは固定幅で横に複数見える） */
#reviewSlider .review-link{ 
  flex: 0 0 auto;
  width: 86vw;
  max-width: 520px;
  text-decoration: none; color: inherit;
}
@media (min-width: 1024px){
  #reviewSlider .review-link{ width: 360px; }
}

/* カード高さを統一 */
.review-item{
  display: grid;
  grid-template-rows: auto 1fr auto; /* 星 / 本文 / 名前 */
  align-items: start;
  gap: 10px;
  border: 1px solid #e8e6e2;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 14px 16px;
  min-height: 150px;
}
@media (min-width: 1024px){
  .review-item{ min-height: 170px; }
}

/* 本文は行数で高さ揃え（SP:3行 / PC:4行） */
.review-txt{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.7;
}
@media (min-width: 1024px){
  .review-txt{ -webkit-line-clamp: 4; }
}

.review-stars{ color: #c9a86a; letter-spacing: .12em; font-size: 14px; }
.review-name { color:#6b7280; font-size: 13px; }

/* ちょい立体感 */
#reviewSlider .review-link:hover .review-item{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
}

/* --- 強制的にネイティブスクロール＆スナップを無効化 --- */
#reviewSlider{
  overflow: hidden !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
#reviewSlider *{
  scroll-snap-align: none !important;
}

/* 他スクリプト由来のキーアニメ/トランジションが残ってても無効化 */
#reviewSlider,
#reviewSlider .rv-track{
  animation: none !important;
  transition: none !important;
}


/* 各カードの幅（SP: 今の約7割 / PC: 固定幅） */
#reviewSlider .review-link {
  flex: 0 0 auto;
  width: 60vw;         /* ← ここを変更（従来: 86vw） */
  max-width: 520px;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 1024px) {
  #reviewSlider .review-link {
    width: 360px;      /* PCはそのまま据え置き */
  }
}
@media (min-width: 1024px){
  .review-item {
    min-height: 85px;     /* ← 約半分に */
    padding: 10px 12px;   /* 余白も少し詰めてバランス調整 */
    gap: 6px;
  }

  .review-txt {
    -webkit-line-clamp: 2; /* 行数も減らして高さを抑える */
  }

  .review-stars {
    font-size: 13px;
  }

  .review-name {
    font-size: 12px;
  }
}


/* #review 内はブラウザの位置補正を無効化 */
#review { overflow-anchor: none; }

/* 全体に smooth が指定されていると再ジャンプするので保険 */
html { scroll-behavior: auto; }

@media screen and (max-width: 767px) {
  /* トップページの最初のh1見出しに対して文字間を詰める */
  body.home h1:first-of-type {
    letter-spacing: -0.3px;
  }
}

/* === Review Slider: unified & lock === */

/* 本体 */
#reviewSlider{
  position:relative;
  overflow:hidden !important;
  padding:8px 2px 18px;
  /* 他ライブラリのスナップやスムーズを殺す */
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
}

/* トラック（数値はここに一本化：gap=12px） */
#reviewSlider .rv-track{
  display:flex;
  gap:12px;            /* ← 統一値 */
  will-change:transform;
  animation:none !important;
  transition:none !important;
}

/* カード幅（SPは86vw、PCは360pxで固定） */
#reviewSlider .review-link{
  flex:0 0 auto;
  width:86vw;
  max-width:520px;
  text-decoration:none; color:inherit;
}

@media (min-width:1024px){
  #reviewSlider .review-link{ width:360px; }
}

/* カードの最小高さは従来トーンを維持しつつ微調整 */
#reviewSlider .review-item{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:10px;
  min-height:160px;
}

/* 汎用の .review-slider ルールが干渉しないよう弱体化 */
.review-slider{ display:block; }  /* grid/ flex 指定を打ち消す */


/* === Floating CTA: Androidで2段落ち防止（後勝ちパッチ） === */
.floating-cta{
  position: fixed;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  z-index: 9999;
  display: flex;
  flex-wrap: nowrap;           /* ← ここが要 */
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(120%) blur(8px);
  box-sizing: border-box;
}

.floating-cta .fcta-btn{
  display: flex !important;    /* 既存の block 指定を潰す */
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;                 /* 2つを横に均等配分 */
  min-width: 0;                /* ← これがないとAndroidで折れやすい */
  white-space: nowrap;
  padding: 12px 14px;
  border-radius: 999px;
  line-height: 1;              /* ラインハイトで縦寸を安定 */
  box-sizing: border-box;
}

/* ボタン内テキストの明示的な改行を無効化（スマホ時） */
@media (max-width: 480px){
  .floating-cta .fcta-btn span br{ display: none; }
}

/* アイコンの縮尺で高さが変わらないよう固定 */
.floating-cta .fcta-btn .fcta-ic{
  width: 20px; height: 20px;
  flex: 0 0 auto;
}

/* 文字が潰れるときのフォント微調整（任意） */
@media (max-width: 360px){
  .floating-cta .fcta-btn{ padding: 10px 12px; }
  .floating-cta .fcta-btn span{ font-size: 0.95rem; }
}
/* === Floating CTA 調整：1列固定＋2行ラベル＋自動縮小 === */

/* 1列固定（Androidの折返し対策は維持） */
.floating-cta{
  display: flex;
  flex-wrap: nowrap !important;
  gap: 8px;
}

/* ボタン本体：横に2つ並べたままラベル2行でも収まるよう最小幅ゼロ化 */
.floating-cta .fcta-btn{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;     /* 均等配分 */
  min-width: 0;    /* ← Androidの折返し癖を止める */
  padding: 12px 14px;
  line-height: 1.1;
  box-sizing: border-box;
}

/* ラベル：2行前提。改行 <br> を表示しつつ、はみ出さないよう自動縮小 */
.floating-cta .fcta-btn span{
  display: inline-block;
  white-space: normal;        /* 2行OKに戻す */
  word-break: keep-all;       /* 日本語の“変な折り”を抑制 */
  text-wrap: balance;         /* 対応ブラウザで見た目を整える */
  letter-spacing: .02em;
  font-weight: 700;
  /* 端末に応じて自動縮小（小画面で詰まるのを防ぐ） */
  font-size: clamp(12px, 3.6vw, 14px);
}

/* スマホでは <br> を有効化（2行運用） */
@media (max-width: 480px){
  .floating-cta .fcta-btn span br{ display: inline; }
  /* 2行前提の高さ確保（環境差の行高で崩れないように） */
  .floating-cta .fcta-btn{ min-height: 44px; }
}

/* 極小画面の保険：文字をさらに一段階だけ縮め、左右パディングも圧縮 */
@media (max-width: 360px){
  .floating-cta .fcta-btn{ padding: 10px 12px; }
  .floating-cta .fcta-btn span{ font-size: clamp(11px, 3.8vw, 13px); }
}

/* アイコンが文字を押し広げないよう固定（任意） */
.floating-cta .fcta-btn .fcta-ic{
  width: 18px; height: 18px; flex: 0 0 auto;
}


/* === PC: ファーストビュー下矢印を強制センター === */
@media (min-width: 1024px){
  .top-mv{ position: relative; }

  /* よくあるラッパ名を全部ケア（どれかにヒット） */
  .top-mv .arw,
  .top-mv .down-arrow,
  .top-mv .mv-down,
  .top-mv .scroll-down,
  .top-mv .scroll-indicator{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 20px;                 /* 位置はお好みで */
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: grid !important;     /* ← 中央寄せに最強 */
    place-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    z-index: 5;
    transform: none !important;
  }

  /* a/内包アイコンがインラインで偏るのをブロック化して抑止 */
  .top-mv .arw > a,
  .top-mv .down-arrow > a,
  .top-mv .mv-down > a,
  .top-mv .scroll-down > a{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* FontAwesomeの矢印（span.fa）に右寄せ系が当たっていても無効化 */
  .top-mv .fa-angle-down{
    position: static !important;
    margin: 0 !important;
    right: auto !important;
    left: auto !important;
  }
}


@media (max-width: 767px) {
  .slick-next,
  .slick-prev {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 768px) {
  /* 親子扉タイプの説明だけ狭く */
  .oyako-txt {
    max-width: 80% !important;
    margin: 0 auto !important;
    padding: 0.5em 0 !important;
    box-sizing: border-box !important;
  }
  /* 通常の .txt は元の幅に戻す（またはデフォルトに）*/
  .txt:not(.oyako-txt) {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ========== ファーストビュー修正：暗く＋文字中央固定 ========== */
body .top-mv.simple-hero {
  position: relative !important;
  overflow: hidden !important;
}

/* 旧CSSのcontent:noneを上書きしてオーバーレイ復活 */
body .top-mv.simple-hero::after {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.2) !important; /* 暗さを調整（0.3〜0.6） */
  z-index: 1 !important;
  pointer-events: none !important;
}

/* テキストを最前面に中央配置（grid/insetを打ち消す） */
body .top-mv__inner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100%;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  color: #fff !important;
  text-align: center !important;
  text-shadow: 0 3px 8px rgba(0,0,0,0.7);
}

/* ======== ファーストビュー白隙間完全リセット ======== */

/* 1️⃣ section自体をゼロ基準でリセット */
body section.top-mv.simple-hero {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
  background: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 2️⃣ pictureとimgの間の隙間（inline要素）を防ぐ */
body section.top-mv.simple-hero picture,
body section.top-mv.simple-hero img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: bottom !important; /* ← ← ← これが重要。下の白帯消す */
  width: 100% !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: none !important;
}

/* 4️⃣ 念のため：直後セクションの上マージンも打ち消す */
body section.top-mv.simple-hero + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ===== スマホ版：ファーストビュー文字位置調整（強制上書き） ===== */
@media screen and (max-width: 767px) {
  body .top-mv.simple-hero .top-mv__inner {
    top: 52% !important;               /* ← この数値を変えて調整（50%が中央） */
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    z-index: 2 !important;
  }
}


/* FAQページ：タイトルがヘッダーと重ならないように上マージン確保 */
body.page-id-?? .page-header, /* ページ固有のクラスがあれば“??”を置き換えてください */
body.page-template-faq .page-header,
body .faq-title { /* “faq-title” がタイトルのクラス名の場合 */
  margin-top: 120px !important; /* ヘッダー下に120px空ける */
}

/* スマホ表示時に余白を若干小さめに */
@media (max-width: 767px) {
  body .faq-title {
    margin-top: 80px !important;
    padding: 0 16px; /* 横パディングも追加してスマホの文字端が重ならないように */
  }
}


/* 施工紹介ページの2枚の画像をスマホで横幅いっぱいに（ピンポイント指定） */
@media (max-width: 767px) {
  /* 1) 流れ図（sekou-nagare.png）を含む直近の親divをフルブリード化 */
  .container div:has(> img[src*="sekou-nagare.png"]) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;  /* コンテナ外へはみ出す */
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
  }
  .container div:has(> img[src*="sekou-nagare.png"]) > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* 2) 募集バナー（agency_recruitment-banner.png）側も同様に */
  .container div:has(> a > img[src*="agency_recruitment-banner.png"]) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
  }
  .container div:has(> a > img[src*="agency_recruitment-banner.png"]) a > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
}



/* ===== 料金・フロー案内（scoped） ===== */
.nk-cost{ padding: 8px 16px 0; }
.nk-cost-card{
  max-width: 820px; margin: 0 auto 18px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--cardShadow);
  padding: 18px 18px 16px;
}
.nk-cost-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.nk-cost-icon{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:10px;
  background: rgba(216,166,0,.14); color: var(--brand);
  font-weight:900; font-size:18px;
}
.nk-cost-ttl{ font-size:clamp(18px,2.6vw,20px); margin:0; letter-spacing:.02em; }

.nk-cost-price{
  margin: 8px 0 6px; line-height:1.6;
  font-size: clamp(16px,2.8vw,18px);
}
.nk-cost-price strong{
  font-size: clamp(20px,3.4vw,22px);
  font-weight: 800; margin-left:.25em; color: var(--fg);
}
.nk-cost-price small{ color: var(--muted); margin-left:.4em; }

.nk-badge{
  display:inline-block; vertical-align:middle;
  font-size:.82em; font-weight:700; letter-spacing:.02em;
  color:#835f00; background:#fff7d6; border:1px solid #f2df9b;
  padding:3px 8px; border-radius:999px;
}

.nk-cost-notes{
  margin: 10px 0 0; padding-left: 1.2em; color: var(--muted);
  font-size: .96em; line-height: 1.7;
}
.nk-cost-notes li{ margin:.25em 0; }
.nk-cost-notes strong{ color: var(--fg); font-weight: 700; }

/* レスポンシブ微調整 */
@media (max-width: 480px){
  .nk-cost-card{ padding:16px 14px; }
  .nk-cost-icon{ width:34px; height:34px; font-size:17px; }
}

/* ダークモード調整 */
@media (prefers-color-scheme: dark){
  .nk-badge{ color:#332500; background:#3b2f12; border-color:#5a4b1d; }
}


/* ===== 料金・フロー案内（整形版） ===== */
.nk-cost {
  padding: 12px 16px 0;
}

.nk-cost-card {
  max-width: 820px;
  margin: 0 auto 28px;
  background: #fffdf6; /* やや温かみのあるベージュトーン */
  border: 1px solid #f0e6c8;
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  padding: 20px 22px 18px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.nk-cost-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.nk-cost-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.nk-cost-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(216,166,0,.18);
  color: #b08500;
  font-weight: 800;
  font-size: 20px;
}

.nk-cost-ttl {
  font-size: clamp(18px, 2.6vw, 21px);
  margin: 0;
  letter-spacing: .03em;
  font-weight: 700;
  color: #3b2f1a;
}

.nk-cost-price {
  margin: 10px 0 8px;
  line-height: 1.6;
  font-size: clamp(16px, 2.8vw, 18px);
  text-align: left;
}

.nk-cost-price strong {
  font-size: clamp(20px, 3.2vw, 22px);
  font-weight: 800;
  margin-left: .25em;
  color: #1f1f1f;
}

.nk-cost-price small {
  color: #7a6f55;
  margin-left: .4em;
}

.nk-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .03em;
  color: #835f00;
  background: #fff5c8;
  border: 1px solid #f2df9b;
  padding: 4px 9px;
  border-radius: 999px;
}

.nk-cost-notes {
  margin: 12px 0 0;
  padding-left: 1.3em;
  color: #5b5235;
  font-size: .95em;
  line-height: 1.75;
}
.nk-cost-notes li {
  margin: .35em 0;
  list-style-type: "・ ";
}
.nk-cost-notes strong {
  color: #3b2f1a;
  font-weight: 700;
}

/* レスポンシブ微調整 */
@media (max-width: 480px) {
  .nk-cost-card {
    padding: 18px 14px;
  }
  .nk-cost-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}

/* ダークモード調整 */
@media (prefers-color-scheme: dark) {
  .nk-cost-card {
    background: #242016;
    border-color: #3a341f;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  }
  .nk-cost-ttl,
  .nk-cost-price strong,
  .nk-cost-notes strong {
    color: #f8f4e6;
  }
  .nk-cost-notes {
    color: #c9c2a0;
  }
  .nk-badge {
    color: #f1da80;
    background: #3b2f12;
    border-color: #5a4b1d;
  }
}


/* ===== ファーストビューのキャッチコピー改善 ===== */
.top-mv {
  position: relative;
  overflow: hidden;
}

/* 背景オーバーレイ（画像の上に半透明黒） */
.top-mv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.45));
  z-index: 1;
  pointer-events: none;
}

/* テキスト位置と見やすさ強化 */
.top-mv__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: #fff;
  width: 100%;
  padding: 0 1rem;
}

.top-mv__inner .catch {
  font-size: clamp(24px, 6vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); /* 白文字を浮かせる */
}

/* スマホ調整 */
@media (max-width: 768px) {
  .top-mv__inner {
    top: 55%; /* 少し下げてバランス良く */
  }
  .top-mv__inner .catch {
    font-size: clamp(22px, 8vw, 32px);
    line-height: 1.55;
  }
}

/* ===== 商品ページ：ヘッダー被り対策 ===== */
.page-template-default .container:first-of-type,
.page-id-xxx .container:first-of-type { /* 固定ページ共通 or 個別IDで調整 */
  padding-top: 100px; /* ヘッダーの高さに合わせて調整（例：90〜110px） */
}

@media (max-width: 767px) {
  .page-template-default .container:first-of-type {
    padding-top: 80px; /* スマホ用に少し小さく */
  }
}


/* 「猫の脱走防止専門店」キャッチコピーのサイズ調整 */
.simple-hero .catch {
    font-size: 2.0rem;     /* PC用例：2.0rem = 32px 程度（ルートが16pxの場合） */
    line-height: 1.5;      /* 行間少し余裕を持たせるなら */
    /* 必要なら色・フォントも調整可 */
    /* color: #333; */
}

/* スマホ（幅767px以下）用にさらに小さく */
@media (max-width: 767px) {
    .simple-hero .catch {
        font-size: 1.8rem;  /* スマホ用例＝24px 程度 */
    }
}

/* 商品一覧 ボックス内 価格表示スタイル */
.box .price {
  margin: 0.8em 0;             /* 上下の余白 */
  font-size: 1.2em;            /* 例えば 1.2em ≒ 19-20px（ルート16px換算） */
  color: #b27a0c;              /* ゴールド系などブランドカラーに合わせて */
  font-weight: bold;
}

.box .price strong {
  font-size: 1.3em;            /* 価格部分を少し大きく */
  color: #333333;              /* 価格数字の色 */
}

@media (max-width: 767px) {
  .box .price {
    font-size: 1.0em;          /* スマホで少し小さめ */
  }
  .box .price strong {
    font-size: 1.1em;
  }
}



/* ===============================
   Construction Popup：改良版3
   =============================== */
.cpromo-mini {
  position: fixed;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  width: 300px; /* ← PCでさらに拡大 */
  z-index: 9999;
  background: transparent;
  text-align: center;
}

.cpromo-mini img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.cpromo-mini__close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
  line-height: 24px;
  font-size: 15px;
  z-index: 10000;
}

/* ===== スマホ（.simple-hero の右上にフィット） ===== */
@media (max-width: 768px) {
  .top-mv.simple-hero {
    position: relative;
    overflow: visible !important;
  }

  .cpromo-mini {
    position: absolute;          /* hero内部に重ねる */
    top: 12%;                     /* ← 上端からの距離（調整可） */
    right: 3%;                   /* ← 右端ぴったり寄せ */
    transform: none;
    width: 38vw;                 /* 横幅は画面の38% */
    max-width: 260px;            /* 上限 */
    z-index: 50;                 /* heroの上に表示 */
  }

  .cpromo-mini img {
    object-fit: contain;
    display: block;
    width: 100%;
    height: auto;
  }
}

/* 初期は非表示（チラ見え防止） */
.cpromo-mini {
  display: none;
}


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Noto+Sans+JP:wght@400;700&display=swap');

.intro-service {
  padding: 80px 20px;            /* 余白を少し小さめに調整 */
  background-color: #fff8ee;      /* 柔らかいクリーム系 */
  text-align: center;
  border-top: 4px solid #b27a0c;  /* 上部ボーダーで区切りを明確に */
}
.intro-service__inner {
  max-width: 640px;
  margin: 0 auto;
}
.intro-service__title {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 1.1;
  margin-bottom: 24px;            /* 見出しと本文の間の余白 */
}
.intro-service__subtitle {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: #b27a0c;
  margin-top: 8px;
}
.intro-service__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #4a4a4a;
  margin-top: 0;
}
.intro-service__text .highlight {
  color: #b27a0c;
  font-weight: 700;
}
@media (max-width: 767px) {
  .intro-service {
    padding: 50px 15px;
    border-top: 3px solid #b27a0c;
  }
  .intro-service__title {
    font-size: 2.2rem;
    margin-bottom: 18px;
  }
  .intro-service__subtitle {
    font-size: 1.1rem;
  }
  .intro-service__text {
    font-size: 1rem;
    line-height: 1.5;
  }
}


.intro-service {
  padding-top: 20px !important;
  margin-top: 0 !important;
}
.page-template-default .container:first-of-type,
.container–first-of-type {
  padding-top: 40px !important;
  margin-top: 0 !important;
}

/* 固定CTA：購入はこちらの文字だけを1.1倍 */
.floating-cta .fcta-btn--primary span {
  font-size: 1.15em;
  line-height: 1.15; /* 2行でも間延びしないように */
}
/* 購入CTAのアイコンも少し強調 */
.floating-cta .fcta-btn--primary .fcta-ic {
  transform: scale(1.15);
}
/* 購入CTA：上品な艶（ちゃんとグラデが見える差にする） */
.floating-cta .fcta-btn--primary{
  /* 既存の background-color を確実に上書き */
  background-color: #6f543f;
  background-image: linear-gradient(180deg, #8a6b51 0%, #6f543f 55%, #624a37 100%);
  color: #fff;

  /* 高級感＝“境界”と“陰影” */
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18);

  /* 角があるなら少しだけ整える（既に丸いなら不要） */
  /* border-radius: 14px; */
}

/* 購入CTA：文字を1.2倍（あなたの要望） */
.floating-cta .fcta-btn--primary span{
  font-size: 1.2em;
  line-height: 1.12;
}

/* 触ったときに“良いボタン感”が出る（上品） */
.floating-cta .fcta-btn--primary:active{
  transform: translateY(1px);
}

/* 設置が難しい方：上品なサブ */
.floating-cta .fcta-btn:nth-of-type(2) {
  background: linear-gradient(
    180deg,
    #f4efe9 0%,
    #e9e1d8 100%
  );
  color: #5c4634;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.08);
}
/* 質問CTA：最も控えめ */
.floating-cta .fcta-btn:nth-of-type(3) {
  background: transparent;
  color: #6b5543;
  border: 1px solid rgba(123,94,69,0.35);
  box-shadow: none;
}

/* --- 強制リセット：バナーエリア --- */

/* 元のスタイルを打ち消して中央寄せにする */
section.top-area01.top-banner-area {
    display: block !important;          /* フレックス等の影響を切る */
    width: 100% !important;             /* 幅を確保 */
    max-width: 980px !important;        /* 広がりすぎ防止 */
    margin-top: 50px !important;        /* 上の余白 */
    margin-bottom: 50px !important;     /* 下の余白 */
    margin-left: auto !important;       /* 左自動（中央寄せ） */
    margin-right: auto !important;      /* 右自動（中央寄せ） */
    padding: 0 20px !important;         /* スマホで端が切れないように */
    text-align: center !important;      /* 中身を中央揃え */
    position: static !important;        /* 変な位置指定を解除 */
    transform: none !important;         /* 位置ズレ要因を解除 */
    float: none !important;             /* 浮動化を解除 */
    background: transparent !important; /* 背景色リセット */
    box-sizing: border-box !important;
}

/* 画像が画面からはみ出さないようにする */
.top-banner-area img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: top;
    box-shadow: none !important;        /* 不要な影を消す */
}

/* リンク画像のホバーエフェクト */
.top-banner-area a {
    display: block;
    transition: opacity 0.3s;
}
.top-banner-area a:hover {
    opacity: 0.8;
}


/* --- 個別のバナー設定 --- */

/* 1つだけのバナー（テレビ・納期・施工業者） */
.top-banner-area .banner-single {
    width: 100%;
    margin-bottom: 40px !important;
    text-align: center;
}

/* テレビ紹介バナー：PCでデカすぎないように */
.top-banner-area .media-banner img {
    max-width: 800px !important;
    width: 100%;
}

/* --- 2列並び（観音開き・ハイドア）の設定 --- */

.top-banner-area .banner-double-row {
    display: flex !important;           /* ここだけFlexboxを使う */
    justify-content: center !important; /* 中央寄せ */
    gap: 20px !important;               /* 画像間の隙間 */
    width: 100% !important;
    max-width: 800px !important;        /* テレビバナーと幅を揃える */
    margin: 0 auto 40px auto !important;/* 上下余白と中央寄せ */
}

.top-banner-area .banner-col {
    width: 48% !important;              /* PCでは半分弱の幅 */
    flex: 0 0 auto !important;          /* サイズ固定 */
}

/* --- スマホ対応（768px以下で縦並び） --- */
@media (max-width: 768px) {
    section.top-area01.top-banner-area {
        padding: 0 15px !important;
    }

    .top-banner-area .banner-double-row {
        flex-direction: column !important; /* 縦並びに変更 */
        align-items: center !important;
        gap: 20px !important;
    }
    
    .top-banner-area .banner-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 各バナーの下余白調整 */
    .top-banner-area .banner-single,
    .top-banner-area .banner-double-row {
        margin-bottom: 30px !important;
    }
}


/* --- 価格改定お知らせバナー（CSSデザイン） --- */
.price-alert-box {
    max-width: 800px;
    margin: 0 auto 40px auto !important; /* 下余白 */
    box-sizing: border-box;
}

.price-alert-box a {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, opacity 0.2s;
}
.price-alert-box a:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.price-alert-inner {
    border: 3px solid #c0392b; /* 濃い赤の枠線 */
    background-color: #fff9f9; /* 薄い赤の背景 */
    padding: 25px 20px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(192, 57, 43, 0.15);
}

/* タイトル */
.pa-head {
    background-color: #c0392b;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 100px;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}

/* 本文 */
.pa-lead {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 期限強調部分 */
.pa-limit {
    color: #c0392b;
    font-size: 1.2em;
    display: inline-block;
    margin-top: 5px;
    background: linear-gradient(transparent 70%, #ffdfdf 70%); /* マーカー風装飾 */
}
.pa-limit strong {
    font-size: 1.3em;
    font-weight: 900;
}

/* ボタン風リンク */
.pa-btn {
    display: inline-block;
    margin-top: 10px;
    color: #c0392b;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid #c0392b;
    padding-bottom: 2px;
}

/* スマホ用調整 */
@media (max-width: 768px) {
    .price-alert-inner {
        padding: 20px 15px;
    }
    .pa-lead {
        font-size: 15px;
    }
    .sp-only {
        display: block; /* スマホで改行させる */
    }
}



/* 自分で設置、施工店依頼分岐セクション */
/* 全体コンテナ */
#nk-price-split {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #3f3f3f;
  line-height: 1.6;
  background-color: #fff; /* 背景色に合わせて調整 */
  padding: 40px 0;
}

#nk-price-split * { box-sizing: border-box; }

#nk-price-split .nk-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 外枠のボックス */
#nk-price-split .nk-box {
  background: #fdfaf5; /* サイトのベージュ系に合わせる */
  border: 2px solid #e9e0d5;
  border-radius: 20px;
  padding: 40px;
}

/* ヘッダー部分 */
#nk-price-split .nk-header {
  text-align: center;
  margin-bottom: 30px;
}

#nk-price-split .nk-kicker {
  display: inline-block;
  color: #a68b6d;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

#nk-price-split .nk-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 15px 0;
  color: #4a362a;
}

#nk-price-split .nk-title strong {
  color: #d35400; /* 強調色 */
  font-size: 1.2em;
}

#nk-price-split .nk-title small {
  font-size: 14px;
  font-weight: normal;
  color: #888;
}

#nk-price-split .nk-sub {
  font-size: 15px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

/* グリッドレイアウト */
#nk-price-split .nk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 30px;
}

/* カードスタイル */
#nk-price-split .nk-card {
  background: #fff;
  border: 1px solid #e0d8cf;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#nk-price-split .nk-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* バッジ（緑/黄） */
#nk-price-split .nk-badge {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 15px;
  width: fit-content;
}

#nk-price-split .nk-direct .nk-badge {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

#nk-price-split .nk-pro .nk-badge {
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffecb3;
}

/* 価格表示 */
#nk-price-split .nk-price-range {
  font-size: 14px;
  margin-bottom: 10px;
  color: #555;
}
#nk-price-split .nk-price-range strong {
  font-size: 20px;
  color: #333;
}

#nk-price-split .nk-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

#nk-price-split .nk-desc {
  font-size: 14px;
  color: #777;
  margin-bottom: 25px;
  flex-grow: 1;
}

/* ボタンデザイン */
#nk-price-split .nk-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
  padding: 16px 20px;
  border-radius: 50px;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#nk-price-split .nk-btn::after {
  content: '→';
  margin-left: 8px;
  transition: transform 0.3s ease;
}

#nk-price-split .nk-btn:hover::after {
  transform: translateX(5px);
}

/* 直販ボタン（メインアクション） */
#nk-price-split .nk-btn-direct {
  background: #5d4037;
  color: #fff;
  box-shadow: 0 4px 15px rgba(93, 64, 55, 0.3);
}

#nk-price-split .nk-btn-direct:hover {
  background: #4a332c;
  filter: brightness(1.1);
}

/* 施工店ボタン（サブアクション/相談） */
#nk-price-split .nk-btn-pro {
  background: #fff;
  color: #5d4037;
  border: 2px solid #5d4037;
}

#nk-price-split .nk-btn-pro:hover {
  background: #5d4037;
  color: #fff;
}

/* 注釈 */
#nk-price-split .nk-note {
  border-top: 1px dashed #d1c4b9;
  padding-top: 20px;
  font-size: 12px;
  color: #888;
}

#nk-price-split .nk-note p {
  margin: 4px 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
  #nk-price-split .nk-box { padding: 30px 20px; }
  #nk-price-split .nk-grid { grid-template-columns: 1fr; gap: 20px; }
  #nk-price-split .nk-title { font-size: 22px; }
  #nk-price-split .nk-card { padding: 25px; }
  #nk-price-split .nk-btn { padding: 14px 15px; font-size: 15px; }
}
#nk-price-split .nk-title {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;
  gap: 4px;
}

#nk-price-split .nk-title-sub {
  display: inline-block;
  font-size: 13px; /* 小さくする */
  font-weight: normal;
  color: #888;
  background: #eee; /* 薄いグレーの背景でラベル風に */
  padding: 2px 8px;
  border-radius: 4px;
}

@media (min-width: 769px) {
  #nk-price-split .nk-title {
    flex-direction: row; /* PCでは横並びに戻す */
    justify-content: center;
    align-items: baseline;
  }
}


/* /GPTテスト */


#nyanguard-root {
  padding-top: 120px;
}

/* にゃんがーど埋め込みページ: 祖先の overflow / contain が sticky を無効化しやすいので緩和 */
.site-main:has(#nyanguard-root),
.site-main:has(#nyanguard-root) .entry-content,
.entry-content:has(#nyanguard-root),
article:has(#nyanguard-root),
#primary:has(#nyanguard-root),
#main:has(#nyanguard-root),
.content-area:has(#nyanguard-root),
section.content-area:has(#nyanguard-root) {
	overflow: visible !important;
	contain: none !important;
}

.container:has(#nyanguard-root) {
	overflow: visible !important;
}

#nyanguard-root,
#nyanguard-root .nyg-layout {
	overflow: visible !important;
	contain: none !important;
}

/* PC: 診断2カラムの幅確保（本文が右サマリーと重ならないよう左カラムをクリップ） */
@media (min-width: 960px) {
	#nyanguard-root .nyg-layout {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 390px) !important;
		grid-template-areas: "main side" !important;
		gap: 24px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	#nyanguard-root .nyg-editorCol {
		grid-area: main !important;
		min-width: 0 !important;
		max-width: 100% !important;
		overflow-x: clip !important;
	}
	#nyanguard-root .nyg-sideCol {
		grid-area: side !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	#nyanguard-root #nyg_diag_sticky_card {
		z-index: auto !important;
	}
}

/* --- nyanguard 見積ツール：A/B/C 3大ブロック（HTML は ui.js renderInputs と同期） --- */
#nyanguard-root .nyg-editorCol {
	max-width: 800px !important;
}
#nyanguard-root .nyg-est-block {
	background: #fff;
	border: 1px solid rgba(58, 47, 42, 0.1);
	border-radius: 18px;
	box-shadow: 0 10px 36px rgba(42, 36, 28, 0.08);
	padding: 22px 20px 20px;
	margin: 0 0 20px;
	box-sizing: border-box;
}
#nyanguard-root .nyg-est-block--proposal {
	padding: 16px 14px 18px;
}
#nyanguard-root .nyg-est-block--after-proposal {
	padding: 18px 16px 20px;
}
#nyanguard-root .nyg-est-block--after-proposal > .nyg__panel {
	background: transparent;
	border: none;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}
#nyanguard-root .nyg-est-block--after-proposal > .nyg__panel + .nyg__panel {
	margin-top: 14px;
}
#nyanguard-root #nyg_est_intro_wrap .nyg__hero--phase1 {
	background: transparent !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
#nyanguard-root #nyg_est_intro_wrap .nyg__quickDivider {
	display: none;
}
#nyanguard-root.nyg--estUiRefine #nyg_est_intro_wrap .nyg__hero--phase1.nyg__hero--tierUi {
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
#nyanguard-root #nyg_condition_input_wrap > section > .nyg__row.nyg_sectionCard.nyg__sectionCard--visual {
	padding: 0 !important;
}
#nyanguard-root #nyg_condition_input_wrap > section > .nyg__row + .nyg__row {
	margin-top: 20px;
}
#nyanguard-root #nyg_condition_input_wrap #nyg_q3_foothold .nyg__footholdOpt,
#nyanguard-root #nyg_condition_input_wrap #nyg_q_cat_behavior .nyg__catBehOpt {
	background: #f6f4f1 !important;
	border-color: rgba(58, 47, 42, 0.12) !important;
	box-shadow: none !important;
}
#nyanguard-root #nyg_condition_input_wrap #nyg_q3_foothold .nyg__footholdOpt:has(input:checked),
#nyanguard-root #nyg_condition_input_wrap #nyg_q_cat_behavior .nyg__catBehOpt:has(input:checked) {
	background: #eef2e9 !important;
	border-color: #5c6b4a !important;
	box-shadow: 0 0 0 2px rgba(92, 107, 74, 0.12) !important;
}
@media (max-width: 959px) {
	#nyanguard-root .nyg-sideCol .nyg__stickyTrustBullets {
		display: none;
	}
}




.nyg-card-payment-mini {
  max-width: 980px;
  margin: 18px auto 8px;
  padding: 11px 18px;
  border: 1px solid #e6dccd;
  border-radius: 999px;
  background: #faf7f1;
  color: #6b4b2f;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 3px 10px rgba(80, 60, 35, 0.04);
  letter-spacing: .02em;
}

.nyg-card-payment-mini__main {
  font-weight: 700;
  color: #5f3f25;
}

.nyg-card-payment-mini__sub {
  margin-left: 6px;
  font-size: 12px;
  opacity: .82;
}

.nyg-card-payment-mini__note {
  margin-left: 10px;
  font-size: 13px;
  color: #9b5a2b;
  font-weight: 700;
}

.nyg-card-payment-mini strong {
  font-size: 15px;
  color: #a24d1d;
}





/*商品ページカート周辺GPT*/
/* クレカ案内：float画像の裏に潜らないようにする */
#cart .cart-info .nyg-cardpay-note {
  display: flow-root;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box;
  margin: 12px 0 14px;
  padding: 11px 13px;
  border-left: 4px solid #b68a2c;
  background: #fbf7ee;
  color: #5a3b23;
  font-size: 13px;
  line-height: 1.7;
  overflow: hidden;
}

#cart .cart-info .nyg-cardpay-note__main {
  margin: 0 0 4px;
  font-weight: 800;
}

#cart .cart-info .nyg-cardpay-note__sub {
  margin: 0;
}

#cart .cart-info .nyg-cardpay-note strong {
  color: #a24418;
  font-weight: 800;
}

/* カートボタン：既存JSは触らず見た目だけ調整 */
#cart .cart-info .nyg-product-cart-form {
  display: flow-root;
  margin: 14px 0 10px;
  text-align: left;
  overflow: hidden;
}

#cart .cart-info .nyg-product-cart-form input[type="button"] {
  display: block;
  width: 100%;
  max-width: 340px;
  min-height: 52px;
  padding: 14px 24px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #d6aa37 0%, #a87818 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(120, 78, 20, .28);
  -webkit-appearance: none;
  appearance: none;
}

/* 注意書きも画像裏に潜らせない */
#cart .cart-info .cart-note {
  display: flow-root;
  overflow: hidden;
}

#cart .cart-info .nyg-product-cart-form input[type="button"]:hover {
  opacity: .92;
  transform: translateY(-1px);
}
@media screen and (max-width: 768px) {
  #cart .cart-info .nyg-product-cart-form input[type="button"] {
    max-width: none;
    min-height: 56px;
    font-size: 16px;
  }
}







/* 猫の安全診断バナー */
.top-diagnosis-banner {
  padding: 56px 16px 64px;
  background: #fffaf4;
}

.top-diagnosis-banner__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.top-diagnosis-banner__link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(80, 54, 32, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.top-diagnosis-banner__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(80, 54, 32, 0.18);
  opacity: 0.96;
}

.top-diagnosis-banner img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .top-diagnosis-banner {
    padding: 36px 12px 44px;
  }

  .top-diagnosis-banner__link {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(80, 54, 32, 0.14);
  }
}


/* 猫の安全診断バナー */
.top-diagnosis-banner {
  padding: 56px 16px 64px;
  background: #fffaf4;
}

.top-diagnosis-banner__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.top-diagnosis-banner__link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(80, 54, 32, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.top-diagnosis-banner__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(80, 54, 32, 0.18);
  opacity: 0.96;
}

.top-diagnosis-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ */
@media (max-width: 767px) {
  .top-diagnosis-banner {
    padding: 28px 10px 36px;
  }

  .top-diagnosis-banner__inner {
    max-width: 430px;
  }

  .top-diagnosis-banner__link {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(80, 54, 32, 0.14);
  }
}


/* 猫の安全診断ミニバナー */
.top-diagnosis-mini {
  padding: 18px 14px 14px;
  background