@charset "UTF-8";
/*!
page > common > common
------------------------------
*/
/*!
global > Color
------------------------------
*/
.cl-blue {
  color: #08a9e3;
}

/*!
global > content-width
------------------------------
*/
/*!
global > font
------------------------------
*/
@font-face {
  font-family: "din";
  src: url("../font/DIN-Alternate-Bold.ttf") format("opentype");
}
@font-face {
  font-family: "koz-M";
  src: url("../font/KozGoPr6N-Medium.otf") format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "koz-R";
  src: url("../font/KozGoPr6N-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "spartan";
  src: url("../font/Spartan-VariableFont_wght.ttf") format("truetype");
}
.f-leageuespartan {
  font-family: "League Spartan", sans-serif;
}

.f-akshar {
  font-family: "Akshar", sans-serif;
}

.f-din-alternate {
  font-family: "din";
}

.f-roboto {
  font-family: "Roboto", sans-serif;
}

.f-koz-M {
  font-family: "koz-M";
}

.f-koz-R {
  font-family: "koz-R";
}

.f-spartan {
  font-family: "spartan";
}

/*!
global > function
------------------------------
*/
.c_breadcrumb__item, .c-footer__copyright {
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  .c_breadcrumb__item, .c-footer__copyright {
    font-size: 0.875rem;
  }
}

.c-ttl20, .c-txt20 {
  font-size: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .c-ttl20, .c-txt20 {
    font-size: 1.25rem;
  }
}

.c-txt23 {
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .c-txt23 {
    font-size: 1.4375rem;
  }
}

.c-txt25 {
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  .c-txt25 {
    font-size: 1.5625rem;
  }
}

.c-ttl01 .ttl {
  font-size: clamp(1.125rem, 3.1168831169vw + 0.3808441558rem, 1.875rem);
}
@media screen and (min-width: 768px) {
  .c-ttl01 .ttl {
    font-size: clamp(1.5rem, 1.1278195489vw + 0.9586466165rem, 1.875rem);
  }
}

.c-ttl35, .c-txt35 {
  font-size: 1.3125rem;
}
@media screen and (min-width: 768px) {
  .c-ttl35, .c-txt35 {
    font-size: 2.1875rem;
  }
}

.c-ttl40, .c-mv-ttl__jp {
  font-size: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .c-ttl40, .c-mv-ttl__jp {
    font-size: 2.5rem;
  }
}

.c-ttl58 {
  font-size: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .c-ttl58 {
    font-size: clamp(2rem, 9.4202898551vw + -4.0289855072rem, 3.625rem);
  }
}

/*!
foundation > base
------------------------------
*/
html {
  overflow-y: scroll;
}

body {
  font-size: 0.9375rem;
  font-family: "Noto Sans JP", sans-serif;
  color: #24304f;
  font-feature-settings: "palt";
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1rem;
  }
}
body.fixed {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.body-wrapper {
  width: 100%;
  display: block;
  overflow: clip;
  position: relative;
}

main {
  position: relative;
  z-index: 5;
}

.full {
  width: 100%;
}

img {
  max-width: 100%;
  width: 100%;
}

:where(a, .h_opacity) {
  cursor: pointer;
  transition: opacity 0.5s ease;
}

@media screen and (min-width: 768px) {
  :where(a:hover, .h_opacity:hover) {
    opacity: 0.6;
  }
}
.pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .pc {
    display: initial !important;
  }
}

.sp {
  display: initial !important;
}
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

a.blank {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media screen and (min-width: 768px) {
  a.blank:hover {
    text-decoration: none;
  }
}

/*!
foundation > reset
------------------------------
*/
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  display: table;
  /* 1 */
  color: inherit;
  /* 2 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px;
  /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.c-footer {
  padding: 20px 0 60px;
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .c-footer {
    padding: 20px 0;
  }
}
.c-footer__logo {
  width: 100%;
  position: relative;
  top: 1px;
}
@media screen and (min-width: 768px) {
  .c-footer__logo {
    top: 0;
    width: clamp(26.25rem, 18.7969924812vw + 17.227443609rem, 32.5rem);
  }
}
.c-footer__logo img {
  width: 84px;
}
@media screen and (min-width: 768px) {
  .c-footer__logo img {
    width: clamp(3.75rem, 4.5112781955vw + 1.5845864662rem, 5.25rem);
  }
}
.c-footer__logo .logo {
  width: 100%;
  display: flex;
  gap: 6px;
}
@media screen and (min-width: 768px) {
  .c-footer__logo .logo {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
  }
}
.c-footer__logo .logo-txt01 {
  display: block;
  padding-bottom: 1px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #252823;
}
@media screen and (min-width: 768px) {
  .c-footer__logo .logo-txt01 {
    letter-spacing: 0.05em;
    font-size: clamp(0.875rem, 0.7518796992vw + 0.5140977444rem, 1.125rem);
  }
}
.c-footer__logo .logo-txt02 {
  display: block;
  font-size: 1rem;
  color: #252823;
}
@media screen and (min-width: 768px) {
  .c-footer__logo .logo-txt02 {
    letter-spacing: 0.059em;
    font-size: clamp(0.9875rem, 1.9172932331vw + 0.0671992481rem, 1.625rem);
  }
}
.c-footer__inner {
  width: 100%;
  max-width: 1214px;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .c-footer__inner {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.625rem, 14.7058823529vw + -8.1985294118rem, 3.75rem);
  }
}
.c-footer__contact {
  display: flex;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .c-footer__contact {
    padding-right: clamp(0rem, 7.7067669173vw + -3.6992481203rem, 2.5625rem);
    gap: 12px;
  }
}
.c-footer__contact .contact-icon {
  width: 57px;
}
@media screen and (min-width: 768px) {
  .c-footer__contact .contact-icon {
    position: relative;
    top: 10px;
  }
}
@media screen and (min-width: 768px) {
  .c-footer__contact .contact-inner {
    padding-top: 16px;
  }
}
.c-footer__contact .contact-inner__txt {
  padding-bottom: 10px;
  color: #091020;
}
@media screen and (min-width: 768px) {
  .c-footer__contact .contact-inner__txt {
    padding-bottom: 3px;
    font-size: clamp(0.875rem, 0.3759398496vw + 0.6945488722rem, 1rem);
  }
}
.c-footer__contact .contact-inner__desc {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .c-footer__contact .contact-inner__desc {
    flex-wrap: wrap;
    gap: clamp(0rem, 5.8823529412vw + -3.5294117647rem, 1.25rem);
    flex-direction: row;
  }
}
.c-footer__contact .contact-inner__item .item-tag {
  display: inline-block;
  background-color: #091020;
  color: #fff;
  font-weight: 500;
  padding: 4px 6px;
  position: relative;
  top: -4px;
  font-size: 0.8125rem;
  margin-right: 3px;
}
@media screen and (min-width: 768px) {
  .c-footer__contact .contact-inner__item .item-tag {
    font-size: clamp(0.625rem, 0.5639097744vw + 0.3543233083rem, 0.8125rem);
  }
}
.c-footer__contact .contact-inner__item .item-phone {
  font-weight: 700;
  letter-spacing: 0.07em;
  font-size: 1.375rem;
  font-family: "din";
  color: #091020;
}
@media screen and (min-width: 768px) {
  .c-footer__contact .contact-inner__item .item-phone {
    font-size: 1.5625rem;
  }
}
.c-footer__copyright {
  letter-spacing: 0.065em;
  font-weight: 400;
  text-align: center;
  padding: 30px 10px 0;
  color: #091020;
}
@media screen and (min-width: 768px) {
  .c-footer__copyright {
    padding: 30px 14px 0 0;
  }
}

/** -- ▷ header -- */
.c-header {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 12;
  transition: all 0.5s;
  top: 0;
}
@media screen and (min-width: 768px) {
  .c-header {
    top: clamp(0.9375rem, 3.5714285714vw + -0.7767857143rem, 2.125rem);
  }
}
@media screen and (min-width: 768px) {
  .c-header.active {
    top: 10px;
  }
}
.c-header.open-menu .c-header__inner {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.c-header__inner {
  position: relative;
  justify-content: space-between;
  display: flex;
  transition: all 0.5s;
  min-height: 44px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 3px 0 7px;
}
@media screen and (min-width: 768px) {
  .c-header__inner {
    border-radius: 18px;
    padding: 0 0 0 clamp(1.25rem, 1.3157894737vw + 0.6184210526rem, 1.6875rem);
  }
}
.c-header__logo {
  width: clamp(18.75rem, 5.1948051948vw + 17.5097402597rem, 20rem);
  position: relative;
  top: -1px;
}
@media screen and (min-width: 768px) {
  .c-header__logo {
    top: 0;
    width: clamp(18.75rem, 41.3533834586vw + -1.0996240602rem, 32.5rem);
  }
}
.c-header__logo img {
  width: clamp(3.0625rem, 2.8571428571vw + 2.3803571429rem, 3.75rem);
}
@media screen and (min-width: 768px) {
  .c-header__logo img {
    width: clamp(2.8125rem, 7.3308270677vw + -0.7062969925rem, 5.25rem);
  }
}
.c-header__logo .logo {
  width: 100%;
  display: flex;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .c-header__logo .logo {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
  }
}
.c-header__logo .logo-txt01 {
  color: #252823;
  display: block;
  padding-bottom: 1px;
  font-size: clamp(0.625rem, 0.5194805195vw + 0.500974026rem, 0.75rem);
  letter-spacing: 0.12em;
}
@media screen and (min-width: 768px) {
  .c-header__logo .logo-txt01 {
    letter-spacing: 0.05em;
    font-size: clamp(0.75rem, 1.1278195489vw + 0.2086466165rem, 1.125rem);
  }
}
.c-header__logo .logo-txt02 {
  color: #252823;
  display: block;
  font-size: clamp(0.9375rem, 0.2597402597vw + 0.875487013rem, 1rem);
}
@media screen and (min-width: 768px) {
  .c-header__logo .logo-txt02 {
    letter-spacing: 0.059em;
    font-size: clamp(0.9375rem, 2.0676691729vw + -0.054981203rem, 1.625rem);
  }
}
.c-header__content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
@media screen and (min-width: 768px) {
  .c-header__content {
    align-items: center;
  }
}
.c-header__desc {
  display: flex;
  justify-content: flex-end;
}
@media screen and (min-width: 768px) {
  .c-header__desc {
    width: 100%;
    max-width: clamp(26.25rem, 22.5563909774vw + 15.4229323308rem, 33.75rem);
  }
}
.c-header__info {
  position: fixed;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 6px 3px;
  left: 1px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (min-width: 768px) {
  .c-header__info {
    width: auto;
    gap: 0;
    position: relative;
    padding: 0;
    left: 0;
    bottom: 0;
    background-color: transparent;
  }
}
.c-header__info .info-booking {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 17px 3px 16px;
  gap: 7px;
  background-color: #08a9e3;
  color: #fff;
  width: calc(50% - 5px);
}
@media screen and (min-width: 768px) {
  .c-header__info .info-booking {
    justify-content: center;
    width: max-content;
    background-color: #fff;
    gap: clamp(0.3125rem, 0.9398496241vw + -0.1386278195rem, 0.625rem);
    padding: clamp(0.625rem, 0.78125vw + 0.25rem, 0.75rem) clamp(0.625rem, 1.3157894737vw + -0.0065789474rem, 1.0625rem) 9px clamp(0.625rem, 1.5037593985vw + -0.0968045113rem, 1.125rem);
  }
}
.c-header__info .info-booking__icon {
  width: clamp(1.6875rem, 2.0408163265vw + 1.2091836735rem, 2.1875rem);
}
@media screen and (min-width: 768px) {
  .c-header__info .info-booking__icon {
    width: clamp(1.5625rem, 1.8796992481vw + 0.6602443609rem, 2.1875rem);
    margin-top: -13px;
  }
}
.c-header__info .info-booking__ttl {
  font-weight: 500;
  font-size: 0.75rem;
  padding-bottom: 3px;
}
@media screen and (min-width: 768px) {
  .c-header__info .info-booking__ttl {
    padding-bottom: 0;
    color: #2bbae5;
    font-size: clamp(0.75rem, 0.7518796992vw + 0.3890977444rem, 1rem);
  }
}
.c-header__info .info-booking__phone {
  font-family: "Akshar", sans-serif;
  font-size: clamp(1.0625rem, 0.7792207792vw + 0.876461039rem, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
  .c-header__info .info-booking__phone {
    color: #2bbae5;
    font-size: clamp(1.0625rem, 1.0996240602vw + 0.5346804511rem, 1.428125rem);
  }
}
.c-header__info .info-booking__txt {
  font-size: clamp(0.4375rem, 0.5102040816vw + 0.3179209184rem, 0.5625rem);
}
@media screen and (min-width: 768px) {
  .c-header__info .info-booking__txt {
    font-size: 0.5625rem;
    color: #000000;
  }
}
.c-header__info .info-call {
  color: #fff;
  display: flex;
  gap: 11px;
  padding: 6px 5px 3px 7px;
  background-color: #0077bd;
  width: calc(50% - 5px);
}
@media screen and (min-width: 768px) {
  .c-header__info .info-call {
    gap: 11px;
    justify-content: center;
    align-items: center;
    width: max-content;
    background-color: #24304f;
    padding: clamp(0.375rem, 0.7518796992vw + 0.0140977444rem, 0.625rem) clamp(0.625rem, 1.8796992481vw + -0.2772556391rem, 1.25rem) clamp(0.375rem, 0.7518796992vw + 0.0140977444rem, 0.625rem) clamp(0.625rem, 1.3157894737vw + -0.0065789474rem, 1.0625rem);
  }
}
.c-header__info .info-call__icon {
  width: clamp(1.375rem, 2.5510204082vw + 0.7771045918rem, 2rem);
}
@media screen and (min-width: 768px) {
  .c-header__info .info-call__icon {
    width: clamp(1.5625rem, 1.3157894737vw + 0.9309210526rem, 2rem);
    margin-top: -14px;
  }
}
.c-header__info .info-call__ttl {
  font-weight: 500;
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  .c-header__info .info-call__ttl {
    font-size: clamp(0.75rem, 0.7518796992vw + 0.3890977444rem, 1rem);
  }
}
.c-header__info .info-call__number {
  font-size: clamp(0.9375rem, 0.7066326531vw + 0.7718829719rem, 1.110625rem);
  font-family: "Akshar", sans-serif;
}
@media screen and (min-width: 768px) {
  .c-header__info .info-call__number {
    font-size: clamp(0.625rem, 1.4605263158vw + -0.0760526316rem, 1.110625rem);
  }
}
.c-header__info .info-call__phone {
  font-family: "Akshar", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .c-header__info .info-call__phone {
    font-size: clamp(0.9375rem, 1.4755639098vw + 0.2292293233rem, 1.428125rem);
  }
}

.c-toggle {
  position: relative;
  top: 0;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 4.1558441558vw + 1.7577922078rem, 3.75rem);
  height: clamp(2.75rem, 4.1558441558vw + 1.7577922078rem, 3.75rem);
  cursor: pointer;
  z-index: 3;
  transition: all 0.5s;
  gap: 6px;
  padding-top: 2px;
}
@media screen and (min-width: 768px) {
  .c-toggle {
    right: 0;
    gap: clamp(0.125rem, 0.7518796992vw + -0.2359022556rem, 0.375rem);
    padding-top: 6px;
    width: clamp(3.75rem, 2.8195488722vw + 2.3966165414rem, 4.6875rem);
    height: clamp(3.75rem, 2.8195488722vw + 2.3966165414rem, 4.6875rem);
  }
}
@media screen and (min-width: 768px) {
  .c-toggle:hover {
    opacity: 0.6;
  }
}
.c-toggle__txt {
  font-weight: 500;
  transition: 0.5s ease;
  font-size: clamp(0.46875rem, 0.6493506494vw + 0.3137175325rem, 0.625rem);
  display: none;
}
@media screen and (min-width: 768px) {
  .c-toggle__txt {
    display: block;
    letter-spacing: 0.16em;
    font-size: clamp(0.625rem, 0.5639097744vw + 0.3543233083rem, 0.8125rem);
  }
}
.c-toggle__line {
  width: 43px;
  height: 15px;
  display: block;
  position: relative;
}
@media screen and (min-width: 768px) {
  .c-toggle__line {
    width: clamp(1.5625rem, 3.3834586466vw + -0.0615601504rem, 2.6875rem);
    height: clamp(1.25rem, 1.8796992481vw + 0.3477443609rem, 1.875rem);
  }
}
.c-toggle .line01,
.c-toggle .line02,
.c-toggle .line03 {
  position: absolute;
  width: 43px;
  height: 2px;
  background: #24304f;
  transition: 0.5s;
  transform-origin: center;
  transform: translate(-50%, -50%);
  left: 50%;
}
@media screen and (min-width: 768px) {
  .c-toggle .line01,
  .c-toggle .line02,
  .c-toggle .line03 {
    width: clamp(2.1875rem, 1.5037593985vw + 1.4656954887rem, 2.6875rem);
  }
}
.c-toggle .line01 {
  top: 50%;
}
.c-toggle .line02 {
  top: calc(50% - 13px);
}
@media screen and (min-width: 768px) {
  .c-toggle .line02 {
    top: calc(50% - clamp(0.4375rem, 1.3157894737vw + -0.1940789474rem, 0.875rem));
  }
}
.c-toggle .line03 {
  top: calc(50% + 13px);
}
@media screen and (min-width: 768px) {
  .c-toggle .line03 {
    top: calc(50% + clamp(0.4375rem, 1.3157894737vw + -0.1940789474rem, 0.875rem));
  }
}
.c-toggle.active .line01 {
  opacity: 0;
}
.c-toggle.active .line02 {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.c-toggle.active .line03 {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

[data-delay="0.1s"] {
  transition-delay: 0.1s;
}

[data-delay="0.2s"] {
  transition-delay: 0.2s;
}

[data-delay="0.3s"] {
  transition-delay: 0.3s;
}

[data-delay="0.4s"] {
  transition-delay: 0.4s;
}

[data-delay="0.5s"] {
  transition-delay: 0.5s;
}

[data-delay="0.6s"] {
  transition-delay: 0.6s;
}

[data-delay="0.7s"] {
  transition-delay: 0.7s;
}

[data-delay="0.8s"] {
  transition-delay: 0.8s;
}

[data-delay="0.9s"] {
  transition-delay: 0.9s;
}

[data-delay="1s"] {
  transition-delay: 1s;
}

[data-delay="1.5s"] {
  transition-delay: 1.5s;
}

.js_inview[data-duration="1s"] {
  transition-duration: 1s;
}

.js_inview[data-duration="1.5s"] {
  transition-duration: 1.5s;
}

.js_inview[data-duration="2s"] {
  transition-duration: 2s;
}

.js_inview {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 1s;
  transition-delay: 0s;
}

.fade {
  opacity: 0;
}

.fadeup {
  transform: translate3d(0, 100px, 0);
}

.fadedown {
  transform: translate3d(0, -100px, 0);
}

.faderight {
  transform: translate3d(30px, 0, 0);
}

.fadeleft {
  transform: translate3d(-30px, 0, 0);
}

.is_show.js_inview {
  opacity: 1;
  transform: none;
}

.c_breadcrumb {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .c_breadcrumb {
    margin-bottom: 32px;
  }
}
.c_breadcrumb__content {
  border-radius: 5px;
  background-color: #fff;
  display: inline-flex;
  padding: 7px 20px;
  overflow: auto clip;
}
@media screen and (min-width: 768px) {
  .c_breadcrumb__content {
    overflow: unset;
  }
}
.c_breadcrumb__item {
  line-height: 1.675;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.c_breadcrumb__item a {
  position: relative;
  color: #999999;
  margin-right: 8px;
  padding-right: 20px;
}
.c_breadcrumb__item a::after {
  content: "...";
  position: absolute;
  right: -8px;
  top: -2px;
  font-size: 0.625rem;
  width: 20px;
  height: 1px;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 768px) {
  .c_breadcrumb__item a::after {
    top: -1px;
  }
}
.c_breadcrumb__txt {
  color: #00b291;
}

/*!
component > btn
------------------------------
*/
.c-totop {
  position: fixed;
  width: 45px;
  height: 45px;
  right: 5px;
  z-index: 11;
  bottom: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0072cf;
  border: 2px solid #0072cf;
  border-radius: 100%;
  transform: translateY(150px);
  color: #fff;
  transition: 300ms;
}
.c-totop:hover {
  background-color: #fff;
}
.c-totop:hover::after {
  border-color: #0072cf;
}
@media screen and (min-width: 768px) {
  .c-totop {
    width: 60px;
    height: 60px;
    bottom: 30px;
  }
}
.c-totop::after {
  content: "";
  flex-shrink: 0;
  height: 10px;
  width: 10px;
  border-width: 0 2px 2px 0;
  border-color: #fff;
  border-style: solid;
  transform: rotate(-135deg);
  transition: background-color 0.5s ease;
  transform-origin: 50% 60%;
  position: relative;
  transition: 0.5s;
}
@media screen and (min-width: 768px) {
  .c-totop::after {
    height: 15px;
    width: 15px;
    border-width: 0 3px 3px 0;
  }
}

/*!
component > gnavi
------------------------------
*/
.c-gnavi {
  z-index: 2;
  width: 100%;
  display: none;
  position: absolute;
  left: 0;
  top: var(--header-height, 44px);
  height: 70vh;
  overflow: scroll;
  background-color: #fff;
  padding: 15px 16px 45px 18px;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}
@media screen and (min-width: 768px) {
  .c-gnavi {
    overflow: visible;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    height: auto;
    padding: clamp(1.875rem, 4.3233082707vw + -0.2001879699rem, 3.3125rem) clamp(1.875rem, 4.6992481203vw + -0.3806390977rem, 3.4375rem) clamp(1.875rem, 6.015037594vw + -1.0122180451rem, 3.875rem) clamp(1.875rem, 2.0676691729vw + 0.882518797rem, 2.5625rem);
  }
}
.c-gnavi.active {
  display: block;
  background-color: #fff;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.c-gnavi__menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(10rem, 10.3896103896vw + 7.5194805195rem, 12.5rem), 1fr));
  gap: 14px 10px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .c-gnavi__menu {
    grid-template-columns: repeat(auto-fill, minmax(clamp(11.25rem, 15.4135338346vw + 3.8515037594rem, 16.375rem), 1fr));
    gap: 23px 18px;
  }
}
.c-gnavi__inner {
  width: 100%;
  height: 73vh;
}
@media screen and (min-width: 768px) {
  .c-gnavi__inner {
    height: auto;
  }
}
.c-gnavi__item + .c_gnavi__item {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .c-gnavi__item + .c_gnavi__item {
    margin-top: 0;
  }
}
.c-gnavi__link {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  border: 1px solid #24304f;
  transition: all 0.5s;
  padding: 4px 10px 6px;
  min-height: 62px;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .c-gnavi__link {
    padding: 10px;
    min-height: 110px;
  }
}
.c-gnavi__link::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-top: 9px solid #24304f;
}
@media screen and (min-width: 768px) {
  .c-gnavi__link::after {
    left: 12px;
    top: 9px;
    border-right: 15px solid transparent;
    border-top: 15px solid #24304f;
  }
}
@media screen and (min-width: 768px) {
  .c-gnavi__link:hover {
    opacity: 1;
    background-color: #e1f0ff;
  }
}
.c-gnavi__icon .w-45 {
  width: clamp(1.4375rem, 5.7142857143vw + 0.0732142857rem, 2.8125rem);
}
.c-gnavi__icon .w-49 {
  width: clamp(1.6875rem, 5.7142857143vw + 0.3232142857rem, 3.0625rem);
}
.c-gnavi__icon .w-47 {
  width: clamp(1.5625rem, 5.7142857143vw + 0.1982142857rem, 2.9375rem);
}
.c-gnavi__icon .w-55 {
  width: clamp(1.875rem, 6.4935064935vw + 0.3246753247rem, 3.4375rem);
}
.c-gnavi__icon .w-40 {
  width: clamp(1.4375rem, 4.4155844156vw + 0.3832792208rem, 2.5rem);
}
.c-gnavi__icon .w-43 {
  width: clamp(1.4375rem, 5.1948051948vw + 0.1972402597rem, 2.6875rem);
}
.c-gnavi__icon .w-41 {
  width: clamp(1.625rem, 3.8961038961vw + 0.6948051948rem, 2.5625rem);
}
.c-gnavi__icon .w-51 {
  width: clamp(2rem, 4.9350649351vw + 0.8217532468rem, 3.1875rem);
}
.c-gnavi__icon .w-72 {
  width: clamp(2.8125rem, 7.012987013vw + 1.1381493506rem, 4.5rem);
}
.c-gnavi__icon .w-35 {
  width: clamp(1.25rem, 3.8961038961vw + 0.3198051948rem, 2.1875rem);
}
.c-gnavi__ttl {
  font-size: clamp(0.71875rem, 1.6883116883vw + 0.3156655844rem, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  padding-top: 5px;
}
@media screen and (min-width: 768px) {
  .c-gnavi__ttl {
    padding-top: 7px;
  }
}

.c-mv {
  position: relative;
}
.c-mv::before, .c-mv::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 200px;
  background: url(../images/common/img_mv_decore.svg) no-repeat center/contain;
}
@media screen and (min-width: 768px) {
  .c-mv::before, .c-mv::after {
    width: clamp(14.1rem, 28.2706766917vw + 0.530075188rem, 23.5rem);
    height: clamp(14.1rem, 28.2706766917vw + 0.530075188rem, 23.5rem);
  }
}
.c-mv::before {
  top: -50px;
  right: -40px;
  opacity: 0.3;
}
@media screen and (min-width: 768px) {
  .c-mv::before {
    top: clamp(-6.75rem, -8.1203007519vw + -0.1522556391rem, -4.05rem);
    right: -82px;
  }
}
.c-mv::after {
  bottom: -100px;
  left: -40px;
  opacity: 0.42;
}
@media screen and (min-width: 768px) {
  .c-mv::after {
    bottom: clamp(-9.1875rem, -11.0526315789vw + -0.2072368421rem, -5.5125rem);
    left: -64px;
  }
}
.c-mv-img {
  position: relative;
}
.c-mv-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #7dbdff;
  mix-blend-mode: multiply;
}
.c-mv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 350px;
}
.c-mv-ttl {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 1200px;
}
@media screen and (min-width: 768px) {
  .c-mv-ttl {
    top: calc(50% + 6px);
    flex-direction: row;
    gap: 16px;
  }
}
.c-mv-ttl__en {
  color: #fff;
  font-family: "spartan";
  font-size: 3.75rem;
  font-weight: 300;
  line-height: 1.3878167641;
}
@media screen and (min-width: 768px) {
  .c-mv-ttl__en {
    font-size: clamp(3.75rem, 8.007518797vw + -0.0936090226rem, 6.4125rem);
  }
}
.c-mv-ttl__en .spec {
  font-size: 2.5rem;
}
@media screen and (min-width: 768px) {
  .c-mv-ttl__en .spec {
    font-size: clamp(2.5rem, 6.7481203008vw + -0.7390977444rem, 4.74375rem);
  }
}
.c-mv-ttl__jp {
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .c-mv-ttl__jp {
    position: relative;
    top: 5px;
    font-size: clamp(1.875rem, 1.8796992481vw + 0.9727443609rem, 2.5rem);
  }
}

/*!
component > Other
------------------------------
*/
.img-circle {
  position: absolute;
  display: none;
}
@media screen and (min-width: 768px) {
  .img-circle {
    display: block;
  }
}
.img-circle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.42;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: top left;
  mask-image: url("./../images/common/img_circle.svg");
  background-color: #a4d1ff;
}

/*!
- Loadingpage
------------------------------
*/
html.is_loading #loadding {
  opacity: 1;
  pointer-events: all;
}
html.is_loading body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

#loadding {
  position: fixed;
  z-index: 999999;
  top: 0;
  width: 100%;
  height: 100vh;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background-color: #7dbdff;
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
}

.three-body {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  animation: spin 2.75s infinite linear;
}
.three-body__dot {
  position: absolute;
  height: 100%;
  width: 30%;
}
.three-body__dot:after {
  content: "";
  position: absolute;
  height: 0%;
  width: 100%;
  padding-bottom: 100%;
  background: #fff;
  border-radius: 50%;
}
.three-body__dot:nth-child(1) {
  bottom: 5%;
  left: 0;
  transform: rotate(60deg);
  transform-origin: 50% 85%;
}
.three-body__dot:nth-child(1)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 1.1s infinite ease-in-out;
  animation-delay: -0.33s;
}
.three-body__dot:nth-child(2) {
  bottom: 5%;
  right: 0;
  transform: rotate(-60deg);
  transform-origin: 50% 85%;
}
.three-body__dot:nth-child(2)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 1.1s infinite -0.165s ease-in-out;
}
.three-body__dot:nth-child(3) {
  bottom: -5%;
  left: 0;
  transform: translateX(116.666%);
}
.three-body__dot:nth-child(3)::after {
  top: 0;
  left: 0;
  animation: wobble2 1.1s infinite ease-in-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes wobble1 {
  0%, 100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}
@keyframes wobble2 {
  0%, 100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}
/*!
- Cookiewrap
------------------------------
*/
#cookiewrap {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #7dbdff;
  z-index: 999;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  display: none;
  color: #fff;
}
@media screen and (min-width: 768px) {
  #cookiewrap {
    padding: 40px;
  }
}
#cookiewrap .inner {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
#cookiewrap .inner .close {
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
  font-size: 0.875rem;
  line-height: 1em;
  border: 1px solid;
}
@media screen and (min-width: 768px) {
  #cookiewrap .inner .close {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}
#cookiewrap .inner .close a {
  display: block;
  padding: 8px;
  border: 1px solid var(--base);
}
#cookiewrap .inner .txt {
  font-size: 0.875rem;
  line-height: 1.8;
  padding-bottom: 45px;
}
@media screen and (min-width: 768px) {
  #cookiewrap .inner .txt {
    padding-bottom: 0;
    padding-right: 110px;
  }
}

/*!
component > Texts
------------------------------
*/
.c-txt {
  line-height: 1.56667;
  font-size: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .c-txt {
    line-height: 1.75;
    font-size: 1rem;
  }
}
.c-txtnum {
  font-family: "Akshar", sans-serif;
}

.hightline {
  background: linear-gradient(#ffff00 0%, #ffff00 100%);
  font-weight: 700;
}

.txt-yellow {
  color: #ffff00;
}

/*!
component > Title
------------------------------
*/
.c-ttl__en {
  font-family: "spartan";
  display: block;
  font-weight: 300;
  line-height: 1;
  font-size: clamp(3.75rem, 7.6530612245vw + 1.9563137755rem, 5.625rem);
}
@media screen and (min-width: 768px) {
  .c-ttl__en {
    font-size: clamp(5.625rem, 7.3308270677vw + 2.1062030075rem, 8.0625rem);
  }
}
.c-ttl01 {
  text-align: center;
}
.c-ttl01 .ttl {
  position: relative;
  font-weight: 500;
}
.c-ttl01 .ttl::after, .c-ttl01 .ttl::before {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 115%;
  background-color: #24304f;
}
.c-ttl01 .ttl::before {
  transform: rotate(45deg);
  left: -25px;
}
@media screen and (min-width: 768px) {
  .c-ttl01 .ttl::before {
    left: -29px;
  }
}
.c-ttl01 .ttl::after {
  transform: rotate(45deg);
  right: -25px;
}
@media screen and (min-width: 768px) {
  .c-ttl01 .ttl::after {
    right: -29px;
  }
}
.c-ttl02 .ttl {
  position: relative;
  display: inline-block;
}
.c-ttl02 .ttl::after, .c-ttl02 .ttl::before {
  content: "";
  position: absolute;
  bottom: -17px;
  width: 2px;
  height: 127%;
  background-color: #fff;
}
.c-ttl02 .ttl::before {
  left: -41px;
  transform: rotate(-18deg);
}
.c-ttl02 .ttl::after {
  right: -41px;
  transform: rotate(18deg);
}
.c-ttl02__jp01, .c-ttl02__jp02 {
  display: inline-block;
}
.c-ttl02__jp01 {
  padding-bottom: 14px;
  font-size: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .c-ttl02__jp01 {
    font-size: 3.125rem;
  }
}
.c-ttl02__jp02 {
  font-size: 0.78125rem;
}
@media screen and (min-width: 768px) {
  .c-ttl02__jp02 {
    font-size: 1.5625rem;
  }
}
.c-ttl20 {
  display: block;
}
.c-ttl30 {
  font-size: 1rem;
  display: block;
}
@media screen and (min-width: 768px) {
  .c-ttl30 {
    font-size: 1.875rem;
  }
}
.c-ttl35 {
  display: block;
}
.c-ttl40 {
  display: block;
}
.c-ttl50 {
  font-size: 1.5625rem;
  display: block;
}
@media screen and (min-width: 768px) {
  .c-ttl50 {
    font-size: 3.125rem;
  }
}
.c-ttl58 {
  display: block;
}

/*!
layout > container
------------------------------
*/
.container {
  width: 100%;
  max-width: 1240px;
  padding: 0 16px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

.u-txt-white {
  color: #fff !important;
}

.u-txt-black {
  color: #000 !important;
}

.u-txt-main {
  color: var(--main-cl);
}

.u-txt-left {
  text-align: left !important;
}

.u-txt-right {
  text-align: right !important;
}

.u-txt-center {
  text-align: center !important;
}

.u-fw900 {
  font-weight: 900 !important;
}

.u-fw800 {
  font-weight: 800 !important;
}

.u-fw700 {
  font-weight: 700 !important;
}

.u-fw600 {
  font-weight: 600 !important;
}

.u-fw500 {
  font-weight: 500 !important;
}

.u-fw400 {
  font-weight: 400 !important;
}

.u-fw300 {
  font-weight: 300 !important;
}

/*# sourceMappingURL=common.css.map */


/* スマホ表示（画面幅767px以下）の時のみ適用 */
@media screen and (max-width: 767px) {
    
    /* ボタン全体のデザインと、中身を縦並びにする設定 */
    .c-toggle {
        background-color: #08a9e3 !important; /* 背景を紺色 */
        display: flex !important;
        flex-direction: column !important; /* 中身（バーと文字）を縦並びにする */
        justify-content: center !important; /* 縦方向の中央に配置 */
        align-items: center !important; /* 横方向の中央に配置 */
    }

    /* メニューバー（3本の線）全体の設定 */
    .c-toggle__line {
        transform: scale(0.6); /* バー全体を80%に縮小 */
        position: relative !important; /* 配置の調整 */
        margin-bottom: 0px !important; /* ★追加：下の「MENU」文字との間に少し隙間を空ける */
    }

    /* メニューバー（3本の線）を白に変更 */
    .c-toggle__line .line01,
    .c-toggle__line .line02,
    .c-toggle__line .line03 {
        background-color: #ffffff !important;
    }

    /* 「MENU」の文字の設定 */
    .c-toggle__txt {
        display: block !important; /* 文字が非表示になっていれば表示させる */
        color: #ffffff !important; /* 文字色を白 */
        font-size: 10px !important; /* ★追加：スマホ表示に合わせて文字サイズを小さめに調整 */
        line-height: 1 !important; /* 余計な行間をなくす */
    }
    
}

/* =========================================
   前方アプローチ下の拡大ボタンエリア
========================================= */

/* コンテナ（Gridを使って幅と高さを完全に揃える） */
.p-custom-approach-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 横並びで2等分 */
    gap: 40px; /* ボタン間のスペース */
    list-style: none;
    padding: 0;
    margin: 60px auto;
    max-width: 800px;
}

.p-custom-approach-btns .c-gnavi__item {
    margin: 0; 
}

/* リンク部分（ボタンの中身） */
.p-custom-approach-btns .c-gnavi__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%; /* Gridの高さいっぱいに広げる = 高さの同期 */
    padding: 30px 20px;
    box-sizing: border-box;
    background-color: #ffffff; /* 必要に応じてボタンの背景色を指定してください */
    border-radius: 8px; /* 角丸などがあればここで調整 */
    text-decoration: none; /* 下線を消す */
    transition: all 0.3s ease; /* ★追加：マウスオーバー時の変化をフワッと滑らかにする */
}

/* ★追加：PC表示でマウスオーバー（ホバー）した時の処理 */
@media (any-hover: hover) {
    .p-custom-approach-btns .c-gnavi__link:hover {
        opacity: 0.4; /* ★画像を少し透けさせる（元のナビに合わせて0.5〜0.8で微調整してください） */
        
        /* ※もし元のナビが「透ける」のではなく「背景色が変わる」仕様であれば、
           上の opacity: 0.6; を消して、以下のように背景色を指定してください。
           background-color: #f5f5f5; 
        */
    }
}

/* アイコンエリア */
.p-custom-approach-btns .c-gnavi__icon {
    display: flex;
    align-items: center; /* アイコン自体をエリア内で上下中央に */
    justify-content: center;
    height: 80px; 
    margin: 0 0 15px 0 !important; /* テキストとの間の余白 */
}

.p-custom-approach-btns .c-gnavi__icon img {
    width: 65px !important;
    height: auto;
}

/* PC表示：テキストを下揃えにする（底辺を揃える） */
.p-custom-approach-btns .c-gnavi__ttl {
    font-size: 18px !important;
    line-height: 1.4 !important;
    text-align: center;
    margin: auto 0 0 0 !important; /* 上部の余白をautoにして、一番下に押し下げる */
    color: #333; /* 文字色（環境に合わせて適宜変更してください） */
}


/* --- スマホ表示用（画面幅767px以下） --- */
@media screen and (max-width: 767px) {
    /* スマホ表示：横並び（2列） */
    .p-custom-approach-btns {
        grid-template-columns: repeat(2, 1fr); 
        grid-auto-rows: 1fr; /* 高さを揃える */
        gap: 10px; /* スマホ画面で横並びにするため、隙間を狭めに（10px） */
        margin: 40px auto; 
        padding: 0 10px; /* 画面端にくっつかないよう全体に少し余白を */
    }

    .p-custom-approach-btns .c-gnavi__item {
        width: 100%; 
        margin: 0;
    }

    /* ボタンの内側の余白を縮小（20px 10px） */
    .p-custom-approach-btns .c-gnavi__link {
        padding: 20px 10px !important;
    }

    /* アイコンエリアの高さを80%に縮小（80px → 64px） */
    .p-custom-approach-btns .c-gnavi__icon {
        height: 64px !important;
        margin: 0 0 12px 0 !important; 
    }

    /* アイコン画像のサイズを80%に縮小（65px → 52px） */
    .p-custom-approach-btns .c-gnavi__icon img {
        width: 52px !important;
    }

    /* テキストサイズを80%に縮小（13px → 約10px） */
    .p-custom-approach-btns .c-gnavi__ttl {
        font-size: 16px !important;
    }
}