@charset "utf-8";

:root {
	--width-pc-display: 980px;
	--width-sp-min-display: 375px;

	--main-theme-color:    #2e5293;
	--sub-theme-color:     #3AAFD5; /* #90ee90 */
	--sub-theme-color-txt: #ffffff;
	--main-theme-color-bg: #d9d9d9;

	--global-nav-height:   100px;

	--base-blogs-font-size:     14px;
	--base-blogs-font-weight:   700;
	--base-blogs-font-color:    #000000;
	--base-blogs-bg-color:      #ffffff;
	--base-blogs-border-color:  solid 1px #888888;
	--compact-blogs-font-size:  12px;
	--contrast-blogs-font-color:#ffffff;
	--contrast-blogs-bg-color:  #000000;
	--others-blogs-bg-color:    #ffffff;
	--others-blogs-boder-color: solid 1px #000000;
}
ul.breadcrumbs {
	display: flex;
	padding: 10px 2%;
	margin: 0;
}
ul.breadcrumbs > li {
	display: block;
	font-size: var(--compact-font-size);
}
ul.breadcrumbs > li + li {
	margin-left: 3px;
}
ul.breadcrumbs > li + li::before {
	content: "＞";
	margin-right: 3px;
}
a:hover,
a:link,
a:visited {
	color: #000000;
}

main .button-primary,
main .button-secondary {
	width: 240px;
	margin: 0 auto 10px;
}
main .button-primary a {
	position: relative;
	display: block;
	padding: 10px;
	background: var(--button-important-color);
	border: 1px solid var(--button-important-color);
	color: #ffffff;
	text-align: center;
}
main .button-primary a:hover {
	background: #ffffff;
	color: var(--theme-important-color);
	text-decoration: none;
}
main .button-secondary a {
	position: relative;
	display: block;
	padding: 10px;
	background: var(--button-secondary-color);
	border: 1px solid var(--button-secondary-color);
	color: #ffffff;
	text-align: center;
}
main .button-secondary a:hover {
	background: #ffffff;
	color: var(--theme-secondary-color);
	text-decoration: none;
}
main .button-primary a i.fas,
main .button-secondary a i.fas {
	position: absolute;
	top: calc(50% - var(--base-font-size)/2);
	right: 4%;
}
main section .button-others {
	width: 180px;
	margin: 0 auto 10px;
}
main section .button-others a {
	position: relative;
	display: block;
	padding: 5px;
	background: #333333;
	border: 1px solid #333333;
	color: #ffffff;
	text-align: center;
}
main section .button-others a:hover {
	background: #ffffff;
	color: #333333;
	text-decoration: none;
}
main section .button-others a i.fas {
	position: absolute;
	top: calc(50% - 8px);
	right: 3%;
}
.only-pc {
	display: none;
}

/* ---------- ページ内アンカー ---------- */
section.navigation {
	width: 100%;
	max-width: 980px;
	margin: 0 auto 45px;
	padding: 0;
}
section.navigation .page-anchors ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
section.navigation .page-anchors ul li {
	width: 33%;
}
section.navigation .page-anchors ul li a {
	position: relative;
	width: 100%;
	min-height: 42px;
	display: block;
	background: var(--sub-theme-color);
	text-align: center;
	padding: 3px 0 0;
}
section.navigation .page-anchors ul li a span {
	font-size: 15px;
	font-weight: bold;
	color: var(--sub-theme-color-txt);
}
section.navigation .page-anchors ul li a:hover {
	text-decoration: none;
	background: var(--sub-theme-color-txt);
}
section.navigation .page-anchors ul li a:hover span {
	color: var(--sub-theme-color);
}
section.navigation .page-anchors ul li a::before,
section.navigation .page-anchors ul li a::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
}
section.navigation .page-anchors ul li a::before {
	width: calc(100% - 4px);
	height: 10px;
	bottom: 2px;
	left: 2px;
	background: var(--sub-theme-color-txt);
}
section.navigation .page-anchors ul li a::after {
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid var(--sub-theme-color);
	bottom: 3px;
	left: calc(50% - 4px);
}
section.navigation .page-anchors ul li a:hover::before {
	background: var(--sub-theme-color);
}
section.navigation .page-anchors ul li a:hover::after {
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid var(--sub-theme-color-txt);
}

/* ---------- 下層ページ遷移パネル ---------- */
section.panel-links {
	width: 100%;
	max-width: 980px; /* 他要素に合わせるなら730px */
	margin: 0 auto 45px;
	padding: 0 3px;
	box-sizing: border-box;
}
section.panel-links ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* SP: 2カラム（モバイルファースト） */
	gap: 3px;
	list-style: none;
	padding: 0;
	margin: 0;
}
section.panel-links ul li {
	margin: 0;
}
/* リンクをコンテナ化（オーバーレイ/キャプション基準） */
section.panel-links ul li a {
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
section.panel-links ul li figure {
	margin: 0;
	padding: 0;
	width: 100%;
}
/* 画像は領域を覆う（トリミング）*/
section.panel-links ul li figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
	line-height: 0;
}
/* ホバー時のオーバーレイ（疑似要素） */
/* 初期は透明。ホバー/フォーカスで透過黒が出る */
section.panel-links ul li a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0); /* 初期透明 */
	transition: background .22s ease;
	z-index: 1;               /* キャプションの下に配置 */
	pointer-events: none;     /* クリックを邪魔しない */
}
section.panel-links ul li .page-name {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;              /* オーバーレイより上 */
	pointer-events: none;    /* 親リンククリックを邪魔しない */
}
section.panel-links ul li .page-name span {
	width: 135px;
	pointer-events: auto;             /* span上でクリック可能（リンク遷移） */
	display: inline-block;
	background: rgba(0,0,0,0.50);     /* spanの透過黒（オーバーレイと同一） */
	color: #fff;
	padding: 5px 6px;
	border-radius: 20px;
	font-size: 15px;
	font-weight: 600;
	max-width: 90%;
	text-align: center;
	white-space: normal;              /* モバイルは折返し可 */
	transition: background .18s ease, color .18s ease;
}
/* ホバー／フォーカスでオーバーレイ表示＆spanの背景を none にする */
section.panel-links ul li a:hover::before,
section.panel-links ul li a:focus-visible::before {
	background: rgba(0,0,0,0.50);
}
section.panel-links ul li a:hover .page-name span,
section.panel-links ul li a:focus-visible .page-name span {
	background: none;
}
/* キーボードフォーカスの視認性向上 */
section.panel-links ul li a:focus-visible {
	outline: 3px solid #ffd54f;
	outline-offset: 4px;
}
section.panel-links ul li a.coming-soon::before {
	background: rgba(0,0,0,0.50);
}
section.panel-links ul li a.coming-soon .page-name span {
	background: none;
}

/* PC側の調整（min-width: 769px で 3カラム） */
@media (min-width: 769px) {
	:root {
		--global-nav-height: 75px;
	}
	section.navigation {
		width: 100%;
	}
	section.navigation .page-anchors ul li a span {
		font-size: 16px;
	}
	section.panel-links {
		padding: 0;
	}
	section.panel-links ul {
		grid-template-columns: repeat(3, 1fr); /* PC: 3カラム */
		gap: 5px;
	}
	/* PCではキャプションを折り返さない（見た目重視なら保持） */
	section.panel-links ul li .page-name span {
		width: 140px;
		font-size: 18px;
		white-space: nowrap;
	}
}

/*----------   検索ボックス   ----------*/

section#search-product .search-box {
	position: relative;
	width: 360px;
	padding-top: 30px;
	margin: 0 auto 45px;
	background: #ffffff;
}
section#search-product .search-box .tabs {
	position: absolute;
	top: -14px;
	width: 350px;
	background: #ffffff;
	display: flex;
	flex-wrap: nowrap;
}
section#search-product .search-box .tabs > label {
	display: block;
	width: 175px;
	cursor: pointer;
	border: solid 1px #d9d9d9;
	border-bottom: none;
	padding: 10px;
	font-weight: bold;
	text-align: center;
}
/*
section#search-product .search-box .tabs > label:hover,
section#search-product .search-box .tabs > label:has(:checked) {
	background: #2589d0;
    color: #ffffff;
}
*/
section#search-product .search-box .tabs input[type="radio"] {
	display: none;
}
section#search-product .search-box .tabs input[type="radio"] + label {
	background: #376F96;
	color: #ffffff;
}
section#search-product .search-box .tabs input[type="radio"]:checked + label {
	background: #ffffff;
	color: #000000;
}
section#search-product .search-box > .panel {
	width: 100%;
	padding: 10px;
	border: solid 1px #d9d9d9;
	box-sizing: border-box;
}
section#search-product .search-box > .panel h4 {
	width: 100%;
}
section#search-product .search-box > .panel .size,
section#search-product .search-box > .panel .vehicle-types {
	margin-bottom: 25px;
}
section#search-product .search-box > .panel .size select {
	width: 90px;
	height: 30px;
	font-size: 14px;
	text-align: center;
	background: #ffffff;
	border: solid 1px #195178;
	border-radius: 3px;
	color: #000000;
}
section#search-product .search-box > .panel .size select:focus,
section#search-product .search-box > .panel .vehicle-types > label input:focus,
section#search-product .search-box > .panel .freeword input:focus {
	outline: none;
}
section#search-product .search-box > .panel .vehicle-types > label {
	display: inline-block;
	width: 109px;
	height: 30px;
	border: solid 1px #195178;
	border-radius: 3px;
	padding: 5px 0 5px 3px;
	box-sizing: border-box;
	font-size: 14px;
}
section#search-product .search-box > .panel .vehicle-types > label input {
	margin-right: 2px;
}
section#search-product .search-box > .panel .vehicle-types + h4,
section#search-product .search-box > .panel.conditions-wheel .size + h4 {
	display: none; /* debug:20231115 */
} 
section#search-product .search-box > .panel .freeword {
	display: none; /* debug:20231115 */
}
section#search-product .search-box > .panel .freeword input {
	width: 100%;
	height: 30px;
}
section#search-product .search-box > .panel .search-button {
	display: block;
	width: 180px;
	margin: 15px auto;
	padding: 0;
	border: none;
}
section#search-product .search-box > .panel .search-button input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	background: #da0011;
	border: solid 1px #da0011;
	padding: 10px;
}
section#search-product .search-box > .panel .search-button input:hover {
	cursor: pointer;
	background: #ffffff;
	color: #da0011;
}
section#search-product .search-box > .panel.conditions-wheel .size label {
	display: inline-block;
	padding: 3px 5px;
	margin-right: 10px;
	font-size: 15px;
}
section#search-product .search-box > .panel.conditions-wheel .size label input {
	margin-right: 3px;
}
section#search-product .search-box > .panel.conditions-wheel .size label input:focus {
	outline: none;
}

.tabs input[type="radio"]:checked ~ .panel {
	display: none;
}
#tabs01:checked ~ #panel01,
#tabs02:checked ~ #panel02 {
	display: block;
}

/*------------------------------------*/

main section h2 {
	position: relative;
    font-size: 22px;
    text-align: center;
    padding: 0 0 12px 0;
    margin: 0 0 45px 0;
}
main section h2:before,
main section h2:after {
	position: absolute;
    display: block;
    content: "";
    width: 14px;
    height: 2px;
    bottom: 0;
}
main section h2:before {
	background: #da0011;
    left: calc(50% - 14px);
}
main section h2:after {
	background: #0d0d0f;
    right: calc(50% - 14px);
}
section {
	margin-bottom: 45px;
}
/*-- --*/
main .key-visual {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 45px;
    padding-top: 0;
}
main .swiper-container {
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
}
main .key-visual a:hover img {
	opacity: 0.8;
}
main .key-visual .swiper-container .swiper-wrapper {
    width: 100%;
}
main .key-visual .swiper-container .swiper-wrapper img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
/*    height: 384px; */
    text-align: center;
    background: #333333;
    border: solid 3px #ffffff;
    box-sizing: border-box;
}
main .swiper-button-prev,
main .swiper-button-next {
    width: 24px;
    height: 48px;
    background: rgba(255,255,255,0.7);
    top: calc(50% - 19.5px);
}
main .swiper-button-prev:after,
main .swiper-button-next:after {
    font-size: 20px;
    color: #333333;
}
main .swiper-button-prev,
main .swiper-rtl .swiper-button-next {
    left: 0;
}
main .swiper-button-next,
main .swiper-rtl .swiper-button-prev {
    right: 0;
}
main .swiper-pagination-fraction,
main .swiper-pagination-custom,
main .swiper-horizontal > .swiper-pagination-bullets,
main .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
}
main .swiper-pagination-bullet-active {
    background-color: #333333;
}
main .key-visual {
	position: relative;
}
main .key-visual h1 {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 160px; /* summer:135px winter:160px */
	padding: 3px 0 5px 0;
	display: inline-block;
	text-align: right;
	font-size: 12px;
	font-weight: bold;
	background: rgb(144,238,144,0.7); /* rgb(3,255,255,0.7); */
	color: #ffffff;
	text-shadow: 2px 1px rgb(0,0,0,0.5);
	border-left: solid 1px #333333;
	border-bottom: solid 1px #333333;
	border-radius: 0 0 0 7px;
	z-index: 3;
}
main .key-visual h1 {
	margin: 0;
}
main .key-visual h1 span {
	display: inline-block;
}
main .key-visual .intro {
	display: none;
	width: calc(100% - 6px);
	position: absolute;
	bottom: 3px;
	right: 3px;
	padding: 5px;
	background: rgba(0,0,0,0.5);
}
main .key-visual .intro .named {
	font-size: 16px;
	font-weight: bold;
    color: #ffffff;
    padding-bottom: 5px;
    margin: 7px 0px;
    border-bottom: 1px solid #ffffff;
}
main .key-visual .intro h1,
main .key-visual .intro .description {
	font-size: 14px;
	color: #ffffff;
	margin: 0;
}
main .key-visual .intro .description span {
	display: inline-block;
}
main .key-visual .swiper-slide {
	max-width: 684px;
	background: #ffffff;
}
main .button-container {
	margin-bottom: 45px;
}
section.links {
	width: 375px;
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
	margin: 15px auto 0;
}
section.links > div.bnr {
	width: 375px;
	margin-bottom: 10px;
}
section.links > div.bnr a {
	display: block;
}
section.links > div.bnr a .link-disc {
	text-align: center;
}
section.links > div.bnr img {
	width: 100%;
	vertical-align: top;
}
section.vehicle-types {
	width: 375px;
	margin: 0 auto 45px;
}
section.vehicle-types > div.swiper-container {
	overflow: hidden;
	position: relative;
	background: var(--main-theme-color-bg);
	padding: 15px 0;
}
section.vehicle-types .swiper-wrapper {
	width: 100%;
}
section.vehicle-types .swiper-container .swiper-wrapper .swiper-slide img {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
section.vehicle-types .swiper-container .swiper-wrapper .swiper-slide a {
	width: 100%;
	position: relative;
	text-align: center;
}
section.vehicle-types .swiper-container .swiper-wrapper .swiper-slide a span {
	display: inline-block;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 3px 0;
	background: rgba(0,0,0,0.5);
	color: #ffffff;
	font-size: 14px;
}
section.vehicle-types .swiper-container .swiper-wrapper .swiper-slide a span em {
	display: inline-block;
	font-style: normal;
}
section.vehicle-types .swiper-container .swiper-wrapper .swiper-slide a.coming-soon {
	position: relative;
}
section.vehicle-types .swiper-container .swiper-wrapper .swiper-slide a.coming-soon:before {
	content: 'Coming Soon...';
	position: absolute;
	top: calc(50% - 10px);
	left: 0;
	display: inline-block;
	width: 100%;
	color: #ffffff;
	text-shadow: 1px 1px 3px #000000;
	z-index: 3;
}
section.vehicle-types .swiper-container .swiper-wrapper .swiper-slide a.coming-soon:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 100%;
	height: 100%;
	background: rgb(0,0,0,0.2);
	z-index: 2;
}
section.vehicle-types .swiper-button-prev {
	left: 0;
}
section.vehicle-types .swiper-button-next {
	right: 0;
}
section.vehicle-types .swiper-button-prev,
section.vehicle-types .swiper-button-next {
    width: 20px;
    height: 40px;
    background: rgba(255,255,255,0.7);
    top: calc(50% - 1.5px);
}
section.vehicle-types .swiper-button-prev:after,
section.vehicle-types .swiper-button-next:after {
    font-size: 20px;
    color: #333333;
}
section.vehicle-types .vehicle-links {
	width: 360px;
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
	margin: 15px auto 0;
}
section.vehicle-types .vehicle-links > li a {
	display: inline-block;
	width: 180px;
	text-align: center;
	padding: 7px 0;
	color: #000000;
}
section.vehicle-types .button-others {
	margin-top: 30px;
}
section.banner-links > ul {
	width: 360px;
	margin: 15px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	list-style-type: none;
	padding: 0;
}
section.banner-links > ul li {
	width: 176px;
}
section.banner-links > ul li a {
	display: block;
	margin: 0 2px 4px;
	text-align: center;
}
section.banner-links > ul li a img {
	width: 100%;
	height: auto;
	vertical-align: top;
	line-height: 0;
}
section.banner-links > ul li a span {
	font-size: 14px;
}
/*-- --*/
main .search-product {
	margin-bottom: 45px;
}
main .search-product .car-maker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 30px;
}
main .search-product .car-maker .domestic-car {
	width: 360px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 5px 0;
}
main .search-product .car-maker .domestic-car a {
	position: relative;
	display: inline-block;
	width: 120px;
	min-height: 100px;
	border-top: 1px solid #e4e6ec;
	border-left: 1px solid #e4e6ec;
	padding-top: 12px;
	box-sizing: border-box;
	text-align: center;
	font-size: var(--compact-font-size);
	color: var(--base-text-color);
}
main .search-product .car-maker .domestic-car a:nth-child(3n) {
	border-right: 1px solid #e4e6ec;
}
main .search-product .car-maker .domestic-car a:nth-child(n+7) {
	border-bottom: 1px solid #e4e6ec;	
}
main .search-product .car-maker .domestic-car a img {
	max-width: 80px;
}
main .search-product .car-maker .domestic-car a span {
	position: absolute;
	width: 100%;
	display: inline-block;
	left: 0;
	bottom: 1px;
}
main .search-product .car-maker .imported-car {
	width: 360px;
	display: flex;
    flex-wrap: wrap;
}
main .search-product .car-maker .imported-car a {
	display: inline-block;
	width: 180px;
	border-top: 1px solid #e4e6ec;
	border-left: 1px solid #e4e6ec;
	text-align: left;
	padding: 7px 0 7px 20px;
	font-size: var(--compact-font-size);
	color: var(--base-text-color);
}
main .search-product .car-maker .imported-car a:nth-child(even) {
	border-right: 1px solid #e4e6ec;
}
main .search-product .car-maker .imported-car a:nth-child(n+19) {
	border-bottom: 1px solid #e4e6ec;
}
main .search-product .car-maker .imported-car a i.fas {
	font-size: 12px;
	color: var(--button-important-color);
	margin-right: 3px;
}
main .search-product .car-maker .imported-car a:hover {
	background-color: #fae5e5;
	text-decoration: none;
}
/*
main .search-product .car-maker .domestic-car a:hover {
	background-color: #fae5e5;
	text-decoration: none;	
}
*/
main .search-product h3#search-wheelset {
	padding-top: 46px; /* debug: until 2022/03/14 */
}
main .search-product .tyre-maker {
	position: relative;
	width: 360px;
	margin: 0 auto 60px;
	display: flex;
    flex-wrap: wrap;
}
main .search-product .tyre-maker a {
	display: inline-block;
	width: 180px;
	border-top: 1px solid #e4e6ec;
	border-left: 1px solid #e4e6ec;
	text-align: left;
	padding: 7px 0 7px 20px;
	font-size: var(--compact-font-size);
	color: var(--base-text-color);
}
main .search-product .tyre-maker a:nth-child(even) {
	border-right: 1px solid #e4e6ec;
}
main .search-product .tyre-maker a:nth-child(n+21) {
	border-bottom: 1px solid #e4e6ec;
}
main .search-product .tyre-maker a i.fas {
	font-size: 12px;
	color: var(--button-important-color);
	margin-right: 3px;
}
main .search-product .tyre-maker a:hover {
	background-color: #fae5e5;
	text-decoration: none;
}
/*
main .search-product .tyre-maker a:nth-child(n+9) {
	display: none;
}
*/
main .search-product .tyre-maker a.button-more {
	position: absolute;
	display: block;
	width: 100%;
	bottom: -34px;
	left: 0;
	text-align: center;
	font-weight: bold;
	color: #000000;
	border: 1px solid #e4e6ec;
	background: #e4e6ec;
}
main .search-product .tyre-maker a.button-more i.fas {
	margin-left: 10px;
	color: #000000;
}
main .search-product h3 {
/*	width: 360px; */
	text-align: left;
	margin: 0 auto 15px;
}
main .search-product h4 {
	width: 360px;
	font-size: 14px;
	font-weight: normal;
	color: #7d7d7d;
	text-align: left;
	margin: 0 auto 5px;
}

main .search_title {
/*	width: 360px; */
	font-size: 14px;
	font-weight: normal;
	color: #7d7d7d;
	text-align: left;
	margin: 0 auto 5px!important;
}

main section.search-size .links {
	display: flex;
	flex-wrap: wrap;
}
main section.search-size .links .button {
	width: 175px;
	margin: 7px 5px;
}
section.vehicle-types .vehicle-links,
section.vehicle-types .vehicle-banners {
	width: 360px;
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
	margin: 30px auto 0;
}
section.vehicle-types .vehicle-banners {
	justify-content: center;
}
section.vehicle-types .vehicle-links > li a {
	display: inline-block;
	width: 180px;
	text-align: center;
	padding: 7px 0;
	color: #000000;
}
section.vehicle-types .vehicle-banners > li a {
	display: inline-block;
	width: 360px;
	padding: 7px 0;
	vertical-align: top;
	line-height: 0;
}
section.vehicle-types .vehicle-banners > li a img {
	width: 100%;
	height: auto;
}
section.vehicle-types .vehicle-banners > li a img:hover {
	opacity: 0.8;
}
main section.topics {
	width: 100%;
	padding: 20px 0;
	margin-bottom: 45px;
	background: #515E6E; /* 候補：#99A0B3、#576969 */
	color: #ffffff;
}
main section.topics .detail {
	width: 360px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
main section.topics .detail .bnr {
	width: 360px;
}
main section.topics .detail .link {
	width: 360px;
	margin-top: 10px;
}
main section.topics .detail .link .button-others a {
	border: 1px solid #ffffff;
}
main section.topics .detail .lead {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
}
main section.topics a {
	display: block;
}
main section.topics a img {
	width: 100%;
	height: auto;
}
main section.topics a:hover img {
	opacity: 0.8;
}
main section.topics p {
	width: 360px;
	margin: 0 auto 30px;
	font-size: 14px;
	line-height: 1.3;
}

main section.campaign-banner {
	width: 90%;
	margin: 0 auto 15px;
	text-align: center;
}
main section.campaign-banner a {
	display: block;
}
main section.campaign-banner a:hover {
	opacity : 0.8;
}
main section.campaign-banner a img {
	width: 100%;
	vertical-align: top;
	line-height: 0;
}

main section.recommend {
	width: 100%;
	overflow: hidden;
}
main section.recommend .swiper-recommend {
	position: relative;
}
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide figure {
	position: relative;
	padding: 0;
	margin: 0;
}
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide figure img {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide figure em {
	font-style: normal;
	line-height: 1.2;
}
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide figure em.tire-size {
	display: inline-block;
	position: absolute;
	z-index: 2;
	right: 0;
	top: 0;
	padding: 3px;
	background: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	font-size: 15px;
}
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide figure em.product-name {
	display: inline-block;
	width: 100%;
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	padding: 5px;
	background: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	font-size: 14px;
}
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide figure em span {
	display: inline-block;
}
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide figure em span.price {
	display: block;
	text-align: right;
	font-size: 12px;
	font-weight: bold;
}
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide figure em span.price var {
/*
	color: var(--theme-important-color);
	text-shadow: #ffffff 1px 1px 1px;
*/
	font-style: normal;
	font-size: 18px;
	font-weight: bold;
}
main section.recommend .swiper-recommend .swiper-slide {
	border: 1px solid #dddddd;
	box-sizing: border-box;
}
main section.recommend .swiper-recommend .swiper-slide .button-links {
}
main section.recommend .swiper-recommend .swiper-slide .button-links a {
	display: block;
	width: 90%;
	margin: 10px auto;
	padding: 5px;
	background: var(--button-secondary-color);
	border: 1px solid var(--button-secondary-color);
	color: #ffffff;
	text-align: center;
}
main section.recommend .swiper-recommend .swiper-slide .button-links a:hover {
	background: #ffffff;
	color: var(--theme-secondary-color);
	text-decoration: none;
}
/*
main section.recommend .swiper-recommend .swiper-wrapper .swiper-slide a {
	display: block;
	width: 100%;
	position: relative;
	text-align: center;
}
*/
main section.recommend .swiper-recommend {
	padding-bottom: 30px;
}
main section.recommend .button-container {
	margin-top: 30px;
}
main .recommend .swiper-button-prev {
	left: -35px;
	background: none;
}
main .recommend .swiper-button-next {
	right: -35px;
	background: none;
}
main .recommend .swiper-button-prev:after,
main .recommend .swiper-button-next:after {
	font-size: 20px;
}

/* ---------- 記事リンク ---------- */
section.storeblogs {
	width: 360px;
	margin: 60px auto;
}
section.storeblogs .catch_copy {
	font-size: 15px;
	margin-bottom: 25px;
}
section.storeblogs .similar-articles {
	font-size: 14px;
	color: #000000;
	width: 100%;
	margin: 0 auto 15px;
}
section.storeblogs .similar-articles { position: relative; border: var(--base-blogs-border-color); padding: 20px; box-sizing: border-box; }
section.storeblogs .similar-articles a { display: flex; flex-wrap: wrap; justify-content: space-around; text-decoration: none; }
section.storeblogs .similar-articles .label { position: absolute; top: -6px; left: -6px; background: #000000; padding: 3px 5px; color: #ffffff; font-size: var(--compact-blogs-font-size); }
section.storeblogs .similar-articles .photo { width: 316px; }
section.storeblogs .similar-articles .photo img { width: 100%; height: auto; }
section.storeblogs .similar-articles a:hover { opacity: 0.8; }
section.storeblogs .similar-articles .detail { width: 316px; position: absolute; bottom: 20px; background: rgb(0,0,0,0.5); }
section.storeblogs .similar-articles .detail .title { position: relative; color: #ffffff; font-weight: var(--base-blogs-font-weight); margin-top: 10px; padding: 0 10px 7px; }
section.storeblogs .similar-articles .detail .title::after {
	content: '';
	border-top: 7px solid transparent;
	border-right: 7px solid #ffffff;
	border-bottom: 7px solid #ffffff;
	border-left: 7px solid transparent;
	position: absolute;
	bottom: 3px;
	right: 3px;
}
section.storeblogs .similar-articles .detail .title::before {
	content: '';
	width: 14px;
	height:1px;
	background: #ffffff;
	position: absolute;
	bottom: 12px;
	right: 5px;
	transform: rotate(-45deg);
}
section.storeblogs .similar-articles .detail .title span { display: inline-block; }
section.storeblogs .similar-articles .detail .description { display: none; font-size: var(--compact-blogs-font-size); margin: 12px 0 0; color: #888888; }
section.storeblogs .similar-articles .detail .con-button { width: 170px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); background: var(--others-blogs-bg-color); border: var(--others-blogs-boder-color); padding: 5px 10px!important; box-sizing: border-box; text-align: center; font-weight: var(--base-blogs-font-weight); }
section.storeblogs .similar-articles .detail .con-button.blog-link { display: none; }

/*-- タブレット／PC用スタイリング --*/
@media screen and (min-width:720px) {
	main section.recommend {
		width: 720px;
		margin: 0 auto 65px;
		padding: 0 20px;
		box-sizing: border-box;
		overflow: hidden;
	}
	main section.recommend .swiper-recommend {
		position: relative;
	}
	main section.campaign-banner {
		width: 652px;
	}
	main .search-product h3 {
		width: 720px;
		text-align: left;
	}
	main .search-product h4 {
		width: 720px;
	}

	main .search_title {
		font-size: 16px;
	}
	main .button-secondary a {
		padding: 7px 10px;
		font-size: 16px;
	}
	section#search-product .search-box {
		display: flex;
		flex-wrap: wrap;
		width: 720px;
		margin: 0 auto 45px;
		padding-top: 0;
	}
	section#search-product .search-box > .tabs {
		display: block;
		position: static;
		width: 120px;
	}
	section#search-product .search-box .tabs > label {
		width: 120px;
		height: 120px;
		padding-top: 35px;
		border: solid 1px #d9d9d9;
		border-right: none;
	}
	section#search-product .search-box .tabs > label span {
		display: inline-block;
	}
	section#search-product .search-box .tabs > label span.tab01 {
		padding-top: 12px;
	}
	section#search-product .search-box > .panel {
		position: relative;
		width: 600px;
		padding: 15px 15px 0 45px;
		border-left: none;
	}
	section#search-product .search-box > .panel h4 {
		font-size: 16px;
	}
	section#search-product .search-box > .panel .size select {
		width: 100px;
	}
	section#search-product .search-box > .panel.conditions-wheel .size label {
		font-size: 16px;
	}
	section#search-product .search-box > .panel .search-button {
		position: absolute;
		left: calc(50% - 90px);
		bottom: 3px;
	}
}
@media screen and (min-width:769px) {
	.only-pc {
		display: inline;
	}
	main section.campaign-banner {
		width: 652px;
	}
	main .button-container {
		display: flex;
		justify-content: center;
	}
	main .button-container > div {
		margin: 0 5px;
	}
	main .button-secondary a {
		padding: 7px 10px;
		font-size: 16px;
	}
	main .key-visual {
		width: 100%;
	}
	main .key-visual .intro {
		display: block;
		width: 320px;
		bottom: 3px;
		right: 3px;
	}
	main .swiper-container {
		padding-bottom:30px;
	}
	main .swiper-button-prev,
	main .swiper-button-next {
		width: 40px;
		height: 80px;
		top: calc(50% - 35px);
	}
	main .swiper-button-prev:after,
	main .swiper-button-next:after {
		font-size: 32px;
		color: #333333;
	}
	main .swiper-pagination {
		display: block;
	}
	main section.search-product {
		width: var(--width-pc-display);
		margin: 0 auto 65px;
	}
	main section.links {
		width: 760px;
	}
	main section.links > div.bnr {
		margin: 0 2px 5px;
	}
	main section.links > div.bnr a:hover {
		opacity: 0.8;
	}
	main section {
		margin-bottom: 90px;
	}
	main section h2 {
		font-size: 24px;
	}
	section.pickup .products .item {
		width: 750px;
		margin: 0 auto 30px;
	}
	section.pickup .products .item a {
		height: 150px;
		background-size: 750px 150px;
	}
	section.pickup .products .item a h3 {
		font-size: 32px;
		line-height: 150px;
	}
	section.pickup .products .item.active > a,
	section.pickup .products .item.active > a > h3 {
		height: 80px;
		line-height: 80px;
	}
	section.pickup .products .item .product-detail {
		padding: 7px 4px;
	}
	section.pickup .products .item .product-detail .only-sp {
		display: none;
	}
	section.pickup .products .item .product-detail .recommend {
		width: 240px;
	}
	section.pickup .products .item .product-detail .recommend > a {
		font-size: 22px;
	}
	section.pickup .products .item .product-detail .recommend > a var {
		font-size: 40px;
	}
	section.pickup .products .item .product-detail .recommend .name {
		font-size: 20px;
	}
	section.pickup .products .item .product-detail .recommend .inch,
	section.pickup .products .item .product-detail .recommend .size {
		font-size: 16px;
	}
	section.pickup .products .item .product-detail .recommend .plus-mark {
		width: 32px;
		height: 32px;
		border-radius: calc(32px / 2);
	}
	section.pickup .products .item .product-detail .recommend figure {
		width: 182px;
		margin: 20px auto 5px;
	}
	section.stores .description {
		font-size: 16px;
		color: #333333;
	}
	section.stores .detail {
		width: 750px;
	}
	section.vehicle-types {
		width: 750px;
		margin-bottom: 45px;
	}
	section.vehicle-types .vehicle-links {
		width: 540px;
	}
	section.vehicle-types .vehicle-banners {
		width: 750px;
	}
	section.vehicle-types .vehicle-banners > li a {
		width: 365px;
		margin: 0 5px;
	}
	section.banner-links > ul {
		width: 750px;
		margin: 30px auto 0;
	}
	section.banner-links > ul li {
		width: 246px;
	}
	section.banner-links > ul li a {
		margin-bottom: 10px;
	}
	section.banner-links > ul li a:hover {
		opacity: 0.8;
	}
	main .search-product h3#search-wheelset {
		padding-top: 55px; /* debug: until 2022/03/14 */
	}
	main .search-product .car-maker .domestic-car {
	    margin: 0 10px 0 0;
	}
	main .search-product .tyre-maker {
		width: 750px;
	}
	main .search-product .tyre-maker a.button-more {
		width: 725px;
	}
	main .search-product .tyre-maker a.button-more:hover {
		background: #ffffff;
	}
	main .search-product .tyre-maker a:nth-child(2n) {
		margin-right: 5px;
	}
	main .search-product .tyre-maker a:nth-of-type(19),
	main .search-product .tyre-maker a:nth-of-type(20) {
		border-bottom: 1px solid #e4e6ec;
	}
	main section.topics .detail {
		width: 750px;
	}
	main section.topics .detail .link {
		margin: 0 0 0 20px;
	}
	section#search-product .search-box {
		width: 730px;
		margin: 0 auto 45px;
		padding-top: 0;
	}
	section#search-product .search-box > .tabs {
		width: 120px;
	}
	section#search-product .search-box .tabs > label {
		width: 120px;
		height: 120px;
		padding-top: 35px;
		border: solid 1px #d9d9d9;
		border-right: none;
	}
	section#search-product .search-box .tabs > label.tab01 {
		padding-top: 40px;
	}
	section#search-product .search-box .tabs > label span {
		display: inline-block;
	}
	section#search-product .search-box > .panel {
		position: relative;
		width: 610px;
		padding: 15px 15px 0 45px;
		border-left: none;
	}
	section#search-product .search-box > .panel h4 {
		font-size: 16px;
	}
	section#search-product .search-box > .panel .size select {
		width: 100px;
	}
	section#search-product .search-box > .panel .search-button {
		position: absolute;
		left: calc(50% - 90px);
		bottom: 3px;
	}
	section#search-product .search-box > .panel.conditions-wheel .size label {
		font-size: 16px;
	}
	/* ---------- 記事リンク ---------- */
	section.storeblogs { width: 680px;}
	section.storeblogs .similar-articles { width: 680px;}
	section.storeblogs .similar-articles .photo { display: block; }
	section.storeblogs .similar-articles .detail { position: static; background: none; padding: 0 0 0 12px; }
	section.storeblogs .similar-articles .detail .title { color: #000000; padding: 0 0 7px 0; border-bottom: var(--base-blogs-border-color); }
	section.storeblogs .similar-articles .detail .title::after,
	section.storeblogs .similar-articles .detail .title::before { display: none; }
	section.storeblogs .similar-articles .detail .description { display: block; margin: 12px 0 38px; }
	section.storeblogs .similar-articles .detail .con-button { left: auto; right: 20px; transform: none; }
	section.storeblogs .similar-articles .detail .con-button.blog-link { display: block; }
	section.storeblogs .similar-articles a:visited .detail .title,
	section.storeblogs .similar-articles a:link .detail .title,
	section.storeblogs .similar-articles a:link .detail .con-button, 
	section.storeblogs .similar-articles a:visited .detail .con-button { color: #000000; }
	section.storeblogs .similar-articles a:hover .detail .con-button { background: #000000; color: #ffffff; }
}