@charset "utf-8";

/*==========================================================================
  variables
  ==========================================================================*/
:root {
  /* breakpoints */
  --pc-width: 1024px;
  --max-width: 1280px;

  /* color */
  --color-primary: #D1EAF0;
  --color-primary-light: #EBF5F8;
  --color-primary-light2: #FDFDFD;
  --color-secondary: #D4AF37;
  --color-tertiary: #E68B50;
  --color-text-black: #2C3E50;
  --color-text-white: #FDFDFD;
  --color-bg-beige: #F0EEE9;
  --color-bg-white: #FDFDFD;
  color: var(--color-text-black);

  /* font-family */
  --fontFamily: "Noto Sans JP", "Noto Sans Japanese", sans-serif;

  /* font-size */
  --fontSize-base: 4.1vw;
  --fontSize-header-xl: 9.23vw;
  --fontSize-header-l: 6.92vw;
  --fontSize-header-m: 5.89vw;
  --fontSize-header-s: 5.12vw;
  --fontSize-header-xs: 4.61vw;
  --fontSize-text: 4.1vw;
  --fontSize-text-s: 3.58vw;
  --fontSize-caption: 3.07vw;
  font-size: var(--fontSize-base);
  font-weight: 400;

  /* line-height */
  --lineHeight-base: 1.67;
  --lineHeight-header-xl: 1.39;
  --lineHeight-header-l: 1.41;
  --lineHeight-header-m: 1.3;
  --lineHeight-header-s: 1.4;
  --lineHeight-header-xs: 1.39;
  --lineHeight-text: 1.7;
  --lineHeight-text-s: 1.64;
  --lineHeight-caption: 1.67;
  line-height: var(--lineHeight-base);

  /* margin */
  --inline-base: 2.05vw;
  --block-base: calc(var(--inline-base) * 15);

  /* PC */
  @media (width >= 1024px) {
    /* font-size */
    --fontSize-base: 18px;
    --fontSize-header-xl: 5.61rem;
    --fontSize-header-l: 4.5rem;
    --fontSize-header-m: 3rem;
    --fontSize-header-s: 2rem;
    --fontSize-header-xs: 1.5rem;
    --fontSize-text: 1rem;
    --fontSize-text-s: 0.83rem;
    --fontSize-caption: 0.77rem;
    font-size: var(--fontSize-base);

    /* line-height */
    --lineHeight-base: 1.67;
    --lineHeight-header-xl: normal;
    --lineHeight-header-l: normal;
    --lineHeight-header-m: 1.3;
    --lineHeight-header-s: 1.39;
    --lineHeight-header-xs: 1.41;
    --lineHeight-text: 1.67;
    --lineHeight-text-s: 1.67;
    --lineHeight-caption: 1.64;
    line-height: var(--lineHeight-base);

    /* font-size min-width */
    --fontSizeMW-base: 0.88rem;
    --fontSizeMW-header-xl: 4.5rem;
    --fontSizeMW-header-l: 3rem;
    --fontSizeMW-header-m: 2rem;
    --fontSizeMW-header-s: 1.5rem;
    --fontSizeMW-header-xs: 1.27rem;
    --fontSizeMW-text: 0.88rem;
    --fontSizeMW-text-s: 0.77rem;
    --fontSizeMW-caption: 0.66rem;

    /* line-height min-width */
    --lineHeightMW-base: 1.69;
    --lineHeightMW-header-xl: normal;
    --lineHeightMW-header-l: 1.3;
    --lineHeightMW-header-m: 1.39;
    --lineHeightMW-header-s: 1.41;
    --lineHeightMW-header-xs: 1.44;
    --lineHeightMW-text: 1.69;
    --lineHeightMW-text-s: 1.64;
    --lineHeightMW-caption: 1.67;

    /* margin */
    --inline-base: 8px;
    --block-base: calc(var(--inline-base) * 39);
  }
}

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

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

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

html {
  font-family: var(--fontFamily);
  line-height: var(--lineHeight-base);
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-bg-white);
  color: var(--color-text);
  overflow-wrap: break-word;
  overflow-x: clip;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}
img {
  @media (width < 1024px) {
    width: 100%;
  }
}

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

button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*==========================================================================
  layout
  ==========================================================================*/
/* .container {
}
@media (width >= 1024px) {
  .container {
  }
} */

.section {
  margin-bottom: var(--block-base);
}
.section__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: calc(var(--inline-base) * 1);
  @media (width >= 1024px) {
    padding-inline: 0;
  }
}

.pd-block-base {
  padding-block: var(--block-base);
}

.content-2columns {
  display: flex;
  .content-2column {
    width: 50%;
  }
  &.flex-vertical {
    flex-direction: column;
    .content-2column {
      width: 100%;
      height: 50%;
    }
  }
}

/*==========================================================================
  header
  ==========================================================================*/
.header-xl {
  font-size: var(--fontSize-header-xl);
  font-weight: bold;
  line-height: var(--lineHeight-header-xl);
  @media (width >= 1024px) {
    font-size: clamp(var(--fontSizeMW-header-xl), calc(7.8125 * 1vw + 0.0556rem), var(--fontSize-header-xl));
    line-height: var(--lineHeight-header-xl);
  }
}
.header-l {
  font-size: var(--fontSize-header-l);
  font-weight: bold;
  line-height: var(--lineHeight-header-l);
  @media (width >= 1024px) {
    font-size: clamp(var(--fontSizeMW-header-l), calc(10.5469 * 1vw + -3rem), var(--fontSize-header-l));
    line-height: var(--lineHeight-header-l);
  }
}
.header-m {
  font-size: var(--fontSize-header-m);
  font-weight: bold;
  line-height: var(--lineHeight-header-m);
  @media (width >= 1024px) {
    font-size: clamp(var(--fontSizeMW-header-m), calc(7.0313 * 1vw + -2rem), var(--fontSize-header-m));
    line-height: var(--lineHeight-header-m);
  }
}
.header-s {
  font-size: var(--fontSize-header-s);
  font-weight: bold;
  line-height: var(--lineHeight-header-s);
  @media (width >= 1024px) {
    font-size: clamp(var(--fontSizeMW-header-s), calc(3.5156 * 1vw + -0.5rem), var(--fontSize-header-s));
    line-height: var(--lineHeight-header-s);
  }
}
.header-xs {
  font-size: var(--fontSize-header-xs);
  font-weight: bold;
  line-height: var(--lineHeight-header-xs);
  @media (width >= 1024px) {
    font-size: clamp(var(--fontSizeMW-header-xs), calc(1.5625 * 1vw + 0.3889rem), var(--fontSize-header-xs));
    line-height: var(--lineHeight-header-xs);
  }
}

/*==========================================================================
  text
  ==========================================================================*/
.text-base {
  font-size: var(--fontSize-text);
  line-height: var(--lineHeight-text);
  @media (width >= 1024px) {
    font-size: clamp(var(--fontSizeMW-text), calc(0.7813 * 1vw + 0.4444rem), var(--fontSize-text));
    line-height: var(--lineHeight-text);
  }
}
.text-s {
  font-size: var(--fontSize-text-s);
  line-height: var(--lineHeight-text-s);
  @media (width >= 1024px) {
    font-size: clamp(var(--fontSizeMW-text-s), calc(0.3906 * 1vw + 0.5556rem), var(--fontSize-text-s));
    line-height: var(--lineHeight-text-s);
  }
}
.caption {
  font-size: var(--fontSize-caption);
  line-height: var(--lineHeight-caption);
  @media (width >= 1024px) {
    font-size: clamp(var(--fontSizeMW-caption), calc(0.7813 * 1vw + 0.2222rem), var(--fontSize-caption));
    line-height: var(--lineHeight-caption);
  }
}

/*==========================================================================
  parts
  ==========================================================================*/
.speechBubble {
  position: relative;
  display: inline-block;
  padding: calc(var(--inline-base) * 1.75) calc(var(--inline-base) * 2.25);
  border-radius: calc(var(--inline-base) * 2);
  background-color: var(--color-primary);
  text-align: left;
  color: var(--color-text-black);
  &::after {
    content: "";
    position: absolute;
    border-style: solid;
    transform-origin: top;
  }
  &.tail-bottom-center {
    margin-bottom: calc(var(--inline-base) * 3);
    &::after {
      border-width: calc(var(--inline-base) * 3) calc(var(--inline-base) * 1.5) 0 calc(var(--inline-base) * 1.5);
      border-color: var(--color-primary) transparent transparent;
      translate: -50% 100%;
      bottom: 0;
      left: 50%;
    }
  }
  &.tail-bottom-left {
    margin-bottom: calc(var(--inline-base) * 3);
    &::after {
      border-width: calc(var(--inline-base) * 3) calc(var(--inline-base) * 2.5) 0 0;
      border-color: var(--color-primary) transparent transparent;
      translate: calc(-50% - 0.4px) 100%;
      bottom: 0;
      left: calc(var(--inline-base) * 8);
      transform: skew(-10deg);
    }
  }
  &.tail-bottom-right {
    margin-bottom: calc(var(--inline-base) * 3);
    &::after {
      border-width: calc(var(--inline-base) * 3) 0 0 calc(var(--inline-base) *  2.5);
      border-color: var(--color-primary) transparent transparent;
      translate: calc(-50% - 0.4px) 100%;
      bottom: 0;
      right: calc(var(--inline-base) * 4);
      transform: skew(10deg);
    }
  }
  &.tail-left-center {
    margin-left: calc(var(--inline-base) * 3);
    &::after {
      border-width: calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 3) calc(var(--inline-base) * 1.5) 0;
      border-color: transparent var(--color-primary) transparent transparent;
      translate: -100% -50%;
      top: 50%;
      left: 0;
    }
  }
  &.tail-right-center {
    margin-right: calc(var(--inline-base) * 3);
    &::after {
      border-width: calc(var(--inline-base) * 1.5) 0 calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 3);
      border-color: transparent transparent transparent var(--color-primary);
      translate: 100% -50%;
      top: 50%;
      right: 0;
    }
  }
  @media (width >= 1024px) {
    padding: calc(var(--inline-base) * 3) calc(var(--inline-base) * 4);
    border-radius: calc(var(--inline-base) * 2);
    &.tail-bottom-center {
      margin-bottom: calc(var(--inline-base) * 5);
      &::after {
        border-width: calc(var(--inline-base) * 5) calc(var(--inline-base) * 2) 0 calc(var(--inline-base) * 2);
      }
    }
    &.tail-bottom-left {
      margin-bottom: calc(var(--inline-base) * 5);
      &::after {
        border-width: calc(var(--inline-base) * 5) calc(var(--inline-base) * 4) 0 0;
        left: calc(var(--inline-base) * 8);
      }
    }
    &.tail-bottom-right {
      margin-bottom: calc(var(--inline-base) * 5);
      &::after {
        border-width: calc(var(--inline-base) * 5) 0 0 calc(var(--inline-base) * 4);
        right: calc(var(--inline-base) * 4);
      }
    }
    &.tail-left-center {
      margin-left: calc(var(--inline-base) * 5);
      &::after {
        border-width: calc(var(--inline-base) * 2) calc(var(--inline-base) * 5) calc(var(--inline-base) * 2) 0;
      }
    }
    &.tail-right-center {
      margin-right: calc(var(--inline-base) * 5);
      &::after {
        border-width: calc(var(--inline-base) * 2) 0 calc(var(--inline-base) * 2) calc(var(--inline-base) * 5);
      }
    }
  }
}

.text-line {
  position: relative;
  &::before {
    content: "";
    background-color: var(--color-primary);
    position: absolute;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
}

.button {
  display: inline-block;
  background-color: var(--color-tertiary);
  color: var(--color-text-white);
  font-size: var(--fontSize-text);
  line-height: var(--lineHeight-text);
  font-weight: bold;
  padding: calc(var(--inline-base) * 1) calc(var(--inline-base) * 4);
  border-radius: calc(var(--inline-base) * 3);
  transition: all 0.25s ease-out;
  box-shadow: 0 4px 8px rgba(230,139,80,0.3);
}
.button:hover {
  @media (width >= 1024px) {
    border-radius: calc(var(--inline-base) * 2);
  }
}

/*==========================================================================
  utility
  ==========================================================================*/
.color-primary {
  color: var(--color-primary);
}
.color-secondary {
  color: var(--color-secondary);
}
.color-tertiary {
  color: var(--color-tertiary);
}
.color-black {
  color: var(--color-text-black);
}
.color-white {
  color: var(--color-text-white);
}

.bg-primary {
  background-color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.bg-tertiary {
  background-color: var(--color-tertiary);
}
.bg-beige {
  background-color: var(--color-bg-beige);
}
.bg-white {
  background-color: var(--color-bg-white);
}
.bg-primary-light {
  background-color: var(--color-primary-light);
}

.font-bold {
  font-weight: bold;
}

/*==========================================================================
  header
  ==========================================================================*/
.header__wrapper {
  position: relative;
  &::before {
    content: "";
    display: block;
    background-color: var(--color-bg-white);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: 1000;
    width: calc(var(--inline-base) * 37.5);
    height: calc(var(--inline-base) * 10.25);
  }
  @media (width >= 1024px) {
    &::before {
      width: calc(var(--inline-base) * 75);
      height: calc(var(--inline-base) * 13.5);
    }
  }
}

.header {
  width: calc(var(--inline-base) * 37.5);
  height: calc(var(--inline-base) * 10.25);
  margin-inline: auto;
  background-color: color-mix(in srgb, var(--color-bg-beige), transparent 40%);
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 calc(var(--inline-base) * 1.875) calc(var(--inline-base) * 1.875);
  z-index: 999;
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 75);
    height: calc(var(--inline-base) * 13.5);
    border-radius: 0 0 calc(var(--inline-base) * 4) calc(var(--inline-base) * 4);
  }
}
.header__logo {
  width: calc(var(--inline-base) * 5);
  margin-bottom: calc(var(--inline-base) * 0.375);
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 6.25);
    margin-bottom: calc(var(--inline-base) * 1);
  }
}