@charset "UTF-8";

/* 省エネとは */
.main_image h1{ color: #a01e3c;}
@media screen and (min-width: 768px){
	.main_image h1{ top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.7); transform-origin: center;}
}
.zeh_p strong{ color: #a01e3c;}
.general_accent{ color: #a01e3c; font-weight: bold;}
.general_accent_red{ color: #d40000; font-weight: bold;}
.title6 { border-bottom: 1px solid #a01e3c}
.title6 strong{ color: #a01e3c;}
.title10{ background-color: #ecd2d8;}
.title12 strong{ color: #a01e3c;}
.title12::before { background-color: #a01e3c;}
.title13{ color: #a01e3c;}
.zeh_tb th{ background-color: #ecd2d8;}
.title10_plain{ background-color: transparent; border-radius: 0; color: #a01e3c; display: inline-block; justify-content: flex-start; align-items: flex-start; padding: 0; margin: 30px 0 15px 0; border-bottom: 0;}
.gx_table tr + tr td{ border-top: 1px solid #000;}
.gx_table{ width: 100%;}
.center_table{ margin: 0 auto;}
.double_rule{ border-top: 4px solid #a01e3c; border-bottom: 4px solid #a01e3c; height: 16px; margin: 120px 0 20px; width: 100%;}
.general_subtitle{ color: #a01e3c; font-size: 1.375rem; font-weight: bold; margin: 35px 0 15px;}
.general_highlight{ padding: 0; }

.shoe_tmp01{ text-align: center;}
.shoe_tmp01 img{ width: 50%; max-width: 964px; height: auto;}
@media screen and (min-width: 768px){
	#pg-index .contents{ border-top: 5px solid #a01e3c; padding: 25px 50px 50px;}
	.detail_title{ color: #a01e3c; margin: 0 0 40px 0;}

	.btn_flex{ display: flex; margin: 28px 30px 22px; gap: 12px;}
	.btn_flex a{ height: 95px; width: auto; flex: 1 1 0; min-width: 0; margin: 0;}
	
	.title13::before{ content: ""; background-image: url("../images/memo.png"); background-size: 62px 12px; width: 62px; height: 12px; position: absolute;}
	
	.main_image { border-bottom: 4px solid #048837;}
}
@media (min-width: 768px) and (max-width: 890px) {
    .btn_flex { margin: 36px 60px 0;}
}
@media (min-width: 768px) and (max-width: 1100px) {
	.btn_flex a{ height: auto; min-height: 95px; padding: 10px 8px;}
	.btn_flex a .btn_title{ font-size: 0.9375rem; line-height: 1.3;}
}
@media screen and (max-width: 767px) {
	#pg-index .contents{ border-top: 5px solid #a01e3c; padding: 0px 15px 30px;}
	.detail_title{ color: #a01e3c; margin: 20px 0;}

	.title13::before{ content: ""; background-image: url("../images/memo.png"); background-size: 62px 12px; width: 62px; height: 12px; position: absolute;}
}

/* PC tab */
.tab-area{ margin: 40px auto;}
.tab-header{ display: flex; justify-content: center; gap: 24px; border-bottom: 1px solid #ccc;}
.tab-btn{ min-width: 360px; padding: 16px 24px 14px; background: #f3f3f3; border: 1px solid #ccc; border-bottom: none; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
.tab-btn small{ margin-top: 4px; font-size: 13px; font-weight: normal; color: #999;}
.tab-btn.is-active{ background: #fff; margin-bottom: -1px; z-index: 2;}
.tab-btn.is-active small{ color: #a26eea;}
.tab-block{ padding: 24px;}
.tab-content{ display: none;}
.tab-content.is-active{ display: block;}
.tab-btn:not(.is-active):hover { background: #ecd2d8;}

/* SP tab */
@media screen and (max-width: 767px) {
.tab-area { width: 100%; margin: 24px 0; padding: 0 16px;}
.tab-header { display: flex; flex-direction: row; gap: 0; border-bottom: 1px solid #ccc; padding: 0; margin: 0 -3px;}
.tab-btn { flex: 1 1 0; min-width: 0; margin: 0 3px; padding: 6px 4px; font-size: 13px; text-align: center; border: 1px solid #ccc; border-bottom: none; box-sizing: border-box;}
.tab-btn.is-active { background: #fff; margin-bottom: -1px; z-index: 2;}
.tab-btn:not(.is-active):hover { background: #f3f3f3;}
.tab-block { padding: 16px 0;}
}

/* Tablet tab */
@media screen and (min-width: 768px) and (max-width: 1100px) {
.tab-area { width: 100%; margin: 32px 0; padding: 0 24px;}
.tab-header { display: flex; justify-content: center; gap: 12px; border-bottom: 1px solid #ccc; padding: 0;}
.tab-btn { min-width: 0; width: calc((100% - 24px) / 3); padding: 12px 10px 10px; font-size: 16px; text-align: center;}
.tab-btn small { margin-top: 4px; font-size: 12px;}
.tab-block { padding: 20px 0;}
}