@charset "UTF-8";
/*-------色自体を定義------------*/
/*-------scssをまたがって使用する色を定義--------------------------*/
.c-hamBtn {
  position: fixed;
  margin: 1.25rem;
  width: 44px;
  aspect-ratio: 1/1;
  border: 3px solid #94c4c1;
  background-color: var(--bg_color_base);
  cursor: pointer;
  z-index: 400;
}
.c-hamBtn.-upRight {
  top: 0;
  right: 0;
}
.c-hamBtn_text {
  display: block;
  position: absolute;
  top: 75%;
  left: 50%;
  translate: -50% -50%;
  color: #94c4c1;
  font-weight: bold;
  font-size: 11px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.js_offCanvas_open > .c-hamBtn_text {
  display: none;
}
.c-hamBtn::after, .c-hamBtn::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 80%;
  height: 3px;
  translate: -50% calc(-1 * 3px / 2);
  background-color: #94c4c1;
  rotate: 0;
  transition: rotate 200ms linear;
}
.js_offCanvas_open.c-hamBtn::after, .js_offCanvas_open.c-hamBtn::before {
  top: 50%;
}

.c-hamBtn::before {
  top: 25%;
}
.c-hamBtn.js_offCanvas_open::before {
  rotate: -45deg;
}
.c-hamBtn::after {
  top: 50%;
}
.c-hamBtn.js_offCanvas_open::after {
  rotate: 45deg;
}

.c-menuLink {
  color: #94c4c1;
  font-weight: bold;
  transition: color 200ms ease-in-out;
  cursor: pointer;
  text-decoration-line: none;
}
.c-menuLink:hover {
  color: #a97733;
  text-decoration-line: none;
}

.c-linkIcon {
  display: block;
  height: 1.5em;
  width: 1.5em;
  cursor: pointer;
}

.c-title {
  display: block;
  margin-inline: auto;
  text-align: center;
  color: #a97733;
  font-weight: bold;
  font-size: 2rem;
}

.c-mainVisual {
  text-align: center;
}
.c-mainVisual_img {
  width: 375px;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}
.c-mainVisual_title {
  font-size: 2rem;
  font-weight: bold;
  color: #a97733;
  margin-bottom: 0.75em;
}
.c-mainVisual_title > span {
  display: inline-block;
}
.c-mainVisual_text {
  font-size: 1.125rem;
  line-height: 1.7;
}
.c-mainVisual_text > p > span {
  display: inline-block;
}

.c-textBox {
  display: block;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.6;
}

.c-googleMap {
  width: 100%;
  height: min(60lvh, 25rem);
}

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

root {
  interpolate-size: allow-keywords;
}

@property --text_color_base {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}
@property --bg_color_base {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
}

html {
  --text_color_base: #000000;
  --bg_color_base: #ffffff;
}
html[data-theme=dark] {
  --text_color_base: #ffffff;
  --bg_color_base: #000000;
}

body {
  background-color: var(--bg_color_base);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--text_color_base);
  line-height: 1.2;
  font-feature-settings: "palt" 1;
  text-align: justify;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  position: relative;
  min-height: 100lvh;
  block-size: initial;
}
body.-campaign {
  background-color: #fcdfa4;
  background-image: url("/image/4year/background.webp");
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;
}

main {
  position: relative;
}

:where(img) {
  vertical-align: bottom;
  width: 100%;
}

:where(ul) {
  list-style-type: disc;
}

:where(ol) {
  list-style-type: decimal;
}

:where(li) {
  margin-left: 1.25em;
}

:where(a) {
  text-decoration: underline;
  color: #94c4c1;
}
:where(a):hover {
  text-decoration: none;
  color: #a97733;
}

@property --container_margin_inline {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}
@property --container_width {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}
@property --container_padding_block {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}
.l-container {
  --container_padding_block: 2.25rem;
  --container_width: 480px;
  --container_margin_inline: max(1em, 50cqw - var(--container_width) / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 3rem;
  position: relative;
  margin-inline: var(--container_margin_inline);
  padding-block: var(--container_padding_block);
  z-index: 100;
}
@media screen and (min-width: 48rem) {
  .l-container {
    --container_width: 1000px;
    --container_padding_block: 4rem;
  }
}
.l-container.-small {
  --container_width: 375px;
}
@media screen and (min-width: 48rem) {
  .l-container.-small {
    --container_width: 375px;
  }
}
.l-container.-medium {
  --container_width: 400px;
}
@media screen and (min-width: 48rem) {
  .l-container.-medium {
    --container_width: 600px;
  }
}
.l-container.-xs {
  --container_width: 200px;
}
.l-container.-full {
  --container_margin_inline: 0;
}
.l-container.-noPadding {
  --container_padding_block: 0;
}
.l-container.-white {
  -o-border-image: conic-gradient(white 0deg, #ffffff 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #ffffff 0deg) fill 0/1/0 100vw;
}
.l-container.-black {
  -o-border-image: conic-gradient(white 0deg, #000000 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #000000 0deg) fill 0/1/0 100vw;
}
.l-container.-gray {
  -o-border-image: conic-gradient(white 0deg, #cccccc 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #cccccc 0deg) fill 0/1/0 100vw;
}
.l-container.-mercury {
  -o-border-image: conic-gradient(white 0deg, #e6e6e6 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #e6e6e6 0deg) fill 0/1/0 100vw;
}
.l-container.-mineShaft {
  -o-border-image: conic-gradient(white 0deg, #333333 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #333333 0deg) fill 0/1/0 100vw;
}
.l-container.-armadillo {
  -o-border-image: conic-gradient(white 0deg, #534741 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #534741 0deg) fill 0/1/0 100vw;
}
.l-container.-shadowGreen {
  -o-border-image: conic-gradient(white 0deg, #94c4c1 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #94c4c1 0deg) fill 0/1/0 100vw;
}
.l-container.-aquaHaze {
  -o-border-image: conic-gradient(white 0deg, #e9f2f2 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #e9f2f2 0deg) fill 0/1/0 100vw;
}
.l-container.-dodgerBlue {
  -o-border-image: conic-gradient(white 0deg, #1ab7ff 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #1ab7ff 0deg) fill 0/1/0 100vw;
}
.l-container.-manhattan {
  -o-border-image: conic-gradient(white 0deg, #f7c085 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #f7c085 0deg) fill 0/1/0 100vw;
}
.l-container.-goldenrod {
  -o-border-image: conic-gradient(white 0deg, #fddc70 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #fddc70 0deg) fill 0/1/0 100vw;
}
.l-container.-cherokee {
  -o-border-image: conic-gradient(white 0deg, #fcdfa4 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #fcdfa4 0deg) fill 0/1/0 100vw;
}
.l-container.-cerulean {
  -o-border-image: conic-gradient(white 0deg, #0db8da 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #0db8da 0deg) fill 0/1/0 100vw;
}
.l-container.-jaffa {
  -o-border-image: conic-gradient(white 0deg, #ec6d34 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #ec6d34 0deg) fill 0/1/0 100vw;
}
.l-container.-blown {
  -o-border-image: conic-gradient(white 0deg, #a97733 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #a97733 0deg) fill 0/1/0 100vw;
}
.l-container.-red {
  -o-border-image: conic-gradient(white 0deg, #ff0000 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #ff0000 0deg) fill 0/1/0 100vw;
}
.l-container.-mandy {
  -o-border-image: conic-gradient(white 0deg, #e95e67 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #e95e67 0deg) fill 0/1/0 100vw;
}
.l-container.-sakura {
  -o-border-image: conic-gradient(white 0deg, #e2b9d6 0deg) 0/1/0 100vw;
     border-image: conic-gradient(white 0deg, #e2b9d6 0deg) fill 0/1/0 100vw;
}

.l-header {
  display: none;
  padding-block: 0.75rem;
  padding-inline-end: 1rem;
  font-size: 1.125rem;
  background-color: #ffffff;
  z-index: 200;
  box-shadow: 0 -3px 10px #333333;
}
@media screen and (min-width: 48rem) {
  .l-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    -moz-column-gap: 1em;
         column-gap: 1em;
  }
}

.l-sideMenu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  z-index: 300;
  transition: right 0ms 300ms linear;
}
.l-sideMenu.js_offCanvas_open {
  right: 0;
  transition: right 0ms;
}
@media screen and (min-width: 48rem) {
  .l-sideMenu {
    display: none;
    pointer-events: none;
  }
}
.l-sideMenu_body {
  position: absolute;
  top: 0;
  right: calc(10rem * -1);
  width: 10rem;
  height: 100lvh;
  padding-top: calc(44px + 2 * 1.25rem);
  background-color: #ffffff;
  z-index: 320;
  transform: translate3d(0, 0, 0);
  transition: transform 300ms ease-in-out;
}
.js_offCanvas_open > .l-sideMenu_body {
  transform: translate3d(-100%, 0, 0);
}
.l-sideMenu_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: calc(1rem / 2) 0.5em;
  font-size: 1.125rem;
  font-weight: bold;
  color: #94c4c1;
  text-decoration-line: none;
  cursor: pointer;
}
.l-sideMenu_item:hover {
  color: #ffffff;
  background-color: rgba(148, 196, 193, 0.9);
  box-shadow: 0 2px 6px #cccccc;
}
.l-sideMenu_shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  height: 100lvh;
  z-index: 310;
  background-color: rgba(51, 51, 51, 0.2);
  visibility: visible;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  pointer-events: none;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.js_offCanvas_open > .l-sideMenu_shadow {
  width: 100%;
  opacity: 1;
  pointer-events: initial;
}
@media screen and (min-width: 48rem) {
  .l-sideMenu_shadow {
    visibility: hidden;
  }
}

.l-pop {
  position: relative;
  padding: 0.5rem;
  border: 0.625rem solid #94c4c1;
  border-radius: 1.625rem;
  background-color: #ffffff;
}
.l-pop_headImg {
  position: relative;
  width: 15.625rem;
  margin-inline: auto;
  margin-bottom: 1em;
}
.l-pop_animation {
  position: absolute;
  bottom: 96.5%;
  right: 0;
  width: 20%;
  rotate: 0deg;
  translate: 0 0;
  animation: shake linear 2s alternate infinite;
}
.l-pop_textBox {
  background-color: #e9f2f2;
  border-radius: 0.5rem;
  padding: 0.5em 0.75em;
  text-align: center;
  font-weight: bold;
}
.l-pop_textBox.-ornament {
  position: relative;
}
.l-pop_textBox.-ornament::after, .l-pop_textBox.-ornament::before {
  content: "";
  display: block;
  position: absolute;
  top: -1em;
  width: 2em;
  height: 3em;
  background: url("/image/pointPop/pointEvent_pointEvent_raindrop.png") center/contain no-repeat;
}

.l-pop_textBox.-ornament::before {
  left: 0;
  rotate: y 180deg;
}
.l-pop_textBox.-ornament::after {
  right: 0;
}
.l-pop_head {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  margin-bottom: 0.5em;
}
.l-pop_head::after, .l-pop_head::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
  width: 1.25em;
  height: 1.25em;
  background: url("/image/pointPop/pawPad.png") center/contain no-repeat;
}

.l-pop_head::before {
  left: -2em;
}
.l-pop_head::after {
  right: -2em;
}
.l-pop_exampleBox {
  background-color: #ffffff;
  padding: 0.5em;
  margin-block: 0.5em;
  font-size: 0.625rem;
}

.l-newsList {
  font-size: 1.125rem;
  font-feature-settings: "palt" 1;
}
.l-newsList_row {
  padding-block: 0.5em;
  border-bottom: 3px dotted #a97733;
}
.l-newsList_row:first-of-type {
  border-top: 3px dotted #a97733;
}
.l-newsList_date {
  font-weight: bold;
}
.l-newsList_content {
  display: block;
  text-align: center;
  cursor: pointer;
}
.l-newsList_content > a {
  color: #94c4c1;
  font-weight: bold;
}
.l-newsList_content > a:hover {
  color: #a97733;
}

.l-productsList {
  --productList_item_width: 17.1875rem;
  --productList_gap: 2.25rem 1.25rem;
  display: grid;
  gap: var(--productList_gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--productList_item_width), 1fr));
  justify-items: center;
}
.l-productsList.-campaign {
  --productList_item_width: 18.75rem;
  --productList_gap: 3rem 2rem;
}
@media screen and (min-width: 48rem) {
  .l-productsList.-campaign {
    --productList_item_width: 25rem;
  }
}
.l-productsList_item {
  max-width: var(--productList_item_width);
}
.l-productsList_item_img {
  aspect-ratio: 7/5;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
}
.l-productsList_item_name {
  color: #ffffff;
  background-color: #94c4c1;
  text-align: center;
  font-weight: bold;
  font-size: 1.125rem;
  line-height: 1.6;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
}
.l-productsList_item_info {
  font-size: 0.875rem;
}

@property --eventLog_item_img_scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.l-eventLog {
  --eventLog_item_img_scale: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  gap: 1.5rem;
  justify-items: center;
  color: #ffffff;
}
@media screen and (min-width: 48rem) {
  .l-eventLog {
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  }
}
.l-eventLog_item {
  background-color: #94c4c1;
  padding: 0.625rem;
  border-radius: 1.5rem;
  cursor: pointer;
}
.l-eventLog_item:hover {
  --eventLog_item_img_scale: 1.05;
}
.l-eventLog_item_imgWrap {
  border-radius: calc(0.875rem);
  aspect-ratio: 12/7;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.l-eventLog_item_img {
  transition: scale 200ms ease-out;
  scale: var(--eventLog_item_img_scale);
  -o-object-position: center center;
     object-position: center center;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.l-eventLog_item_text {
  font-weight: bold;
  line-height: 1.6;
  font-size: 0.75rem;
}
.l-eventLog_item_text.-title {
  text-align: center;
  font-size: 0.875rem;
}

.l-modal {
  display: none;
  width: 100lvw;
  min-width: 18.75rem;
  height: 100lvh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
}
.l-modal_shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  height: 100lvh;
  background-color: #333333;
  opacity: 0.3;
  z-index: 10;
}
.l-modal_body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: 90%;
  max-width: 90lvh;
  max-height: 90lvh;
  min-width: calc(18.75rem - 2.5rem);
  background-color: #ffffff;
  padding: 0.625rem;
  border-radius: 1.875rem;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  z-index: 20;
  transition: all 100ms linear;
}
.l-modal_content {
  display: none;
}
.l-modal_text {
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.8;
}
.l-modal_text:first-of-type {
  margin-top: 0.75em;
}
@media screen and (min-width: 48rem) {
  .l-modal_text {
    font-size: 0.875rem;
  }
}
.l-modal_closeBtn {
  position: absolute;
  top: calc(2.5rem * -1 / 3);
  right: calc(2.5rem * -1 / 3);
  background-color: #94c4c1;
  border-radius: 50%;
  width: 2.5rem;
  aspect-ratio: 1/1;
  cursor: pointer;
  border: 4px solid #ffffff;
  transition: background-color 100ms linear;
  z-index: 90;
}
.l-modal_closeBtn:hover {
  background-color: #a97733;
}
.l-modal_closeBtn::before, .l-modal_closeBtn::after {
  content: "";
  width: 40%;
  height: 4px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.l-modal_closeBtn::before {
  rotate: -45deg;
}
.l-modal_closeBtn::after {
  rotate: 45deg;
}

.l-slider {
  position: relative;
}
.l-slider_pageWrap {
  position: relative;
  z-index: 10;
}
.l-slider_page {
  display: none;
  opacity: 0;
}
.l-slider_img {
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4/3;
  border-radius: 1.25rem;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
          user-select: none;
}
.l-slider_button {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  background-color: #94c4c1;
  width: 2.5rem;
  aspect-ratio: 1/1;
  cursor: pointer;
  border: 4px solid #ffffff;
  z-index: 20;
}
.l-slider_button:hover {
  background-color: #a97733;
}
.l-slider_button.-next::after, .l-slider_button.-prev::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  display: block;
  width: 0;
  height: 0;
  border-top: calc(2.5rem / 4) solid transparent;
  border-bottom: calc(2.5rem / 4) solid transparent;
}

.l-slider_button.-prev {
  left: 0;
  translate: -50% -50%;
}
.l-slider_button.-prev::after {
  translate: 40% -50%;
  border-left: 0;
  border-right: calc(2.5rem / 4 * 2 * 0.86) solid #ffffff;
}
.l-slider_button.-next {
  right: 0;
  translate: 50% -50%;
}
.l-slider_button.-next::after {
  translate: 60% -50%;
  border-left: calc(2.5rem * 2 * 0.86 / 4) solid #ffffff;
  border-right: 0;
}

@keyframes shake {
  0% {
    rotate: -10deg;
  }
  100% {
    rotate: 10deg;
  }
}
@property --heroImage_bgImage {
  syntax: "<url>";
  inherits: false;
  initial-value: "";
}
.l-heroImage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  overflow-y: clip;
  margin-inline: auto;
}
.l-heroImage_bgImage {
  position: absolute;
  max-width: 31.25rem;
  background-size: cover;
  background-position: center;
  background-image: var(--heroImage_bgImage);
  z-index: 0;
  min-width: clamp(10rem, 40vw, 15.625rem);
}
.l-heroImage_bgImage.-bottom {
  max-width: 62.5rem;
  min-width: none;
  width: 150%;
  aspect-ratio: 2344/444;
  left: 50%;
  bottom: 0;
  translate: -50% 0%;
}
.l-heroImage_bgImage.-rightTop {
  aspect-ratio: 600/637;
  left: 50%;
  top: 0;
  translate: 50% 0%;
}
.l-heroImage_bgImage.-rightBottom {
  aspect-ratio: 600/329;
  left: 60%;
  bottom: 0;
  translate: 30% 0%;
}
.l-heroImage_bgImage.-leftTop {
  aspect-ratio: 600/701;
  top: 0;
  right: 50%;
  translate: -50% 0%;
}
.l-heroImage_bgImage.-leftBottom {
  aspect-ratio: 600/329;
  right: 60%;
  bottom: 0;
  translate: -30% 0%;
}
.l-heroImage_figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 3rem;
  width: 100%;
  padding-block: 2rem;
}
.l-heroImage_img {
  flex: 0 0 auto;
  max-width: min(90%, 31.25rem);
}
.l-heroImage_illustrationWrap {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.l-heroImage_product {
  position: absolute;
  width: min(32%, 10rem);
}
.l-heroImage_text {
  position: absolute;
  bottom: 57%;
  left: 50%;
  translate: -136% 1%;
  max-width: min(32%, 10rem);
}
.l-heroImage_face {
  position: relative;
  left: 50%;
  translate: -50% -5%;
  width: 100%;
  max-width: min(50%, 15rem);
}
.l-heroImage_paws {
  position: absolute;
  bottom: 4%;
  max-width: min(14%, 80px);
  z-index: 1;
  animation: shake 0.5s infinite both;
  animation-timing-function: ease-in-out;
}
.l-heroImage_paws.-leftPaws {
  right: 50%;
  translate: 200% 0;
  animation-direction: alternate;
}
.l-heroImage_paws.-rightPaws {
  left: 50%;
  translate: -200% 0;
  animation-direction: alternate-reverse;
}
.l-heroImage_gradient {
  content: "";
  position: absolute;
  bottom: 0%;
  left: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 100/5;
  translate: 0 -65%;
  border-radius: 100px 100px 0 0;
  background-image: linear-gradient(180deg, mineShaft00, mineShaft8c 55%, sakuraff);
}
.l-heroImage_orphan {
  position: absolute;
  display: block;
  width: max(100lvw, 100%);
  max-width: 100%;
  left: 50%;
  bottom: 0;
  translate: -50% -1px;
}
.l-heroImage_orphan::after {
  content: "";
  display: block;
  translate: 0 min(15lvw, 10rem);
  width: 100%;
  aspect-ratio: 130/55;
  background-color: #fddc70;
  clip-path: url(#orphan_path);
}

.l-flexBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2em 1em;
}
@media screen and (min-width: 48rem) {
  .l-flexBox {
    flex-direction: row;
  }
}
.l-flexBox_item {
  flex: 0 1 auto;
}

.l-footer {
  padding-block: 0.5em;
  background-color: #94c4c1;
  color: #ffffff;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.6;
}
.l-footer a {
  color: #ffffff;
  text-decoration: underline;
}
.l-footer a:hover {
  color: #a97733;
}

@property --product_bgImage {
  syntax: "<url>";
  inherits: false;
  initial-value: "";
}
@property --product_icon {
  syntax: "<url>";
  inherits: false;
  initial-value: "";
}
.l-product {
  --product_bgImage: url("/image/4year/product_bg.webp");
  --product_icon: url("/image/4year/icon_new.webp");
  width: 100%;
  position: relative;
  background-image: var(--product_bgImage);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  aspect-ratio: 400/226;
  padding-block: 1rem;
  padding-left: 1rem;
  padding-right: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: 0.25rem;
}
.l-product.-recommend {
  --product_icon: url("/image/4year/icon_recommend.webp");
}
.l-product::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  translate: 40% -40%;
  width: 3.75rem;
  aspect-ratio: 1/1;
  background: var(--product_icon) no-repeat center center;
  background-size: contain;
}
@media screen and (min-width: 48rem) {
  .l-product::after {
    width: 5rem;
  }
}
.l-product_img {
  flex: 0 1 40%;
}
.l-product_content {
  flex: 0 1 60%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #a97733;
  font-weight: bold;
}
.l-product_title {
  flex: 0 0 50%;
  font-size: 1.125rem;
  text-align: center;
  border-bottom: 2px solid #ec6d34;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding-bottom: 0.75rem;
}
@media screen and (min-width: 48rem) {
  .l-product_title {
    font-size: 1.5rem;
  }
}
.l-product_title > span {
  display: inline-block;
}
.l-product_description {
  flex: 1 1 auto;
  padding-top: 0.75rem;
  padding-inline: 0.375rem;
  font-size: 0.6875rem;
  text-align: left;
}
@media screen and (min-width: 48rem) {
  .l-product_description {
    font-size: 0.875rem;
  }
}
.l-product_description > span {
  display: inline-block;
}

.u-fontSize-8 {
  font-size: 0.5rem;
}
.u-fontSize-10 {
  font-size: 0.625rem;
}
.u-fontSize-12 {
  font-size: 0.75rem;
}
.u-fontSize-14 {
  font-size: 0.875rem;
}
.u-fontSize-16 {
  font-size: 1rem;
}
.u-fontSize-18 {
  font-size: 1.125rem;
}
.u-fontSize-20 {
  font-size: 1.25rem;
}
.u-fontSize-22 {
  font-size: 1.375rem;
}
.u-fontSize-24 {
  font-size: 1.5rem;
}
.u-fontSize-26 {
  font-size: 1.625rem;
}
.u-fontSize-28 {
  font-size: 1.75rem;
}
.u-fontSize-30 {
  font-size: 1.875rem;
}
.u-fontSize-32 {
  font-size: 2rem;
}
.u-fontSize-34 {
  font-size: 2.125rem;
}
.u-fontSize-36 {
  font-size: 2.25rem;
}
.u-fontSize-38 {
  font-size: 2.375rem;
}
.u-fontSize-40 {
  font-size: 2.5rem;
}
.u-fontSize-42 {
  font-size: 2.625rem;
}
.u-fontSize-44 {
  font-size: 2.75rem;
}
.u-fontSize-46 {
  font-size: 2.875rem;
}
.u-fontSize-48 {
  font-size: 3rem;
}

@media screen and (max-width: 48rem) {
  .u-display_smpHidden {
    display: none;
  }
}
@media screen and (min-width: 48rem) {
  .u-display_pcHidden {
    display: none;
  }
}
.u-display_none {
  display: none;
}

.u-textAlign-center {
  text-align: center;
}
.u-textAlign-start {
  text-align: start;
}
.u-textAlign-end {
  text-align: end;
}
@media screen and (min-width: 48rem) {
  .u-textAlign-centerPc {
    text-align: center;
  }
}
@media screen and (min-width: 48rem) {
  .u-textAlign-startPc {
    text-align: start;
  }
}

.u-space_ml-auto {
  margin-left: auto;
}
.u-space_mr-auto {
  margin-right: auto;
}
.u-space_ml-em {
  margin-left: 1em;
}
.u-space_mt-0 {
  margin-top: 0rem;
}
.u-space_mr-0 {
  margin-right: 0rem;
}
.u-space_mb-0 {
  margin-bottom: 0rem;
}
.u-space_ml-0 {
  margin-left: 0rem;
}
.u-space_pt-0 {
  padding-top: 0rem;
}
.u-space_pr-0 {
  padding-right: 0rem;
}
.u-space_pb-0 {
  padding-bottom: 0rem;
}
.u-space_pl-0 {
  padding-left: 0rem;
}
.u-space_mt-4 {
  margin-top: 0.25rem;
}
.u-space_mr-4 {
  margin-right: 0.25rem;
}
.u-space_mb-4 {
  margin-bottom: 0.25rem;
}
.u-space_ml-4 {
  margin-left: 0.25rem;
}
.u-space_pt-4 {
  padding-top: 0.25rem;
}
.u-space_pr-4 {
  padding-right: 0.25rem;
}
.u-space_pb-4 {
  padding-bottom: 0.25rem;
}
.u-space_pl-4 {
  padding-left: 0.25rem;
}
.u-space_mt-8 {
  margin-top: 0.5rem;
}
.u-space_mr-8 {
  margin-right: 0.5rem;
}
.u-space_mb-8 {
  margin-bottom: 0.5rem;
}
.u-space_ml-8 {
  margin-left: 0.5rem;
}
.u-space_pt-8 {
  padding-top: 0.5rem;
}
.u-space_pr-8 {
  padding-right: 0.5rem;
}
.u-space_pb-8 {
  padding-bottom: 0.5rem;
}
.u-space_pl-8 {
  padding-left: 0.5rem;
}
.u-space_mt-12 {
  margin-top: 0.75rem;
}
.u-space_mr-12 {
  margin-right: 0.75rem;
}
.u-space_mb-12 {
  margin-bottom: 0.75rem;
}
.u-space_ml-12 {
  margin-left: 0.75rem;
}
.u-space_pt-12 {
  padding-top: 0.75rem;
}
.u-space_pr-12 {
  padding-right: 0.75rem;
}
.u-space_pb-12 {
  padding-bottom: 0.75rem;
}
.u-space_pl-12 {
  padding-left: 0.75rem;
}
.u-space_mt-16 {
  margin-top: 1rem;
}
.u-space_mr-16 {
  margin-right: 1rem;
}
.u-space_mb-16 {
  margin-bottom: 1rem;
}
.u-space_ml-16 {
  margin-left: 1rem;
}
.u-space_pt-16 {
  padding-top: 1rem;
}
.u-space_pr-16 {
  padding-right: 1rem;
}
.u-space_pb-16 {
  padding-bottom: 1rem;
}
.u-space_pl-16 {
  padding-left: 1rem;
}
.u-space_mt-20 {
  margin-top: 1.25rem;
}
.u-space_mr-20 {
  margin-right: 1.25rem;
}
.u-space_mb-20 {
  margin-bottom: 1.25rem;
}
.u-space_ml-20 {
  margin-left: 1.25rem;
}
.u-space_pt-20 {
  padding-top: 1.25rem;
}
.u-space_pr-20 {
  padding-right: 1.25rem;
}
.u-space_pb-20 {
  padding-bottom: 1.25rem;
}
.u-space_pl-20 {
  padding-left: 1.25rem;
}
.u-space_mt-24 {
  margin-top: 1.5rem;
}
.u-space_mr-24 {
  margin-right: 1.5rem;
}
.u-space_mb-24 {
  margin-bottom: 1.5rem;
}
.u-space_ml-24 {
  margin-left: 1.5rem;
}
.u-space_pt-24 {
  padding-top: 1.5rem;
}
.u-space_pr-24 {
  padding-right: 1.5rem;
}
.u-space_pb-24 {
  padding-bottom: 1.5rem;
}
.u-space_pl-24 {
  padding-left: 1.5rem;
}
.u-space_mt-28 {
  margin-top: 1.75rem;
}
.u-space_mr-28 {
  margin-right: 1.75rem;
}
.u-space_mb-28 {
  margin-bottom: 1.75rem;
}
.u-space_ml-28 {
  margin-left: 1.75rem;
}
.u-space_pt-28 {
  padding-top: 1.75rem;
}
.u-space_pr-28 {
  padding-right: 1.75rem;
}
.u-space_pb-28 {
  padding-bottom: 1.75rem;
}
.u-space_pl-28 {
  padding-left: 1.75rem;
}
.u-space_mt-32 {
  margin-top: 2rem;
}
.u-space_mr-32 {
  margin-right: 2rem;
}
.u-space_mb-32 {
  margin-bottom: 2rem;
}
.u-space_ml-32 {
  margin-left: 2rem;
}
.u-space_pt-32 {
  padding-top: 2rem;
}
.u-space_pr-32 {
  padding-right: 2rem;
}
.u-space_pb-32 {
  padding-bottom: 2rem;
}
.u-space_pl-32 {
  padding-left: 2rem;
}
.u-space_mt-36 {
  margin-top: 2.25rem;
}
.u-space_mr-36 {
  margin-right: 2.25rem;
}
.u-space_mb-36 {
  margin-bottom: 2.25rem;
}
.u-space_ml-36 {
  margin-left: 2.25rem;
}
.u-space_pt-36 {
  padding-top: 2.25rem;
}
.u-space_pr-36 {
  padding-right: 2.25rem;
}
.u-space_pb-36 {
  padding-bottom: 2.25rem;
}
.u-space_pl-36 {
  padding-left: 2.25rem;
}
.u-space_mt-40 {
  margin-top: 2.5rem;
}
.u-space_mr-40 {
  margin-right: 2.5rem;
}
.u-space_mb-40 {
  margin-bottom: 2.5rem;
}
.u-space_ml-40 {
  margin-left: 2.5rem;
}
.u-space_pt-40 {
  padding-top: 2.5rem;
}
.u-space_pr-40 {
  padding-right: 2.5rem;
}
.u-space_pb-40 {
  padding-bottom: 2.5rem;
}
.u-space_pl-40 {
  padding-left: 2.5rem;
}
.u-space_mt-44 {
  margin-top: 2.75rem;
}
.u-space_mr-44 {
  margin-right: 2.75rem;
}
.u-space_mb-44 {
  margin-bottom: 2.75rem;
}
.u-space_ml-44 {
  margin-left: 2.75rem;
}
.u-space_pt-44 {
  padding-top: 2.75rem;
}
.u-space_pr-44 {
  padding-right: 2.75rem;
}
.u-space_pb-44 {
  padding-bottom: 2.75rem;
}
.u-space_pl-44 {
  padding-left: 2.75rem;
}
.u-space_mt-48 {
  margin-top: 3rem;
}
.u-space_mr-48 {
  margin-right: 3rem;
}
.u-space_mb-48 {
  margin-bottom: 3rem;
}
.u-space_ml-48 {
  margin-left: 3rem;
}
.u-space_pt-48 {
  padding-top: 3rem;
}
.u-space_pr-48 {
  padding-right: 3rem;
}
.u-space_pb-48 {
  padding-bottom: 3rem;
}
.u-space_pl-48 {
  padding-left: 3rem;
}
.u-space_mt-52 {
  margin-top: 3.25rem;
}
.u-space_mr-52 {
  margin-right: 3.25rem;
}
.u-space_mb-52 {
  margin-bottom: 3.25rem;
}
.u-space_ml-52 {
  margin-left: 3.25rem;
}
.u-space_pt-52 {
  padding-top: 3.25rem;
}
.u-space_pr-52 {
  padding-right: 3.25rem;
}
.u-space_pb-52 {
  padding-bottom: 3.25rem;
}
.u-space_pl-52 {
  padding-left: 3.25rem;
}
.u-space_mt-56 {
  margin-top: 3.5rem;
}
.u-space_mr-56 {
  margin-right: 3.5rem;
}
.u-space_mb-56 {
  margin-bottom: 3.5rem;
}
.u-space_ml-56 {
  margin-left: 3.5rem;
}
.u-space_pt-56 {
  padding-top: 3.5rem;
}
.u-space_pr-56 {
  padding-right: 3.5rem;
}
.u-space_pb-56 {
  padding-bottom: 3.5rem;
}
.u-space_pl-56 {
  padding-left: 3.5rem;
}
.u-space_mt-60 {
  margin-top: 3.75rem;
}
.u-space_mr-60 {
  margin-right: 3.75rem;
}
.u-space_mb-60 {
  margin-bottom: 3.75rem;
}
.u-space_ml-60 {
  margin-left: 3.75rem;
}
.u-space_pt-60 {
  padding-top: 3.75rem;
}
.u-space_pr-60 {
  padding-right: 3.75rem;
}
.u-space_pb-60 {
  padding-bottom: 3.75rem;
}
.u-space_pl-60 {
  padding-left: 3.75rem;
}
.u-space_mt-64 {
  margin-top: 4rem;
}
.u-space_mr-64 {
  margin-right: 4rem;
}
.u-space_mb-64 {
  margin-bottom: 4rem;
}
.u-space_ml-64 {
  margin-left: 4rem;
}
.u-space_pt-64 {
  padding-top: 4rem;
}
.u-space_pr-64 {
  padding-right: 4rem;
}
.u-space_pb-64 {
  padding-bottom: 4rem;
}
.u-space_pl-64 {
  padding-left: 4rem;
}
.u-space_mt-68 {
  margin-top: 4.25rem;
}
.u-space_mr-68 {
  margin-right: 4.25rem;
}
.u-space_mb-68 {
  margin-bottom: 4.25rem;
}
.u-space_ml-68 {
  margin-left: 4.25rem;
}
.u-space_pt-68 {
  padding-top: 4.25rem;
}
.u-space_pr-68 {
  padding-right: 4.25rem;
}
.u-space_pb-68 {
  padding-bottom: 4.25rem;
}
.u-space_pl-68 {
  padding-left: 4.25rem;
}
.u-space_mt-72 {
  margin-top: 4.5rem;
}
.u-space_mr-72 {
  margin-right: 4.5rem;
}
.u-space_mb-72 {
  margin-bottom: 4.5rem;
}
.u-space_ml-72 {
  margin-left: 4.5rem;
}
.u-space_pt-72 {
  padding-top: 4.5rem;
}
.u-space_pr-72 {
  padding-right: 4.5rem;
}
.u-space_pb-72 {
  padding-bottom: 4.5rem;
}
.u-space_pl-72 {
  padding-left: 4.5rem;
}
.u-space_mt-76 {
  margin-top: 4.75rem;
}
.u-space_mr-76 {
  margin-right: 4.75rem;
}
.u-space_mb-76 {
  margin-bottom: 4.75rem;
}
.u-space_ml-76 {
  margin-left: 4.75rem;
}
.u-space_pt-76 {
  padding-top: 4.75rem;
}
.u-space_pr-76 {
  padding-right: 4.75rem;
}
.u-space_pb-76 {
  padding-bottom: 4.75rem;
}
.u-space_pl-76 {
  padding-left: 4.75rem;
}
.u-space_mt-80 {
  margin-top: 5rem;
}
.u-space_mr-80 {
  margin-right: 5rem;
}
.u-space_mb-80 {
  margin-bottom: 5rem;
}
.u-space_ml-80 {
  margin-left: 5rem;
}
.u-space_pt-80 {
  padding-top: 5rem;
}
.u-space_pr-80 {
  padding-right: 5rem;
}
.u-space_pb-80 {
  padding-bottom: 5rem;
}
.u-space_pl-80 {
  padding-left: 5rem;
}

.u-fontColor-white {
  color: #ffffff;
}
.u-fontColor-black {
  color: #000000;
}
.u-fontColor-gray {
  color: #cccccc;
}
.u-fontColor-mercury {
  color: #e6e6e6;
}
.u-fontColor-mineShaft {
  color: #333333;
}
.u-fontColor-armadillo {
  color: #534741;
}
.u-fontColor-shadowGreen {
  color: #94c4c1;
}
.u-fontColor-aquaHaze {
  color: #e9f2f2;
}
.u-fontColor-dodgerBlue {
  color: #1ab7ff;
}
.u-fontColor-manhattan {
  color: #f7c085;
}
.u-fontColor-goldenrod {
  color: #fddc70;
}
.u-fontColor-cherokee {
  color: #fcdfa4;
}
.u-fontColor-cerulean {
  color: #0db8da;
}
.u-fontColor-jaffa {
  color: #ec6d34;
}
.u-fontColor-blown {
  color: #a97733;
}
.u-fontColor-red {
  color: #ff0000;
}
.u-fontColor-mandy {
  color: #e95e67;
}
.u-fontColor-sakura {
  color: #e2b9d6;
}

.u-bgColor-white {
  background-color: #ffffff;
}
.u-bgColor-black {
  background-color: #000000;
}
.u-bgColor-gray {
  background-color: #cccccc;
}
.u-bgColor-mercury {
  background-color: #e6e6e6;
}
.u-bgColor-mineShaft {
  background-color: #333333;
}
.u-bgColor-armadillo {
  background-color: #534741;
}
.u-bgColor-shadowGreen {
  background-color: #94c4c1;
}
.u-bgColor-aquaHaze {
  background-color: #e9f2f2;
}
.u-bgColor-dodgerBlue {
  background-color: #1ab7ff;
}
.u-bgColor-manhattan {
  background-color: #f7c085;
}
.u-bgColor-goldenrod {
  background-color: #fddc70;
}
.u-bgColor-cherokee {
  background-color: #fcdfa4;
}
.u-bgColor-cerulean {
  background-color: #0db8da;
}
.u-bgColor-jaffa {
  background-color: #ec6d34;
}
.u-bgColor-blown {
  background-color: #a97733;
}
.u-bgColor-red {
  background-color: #ff0000;
}
.u-bgColor-mandy {
  background-color: #e95e67;
}
.u-bgColor-sakura {
  background-color: #e2b9d6;
}/*# sourceMappingURL=style.css.map */