@charset "UTF-8";

/* =====================================================
   Variables
===================================================== */

:root{
  --green:#7E9C8B;
  --green-light:#EEF4F0;
  --beige:#F8F4EE;
  --accent:#E77A67;
  --accent-hover:#DB6956;
  --text:#333;
  --radius:24px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
}

/* =====================================================
   Reset / Base
===================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#mizunochair {
  font-family:"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1.8;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

#mizunochair img{
  width:100%;
  display:block;
}

#mizunochair section{
  padding:60px 0;
}

#mizunochair .inner{
  width:min(1200px,90%);
  margin:auto;
}
/*#mizunochair .page-goods img{
  width:100%;
  max-width: 490px;
  max-height: 100%;
  display:inline;
}*/
#mizunochair .page-goods .block-stock-comment {
  font-size: 16px;
}
#mizunochair .page-goods .block-add-cart--btn {
  letter-spacing: 0;
}
.page-goods .block-add-cart--btn {
  border: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.page-goods .block-add-cart--btn.skip::after {
  background: none !important;
}
.page-goods .block-add-cart--btn::after {
  background: none !important;
}
.page-goods #pane_goods_main_top {
    margin: 0;
}
@media (max-width: 768px) {
#mizunochair section.price_box {
  padding:0 !important;
}
#mizunochair section.price_box2 {
  padding: 60px 0 0 0;
}
#mizunochair .page-goods {
  padding-bottom: 0;
}
#mizunochair .page-goods .block-stock-comment {
  font-size: 14px;
}
#mizunochair .page-goods .pane-goods-left-side .bx-wrapper .bx-controls-direction a {
  z-index: 1000;
}
#mizunochair .page-goods .block-goods-detail ul.thumbnail li a.active::after {
    border: #E98805 3px solid;
}
 #mizunochair .js-goods-detail-goods-slider img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
  }
}
/* =====================================================
   Layout
===================================================== */

.twocol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.twocol img,
.family img,
.detail img,
.compare img{
  border-radius:24px;
}

.reverse{
  direction:rtl;
}

.reverse > *{
  direction:ltr;
}

/* =====================================================
   Common Components
===================================================== */

#mizunochair .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:280px;
  height:64px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:var(--accent);
  transition:.3s;
}

#mizunochair .btn:hover{
  background:var(--accent-hover);
}

#mizunochair .btnWhite{
  background:#fff;
  color:var(--green);
}

.sectionTitle{
  position:relative;
  padding-bottom:20px;
  margin-bottom:60px;
  text-align:center;
  font-size:42px;
  line-height:1.4;
}

.sectionTitle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:80px;
  height:4px;
  background:var(--accent);
  border-radius:999px;
}

.sectionSub{
  display:inline-block;
  padding:6px 14px;
  background:#fff;
  border-radius:999px;
  box-shadow:var(--shadow);
  color:var(--green);
  font-size:12px;
  letter-spacing:.15em;
  font-weight:700;
  margin-bottom:14px;
}

.blockTitle{
  font-size:34px;
  font-weight:700;
  line-height:1.5;
  color:var(--text);
  margin:15px 0 25px;
}

.blockTitle::before{
  content:"";
  display:block;
  width:50px;
  height:4px;
  background:var(--accent);
  border-radius:999px;
  margin-bottom:16px;
}

.em{
  font-weight:700;
  background:linear-gradient(
    transparent 65%,
    rgba(231,122,103,.35) 65%
  );
}

.fadeUp{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.fadeUp.is-show{
  opacity:1;
  transform:translateY(0);
}

/* =====================================================
   Hero
===================================================== */

.hero{
 background:#EEF4F0;
}

.hero .inner{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:60px;
  align-items:center;
}

.heroContent{
  text-align:left;
}

.heroLabel{
  display:inline-block;
  padding:10px 20px;
  background:#fff;
  border-radius:999px;
  box-shadow:var(--shadow);
  margin-bottom:20px;
}

.heroProduct{
  font-size:42px;
  font-weight:700;
  line-height:1.15;
  color:var(--green);
  letter-spacing:.03em;
  margin-bottom:12px;
}

.heroTitle{
  font-size:40px;
  line-height:1.4;
  margin-top:24px;
  margin-bottom:24px;
  text-align: left;
}

.heroTitle span{
  color:var(--accent);
  position:relative;
}

.heroTitle span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:8px;
  width:100%;
  height:16px;
  background:rgba(231,122,103,.18);
  z-index:-1;
}

.heroLead{
  font-size:20px;
  color:#666;
  margin-bottom:40px;
}


/* --- ユーキャンオリジナル紹介ブロック（赤基調） --- */
.wellness-original-banner {
  max-width: 1000px;
  margin: 30px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.wellness-original-banner__inner {
  background: #fdf2f2; /* 薄い赤の背景 */
  border: 2px solid #e74c3c; /* 鮮やかな赤の枠線 */
  border-radius: 12px;
  padding: 20px 25px;
  text-align: center;
}

.wellness-original-banner__tag {
  display: inline-block;
  background-color: #e74c3c; /* 鮮やかな赤の背景 */
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 4px 15px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.wellness-original-banner__text {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.7;
  margin: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .wellness-original-banner__inner {
    padding: 15px;
  }
  .wellness-original-banner__text {
    font-size: 0.95rem;
  }
}



/* =====================================================
   Problem
===================================================== */

.problem{
  background:var(--beige);
}

.problemGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.problemCard{
  background:#fff;
  padding:30px;
  border-radius:var(--radius);
  text-align:center;
  box-shadow:var(--shadow);
}

/* =====================================================
   Lifestyle
===================================================== */

.lifestyle{
  background:#fff;
}

.lifestyleGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.lifestyleCard{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.lifestyleCard h3{
  padding:20px;
  text-align:center;
}

.lifestyleLead{
  max-width:900px;
  margin:50px auto 40px;
  text-align:center;
  font-size:18px;
  line-height:2;
  color:#666;
}

/* =====================================================
   Hover Effects
===================================================== */

.problemCard,
.lifestyleCard,
.compareCard,
.voiceBubble{
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.problemCard:hover,
.lifestyleCard:hover,
.compareCard:hover,
.voiceBubble:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.lifestyleCard img,
.compareCard img{
  transition:transform .6s ease;
}

.lifestyleCard:hover img,
.compareCard:hover img{
  transform:scale(1.05);
}

/* =====================================================
   Compare
===================================================== */

.compare{
  background:var(--beige);
}

.compareGrid{
  display:grid;
  grid-template-columns:repeat(2,320px);
  justify-content:center;
  gap:40px;
}

.compareCard{
  background:#fff;
  padding:30px;
  border-radius:24px;
  box-shadow:var(--shadow);
  text-align:center;
  overflow:hidden;
}

.compareCard img{
  width:80% !important;
  margin:0 auto;
  transition:transform .6s ease;
}

.compareCard:hover img{
  transform:scale(1.05);
}

.compareCard h3{
  margin-top:24px;
  text-align:center;
}

/* =====================================================
   Mini CTA
===================================================== */

.miniCta{
  margin-top:60px;
  text-align:center;
}

.miniCta .btn{
  min-width:320px;
  height:72px;
  font-size:20px;
  box-shadow:0 12px 30px rgba(231,122,103,.35);
}

.miniCta .btn:hover{
  transform:translateY(-3px);
}

/* =====================================================
   Interior / Detail
===================================================== */

.interior,
.detail{
  background:var(--green-light);
}

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

.detailTitle{
  font-size:48px;
  line-height:1.4;
  margin:20px 0;
}

.detailTitle span{
  color:var(--accent);
  position:relative;
}

.detailTitle span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:100%;
  height:14px;
  background:rgba(126,156,139,.2);
  z-index:-1;
}

.detailLead{
  max-width:700px;
  margin:0 auto;
  color:#666;
}

.detailImage{
  max-width:900px;
  margin:0 auto;
}

.detailImage img{
  border-radius:24px;
  box-shadow:var(--shadow);
}

/* =====================================================
   Evidence
===================================================== */

.evidence{
  background:var(--beige);
}

.evidenceTitle{
  text-align:center;
  font-size:48px;
  line-height:1.4;
  margin-bottom:40px;
}

.impactPink{
  color:#e5007f;
  font-weight:700;
}

.impactOrange{
  color:#f15a38;
  font-weight:700;
}

.evidenceLead{
  max-width:900px;
  margin:0 auto 60px;
  text-align:center;
  line-height:2;
}

.evidenceGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  max-width:900px;
  margin:0 auto;
}

.evidenceCard{
  text-align:center;
}

.evidenceCard img{
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* =====================================================
   Developer Interview
===================================================== */

.developer{
  background:#fff;
}

.developerTop{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:60px;
  align-items:start;
  margin-top:50px;
  margin-bottom:60px;
}

.developerPhoto img{
  width:100%;
  border-radius:24px;
  box-shadow:var(--shadow);
}

.developerTitle{
  font-size:34px;
  line-height:1.5;
  color:var(--green);
  margin-bottom:30px;
}

.developerBody p{
  margin-bottom:20px;
}

.developerProfile{
  margin-top:40px;
  padding-top:24px;
  border-top:2px solid #e8e8e8;
}

.developerCompany{
  font-size:14px;
  color:#666;
  margin-bottom:8px;
}

.developerName{
  font-size:28px;
  font-weight:700;
  color:var(--text);
}

.developerVisual{
  width:100%;
  max-width:600px;
  margin:0 auto;
}

.developerVisual img{
  width:100%;
  height:auto;
  border-radius:32px;
  box-shadow:var(--shadow);
}

@media(max-width:768px){

  .developerTop{
    grid-template-columns:1fr;
    gap:30px;
  }

  .developerPhoto{
    max-width:280px;
    margin:0 auto;
  }

  .developerTitle{
    font-size:28px;
  }

  .developerName{
    font-size:22px;
  }

  .developerVisual img{
    border-radius:20px;
  }

}


/* =====================================================
   Brand
===================================================== */

.brand{
  background:#fff;
}

.brandCard{
  background:#fff;
  border-radius:32px;
  padding:50px;
  box-shadow:var(--shadow);

  display:grid;
  grid-template-columns:260px 1fr;
  gap:50px;
  align-items:center;

  max-width:1000px;
  margin:0 auto;
}

.brandLogo img{
  width:100%;
}

.brandTitle{
  font-size:40px;
  font-weight:700;
  line-height:1.5;
  margin:15px 0 25px;
}

.brandTitle span{
  color:#e5007f;
}

.brandContent p{
  margin-bottom:20px;
}

.brandNote{
  font-size:13px;
  color:#777;
}

/* =====================================================
   Voice
===================================================== */

.voice{
  background:var(--green-light);
}

.voiceList{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  max-width:1000px;
  margin:0 auto;
}

.voiceItem{
  margin-bottom:32px;
}

.voiceBubble{
  position:relative;
  background:#fff;
  padding:28px 32px;
  border-radius:24px;
  box-shadow:var(--shadow);
  font-size:18px;
  line-height:1.8;
}

.voiceBubble::after{
  content:"";
  position:absolute;
  left:40px;
  bottom:-14px;
  width:24px;
  height:24px;
  background:#fff;
  transform:rotate(45deg);
}

.voiceName{
  margin-top:18px;
  margin-left:24px;
  color:var(--green);
  font-weight:700;
}

/* =====================================================
   Interview
===================================================== */

.interview{
  background:#fff;
}

.interviewArticle{
  max-width:900px;
  margin:0 auto 100px;
}

.interviewArticle:last-child{
  margin-bottom:0;
}

.interviewHeader{
  display:flex;
  align-items:center;
  gap:32px;
  margin-bottom:40px;
}

#mizunochair .interviewHeader img{
  width:180px;
  height:180px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
@media(max-width:768px){
.interviewHeader{
  display:block;
  margin-bottom:0;
}
#mizunochair .interviewHeader img{
  width: 80%;
  height: 80%;
  margin: 0 auto;
}
}
.interviewRole{
  color:#777;
  font-size:15px;
  margin-bottom:12px;
}

.interviewName{
  font-size:38px;
  line-height:1.4;
}

.interviewCatch{
  margin-bottom:50px;
  padding-bottom:20px;
  border-bottom:2px solid var(--green);
  color:var(--green);
  font-size:32px;
  line-height:1.5;
}

.qa{
  margin-bottom:50px;
}

.question{
  display:flex;
  align-items:flex-start;
  gap:16px;
  font-size:24px;
  font-weight:700;
  line-height:1.6;
  margin-bottom:20px;
}

.question::before{
  content:"Q";
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.answer{
  padding-left:28px;
  border-left:4px solid var(--green);
  line-height:2;
}

/* =====================================================
   Future
===================================================== */

.future{
  background:var(--green-light);
}

.futureTitle{
  font-size:42px;
  font-weight:700;
  line-height:1.5;
  margin-bottom:40px;
}

.futureTitle span{
  color:#e5007f;
}

.futureTitle::after{
  content:"";
  display:block;
  width:80px;
  height:4px;
  margin-top:25px;
  background:var(--accent);
  border-radius:999px;
}

/* =====================================================
   CTA
===================================================== */

.cta{
  background:var(--green);
  color:#fff;
  text-align:center;
}

.cta img{
  max-width:900px;
  margin:0 auto 40px;
  border-radius:24px;
}

.cta h2{
  font-size:48px;
  line-height:1.4;
  margin-bottom:30px;
}

/* =====================================================
   Specification
===================================================== */

.spec{
  background:#fff;
}

.specImage{
  max-width:500px;
  margin:0 auto 50px;
}

.specImage img{
  border-radius:24px;
  box-shadow:var(--shadow);
}

.specTable{
  max-width:600px;
  margin:0 auto;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.specTable dt{
  background:var(--green);
  color:#fff;
  font-weight:700;
  padding:18px 24px;
}

.specTable dd{
  background:#fff;
  padding:20px 24px;
  line-height:2;
  border-bottom:1px solid #eee;
}

.specTable dd:last-child{
  border-bottom:none;
}

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

@media(max-width:768px){

  #mizunochair{
    font-size:16px;
  }

  #mizunochair section{
    padding:70px 0;
  }

  .hero .inner,
  .twocol,
  .problemGrid,
  .lifestyleGrid,
  .compareGrid,
  .detailGrid,
  .brandCard{
    grid-template-columns:1fr;
  }

  .btn{
    width:100%;
    min-width:auto;
  }

  /* ---------- Hero ---------- */

  .heroProduct{
    font-size:32px;
    line-height:1.3;
  }

  .heroTitle{
    font-size:28px;
    line-height:1.5;
  }

  .heroLead{
    font-size:16px;
    line-height:1.7;
  }

  /* ---------- Heading ---------- */

  .sectionTitle{
    font-size:24px;
  }

  .sectionTitle::after{
    width:60px;
  }

  .blockTitle{
    font-size:22px;
    line-height:1.6;
  }

  
  .futureTitle,
  .evidenceTitle{
    font-size:26px;
    line-height:1.5;
  }

.detailTitle{
    font-size:24px;
    line-height:1.5;
  }

  .brandTitle{
    font-size:22px;
    line-height:1.6;
  }

  .developerTitle{
    font-size:18px;
    line-height:1.6;
  }

  /* ---------- Interview ---------- */

  .interviewName{
    font-size:22px;
  }

  .interviewCatch{
    font-size:20px;
    line-height:1.6;
  }

  .question{
    font-size:17px;
  }

  /* ---------- Layout ---------- */

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

  .evidenceGrid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .brandCard{
    gap:30px;
    padding:30px 24px;
  }

  .brandLogo{
    max-width:180px;
    margin:0 auto;
  }

  /* ---------- Text ---------- */

  .lifestyleLead,
  .evidenceLead,
  .detailLead,
  .brandContent p,
  .future p,
  .voiceBubble,
  .question,
  .answer,
  .interviewCatch{
    text-align:left;
  }


  .hero{
    padding:40px 0;
  }

  .sectionTitle{
    margin-bottom:40px;
  }

  .lifestyleLead{
    margin:30px auto;
  }

  .detailHeading{
    margin-bottom:40px;
  }

  .evidenceLead{
    margin:0 auto 35px;
  }

  .developerTitle{
    margin-bottom:20px;
  }

  .interviewArticle{
    margin:0 auto 60px;
  }

  .interviewCatch{
    margin-bottom:30px;
  }

  .qa{
    margin-bottom:35px;
  }

  .brandTitle{
    margin:10px 0 15px;
  }

}