/* ME-Q DESIGN */

/* =========================================================
ROOT
========================================================= */

:root{
--ink:#171717;
--text:#282828;
--muted:#77736c;
--paper:#f8f7f3;
--paper2:#f2f0ea;
--line:#dedbd4;
--white:#fff;
--max:1200px;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
color:var(--text);
background:var(--paper);
font-family:
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
"YuGothic",
"Noto Sans JP",
Arial,
sans-serif;

font-feature-settings:"palt";
letter-spacing:.05em;
}

a{
color:inherit;
text-decoration:none;
}

img{
display:block;
width:100%;
height:auto;
}

button,
input,
textarea{
font:inherit;
}

.container{
width:min(var(--max),calc(100% - 80px));
margin-inline:auto;
}


/* =========================================================
COMMON
========================================================= */

.kicker{
font-size:10px;
letter-spacing:.16em;
color:#8c8881;
text-transform:uppercase;
margin-bottom:8px;
}

.section-title{
font-family:
"Yu Mincho",
"Hiragino Mincho ProN",
"Noto Serif JP",
serif;

font-weight:600;
letter-spacing:.08em;
font-size:34px;
line-height:1.45;
margin:0;
}

.section-copy{
margin-top:18px;
font-size:13px;
line-height:2.1;
color:#615d57;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:36px;

min-width:230px;
height:58px;

padding:0 24px;

background:var(--ink);
color:#fff;

font-size:12px;
letter-spacing:.08em;

transition:.25s ease;
}

.btn::after{
content:"→";
font-size:18px;
line-height:1;
}

.btn:hover{
transform:translateY(-2px);
background:#333;
}


/* =========================================================
HEADER
========================================================= */

.site-header{
position:absolute;
z-index:20;

top:0;
left:0;
right:0;

height:72px;
}

.header-inner{
width:min(1320px,calc(100% - 48px));
height:100%;

margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

gap:30px;
}

.logo{
font-weight:800;
font-size:21px;
letter-spacing:.12em;
line-height:1;
}

.logo small{
display:block;
margin-top:7px;

font-size:5px;
letter-spacing:.28em;
font-weight:600;
text-align:center;

color:#6c6963;
}

.nav{
display:flex;
align-items:center;

gap:34px;

font-size:10px;
font-weight:600;
letter-spacing:.08em;
}

.nav a{
position:relative;
}

.nav a:not(.header-cta)::after{
content:"";

position:absolute;

left:0;
right:100%;
bottom:-6px;

height:1px;

background:var(--ink);

transition:.2s ease;
}

.nav a:not(.header-cta):hover::after{
right:0;
}

.header-cta{
background:var(--ink);
color:#fff;

padding:14px 20px;
}


/* =========================================================
HERO
========================================================= */

.hero{
min-height:620px;

position:relative;
overflow:hidden;

background:
radial-gradient(
circle at 19% 12%,
rgba(195,191,180,.20),
transparent 28%
),
linear-gradient(
180deg,
#f4f1ea 0%,
#f8f7f3 100%
);
}

.hero::before{
content:"";

position:absolute;
inset:0;

background:
linear-gradient(
120deg,
transparent 0 35%,
rgba(255,255,255,.48) 35.4% 36%,
transparent 36.4%
),
radial-gradient(
ellipse at 9% 6%,
rgba(111,104,88,.08),
transparent 36%
);

pointer-events:none;
}

.hero-inner{
min-height:620px;

display:grid;
grid-template-columns:48% 52%;
align-items:center;

position:relative;
z-index:2;
}

.hero-copy{
padding-top:46px;
max-width:520px;
}

.hero h1{
margin:0 0 30px;

font-family:
"Yu Mincho",
"Hiragino Mincho ProN",
"Noto Serif JP",
serif;

font-size:56px;
line-height:1.45;

font-weight:500;
letter-spacing:.16em;
}

.hero-sub{
font-family:
"Yu Mincho",
"Hiragino Mincho ProN",
"Noto Serif JP",
serif;

font-weight:600;

font-size:18px;
letter-spacing:.11em;

margin:0 0 27px;
}

.hero-desc{
max-width:400px;

font-size:14px;
line-height:2.1;

color:#504d48;

margin:0 0 28px;
}

.hero-visual{
align-self:stretch;
min-height:620px;

position:relative;
}

.hero-visual img{
width:110%;
height:100%;

object-fit:cover;
object-position:left center;

mix-blend-mode:multiply;
}

.hero-floor{
position:absolute;

left:0;
right:0;
bottom:0;

height:30%;

background:
linear-gradient(
180deg,
transparent,
rgba(224,220,212,.72)
);

z-index:-1;
}


/* =========================================================
SERVICES
========================================================= */

.services{
background:#fff;
padding:78px 0 84px;
text-align:center;
}

.services .section-title{
font-size:29px;
}

.services-intro{
max-width:520px;

margin:18px auto 0;

font-size:14px;
line-height:1.9;

color:#66615b;
}

.service-grid{
margin-top:42px;

display:grid;
grid-template-columns:repeat(4,1fr);

gap:38px 38px;

align-items:start;
}

.service-card{
min-height:168px;
padding:0 10px;
}

.service-card:nth-child(5){
grid-column:2;
}

.service-icon{
width:42px;
height:42px;

margin:0 auto 15px;

display:grid;
place-items:center;
}

.service-icon svg{
width:34px;
height:34px;

stroke:#5f5b55;
fill:none;

stroke-width:1.45;
}

.service-card h3{
font-family:
"Yu Mincho",
"Hiragino Mincho ProN",
"Noto Serif JP",
serif;

font-size:18px;
font-weight:600;

margin:0 0 12px;

letter-spacing:.08em;
}

.service-card p{
margin:0;

font-size:14px;
line-height:1.9;

color:#6c6862;
}


/* =========================================================
PRODUCT LINEUP
========================================================= */

.design-lineup{
padding:90px 0;
background:var(--paper);
}

.lineup-heading{
text-align:center;
margin-bottom:48px;
}

.lineup-heading .section-title{
font-size:30px;
}

.lineup-description{
max-width:620px;
margin:18px auto 0;
font-size:14px;
line-height:2;
color:#66615b;
}

.design-lineup-content{
width:100%;
min-width:0;
}

/* ME-Qの商品データをPHPで直接表示するDESIGN専用カード */
.design-products{
margin-top:52px;
}

.design-products-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:24px;
margin-bottom:24px;
padding-bottom:16px;
border-bottom:1px solid var(--line);
}

.design-products-head h3{
margin:0;
font-family:
"Yu Mincho",
"Hiragino Mincho ProN",
"Noto Serif JP",
serif;
font-size:22px;
font-weight:600;
letter-spacing:.08em;
}

.design-products-count{
font-size:10px;
color:#8c8881;
white-space:nowrap;
}

.design-product-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}

.design-product-card{
position:relative;
overflow:hidden;
background:#fff;
border:1px solid #ebe8e1;
transition:transform .25s ease, box-shadow .25s ease;
}

.design-product-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,.07);
}

.design-product-accent{
height:3px;
background:#d8d4cc;
}

.design-product-image{
display:block;
position:relative;
aspect-ratio:1/1;
overflow:hidden;
background:#f2f0eb;
}

.design-product-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease;
}

.design-product-card:hover .design-product-image img{
transform:scale(1.025);
}

.design-product-placeholder{
width:100%;
height:100%;
display:grid;
place-items:center;
font-size:10px;
color:#a19c94;
letter-spacing:.12em;
}

.design-product-body{
padding:17px 16px 18px;
}

.design-product-body h4{
margin:0 0 12px;
min-height:3.2em;
font-family:
"Yu Mincho",
"Hiragino Mincho ProN",
"Noto Serif JP",
serif;
font-size:13px;
font-weight:600;
line-height:1.6;
letter-spacing:.05em;
}

.design-product-meta{
display:flex;
align-items:end;
justify-content:space-between;
gap:10px;
min-height:38px;
margin-bottom:15px;
}

.design-product-price{
margin:0;
font-family:Georgia,"Times New Roman",serif;
font-size:18px;
letter-spacing:.02em;
color:#252525;
}

.design-product-price small{
margin-left:2px;
font-family:
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
"YuGothic",
sans-serif;
font-size:8px;
color:#77736c;
}

.design-product-delivery{
margin:0;
font-size:8px;
line-height:1.5;
color:#77736c;
text-align:right;
}

.design-product-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}

.design-product-actions.is-single{
grid-template-columns:1fr;
}

.design-product-link{
min-height:40px;
display:flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border:1px solid #222;
font-size:9px;
font-weight:600;
letter-spacing:.06em;
transition:.2s ease;
}

.design-product-link:hover{
background:#f1efe9;
}

.design-product-link.primary{
background:#171717;
color:#fff;
}

.design-product-link.primary:hover{
background:#333;
}

.design-products-empty{
padding:50px 20px;
background:#fff;
border:1px solid #ebe8e1;
text-align:center;
font-size:11px;
line-height:2;
color:#77736c;
}

.design-products-more{
margin-top:28px;
text-align:center;
}

.design-products-more .btn{
min-width:260px;
}

@media (max-width:900px){
.design-product-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:560px){
.design-products{
margin-top:38px;
}

.design-products-head{
align-items:flex-start;
flex-direction:column;
gap:8px;
}

.design-product-grid{
grid-template-columns:1fr 1fr;
gap:8px;
}

.design-product-body{
padding:13px 11px 14px;
}

.design-product-body h4{
font-size:11px;
}

.design-product-price{
font-size:15px;
}

.design-product-actions{
grid-template-columns:1fr;
}

.design-product-link{
min-height:36px;
font-size:8px;
}
}


/* =========================================================
WORKS
========================================================= */

.works{
padding:60px 0 72px;
background:#f4f2ee;
}

.works-head{
display:flex;
justify-content:space-between;
align-items:end;

margin-bottom:28px;
}

.more-link{
font-size:10px;
color:#4f4b46;
}

.more-link::after{
content:"  →";
font-size:15px;
}

.work-grid{
display:grid;
grid-template-columns:repeat(4,1fr);

gap:12px;
}

.work-card{
background:#f9f8f5;
}

.work-card img{
aspect-ratio:1.12/1;
object-fit:cover;
}

.work-body{
padding:15px 12px 16px;
}

.work-body h3{
font-family:
"Yu Mincho",
"Hiragino Mincho ProN",
"Noto Serif JP",
serif;

font-size:13px;
line-height:1.6;

margin:0 0 10px;
}

.work-meta{
font-size:8px;
color:#8b867f;
line-height:1.5;
}


/* =========================================================
FLOW
========================================================= */

.flow{
background:#fff;
padding:70px 0 80px;
}

.flow-head{
display:flex;
align-items:end;

gap:28px;

margin-bottom:42px;
}

.flow-head p{
margin:0 0 3px;

font-size:14px;
color:#77726c;
}

.flow-grid{
display:grid;
grid-template-columns:repeat(5,1fr);

gap:28px;
}

.flow-step{
position:relative;
}

.flow-step:not(:last-child)::after{
content:"→";

position:absolute;

right:-20px;
top:5px;

color:#777;
font-size:20px;
}

.flow-num{
font-family:Georgia,serif;

font-size:29px;
color:#d4d0c8;

margin-bottom:18px;
}

.flow-step h3{
margin:0 0 10px;

font-family:
"Yu Mincho",
"Hiragino Mincho ProN",
"Noto Serif JP",
serif;

font-size:18px;
}

.flow-step p{
margin:0;

font-size:13px;
line-height:1.85;

color:#6d6963;
}


/* =========================================================
REASON
========================================================= */

.reason{
background:#151515;
color:#fff;
}

.reason-inner{
display:grid;
grid-template-columns:43% 57%;

min-height:530px;
}

.reason-copy{
padding:
54px
48px
44px
max(40px,calc((100vw - var(--max))/2));
}

.reason .kicker{
color:#b7b3ad;
}

.reason .section-title{
font-size:30px;
color:#fff;

margin-bottom:30px;
}

.reason-list{
display:grid;
gap:24px;
}

.reason-item{
display:grid;
grid-template-columns:26px 1fr;

gap:14px;
}

.check{
width:24px;
height:24px;

border:1px solid #7d7a75;
border-radius:50%;

display:grid;
place-items:center;

font-size:12px;

color:#d9d6d0;
}

.reason-item h3{
margin:0 0 6px;

font-size:14px;
letter-spacing:.05em;
}

.reason-item p{
margin:0;

font-size:11px;
line-height:1.8;

color:#aaa7a1;
}

.reason-gallery{
display:grid;

grid-template-columns:1.1fr .9fr;
grid-template-rows:1fr 1fr;
}

.reason-gallery img{
width:100%;
height:100%;

object-fit:cover;
}


/* =========================================================
CONTACT
========================================================= */

.contact-cta{
min-height:350px;

background:
linear-gradient(
90deg,
#faf9f6 0%,
#f2efe8 100%
);
}

.contact-inner{
min-height:350px;

display:grid;
grid-template-columns:55% 45%;

align-items:center;
}

.contact-copy{
padding-right:30px;
}

.contact-copy .section-title{
font-size:30px;
margin-bottom:16px;
}

.contact-copy p{
font-size:10px;
line-height:1.9;

color:#625e58;

margin:0 0 24px;

max-width:520px;
}

.contact-visual{
height:350px;
align-self:stretch;
}

.contact-visual img{
height:100%;

object-fit:cover;
object-position:center;
}


/* =========================================================
FOOTER
========================================================= */

.footer-main{
background:#fff;
padding:42px 0 46px;
}

.footer-grid{
display:grid;

grid-template-columns:
1.4fr
1fr
1fr
1.15fr;

gap:50px;
}

.footer-logo .logo{
font-size:20px;
}

.footer-logo p{
font-size:9px;
line-height:1.9;

color:#6d6862;

margin-top:22px;

max-width:220px;
}

.footer-col h4{
font-size:10px;

margin:0 0 13px;
}

.footer-col a{
display:block;

font-size:9px;
color:#66615b;

line-height:2.05;
}

.tel-label{
font-size:9px;
margin-bottom:8px;
}

.tel{
font-family:Georgia,serif;

font-size:23px;
letter-spacing:.03em;
}

.tel-note{
font-size:8px;
color:#77716c;

margin:7px 0 14px;
}

.footer-btn{
min-width:190px;
height:46px;

font-size:9px;
}

.footer-bottom{
background:#fbfaf8;

border-top:1px solid #ece9e3;

padding:14px 0;
}

.footer-bottom .container{
display:flex;
justify-content:space-between;
align-items:center;

gap:20px;

font-size:8px;
color:#8a857f;
}

.footer-links{
display:flex;
gap:22px;
}

.to-top{
width:28px;
height:28px;

border:1px solid #ddd8d0;

display:grid;
place-items:center;

background:#fff;
}


/* =========================================================
ANIMATION
========================================================= */

.reveal{
opacity:0;
transform:translateY(18px);

transition:.65s ease;
}

.reveal.in{
opacity:1;
transform:none;
}


/* =========================================================
TABLET
========================================================= */

@media (max-width:900px){

.container{
width:min(100% - 36px,var(--max));
}

.nav a:not(.header-cta){
display:none;
}

.hero,
.hero-inner{
min-height:670px;
}

.hero-inner{
grid-template-columns:1fr;
}

.hero-copy{
padding:100px 0 380px;

position:relative;
z-index:2;
}

.hero h1{
font-size:45px;
}

.hero-visual{
position:absolute;

inset:auto -40px 0 35%;

height:470px;
min-height:0;

opacity:.95;
}

.service-grid{
grid-template-columns:repeat(2,1fr);
}

.service-card:nth-child(5){
grid-column:auto;
}

.work-grid{
grid-template-columns:repeat(2,1fr);
}

.flow-grid{
grid-template-columns:1fr;
}

.flow-step{
padding-left:62px;
min-height:75px;
}

.flow-num{
position:absolute;

left:0;
top:-5px;
}

.flow-step:not(:last-child)::after{
content:"↓";

right:auto;
left:21px;
top:55px;
}

.reason-inner{
grid-template-columns:1fr;
}

.reason-copy{
padding:50px 28px;
}

.reason-gallery{
min-height:420px;
}

.contact-inner{
grid-template-columns:1fr;
}

.contact-copy{
padding:54px 0;
}

.contact-visual{
height:300px;
}

.footer-grid{
grid-template-columns:1fr 1fr;
}

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width:560px){

.header-inner{
width:calc(100% - 28px);
}

.logo{
font-size:17px;
}

.header-cta{
font-size:9px;
padding:12px 13px;
}

.hero h1{
font-size:38px;
letter-spacing:.11em;
}

.hero-sub{
font-size:14px;
}

.hero-visual{
left:18%;
right:-100px;

opacity:.86;
}

.services,
.works,
.flow,
.design-lineup{
padding-left:0;
padding-right:0;
}

.service-grid{
grid-template-columns:1fr;
gap:28px;
}

.service-card{
max-width:320px;
margin:auto;
}

.work-grid{
grid-template-columns:1fr;
}

.works-head{
align-items:start;
}

.reason-gallery{
grid-template-columns:1fr 1fr;
min-height:330px;
}

.footer-grid{
grid-template-columns:1fr;
gap:32px;
}

.footer-bottom .container{
align-items:flex-start;
flex-direction:column;
}

.design-lineup{
padding-top:65px;
padding-bottom:65px;
}

.lineup-heading{
margin-bottom:32px;
}

.lineup-heading .section-title{
font-size:26px;
}

}

/* =========================================================
   ORIGINAL.CSS OVERRIDE FOR ME-Q DESIGN
   original.css 読込後にDESIGN側とモーダル側を補正
========================================================= */

/* DESIGNページ本体の共通ボタン */
body.meq-design a.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:36px !important;
  width:auto !important;
  min-width:230px !important;
  height:58px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 24px !important;
  background:#171717 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-indent:0 !important;
  text-decoration:none !important;
  opacity:1 !important;
  transition:.25s ease !important;
}

body.meq-design a.btn::after{
  content:"→" !important;
  display:block !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
}

body.meq-design a.btn:hover{
  background:#333 !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}

body.meq-design .design-products-more a.btn{
  min-width:260px !important;
}

body.meq-design a.footer-btn{
  min-width:190px !important;
  height:46px !important;
  color:#fff !important;
  font-size:9px !important;
}

/* モーダル内の「ME-Qする！」 */
body.meq-design #modal_contents .btn,
body.meq-design #meq_model_select .btn{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:inherit !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

body.meq-design #modal_contents .btn a,
body.meq-design #meq_model_select .btn a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:390px !important;
  max-width:calc(100% - 40px) !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 auto !important;
  padding:0 28px !important;
  background:transparent !important;
  color:#fff !important;
  border:2px solid #fff !important;
  border-radius:10px !important;
  box-shadow:none !important;
  font-size:18px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-indent:0 !important;
  text-decoration:none !important;
  opacity:1 !important;
  transition:background .2s ease,color .2s ease !important;
}

body.meq-design #modal_contents .btn a:hover,
body.meq-design #meq_model_select .btn a:hover{
  background:#fff !important;
  color:#222 !important;
}

body.meq-design #modal_contents .btn::after,
body.meq-design #modal_contents .btn a::after,
body.meq-design #meq_model_select .btn::after,
body.meq-design #meq_model_select .btn a::after{
  content:none !important;
  display:none !important;
}

body.meq-design #modal_contents #modal_close a,
body.meq-design #modal_contents .back a{
  text-indent:0 !important;
}

@media (max-width:560px){
  body.meq-design #modal_contents .btn a,
  body.meq-design #meq_model_select .btn a{
    width:calc(100% - 30px) !important;
    height:54px !important;
    min-height:54px !important;
    font-size:15px !important;
  }
}