/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20210719
*/

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

	
	/*-- ここまで --*/
}


/* =========================================================
Select Shop Smart Life
Luxury top page design for AFFINGER Child
Concept: Intelligent / Futuristic / High-end / Gorgeous
========================================================= */

/* ===== Luxury top page prototype ===== */

.top-hero-luxury {
margin: 0 auto 48px;
padding: 64px 32px;
background: linear-gradient(135deg, #0B1020 0%, #151821 70%, #0B1020 100%);
color: #ffffff;
border-bottom: 2px solid #C9A646;
}

.top-hero-luxury__inner {
max-width: 1080px;
margin: 0 auto;
}

.top-hero-luxury__label {
color: #C9A646;
font-size: 14px;
letter-spacing: 0.16em;
font-weight: 700;
margin-bottom: 18px;
}

.top-hero-luxury h1 {
color: #ffffff;
font-size: 42px;
line-height: 1.35;
margin: 0 0 22px;
font-weight: 700;
}

.top-hero-luxury__lead {
font-size: 17px;
line-height: 1.9;
margin-bottom: 28px;
}

.top-hero-luxury__buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
}

.top-hero-luxury__buttons a,
.top-cta-luxury a {
display: inline-block;
padding: 12px 24px;
border-radius: 999px;
background: #C9A646;
color: #ffffff;
font-weight: 700;
text-decoration: none;
}

.top-hero-luxury__buttons a:nth-child(2) {
background: transparent;
border: 1px solid #C9A646;
color: #C9A646;
}

.top-section-luxury {
max-width: 1080px;
margin: 0 auto 54px;
padding: 0 24px;
}

.top-section-luxury h2 {
margin: 0 0 24px;
padding: 14px 18px;
border-left: 6px solid #C9A646;
background: linear-gradient(90deg, #F8F6EF 0%, #FFFFFF 100%);
color: #111827;
font-size: 24px;
line-height: 1.5;
}

.top-category-grid,
.top-feature-grid {
display: grid;
gap: 18px;
}

.top-category-grid {
grid-template-columns: repeat(5, 1fr);
}

.top-feature-grid {
grid-template-columns: repeat(3, 1fr);
}

.top-category-card,
.top-feature-card {
display: block;
min-height: 150px;
padding: 22px;
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #ffffff;
color: #222222;
text-decoration: none;
box-shadow: 0 10px 26px rgba(11, 16, 32, 0.06);
}

.top-category-card:hover,
.top-feature-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(11, 16, 32, 0.1);
transition: 0.2s ease;
}

.top-category-card span,
.top-feature-card span {
display: block;
color: #C9A646;
font-size: 12px;
letter-spacing: 0.12em;
font-weight: 700;
margin-bottom: 10px;
}

.top-category-card strong,
.top-feature-card strong {
display: block;
color: #111827;
font-size: 18px;
margin-bottom: 10px;
}

.top-category-card p,
.top-feature-card p {
margin: 0;
color: #555555;
font-size: 14px;
line-height: 1.75;
}

.top-cta-luxury {
max-width: 1080px;
margin: 0 auto 64px;
padding: 34px 28px;
border: 1px solid #C9A646;
border-radius: 14px;
background: #FBF7EA;
text-align: center;
}

.top-cta-luxury h2 {
color: #111827;
font-size: 24px;
margin-bottom: 12px;
}

.top-cta-luxury p {
color: #444444;
line-height: 1.8;
margin-bottom: 22px;
}

/* ===== Luxury top page refinement ===== */

/* トップページ本文エリアを少し広く見せる */
.home .entry-content,
.page-id-412 .entry-content {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}

/* ヒーローを少し大きく */
.top-hero-luxury {
max-width: 920px;
margin: 32px auto 54px;
padding: 72px 42px;
border-radius: 0;
}

/* 注目カテゴリを読みやすいカード比率へ */
.top-category-grid {
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}

.top-category-card {
min-height: 170px;
padding: 24px 22px;
}

.top-category-card strong {
font-size: 19px;
line-height: 1.45;
}

.top-category-card p {
font-size: 14.5px;
line-height: 1.8;
}

/* おすすめ特集カードの余白調整 */
.top-feature-card {
min-height: 150px;
padding: 26px 24px;
}

/* CTAを少し横長に */
.top-cta-luxury {
max-width: 920px;
padding: 40px 34px;
}

/* ===== Home page one-column layout trial ===== */

/* トップページだけサイドバーを非表示 */
.home #side,
.home #sidebar,
.home aside,
.page-id-412 #side,
.page-id-412 #sidebar,
.page-id-412 aside {
display: none !important;
}

/* トップページだけ本文エリアを中央ワイド化 */
.home #main,
.home main,
.home .st-main,
.home .entry-content,
.page-id-412 #main,
.page-id-412 main,
.page-id-412 .st-main,
.page-id-412 .entry-content {
max-width: 1120px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* トップページの本文コンテナ幅を広げる */
.home #content,
.home .st-content,
.page-id-412 #content,
.page-id-412 .st-content {
max-width: 1180px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* ヒーローとCTAを少し広げる */
.home .top-hero-luxury,
.page-id-412 .top-hero-luxury,
.home .top-cta-luxury,
.page-id-412 .top-cta-luxury {
max-width: 1040px;
}

/* PCでは注目カテゴリを5列にする */
@media screen and (min-width: 961px) {
.home .top-category-grid,
.page-id-412 .top-category-grid {
grid-template-columns: repeat(5, 1fr);
}
}

/* ===== Responsive adjustment ===== */

@media screen and (max-width: 960px) {
.top-category-grid {
grid-template-columns: repeat(2, 1fr);
}

.top-feature-grid {
grid-template-columns: 1fr;
}

.top-hero-luxury {
max-width: none;
margin: 20px 16px 42px;
padding: 52px 24px;
}

.top-hero-luxury h1 {
font-size: 31px;
}
}

@media screen and (max-width: 600px) {
.top-category-grid {
grid-template-columns: 1fr;
}

.top-hero-luxury__buttons a {
width: 100%;
text-align: center;
}
}