@import url(common.css);

/* ============================================================
   全体
   ============================================================ */

html {
  overflow-y: scroll;
}

main {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   メインビジュアル
   ============================================================ */

.main-visual {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 500px;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  background: #fffdf9;
}

/* ============================================================
   背景写真
   ============================================================ */

.hero-slides {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  z-index: 1;

  opacity: 1 !important;
  visibility: visible !important;
}

.hero-slide {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  opacity: 1 !important;
  visibility: visible !important;
}

.hero-slide img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  object-fit: cover;
}

/* 背景写真を少し柔らかくする */

.main-visual::after {
  content: "";

  position: absolute;

  inset: 0;

  background: rgba(255, 253, 249, 0.18);

  pointer-events: none;

  z-index: 2;
}

/* ============================================================
   🍊 オレンジの実の中に写真を収める
   ============================================================ */

/*
   写真自体をオレンジの実の形にする。

   上下を丸くしつつ、
   真ん中が少しふくらんだ
   柔らかいオレンジ型にする。
*/

.hero-slide img {
  position: absolute;

  top: 50%;
  right: 8%;

  width: 500px;
  height: 500px;

  transform: translateY(-50%);

  object-fit: cover;

  /*
     オレンジの実らしい丸い形
  */
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;

  /*
     写真を少しだけ丸く柔らかくする
  */
  clip-path: ellipse(49% 49% at 50% 50%);

  z-index: 5;

  box-shadow: 0 12px 30px rgba(90, 65, 35, 0.18);
}

/* ============================================================
   🍊 オレンジの実の縁
   ============================================================ */

.hero-slide::before {
  content: "";

  position: absolute;

  top: 50%;
  right: calc(8% - 8px);

  width: 516px;
  height: 516px;

  transform: translateY(-50%);

  border: 8px solid rgba(234, 163, 23, 0.9);

  border-radius: 50%;

  box-sizing: border-box;

  z-index: 4;

  pointer-events: none;
}

/* ============================================================
   🍃 オレンジの葉っぱ
   ============================================================ */

.hero-slide::after {
  content: "";

  position: absolute;

  top: calc(50% - 265px);
  right: calc(8% + 55px);

  width: 52px;
  height: 28px;

  background: #eaa317;

  border-radius: 100% 0 100% 0;

  transform: rotate(-25deg);

  z-index: 8;

  pointer-events: none;
}

/* ============================================================
   キャッチフレーズ
   ============================================================ */

.hero-catch {
  position: absolute !important;

  top: 50% !important;
  left: 10% !important;

  width: 42% !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateY(-50%) !important;

  z-index: 50 !important;

  display: block !important;

  visibility: visible !important;
  opacity: 1 !important;

  text-align: left !important;

  pointer-events: none;
}

.hero-catch p {
  position: relative;

  display: inline-block !important;

  margin: 0 !important;

  padding: 0 0 22px 0 !important;

  color: #4a4037 !important;

  font-size: 42px !important;

  font-weight: 600 !important;

  line-height: 1.8 !important;

  letter-spacing: 0.12em !important;

  text-align: left !important;

  visibility: visible !important;
  opacity: 1 !important;

  text-shadow: none;
}

/* キャッチフレーズの下線 */

.hero-catch p::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 70px;
  height: 4px;

  background: #eaa317;

  border-radius: 20px;
}

/* ============================================================
   木のオープニング
   ============================================================ */

.tree-opening {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  background: #fffdf9;

  overflow: hidden;

  z-index: 10;

  pointer-events: auto;

  cursor: pointer;
}

.opening-content {
  position: absolute;

  top: 50%;
  left: 50%;

  width: min(900px, 90%);

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 60px;

  transform: translate(-50%, -50%);
}

.opening-tree-wrap {
  position: relative;

  flex: 0 0 auto;

  height: 520px;

  display: flex;

  align-items: flex-end;
  justify-content: center;
}

.opening-tree {
  display: block;

  width: auto;
  height: 520px;

  max-width: 480px;

  margin: 0;
  padding: 0;

  opacity: 0;

  transform-origin: 50% 100%;

  will-change: transform, opacity;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;
}

.opening-message {
  flex: 0 0 auto;

  text-align: left;

  opacity: 0;

  transform: translateY(15px);

  will-change: opacity, transform;
}

.opening-message-small {
  margin: 0 0 12px;

  color: #eaa317;

  font-size: 28px;
  font-weight: 500;

  letter-spacing: 0.12em;

  line-height: 1.8;
}

.opening-message-large {
  margin: 0;

  color: #eaa317;

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

  letter-spacing: 0.12em;

  line-height: 1.6;
}

/* ============================================================
   ABOUT US
   ============================================================ */

.service {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;

  padding: 115px 40px 65px;

  box-sizing: border-box;
}

.service > h2 {
  position: relative;

  margin: 0 0 75px;

  text-align: center;

  color: #333;

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

  letter-spacing: 0.12em;

  line-height: 1.5;
}

.service > h2::before {
  content: "ABOUT US";

  display: block;

  margin-bottom: 10px;

  color: #eaa317;

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

  letter-spacing: 0.2em;
}

.service > h2::after {
  content: "";

  display: block;

  width: 48px;
  height: 2px;

  margin: 20px auto 0;

  background: #eaa317;

  border-radius: 10px;
}

/* ============================================================
   コンテンツ
   ============================================================ */

.content-block {
  display: flex;

  align-items: flex-start;

  gap: 75px;

  width: 100%;

  margin: 0 auto 125px;
}

.content-block:last-child {
  margin-bottom: 0;
}

.content-block .image {
  position: relative;

  width: 52%;

  flex-shrink: 0;
}

.content-block .image::after {
  content: "";

  position: absolute;

  top: 14px;
  left: 14px;

  width: 100%;
  height: 100%;

  border: 2px solid #eaa317;

  border-radius: 14px;

  box-sizing: border-box;

  z-index: 0;
}

.content-block .image img {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 350px;

  margin: 0;
  padding: 0;

  object-fit: cover;

  border-radius: 14px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.content-block .text {
  flex: 1;

  padding-top: 5px;
}

.content-block .text h3 {
  position: relative;

  margin: 0 0 30px;

  padding: 0 0 18px 20px;

  color: #333;

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

  letter-spacing: 0.08em;

  line-height: 1.6;
}

.content-block .text h3::before {
  content: "";

  position: absolute;

  left: 0;
  top: 5px;

  width: 4px;
  height: 75%;

  background: #eaa317;

  border-radius: 10px;
}

.content-block .text h3::after {
  content: "";

  position: absolute;

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

  width: 100%;
  height: 1px;

  background: #e8e3dc;
}

.content-block .text p {
  margin: 0;

  color: #555;

  font-size: 16px;

  line-height: 2.15;

  letter-spacing: 0.03em;
}

/* ============================================================
   私たちの想い
   ============================================================ */

.message-section {
  width: 100%;
  max-width: 1000px;

  margin: 0 auto;

  padding: 115px 30px 130px;

  text-align: center;

  box-sizing: border-box;
}

.message-main {
  position: relative;

  margin: 0;

  padding-top: 30px;

  color: #333;

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

  line-height: 1.8;

  letter-spacing: 0.1em;

  text-align: center;
}

.message-main::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 10px;
  height: 10px;

  background: #eaa317;

  border-radius: 50%;

  transform: translateX(-50%);
}

.message-line {
  display: block;

  width: 48px;
  height: 2px;

  margin: 35px auto;

  background: #eaa317;

  border-radius: 10px;
}

.message-text {
  margin: 0;

  color: #555;

  font-size: 16px;

  line-height: 2.15;

  letter-spacing: 0.03em;
}

/* ============================================================
   スマートフォン
   ※既存のスマホデザインを維持
   ============================================================ */

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
  }

  body {
    background: #fffdf9;
  }

  main {
    width: 100%;
    max-width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
  }

  .main-visual {
    width: 100%;

    height: 100svh;

    min-height: 420px;
    max-height: 850px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
  }

  .hero-slides {
    width: 100%;
    height: 100%;

    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-slide {
    width: 100%;
    height: 100%;
  }

  .hero-slide img {
    position: static;

    display: block;

    width: 100%;
    max-width: 100%;

    height: 100%;

    margin: 0;
    padding: 0;

    transform: none;

    object-fit: cover;

    border-radius: 0;

    clip-path: none;

    box-shadow: none;
  }

  .hero-slide::before,
  .hero-slide::after {
    display: none;
  }

  .hero-catch {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 92% !important;

    display: block !important;

    z-index: 50 !important;

    transform: translate(-50%, -50%) !important;

    visibility: visible !important;
    opacity: 1 !important;

    text-align: center !important;
  }

  .hero-catch p {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 25px !important;
    font-weight: 600 !important;

    line-height: 1.8 !important;

    letter-spacing: 0.08em !important;

    text-align: center !important;

    visibility: visible !important;
    opacity: 1 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }

  .hero-catch p::after,
  .hero-catch::before {
    display: none;
  }

  /* ----------------------------------------------------------
     木のオープニング
     ---------------------------------------------------------- */

  .opening-content {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 94%;
    max-width: 500px;

    display: flex;

    flex-direction: row;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    transform: translate(-50%, -50%);
  }

  .opening-tree-wrap {
    position: relative;

    width: auto;
    height: 220px;

    flex: 0 0 auto;

    display: flex;

    align-items: flex-end;
    justify-content: center;
  }

  .opening-tree {
    display: block;

    width: auto;
    height: 220px;

    max-width: 170px;

    margin: 0;
    padding: 0;
  }

  .opening-message {
    width: auto;

    max-width: calc(100% - 175px);

    flex: 0 1 auto;

    margin: 0;
    padding: 0;

    text-align: left;

    box-sizing: border-box;
  }

  .opening-message-small {
    margin: 0 0 4px;

    color: #eaa317;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0.05em;

    line-height: 1.5;

    white-space: nowrap;
  }

  .opening-message-large {
    margin: 0;

    color: #eaa317;

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

    letter-spacing: 0.04em;

    line-height: 1.5;

    white-space: nowrap;
  }

  /* ----------------------------------------------------------
     ABOUT US
     ---------------------------------------------------------- */

  .service {
    width: 100%;
    max-width: 100%;

    margin: 0;

    padding: 80px 20px 55px;

    box-sizing: border-box;
  }

  .service > h2 {
    width: 100%;

    margin: 0 0 55px;

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

    letter-spacing: 0.08em;

    line-height: 1.5;
  }

  .service > h2::before {
    margin-bottom: 8px;

    font-size: 11px;

    letter-spacing: 0.18em;
  }

  .service > h2::after {
    width: 42px;
    height: 2px;

    margin-top: 17px;
  }

  /* ----------------------------------------------------------
     コンテンツ
     ---------------------------------------------------------- */

  .content-block {
    display: flex;

    flex-direction: column;

    gap: 32px;

    width: 100%;

    margin: 0 0 90px;

    padding: 0;
  }

  .content-block:last-child {
    margin-bottom: 20px;
  }

  .content-block .text {
    display: contents;
  }

  .content-block .text h3 {
    width: 100%;

    margin: 0;

    padding: 0 0 14px 15px;

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

    letter-spacing: 0.06em;

    line-height: 1.6;

    box-sizing: border-box;

    order: 1;
  }

  .content-block .text h3::before {
    left: 0;
    top: 4px;

    width: 4px;
    height: 75%;
  }

  .content-block .text h3::after {
    height: 1px;
  }

  .content-block .image {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    order: 2;
  }

  .content-block .image::after {
    top: 9px;
    left: 9px;

    width: 100%;
    height: 100%;

    border-width: 2px;

    border-radius: 12px;

    box-sizing: border-box;
  }

  .content-block .image img {
    width: 100%;
    max-width: 100%;

    height: 235px;

    border-radius: 12px;

    box-sizing: border-box;
  }

  .content-block .text p {
    width: 100%;

    margin: 0;
    padding: 0;

    font-size: 15px;

    line-height: 2.05;

    letter-spacing: 0.02em;

    box-sizing: border-box;

    order: 3;
  }

  /* ----------------------------------------------------------
     私たちの想い
     ---------------------------------------------------------- */

  .message-section {
    width: 100%;
    max-width: 100%;

    margin: 0;

    padding: 80px 20px 100px;

    box-sizing: border-box;
  }

  .message-main {
    padding-top: 25px;

    font-size: 23px;

    line-height: 1.8;

    letter-spacing: 0.08em;
  }

  .message-main::before {
    top: 0;

    width: 8px;
    height: 8px;
  }

  .message-line {
    width: 42px;
    height: 2px;

    margin: 28px auto;
  }

  .message-text {
    font-size: 14px;

    line-height: 2.1;

    letter-spacing: 0.02em;
  }
}