/* OUCHI PLAN — edit colors, spacing and responsive styles here. */

:root {
  --ink:#293a35;
  --muted:#69736e;
  --green:#365a49;
  --paper:#f5f5f0;
  --line:#dce1d9;
  --serif:'Yu Mincho','Hiragino Mincho ProN',serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  color:var(--ink);
  font:15px/1.9 -apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:#fff
}

button,input,textarea,select {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

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

button {
  cursor:pointer
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #bf8d4c;
  outline-offset:4px
}

img {
  display:block;
  width:100%;
  object-fit:cover
}

header {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid #eee
}

.logo {
  font-size:23px;
  letter-spacing:.03em;
  line-height:1.05;
  font-weight:800
}

.logo span {
  display:block;
  font-size:9px;
  letter-spacing:.24em;
  margin-top:9px;
  font-weight:500
}

nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:12px
}

.btn {
  border:1px solid var(--green);
  background:var(--green);
  color:#fff;
  padding:16px 28px;
  display:inline-flex;
  gap:30px;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  letter-spacing:.04em;
  transition:.2s
}

.btn:hover {
  background:#254334
}

.btn.light {
  background:white;
  color:var(--green)
}

.btn.light:hover {
  background:var(--paper)
}

.btn::after {
  content:'↗';
  font-size:18px
}

.eyebrow {
  font-size:11px;
  letter-spacing:.18em;
  font-weight:600;
  color:var(--green);
  margin:0 0 22px;
}

.hero {
  position:relative;
  padding:60px 5% 0;
  background:var(--paper)
}

.hero-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  max-width:1250px;
  margin:auto auto 45px
}

h1 {
  font-family:var(--serif);
  font-size:clamp(32px,3.4vw,60px);
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.65;
  margin:0
}

.hero-intro {
  max-width:350px;
  padding-top:20px
}

.hero-intro p {
  font-size:16px;
  margin:0 0 22px
}

.hero-img {
  max-width:1440px;
  margin:auto;
  position:relative
}

.hero-img img {
  height:440px;
  object-position:center 100%;
}

.caption {
  font-size:10px;
  color:var(--muted);
  margin:10px 0 0
}

.hero-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0 28px;
  font-size:11px;
  letter-spacing:.12em
}

.hero-foot span:last-child {
  font-size:10px
}

.wrap {
  max-width:1120px;
  margin:auto;
  padding:105px 24px
}

h2 {
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(27px,3vw,38px);
  line-height:1.6;
  letter-spacing:.06em;
  margin:0 0 26px
}

h3 {
  font-size:19px;
  font-weight:500;
  line-height:1.65;
  margin:14px 0
}

p {
  margin:0 0 20px
}

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

.intro img {
  height:600px;
}

.intro p {
  font-size:14px
}

#about .intro p {
  font-size:18px
}


.text-link {
  display:inline-block;
  border-bottom:1px solid var(--green);
  font-size:13px;
  padding:8px 0
}

.soft {
  background:var(--paper)
}

.section-head {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  margin-bottom:40px
}

.section-head p:last-child {
  font-size:13px;
  max-width:390px
}

.large-num {
  font-size:68px;
  font-weight:300;
  letter-spacing:-.06em;
  line-height:1
}

.large-num small {
  font-size:13px;
  letter-spacing:.1em
}

.note {
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}

.notice {
  border-left:2px solid #a7b5a5;
  padding:12px 18px;
  background:#fff;
  margin:26px 0;
  font-size:12px
}

.filter {
  display:flex;
  gap:10px;
  margin:28px 0
}

.filter button {
  border:1px solid var(--line);
  background:transparent;
  padding:9px 24px;
  font-size:12px;
  color:var(--ink)
}

.filter button[aria-pressed=true] {
  background:var(--green);
  color:#fff;
  border-color:var(--green)
}

.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px
}

.card {
  background:#fff;
  border:1px solid var(--line)
}

.card-img {
  position:relative;
  background:#e8eeeb;
  height:210px;
  display:flex;
  align-items:center;
  justify-content:center
}

.card-img img {
  height:100%
}

.card-img span {
  position:absolute;
  bottom:12px;
  left:12px;
  font-size:10px;
  background:#fff;
  padding:3px 10px
}

.placeholder-art {
  width:95px;
  height:70px;
  border:1px solid #a6b3a8;
  position:relative;
  background:linear-gradient(90deg,transparent 49%,#a6b3a8 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#a6b3a8 50%,transparent 51%)
}

.card-body {
  padding:24px
}

.tag {
  font-size:12px;
font-weight: bold;
  letter-spacing:.00em;
  color:var(--muted)
}

.card h3 {
  font-size:18px;
  margin:8px 0 12px
}

.card dl,.spec {
  display:grid;
  grid-template-columns:1fr 1fr;
  font-size:12px;
  border-top:1px solid var(--line);
  padding:14px 0;
  margin:0
}

.card dd,.spec dd {
  margin:0;
  text-align:right;
  color:var(--muted)
}

.card .btn {
  width:100%;
  margin-top:12px;
  padding:12px 17px
}

.features {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 50px
}

.feature {
  border-top:1px solid var(--line);
  padding:28px 0 34px;
  display:grid;
  grid-template-columns:45px 1fr;
  gap:15px
}

.feature-num {
  font-size:13px;
  color:#91a08f
}

.feature h3 {
  margin:0 0 8px;
  font-size:19px
}

.feature strong {
  font-size:13px;
  font-weight:500
}

.feature p {
  font-size:12px;
  color:var(--muted);
  margin:10px 0 0
}

.feature-photo {
  grid-column:1/-1;
  margin:20px 0 0;
  overflow:hidden;
  background:#edf0e9
}

.feature-photo img {
  width:100%;
  height:auto;
  aspect-ratio:8/5;
  object-fit:cover
}

.price-strip {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:60px;
  border-top:1px solid var(--line);
  padding-top:45px;
  margin-top:20px
}

.included {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px
}

.included span {
  border:1px solid var(--line);
  padding:12px 15px;
  font-size:12px
}

.vr {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:420px
}

.vr img {
  height:100%
}

.vr-text {
  padding:60px;
  background:#e9eee8;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.vr-text p {
  font-size:13px
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin-top:40px
}

.step {
  border-top:1px solid var(--line);
  padding-top:25px
}

.step span {
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted)
}

.step p {
  font-size:13px
}

.faq {
  max-width:850px;
  margin:auto
}

details {
  border-top:1px solid var(--line);
  padding:23px 0
}

details:last-child {
  border-bottom:1px solid var(--line)
}

summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:14px
}

summary::after {
  content:'＋'
}

details[open] summary::after {
  content:'−'
}

details p {
  font-size:13px;
  color:var(--muted);
  margin:20px 25px 0
}

.contact {
  background:#edf1eb
}

.contact-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px
}

.contact aside {
  position:sticky;
  top:130px;
  align-self:start
}

.contact aside p {
  font-size:13px
}

.form-box {
  padding:35px;
  background:#fff
}

.selected {
  padding:16px 20px;
  background:var(--paper);
  margin-bottom:28px;
  font-size:12px
}

.selected strong {
  display:block;
  font-size:15px;
  margin-top:4px
}

label {
  display:block;
  font-size:13px;
  margin:20px 0 8px
}

label em {
  font-style:normal;
  color:#8a5539;
  font-size:10px;
  margin-left:8px
}

input:not([type=checkbox]),textarea,select {
  width:100%;
  border:1px solid #cdd4ca;
  background:#fff;
  padding:12px;
  color:var(--ink);
  border-radius:0
}

textarea {
  resize:vertical
}

.pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.check {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px
}

.check input {
  margin-top:6px
}

.form-box .btn {
  width:100%;
  margin-top:20px
}

.form-box .note {
  margin-top:12px
}

footer {
  padding:45px 5% 100px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:13px
}

.floating {
  position:fixed;
  bottom:20px;
  right:25px;
  z-index:18;
  box-shadow:0 5px 20px #203b3520
}

.floating .btn {
  padding:13px 24px
}

dialog {
  border:0;
  padding:0;
  width:min(860px,calc(100% - 32px));
  max-height:88vh;
  color:var(--ink);
  box-shadow:0 20px 80px #0003
}

dialog::backdrop {
  background:#16231c99
}

.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  background:#fff;
  padding:18px 28px;
  border-bottom:1px solid var(--line);
  z-index:2
}

.close {
  border:0;
  background:none;
  font-size:25px;
  padding:0 10px
}

.modal-body {
  padding:30px
}

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

.drawing {
  min-height:240px;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px dashed #adb8ab;
  padding:25px;
  font-size:13px
}

.modal-body>.btn {
  margin-top:25px
}

.confirm-list {
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  background:var(--paper);
  padding:20px;
  font-size:13px
}

.hidden {
  display:none!important
}

@media(min-width:1600px) {
  .hero-img img {
  height:540px;
	transform-origin: bottom center; /* 起点を「下」に設定 */
  transition: transform 0.3s ease;  /* なめらか*/
}


}

@media(max-width:900px) {
  nav {
  gap:18px
}

nav a:not(.btn) {
  display:none
}

.intro {
  gap:35px
}

.grid {
  gap:14px
}

.card-body {
  padding:18px
}

.card-img {
  height:260px;
	  width:auto;
}

.contact-layout {
  gap:30px
}

.vr-text {
  padding:35px
}

.hero-intro {
  max-width:280px
}


}

@media(max-width:640px) {
  header {
  height:74px;
  padding:0 20px
}

.logo {
  font-size:19px
}

.logo span {
  font-size:8px
}

nav .btn {
  font-size:11px;
  padding:9px 13px;
  gap:10px
}

.hero {
  padding:36px 20px 0
}

.hero-top {
  display:block;
  margin-bottom:28px
}

h1 {
  font-size:32px
}

.hero-intro {
  max-width:none;
  padding-top:20px
}

.hero-intro p {
  font-size:12px
}

.hero-img {
  margin:0 -20px
}

.hero-img img {
  height:280px;
  object-position:53% center
}

.hero-foot {
  font-size:9px
}

.hero-foot span:last-child {
  display:none
}

.wrap {
  padding:65px 22px
}

.intro,.contact-layout,.price-strip,.vr,.modal-grid {
  grid-template-columns:1fr
}

.intro {
  gap:30px
}

.intro img {
  height:600px
}

.section-head {
  display:block;
  margin-bottom:28px
}

.section-head p:last-child {
  max-width:none
}

.large-num {
  font-size:52px
}

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

.card-img {
  height:260px;
	width:auto;
}

.card-body {
  padding:24px
}

.filter button {
  padding:9px 20px
}

.features {
  grid-template-columns:1fr
}

.price-strip {
  gap:15px
}

.vr img {
  height:270px
}

.vr-text {
  padding:40px 24px
}

.steps {
  grid-template-columns:1fr;
  gap:18px
}

.step h3 {
  margin:8px 0
}

.contact aside {
  position:static
}

.form-box {
  padding:24px 20px
}

.pair {
  grid-template-columns:1fr;
  gap:0
}

footer {
  display:block;
  padding:35px 22px 110px
}

footer p {
  margin-top:20px
}

.floating {
  right:12px;
  left:12px;
  bottom:12px
}

.floating .btn {
  width:100%;
  justify-content:center;
  gap:30px
}

.modal-body {
  padding:22px
}

.modal-head {
  padding:12px 20px
}

.btn {
  min-height:48px
}

.notice {
  padding:12px 14px
}


}


@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

* {
  transition:none!important
}


}


.contact-cta {
  text-align:center;
  max-width:850px
}

.contact-cta>.btn {
  margin-top:15px
}

.floating {
  left:auto;
  right:25px;
  bottom:25px;
  border-radius:50%
}

.floating .btn {
  width:96px;
  height:96px;
  min-height:0;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  font-size:14px
}

.floating .btn::after {
  content:none
}

@media(max-width:640px) {
  .floating {
  left:auto;
  right:16px;
  bottom:16px
}

.floating .btn {
  width:80px;
  height:80px;
  padding:0;
  gap:0;
  font-size:13px
}


}

.next-step {
  max-width:none;
  padding-left:max(24px,calc((100% - 1072px)/2));
  padding-right:max(24px,calc((100% - 1072px)/2))
}

@media(max-width:640px) {
  .next-step {
  padding-left:22px;
  padding-right:22px
}


}


/* Shared styles extracted from element attributes. */
.inline-style-1 {
  margin-top:24px
}


.inline-style-2 {
  margin:0
}

/* Key visual: catalog-style brand heading and Japanese tagline. */
.hero-top > div:first-child {
  flex: 1;
  min-width: 0;
}
.hero-title {
  margin: 0;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: clamp(42px, 7.2vw, 120px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  white-space: nowrap;
}
.hero-tagline {
  margin: 24px 0 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .hero-title {
    font-size: clamp(36px, 10.5vw, 64px);
  }
  .hero-tagline {
    margin-top: 20px;
    font-size: 25px;
  }
}