@charset "utf-8";

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

:root {

  /* ========================================
     Color
  ======================================== */

  --color-base: #FDFCF8;
  --color-switch: #F5F2E9;

  --color-accent: #A18B1E;
  --color-sub: #FF8686;

  --color-text: #404040;
  --color-text-light: #666666;

  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-border: #D9D6CD;


  /* ========================================
     Gradient
  ======================================== */

  --gradient-main: linear-gradient(
    90deg,
    #F2E6EA 0%,
    #F8F3E7 50%,
    #E5EAF9 100%
  );


  /* ========================================
     Font
  ======================================== */

  --font-base:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  --font-title:
    "Shippori Mincho",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  --font-en:
    "Playfair Display",
    "Times New Roman",
    serif;


  /* ========================================
     Layout
  ======================================== */

  --content-width: 1200px;
  --content-width-wide: 1360px;
  --content-width-narrow: 960px;

  --side-padding: 40px;


  /* ========================================
     Section Space
  ======================================== */

  --section-space: 160px;
}


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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;

  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

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

img,
picture {
  display: block;
  max-width: 100%;
}

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

button {
  padding: 0;
  border: 0;
  background: none;
}

iframe {
  display: block;

  width: 100%;

  border: 0;
}


/* ==================================================
   HTML / Body
================================================== */

html {
  font-size: 16px;
}

body {
  position: relative;

  min-height: 100vh;

  color: var(--color-text);
  background: var(--color-base);

  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;

  letter-spacing: 0.03em;

  word-break: auto-phrase;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==================================================
   Heading
================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);

  font-family: var(--font-title);
  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 0.04em;

  text-wrap: balance;
}


/* ==================================================
   H1
================================================== */

h1 {
  font-size: clamp(36px, 4vw, 64px);
}


/* ==================================================
   H2
================================================== */

h2 {
  font-size: clamp(30px, 3vw, 48px);
}


/* ==================================================
   H3
================================================== */

h3 {
  font-size: clamp(24px, 2vw, 34px);
}


/* ==================================================
   H4
================================================== */

h4 {
  font-size: 22px;
}


/* ==================================================
   H5
================================================== */

h5 {
  font-size: 18px;
}


/* ==================================================
   Paragraph
================================================== */

p {
  margin: 0;

  color: var(--color-text);

  font-family: var(--font-base);
  font-size: inherit;
  font-weight: 400;

  line-height: 1.9;

  letter-spacing: 0.03em;
}


/* ==================================================
   English Font
================================================== */

.en {
  font-family: var(--font-en);
  font-weight: 400;

  letter-spacing: 0.03em;
}


/* ==================================================
   Mincho
================================================== */

.mincho {
  font-family: var(--font-title);
}


/* ==================================================
   Sans Serif
================================================== */

.sans {
  font-family: var(--font-base);
}


/* ==================================================
   Link
================================================== */

a {
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

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


/* ==================================================
   Image
================================================== */

img {
  width: 100%;
  height: auto;

  object-fit: contain;
}


/* ==================================================
   Invisible
================================================== */

.invisible-style {
  display: none !important;
}


/* ==================================================
   PC / SP
================================================== */

.pc {
  display: block;
}

.sp {
  display: none;
}


/* ==================================================
   Main Container
================================================== */

.container {
  position: relative;

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

  margin: 2rem 0 0;
  padding: 0 !important;
}


/* ==================================================
   Inner
================================================== */

.inner {
  width: min(
    calc(100% - var(--side-padding) * 2),
    var(--content-width)
  );

  margin-inline: auto;
}


/* ==================================================
   Wide Inner
================================================== */

.inner--wide {
  max-width: var(--content-width-wide);
}


/* ==================================================
   Narrow Inner
================================================== */

.inner--narrow {
  max-width: var(--content-width-narrow);
}


/* ==================================================
   Section
================================================== */

.section {
  position: relative;

  padding: var(--section-space) 0;
}


/* ==================================================
   Section Background
================================================== */

.section--base {
  background: var(--color-base);
}

.section--switch {
  background: var(--color-switch);
}


/* ==================================================
   Gradient
================================================== */

.bg-gradient {
  background: var(--gradient-main);
}


/* ==================================================
   Accent Color
================================================== */

.color-accent {
  color: var(--color-accent);
}

.color-sub {
  color: var(--color-sub);
}


/* ==================================================
   Basic Button
================================================== */

.btn {
  position: relative;

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

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

  padding: 12px 24px 12px 28px;

  color: var(--color-accent);
  background: transparent;

  border: 1px solid var(--color-accent);
  border-radius: 100px;

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

  line-height: 1.5;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
}


/* ==================================================
   Button Text
================================================== */

.btn__text {
  position: relative;
}

.btn__text::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -4px;

  width: 0;
  height: 1px;

  background: currentColor;

  transition: width 0.3s ease;
}


/* ==================================================
   Button Arrow
================================================== */

.btn__arrow {
  position: relative;

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

  flex-shrink: 0;

  width: 22px;
  height: 22px;

  margin-left: 25px;

  color: var(--color-white);
  background: var(--color-accent);

  border-radius: 50%;

  transition:
    width 0.3s ease,
    height 0.3s ease,
    transform 0.3s ease;
}

.btn__arrow::before {
  content: "";

  width: 5px;
  height: 5px;

  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;

  transform: rotate(45deg);
}


/* ==================================================
   Button Hover
================================================== */

.btn:hover {
  color: var(--color-accent);
}

.btn:hover .btn__text::after {
  width: 100%;
}

.btn:hover .btn__arrow {
  width: 30px;
  height: 30px;
}


/* ==================================================
   Form Button
================================================== */

.form-btn {
  position: relative;

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

  width: fit-content;
  min-width: 240px;
  min-height: 60px;

  margin: 40px auto 0;
  padding: 15px 32px;

  color: var(--color-white);
  background: var(--color-accent);

  border: 1px solid var(--color-accent);
  border-radius: 100px;

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

  cursor: pointer;

  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.form-btn p {
  color: inherit;

  line-height: 1;
}

.form-btn:hover {
  color: var(--color-accent);
  background: var(--color-white);
}


/* ==================================================
   Tablet
================================================== */

@media screen and (max-width: 1024px) {

  :root {
    --side-padding: 30px;
    --section-space: 120px;
  }

  .content-wrap {
    position: relative;

    width: 90%;

    margin-inline: auto;
  }

}


/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  :root {
    --side-padding: 20px;
    --section-space: 80px;
  }


  /* ========================================
     Body
  ======================================== */

  body {
    font-size: 14px;

    line-height: 1.8;
  }


  /* ========================================
     PC / SP
  ======================================== */

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }


  /* ========================================
     Container
  ======================================== */

  .container {
    margin-top: 56px;
  }


  /* ========================================
     Heading
  ======================================== */

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 20px;
  }

  h5 {
    font-size: 17px;
  }


  /* ========================================
     Button
  ======================================== */

  .btn {
    width: 100%;
    min-width: 0;
    min-height: 56px;

    padding: 12px 18px 12px 24px;
  }

}


/* ==================================================
   Small SP
================================================== */

@media screen and (max-width: 480px) {

  :root {
    --side-padding: 16px;
    --section-space: 70px;
  }

}



/* ==================================================
   Lower FV
================================================== */

.lower-fv {
  position: relative;

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

  width: 100%;
  min-height: 340px;

  background: linear-gradient(
    180deg,
    #F2E6EA 0%,
    #F8F3E7 50%,
    #FDFCF8 100%
  );

  overflow: hidden;
}


/* ==================================================
   Decoration
================================================== */

.lower-fv__deco {
  position: absolute;

  top: 40%;
  left: 4%;

  width: clamp(240px, 24vw, 400px);

  transform: translateY(-50%);

  pointer-events: none;
}

.lower-fv__deco img {
  display: block;

  width: 100%;
  height: auto;
}


/* ==================================================
   Content
================================================== */

.lower-fv__content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* ==================================================
   English Title
================================================== */

.lower-fv__en {
  margin-bottom: 4px;

  color: var(--color-accent);

  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 400;

  line-height: 1.4;

  letter-spacing: 0;
}


/* ==================================================
   Japanese Title
================================================== */

.lower-fv__title {
  margin: 0;

  color: var(--color-accent);

  font-family: var(--font-title);
  font-size: clamp(26px, 2vw, 34px);
  font-weight: 500;

  line-height: 1.4;

  letter-spacing: 0.04em;
}


/* ==================================================
   Tablet
================================================== */

@media screen and (max-width: 1024px) {

  .lower-fv {
    min-height: 300px;
  }

  .lower-fv__deco {
    left: -2%;

    width: 320px;
  }

}


/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  .lower-fv {
    min-height: 240px;
  }

  .lower-fv__deco {
    left: -80px;

    width: 260px;

    opacity: 0.8;
  }

  .lower-fv__en {
    margin-bottom: 5px;

    font-size: 12px;
  }

  .lower-fv__title {
    font-size: 26px;
  }

}


/* ==================================================
   Small SP
================================================== */

@media screen and (max-width: 480px) {

  .lower-fv {
    min-height: 220px;
  }

  .lower-fv__deco {
    left: -95px;

    width: 240px;
  }

  .lower-fv__title {
    font-size: 24px;
  }

}


/* ==================================================
   投稿時の改行を反映
================================================== */

.newsDetailTxt > p,
.newsDetailTxt > li,
.newsDetailTxt > ul > li,
.newsDetailTxt .content-box p,
.newsDetailTxt .faq-item__answer,
.newsDetailTxt .content-notice {
  white-space: pre-line;
}