@charset "UTF-8";
/* CSS Document */
@media (min-width: 769px) {
  .u-only--sp {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .u-only--pc {
    display: none !important;
  }
}

.is-display--none {
  display: none !important;
}

/*
==============================================================
 Reset
==============================================================
*/
*,::after,::before{box-sizing:border-box;background-repeat:no-repeat;min-height:0%}html{box-sizing:border-box;-webkit-text-size-adjust:100%;word-break:normal}body{margin:0;padding:0}h1,h2,h3,h4,h5,h6{margin:0;padding:0;display:block;line-height:1;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}p{margin:0;padding:0;display:block;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,object,video{display:block;vertical-align:middle;max-width:100%}img,svg{vertical-align:middle}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,main,nav,section,div,span,a{margin:0;padding:0;color:inherit}a:hover{color:inherit}ul,ol,li,dl,dt,dd{list-style:none;margin:0;padding:0;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding-inline-start:0;padding-inline-end:0}table{text-indent:initial;border-spacing:0}table,th,tr,td{margin:0;padding:0;border:none}address{text-decoration:none;font-style:normal}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}::before,::after{text-decoration:inherit;vertical-align:inherit}input,textarea{margin:0;padding:0;border:none}input[type="submit"],input[type="button"]{border-radius:0;-webkit-box-sizing:content-box;-webkit-appearance:button;appearance:button;border:none;box-sizing:border-box;cursor:pointer}input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration{display:none}input[type="submit"]:focus,input[type="button"]:focus{outline-offset:-2px}

/*
==============================================================
 Font preset
==============================================================
*/
:root {
  --font-jp: YakuHanJP, "Noto Sans JP", sans-serif;
  --font-en: "Google Sans Flex", sans-serif;
  /* only for font jp */
  --weight-thin: 300;
  --weight-regular: 400;
  /* size */
  --size-xs: max(11px, 1.4rem);
  --size-md: max(11px, 1.7rem);

  @media (min-width: 769px) {
    --size-xs: clamp(14px, calc(var(--scale) * 16), 20px);
    --size-md: max(16px, 1.8rem);
  }
}

body {
  font-family: var(--font-jp);
  font-weight: var(--weight-thin);
  font-size: var(--size-xs);
}

.u-bg-white,
.u-bg-white input,
.u-bg-white textarea,
.u-bg-white select,
.u-bg-white table,
.l-contents-main,
.l-contents-main input,
.l-contents-main textarea,
.l-contents-main select,
.l-contents-main table {
  font-weight: var(--weight-regular);
  font-size: var(--size-xs);
}

.u-eng {
  font-family: var(--font-en);
}

/*
==============================================================
 Color preset
==============================================================
*/
:root {
  --black: #000000;
  --black-0: #00000000;
  --black-10: #0000001A;
  --black-20: #00000033;
  --black-30: #0000004D;
  --black-40: #00000066;
  --black-50: #00000080;
  --black-60: #00000099;
  --black-70: #000000B3;
  --black-80: #000000CC;
  --black-90: #000000E6;
  --white: #FFFFFF;
  --white-0: #FFFFFF00;
  --white-10: #FFFFFF1A;
  --white-20: #FFFFFF33;
  --white-30: #FFFFFF4D;
  --white-40: #FFFFFF66;
  --white-50: #FFFFFF80;
  --white-60: #FFFFFF99;
  --white-70: #FFFFFFB3;
  --white-80: #FFFFFFCC;
  --white-90: #FFFFFFE6;
  --navy: #091A50;
  --navy-0: #091A5000;
  --navy-10: #091A501A;
  --navy-20: #091A5033;
  --navy-30: #091A504D;
  --navy-40: #091A5066;
  --navy-50: #091A5080;
  --navy-60: #091A5099;
  --navy-70: #091A50B3;
  --navy-80: #091A50CC;
  --navy-90: #091A50E6;
}

body {
  background-color: #0A0A1A;
  color: var(--white);
}

.u-bg-white {
  background-color: var(--white-90);
  color: var(--navy);
  position: relative;
  z-index: 1;
}

.u-bg-black {
  background-color: var(--black-90);
  position: relative;
  z-index: 1;
}

:root {
  /* link button circle */
  --gradient-bgblue:
    conic-gradient(from 220deg at 63% 26%,
      var(--white-20) 0%,
      var(--white-50) 24%,
      #FF5500 40%,
      #1D2088 58%,
      var(--white-10) 75%,
      var(--white-60) 81%,
      var(--white-20) 100%
  );

  --gradient:
    conic-gradient(from 220deg at 63% 26%,
      rgba(10, 10, 26, 0.05) 0%,
      rgba(10, 10, 26, 0.2) 24%,
      #FF5500 40%, #1D2088 58%,
      rgba(255, 255, 255, 0.1) 70%,
      rgba(10, 10, 26, 0.1) 83%,
      rgba(10, 10, 26, 0.05) 100%
  );

  /* line gradation */
  --line-gradient: linear-gradient(90deg,
      var(--navy-0) 0%,
      var(--navy-20) 5%,
      var(--navy-20) 50%,
      var(--navy-20) 95%,
      var(--navy-0) 100%
  );
  /* cagetegory label box line */
  --label-gradient:linear-gradient(135deg,
      var(--navy-0) 0%,
      var(--navy-20) 5%,
      var(--navy-20) 95%,
      var(--navy-0) 100%
  );
}

/*
=========================c-b=====================================
 Animation
==============================================================
*/
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--scale) * 50));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadedown {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--scale) * 50));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-fadein,
.js-loadin {
  opacity: 0;
}

.is-fadein {
  opacity: 1;
  animation: fadein 2s ease;
  animation-fill-mode: forwards;
}

.js-fadeup {
  opacity: 0;
  transform: translateY(calc(var(--scale) * 100));
  animation-fill-mode: forwards;
}

.is-fadeup {
  opacity: 1;
  transform: translateY(0);
  animation: fadeup 2s ease;
  animation-fill-mode: forwards;
}

.js-title-effect-area:not(.is-title-ready) .u-title-effect,
.js-title-effect-area:not(.is-title-ready) .u-title-effect-sub {
  visibility: hidden;
}

.u-title-effect {
  overflow: visible;
}

.u-title-effect .is-char {
  display: inline-block;
  opacity: 0;
}

.u-title-effect-load {
  visibility: hidden;
}

/* loop img */
.js-img-roop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 474 / 626;
}

.js-img-roop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.js-img-roop img:first-child {
  opacity: 1;
}

/* star */
@keyframes shimmer {
  0%, 100% { opacity: 0.9; transform: scale(0.8); }
  22%      { opacity: 1;   transform: scale(1); }
  47%      { opacity: 0.9; transform: scale(0.6); }
  68%      { opacity: 1; transform: scale(1); }
  86%      { opacity: 0.9; transform: scale(0.8); }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*
==============================================================
 Base
==============================================================
*/
html {
  min-width: calc(var(--scale) * 375);
  overflow-x: clip;
  scrollbar-gutter: stable;
}

body {
  width: 100%;
  position: relative;
}

body::before {
  content: '';
  display: block;
  inset: 0;
  background: url(../images/common/mv_bg.webp) no-repeat;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
  position: fixed;
}

a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.c-txt {
  display: grid;
  gap: calc(var(--scale) * 20);
}

.c-txt p,
.c-post-freearea p {
  font-size: var(--size-xs);
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
  line-break: strict;
  overflow-wrap: anywhere;
}

.c-txt a,
.c-post-freearea a {
  display: inline-block;
  text-decoration: underline;
}

@media (min-width: 769px) {

  .c-txt p,
  .c-post-freearea p {
    line-height: 1.9;
    letter-spacing: 0.04em;
  }
}

.c-img img,
.c-post-freearea img {
  display: block;
  width: 100%;
  object-fit: contain;
}

.c-list,
.c-post-freearea ul {
  display: grid;
  gap: calc(var(--scale) * 8);
}

.c-list li,
.c-post-freearea li {
  padding: 0 0 0 calc(var(--scale) * 18);
  font-size: var(--size-xs);
  line-height: 1.5;
  letter-spacing: 0.04em;
  position: relative;
}

.c-list li::before,
.c-post-freearea li::before {
  content: '';
  display: block;
  width: max(1px, calc(var(--scale) * 1));
  height: calc(var(--scale) * 10);
  border-radius: 50%;
  background: linear-gradient(180deg,
      rgba(9, 26, 80, 0) 0%,
      var(--navy) 40%,
      var(--navy) 60%,
      rgba(9, 26, 80, 0) 100%);
  transform: rotate(90deg);
  position: absolute;
  top: calc(var(--scale) * 6.5);
  left: calc(var(--scale) * 1.65)
}

.c-list li > .c-list,
.c-post-freearea li > ul {
  display: grid;
  gap: calc(var(--scale) * 6);
  margin: calc(var(--scale) * 6) 0 0;
}

/* Table */
.c-table,
.c-post-freearea table {
  display: block;
  width: 100%;
  position: relative;
}

.c-table::before,
.c-table tr::after,
.c-post-freearea table::before,
.c-post-freearea table tr::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 36));
  height: 2px;
  background: var(--line-gradient);
  transform: scaleY(0.5);
  position: absolute;
  left: calc(var(--scale) * -18);
}

.c-table::before,
.c-post-freearea table::before {
  top: 0;
}

.c-table tbody,
.c-post-freearea table tbody {
  display: block;
  width: 100%;
}

.c-table tr,
.c-post-freearea table tr {
  display: grid;
  gap: calc(var(--scale) * 6);
  width: 100%;
  padding: calc(var(--scale) * 16) 0;
  position: relative;
}

.c-table tr::after,
.c-post-freearea table tr::after {
  bottom: 0;
}

.c-table th,
.c-post-freearea table th {
  display: grid;
  font-weight: var(--weight-regular);
  font-size: var(--size-xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
  align-items: center;
}

.c-table td,
.c-post-freearea table td {
  display: block;
  font-size: var(--size-xs);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-table + .c-table {
  margin-top: calc(var(--scale) * 38);
}

@media (min-width: 769px) {

  .c-table::before,
  .c-table tr::after,
  .c-post-freearea table::before,
  .c-post-freearea table tr::after {
    width: calc(100% + calc(var(--scale) * 96));
    left: calc(var(--scale) * -48);
  }

  .c-table::before,
  .c-post-freearea table::before {
    top: 0;
  }

  .c-table tr,
  .c-post-freearea table tr {
    display: grid;
    grid-template-columns: calc(var(--scale) * 295) 1fr;
    gap: calc(var(--scale) * 14);
    padding: calc(var(--scale) * 29) calc(var(--scale) * 15);
  }

  .c-table th,
  .c-post-freearea table th {
    width: 100%;
  }

  .c-table td,
  .c-post-freearea table td {
    width: 100%;
  }

  .c-table + .c-table {
    margin-top: calc(var(--scale) * 48);
  }
}

/* map */
.c-map {
  margin: calc(var(--scale) * 10) 0;
  height: 0;
  overflow: hidden;
  padding-bottom: 74%;
  position: relative;
}

.c-map iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

@media (min-width: 769px) {
  .c-map {
    width: calc(var(--scale) * 448);
    padding-bottom: 57%;
  }
}

/* faq */
.l-faqarea {
  position: relative;
}

.l-faqarea::before,
.c-faq::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 36));
  height: 2px;
  background: var(--line-gradient);
  transform: scaleY(0.5);
  position: absolute;
  left: calc(var(--scale) * -18);
}

.l-faqarea::before {
  top: 0;
}

.c-faq {
  display: grid;
  gap: calc(var(--scale) * 16);
  padding: calc(var(--scale) * 20) 0;
  position: relative;
}

.c-faq::after {
  bottom: 0;
}

.c-faq--txt {
  padding: 0 0 0 calc(var(--scale) * 27);
  position: relative;
}

.c-faq--txt::before {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.5rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  position: absolute;
  top: calc(var(--scale) * 6);
  left: 0;
}

.c-faq--question::before {
  content: 'Q.';
}

.c-faq--answer::before {
  content: 'A.';
}

.c-faq--question h3 {
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.4rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.c-faq--answer {
  font-size: max(11px, 1.4rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

@media (min-width: 769px) {
  .l-faqarea {
    width: calc(var(--scale) * 960);
    margin: 0 auto;
  }

  .l-faqarea::before,
  .c-faq::after {
    width: calc(100% + calc(var(--scale) * 96));
    left: calc(var(--scale) * -48);
  }

  .c-faq {
    gap: calc(var(--scale) * 20);
    padding: calc(var(--scale) * 32) 0;
  }

  .c-faq--txt {
    padding: 0 0 0 calc(var(--scale) * 36);
  }

  .c-faq--txt::before {
    font-size: max(11px, 1.7rem);
  }

  .c-faq--question h3 {
    font-size: max(14px, 1.8rem);
  }

  .c-faq--answer {
    font-size: max(14px, 1.6rem);
  }
}

/* scrollbar */
@supports not selector(::-webkit-scrollbar) {
  .l-scrollarea {
    scrollbar-width: thin;
    scrollbar-color: var(--navy) transparent;
  }

  #p-toppage .l-scrollarea {
    scrollbar-color: var(--white) transparent;
  }
}

@supports selector(::-webkit-scrollbar) {
  .l-scrollarea::-webkit-scrollbar {
    width: calc(var(--scale) * 20);
    height: calc(var(--scale) * 20);
  }

  .l-scrollarea::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .l-scrollarea::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: 0;
  }

  .l-scrollarea::-webkit-scrollbar-thumb:vertical {
    border-right: 1px solid var(--navy);
  }

  .l-scrollarea::-webkit-scrollbar-thumb:horizontal {
    border-bottom: 1px solid var(--navy);
  }

  #p-toppage .l-scrollarea::-webkit-scrollbar-thumb:vertical {
    border-right: 1px solid var(--white);
  }

  #p-toppage .l-scrollarea::-webkit-scrollbar-thumb:horizontal {
    border-bottom: 1px solid var(--white);
  }

  .l-scrollarea::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* Toppage News Swiper scrollbar */
#p-toppage .js-top-news .swiper-scrollbar {
  width: 100%;
  height: calc(var(--scale) * 20);
  position: absolute;
  bottom: 0;
  left: 0;
  background: transparent;
  border-radius: 0;
}

#p-toppage .js-top-news .swiper-scrollbar-drag {
  height: 1px;
  position: absolute;
  bottom: 0;
  background: var(--white);
  border-radius: 0;
}

/*
==============================================================
 Button
==============================================================
*/
/* gradation line button */
@property --angle {
  syntax: '<angle>';
  initial-value: 221.33deg;
  inherits: false;
}

.c-line-button > * {
  position: relative;
}

.c-line-button > *::before,
.c-line-button > *::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: calc(var(--scale) * 3);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.c-line-button > *::before {
  background: linear-gradient(
    151.67deg,#262626 -2.83%,
    #A3A3A3 31.54%,
    #1D1D1D 67.4%,
    #9D9D9D 100.78%
  );
  z-index: 1;
}

.c-line-button > *::after {
  background: conic-gradient(
    from var(--angle) at 62.8% 25.61%,
    rgba(204, 204, 204, 0.5) 0deg,
    rgba(204, 204, 204, 0.5) 100deg,
    #FF5500 125deg,
    #1D2088 205deg,
    #CCCCCC 260deg,
    rgba(204, 204, 204, 0.5) 290deg,
    rgba(204, 204, 204, 0.5) 360deg
  );
  z-index: 2;
}

.l-headernav:not(.is-header-start) .c-line-button > *::before {
  background: linear-gradient(
    151.43deg,
    #E2E2E2 0%,
    #A3A3A3 33.43%,
    #B9B9B9 68.32%,
    #D1D1D1 100.78%
  );
}

.l-headernav:not(.is-header-start) .c-line-button > *::after {
  background: conic-gradient(
    from var(--angle) at 62.8% 25.61%,
    rgba(255, 255, 255, 0) -100.38deg,
    rgba(255, 255, 255, 0) 95.19deg,
    #FF5500 140.19deg,
    #1D2088 200.77deg,
    rgba(255, 255, 255, 0) 259.62deg,
    rgba(255, 255, 255, 0) 455.19deg
  );
}

.c-form .c-line-button > *::before {
  background: var(--navy-80);
}

.c-form .c-line-button > *::after {
  background: conic-gradient(
    from var(--angle) at 62.8% 25.61%,
    rgba(255, 255, 255, 0.4) -100.38deg,
    rgba(255, 255, 255, 0.4) 95.19deg,
    #FF5500 140.19deg, #1D2088 200.77deg,
    rgba(255, 255, 255, 0.4) 259.62deg,
    rgba(255, 255, 255, 0.4) 455.19deg);
    z-index: 2;
}

.is-spnav-show .c-line-button > * {
  background: transparent;
}

.is-spnav-show .c-line-button > *::before {
  content: none;
}

@media (min-width: 769px) {
  .c-line-button > *:hover::after{
    animation: grdline 1.5s linear infinite;
  }
}

@media (min-width: 769px) {
  .c-line-button > *:hover::after{
    animation: grdline 1.5s linear infinite;
  }
}

@keyframes grdline {
  from {
    --angle: 221.33deg;
  }

  to {
    --angle: 581.33deg;
  }
}

/* circle icon button */
@keyframes circle {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Button with Circle */
.c-button {
  --circle-size: calc(var(--scale) * 60);
  display: grid;
  width: fit-content;
  height: var(--circle-size);
  margin: calc(var(--scale) * 40) auto 0;
  align-content: center;
  align-items: center;
  position: relative;
  isolation: isolate;
}

.c-button::before {
  content: '';
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  box-sizing: border-box;
  padding: 1px;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  position: absolute;
  top: 0;
  left: 0;
}

.c-button::before {
  z-index: 1;
  background: var(--gradient);
}

.c-top-section:not(.u-bg-white) .c-button::before,
.c-page-header .c-button::before{
  background: var(--gradient-bgblue);
}

@media (min-width: 769px) {
  .c-button:hover::before{
    animation: circle 2s linear infinite;
  }
}

.c-button > * {
  display: grid;
  align-content: center;
  align-items: center;
  width: fit-content;
  height: var(--circle-size);
  padding: 0 0 0 calc(var(--circle-size) * 0.73);
  position: relative;
  z-index: 2;
  font-size: max(11px, 1.5rem);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.c-button > *::after {
  content: '';
  display: block;
  width: calc(var(--circle-size) * 0.1);
  height: calc(var(--circle-size) * 0.1);
  background: url(../images/common/ico-arrow-white.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(var(--circle-size) * 0.45);
  left: calc(var(--circle-size) * 0.45);
}

.u-bg-white .c-button > *::after,
.l-contents-main .c-button > *::after {
  background: url(../images/common/ico-arrow-blue.svg) no-repeat;
  background-size: contain;
}

@media (min-width: 769px) {
  .c-button {
    margin-top: calc(var(--scale) * 80);
    --circle-size: calc(var(--scale) * 80);
  }

  .c-button > * {
    font-size: clamp(14px, 1.85rem, 24px);
  }
}

/*
==============================================================
 Down / Up navigation
==============================================================
*/
@keyframes lightbar-down {
  0% {
    top: 0;
  }

  100% {
    top: 93%;
  }
}

@keyframes lightbar-up {
  0% {
    top: 93%;
  }

  100% {
    top: 0;
  }
}

.u-light-bar-up,
.u-light-bar-down {
  display: block;
  width: max(1px, calc(var(--scale) * 1));
  height: 100%;
  position: relative;
}

.u-light-bar-up::before,
.u-light-bar-down::before {
  content: '';
  display: block;
  width: max(1px, calc(var(--scale) * 1));
  height: 100%;
  background: var(--white-30);
  position: absolute;
  top: 0;
  left: 0;
}

.u-light-bar-up::after,
.u-light-bar-down::after {
  content: '';
  display: block;
  width: calc(var(--scale) * 10);
  height: calc(var(--scale) * 15);
  background: url(../images/toppage/ico-scrollhint.webp) no-repeat;
  background-size: contain;
  position: absolute;
  right: calc(var(--scale) * -4.5);
}

.u-light-bar-up::after {
  transform: rotate(180deg);
  animation: lightbar-up 3s linear infinite;
}

.u-light-bar-down::after {
  animation: lightbar-down 3s linear infinite;
}

.l-pagedown-nav {
  width: calc(var(--scale) * 5);
  height: calc(var(--scale) * 80);
  position: absolute;
  right: calc(var(--scale) * 20);
  bottom: 0;
  z-index: 50;
  transition: opacity 1s ease;
}

.is-footer-start.l-pagedown-nav {
  opacity: 0;
}

.is-invert.l-pagedown-nav {
  filter: invert(100%);
}

@media (min-width: 769px) {
  .l-pagedown-nav {
    display: none;
  }
}

/*
==============================================================
 Header
==============================================================
*/
:root {
  --header-height: calc(var(--scale) * 72);
}

@media (min-width: 769px) {
  :root {
    --header-height: calc(var(--scale) * 84);
  }
}

/* お知らせあり */
body:has(.l-header .c-headline) {
  --header-height: calc(var(--scale) * 98);
}

@media (min-width: 769px) {
  body:has(.l-header .c-headline) {
    --header-height: calc(var(--scale) * 114);
  }
}

.l-header {
  width: 100%;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

/* headline news */
.c-headline a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: calc(var(--scale) * 16);
  width: 100%;
  height: calc(var(--scale) * 26);
  padding: 0 calc(var(--scale) * 16);
  background-color: #FFFFFFF2;
  position: relative;
  z-index: 10;
}

.c-headline > * {
  display: grid;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  height:  calc(var(--scale) * 26);
}

.c-headline--title {
  color: var(--navy-90);
  font-family: var(--font-en);
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.1rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.c-headline--txt {
  display: block;
  padding-bottom: calc(var(--scale) * 3);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--navy);
  font-kerning: normal;
  font-size: max(11px, 1.1rem);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
}

.c-headline--time {
  color: var(--navy-90);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: max(11px, 1.1rem);
  line-height: 1.05;
  letter-spacing: 0;
}

@media (min-width: 769px) {
  .c-headline a{
    height: calc(var(--scale) * 30);
    min-height: 26px;
    padding: 0 calc(var(--scale) * 20);
  }

  .c-headline a > *{
    transition: opacity 0.5s ease;
  }

  .c-headline a:hover > *{
    opacity: 0.7;
  }

  .c-headline--title {
    font-size: max(12px, 1.3rem);
    line-height: 1;
  }

  .c-headline--txt {
    width: calc(var(--scale) * 390);
    font-size: max(12px, 1.3rem);
  }

  .c-headline--txt {
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .c-headline--time {
    font-size: max(12px, 1.3rem);
  }
}

/* header navigation */
.l-headernav {
  width: 100%;
  position: relative;
  z-index: 100;
}

.c-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(var(--scale) * 72);
  padding: 0 calc(var(--scale) * 16);
  position: relative;
}

.c-header::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.c-header-logo {
  width: calc(var(--scale) * 123);
  height: calc(var(--scale) * 40);
}

.c-header-logo a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-logo .c-header-logo--img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.c-header-logo .c-header-logo--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-header-logo-blue {
  opacity: 0;
}

.l-header-navarea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: calc(var(--scale) * 10);
  width: 100%;
}

.c-languagelist {
  display: flex;
  place-content: center;
  place-items: center;
  gap: calc(var(--scale) * 12);
  width: calc(var(--scale) * 48);
  position: relative;
}

.c-languagelist::after {
  content: '';
  display: block;
  width: 1px;
  height: calc(var(--scale) * 7);
  margin-right: calc(var(--scale) * 1.5);
  background-color: var(--white-30);
  position: absolute;
}

.c-languagelist li {
  color: var(--white);
  font-family: var(--font-en);
  font-size: max(12px, 1.1rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.c-languagelist li a {
  color: var(--white-40);
}

.c-gnavi-contact a {
  display: grid;
  place-content: center;
  place-items: center;
  width: 100%;
  height: calc(var(--scale) * 67);
  background: linear-gradient(154.1deg,
      rgba(255, 255, 255, 0.1) 34%,
      rgba(50, 50, 50, 0.1) 100%);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .c-gnavi {
    display: none;
    font-weight: var(--weight-regular);
  }

  .c-gnavi-list {
    display: grid;
    gap: calc(var(--scale) * 28);
    margin: 0 0 calc(var(--scale) * 80);
  }

  .c-gnavi-list li {
    --list-circle-size: calc(var(--scale) * 40);
    display: block;
    min-height: var(--list-circle-size);
    position: relative;
    isolation: isolate;
  }

  .c-gnavi-list li::before{
    content: '';
    width: var(--list-circle-size);
    height: var(--list-circle-size);
    border-radius: 50%;
    box-sizing: border-box;
    padding: max(1px, calc(var(--scale) * 1));
    pointer-events: none;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-gnavi-list li::before {
    z-index: 1;
    background: var(--gradient);
  }

  .c-gnavi-list li a {
    display: block;
    padding: 0 0 0 calc(var(--scale) * 52);
    position: relative;
  }

  .c-gnavi-list li a::after {
    content: '';
    display: block;
    width: calc(var(--scale) * 5);
    height: calc(var(--scale) * 7);
    background: url(../images/common/ico-arrow-blue.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: calc(var(--scale) * 17);
    left: calc(var(--scale) * 18);
  }

  .c-gnavi--en {
    display: block;
    margin: 0 0 max(2px, calc(var(--scale) * 2));
    ;
    color: var(--navy);
    font-family: var(--font-en);
    font-size: max(11px, 2.6rem);
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .c-gnavi--jp {
    display: block;
    color: var(--navy);
    font-size: max(11px, 1.2rem);
    line-height: 1.6;
    letter-spacing: 0.04em;
    vertical-align: bottom;
  }

  .c-gnavi-contact {
    display: none;
  }

  .c-gnavi-contact .c-gnavi--en {
    margin-bottom: 0;
  }

  .c-spnav-button {
    display: grid;
    place-content: center;
    place-items: center;
    height: calc(var(--scale) * 22);
    width: calc(var(--scale) * 22);
    gap: calc(var(--scale) * 4);
    cursor: pointer;
    position: relative;
    z-index: 150;
  }

  .c-spnav-line {
    display: block;
    width: calc(var(--scale) * 22);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        #FFFFFF 25%,
        #FFFFFF 75%,
        rgba(255, 255, 255, 0) 100%);
  }

  /* SPmenu open */
  body:has(.is-spnav-show) {
    overflow: hidden;
    position: fixed;
  }

  .is-spnav-show.l-headernav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
  }

  .is-spnav-show .c-header {
    display: block;
    width: 100%;
    height: fit-content;
    padding: calc(var(--scale) * 64) calc(var(--scale) * 30);
    color: var(--navy);
  }

  .is-spnav-show .c-header::before {
    animation: fadein 0.5s ease;
    opacity: 1;
    background-color: var(--white);
  }

  .is-spnav-show .c-header-logo {
    width: calc(var(--scale) * 167);
    height: calc(var(--scale) * 52);
    margin: 0 0 calc(var(--scale) * 64);
  }

  .is-spnav-show .c-header-logo-white {
    opacity: 0 !important;
  }

  .is-spnav-show .c-header-logo-blue {
    opacity: 1 !important;
  }

  .is-spnav-show .c-languagelist::after {
    background-color: var(--navy-50) !important;
  }

  .is-spnav-show .c-languagelist li {
    color: var(--navy) !important;
  }

  .is-spnav-show .c-languagelist li a {
    color: var(--navy-50) !important;
  }

  .is-spnav-show .l-header-navarea {
    display: grid;
    align-items: initial;
    justify-content: initial;
  }

  .is-spnav-show .c-gnavi {
    display: grid;
    width: 100%;
    height: auto;
    order: -1;
  }

  .is-spnav-show .c-gnavi-contact {
    display: block;
    order: -1;
    margin: 0 0 calc(var(--scale) * 48);
  }

  .is-spnav-show .c-spnav-button {
    width: calc(var(--scale) * 30);
    height: calc(var(--scale) * 22);
    position: absolute;
    top: calc(var(--scale) * 46);
    right: calc(var(--scale) * 31);
  }

  .is-spnav-show .c-spnav-button .c-spnav-line {
    background: linear-gradient(90deg,
        rgba(9, 26, 80, 0) 0%,
        #091A50 25%,
        #091A50 75%,
        rgba(9, 26, 80, 0) 100%);
    position: relative;
    right: 0;
  }

  .is-spnav-show .c-spnav-button .c-spnav-line:nth-of-type(1) {
    transform: rotate(-30deg);
    top: calc(var(--scale) * 2.5);
  }

  .is-spnav-show .c-spnav-button .c-spnav-line:nth-of-type(2) {
    display: none;
  }

  .is-spnav-show .c-spnav-button .c-spnav-line:nth-of-type(3) {
    transform: rotate(30deg);
    top: calc(var(--scale) * -2.5);
  }
}

@media (min-width: 769px) {
  .c-header {
    height: calc(var(--scale) * 84);
  }

  .c-header-logo {
    width: calc(var(--scale) * 167);
    height: calc(var(--scale) * 52);
  }

  .c-gnavi {
    display: flex;
    align-items: center;
    gap: calc(var(--scale) * 32);
  }

  .c-gnavi-list {
    display: flex;
    gap: calc(var(--scale) * 20);
    align-items: center;
  }

  .c-gnavi-list li a {
    display: block;
  }

  .c-gnavi-contact a {
    width: calc(var(--scale) * 104);
    height: calc(var(--scale) * 42);
  }

  .c-gnavi--en {
    margin: 0;
    font-family: var(--font-en);
    font-size: max(14px, 1.5rem);
    line-height: 1;
    letter-spacing: 0;
  }

  .c-gnavi--jp {
    display: none;
  }

  .c-spnav-button {
    display: none;
  }

  .c-languagelist {
    gap: calc(var(--scale) * 14);
    width: calc(var(--scale) * 60);
  }

  .c-languagelist li {
    font-size: max(12px, 1.3rem);
  }

  .c-languagelist li a {
    transition: color 0.5s ease;
  }

  .c-languagelist li a:hover {
    color: var(--white) !important;
  }
}

/* header fix and color change */
/* 通常時：背景白系 */
.l-headernav:not(.is-header-start) {
  font-weight: var(--weight-regular);
  color: var(--navy);
  position: fixed;
  top: 0;
}

.l-headernav:not(.is-header-start) .c-header::before {
  animation: fadein 1s ease;
  opacity: 1;
}

.l-headernav:not(.is-header-start) .c-header-logo-white {
  opacity: 0;
}

.l-headernav:not(.is-header-start) .c-header-logo-blue {
  opacity: 1;
}

.l-headernav:not(.is-header-start) .c-languagelist::after {
  background-color: var(--navy-30);
}

.l-headernav:not(.is-header-start) .c-languagelist li {
  color: var(--navy);
}

.l-headernav:not(.is-header-start) .c-languagelist li a {
  color: var(--navy-40);
}

.l-headernav:not(.is-header-start) .c-languagelist li a:hover {
  color: var(--navy) !important;
}

.l-headernav:not(.is-header-start) .c-spnav-button .c-spnav-line {
  background: linear-gradient(90deg,
    var(--navy-0) 0%,
    var(--navy) 25%,
    var(--navy) 75%,
    var(--navy-0) 100%
  );
}

/* is-header-start：背景黒系 */
.l-headernav.is-header-start {
  background-color: transparent;
  color: var(--white);
}

.l-headernav.is-header-start .c-header-logo-white {
  opacity: 1;
}

.l-headernav.is-header-start .c-header-logo-blue {
  opacity: 0;
}

.l-headernav.is-header-start .c-languagelist::after {
  background-color: var(--white-30);
}

.l-headernav.is-header-start .c-languagelist li {
  color: var(--white);
}

.l-headernav.is-header-start .c-languagelist li a {
  color: var(--white-40);
}

.l-headernav.is-header-start .c-gnavi--en,
.l-headernav.is-header-start .c-languagelist {
  font-weight: 300;
}

.l-headernav.is-header-start .c-spnav-button .c-spnav-line {
  filter: none;
}

/*
==============================================================
 Footer
==============================================================
*/
/* footer contact */
.c-footer-contact {
  display: grid;
  width: 100%;
  height: 100%;
  padding: calc(var(--scale) * 120) calc(var(--scale) * 36) calc(var(--scale) * 96);
  background-color: #1C3361;
  overflow: clip;
  position: relative;
}

.l-footer-contact-bgarea {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.c-footer-contact-bg {
  display: block;
  background: radial-gradient(ellipse at center,
      var(--ellipse-color) 0%,
      var(--ellipse-color) 30%,
      transparent 60%,
      transparent 100%);
  mix-blend-mode: normal;
  border-radius: 50%;
  filter: blur(calc(var(--scale) * 40));
  transition:
    top 2.5s cubic-bezier(0.22, 1, 0.36, 1),
    left 2.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1.0) rotate(var(--ellipse-rotate));
  position: absolute;
}

.is-contact-in .c-footer-contact-bg {
  transform: scale(3.0) rotate(var(--ellipse-rotate));
}

.u-bg-ellipse-00 {
  --ellipse-color: rgba(245, 250, 255, 0.5);
  --ellipse-rotate: 45deg;
  width: calc(var(--scale) * 480);
  height: calc(var(--scale) * 1100);
  top: calc(var(--scale) * -1200);
  left: calc(var(--scale) * -1100);
  z-index: 6;
}

.is-contact-in .u-bg-ellipse-00 {
  top: calc(var(--scale) * -520);
  left: calc(var(--scale) * -557);
}

.u-bg-ellipse-01 {
  --ellipse-color: rgba(245, 250, 255, 0.5);
  --ellipse-rotate: -43deg;
  width: calc(var(--scale) * 671);
  height: calc(var(--scale) * 537);
  top: calc(var(--scale) * -532);
  left: calc(var(--scale) * 167);
  z-index: 5;
}

.is-contact-in .u-bg-ellipse-01 {
  top: calc(var(--scale) * -620.74);
  left: calc(var(--scale) * 559.41);
}

.u-bg-ellipse-02 {
  --ellipse-color: rgba(51, 115, 148, 0.45);
  width: calc(var(--scale) * 600);
  height: calc(var(--scale) * 550);
  top: calc(var(--scale) * -100.01);
  left: calc(var(--scale) * -200);
  z-index: 4;
}

.is-contact-in .u-bg-ellipse-02 {
  top: calc(var(--scale) * 318);
  left: calc(var(--scale) * 836);
}

.u-bg-ellipse-03 {
  --ellipse-color: rgba(38, 97, 107, 0.3);
  width: calc(var(--scale) * 600);
  height: calc(var(--scale) * 500);
  top: calc(var(--scale) * 230);
  left: calc(var(--scale) * -228);
  z-index: 3;
}

.is-contact-in .u-bg-ellipse-03 {
  top: calc(var(--scale) * 150);
  left: calc(var(--scale) * 50);
}

.u-bg-ellipse-04 {
  --ellipse-color: rgba(229, 242, 255, 0.28);
  --ellipse-rotate: 41deg;
  width: calc(var(--scale) * 434);
  height: calc(var(--scale) * 1458);
  top: calc(var(--scale) * -282);
  left: calc(var(--scale) * -142);
  z-index: 2;
}

.is-contact-in .u-bg-ellipse-04 {
  top: calc(var(--scale) * -53);
  left: calc(var(--scale) * -142);
}

.u-bg-ellipse-05 {
  --ellipse-color: rgba(18, 33, 82, 0.6);
  width: calc(var(--scale) * 700);
  height: calc(var(--scale) * 750);
  top: calc(var(--scale) * 50);
  left: calc(var(--scale) * 850);
  z-index: 1;
}

.u-bg-ellipse-06 {
  --ellipse-color: rgba(19, 20, 74, 0.45);
  width: calc(var(--scale) * 900);
  height: calc(var(--scale) * 550);
  top: calc(var(--scale) * 475);
  left: calc(var(--scale) * 444);
  z-index: 0;
}

.is-contact-in .u-bg-ellipse-06 {
  top: calc(var(--scale) * 318);
  left: calc(var(--scale) * 836);
}

.c-footer-contact--title {
  margin: 0 0 calc(var(--scale) * 16);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 6.8rem);
  line-height: 100%;
  letter-spacing: 0%;
  position: relative;
  z-index: 5;
}

.c-footer-contact--txt {
  display: grid;
  gap: calc(var(--scale) * 24);
  margin: 0 0 calc(var(--scale) * 52);
  position: relative;
  z-index: 5;
}

.c-footer-contact--txt h2,
.c-footer-contact--txt p {
  font-weight: var(--weight-thin);
  font-size: var(--size-md);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.c-footer-contact--txt p .u-small {
  font-size: max(11px, 1.4rem);
}

.c-footer-contact-link-cursor {
  --cursor-size: calc(var(--scale) * 110);
  width: var(--cursor-size);
  height: var(--cursor-size);
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.c-footer-contact-link-cursor::before {
  content: '';
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  box-sizing: border-box;
  padding: max(1px, calc(var(--scale) * 1));
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  position: absolute;
  top: 0;
  left: 0;
}

.c-footer-contact-link-cursor::before {
  z-index: 1;
  background: var(--gradient-bgblue);
}

.c-footer-contact-link-cursor a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-footer-contact-link-cursor a::after {
  content: '';
  display: block;
  width: calc(var(--cursor-size) * 0.1);
  height: calc(var(--cursor-size) * 0.1);
  background: url(../images/common/ico-arrow-white.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(var(--scale) * 50);
  left: calc(var(--scale) * 53);
}

@media (min-width: 769px) {
  .c-footer-contact {
    padding: calc(var(--scale) * 200) calc(var(--scale) * 20) calc(var(--scale) * 226);
  }

  .l-footer-contact-bgarea {
    width: calc(var(--scale) * 1440);
  }

  .c-footer-contact--title {
    margin: 0 0 calc(var(--scale) * 8);
    font-size: max(11px, 18.6rem);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
  }

  .c-footer-contact--txt {
    display: grid;
    gap: calc(var(--scale) * 32);
    margin: 0;
    text-align: center;
  }

  .c-footer-contact--txt p .u-small {
    font-size: max(14px, 1.6rem);
  }

  .c-footer-contact-link-cursor {
    --cursor-size: calc(var(--scale) * 172);
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: calc(var(--scale) * -10);
    left: calc(var(--scale) * -10);
  }

  .is-contact-in .c-footer-contact-link-cursor {
    pointer-events: visible;
    opacity: 1;
  }

  .c-footer-contact-link-cursor a::after {
    top: calc(var(--scale) * 80);
    left: calc(var(--scale) * 80);
  }

  .c-footer-contact-link-cursor:hover::before,
  .c-footer-contact-link-cursor:hover::after {
    animation: circle 2s linear infinite;
  }

  .c-footer-contact-link-cursor:hover::after {
    animation-delay: 0.1s;
  }
}

/* footer navi */
.c-footer {
  padding: calc(var(--scale) * 80) 0 calc(var(--scale) * 116);
}

.l-footer-inner {
  padding: 0 calc(var(--scale) * 16);
  position: relative;
}

.c-footer-logo a {
  display: block;
  width: calc(var(--scale) * 210);
  height: calc(var(--scale) * 65);
  margin: 0 0 calc(var(--scale) * 85);
  position: relative;
}

.c-copyright {
  display: block;
  color: var(--white-50);
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 300;
  position: absolute;
  bottom: calc(var(--scale) * 5);
  left: 0;
}

.c-footer-navi {
  display: grid;
  align-content: start;
  gap: calc(var(--scale) * 24);
}

.c-footer-navlist {
  display: grid;
  gap: calc(var(--scale) * 24);
  align-content: start;
  padding: 0 calc(var(--scale) * 14);
}

.c-footer-navlist li a {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.5rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.c-footer-languagelist {
  padding: 0;
  position: absolute;
  right: calc(var(--scale) * 35);
  bottom: 0;
}

.c-footer-languagelist li {
  font-size: max(12px, 1.4rem);
}

.c-footer-pagetop {
  width: calc(var(--scale) * 27);
  height: calc(var(--scale) * 83);
  cursor: pointer;
  position: absolute;
  top: calc(var(--scale) * 82);
  right: calc(var(--scale) * 26);
}

.l-footer-pagetop--bar {
  position: absolute;
  top: 0;
  right: 0;
}

.c-footer-pagetop--txt {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  transform: rotate(90deg);
  transform-origin: top left;
  position: relative;
  top: 0;
  right: calc(var(--scale) * -15);
}

@media (min-width: 769px) {
  .c-footer {
    width: 100%;
    padding: calc(var(--scale) * 160) 0 calc(var(--scale) * 88);
  }

  .l-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--scale) * 100);
    width: calc(var(--scale) * 1330);
    margin: 0 auto;
    padding: 0 calc(var(--scale) * 54) 0 0;
  }

  .c-footer-logo {
    flex-shrink: 0;
  }

  .c-footer-logo a {
    width: calc(var(--scale) * 340);
    height: calc(var(--scale) * 106);
    margin: 0;
  }

  .c-copyright {
    font-size: 1.4rem;
    bottom: calc(var(--scale) * 16);
  }

  .c-footer-navi {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    width: calc(var(--scale) * 572);
    justify-content: space-between;
  }

  .c-footer-navlist {
    padding: 0;
  }

  .c-footer-navlist li a {
    font-size: max(12px, 1.7rem);
  }

  .l-footer-navi-lastbox {
    display: grid;
    align-content: start;
    gap: calc(var(--scale) * 32);
  }

  .c-footer-languagelist {
    width: fit-content;
    place-content: center;
    position: relative;
    right: auto;
    bottom: auto;
    left: 0;
  }

  .c-footer-languagelist::after {
    height: calc(var(--scale) * 12);
  }

  .c-footer-languagelist li {
    font-weight: 300;
    font-size: max(12px, 1.5rem);
  }

  .c-footer-pagetop {
    flex-shrink: 0;
    width: calc(var(--scale) * 50);
    height: calc(var(--scale) * 106);
    position: relative;
    top: 0;
    right: 0;
  }

  .c-footer-pagetop--txt {
    font-size: max(13px, 1.5rem);
    position: relative;
    top: 0;
    right: calc(var(--scale) * -40);
    transition: opacity 1s ease;
  }

  .c-footer-pagetop:hover .c-footer-pagetop--txt{
    opacity: 0.5;
  }
}

.c-footer-end {
  padding: calc(var(--scale) * 130) 0 0;
}

.c-footer-end--img {
  width: calc(var(--scale) * 141);
  height: calc(var(--scale) * 141);
  margin: 0 auto calc(var(--scale) * 61);
  position: relative;
  z-index: 1;
}

.c-footer-end--img img {
  display: block;
  width: calc(var(--scale) * 141);
  height: calc(var(--scale) * 141);
  transform-origin: center;
  animation: shimmer 6s ease-in-out infinite, rotation 120s linear infinite;
}

.c-footer-end-copy {
  display: grid;
  place-content: center;
  place-items: center;
  gap: calc(var(--scale) * 4);
}

.c-footer-end-copy--jp {
  display: block;
  font-size: max(11px, 2.3rem);
  line-height: 1.36;
  letter-spacing: 0.1em;
}

.c-footer-end-copy--en {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.8rem);
  line-height: 1.22;
  letter-spacing: 0.015em;
}

.is-title-on.c-footer-end-copy--en {
  animation-delay: 0.3s;
}

@media (min-width: 769px) {
  .c-footer-end {
    padding: calc(var(--scale) * 88) 0 calc(var(--scale) * 0);
  }

  .c-footer-end--img {
    display: grid;
    place-content: center;
    width: calc(var(--scale) * 200);
    height: calc(var(--scale) * 200);
    margin: 0 auto;
  }

  .c-footer-end--img img {
    display: block;
    width: calc(var(--scale) * 120);
    height: calc(var(--scale) * 120);
  }

  .c-footer-end-copy--jp {
    font-size: max(11px, 2.64rem);
  }

  .c-footer-end-copy--en {
    letter-spacing: 0.01em;
  }

  .c-footer-end-copy--en {
    font-size: max(11px, 2.1rem);
  }
}

/*
==============================================================
 Toppage
==============================================================
/* MV */
.c-top-mv {
  height: 100dvh;
  position: relative;
  overflow: clip;
}

.c-top-mv--img {
  width: calc(var(--scale) * 312);
  height: calc(var(--scale) * 312);
  transform: scale(8.5);
  position: absolute;
  top: calc(50dvh - calc(var(--scale) * 156));
  left: calc(50% - calc(var(--scale) * 156));
  pointer-events: none;
}

.c-top-mv--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-top-light--img {
  display: grid;
  place-content: center;
  width: calc(var(--scale) * 312);
  height: calc(var(--scale) * 312);
  transform: scale(0.6);
  animation: shimmer 6s ease-in-out infinite, rotation 120s linear infinite;
  position: absolute;
  top: calc(50dvh - calc(var(--scale) * 156));
  left: calc(50% - calc(var(--scale) * 156));
  pointer-events: none;
}

.c-mv-light--small,
.c-mv-light--big {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.c-mv-light--small img,
.c-mv-light--big img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.l-top-mv-inner {
  display: block;
  width: 100%;
  height: fit-content;
  position: absolute;
  left: 0;
  bottom: calc(var(--scale) * 56);
}

.c-top-copy--jp {
  display: block;
  margin: 0 0 max(2px, calc(var(--scale) * 2));
  font-weight: var(--weight-thin);
  font-size: max(11px, 2.2rem);
  line-height: 1.36;
  letter-spacing: 0.1em;
  text-align: center;
}

.c-top-copy--en {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.75rem);
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
}

.l-credit {
  position: absolute;
  left: calc(var(--scale) * 20);
  bottom: calc(50% - var(--scale) * 120);
  z-index: 10;
}

.c-credit {
  display: block;
  color: var(--white);
  opacity: 0.3;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
}

@media (min-width: 769px) {
  .c-top-mv {
    height: 100dvh;
  }

  .l-top-imgarea {
    position: relative;
    top: calc(var(--scale) * 120);
    transform: translateX(calc(var(--scale) * 100));
  }

  .c-top-mv--img {
    width: calc(var(--scale) * 480);
    height: calc(var(--scale) * 480);
    transform: scale(6.5);
    top: calc(50dvh - calc(var(--scale) * 240));
    left: calc(50% - calc(var(--scale) * 240));
  }

  .c-top-light--img {
    width: calc(var(--scale) * 480);
    height: calc(var(--scale) * 480);
    transform: scale(0.8);
    top: calc(50dvh - calc(var(--scale) * 240));
    left: calc(50% - calc(var(--scale) * 240));
  }

  .l-top-mv-inner {
    justify-content: start;
    align-content: center;
    width: calc(var(--scale) * 1226);
    height: fit-content;
    min-height: auto;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: calc(50dvh - (var(--scale) * -72));
    bottom: auto;
    z-index: 10;
  }

  .c-top-copy--jp {
    margin: 0;
    font-size: clamp(21px, 3.6rem, 42px);
    text-align: left;
  }

  .c-top-copy--en {
    font-size: clamp(11px, 2.94rem, 34.2px);
    text-align: left;
  }

  .l-credit {
    left: auto;
    right: calc(var(--scale) * 20);
    bottom: calc(var(--scale) * 20);
  }

  .c-credit {
    font-size: max(11px, 1.1rem);
  }
}

/* MV animation */
html.is-scroll-lock,
body.is-scroll-lock {
  overflow: hidden;
}

body:has(#p-toppage)::before {
  opacity: 0;
  transition: opacity 1s ease;
}

body:has(#p-toppage).is-top-load-01::before {
  opacity: 1;
}

.c-top-mv--img {
  opacity: 0.1;
  transition: opacity 0.5s ease;
}

.is-top-load-01 .c-top-mv--img {
  opacity: 1;
}

.c-top-light--img img {
  opacity: 0;
  transition: opacity 1s ease;
}

.is-top-load-02 .c-top-light--img img {
  opacity: 1;
}

.l-credit {
  opacity: 0;
  transition: opacity 2s ease;
}

.is-top-load-03 .l-credit {
  opacity: 1;
}

@media (max-width: 768px) {
  .l-pagedown-nav {
    opacity: 0;
    transition: opacity 2s ease;
  }

  .is-top-load-03 .l-pagedown-nav {
    opacity: 1;
  }
}

/* top contents */
.c-top-section {
  width: 100%;
  position: relative;
}

.l-top-contents-inner {
  width: 100%;
  padding: 0 calc(var(--scale) * 20);
}

.l-top-bgarea {
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  position: fixed;
}

.c-top-bg--img {
  opacity: 0;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 2s ease;
  position: absolute;
}

.c-top-bg-01 {
  background-image: url('../images/toppage/bg-grd-01.webp');
}

.c-top-bg-02 {
  background-image: url('../images/toppage/bg-grd-02.webp');
}

.c-top-bg-03 {
  background-image: url('../images/toppage/bg-grd-03.webp');
}

.c-top-bg-04 {
  background-image: url('../images/toppage/bg-grd-04.webp');
}

.c-top-bg--img.is-topbg-active {
  opacity: 1;
}

.c-top-section-title {
  display: block;
  margin: 0 0 calc(var(--scale) * 40);
}

.c-top-section-title--en {
  display: block;
  margin: 0 0 calc(var(--scale) * 16);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.c-top-section-title--jp {
  display: block;
  font-weight: var(--weight-thin);
  font-size: max(11px, 2.4rem);
  line-height: 1.36;
  letter-spacing: 0.1em;
}

.u-bg-white .c-top-section-title--jp {
  font-weight: var(--weight-regular);
}

.c-top-solution {
  padding: calc(var(--scale) * 150) 0 calc(var(--scale) * 120);
}

.c-top-solution .c-top-section-title {
  text-align: center;
}

.c-top-products {
  padding: calc(var(--scale) * 80) 0;
  overflow: clip;
}

.c-top-products .c-top-section-title {
  gap: 0;
}

.c-top-products .c-top-section-title--en {
  margin-bottom: calc(var(--scale) * 20);
}

.c-top-products--title {
  padding: 0 0 0 calc(var(--scale) * 15);
  position: relative;
}

.c-top-products--title::before {
  content: '';
  display: block;
  width: max(1px, calc(var(--scale) * 1));
  height: calc(var(--scale) * 6);
  transform: rotate(90deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #0A0A1A 40%, #0A0A1A 60%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: calc(var(--scale) * 21);
  left: 0;
}

.c-top-products--title .u-title--big {
  display: block;
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.4rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-top-products--title .u-title--small {
  display: block;
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.1rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-top-products--copy {
  display: grid;
  justify-content: end;
  width: 100%;
  margin: 0 0 calc(var(--scale) * -19);
  background: linear-gradient(270deg, rgba(75, 116, 153, 0.7) 0.55%, rgba(104, 113, 138, 0.7) 88.55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 6.7rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-align: right;
  position: relative;
  right: calc(var(--scale) * -12);
  top: calc(var(--scale) * -41);
}

.c-top-service {
  padding: calc(var(--scale) * 80) 0;
}

.c-top-service .c-top-section-title--jp {
  font-size: max(11px, 2.2rem);
  font-size: clamp(11px, 2.2rem, 38px);
  letter-spacing: 0;
}

.c-top-services--img {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 calc(var(--scale) * 21);
}

.c-top-services--img img {
  height: 100%;
  object-fit: cover;
}

.c-top-heritage {
  padding: calc(var(--scale) * 80) 0 calc(var(--scale) * 296);
}

.c-top-heritage .c-top-section-title--jp {
  letter-spacing: 0.04em;
}

.c-top-heritage--img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0,
      #000 80%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      #000 0,
      #000 80%,
      transparent 100%);
  position: absolute;
  bottom: calc(var(--scale) * 140);
  right: 0;
}

.l-top-heritage-scrollarea {
  padding: calc(var(--scale) * 8) 0 0;
  margin: 0 0 calc(var(--scale) * 48);
  height: calc(var(--scale) * 350);
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%, #000 12%,
      #000 88%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      #000 12%, #000 88%,
      transparent 100%);
  overflow: hidden;
}

.c-top-heritage-scroll {
  width: 100%;
  overflow: visible;
}

.c-top-heritage-scroll .swiper-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(var(--scale) * 25);
}

.c-top-heritage-scroll .swiper-slide {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.c-top-heritage--table {
  display: block;
  width: 100%;
  position: relative;
}

.c-top-heritage--table tbody {
  display: block;
}

.c-top-heritage--table tr {
  display: block;
}

.c-top-heritage--table th {
  display: block;
  padding: calc(var(--scale) * 8) 0;
  font-weight: var(--weight-thin);
  font-size: max(11px, 1.4rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: left;
}

.c-top-heritage--table td {
  display: inline-block;
  padding: 0 0 calc(var(--scale) * 8);
  color: var(--white-50);
  margin: 0 calc(var(--scale) * 12) 0 0;
  font-weight: var(--weight-thin);
  font-size: max(11px, 1.2rem);
  line-height: 1;
  letter-spacing: 0.06em;
}

.c-top-heritage--table td.u-time {
  font-family: var(--font-en);
}

.c-top-heritage--txt {
  position: relative;
}

.c-top-heritage--button {
  margin: calc(var(--scale) * 40) auto;
}

.c-top-news {
  padding: calc(var(--scale) * 80) 0;
}

.c-top-news .c-top-section-title {
  gap: calc(var(--scale) * 16);
  text-align: center;
}

.c-top-news .c-top-section-title--jp {
  letter-spacing: 0.04em;
}

.c-top-news-list {
  display: grid;
  gap: calc(var(--scale) * 16);
}

@property --top-box-angle {
  syntax: '<angle>';
  initial-value: 151.67deg;
  inherits: true;
}

@keyframes top-box-angle {
  from {
    --top-box-angle: 151.67deg;
  }

  to {
    --top-box-angle: 241.67deg;
  }
}

.c-top-news-list .c-news-list-item {
  --top-box-angle: 151.67deg;
  background: linear-gradient(154.1deg,
      rgba(255, 255, 255, 0.0858) 34.3%,
      rgba(50, 50, 50, 0.13) 99.79%) !important;
  /* 角度を transition で補間（inherits:true なので ::before へ継承され、行き帰り両方滑らかに） */
  transition: --top-box-angle 0.5s ease;
}

.c-top-news-list .c-news-list-item::before {
  background: linear-gradient(var(--top-box-angle),
    #325083 -2.83%,
    rgba(250, 250, 250, 0.3) 31.54%,
    #325083 67.4%,
    rgba(250, 250, 250, 0.3) 100.78%) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.c-top-news-list .c-news-list-category-list li {
  background-color: var(--white-10);
}

.c-top-news-list .c-news-list-category-list li::before {
  border: max(1px, calc(var(--scale) * 1)) solid var(--white-20);
}

.c-top-about {
  padding: calc(var(--scale) * 92) 0 calc(var(--scale) * 80);
}

.c-top-about .c-top-section-title {
  text-align: center;
}

.c-top-about--logo {
  width: calc(var(--scale) * 260);
  height: calc(var(--scale) * 81);
  margin: 0 auto;
}

.c-top-about--txt p {
  font-size: max(11px, 1.4rem);
  line-height: 2;
  letter-spacing: 0.04em;
}

.is-about-char {
  display: inline;
  will-change: color;
}

@media (min-width: 769px) {
  .c-top-section {
    position: relative;
  }

  .l-top-contents-inner {
    width: calc(var(--scale) * 1000);
    margin: 0 auto;
  }

  .c-top-section-title {
    margin: 0 0 calc(var(--scale) * 56);
  }

  .c-top-section-title--en {
    display: block;
    margin: 0 0 calc(var(--scale) * 24);
    font-size: max(11px, 3rem);
  }

  .c-top-section-title--jp {
    font-size: clamp(20px, 3.2rem, 38px);
  }

  .c-top-solution {
    padding: calc(var(--scale) * 80) 0 calc(var(--scale) * 160);
  }

  .l-top-solution-inner {
    width: calc(var(--scale) * 840);
  }

  .c-top-solution {
    padding-top: calc(var(--scale) * 80);
  }

  .c-top-solution .c-top-section-title {
    text-align: center;
  }

  .c-top-solution--txt {
    margin-top: calc(var(--scale) * 80);
  }

  .c-top-products {
    padding: calc(var(--scale) * 354) 0 calc(var(--scale) * 160);
  }

  .l-top-products-inner {
    width: calc(var(--scale) * 1224);
  }

  .c-top-products .c-top-section-title--en {
    margin-bottom: calc(var(--scale) * 32);
  }

  .c-top-products--title {
    display: flex;
    align-items: center;
    gap: calc(var(--scale) * 4);
    padding: 0 0 0 calc(var(--scale) * 20);
    position: relative;
    z-index: 1;
  }

  .c-top-products--title::before {
    width: max(1px, calc(var(--scale) * 1));
    height: calc(var(--scale) * 10);
    top: calc(var(--scale) * 23);
    left: 0;
  }

  .c-top-products--title .u-title--big {
    font-size: clamp(11px, 3.2rem, 37px);
    line-height: 1.4;
  }

  .c-top-products--title .u-title--small {
    padding: calc(var(--scale) * 10) 0 0;
    font-size: max(11px, 1.8rem);
    line-height: 1.4;
  }

  .c-top-products--copy {
    display: block;
    margin: 0;
    width: 100%;
    font-size: max(11px, 16.4rem);
    line-height: 1.2;
    text-align: center;
    position: absolute;
    top: calc(var(--scale) * 131);
    right: auto;
    left: 0;
  }

  .c-top-products--img {
    width: calc(var(--scale) * 683);
    height: calc(var(--scale) * 449);
    margin: 0;
    position: absolute;
    top: calc(var(--scale) * 330);
    left: calc(50% + calc(var(--scale) * 78));
  }

  .c-top-products--txt {
    width: calc(var(--scale) * 526);
  }

  .c-top-products--txt p {
    line-height: 2;
    letter-spacing: 0.06em;
  }

  .c-top-products--button {
    margin-left: 0;
  }

  .c-top-service {
    padding: calc(var(--scale) * 160) 0;
  }

  .l-top-service-inner {
    display: grid;
    align-items: center;
    align-content: center;
    width: calc(var(--scale) * 1055);
    min-height: calc(var(--scale) * 610);
    padding: 0 0 0 calc(var(--scale) * 558);
    position: relative;
  }

  .c-top-service .c-top-section-title--jp {
    font-size: max(11px, 3.2rem);
    letter-spacing: 0.1em;
  }

  .c-top-services--img {
    margin: 0;
    aspect-ratio: auto;
    width: calc(var(--scale) * 458);
    height: calc(var(--scale) * 610);
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-top-services--button {
    margin-left: 0;
  }

  .c-top-heritage {
    padding: calc(var(--scale) * 160) 0 calc(var(--scale) * 91);
  }

  .c-top-heritage .c-top-section-title--jp {
    letter-spacing: 0.1em;
  }

  .l-top-heritage-inner {
    width: calc(var(--scale) * 1204);
    padding-bottom: 0;
  }

  .c-top-heritage--img {
    width: calc(var(--scale) * 618);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 12%,
        #000 88%,
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        #000 12%, #000 88%,
        transparent 100%);
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .l-top-heritage-scrollarea {
    margin: 0 0 calc(var(--scale) * 80);
    height: calc(var(--scale) * 400);
  }

  .c-top-heritage-scroll .swiper-wrapper {
    gap: calc(var(--scale) * 30);
  }

  .c-top-heritage--table tr {
    display: flex;
    align-items: center;
  }

  .c-top-heritage--table th {
    order: 1;
    padding: calc(var(--scale) * 10) 0;
    margin: 0 calc(var(--scale) * 8) 0 0;
    font-size: max(11px, 2.0rem);
  }

  .c-top-heritage--table td {
    order: 2;
    display: block;
    padding: calc(var(--scale) * 10) 0;
    margin: 0;
    font-size: max(11px, 1.7rem);
  }

  .c-top-heritage--table td.u-time {
    order: -1;
    width: calc(var(--scale) * 82);
  }

  .c-top-heritage--txt {
    width: calc(var(--scale) * 648);
  }

  .c-top-heritage--button {
    margin: calc(var(--scale) * 80) 0 0 0;
  }

  .c-top-news {
    height: calc(var(--scale) * 777);
    padding: calc(var(--scale) * 160) 0;
  }

  .c-top-news .c-top-section-title {
    text-align: left;
  }

  .l-top-news-inner {
    width: calc(var(--scale) * 1184);
  }

  .c-top-news .c-top-section-title {
    gap: calc(var(--scale) * 8);
  }

  .l-top-news-area {
    width: calc(50vw + calc(var(--scale) * 158));
    padding: 0 calc(var(--scale) * 20) calc(var(--scale) * 20);
    -webkit-mask-image: linear-gradient(
      to left,
      #000 0,
      #000 calc(100% - calc(var(--scale) * 20)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to left,
      #000 0,
      #000 calc(100% - calc(var(--scale) * 20)),
      transparent 100%
    );
    position: absolute;
    top: calc(var(--scale) * 160);
    right: 0;
  }

  .l-top-news-area .c-top-news-list {
    display: flex;
    gap: calc(var(--scale) * 16);
    justify-content: start;
    width: fit-content;
    padding-bottom: calc(var(--scale) * 40);
  }

  .l-top-news-area .c-news-list-item {
    width: calc(var(--scale) * 327);
    height: calc(var(--scale) * 417);
  }

  .c-top-news-list .c-news-list-item:hover {
    --top-box-angle: 241.67deg;
  }

  .c-top-news-list .c-news-list--img {
    height: calc(var(--scale) * 208);
    margin: 0 0 calc(var(--scale) * 20);
  }

  .c-top-news--button {
    margin-left: 0;
  }

  .c-top-about {
    display: grid;
    align-items: center;
    align-content: center;
    height: auto;
    padding: calc(var(--scale) * 104) 0 calc(var(--scale) * 160);
  }

  .c-top-about--logo {
    width: calc(var(--scale) * 478);
    height: calc(var(--scale) * 150);
    margin: 0 auto;
  }

  .l-top-about-txtarea {
    width: calc(var(--scale) * 800);
    margin: 0 auto;
  }

  .c-top-about--txt p {
    font-size: max(14px, 1.8rem);
  }
}

/*
==============================================================
 Page Header
==============================================================
*/
.c-page-header {
  background: url(../images/common/bg-pageheader-grd-sp.webp) no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.l-page-header-inner {
  padding: calc(var(--scale) * 6) calc(var(--scale) * 20) calc(var(--scale) * 88);
  position: relative;
  z-index: 1;
}

.c-page-header:has(.c-page-header--txt) .l-page-header-inner {
  padding-bottom: calc(var(--scale) * 80);
}

.c-breadscrumb {
  width: 100%;
  height: auto;
  padding: 0 0 calc(var(--scale) * 10);
  margin: 0 0 calc(var(--scale) * 50);
  overflow-x: auto;
  overflow-y: hidden;
}

@supports not selector(::-webkit-scrollbar) {
  .c-breadscrumb {
    scrollbar-color: var(--white-20) transparent;
  }
}

@supports selector(::-webkit-scrollbar) {
  .c-breadscrumb::-webkit-scrollbar-thumb:vertical {
    border-right: max(1px, calc(var(--scale) * 1)) solid var(--white-20);
  }

  .c-breadscrumb::-webkit-scrollbar-thumb:horizontal {
    border-bottom: max(1px, calc(var(--scale) * 1)) solid var(--white-20);
  }
}

.c-breadscrumb-list {
  display: flex;
  align-items: center;
  gap: calc(var(--scale) * 8);
}

.c-breadscrumb-list li {
  display: block;
  height: calc(var(--scale) * 12);
  font-family: var(--font-en);
  font-size: max(11px, 1.1rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.c-breadscrumb-list li a {
  display: flex;
  align-items: center;
  gap: calc(var(--scale) * 8);
}

.c-breadscrumb-list li a::after {
  content: '';
  display: block;
  width: calc(var(--scale) * 7);
  height: calc(var(--scale) * 5);
  background: url(../images/common/ico-breadscrumb-arrow.svg) no-repeat;
  background-size: contain;
}

.c-page-header--title-en {
  display: block;
  margin: 0 0 calc(var(--scale) * 16);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 5.6rem);
  line-height: 1.05em;
  letter-spacing: 0;
}

.c-page-header--title-jp {
  display: block;
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.4rem);
  line-height: 1.36;
  letter-spacing: 0.04em;
}

.c-page-header--txt {
  margin: calc(var(--scale) * 48) 0 0;
}

.c-page-header--txt p {
  font-size: var(--size-xs);
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
  line-break: strict;
  overflow-wrap: anywhere;
}

.c-page-header-button {
  margin-left: 0;
}

/* post page pageheader */
.l-main:has(.c-article) .l-page-header-inner {
  padding: calc(var(--scale) * 6) calc(var(--scale) * 20) calc(var(--scale) * 48);
}

.l-main:has(.c-article) .c-page-header:has(.c-page-header--txt) .l-page-header-inner {
  padding-bottom: calc(var(--scale) * 48);
}

.l-main:has(.c-article) .c-breadscrumb {
  margin-bottom: calc(var(--scale) * 48);
}

.l-main:has(.c-article) .c-page-header--title-en {
  margin: 0 0 calc(var(--scale) * 8);
  font-size: max(11px, 3.2rem);
}

.l-main:has(.c-article) .c-page-header--title-jp {
  font-size: max(11px, 1.2rem);
}

@media (min-width: 769px) {
  .c-page-header {
    background: url(../images/common/bg-pageheader-grd-pc.webp) no-repeat;
    background-size: cover;
  }

  .l-page-header-inner {
    padding: calc(var(--scale) * 40) 0 calc(var(--scale) * 88);
    margin: 0 auto;
  }

  .c-breadscrumb {
    margin: 0 calc(var(--scale) * 80) calc(var(--scale) * 40);
  }

  .c-page-header:has(.c-page-header--txt) .l-page-header-inner {
    padding-bottom: calc(var(--scale) * 80);
  }

  .c-page-header-title {
    width: calc(var(--scale) * 1160);
    margin: 0 auto;
  }

  .c-page-header:has(.c-page-header--txt) .c-page-header-title {
    margin-bottom: calc(var(--scale) * 48);
  }

  .c-page-header--title-en {
    margin: 0 0 calc(var(--scale) * 8);
    font-size: clamp(11px, 10.4rem, 128px);
  }

  .c-page-header--title-jp {
    font-size: max(14px, 1.8rem);
  }

  .c-page-header--txt {
    width: calc(var(--scale) * 1160);
    margin: 0 auto;
  }

  .c-page-header-button {
    margin-top: calc(var(--scale) * 40);
    margin-left: calc(var(--scale) * 160);
  }

  /* post page pageheader */
  .l-main:has(.c-article) .l-page-header-inner {
    padding: calc(var(--scale) * 40) 0 calc(var(--scale) * 88);
  }

  .l-main:has(.c-article) .c-page-header:has(.c-page-header--txt) .l-page-header-inner {
    padding-bottom: calc(var(--scale) * 80);
  }

  .l-main:has(.c-article) .c-breadscrumb {
    margin-bottom: calc(var(--scale) * 48);
  }

  .l-main:has(.c-article) .c-page-header--title-en {
    margin: 0 0 calc(var(--scale) * 16);
    font-size: clamp(11px, 5.0rem, 64px);
  }

  .l-main:has(.c-article) .c-page-header--title-jp {
    font-size: max(11px, 1.6rem);
  }
}

/*
==============================================================
 Main Contents Layouts
==============================================================
*/
.l-main {
  position: relative;
  z-index: 1;
}

.l-page-header {
  padding-top: var(--header-height);
  position: relative;
}

.l-contents-main {
  width: 100%;
  padding: calc(var(--scale) * 80) 0 calc(var(--scale) * 150);
  background-color: var(--white-90);
  color: var(--navy);
  overflow-x: clip;
}

body:has(.c-other-contents) .l-contents-main {
  padding-bottom: calc(var(--scale) * 160);
}

.l-contents-inner {
  width: 100%;
  padding: 0 calc(var(--scale) * 20);
  position: relative;
}

.l-sidenav-contents {
  display: grid;
  width: 100%;
  padding: 0 calc(var(--scale) * 20);
  gap: calc(var(--scale) * 120);
}

@media (max-width: 768px) {
  .l-sidenav-main {
    order: -1;
  }
}

@media (min-width: 769px) {
  .l-contents-main {
    padding: calc(var(--scale) * 120) 0 calc(var(--scale) * 200);
    background-color: var(--white-90);
    color: var(--navy);
  }

  body:has(.c-other-contents) .l-contents-main {
    padding-bottom: calc(var(--scale) * 200);
  }

  .l-contents-inner {
    width: calc(var(--scale) * 1000);
    margin: 0 auto;
  }

  .l-sidenav-contents {
    display: grid;
    grid-template-columns: calc(var(--scale) * 280) calc(var(--scale) * 873);
    gap: 98px;
    width: calc(var(--scale) * 1290);
    padding: 0;
    margin: 0 auto;
  }

  .l-sidenav {
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
  }

  .l-sidenav-inner {
    position: sticky;
    top: calc(var(--scale) * 108);
  }

  .l-sidenav-contents .l-sidenav-main {
    width: 100%;
    padding: 0;
    margin: 0;
  }
}

/*
==============================================================
 Section
==============================================================
*/
.l-sectionarea {
  display: grid;
  gap: calc(var(--scale) * 120);
}

/* 日本語タイトル1行・スマホ右寄せ */
.c-section-title-single {
  margin: 0 0 calc(var(--scale) * 17);
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.2rem);
  line-height: 1.5;
  letter-spacing: 0;
}

@media screen and (min-width: 769px) {
  .c-section-title-single {
    margin: 0 0 calc(var(--scale) * 40);
    font-size: max(11px, 3.2rem);
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
  }
}

/* 日本語タイトル 日本語サブタイトルあり */
.c-section-title {
  display: grid;
  gap: calc(var(--scale) * 2.4);
  justify-content: center;
  justify-items: center;
  margin: 0 0 calc(var(--scale) * 40);
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.2rem);
  line-height: 1.5;
  letter-spacing: 0;
}

.c-section-title .u-title--big {
  display: block;
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.2rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

.c-section-title .u-title--small {
  display: block;
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.4rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

@media screen and (min-width: 769px) {
  .c-section-title {
    gap: calc(var(--scale) *);
    margin: 0 0 calc(var(--scale) * 80);
  }

  .c-section-title .u-title--big {
    font-size: clamp(11px, 3.4rem, 38px);
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
  }

  .c-section-title .u-title--small {
    font-size: max(12px, 1.6rem);
    text-align: center;
  }
}

/* 英語+日本語タイトル*/
.c-section-eng-title {
  display: grid;
  gap: calc(var(--scale) * 24);
  justify-content: center;
  align-items: center;
  margin: 0 0 calc(var(--scale) * 102);
}

.c-section-eng-title .u-eng {
  display: block;
  color: #465767;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 2.0rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
}

.c-section-eng-title .u-jp {
  display: block;
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.7rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .c-section-eng-title {
    gap: calc(var(--scale) * 32);
    margin: 0 0 calc(var(--scale) * 140);
  }

  .c-section-eng-title .u-eng {
    display: block;
    color: #465767;
    font-family: var(--font-en);
    font-weight: 300;
    font-size: max(11px, 3.0rem);
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
  }

  .c-section-eng-title .u-jp {
    display: block;
    font-weight: var(--weight-regular);
    font-size: max(11px, 2.7rem);
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: center;
  }
}

/* 中タイトル 1行*/
.c-section-middle-single-title {
  display: block;
  margin: 0 0 calc(var(--scale) * 32);
  font-weight: var(--weight-regular);
  font-size: max(11px, 2rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

@media screen and (min-width: 769px) {
  .c-section-middle-single-title {
    font-size: max(11px, 2.6rem);
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-align: center;
  }
}

/* 中タイトル 英語つき*/
.c-section-middle-title {
  display: grid;
  gap: calc(var(--scale) * 8);
  margin: 0 0 calc(var(--scale) * 64);
  text-align: center;
}

.c-section-middle-title .u-title--eng {
  display: block;c-products-list--tx
  color: #465787;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.c-section-middle-title .u-title--jp {
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.2rem);
  line-height: 1.36;
  letter-spacing: 0.04em;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .c-section-middle-title {
    margin: 0 0 calc(var(--scale) * 90);
  }

  .c-section-middle-title .u-title--eng {
    font-size: max(11px, 3.0rem);
  }

  .c-section-middle-title .u-title--jp {
    font-size: max(18px, 3.2rem);
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.c-line-title {
  padding: 0 0 calc(var(--scale) * 17);
  margin: calc(var(--scale) * 48) 0 calc(var(--scale) * 17);
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.8rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  position: relative;
}

.c-line-title:first-child {
  margin-top: 0;
}

.c-line-title::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 36));
  height: 2px;
  background: var(--line-gradient);
  position: absolute;
  bottom: 0;
  transform: scaleY(0.5);
  left: calc(var(--scale) * -18);
}

@media screen and (min-width: 769px) {
  .c-line-title {
    padding: 0 0 calc(var(--scale) * 17);
    margin: calc(var(--scale) * 48) 0 calc(var(--scale) * 17);
    font-size: max(11px, 3.0rem);
  }

  .c-line-title::after {
    width: calc(100% + calc(var(--scale) * 96));
    left: calc(var(--scale) * -48);
  }
}

/*
==============================================================
 Box
==============================================================
*/
@property --box-angle {
  syntax: '<angle>';
  initial-value: 97.89deg;
  inherits: false;
}

@keyframes box-angle {
  from {
    --box-angle: 97.89deg;
  }

  to {
    --box-angle: 187.89deg;
  }
}

.c-box,
.c-news-list-item {
  padding: calc(var(--scale) * 24);
  --box-angle: 97.89deg;
  position: relative;
}

.c-box::before,
.c-news-list-item::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 1px;
  background: linear-gradient(
    var(--box-angle),
    var(--navy-0) 0%,
    var(--navy-20) 5%,
    var(--navy-20) 95%,
    var(--navy-0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  /* 角度を transition で補間（hover の行き帰り両方を滑らかにする） */
  transition: --box-angle 0.5s ease;
}

.c-news-list-item::before {
  border-radius: calc(var(--scale) * 6);
}

.c-box-title {
  margin: 0 0 calc(var(--scale) * 20);
  font-weight: 400;
  font-size: max(11px, 1.6rem);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

@media (min-width: 769px) {
  .c-box,
  .c-news-list-item {
    padding: calc(var(--scale) * 32);
  }

  .c-box:has(a):hover::before,
  .c-news-list-item:has(a):hover::before {
    --box-angle: 187.89deg;
  }

  .c-box-title {
    font-size: max(11px, 2rem);
    line-height: 2;
    letter-spacing: 0.04em;
  }
}

/*
==============================================================
 Other Contents
==============================================================
*/
.c-other-contents {
  padding: 0 calc(var(--scale) * 10) calc(var(--scale) * 160);
  background-color: var(--white-90);
  color: var(--navy);
  position: relative;
  z-index: 1;
}

#p-404 + .c-other-contents {
  padding-top: calc(var(--scale) * 160);
}

.l-other-contents-inner {
  padding: 0 calc(var(--scale) * 12);
}

.c-other-contents--title {
  margin: 0 0 calc(var(--scale) * 64);
  color: #465767;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 2.0rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
}

.c-other-contents-list {
  display: grid;
  gap: calc(var(--scale) * 32);
  position: relative;
}

.c-other-contents-list li {
  --list-circle-size: calc(var(--scale) * 48);
  display: block;
  min-height: var(--list-circle-size);
  position: relative;
  isolation: isolate;
}

.c-other-contents-list li::before,
.c-other-contents-list li::after {
  content: '';
  width: var(--list-circle-size);
  height: var(--list-circle-size);
  border-radius: 50%;
  box-sizing: border-box;
  padding: 1px;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  position: absolute;
  top: 0;
  left: 0;
}

.c-other-contents-list li::before {
  z-index: 1;
  background: var(--gradient);
}

.c-other-contents-list li::after {
  width: calc(var(--list-circle-size) + 2px);
  height: calc(var(--list-circle-size) + 2px);
  padding: 4px;
  filter: blur(calc(var(--list-circle-size) * 0.2));
  z-index: 0;
  background: var(--gradient-blur);
  top: -1px;
  left: -1px;
}

@media (min-width: 769px) {
  .c-other-contents {
    padding: calc(var(--scale) * 80) 0 calc(var(--scale) * 160);
  }

  #p-404 + .c-other-contents {
    padding-top: calc(var(--scale) * 200);
  }

  .c-other-contents-list li:hover::before,
  .c-other-contents-list li:hover::after {
    animation: circle 2s linear infinite;
  }
}

.c-other-contents-list li a {
  display: block;
  padding: 0 0 0 calc(var(--scale) * 60);
  position: relative;
}

.c-other-contents-list li a::after {
  content: '';
  display: block;
  width: calc(var(--scale) * 5);
  height: calc(var(--scale) * 7);
  background: url(../images/common/ico-arrow-blue.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(var(--scale) * 21);
  left: calc(var(--scale) * 22);
}

.c-other--en {
  display: block;
  margin: 0 0 calc(var(--scale) * 2);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 3.2rem);
  line-height: 1;
  letter-spacing: 0em;
}

.c-other--jp {
  display: block;
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.2rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  vertical-align: bottom;
}

@media (min-width: 769px) {
  .c-other-contents {
    padding: calc(var(--scale) * 80) 0 calc(var(--scale) * 200);
  }

  #p-404 + .c-other-contents {
    padding-top: calc(var(--scale) * 200);
  }

  .l-other-contents-inner {
    width: calc(var(--scale) * 1200);
    padding: 0 calc(var(--scale) * 27);
    margin: 0 auto;
  }

  .c-other-contents--title {
    margin: 0 0 calc(var(--scale) * 48);
    font-size: max(18px, 2.0rem);
  }

  .c-other-contents-list {
    grid-template-columns: repeat(auto-fit, calc(var(--scale) * 382));
    gap: calc(var(--scale) * 32) 0;
  }

  .c-other-contents-list li {
    --list-circle-size: calc(var(--scale) * 68);
  }

  .c-other-contents-list li a {
    padding: 0 0 0 calc(var(--scale) * 92);
  }

  .c-other-contents-list li a::after {
    top: calc(var(--scale) * 31);
    left: calc(var(--scale) * 31);
  }

  .c-other--en {
    margin: 0 0 calc(var(--scale) * 4);
    font-size: max(11px, 5.6rem);
  }

  .c-other--jp {
    font-size: max(12px, 1.6rem);
  }
}

/*
==============================================================
 Pagenation
==============================================================
*/
.c-pagenation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(var(--scale) * 40) 0 0;
}

.c-pagenation .wp-pagenavi {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--scale) * 9);
}

.c-pagenation .page,
.c-pagenation .current,
.c-pagenation .previouspostslink,
.c-pagenation .nextpostslink {
  display: grid;
  place-content: center;
  width: calc(var(--scale) * 16);
  height: calc(var(--scale) * 16);
  font-family: var(--font-en);
  font-size: max(11px, 1.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.03em;
  position: relative;
}

.c-pagenation .current {}

.c-pagenation .previouspostslink::after,
.c-pagenation .nextpostslink::after {
  content: '';
  display: block;
  width: calc(var(--scale) * 6);
  height: calc(var(--scale) * 6);
  background-image: url(../images/common/ico-arrow-blue.svg);
  background-size: contain;
  position: relative;
  z-index: 5;
}

.c-pagenation .previouspostslink::after {
  transform: rotate(180deg);
}

.c-pagenation .nextpostslink::after {}

@media (min-width: 769px) {
  .c-pagenation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: calc(var(--scale) * 80) 0 0;
  }

  .c-pagenation .page:hover,
  .c-pagenation .previouspostslink:hover,
  .c-pagenation .nextpostslink:hover {
    color: var(--navy-60);
  }
}

/*
==============================================================
 Post
==============================================================
*/
.l-post-dataarea {
  display: flex;
  gap: calc(var(--scale) * 12);
  align-items: center;
  margin: 0 0 calc(var(--scale) * 15);
}

.c-post-time {
  display: grid;
  align-items: center;
  height: calc(var(--scale) * 20);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.4rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
}

.c-post-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--scale) * 5);
}

.c-post-category-list li {
  display: grid;
  place-content: center;
  padding: calc(var(--scale) * 4) calc(var(--scale) * 17) calc(var(--scale) * 5);
  font-size: max(11px, 1.1rem);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  position: relative;
}

.c-post-category-list li::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: max(1px, calc(var(--scale) * 1)) solid;
  border-radius: 1px;
  border-image-source: var(--label-gradient);
  border-image-slice: 1;
  border-radius: 1px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.c-post--title {
  padding: 0 0 calc(var(--scale) * 20);
  margin: 0 0 calc(var(--scale) * 24);
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.0rem);
  line-height: 1.5;
  letter-spacing: 0;
  position: relative;
}

.c-post--title::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 36));
  height: 1px;
  background: var(--line-gradient);
  position: absolute;
  bottom: 0;
  left: calc(var(--scale) * -18);
}

.c-post-freearea {
  display: grid;
  gap: calc(var(--scale) * 17);
}

.c-post-freearea img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.c-post-freearea h2 {
  padding: 0 0 calc(var(--scale) * 17);
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.8rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  position: relative;
}

.c-post-freearea h2:not(:first-child) {
  margin-top: calc(var(--scale) * 31);
}

.c-post-freearea h2::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 32));
  height: 2px;
  background: var(--line-gradient);
  transform: scaleY(0.5);
  position: absolute;
  bottom: 0;
  left: calc(var(--scale) * -16);
}

.c-post-freearea h3 {
  margin: 0;
  font-weight: var(--weight-bold);
  font-size: max(11px, 1.4rem);
  line-height: 2;
  letter-spacing: 0.04em;
}

.c-post-freearea h3:not(:first-child) {
  margin-top: calc(var(--scale) * 31);
}

@media (min-width: 769px) {
  .l-contents-inner:has(.c-post) {
    width: calc(var(--scale) * 960);
  }

  .l-post-dataarea {
    gap: calc(var(--scale) * 16);
    margin: 0 0 calc(var(--scale) * 24);
  }

  .c-post-time {
    font-size: max(11px, 1.5rem);
  }

  .c-post-category-list li {
    padding: calc(var(--scale) * 4) calc(var(--scale) * 14) calc(var(--scale) * 5);
    font-size: max(11px, 1.2rem);
  }

  .c-post--title {
    padding: 0 0 calc(var(--scale) * 32);
    margin: 0 0 calc(var(--scale) * 32);
    font-size: clamp(11px, 3.4rem, 40px);
  }

  .c-post--title::after {
    width: calc(100% + calc(var(--scale) * 96));
    left: calc(var(--scale) * -48);
  }

  .c-post-freearea {
    gap: calc(var(--scale) * 40);
  }

  .c-post-freearea h2 {
    padding: 0 0 calc(var(--scale) * 17);
    font-weight: var(--weight-regular);
    font-size: clamp(11px, 2.5rem, 28px);
  }

  .c-post-freearea h2::after {
    width: calc(100% + calc(var(--scale) * 96));
    left: calc(var(--scale) * -48);
  }

  .c-post-freearea h2:not(:first-child) {
    margin-top: calc(var(--scale) * 40);
  }

  .c-post-freearea h3 {
    margin: 0;
    font-size: clamp(11px, 1.6rem, 30px);
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .c-post-freearea h3:not(:first-child) {
    margin-top: calc(var(--scale) * 40);
  }
}

/*
==============================================================
 News
==============================================================
*/
.l-sidenav {
  width: 100%;
  padding: 0 calc(var(--scale) * 43);
}

.c-news-nav--title {
  width: 100%;
  margin: 0 0 calc(var(--scale) * 24);
  padding: 0 0 calc(var(--scale) * 12);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.8rem);
  line-height: 1;
  letter-spacing: 0.04em;
  position: relative;
}

.c-news-nav--title::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 36));
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--navy-20) 5%, var(--navy-20) 50%, var(--navy-20) 95%, transparent 100%);
  position: absolute;
  left: calc(var(--scale) * -18);
  bottom: 0;
}

.c-news-nav-list {
  display: grid;
  gap: calc(var(--scale) * 16);
}

.c-news-nav-list li a {
  display: grid;
  align-items: center;
  width: 100%;
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.6rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  position: relative;
}

.c-news-nav-list li a::after {
  content: '';
  display: block;
  background-image: url(../images/common/ico-arrow-blue.svg);
  background-size: contain;
  width: calc(var(--scale) * 6);
  height: calc(var(--scale) * 6);
  position: absolute;
  top: calc(50% - calc(var(--scale) * 3));
  right: 0;
}

.c-news-list {
  display: grid;
  gap: calc(var(--scale) * 16);
}

.c-news-list-item {
  position: relative;
  border-radius: calc(var(--scale) * 6);
  padding: 0;
}

.c-news-list-item a {
  display: grid;
  grid-template-columns: calc(var(--scale) * 144) 1fr;
  gap: calc(var(--scale) * 12);
  width: 100%;
  height: 100%;
  padding: calc(var(--scale) * 16);
}

.c-news-list--img {
  width: 100%;
  height: calc(var(--scale) * 144);
  overflow: hidden;
}

.c-news-list--img img {
  display: block;
  height: 100%;
  object-fit: cover;
}

.l-news-list-txtarea {
  position: relative;
}

.l-news-list-dataarea {
  display: flex;
  gap: calc(var(--scale) * 8);
  align-items: start;
  margin: 0 0 calc(var(--scale) * 6);
}

.c-news-list-time {
  display: grid;
  align-items: center;
  padding-top: calc(var(--scale) * 4);
  height: calc(var(--scale) * 17);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.2rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
}

.c-news-list-category-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-items: center;
  gap: calc(var(--scale) * 5);
}

.c-news-list-category-list li {
  display: grid;
  place-content: center;
  padding: calc(var(--scale) * 3) calc(var(--scale) * 8) calc(var(--scale) * 4);
  font-size: max(11px, 1rem);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  position: relative;
}

.c-news-list-category-list li::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: max(1px, calc(var(--scale) * 1)) solid;
  border-radius: 1px;
  border-image-source: var(--label-gradient);
  border-image-slice: 1;
  border-radius: 1px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.c-news-list--title {
  margin: 0 0 calc(var(--scale) * 6);
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.4rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-news-list--txt p {
  font-size: max(11px, 1.2rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

@media (min-width: 769px) {
  .c-news-nav--title {
    padding: 0 0 calc(var(--scale) * 20);
    font-size: max(11px, 2.5rem);
  }

  .c-news-nav-list {
    gap: calc(var(--scale) * 12);
  }

  .c-news-nav-list li a {
    font-size: var(--size-xs);
    padding: 0;
    transition: opacity 0.3s ease;
  }

  .c-news-nav-list li a:hover {
    opacity: 0.5;
  }

  .c-news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--scale) * 24);
  }

  .c-news-list-item a {
    display: block;
    width: 100%;
    height: auto;
    padding: calc(var(--scale) * 18) calc(var(--scale) * 18) calc(var(--scale) * 32);
  }

  .c-news-list--img {
    height: calc(var(--scale) * 174);
    margin: 0 0 calc(var(--scale) * 17);
  }

  .c-news-list-item a .c-news-list--img img {
    transition: transform 0.5s ease;
  }

  .c-news-list-item a:hover .c-news-list--img img {
    transform: scale(1.05);
  }

  .l-news-list-dataarea {
    display: flex;
    gap: calc(var(--scale) * 17);
    margin: 0 0 calc(var(--scale) * 15);
  }

  .l-news-list-txtarea {
    transition: opacity 0.5s ease;
  }

  .c-news-list-item a:hover .l-news-list-txtarea {
    opacity: 0.5;
  }

  .c-news-list-time {
    height: calc(var(--scale) * 21);
    font-size: max(11px, 1.4rem);
  }

  .c-news-list-category-list li {
    height: calc(var(--scale) * 21);
    padding: calc(var(--scale) * 4) calc(var(--scale) * 15) calc(var(--scale) * 5);
    font-size: max(11px, 1.2rem);
  }

  .c-news-list--title {
    margin: 0 0 calc(var(--scale) * 12);
    font-size: max(14px, 1.6rem);
    line-height: 1.6;
    letter-spacing: 0.04em;
  }

  .c-news-list--txt p {
    font-size: max(12px, 1.4rem);
    line-height: 1.6;
  }
}

/*
==============================================================
 Form
==============================================================
*/
.c-form-table {
  width: 100%;
  margin: 0 0 calc(var(--scale) * 56);
}

.c-form-table tr {
  display: block;
  padding: calc(var(--scale) * 23) 0;
  position: relative;
}

.c-form-table tr::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 36));
  height: 1px;
  background: var(--line-gradient);
  position: absolute;
  bottom: 0;
  left: calc(var(--scale) * -18);
}

.c-form-table tr:last-child {
  padding-bottom: 0;
}

.c-form-table tr:last-child::after {
  content: none;
}

.c-form-table th {
  display: flex;
  gap: calc(var(--scale) * 8);
  align-items: center;
  padding: 0 0 calc(var(--scale) * 10);
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.4rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: left;
}

.u-required {
  display: block;
  width: fit-content;
  height: auto;
  padding: calc(var(--scale) * 4) calc(var(--scale) * 15);
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.2rem);
  line-height: 100%;
  letter-spacing: 0%;
  position: relative;
}

.u-required::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: max(1px, calc(var(--scale) * 1)) solid var(--navy-20);
  border-radius: max(1px, calc(var(--scale) * 1));
  mask:
    linear-gradient(135deg, transparent 0 calc(var(--scale) * 0), #000 calc(var(--scale) * 8)),
    linear-gradient(-45deg, transparent 0 calc(var(--scale) * 0), #000 calc(var(--scale) * 8));
  mask-composite: intersect;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.c-form-table td {
  display: grid;
  gap: calc(var(--scale) * 10);
  font-size: max(11px, 1.3rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-form-select {
  display: block;
  position: relative;
}

.c-form-select::after {
  content: '';
  display: block;
  width: calc(var(--scale) * 6);
  height: calc(var(--scale) * 6);
  background: url(../images/common/ico-arrow-blue.svg) no-repeat;
  background-size: contain;
  transform: rotate(90deg);
  position: absolute;
  top: calc(50% - calc(var(--scale) * 3));
  right: calc(var(--scale) * 15);
}

.c-form select {
  appearance: none;
  display: block;
  width: 100%;
  background-color: var(--navy-10);
  border: none;
  padding: calc(var(--scale) * 13) calc(var(--scale) * 15);
  cursor: pointer;
  color: var(--navy);
  font-family: var(--font-jp);
  font-size: var(--size-xs);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.c-form input[type=text],
.c-form input[type=email],
.c-form input[type=tel],
.c-form input[type=number],
.c-form textarea {
  appearance: none;
  display: block;
  width: 100%;
  background-color: var(--navy-10);
  border: none;
  padding: calc(var(--scale) * 13) calc(var(--scale) * 15);
  cursor: pointer;
  outline: none;
  color: var(--navy);
  font-family: var(--font-jp);
  font-size: var(--size-xs);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.c-form input:focus,
.c-form textarea:focus,
.c-form select:focus {
  outline: none;
}

.c-form input[type="number"]::-webkit-outer-spin-button,
.c-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}

.c-form input[type="number"] {
  -moz-appearance: textfield;
}

.c-form button,
.c-form input[type="submit"] {
  outline: none;
  background-color: transparent;
  border: none;
  color: var(--navy);
  font-family: var(--font-jp);
  font-size: var(--size-xs);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.c-form-zip-button {
  display: grid;
  place-content: center;
  width: fit-content;
  margin: calc(var(--scale) * 10) 0 0;
  padding: calc(var(--scale) * 13) calc(var(--scale) * 20);
  cursor: pointer;
  transition: background-color 0.5s ease;
}

.c-form input[type=text],
.c-form input[type=email],
.c-form input[type=tel],
.c-form input[type=number],
.c-form textarea {
  line-height: 1.7;
}

.c-form textarea {
  height: auto;
  min-height: calc(var(--scale) * 169);
  resize: vertical;
}

.c-form input::placeholder,
.c-form textarea::placeholder {
  color: var(--navy-40);
  font-size: var(--size-xs);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-form-privacy {
  margin: 0 0 calc(var(--scale) * 40);
}

.c-form-privacy-box {
  height: calc(var(--scale) * 300);
  margin: 0 0 calc(var(--scale) * 40);
  padding: calc(var(--scale) * 20) calc(var(--scale) * 10) calc(var(--scale) * 20) calc(var(--scale) * 20);
  position: relative;
}

.l-form-privacy-scrollarea {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.c-form-privacy-txt {
  height: fit-content;
  padding: 0 calc(var(--scale) * 15) 0 0;
}

.c-form-privacy-txt p {
  font-size: max(11px, 1.4rem);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.c-form input[type=checkbox] {
  display: none;
}

.c-form .wpcf7-list-item {
  display: block;
  margin: 0 0 calc(var(--scale) * 30);
  position: relative;
}

.c-form .wpcf7-list-item label {
  cursor: pointer;
}

.c-form .wpcf7-list-item-label {
  display: grid;
  align-items: center;
  padding: 0 0 0 calc(var(--scale) * 28);
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.4rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-form .wpcf7-list-item-label::before {
  content: '';
  display: block;
  width: calc(var(--scale) * 18);
  height: calc(var(--scale) * 18);
  flex-shrink: 0;
  background: url(../images/common/ico-checkbox.svg) no-repeat;
  background-size: contain;
  padding: 0;
  cursor: pointer;
  position: absolute;
  top: calc(var(--scale) * 2);
  left: 0;
}

.c-form .wpcf7-list-item-label::after {
  content: '';
  display: none;
  width: calc(var(--scale) * 12);
  height: calc(var(--scale) * 10);
  background: url(../images/common/ico-check.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(var(--scale) * 7);
  left: calc(var(--scale) * 4);
}

.c-form input[type=checkbox]:checked + .wpcf7-list-item-label::after {
  display: block;
}

.c-form-confirm-note {
  margin: calc(var(--scale) * 60) 0 calc(var(--scale) * 16);
  font-size: max(11px, 1.6rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.form-submit {
  padding: 0;
}

.c-form .form-submit {
  width: fit-content;
  margin: 0 auto;
}

.c-form .form-submit {
  display: grid;
  place-content: center;
  width: calc(var(--scale) * 180);
  height: calc(var(--scale) * 50);
  margin: 0 auto;
  font-size: max(11px, 1.5rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  background-color: transparent;
  position: relative;
}

.c-form .recaptcha_policy {
  margin-top: calc(var(--scale) * 25);
  font-size: max(11px, 1.1rem);
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  opacity: 0.3;
}

/* CF7 送信スピナー: 送信ボタン（.form-submit）の下中央に配置 */
.wpcf7-spinner {
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* 同意チェックボックス行: チェックボックス＋必須バッジを横並び・中央寄せ */
.c-form-agree {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--scale) * 12);
}

.c-form-agree .wpcf7-list-item {
  /* ベース .c-form .wpcf7-list-item の下マージン(30px)を打ち消す */
  margin: 0 !important;
}

/* 必須バッジ: 上から位置指定して高さを合わせる */
.c-form-agree .u-required {
  flex-shrink: 0;
  position: relative;
  top: calc(var(--scale) * 2);
}

/* 確認チェックボックス（ラベルなし・単独）: チェックボックスだけを中央に配置 */
.c-form-confirm-check {
  display: block;
  width: fit-content;
  margin: calc(var(--scale) * 16) auto 0;
}

.c-form-confirm-check .wpcf7-list-item {
  margin: 0;
}

.c-form-confirm-check .wpcf7-list-item-label {
  /* CF7 は value（例: 確認しました）をラベルテキストとして出力するため、
     テキストは視覚的に隠し、チェックボックス（::before）だけを見せる */
  display: block;
  width: calc(var(--scale) * 18);
  height: calc(var(--scale) * 18);
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
}

.c-form-confirm-check .wpcf7-list-item-label::before {
  position: static;
}

.c-form-confirm-check .wpcf7-list-item-label::after {
  top: calc(var(--scale) * 5);
  left: calc(var(--scale) * 4);
}

@media screen and (max-width: 768px) {
  .c-form .btn-submit {
    width: calc(var(--scale) * 180);
    height: calc(var(--scale) * 50);
  }
  .c-form-confirm-note {
    margin: calc(var(--scale) * 30) 0 calc(var(--scale) * 20);  /* ← 80 から 16 に変更 */
    font-size: max(11px, 1.4rem);
    text-align: center;
  }

  /* SP: agree 行の item は flex の中なので中央寄せ用の margin/width を打ち消す */
  .c-form-agree .wpcf7-list-item {
    margin: 0;
    width: auto;
  }

  /* SP: 確認チェックボックスの下に送信ボタンまでの余白 */
  .c-form-confirm-check {
    margin: 0 auto calc(var(--scale) * 80);
  }

}

@media screen and (min-width: 769px) {
  .c-form-table {
    margin: 0 0 calc(var(--scale) * 40);
  }

  .c-form-table tr {
    display: grid;
    grid-template-columns: calc(var(--scale) * 270) 1fr;
    padding: calc(var(--scale) * 25) calc(var(--scale) * 5);
  }

  .c-form-table tr::after {
    width: calc(100% + calc(var(--scale) * 96));
    left: calc(var(--scale) * -48);
  }

  .c-form-table th {
    font-size: max(14px, 1.6rem);
  }

  .c-form-table td {
    font-size: max(13px, 1.4rem);
  }

  .c-form-select {
    width: 100%;
  }

  .l-form-postalcode {
    display: flex;
    align-items: center;
    gap: calc(var(--scale) * 10);
  }

  .c-form input[name="postal_code"] {
    display: inline-grid;
    margin-right: calc(var(--scale) * 10);
    width: calc(var(--scale) * 250);
  }

  .c-form-zip-button {
    margin: 0;
  }

  .c-form input[name="your-address1"] {
    width: calc(var(--scale) * 250);
  }

  .c-form textarea {
    min-height: calc(var(--scale) * 161);
  }

  .c-form-privacy {
    margin: 0 0 calc(var(--scale) * 80);
  }

  .c-form-privacy-box {
    height: calc(var(--scale) * 350);
    margin: 0 0 calc(var(--scale) * 32);
    padding: calc(var(--scale) * 32);
  }

  .c-form-privacy-txt p {
    font-size: max(13px, 1.4rem);
  }

  .c-form .wpcf7-list-item {
    margin: 0 auto calc(var(--scale) * 24);
    width: fit-content;
    text-align: center;
  }

  .c-form .wpcf7-list-item-label {
    font-weight: var(--weight-regular);
    font-size: max(14px, 1.6rem);
  }

  .c-form .wpcf7-list-item-label::before {
    top: calc(var(--scale) * 5);
  }

  .c-form .wpcf7-list-item-label::after {
    top: calc(var(--scale) * 9);
    left: calc(var(--scale) * 4);
  }

  .c-form-confirm-note {
    margin: calc(var(--scale) * 30) 0 calc(var(--scale) * 20);
    font-size: max(14px, 1.4rem);
    text-align: center;
  }

  .c-form .btn-submit {
    width: calc(var(--scale) * 180);
    height: calc(var(--scale) * 50);
    margin: 0 auto;
    font-size: max(11px, 1.5rem);
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
    background-color: transparent;
  }

  .c-form .c-form-confirm-note + .c-form-confirm-check .wpcf7-list-item-label::after {
    top: calc(var(--scale) * 4);
  }
}

/*
==============================================================
 Products List
==============================================================
*/

.c-products-list {
  display: grid;
  gap: calc(var(--scale) * 32);
}

.c-products-list-item {
  padding: 0;
}

.c-products-list-item a {
  display: block;
  width: 100%;
  padding: calc(var(--scale) * 32) calc(var(--scale) * 24);
}

.c-products-list--img {
  margin: 0 0 calc(var(--scale) * 28);
  width: 100%;
  aspect-ratio: 3 / 2;
}

.c-products-list--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-products-list--title {
  margin: 0 0 calc(var(--scale) * 12);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 2rem);
  line-height: 1.4;
  letter-spacing: 0;
}

.c-products-list--txt p {
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.c-products-list--button {
  --circle-size: calc(var(--scale) * 56);
  margin: calc(var(--scale) * 24) 0 0 0;
}

.c-products-single--img {
  width: 100%;
  margin: 0 0 calc(var(--scale) * 20);
}

.c-products-single--button {
  --circle-size: calc(var(--scale) * 60);
  margin-top: calc(var(--scale) * 32);
}

@media (min-width: 769px) {
  #p-products .l-contents-inner {
    width: calc(var(--scale) * 1224);
  }

  .c-products-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--scale) * 24);
  }

  /* 4個以上なら左寄せ */
  .c-products-list:has(.c-products-list-item:nth-child(4)) {
    justify-content: flex-start;
  }

  .c-products-list-item {
    flex-shrink: 0;
    flex: 0 0 calc(var(--scale) * 378);
  }

  .c-products-list--img {
    margin: 0 0 calc(var(--scale) * 40);
    width: 100%;
    overflow: hidden;
  }

  .c-products-list--img img {
    transition: transform 0.5s ease;
  }

  .c-products-list-item a:hover .c-products-list--img img{
    transform: scale(1.05);
  }

  .c-products-list--title {
    margin: 0 0 calc(var(--scale) * 24);
    font-size: max(18px, 2rem);
  }

  .c-products-list--txt p {
    font-size: clamp(14px, 1.5rem, 18px)
  }

  .c-products-list--title,
  .c-products-list--txt {
    transition: opacity 0.5s ease;
  }

  .c-products-list-item a:hover .c-products-list--title,
  .c-products-list-item a:hover .c-products-list--txt {
    opacity: 0.5;
  }

  .c-products-list--button {
    display: none;
  }

  .c-products-single {
    display: block;
  }

  .c-products-single-item {
    padding: 0 0 0 calc(var(--scale) * 460);
    position: relative;
  }

  .c-products-single--img {
    display: grid;
    place-content: center;
    width: calc(var(--scale) * 404);
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-products-single--button {
    --circle-size: calc(var(--scale) * 56);
    margin-left: 0;
  }
}

/*
==============================================================
 Products Detail
==============================================================
*/
.l-products-detail-overview {
  margin: 0 0 calc(var(--scale) * 100);
}

.l-products-detail-galleryarea {
  margin: 0 0 calc(var(--scale) * 40);
}

.c-detail-gallery {
  margin: 0 0 calc(var(--scale) * 8);
}

.c-products-gallery--img {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.c-products-gallery--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-products-gallery-thumbnail--img {
  --box-angle: 270deg;
  width: calc(var(--scale) * 64);
  aspect-ratio: 1 / 1;
  position: relative;
  cursor: pointer;
}

.c-products-gallery-thumbnail--img::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  padding: 1px;
  background: linear-gradient(var(--box-angle),
    rgba(75, 116, 153, 0.2) 0.55%,
    rgba(104, 113, 138, 0.2) 88.55%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: --box-angle 0.5s ease;
  position: absolute;
  top: 0;
  left: 0;
}

.c-products-gallery-thumbnail--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-products-detail--title {
  padding: 0 0 calc(var(--scale) * 20);
  margin: 0 0 calc(var(--scale) * 32);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 2.6rem);
  line-height: 1.4;
  letter-spacing: 0;
  position: relative;
}

.c-products-detail--title::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 36));
  height: 1px;
  background: var(--line-gradient);
  position: absolute;
  bottom: 0;
  left: calc(var(--scale) * -18);
}

.c-products-detail-box {
  margin: calc(var(--scale) * 24) 0 calc(var(--scale) * 80);
  padding: calc(var(--scale) * 16) calc(var(--scale) * 24) calc(var(--scale) * 20);
}

.l-products-sectionarea {
  display: grid;
  gap: calc(var(--scale) * 32);
  margin: 0 0 calc(var(--scale) * 120);
}

.c-products-section--title {
  margin: 0 0 calc(var(--scale) * 12);
  font-weight: var(--weight-bold);
  font-size: max(11px, 1.4rem);
  line-height: 2;
  letter-spacing: 0.04em;
}

@media (min-width: 769px) {
  #p-products-detail .l-contents-inner {
    width: calc(var(--scale) * 1154);
  }

  .l-products-detail-overview {
    min-height: calc(var(--scale) * 522);
  }

  .l-products-detail-overview {
    width: 100%;
    margin: 0 0 calc(var(--scale) * 160);
    padding: 0 0 0 calc(var(--scale) * 556);
    position: relative;
  }

  .l-products-detail-galleryarea {
    width: calc(var(--scale) * 442);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-detail-gallery-wrapper {
    position: sticky;
    top: var(--header-height);
  }

  .c-products-gallery-thumbnail--img {
    width: calc(var(--scale) * 82);
  }

  .c-products-gallery-thumbnail--img:hover {
    --box-angle: 360deg;
  }

  .c-products-gallery-thumbnail--img img {
    transition: transform 0.5s ease;
  }

  .c-products-gallery-thumbnail--img:hover img {
    transform: scale(1.05);
  }

  .c-products-detail--title {
    padding: 0;
    font-size: max(11px, 3.4rem);
    line-height: 1.5;
  }

  .c-products-detail--title::after {
    content: none;
  }

  .l-products-detail-txtarea {
    width: calc(var(--scale) * 564);
  }

  .c-products-detail-box {
    margin: calc(var(--scale) * 48) 0;
  }

  .l-products-sectionarea {
    gap: calc(var(--scale) * 40);
    margin: 0 0 calc(var(--scale) * 120);
  }

  .c-products-section--title {
    margin: 0 0 calc(var(--scale) * 12);
    font-weight: var(--weight-bold);
    font-size: max(15px, 1.6rem);
    line-height: 1.6;
  }

  .c-products-detail--txt p {
    line-height: 2;
  }

  .c-products-detail-table {
    padding: calc(var(--scale) * 20) 0;
  }

  .c-products-detail-table::after {
    content: '';
    display: block;
    width: calc(100% + calc(var(--scale) * 96));
    height: 2px;
    background: var(--line-gradient);
    transform: scaleY(0.5);
    position: absolute;
    left: calc(var(--scale) * -48);
    bottom: 0;
  }

  .c-products-detail-table tbody {
    display: grid;
    column-gap: calc(var(--scale) * 50);
    row-gap: calc(var(--scale) * 12);
  }

  .c-products-detail-table.c-table-2col tbody {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-products-detail-table tr {
    display: block;
    padding: 0 0 calc(var(--scale) * 12);
  }

  .c-products-detail-table tr::after {
    content: none;
  }

  .c-products-detail-table th {
    padding: calc(var(--scale) * 12) 0 0;
    margin: 0 0 calc(var(--scale) * 4);
  }
}

/*
==============================================================
 Flight Heritage
==============================================================
*/
.c-heritage-table tr {
  display: grid;
  gap: calc(var(--scale) * 4);
  min-height: calc(var(--scale) * 86);
}

.c-heritage-table tr:has(a) {
  cursor: pointer;
}

.c-heritage-table th {
  line-height: 1.6;
}

.c-heritage-table td {
  color: var(--navy-40);
  font-size: max(11px, 1.2rem);
}

.c-heritage-table td.u-time {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 1.1rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  position: absolute;
  top: calc(var(--scale) * 22);
  right: calc(var(--scale) * 8);
}

.c-heritage-table--link {
  --circle-size: calc(var(--scale) * 28);
  margin: 0;
  position: absolute;
  top: calc(var(--scale) * 42);
  right: calc(var(--scale) * 16);
}

.c-heritage-table--link a {
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  padding: 0;
}

.c-heritage-table--link a::after {
  content: '';
  display: block;
  width: calc(var(--scale) * 6);
  height: calc(var(--scale) * 6);
  background: url(../images/common/ico-newwindowarrow.svg) no-repeat !important;
  background-size: contain;
  position: absolute;
  top: calc(var(--scale) * 11);
  left: calc(var(--scale) * 12);
}

.c-heritage-table tr {
  position: relative;
}

.c-heritage-table tr::before {
  content: '';
  display: block;
  width: 100% height: 100%;
  inset: 0;
  background: linear-gradient(270deg,
      rgba(19, 68, 82, 0) 0.02%,
      rgba(19, 68, 82, 0.05) 5%,
      rgba(19, 68, 82, 0.05) 95%,
      rgba(19, 68, 82, 0) 100%);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 769px) {
  .c-heritage-table tr:has(a):hover::before {
    opacity: 1;
  }

  .c-heritage-table tr:hover .c-heritage-table--link::before,
  .c-heritage-table tr:hover .c-heritage-table--link::after {
    animation: circle 2s linear infinite;
  }

  .c-heritage-table tr {
    grid-template-columns: calc(var(--scale) * 50) calc(var(--scale) * 400) 1fr calc(var(--scale) * 32);
    gap: calc(var(--scale) * 52);
    align-items: center;
    padding: calc(var(--scale) * 24) calc(var(--scale) * 15);
  }

  .c-heritage-table th {
    width: calc(var(--scale) * 400);
    font-size: max(14px, 1.6rem);
  }

  .c-heritage-table td {
    color: var(--navy);
    width: 100%;
    font-size: max(12px, 1.4rem);
  }

  .c-heritage-table td.u-time {
    display: block;
    order: -1;
    font-size: max(12px, 1.2rem);
    position: relative;
    top: auto;
    right: auto;
  }

  .c-heritage-table--link {
    --circle-size: calc(var(--scale) * 32);
    position: relative;
    top: auto;
    right: auto;
  }

  .c-heritage-table--link a::after {
    top: calc(var(--scale) * 13);
    left: calc(var(--scale) * 13.5);
  }
}

/*
==============================================================
 Solution
==============================================================
*/
.l-solution-sectionarea {
  display: grid;
  gap: calc(var(--scale) * 120);
}

.c-solution-section {
  position: relative;
}

.l-solution-section-titlearea {
  position: relative;
}

.c-solution-section--num {
  display: inline-block;
  background: linear-gradient(137.27deg, rgba(75, 116, 153, 0.5) 0%, rgba(104, 113, 138, 0.2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 4.4rem);
  line-height: 1.05;
  letter-spacing: 0;
  position: absolute;
  top: calc(var(--scale) * -21);
  left: calc(var(--scale) * 0);
}

.c-solution-section--title {
  margin: 0 0 calc(var(--scale) * 24);
  padding: 0 0 0 calc(var(--scale) * 25);
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.2rem);
  line-height: 1.5;
  text-align:left;
  letter-spacing: 0;
}

.c-solution-section--img {
  margin: 0 0 calc(var(--scale) * 28);
}

.c-solution-section--txt {
  margin: 0 0 calc(var(--scale) * 32);
}

.c-solution-section--button {
  margin-left: 0;
}

@media screen and (min-width: 769px) {
  .l-contents-inner:has(.c-solution-first) {
    width: calc(var(--scale) * 1200);
  }

  .c-solution-first--txt {
    width: calc(var(--scale) * 800);
    margin: 0 auto;
  }

  .l-solution-sectionarea {
    display: grid;
    gap: calc(var(--scale) * 100);
  }

  .c-solution-section {
    display: grid;
    align-items: center;
    align-content: center;
    height: calc(var(--scale) * 520);
  }

  .c-solution-section:nth-of-type(odd) {
    padding: 0 calc(var(--scale) * 516) 0 0;
  }

  .c-solution-section:nth-of-type(even) {
    padding: 0 0 0 calc(var(--scale) * 516);
  }

  .c-solution-section--num {
    font-size: max(11px, 6.4rem);
    line-height: 1.05;
    letter-spacing: 0;
    top: calc(var(--scale) * -31);
    left: calc(var(--scale) * -35);
  }

  .c-solution-section--title {
    margin: 0 0 calc(var(--scale) * 40);
    padding: 0;
    font-weight: var(--weight-regular);
    font-size: max(11px, 3rem);
    line-height: 1.5;
    letter-spacing: 0;
  }

  .c-solution-section--img {
    margin: 0;
    width: calc(var(--scale) * 442);
    max-width: 520px;
    height: calc(var(--scale) * 520);
    position: absolute;
    top: calc(50% - (var(--scale) * 221));
  }

  .c-solution-section:nth-of-type(odd) .c-solution-section--img {
    right: 0;
  }

  .c-solution-section:nth-of-type(even) .c-solution-section--img {
    left: 0;
  }

  .c-solution-section--txt {
    margin: 0;
  }
}


/*
==============================================================
 Company
==============================================================
*/
.c-company--title {
  margin: 0 0 calc(var(--scale) * 56);
  color: #465767;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(11px, 2.0rem);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

@media (max-width: 768px) {
  .c-company-table .c-list {
    margin: calc(var(--scale) * 12) 0;
  }
}

@media (min-width: 769px) {
  .c-company--title {
    margin: 0 0 calc(var(--scale) * 80);
    font-size: max(11px, 3.0rem);
  }
}



/*
==============================================================
 Service List
==============================================================
*/
.c-service-list {
  display: grid;
  gap: calc(var(--scale) * 80);
}

.c-service-list-item a {
  display: block;
}

.c-service-list--img {
  margin: 0 0 calc(var(--scale) * 17);
  width: 100%;
}

.c-service-list--title {
  margin: 0 0 calc(var(--scale) * 16);
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.2rem);
  line-height: 1.5;
  letter-spacing: 0;
}

.c-service-list--button {
  margin: calc(var(--scale) * 16) 0 0 0;
}

@media (min-width: 769px) {
  #p-service .l-contents-inner {
    width: calc(var(--scale) * 1180);
  }

  .c-service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--scale) * 80);
  }

  .c-service-list-item a:hover .c-button::before {
    animation: circle 2s linear infinite;
  }

  .c-service-list--img {
    margin: 0 0 calc(var(--scale) * 24);
    overflow: hidden;
  }

  .c-service-list--img img {
    transition: transform 0.5s ease;
  }

  .c-service-list-item a:hover .c-service-list--img img {
    transform: scale(1.05);
  }

  .c-service-list--title {
    margin: 0 0 calc(var(--scale) * 24);
    font-size: max(11px, 2.4rem);
  }

  .c-service-list--button {
    margin-top: calc(var(--scale) * 32);
  }
}

/*
==============================================================
 Service Detail
==============================================================
*/
.c-service-detail-first {
  margin: 0 0 calc(var(--scale) * 80);
}

.c-service-detail--title {
  margin: 0 0 calc(var(--scale) * 17);
  font-weight: var(--weight-regular);
  font-size: max(11px, 2.2rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}

.c-service-detail--img {
  margin: 0 0 calc(var(--scale) * 17);
}

.l-service-sectionarea {
  gap: calc(var(--scale) * 80);
}

.c-service-section--title {
  margin: 0 0 calc(var(--scale) * 17);
  font-size: max(11px, 1.8rem);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-casestudy-box {
  margin: calc(var(--scale) * 32) 0 0;
  padding: calc(var(--scale) * 24) calc(var(--scale) * 24) calc(var(--scale) * 62);
}

.c-casestudy-title {
  padding: 0 0 calc(var(--scale) * 20);
  margin: 0 0 calc(var(--scale) * 24);
  position: relative;
}

.c-casestudy-title:after {
  content: '';
  display: block;
  width: calc(100% + (var(--scale) * 24));
  height: 2px;
  background: var(--line-gradient);
  transform: scaleY(0.5);
  position: absolute;
  bottom: 0;
  left: calc(var(--scale) * -12);
}

.c-casestudy--title-eng {
  margin: 0 0 calc(var(--scale) * 4);
  color: #465767;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: max(11px, 1.7rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}

.c-casestudy--title-jp {
  font-weight: 400;
  font-size: max(11px, 1.6rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: justify;
}

.c-movie {
  display: block;
  aspect-ratio: 16 / 9;
  margin: calc(var(--scale) * 24) 0 0;
}

.c-movie iframe {
  width: 100%;
  height: 100%;
  padding: calc(var(--scale) * 8);
  background-color: var(--white);
}

.c-movie--caption {
  margin-top: calc(var(--scale) * 8);
  color: var(--navy-40);
  font-weight: 400;
  font-size: max(11px, 1.2rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
}

.c-service-detail-table {
  width: 100%;
  margin: calc(var(--scale) * 32) 0 calc(var(--scale) * 48);
  border: 1px solid var(--navy-20);
  border-width: 1px 0 0 1px;
}

.c-service-detail-table th,
.c-service-detail-table td {
  width: calc(100% / 3);
  height: calc(var(--scale) * 48);
  border: 1px solid var(--navy-20);
  border-width: 0 1px 1px 0;
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.3rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
}

.l-service-detail-boxarea {
  display: grid;
  gap: calc(var(--scale) * 20);
}

.c-service-detail-box {
  padding: calc(var(--scale) * 16) calc(var(--scale) * 20);
}

.c-service-detail-box--title {
  display: flex;
  align-items: start;
  padding: 0 0 calc(var(--scale) * 16);
  margin: 0 0 calc(var(--scale) * 12);
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  position: relative;
}

.c-service-detail-box--title::after {
  content: '';
  display: block;
  width: calc(100% + calc(var(--scale) * 24));
  height: 2px;
  background: var(--line-gradient);
  transform: scaleY(0.5);
  position: absolute;
  left: calc(var(--scale) * -12);
  bottom: 0;
}

.c-service-detail-box--title .u-num {
  display: block;
  padding-top: calc(var(--scale) * 4);
  margin: 0 calc(var(--scale) * 12) 0 0;
  font-family: var(--font-en);
  font-weight: 200;
  font-style: Italic;
  font-size: max(11px, 1.6rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.c-service-spec-table th {
  font-size: max(11px, 1.3rem);
}

.c-service-spec-table td {
  font-size: max(11px, 1.5rem);
}

.u-notice {
  display: block;
  color: var(--navy-70);
  margin: calc(var(--scale) * 10) 0 0;
  font-weight: var(--weight-regular);
  font-size: max(11px, 1.4rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

@media (min-width: 769px) {
  .c-service-detail-first {
    margin: 0 0 calc(var(--scale) * 160);
  }

  .c-service-detail--title {
    margin: 0 0 calc(var(--scale) * 32);
    font-size: clamp(20px, 3.2rem, 38px);
  }

  .c-service-detail--img {
    margin: 0 0 calc(var(--scale) * 32);
  }

  .l-service-sectionarea {
    gap: calc(var(--scale) * 160);
  }

  .c-service-section--title {
    margin: 0 0 calc(var(--scale) * 64);
    font-size: max(11px, 2.5rem);
    text-align: center;
  }

  .c-casestudy-box {
    width: calc(var(--scale) * 880);
    margin: calc(var(--scale) * 40) auto 0;
    padding: calc(var(--scale) * 48) calc(var(--scale) * 40) calc(var(--scale) * 75);
  }

  .c-casestudy-title {
    padding: 0 0 calc(var(--scale) * 24);
    margin: 0 0 calc(var(--scale) * 32);
    position: relative;
  }

  .c-casestudy-title:after {
    width: calc(100% + (var(--scale) * 60));
    left: calc(var(--scale) * -20);
  }

  .c-casestudy--title-jp {
    font-size: max(11px, 1.8rem);
    text-align: center;
  }

  .c-movie {
    width: calc(var(--scale) * 640);
    margin: calc(var(--scale) * 48) auto 0;
  }

  .c-service-detail-table {
    display: block;
    width: 100%;
    margin: calc(var(--scale) * 56) 0;
  }

  .c-service-detail-table tbody {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }

  .c-service-detail-table tr {
    display: grid;
    grid-template-columns: 1fr;
  }

  .c-service-detail-table th,
  .c-service-detail-table td {
    display: grid;
    place-content: center;
    width: 100%;
    height: calc(var(--scale) * 64);
    font-size: max(11px, 1.5rem);
  }

  .l-service-detail-boxarea {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--scale) * 24);
  }

  .c-service-detail-box {
    padding: calc(var(--scale) * 31) calc(var(--scale) * 20) calc(var(--scale) * 32);
  }

  .c-service-detail-box--title {
    display: grid;
    justify-content: center;
    justify-items: center;
    margin: 0 0 calc(var(--scale) * 24);
    font-size: max(11px, 1.6rem);
  }

  .c-service-detail-box--title::after {
    width: calc(100% + (var(--scale) * 24));
    left: calc(var(--scale) * -12);
  }

  .c-service-detail-box--title .u-num {
    display: block;
    padding-top: 0;
    margin: 0 0 calc(var(--scale) * 2);
    font-size: max(11px, 2.0rem);
  }

  .c-service-detail-box-list {
    padding: 0 calc(var(--scale) * 8);
  }

  .c-service-spec-table {
    width: calc(var(--scale) *);
    margin: 0 auto;
  }

  .c-service-spec-table tr{
    width: 100%;
    grid-template-columns: calc(var(--scale) * 295) calc(var(--scale) * 615);
  }

  .c-service-spec-table th {
    font-size: max(11px, 1.6rem);
  }

  .c-service-spec-table td {
    font-size: max(11px, 1.5rem);
  }

}

.grecaptcha-badge {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}