@charset "UTF-8";

/* =========================================
   コンテンツ用余白設定
========================================= */
main.page-content {
  padding-top: 140px;
  padding-bottom: 80px;
}

/* =========================================
   ページ独自スタイル (page-once 抽出)
========================================= */
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pb10 { padding-bottom: 10px; }
.mb30 { margin-bottom: 30px; }

#site-body { margin: 0; padding: 0; }
#site-body .item7, #site-body .item8 { width: 1280px; max-width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; }

.presenTitle {
  font-family: var(--font-main);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: #000;
  margin: 0 0 30px 0;
  padding: 0;
  border: none;
}

@media (max-width: 768px) {
  .presenTitle { font-size: 1.2rem; }
}

#top {
  display: flex; flex-flow: row wrap;
  width: 100%; max-width: 1280px;
  margin: 0 auto; padding: 0 24px; box-sizing: border-box;
}

.once-chatch {
  width: 100%; margin: 0; padding: 60px 0;
  display: flex; flex-flow: row wrap;
}

.once-chatch-one { order: 1; width: 60%; }
.once-chatch-one img { max-width: 100%; height: auto; display: block; }
.once-chatch-two { order: 2; width: 40%; display: flex; justify-content: flex-end; align-items: flex-end; }
.once-chatch-three { order: 3; width: 20%; display: flex; justify-content: left; align-items: flex-start; margin: 0; padding: 20px 0; }
.once-chatch-four { order: 4; width: 80%; margin: 0; padding: 10px 0; }
.once-chatch-five { order: 5; width: 30%; display: flex; justify-content: flex-start; align-items: flex-end; }
.once-chatch-six { order: 6; width: 70%; display: flex; justify-content: right; }
.once-chatch-six img { max-width: 100%; height: auto; display: block; }
.once-chatch-seven { order: 7; width: 60%; }
.once-chatch-eight { order: 8; width: 40%; display: flex; justify-content: right; align-items: flex-start; }

.once-chatch-title {
  font-family: var(--font-main);
  font-size: 1.1rem; font-weight: 800;
  line-height: 1.4; letter-spacing: 2px;
  margin: 0; padding: 0 50px 0 0;
}

.once-chatch-sub {
  font-family: var(--font-main);
  font-size: 1.1rem; font-weight: 800;
  line-height: 1.4; letter-spacing: 2px;
  margin: 0; padding: 0 0 0 50px;
}

.once-chatch-txt {
  font-family: var(--font-serif);
  font-size: 0.95rem; font-weight: 500;
  line-height: 1.8; letter-spacing: 2px;
  text-align: left; margin: 0; padding: 24px 50px;
}

.once-chatch-img { margin: 0; padding: 0 0 24px 0; }

@media only screen and (max-width: 1080px) {
  .once-chatch { align-items: flex-end; }
  .once-chatch-one { width: 100%; }
  .once-chatch-two { width: 74%; margin: 24px 0 0 24%; }
  .once-chatch-three { width: 100%; }
  .once-chatch-four { width: 100%; }
  .once-chatch-five { order: 6; width: 100%; margin: 24px 0 0 0; }
  .once-chatch-six { order: 5; width: 100%; }
  .once-chatch-seven { order: 8; width: 100%; }
  .once-chatch-eight { order: 7; width: 100%; }
  .once-chatch-title { padding: 0; }
  .once-chatch-sub { padding: 0 0 0 24px; }
  .once-chatch-txt { max-width: 100%; padding: 30px 0; }
  .once-chatch-img { width: 180px; padding: 0 0 12px 0; }
}

.white { background: #FFF; padding: 0 24px; }
.lp { margin: 0; padding: 40px 0; }
.lp-title {
  font-family: var(--font-serif);
  font-size: 0.95rem; font-weight: 600;
  line-height: 1.4; letter-spacing: 2px;
  text-align: center; margin: 0; padding: 0;
}

.lp-sub {
  font-family: var(--font-main);
  font-size: 1.1rem; font-weight: 800;
  line-height: 1.4; letter-spacing: 3px;
  text-align: center; margin: 0; padding: 20px 0;
}

.container-small {
  max-width: 800px; margin: 0 auto; padding: 0 20px;
  box-sizing: border-box; text-align: center;
}
.container-small img { max-width: 100%; height: auto; }

.lp ul {
  padding: 2em;
  border: 5px solid;
  border-image: linear-gradient(90deg, rgba(255, 242, 216, 1), rgba(227, 227, 227, 1)) 1;
  text-align: left;
  list-style: none;
  margin-bottom: 30px;
}

.lp ul li { line-height: 1.8; padding: 0.5em 0; font-size: 0.95rem; }

.lp .link {
  max-width: 280px; font-size: 0.95rem; font-weight: 800;
  line-height: 1.6; letter-spacing: 1px;
  margin: 0 auto; padding: 24px 0;
}

.link a.btn {
  display: block; text-align: center; text-decoration: none;
  width: 280px; margin: 0; padding: 1.2rem 1rem;
  color: #fff; background-color: #9798a1;
  border-radius: 100vw; box-sizing: border-box;
  transition: all 0.3s;
}

.link a.btn:hover {
  background-color: #111;
  color: #fff;
}

.effect-button {
  font-family: var(--font-main);
  font-size: 0.85rem; display: inline-block;
  text-decoration: none; color: var(--color-dark);
  font-weight: 700; letter-spacing: 1px;
  position: relative; text-align: center;
  padding: 8px 24px; border: 2px solid var(--color-dark);
  transition: color 0.3s;
  margin: 20px 0;
}

.effect-button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 3px solid var(--color-dark);
  transform: scale(0, 1); transform-origin: left top; transition: transform .3s;
}

.effect-button:hover::after { transform: scale(1, 1); }