@charset "UTF-8";
/* -------------------------------------------*/ /* -------------------------------------------*/
/* -------------------------------------------*/
:root {
  --content_width: 960px;
  --content-both_space: 15px;
  --header_height:90px;
  --waves_height: 60px;
}
@media screen and (max-width: 1023px) {
  :root {
    --content-both_space: 15px;
    --header_height:65px;
    --waves_height: 20px;
  }
}

/* -------------------------------------------*/ /* -------------------------------------------*/
/* -------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

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

summary::-webkit-details-marker {
  display: none;
}

/* -------------------------------------------*/
@media all and (-ms-high-contrast: none) {
  html,
body {
    display: none;
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  -ms-overflow-style: scrollbar;
  overflow: auto;
  scroll-padding-top: 80px;
  font-size: 62.5%;
}
@media screen and (max-width: 1023px) {
  html {
    font-size: 62.5%;
  }
}
body {
  position: relative;
  height: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  letter-spacing: 0;
  color: #11212F;
  background-color: #f1efe9;
}
@media screen and (max-width: 1023px) {
  body {
    width: 100%;
    min-width: 100%;
  }
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

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

a,
button {
  text-decoration: none;
  color: #11212F;
}

picture {
  display: block;
  line-height: 0;
}

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

input,
button,
select,
optgroup,
textarea {
  vertical-align: middle;
  position: relative;
  border: none;
  border: none;
  margin: 0;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-border-radius: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  border-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

@media not all and (max-width: 1023px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/* -------------------------------------------*/
@-webkit-keyframes circlemove {
  0% {
    bottom: 2.5rem;
  }
  100% {
    bottom: -4.6rem;
  }
}
@keyframes circlemove {
  0% {
    bottom: 2.5rem;
  }
  100% {
    bottom: -4.6rem;
  }
}
@-webkit-keyframes circlemoveSp {
  0% {
    bottom: -1.6rem;
  }
  100% {
    bottom: -8.6rem;
  }
}
@keyframes circlemoveSp {
  0% {
    bottom: -1.6rem;
  }
  100% {
    bottom: -8.6rem;
  }
}
@-webkit-keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInNon {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInNon {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
::-moz-placeholder {
  color: #BFCED9;
  font-weight: 400;
}
::placeholder {
  color: #BFCED9;
  font-weight: 400;
}

/**
 * input
 *
 */
input[type=text],
input[type=date],
input[type=password],
input[type=email],
input[type=time],
input[type=tel],
input[type=number] {
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  position: relative;
  width: 100%;
  padding: 9px 19px;
  border-radius: 3px;
  border: 1px solid #282828;
  background-color: #fff;
  box-shadow: none;
}
@media screen and (max-width: 767px) {
  input[type=text],
input[type=date],
input[type=password],
input[type=email],
input[type=time],
input[type=tel],
input[type=number] {
    font-size: 1.8rem;
    padding: 0.7rem 0.8rem;
  }
}

input[type=number] {
  -moz-appearance: textfield;
}

/**
 * textarea
 *
 */
textarea {
  position: relative;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  height: 18rem;
  padding: 9px 19px;
  border-radius: 3px;
  border: 1px solid #282828;
  background-color: #fff;
  resize: none;
  box-shadow: none;
}
@media screen and (max-width: 767px) {
  textarea {
    padding: 0.7rem;
    height: 22.6rem;
  }
}

input[type=text]:disabled {
  background: transparent;
  cursor: not-allowed;
}
input[type=text]:disabled::-moz-placeholder {
  color: #1D6FB9;
  opacity: 1;
}
input[type=text]:disabled::placeholder {
  color: #1D6FB9;
  opacity: 1;
}

/**
 * radio
 *
 */
input[type=radio] {
  display: none;
  vertical-align: middle;
}

.radio-lb {
  font-size: 2.4rem;
  position: relative;
  display: inline-block;
  padding: 0 0 0 2.8rem;
  transition: 0.5;
  transition-property: color;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .radio-lb {
    font-size: 1.6rem;
  }
}

.radio-lb::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  border: 2px solid #11212F;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 2;
}

.radio-lb::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #11212F;
  transition: 0.3s;
  transition-property: color;
  opacity: 0;
  z-index: 3;
}

.radio-lb:has(input[type=radio]:checked)::after {
  opacity: 1;
}

/**
 * checkbox
 *
 */
input[type=checkbox] {
  display: none;
  vertical-align: middle;
}

.check-lb {
  color: #11212F;
  position: relative;
  display: inline-block;
  padding: 0 0 0 24px;
  transition: 0.5;
  transition-property: color;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .check-lb {
    padding-left: 2.8rem;
  }
}

.check-lb::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border: 1px solid #282828;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 3px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .check-lb::before {
    width: 1.8rem;
    height: 1.8rem;
  }
}

.check-lb::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 4px;
  width: 12px;
  height: 6px;
  border-left: 1px solid #1D6FB9;
  border-bottom: 1px solid #1D6FB9;
  transform: rotate(-45deg);
  transition: 0.3s;
  transition-property: color;
  opacity: 0;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .check-lb::after {
    border-width: 2px;
    top: 7px;
    left: 4px;
    width: 16px;
    height: 9px;
    top: 42%;
    transform: translateY(-50%) rotate(-45deg);
  }
}

.check-lb:has(input[type=checkbox]:checked)::after {
  opacity: 1;
}

/**
 * select
 *
 */
.select-parts {
  position: relative;
  width: 100%;
  border: 1px #1D6FB9 solid;
  border-radius: 5px;
  overflow: hidden;
}
.select-parts::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 15px;
  height: 10px;
  margin-top: 2px;
  background: url(../img/contact/select_arrow.png) no-repeat top center/contain;
  pointer-events: none;
  z-index: 5;
}
.select-parts select {
  position: relative;
  width: 100%;
  height: 45px;
  padding: 0 20px 0 15px;
  background: #fbefe3;
  color: #7f7f7f;
  font-size: 2rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  border: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  text-align: center;
}

/**
 * file
 *
 */
input[type=file] + label {
  width: 160px;
  margin: 0 10px 0 0;
  padding: 15px 0;
}
input[type=file] + label:after {
  left: 170px;
}

/* -------------------------------------------*/
/* -------------------------------------------*/
.l-wrapper {
  position: relative;
  width: 100%;
  text-align: left;
}
@media not all and (max-width: 1023px) {
  .l-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0 auto;
    text-align: left;
  }
}

.l-main {
  position: relative;
  width: 100%;
  margin-top: 13rem;
}
@media screen and (max-width: 1023px) {
  .l-main {
    margin-top: 6rem;
  }
}
@media screen and (max-width: 767px) {
  .l-main {
    margin-top: 6.1rem;
  }
}

.l-main--404,
.l-main--error {
  padding-block: 12rem 8rem;
}
.l-main--404 .error-h1,
.l-main--error .error-h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
}
.l-main--404 .error-h1 .en,
.l-main--error .error-h1 .en {
  font-size: 7rem;
  font-family: "Roboto", sans-serif;
  color: #1D6FB9;
}
@media screen and (max-width: 767px) {
  .l-main--404 .error-h1 .en,
.l-main--error .error-h1 .en {
    font-size: 4rem;
  }
}
.l-main--404 .error-h1 .jp,
.l-main--error .error-h1 .jp {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .l-main--404 .error-h1 .jp,
.l-main--error .error-h1 .jp {
    font-size: 1.8rem;
  }
}
.l-main--404 .error-text,
.l-main--error .error-text {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  line-height: 1.7;
  margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
  .l-main--404 .error-text,
.l-main--error .error-text {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .l-main--404 .error-text span,
.l-main--error .error-text span {
    display: inline-block;
  }
}
.l-main--404 .error-link,
.l-main--error .error-link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  display: block;
  font-size: 1.6rem;
  margin: 4.8rem auto 0;
  position: relative;
}


/* -------------------------------------------*/ 
body.is-open .l-navi {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media screen and (max-width: 1023px) {
  .l-navi {
    width: 30rem;
    height: calc(100% - 6.1rem);
    max-width: 100vw;
    padding: 4rem 2rem;
    display: block;
    background-color: rgba(17, 33, 47, 0.9);
    z-index: 50;
    position: fixed;
    top: 6.1rem;
    right: 0;
    transition: 0.5s;
    border: none;
    overflow-y: scroll;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
  }
}

.l-navi__menu {
  display: flex;
  justify-content: center;
  gap: 3rem;
  background-color: #f1efe9;
}
@media screen and (max-width: 1023px) {
  .l-navi__menu {
    flex-direction: column;
    gap: 0;
  }
}

@media screen and (max-width: 1023px) {
  .l-navi__menu-item {
    border-bottom: 1px solid #DDDDDD;
  }
}
@media screen and (max-width: 767px) {
  .l-navi__menu-item {
    width: 100%;
  }
}
.l-navi__menu-item.has-child {
  position: relative;
}
.l-navi__menu-item.has-child .l-navi__menu-link {
  flex-direction: row;
  gap: 0.35rem;
}
@media (hover: hover) and (pointer: fine) {
  .l-navi__menu-item.has-child .l-navi__menu-link::after {
    transition: 0.3s;
    transition-property: background-color;
  }
  .l-navi__menu-item.has-child .l-navi__menu-link:hover::after {
    background-color: #11212F;
  }
}
.l-navi__menu-item.has-child .l-navi__menu-link::after {
  content: "";
  display: block;
  width: 1rem;
  aspect-ratio: 10/13;
  -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
  background-color: #11212F;
  transform: rotate(90deg);
}
@media screen and (max-width: 1023px) {
  .l-navi__menu-item.has-child .l-navi__menu-link::after {
    background-color: #fff;
    transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .l-navi__menu-item + .l-navi__menu-item .l-navi__menu-link {
    padding-top: 0.8rem;
  }
}

.l-navi__menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 500;
  color: #11212F;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 4.8rem;
}
@media (hover: hover) and (pointer: fine) {
  .l-navi__menu-link {
    transition: 0.3s;
    transition-property: font-weight, color; /* 背景色は変えない */
  }
  .l-navi__menu-link:hover {
    color: #282828;
    font-weight: 800;
    background-color: transparent; /* 背景は透明のまま */
  }
}
@media screen and (max-width: 1023px) {
  .l-navi__menu-link {
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    text-align: left;
    color: #fff;
    padding-bottom: 0.9rem;
    padding-inline: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .l-navi__menu-link {
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    text-align: left;
    padding-bottom: 0.8rem;
  }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .l-navi__menu-link:hover {
    color: #B7B7B7;
    background-color: transparent;
  }
}
@media screen and (max-width: 1023px) {
  .l-navi__menu-link::after {
    content: "";
    display: block;
    width: 1rem;
    aspect-ratio: 10/13;
    -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
            mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
    background-color: #fff;
  }
}

.l-navi__child-wrap {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 23.5rem;
  background: #fff;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: calc(100% + 1px);
  left: -1rem;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
}
@media screen and (max-width: 1023px) {
  .l-navi__child-wrap {
    width: 90%;
    margin-top: 0.6rem;
    margin-left: auto;
    position: relative;
    opacity: 1;
    visibility: visible;
    padding-block: 0;
    background-color: transparent;
  }
}
.l-navi__child-wrap.show {
  opacity: 1;
  visibility: visible;
}

.l-navi__child-item:not(:last-child) .l-navi__child-link {
  border-bottom: 1px solid #F0F4F7;
}

.l-navi__child-link {
  display: flex;
  justify-content: space-between;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4666666667;
  padding-block: 0.8rem 0.7rem;
  padding-inline: 2rem 1.7rem;
}
@media (hover: hover) and (pointer: fine) {
  .l-navi__child-link {
    transition: 0.3s;
    transition-property: background-color;
  }
  .l-navi__child-link:hover {
    background-color: #bfbbab; /* ← 変更 */
  }
}
.l-navi__child-link::after {
  content: "";
  display: block;
  width: 1rem;
  aspect-ratio: 10/13;
  -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
  background-color: #11212F;
}

/* ------------------- grandchild (製品リスト) ------------------ */
.l-navi__child-item.has-grandchild {
  position: relative; /* 親を基準にする */
}
.l-navi__grandchild-wrap {
  position: absolute;
  top: 0;          /* 親と同じ高さから出す */
  left: 100%;      /* 右に展開 */
  min-width: 20rem;
  background: #fff;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 50;
}
.l-navi__child-item.has-grandchild:hover .l-navi__grandchild-wrap {
  opacity: 1;
  visibility: visible;
}
.l-navi__grandchild-item:not(:last-child) .l-navi__grandchild-link {
  border-bottom: 1px solid #F0F4F7;
}
.l-navi__grandchild-link {
  display: flex;
  justify-content: flex-start;
  font-size: 1.4rem;
  font-weight: 500;
  padding-block: 0.7rem;
  padding-inline: 2rem;
}
@media (hover: hover) and (pointer: fine) {
  .l-navi__grandchild-link:hover {
    background-color: #bfbbab; /* ← 変更 */
  }
}

/* ------------------- スマホタップ用 showクラス ------------------ */
.l-navi__grandchild-wrap.show {
  opacity: 1;
  visibility: visible;
}








/* -------------------------------------------*/
.l-header {
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
@media screen and (max-width: 1023px) {
  .l-header {
    border-bottom: 1px solid #DDDDDD;
  }
}

.l-header__top {
  display: flex;
  justify-content: space-between;
  padding: 1rem 3rem;
  background-color: #f1efe9;
}
@media screen and (max-width: 1023px) {
  .l-header__top {
    padding-block: 0;
    padding-inline: 2rem 0;
    align-items: center;
    justify-content: space-between;
  }
}

.l-header__logo {
  width: 20.9rem;
}
@media screen and (max-width: 1023px) {
  .l-header__logo {
    width: 17.7rem;
  }
}
@media screen and (max-width: 767px) {
  .l-header__logo {
    width: 14.7rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .l-header__logo {
    transition: 0.3s;
    transition-property: opacity;
  }
  .l-header__logo:hover {
    opacity: 0.8;
  }
}
.l-header__logo a {
  display: block;
}

.l-header__right {
  display: flex;
  gap: 1.4rem;
}
@media screen and (max-width: 1023px) {
  .l-header__right {
    gap: 0;
  }
}
@media screen and (max-width: 1023px) {
  .l-header__right .l-header__cta-link {
    width: 6rem;
    aspect-ratio: 1/1;
    justify-content: center;
    border: none;
    border-left: 1px solid #DDDDDD;
    border-radius: 0;
    gap: 0;
  }
}
@media screen and (max-width: 767px) {
  .l-header__right .l-header__cta-link.--tel .img {
    width: 2rem;
  }
}
@media screen and (max-width: 1023px) {
  .l-header__right .l-header__cta-link.--tel .box {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .l-header__right .l-header__cta-link.--cta {
    padding: 0;
    background-color: #fff;
  }
}
@media screen and (max-width: 1023px) {
  .l-header__right .l-header__cta-link.--cta::before {
    width: 2.6rem;
    background-color: #1D6FB9;
  }
}
@media screen and (max-width: 767px) {
  .l-header__right .l-header__cta-link.--cta::before {
    width: 2rem;
  }
}

.l-header__cta-link {
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.l-header__cta-link.--tel {
  color: #282828;
  background-color: #f1efe9;
  padding-block: 0.2rem 0.4rem;
  padding-inline: 1rem;
}
.l-header__cta-link.--tel .img {
  width: 2.1rem;
}
.l-header__cta-link.--tel .img img {
  display: block;
}
.l-header__cta-link.--tel .box {
  display: flex;
  flex-direction: column;
}
.l-header__cta-link.--tel .num {
  font-family: "Roboto", sans-serif;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.3;
}
.l-header__cta-link.--tel .text {
  font-size: 1.2rem;
  margin-top: -0.5rem;
}
.l-header__cta-link.--cta {
  background-color: #282828;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  padding-inline: 3.2rem;
  border: 2px solid #282828;
}
@media (hover: hover) and (pointer: fine) {
  .l-header__cta-link.--cta {
    transition: 0.3s;
    transition-property: background-color, color;
  }
  .l-header__cta-link.--cta::before {
    transition: 0.3s;
    transition-property: background-color;
  }
  .l-header__cta-link.--cta:hover {
    background-color: #fff;
    color: #282828;
    border: 2px solid #282828;
  }
  .l-header__cta-link.--cta:hover::before {
    background-color: #282828;
  }
}
.l-header__cta-link.--cta::before {
  content: "";
  display: block;
  width: 2rem;
  aspect-ratio: 24/18;
  -webkit-mask: url(../images/icon/icon_mail.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_mail.svg) no-repeat center/contain;
  background-color: #fff;
  margin-top: 0.2rem;
}

.l-header__bottom {
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}
@media screen and (max-width: 1023px) {
  .l-header__bottom {
    border: none;
  }
}

@media screen and (max-width: 1023px) {
  .l-header__trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1D6FB9;
    width: 6rem;
    cursor: pointer;
    position: relative;
    z-index: 2;
    padding: 0;
  }
}

@media screen and (max-width: 1023px) {
  .l-header__trigger-inner {
    display: inline-block;
    position: relative;
    width: 2.9rem;
    height: 2.5rem;
    transition: all 0.4s;
  }
}
@media screen and (max-width: 767px) {
  .l-header__trigger-inner {
    width: 2.4rem;
    height: 1.8rem;
  }
}

.l-header__trigger-line {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: 0.3s;
  transition-property: transform;
}
.l-header__trigger-line:nth-of-type(1) {
  top: 0;
}
.l-header__trigger-line:nth-of-type(1).is-active {
  transform: translateY(13px) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .l-header__trigger-line:nth-of-type(1).is-active {
    transform: translateY(8px) rotate(45deg);
  }
}
.l-header__trigger-line:nth-of-type(2) {
  top: 1.15rem;
}
@media screen and (max-width: 767px) {
  .l-header__trigger-line:nth-of-type(2) {
    top: 8px;
  }
}
.l-header__trigger-line:nth-of-type(2).is-active {
  opacity: 0;
  transform: translateY(-100%);
}
.l-header__trigger-line:nth-of-type(3) {
  bottom: 0;
}
.l-header__trigger-line:nth-of-type(3).is-active {
  transform: translateY(-10px) rotate(-45deg);
}
@media screen and (max-width: 767px) {
  .l-header__trigger-line:nth-of-type(3).is-active {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* -------------------------------------------*/
.l-footer {
  background-color: #f1efe9;
  color: #282828;
  padding-block: 8rem 1.9rem;
}
@media screen and (max-width: 767px) {
  .l-footer {
    padding-block: 5.2rem 6rem;
  }
}

.l-footer__body {
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .l-footer__body {
    flex-direction: column;
    gap: 4rem;
  }
}

.l-footer__name {
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 0.04em;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .l-footer__name {
    font-size: 1.8rem;
  }
}

.l-footer__address-dl {
  margin-top: 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  line-height: 1.4285714286;
  font-weight: bold;
}
.l-footer__address-dl .inner + .inner {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .l-footer__address-dl .inner + .inner {
    margin-top: 1.6rem;
  }
}

.l-footer__menu {
  max-width: 44rem;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (max-width: 1023px) {
  .l-footer__menu {
    max-width: 100%;
  }
}

.l-footer__menu-item {
  width: calc(50% - 2rem);
  border-bottom: 1px solid #233748;
}
@media screen and (max-width: 767px) {
  .l-footer__menu-item {
    width: 100%;
  }
}
.l-footer__menu-item:not(:first-child):not(:nth-child(2)) {
  padding-top: 0.8rem;
}
@media screen and (max-width: 767px) {
  .l-footer__menu-item:not(:first-child) {
    padding-top: 0.8rem;
  }
}

.l-footer__menu-link {
  display: block;
  font-size: 1.5rem;
  line-height: 1.4666666667;
  color: #282828;
  padding-bottom: 0.7rem;
  padding-right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .l-footer__menu-link {
    padding-inline: 2rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .l-footer__menu-link {
    transition: 0.3s;
    transition-property: color;
  }
  .l-footer__menu-link::after {
    transition: 0.3s;
    transition-property: background-color, transform;
  }
  .l-footer__menu-link:hover {
    color: #282828;
    font-weight: 800;
  }
  .l-footer__menu-link:hover::after {
    background-color: #282828;
    font-weight: 800;
    transform: translateX(0.3rem);
  }
}
.l-footer__menu-link::after {
  content: "";
  display: block;
  width: 1rem;
  aspect-ratio: 10/13;
  -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
  background-color: #282828;
}

.l-footer__logo {
  display: block;
  width: 21.3rem;
  margin: 6rem auto 0;
}
@media screen and (max-width: 767px) {
  .l-footer__logo {
    margin-top: 5rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .l-footer__logo {
    transition: 0.3s;
    transition-property: opacity;
  }
  .l-footer__logo:hover {
    opacity: 0.7;
  }
}

.l-footer__copy {
  font-size: 12px;
  text-align: center;
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .l-footer__copy {
    margin-top: 4rem;
  }
}

/* -------------------------------------------*/
.l-grid {
  display: flex;
  flex-wrap: wrap;
}

/* -------------------------------------------*/
.l-breadcrumbs {
  padding-block: 1rem;
}
@media screen and (max-width: 767px) {
  .l-breadcrumbs {
    overflow-x: scroll;
  }
  .l-breadcrumbs::-webkit-scrollbar {
    height: 2px;
  }
  .l-breadcrumbs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
  }
  .l-breadcrumbs::-webkit-scrollbar-track {
    background: #fff;
  }
}
@media screen and (max-width: 767px) {
  .l-breadcrumbs .u-con--md {
    width: 100%;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
  }
}
.l-breadcrumbs + * {
  margin-top: 3.9rem;
}
@media screen and (max-width: 767px) {
  .l-breadcrumbs + * {
    margin-top: 2.4rem;
  }
}

.l-breadcrumbs__li {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
@media screen and (max-width: 767px) {
  .l-breadcrumbs__li {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
}

.l-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  .l-breadcrumbs__item {
    font-size: 1rem;
    white-space: nowrap;
  }
}
.l-breadcrumbs__item + .l-breadcrumbs__item::before {
  content: "＞";
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .l-breadcrumbs__link {
    transition: 0.3s;
    transition-property: color;
  }
  .l-breadcrumbs__link:hover {
    color: #1D6FB9;
  }
}

/* layout
-------------------------------------------------------*/
.l-form {
  max-width: 68rem;
  margin-inline: auto;
}

.l-form__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.l-form__item .label {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .l-form__item .label {
    font-size: 2rem;
  }
}
.l-form__item .label .text {
  font-weight: 400;
}
.l-form__item .input.--address .inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .l-form__item .input.--address .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}
.l-form__item .input.--address .inner + .inner {
  margin-top: 1.2rem;
}
.l-form__item .input.--address .inner .label {
  min-width: 4em;
}
.l-form__item .input.--address .inner .input {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .l-form__item .input.--address .inner .input {
    width: 100%;
  }
}
.l-form__item .input.--radio {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .l-form__item .input.--radio {
    flex-direction: column;
    gap: 0.4rem;
  }
}
@media screen and (max-width: 767px) {
  .l-form__item .input.--radio .radio-lb span {
    display: inline-block;
  }
}
.l-form__item .input.--select {
  position: relative;
}
.l-form__item .input.--select select {
  width: 100%;
  max-width: 181px;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  cursor: pointer;
  padding: 9px 19px;
  border-radius: 3px;
  border: 1px solid #BFCED9;
  background-color: #fff;
  box-shadow: none;
}
@media screen and (max-width: 767px) {
  .l-form__item .input.--select select {
    font-size: 1.8rem;
    padding: 0.7rem;
  }
}
.l-form__item .input.--check {
  display: flex;
  flex-direction: column;
  line-height: 2;
}
.l-form__item.--products {
  gap: 1.6rem;
}
.l-form__item.--products > .input {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.l-form__item.--products > .input .inner {
  padding-block: 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .l-form__item.--products > .input .inner {
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.1rem 1rem 1.3rem;
  }
}
.l-form__item.--products > .input .inner + .inner {
  border-top: 1px solid;
}
.l-form__item.--products > .input .inner .label {
  width: 17.2rem;
}
.l-form__item.--products > .input .inner .input {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 25px;
}
.l-form__item.--products > .input .inner .input .check-lb::after {
  top: 6px;
}
@media screen and (max-width: 767px) {
  .l-form__item.--products > .input .inner .input .check-lb::after {
    top: 9px;
  }
}
.l-form__item + .l-form__item {
  margin-top: 3rem;
}

.l-form__privacy-wrap {
  margin-top: 4rem;
  background-color: #e7e5dd;
  padding: 2.5rem 3.9rem;
}
@media screen and (max-width: 767px) {
  .l-form__privacy-wrap {
    margin-top: 2.4rem;
    padding: 2rem;
  }
}

.l-form__privacy-text {
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .l-form__privacy-text {
    font-size: 1.5rem;
  }
}
.l-form__privacy-text a {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .l-form__privacy-text a {
    transition: 0.3s;
    transition-property: color;
  }
  .l-form__privacy-text a:hover {
    color: #1D6FB9;
  }
}

.l-form__submit,
.l-form__submit.mfp_buttons {
  margin-top: 4rem;
  padding: 0;
}
.l-form__submit button,
.l-form__submit.mfp_buttons button {
  width: 240px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 6px;
  padding-block: 16px;
  border: 2px solid #282828;
  background: #282828;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  text-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-form__submit button,
.l-form__submit.mfp_buttons button {
    transition: 0.3s;
    transition-property: color, background-color;
  }
  .l-form__submit button:hover,
.l-form__submit.mfp_buttons button:hover {
    color: #004583;
    background-color: #fff;
  }
}

/* -------------------------------------------*/
.l-banner {
  padding-block: 8rem;
}
@media screen and (max-width: 767px) {
  .l-banner {
    padding-block: 6rem;
  }
}

.l-banner__body {
  gap: 1.4rem;
}
@media screen and (max-width: 767px) {
  .l-banner__body {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}

.l-banner__item {
  width: calc(33.3333333333% - 0.9333333333rem);
}
@media screen and (max-width: 767px) {
  .l-banner__item {
    width: 100%;
    max-width: 40rem;
  }
}

.l-banner__link {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .l-banner__link {
    transition: 0.3s;
    transition-property: opacity;
  }
  .l-banner__link:hover {
    opacity: 0.7;
  }
}

/* -------------------------------------------*/
.l-cta {
  background-color: #bfbbab;
  color: #282828;
  padding-block: 8rem;
}
@media screen and (max-width: 767px) {
  .l-cta {
    padding-block: 5rem;
  }
}

.l-cta__lead {
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.3333333333;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .l-cta__lead {
    line-height: 1.6666666667;
  }
}
@media screen and (max-width: 767px) {
  .l-cta__lead {
    font-size: 1.8rem;
  }
}

.l-cta__body {
  margin: 3rem auto 0;
  max-width: 90.9rem;
  align-items: flex-end;
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .l-cta__body {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .l-cta__body {
    margin-top: 2rem;
    gap: 3rem;
  }
}

.l-cta__tel-link {
  color: #fff;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .l-cta__tel-link {
    gap: 0.2rem;
  }
}
.l-cta__tel-link .text {
  font-family: "Roboto", sans-serif;
  font-size: 6.4rem;
  font-weight: bold;
  line-height: 1.3125;
}
@media screen and (max-width: 767px) {
  .l-cta__tel-link .text {
    font-size: 4rem;
  }
}
.l-cta__tel-link .img {
  width: 4.4rem;
  margin-top: 0.7rem;
}
@media screen and (max-width: 767px) {
  .l-cta__tel-link .img {
    width: 3rem;
  }
}

.l-cta__tel-time {
  margin-left: 5.4rem;
  display: block;
  font-size: 1.8rem;
  text-align: center;
  margin-top: -0.6rem;
}
@media screen and (max-width: 767px) {
  .l-cta__tel-time {
    font-size: 1.4rem;
    margin-left: 3.2rem;
  }
}

.l-cta__btn-link {
  border: 2px solid #282828;
  border-radius: 1rem;
  background-color: #282828;
  font-size: 2.4rem;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 2.8rem 3.2rem;
}
@media screen and (max-width: 767px) {
  .l-cta__btn-link {
    width: 100%;
    font-size: 2.2rem;
    line-height: 1.5;
    padding-block: 1.8rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .l-cta__btn-link {
    transition: 0.3s;
    transition-property: background-color, color;
  }
  .l-cta__btn-link::before {
    transition: 0.3s;
    transition-property: background-color;
  }
  .l-cta__btn-link:hover {
    background-color: #fff;
    color: #282828;
  }
  .l-cta__btn-link:hover::before {
    background-color: #282828;
  }
}
.l-cta__btn-link::before {
  content: "";
  display: block;
  width: 2.4rem;
  aspect-ratio: 24/18;
  -webkit-mask: url(../images/icon/icon_mail.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_mail.svg) no-repeat center/contain;
  background-color: #fff;
  margin-top: 1px;
}
@media screen and (max-width: 767px) {
  .l-cta__btn-link::before {
    width: 2.6rem;
  }
}

/* -------------------------------------------*/
.l-under-title {
  background-color: #282828;
  padding-block: 5rem;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .l-under-title {
    padding-block: 4rem;
  }
}
.l-under-title::after {
  content: "";
  display: block;
  width: 27.2857142857%;
  aspect-ratio: 382/386;
  background: url(../images/under/undertitle-treat.png) no-repeat center/contain;
  position: absolute;
  right: 4.07vw;
  bottom: -5.86vw;
  opacity: 0.2;
}
@media screen and (max-width: 767px) {
  .l-under-title::after {
    width: 40%;
    right: -2rem;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

.l-under-title__h1 {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .l-under-title__h1 {
    font-size: 2.4rem;
  }
}

/* -------------------------------------------*/
.l-faq__body + .l-faq__body {
  margin-top: 8rem;
  padding-top: 6rem;
  border-top: 2px solid #D8E6F0;
}
@media screen and (max-width: 767px) {
  .l-faq__body + .l-faq__body {
    margin-top: 4rem;
    padding-top: 3.2rem;
  }
}
.l-faq__body:first-child[aria-hidden=true] + .l-faq__body {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.l-faq__body:first-child[aria-hidden=true] + .l-faq__body[aria-hidden=true] + .l-faq__body {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.l-faq__body + .l-banner {
  padding-top: 10rem;
}

.l-faq__content {
  max-width: 76rem;
  margin-inline: auto;
}

.l-faq__box {
  border: 1px solid;
  border-radius: 1rem;
  padding: 3rem;
}
@media screen and (max-width: 767px) {
  .l-faq__box {
    padding: 2rem;
  }
}
.l-faq__box.--sm {
  padding: 2rem 3rem;
}
@media screen and (max-width: 767px) {
  .l-faq__box.--sm {
    padding: 1.6rem;
  }
}
.l-faq__box + .l-faq__box {
  margin-top: 3rem;
}

.l-faq__tag-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .l-faq__tag-wrap {
    gap: 0.8rem;
  }
}
.l-faq__tag-wrap + .l-faq__details {
  margin-top: 0.8rem;
}

.l-faq__tag {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1D6FB9;
  border: 1px solid;
  border-radius: 5rem;
  padding: 0.5rem 1.9rem;
}
@media screen and (max-width: 767px) {
  .l-faq__tag {
    padding-inline: 1.4rem;
  }
}

.l-faq__details[open] {
  display: block;
}
.l-faq__details summary {
  pointer-events: none;
  list-style: none;
}
.l-faq__details summary::-webkit-details-marker {
  display: none;
}

.l-faq__question,
.l-faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .l-faq__question,
.l-faq__answer {
    gap: 1rem;
  }
}
.l-faq__question::before,
.l-faq__answer::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  font-family: "Roboto", sans-serif;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.3333333333;
}
@media screen and (max-width: 767px) {
  .l-faq__question::before,
.l-faq__answer::before {
    font-size: 2.6rem;
  }
}

.l-faq__question {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6666666667;
  color: #11212F;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid;
}
@media screen and (max-width: 767px) {
  .l-faq__question {
    font-size: 1.7rem;
    padding-bottom: 1.6rem;
  }
}
.l-faq__question::before {
  content: "Q";
  color: #1D6FB9;
}
.l-faq__question span {
  flex: 1;
  padding-top: 1rem;
}
@media screen and (max-width: 767px) {
  .l-faq__question span {
    padding-top: 0.4rem;
  }
}

.l-faq__answer {
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .l-faq__answer {
    margin-top: 1.6rem;
  }
}
.l-faq__answer::before {
  content: "A";
  color: #CE2C2C;
}

.l-faq__answer-inner {
  flex: 1;
  font-size: 1.6rem;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .l-faq__answer-inner {
    font-size: 1.5rem;
    line-height: 2;
  }
}

/* -------------------------------------------*/
@media screen and (max-width: 767px) {
  .modaal-inner-wrapper {
    padding-inline: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .modaal-video-wrap {
    margin-inline: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .modaal-close::before, .modaal-close::after {
    transition: 0.3s;
    transition-property: background-color;
  }
  .modaal-close:hover::before, .modaal-close:hover::after {
    background-color: #1D6FB9;
  }
}
.modaal-close::after, .modaal-close::before {
  background: #fff;
  height: 30px;
  left: 24px;
  top: 11px;
  width: 2px;
}

/* -------------------------------------------*/
.js-tab-contents-item[hidden] {
  display: none;
}

/* -------------------------------------------*/
.l-products-comparison {
  padding-top: 10rem;
}
@media screen and (max-width: 767px) {
  .l-products-comparison {
    padding-top: 6rem;
  }
}

.l-products-comparison__h2 + * {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .l-products-comparison__h2 + * {
    margin-top: 2.4rem;
  }
}

@media screen and (max-width: 1118px) {
  .l-products-tab__nav {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 1023px) {
  .l-products-tab__nav {
    padding-bottom: 4px;
  }
}
.l-products-tab__nav::-webkit-scrollbar {
  height: 2px;
}
.l-products-tab__nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
}
.l-products-tab__nav::-webkit-scrollbar-track {
  background: #fff;
}
@media screen and (max-width: 1023px) {
  .l-products-tab__nav + * {
    margin-top: 0.8rem;
  }
}

.l-products-tab__nav-body {
  flex-wrap: nowrap;
  gap: 0.8rem;
}

.l-products-tab__nav-item {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4285714286;
  white-space: nowrap;
  border-radius: 0.3rem 0.3rem 0 0;
  background-color: #FFF;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .l-products-tab__nav-item {
    transition: 0.3s;
    transition-property: background-color, color;
  }
  .l-products-tab__nav-item:hover {
    background-color: #282828;
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
  .l-products-tab__nav-item {
    border-radius: 0.3rem;
    padding: 1rem 2rem;
  }
}
.l-products-tab__nav-item[role=tab][aria-selected=true] {
  background-color: #282828;
  color: #fff;
}

.l-products-tab__sec {
  overflow-x: scroll;
}
.l-products-tab__sec::-webkit-scrollbar {
  height: 8px;
}
@media screen and (max-width: 767px) {
  .l-products-tab__sec::-webkit-scrollbar {
    height: 2px;
  }
}
.l-products-tab__sec::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
}
.l-products-tab__sec::-webkit-scrollbar-track {
  background: #fff;
}

.l-products-comparison__table-wrap {
  border: 1px solid #282828;
}

.l-products-comparison__table {
  width: calc(var(--th-count) * 24rem);
  min-width: 100%;
}
@media screen and (max-width: 1023px) {
  .l-products-comparison__table {
    width: calc(var(--th-count) * 22rem);
  }
}

.l-products-comparison__th {
  width: 24rem;
  border: 1px solid #e7e5dd;
  font-weight: bold;
  padding-block: 2rem;
}
@media screen and (max-width: 1023px) {
  .l-products-comparison__th {
    width: 22rem;
  }
}
.l-products-comparison__th.--bg {
  font-size: 1.4rem;
  background-color: #e7e5dd;
  padding-block: 0.4rem;
}

.l-products-comparison__th-logo + * {
  margin-top: 0.9rem;
}
.l-products-comparison__th-logo img {
  width: revert-layer;
  height: revert-layer;
}

.l-products-comparison__th-image {
  width: 20rem;
  margin-inline: auto;
}
@media screen and (max-width: 1023px) {
  .l-products-comparison__th-image {
    width: 16rem;
  }
}
.l-products-comparison__th-image + * {
  margin-top: 1rem;
}

.l-products-comparison__th-h3 {
  font-size: 1.5rem;
}

.l-products-comparison__td {
  border: 1px solid #e7e5dd;
  font-size: 1.5rem;
  line-height: 1.6;
  padding: 0.85rem 3rem;
}
@media screen and (max-width: 1023px) {
  .l-products-comparison__td {
    padding-inline: 2rem;
  }
}

/* -------------------------------------------*/
/* -------------------------------------------*/
.c-btn {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #282828;
  border: 2px solid #282828;
  border-radius: 0.6rem;
  padding: 1.6rem 4.5rem;
  position: relative;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .c-btn {
    font-size: 1.8rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .c-btn {
    transition: 0.3s;
    transition-property: color, background-color;
  }
  .c-btn::after {
    transition: 0.3s;
    transition-property: background-color;
  }
  .c-btn:hover {
    color: #282828;
    background-color: #fff;
  }
  .c-btn:hover::after {
    background-color: #282828;
  }
}
.c-btn.--lg {
  width: 40rem;
  margin-inline: auto;
  border-width: 2px;
  padding-block: 1.7rem;
}
@media screen and (max-width: 767px) {
  .c-btn.--lg {
    width: 30rem;
  }
}
.c-btn.--lg::after {
  width: 2.5rem;
  -webkit-mask-image: url(../images/icon/icon_arrow02.svg);
          mask-image: url(../images/icon/icon_arrow02.svg);
  top: 50%;
  right: 1.2rem;
}
.c-btn::after {
  content: "";
  display: block;
  width: 1rem;
  aspect-ratio: 10/13;
  -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
  background-color: #fff;
  position: absolute;
  top: calc(50% + 0.2rem);
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .c-btn::after {
    top: 50%;
  }
}

/* -------------------------------------------*/
.c-sns-link {
  display: block;
  width: 6rem;
  border: 2px solid #AFD6D9;
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .c-sns-link {
    width: calc(50% - 1px);
    display: flex;
    justify-content: center;
    border: none;
    border-radius: 0;
    background-color: #F0F4F7;
    padding-block: 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  .c-sns-link img {
    width: 6rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .c-sns-link {
    transition: 0.3s;
    transition-property: border-color, background-color;
  }
  .c-sns-link img {
    transition: 0.3s;
    transition-property: filter;
  }
  .c-sns-link:hover {
    border-color: #1D6FB9;
    background-color: #1D6FB9;
  }
  .c-sns-link:hover img {
    filter: invert(100%) sepia(0%) saturate(18%) hue-rotate(305deg) brightness(106%) contrast(104%);
  }
}

/* -------------------------------------------*/
@media screen and (max-width: 767px) {
  .c-table-wrap {
    overflow: scroll;
  }
}

.c-table {
  width: 100%;
}

.c-table.--01 {
  border: 1px solid #BFCED9;
}
@media screen and (max-width: 767px) {
  .c-table.--01 tr {
    display: flex;
    flex-direction: column;
  }
}
.c-table.--01 tr:nth-child(even) .c-table-th, .c-table.--01 tr:nth-child(even) .c-table-td {
  background-color: #e7e5dd;
}
.c-table.--01 tr:nth-child(even) .c-table-td {
  background-color: transparent;
}
.c-table.--01 .c-table-th, .c-table.--01 .c-table-td {
  border: 1px solid #282828;
  padding-block: 1.8rem;
}
@media screen and (max-width: 767px) {
  .c-table.--01 .c-table-th, .c-table.--01 .c-table-td {
    border: none;
  }
}
.c-table.--01 .c-table-th {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4375;
}
@media screen and (max-width: 767px) {
  .c-table.--01 .c-table-th {
    background-color: #F0F4F7;
  }
}
.c-table.--01 .c-table-td {
  font-size: 1.5rem;
  line-height: 1.5333333333;
  padding-inline: 3.9rem;
}
@media screen and (max-width: 1023px) {
  .c-table.--01 .c-table-td {
    padding-inline: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .c-table.--01 .c-table-td {
    background-color: transparent;
  }
}
.c-table.--01 .c-table-td a {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .c-table.--01 .c-table-td a {
    transition: 0.3s;
    transition-property: color;
  }
  .c-table.--01 .c-table-td a:hover {
    color: #1D6FB9;
  }
}
.c-table.--01 .c-table-td a.map {
  display: inline-block;
  width: 10rem;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5rem;
  border: 1px solid #282828;
  background-color: #282828;
  margin-left: 1.5rem;
}
@media screen and (max-width: 767px) {
  .c-table.--01 .c-table-td a.map {
    display: block;
    margin-left: 0;
    margin-top: 0.8rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .c-table.--01 .c-table-td a.map {
    transition: 0.3s;
    transition-property: color, background-color;
  }
  .c-table.--01 .c-table-td a.map:hover {
    color: #1D6FB9;
    background-color: #fff;
  }
}

.c-table.--trouble {
  border: 1px solid #BFCED9;
}
.c-table.--trouble .c-table-th {
  width: 35.3982300885%;
  background-color: #F0F4F7;
  font-size: 1.4rem;
  padding-block: 0.9rem;
}
.c-table.--trouble .c-table-th:first-child {
  width: 29.203539823%;
}
.c-table.--trouble .c-table-th, .c-table.--trouble .c-table-td {
  border: 1px solid #BFCED9;
}
.c-table.--trouble .c-table-td {
  font-size: 1.6rem;
  line-height: 1.875;
  padding: 1.7rem 2.4rem;
}
.c-table.--trouble .c-table-td.--th {
  font-weight: bold;
  text-align: left;
  padding-inline: 2.8rem;
}

/* -------------------------------------------*/
.c-primary-title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
  border-bottom: 2px solid #D8E6F0;
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .c-primary-title {
    font-size: 1.8rem;
  }
}
.c-primary-title span {
  display: inline-block;
}
.c-primary-title.--bnon {
  padding-bottom: 0;
  border: none;
}
.c-primary-title + * {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .c-primary-title + * {
    margin-top: 2.4rem;
  }
}

/* -------------------------------------------*/
.c-secondary-title {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .c-secondary-title {
    font-size: 2.2rem;
  }
}

/* -------------------------------------------*/
.c-zoom {
  padding-block: 30px;
  padding-block: 3rem;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  height: 100vh;
  left: 0;
  overflow: scroll;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 100;
}

.c-zoom-wrap {
  display: contents;
}

.c-zoom-content {
  gap: 6px;
  gap: 0.6rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  transform: scale(1);
}

.c-zoom-content::before {
  color: #fff;
  content: "画面をクリックorタップで閉じます";
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}

.c-zoom-content img {
  height: 80%;
  width: auto;
}
@media screen and (max-width: 767px) {
  .c-zoom-content img {
    width: 90%;
    height: auto;
  }
}

.c-zoom-content img.active {
  -webkit-animation: zoom 0.3s ease-out;
  animation: zoom 0.3s ease-out;
}

/* -------------------------------------------*/
/* -------------------------------------------*/
.u-db {
  display: block;
}

.u-dn {
  display: none;
}

@media screen and (max-width: 1023px) {
  .u-pc {
    display: none;
  }
}

@media not all and (max-width: 1023px) {
  .u-st {
    display: none !important;
  }
}

@media not all and (max-width: 767px) {
  .u-pt {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .u-sp {
    display: none !important;
  }
}

.u-con--md {
  width: 100%;
  max-width: 125rem;
  margin-inline: auto;
  padding-inline: 6rem;
}
@media screen and (max-width: 767px) {
  .u-con--md {
    max-width: 55rem;
    padding-inline: 2rem;
  }
}

.u-con--lg {
  max-width: 132rem;
  margin-inline: auto;
  padding-inline: 6rem;
}
@media screen and (max-width: 767px) {
  .u-con--lg {
    max-width: 65rem;
    padding-inline: 1.6rem;
  }
}

/* -------------------------------------------*/
/* -------------------------------------------*/
.p-top__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
@media screen and (max-width: 767px) {
  .p-top__text {
    font-size: 1.5rem;
    line-height: 1.8666666667;
  }
}
.p-top__text a {
  font-weight: bold;
  color: #1D6FB9;
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .p-top__text a {
    transition: 0.3s;
    transition-property: color, background-color;
  }
  .p-top__text a:hover {
    color: #004583;
  }
}

/* -------------------------------------------*/
.p-top-mv__slide {
  padding-bottom: 2rem;
  overflow: hidden;
}
.p-top-mv__slide .swiper-pagination {
  margin-top: 2rem;
  position: static;
  display: flex;
  justify-content: center;
  gap: 1.8rem;
}
@media screen and (max-width: 767px) {
  .p-top-mv__slide .swiper-pagination {
    margin-top: 1rem;
  }
}
.p-top-mv__slide .swiper-pagination .swiper-pagination-bullet {
  width: 1.2rem;
  height: 1.2rem;
  opacity: 1;
  background-color: #fff;
  border: 1px solid #B5B5B5;
  margin-inline: 0;
}
.p-top-mv__slide .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #282828;
  border-color: #282828;
}

/* -------------------------------------------*/
.p-top-head {
  padding-inline: 2rem;
}

.p-top-head__inner {
  max-width: 136rem;
  margin-inline: auto;
  gap: 3rem 0.5rem;
}
@media screen and (max-width: 1023px) {
  .p-top-head__inner {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.p-top-head__item {
  width: calc(33.3333333333% - 0.3333333333rem);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1023px) {
  .p-top-head__item {
    min-width: 34rem;
  }
}
@media screen and (max-width: 767px) {
  .p-top-head__item {
    width: 100%;
  }
}

.p-top-head__item-lead {
  background-color: #282828;
  font-size: clamp(16px, 1.43vw, 2rem);
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding-block: 2rem;
}
@media screen and (max-width: 767px) {
  .p-top-head__item-lead {
    font-size: 1.8rem;
    gap: 1rem;
    padding-block: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .p-top-head__item-lead.--lg {
    gap: 0;
  }
}
.p-top-head__item-lead::before, .p-top-head__item-lead::after {
  content: "";
  display: block;
  width: 2.8rem;
  aspect-ratio: 46/112;
  background: url(../images/top/head-treat.png) no-repeat center/contain;
}
.p-top-head__item-lead::after {
  transform: scale(-1, 1);
}
.p-top-head__item-lead .inner {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-top-head__item-lead .inner .lg {
  font-size: clamp(2rem, 1.86vw, 2.6rem);
  line-height: 1.2307692308;
}
@media screen and (max-width: 767px) {
  .p-top-head__item-lead .inner .lg {
    font-size: 2.4rem;
  }
}

.p-top-head__item-text {
  font-size: 1.6rem;
  line-height: 1.875;
  padding: 1.6rem 3rem;
  background-color: #f1efe9;
  flex: 1;
}
@media screen and (max-width: 767px) {
  .p-top-head__item-text {
    font-size: 1.5rem;
    line-height: 1.8666666667;
    padding: 1.4rem 1rem;
  }
}

/* -------------------------------------------*/
.p-top-news {
  margin-top: 7.2rem;
}
@media screen and (max-width: 767px) {
  .p-top-news {
    margin-top: 8rem;
  }
}

.p-top-news__body {
  padding: 2rem 4rem;
  border: 1px solid #e7e5dd;
  background-color: #e7e5dd;
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 8.6rem;
  grid-auto-flow: row;
  grid-template-areas: "h2 news1" "btn news1" ". news1";
}
@media screen and (max-width: 1023px) {
  .p-top-news__body {
    -moz-column-gap: 3.2rem;
         column-gap: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-top-news__body {
    position: relative;
    padding: 0;
    border: none;
    display: block;
  }
}

.p-top-news__h2 {
  margin-top: 1rem;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  grid-area: h2;
}
@media screen and (max-width: 767px) {
  .p-top-news__h2 {
    margin-top: 0;
  }
}

.p-top-news__li {
  grid-area: news1;
  padding-right: 6rem;
}
@media screen and (max-width: 1023px) {
  .p-top-news__li {
    padding-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .p-top-news__li {
    margin-top: 1.3rem;
    border-bottom: 1px solid #DDDDDD;
  }
}

@media screen and (max-width: 767px) {
  .p-top-news__li-item {
    border-top: 1px solid #DDDDDD;
  }
}
.p-top-news__li-item + .p-top-news__li-item {
  border-top: 1px solid #DDDDDD;
}

.p-top-news__li-link {
  display: flex;
  gap: 3rem;
  padding-inline: 2.7rem;
  font-size: 1.6rem;
  padding-block: 1rem;
}
@media screen and (max-width: 1023px) {
  .p-top-news__li-link {
    gap: 1.6rem;
    padding-inline: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .p-top-news__li-link {
    font-size: 1.5rem;
    line-height: 1.8666666667;
    padding-inline: 0;
    flex-direction: column;
    gap: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-top-news__li-link {
    transition: 0.3s;
    transition-property: color;
  }
  .p-top-news__li-link:hover {
    color: #282828;
    font-weight: bold;
  }
}

.p-top-news__li-h1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .p-top-news__li-h1 {
    -webkit-line-clamp: 2;
  }
}

.p-top-news__btn {
  margin-top: 1.3rem;
  grid-area: btn;
}
@media screen and (max-width: 767px) {
  .p-top-news__btn {
    margin-top: 0;
  }
}

.p-top-news__btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background-color: #282828;
  border: 1px solid #282828;
  font-size: 1.5rem;
  line-height: 1.4666666667;
  color: #fff;
  border-radius: 0.6rem;
  padding-block: 0.3rem;
}
@media screen and (max-width: 767px) {
  .p-top-news__btn-link {
    width: 9.8rem;
    position: absolute;
    right: 0;
    top: 0.2rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-top-news__btn-link {
    transition: 0.3s;
    transition-property: color, background-color, border-color;
  }
  .p-top-news__btn-link::after {
    transition: 0.3s;
    transition-property: background-color;
    color: #282828;
  }
  .p-top-news__btn-link:hover {
    color: #282828;
    background-color: #fff;
    border-color: #282828;
  }
  .p-top-news__btn-link:hover::after {
    background-color: #282828;
  }
}
.p-top-news__btn-link::after {
  content: "";
  display: block;
  width: 1rem;
  aspect-ratio: 10/13;
  -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
  background-color: #fff;
  margin-top: 0.3rem;
}

/* -------------------------------------------*/
.p-top-about {
  margin-top: 8rem;
}
.p-top-about .p-top__text.--box {
  max-width: 89.4rem;
  margin-inline: auto;
}

.p-top-about__h2 {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-top-about__h2 {
    font-size: 1.8rem;
    line-height: 1.7777777778;
  }
}
.p-top-about__h2 .lg {
  font-size: 3rem;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .p-top-about__h2 .lg {
    font-size: 2.4rem;
    line-height: 1.3333333333;
  }
}
.p-top-about__h2 .blue {
  color: #1D6FB9;
}
.p-top-about__h2 + * {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-top-about__h2 + * {
    margin-top: 2rem;
  }
}

.p-top-about__item {
  margin-top: 6rem;
  padding: clamp(2.4rem, 2.86vw, 4rem);
  background-color: #f1efe9;
  display: grid;
  grid-template-columns: 34.2857142857% 1fr;
  grid-template-rows: auto auto auto;
  gap: 0px clamp(2.4rem, 2.86vw, 4rem);
  grid-auto-flow: row;
  grid-template-areas: "image title" "image text" "image .";
}
@media screen and (max-width: 767px) {
  .p-top-about__item {
    margin-top: 4rem;
    padding: 2rem;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    row-gap: 1.4rem;
    grid-template-areas: "image" "title" "text";
  }
}
.p-top-about__item + .p-top-about__item {
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-top-about__item + .p-top-about__item {
    margin-top: 3rem;
  }
}

.p-top-about__item-h3 {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  grid-area: title;
}
@media screen and (max-width: 767px) {
  .p-top-about__item-h3 {
    font-size: 2.2rem;
    text-align: center;
  }
}

.p-top-about__item-text {
  margin-top: 1.6rem;
  grid-area: text;
}
@media screen and (max-width: 767px) {
  .p-top-about__item-text {
    margin-top: 0;
  }
}

.p-top-about__item-image {
  grid-area: image;
}
.p-top-about__item-image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-about__btn {
  margin-top: 5.5rem;
}
@media screen and (max-width: 767px) {
  .p-top-about__btn {
    margin-top: 4rem;
  }
}

/* -------------------------------------------*/
.p-top-products {
  margin-top: 8rem;
  padding-block: 8rem;
  background-color: #f1efe9;
}
@media screen and (max-width: 767px) {
  .p-top-products {
    padding-block: 6rem;
  }
}

.p-top-products__h2 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-size: 3rem;
  font-weight: bold;
  color: #282828;
  background-color: #fff;
  text-align: center;
  padding: 0.3rem 5rem;
  border: 1px solid #282828;
}
@media screen and (max-width: 767px) {
  .p-top-products__h2 {
    font-size: 1.8rem;
    padding: 0.45rem 3rem;
  }
}

.p-top-products__body {
  margin-top: 3rem;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  .p-top-products__body {
    margin-top: 2.6rem;
    gap: 2rem;
  }
}

.p-top-products__item {
  width: calc(50% - 1.5rem);
  background-color: #e7e5dd;
  padding: clamp(16px, 2.14vw, 3rem);
  display: grid;
  grid-template-columns: 40.8163265306% 1fr;
  grid-template-rows: -webkit-max-content -webkit-max-content;
  grid-template-rows: max-content max-content;
  gap: clamp(16px, 2vw, 2.8rem) clamp(16px, 2.14vw, 3rem);
  grid-auto-flow: row;
  grid-template-areas: "left info" "left sec";
}
@media screen and (max-width: 1023px) {
  .p-top-products__item {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-top-products__item {
    padding: 2rem;
    grid-template-columns: 32.2580645161% 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
    grid-template-areas: "left info" "sec sec";
  }
}

.p-top-products__item-info {
  grid-area: info;
}

.p-top-products__item-h3 {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-top-products__item-h3 {
    font-size: 1.8rem;
  }
}
.p-top-products__item-h3 + * {
  margin-top: clamp(0.8rem, 1.43vw, 2rem);
}
@media screen and (max-width: 767px) {
  .p-top-products__item-h3 + * {
    margin-top: 0.4rem;
  }
}

.p-top-products__item-text {
  font-size: 1.6rem;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .p-top-products__item-text {
    font-size: 1.4rem;
    line-height: 2;
  }
}

.p-top-products__item-sec {
  grid-area: sec;
}
@media screen and (max-width: 767px) {
  .p-top-products__item-sec {
    padding-top: 2rem;
    border-top: 1px solid #D8E6F0;
  }
}

.p-top-products__item-h4 {
  font-size: 1.6rem;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .p-top-products__item-h4 {
    font-size: 1.4rem;
    line-height: 2;
  }
}

.p-top-products__item-li {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .p-top-products__item-li {
    flex-wrap: wrap;
    flex-direction: row;
  }
}
.p-top-products__item-li.l-grid {
  flex-direction: row;
  max-width: 17rem;
}
@media screen and (max-width: 767px) {
  .p-top-products__item-li.l-grid {
    max-width: auto;
  }
}
.p-top-products__item-li.l-grid .p-top-products__item-link {
  width: 50%;
}

.p-top-products__item-link {
  font-size: 1.6rem;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .p-top-products__item-link {
    font-size: 1.4rem;
    line-height: 2;
  }
}
@media screen and (max-width: 767px) {
  .p-top-products__item-link {
    width: 50%;
  }
}
.p-top-products__item-link::before {
  content: "►";
}
@media (hover: hover) and (pointer: fine) {
  .p-top-products__item-link {
    transition: 0.3s;
    transition-property: color;
  }
  .p-top-products__item-link:hover {
    color: #282828;
    font-weight: bold;
  }
}

.p-top-products__item-left {
  grid-area: left;
}

@media (hover: hover) and (pointer: fine) {
  .p-top-products__item-thumbnail {
    transition: 0.3s;
    transition-property: opacity;
  }
  .p-top-products__item-thumbnail:hover {
    opacity: 0.8;
  }
}

@media (hover: hover) and (pointer: fine) {
  .p-top-products__item-logo {
    transition: 0.3s;
    transition-property: opacity;
  }
  .p-top-products__item-logo:hover {
    opacity: 0.8;
  }
}

.p-top-products__btn {
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .p-top-products__btn {
    margin-top: 4rem;
  }
}

/* -------------------------------------------*/
.p-top-bottom {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .p-top-bottom {
    margin-top: 6rem;
  }
}

.p-top-bottom__body {
  gap: 1.8rem 3rem;
}
@media screen and (max-width: 1023px) {
  .p-top-bottom__body {
    flex-direction: column;
    align-items: center;
  }
}

.p-top-bottom__item {
  width: calc(50% - 1.5rem);
  background-color: #f1efe9;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1023px) {
  .p-top-bottom__item {
    width: 70%;
  }
}
@media screen and (max-width: 767px) {
  .p-top-bottom__item {
    width: 100%;
    align-items: initial;
  }
}

.p-top-bottom__item-box {
  flex: 1;
  padding-inline: clamp(24px, 3.57vw, 5rem);
  padding-block: 1.6rem;
}
@media screen and (max-width: 767px) {
  .p-top-bottom__item-box {
    padding: 2rem 1.6rem;
  }
}

.p-top-bottom__item-h2 {
  font-size: clamp(18px, 1.43vw, 2rem);
  font-weight: bold;
}
.p-top-bottom__item-h2 + * {
  margin-top: clamp(8px, 1.14vw, 1.6rem);
}
@media screen and (max-width: 767px) {
  .p-top-bottom__item-h2 + * {
    margin-top: 1rem;
  }
}

.p-top-bottom__item-text {
  font-size: 1.4rem;
  line-height: 1.6428571429;
}

.p-top-bottom__item-btn {
  margin-top: 1.6rem;
}
@media screen and (max-width: 767px) {
  .p-top-bottom__item-btn {
    margin-top: 3rem;
  }
}
.p-top-bottom__item-btn .c-btn {
  width: 20rem;
  font-size: 1.4rem;
  font-weight: 400;
  padding: 1rem;
}
.p-top-bottom__item-btn .c-btn::after {
  top: calc(50% + 0.05rem);
  right: 0.7rem;
}

.p-top-bottom__item-image {
  width: 38.5454545455%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .p-top-bottom__item-image {
    width: 32%;
    height: auto;
  }
}
.p-top-bottom__item-image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* -------------------------------------------*/
/* -------------------------------------------*/
.p-contact__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-contact__text span {
  display: inline-block;
}

.p-contact-head + * {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .p-contact-head + * {
    margin-top: 3.2rem;
  }
}

.p-contact-head__body {
  max-width: 95.6rem;
  margin-inline: auto;
  align-items: flex-end;
  gap: 1.6rem 4.4rem;
}
@media screen and (max-width: 1023px) {
  .p-contact-head__body {
    flex-direction: column;
    align-items: center;
  }
}

.p-contact-head__image {
  width: 33.6820083682%;
}
@media screen and (max-width: 1023px) {
  .p-contact-head__image {
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .p-contact-head__image {
    width: 80%;
  }
}

.p-contact-head__box {
  flex: 1;
}
@media screen and (max-width: 1023px) {
  .p-contact-head__box {
    width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .p-contact-head__box .p-contact__text {
    text-align: center;
  }
}

.p-contact-head__tel {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  color: #fff;
  border-radius: 1rem;
  background: linear-gradient(135deg, #282828 0%, #282828 100%);
  padding: 1.6rem 5.5rem;
  margin-top: 2.5rem;
}
@media screen and (max-width: 1023px) {
  .p-contact-head__tel {
    margin-inline: auto;
  }
}
@media screen and (max-width: 767px) {
  .p-contact-head__tel .p-contact__text {
    line-height: 1.5;
  }
}

.p-contact-head__tel-dl {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.7;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .p-contact-head__tel-dl {
    margin-top: 0.8rem;
    flex-direction: column;
  }
}
.p-contact-head__tel-dl .inner {
  display: flex;
  align-items: center;
}
.p-contact-head__tel-dl .inner + .inner::before {
  content: "／";
}
@media screen and (max-width: 767px) {
  .p-contact-head__tel-dl .inner + .inner::before {
    display: none;
  }
}

.p-contact-head__tel-dt::after {
  content: "：";
}

.p-contact-head__tel-dd a {
  color: #fff;
}

.p-contact-thanks {
  padding-block: 4rem 9.6rem;
}
@media screen and (max-width: 767px) {
  .p-contact-thanks {
    padding-block: 2.4rem;
  }
}
.p-contact-thanks .p-contact-confirm__back {
  margin-top: 9.6rem;
}
@media screen and (max-width: 767px) {
  .p-contact-thanks .p-contact-confirm__back {
    margin-top: 4rem;
  }
}

.p-contact-thanks__body {
  max-width: 78.1rem;
  margin-inline: auto;
}

.p-contact-thanks__h1 {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
.p-contact-thanks__h1 + * {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-contact-thanks__h1 span {
    display: inline-block;
  }
}

.p-contact-thanks__text {
  font-size: 1.8rem;
}
.p-contact-thanks__text + .p-contact-thanks__text {
  margin-top: 2.7rem;
}

.p-contact-thanks__h2 {
  margin-top: 9.6rem;
  font-size: 2rem;
  font-weight: bold;
  color: #7F7F7F;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-contact-thanks__h2 {
    margin-top: 4rem;
  }
}
.p-contact-thanks__h2 + * {
  margin-top: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-contact-thanks__h2 + * {
    margin-top: 0.8rem;
  }
}
@media screen and (max-width: 767px) {
  .p-contact-thanks__h2 span {
    display: inline-block;
  }
}

/* -------------------------------------------*/
.p-faq-nav {
  margin-top: 3rem;
}

.p-faq-nav__body {
  max-width: 76rem;
  margin-inline: auto;
  background-color: #D8E6F0;
  padding: 4rem 6rem;
}
@media screen and (max-width: 1023px) {
  .p-faq-nav__body {
    padding: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .p-faq-nav__body {
    padding: 1rem;
  }
}

.p-faq-nav__item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .p-faq-nav__item {
    flex-direction: column;
    gap: 0.8rem;
  }
}
.p-faq-nav__item + .p-faq-nav__item {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-faq-nav__item + .p-faq-nav__item {
    margin-top: 0.8rem;
  }
}

.p-faq-nav__label {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 2.5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
@media screen and (max-width: 767px) {
  .p-faq-nav__label {
    font-size: 1.4rem;
    line-height: 1.7142857143;
  }
}
.p-faq-nav__label::before {
  content: "";
  display: block;
  width: 1.6rem;
  aspect-ratio: 1/1;
  background: url(../images/icon/icon_search.svg) no-repeat center/contain;
  margin-top: 0.2rem;
}

.p-faq-nav__input {
  flex: 1;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .p-faq-nav__input {
    width: 100%;
    font-size: 1.2rem;
  }
}
.p-faq-nav__input.--select {
  position: relative;
}
.p-faq-nav__input.--select::after {
  content: "";
  display: block;
  width: 1.1rem;
  aspect-ratio: 11/6;
  -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
          clip-path: polygon(100% 0, 0 0, 50% 100%);
  background-color: #11212F;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}
.p-faq-nav__input.--radio {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.p-faq-nav__input.--radio .item {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  .p-faq-nav__input.--radio .item {
    width: calc(50% - 0.5rem);
  }
}
.p-faq-nav__input.--radio .refine-btn {
  display: block;
  min-width: 12rem;
  color: #1D6FB9;
  border: 1px solid #1D6FB9;
  background-color: #fff;
  text-align: center;
  padding: 0.4rem 1rem;
  border-radius: 10rem;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .p-faq-nav__input.--radio .refine-btn {
    width: 100%;
    height: 4rem;
    line-height: 1.1666666667;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-faq-nav__input.--radio .refine-btn {
    transition: 0.3s;
    transition-property: color, background-color;
  }
  .p-faq-nav__input.--radio .refine-btn:hover {
    color: #fff;
    background-color: #1D6FB9;
  }
}
.p-faq-nav__input.--radio input[name=refine-btn] {
  position: relative;
  display: none;
}
.p-faq-nav__input.--radio input[name=refine-btn]:checked + label {
  color: #fff;
  background-color: #1D6FB9;
}

.p-faq-nav__select {
  width: 100%;
  padding: 0.4rem 2.6rem;
  border: 1px solid;
  background-color: #fff;
  border-radius: 10rem;
  cursor: pointer;
}

.p-faq__content {
  margin-top: 6rem;
}

.p-faq__h2 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
.p-faq__h2 + * {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-faq__h2 + * {
    margin-top: 2.4rem;
  }
}

/* -------------------------------------------*/
.p-user__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-user__text.--center {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-user__text.--center {
    text-align: left;
  }
}

.p-user-nav + .p-user-nav {
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .p-user-nav + .p-user-nav {
    margin-top: 4rem;
  }
}
.p-user-nav + * {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-user-nav + * {
    margin-top: 6rem;
  }
}

.p-user-nav.--sub .p-user-nav__li {
  gap: 2rem 3rem;
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--sub .p-user-nav__li {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-user-nav.--sub .p-user-nav__li {
    gap: 1.6rem;
  }
}
.p-user-nav.--sub .p-user-nav__li-item {
  width: calc(50% - 1.5rem);
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--sub .p-user-nav__li-item {
    width: calc(50% - 1rem);
  }
}
@media screen and (max-width: 767px) {
  .p-user-nav.--sub .p-user-nav__li-item {
    width: 100%;
    max-width: 40rem;
  }
}
.p-user-nav.--sub .p-user-nav__li-link {
  border: 1px solid #282828;
  background-color: #fff;
  padding-block: clamp(12px, 1.21vw, 1.7rem);
  padding-inline: clamp(12px, 1.21vw, 1.7rem) clamp(16px, 1.64vw, 2.3rem);
  gap: clamp(16px, 2.14vw, 3rem);
}
@media screen and (max-width: 767px) {
  .p-user-nav.--sub .p-user-nav__li-link {
    gap: 1rem;
    padding-block: 1rem;
    padding-inline: 1rem 1.2rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-user-nav.--sub .p-user-nav__li-link::after {
    transition: 0.3s;
    transition-property: transform;
  }
  .p-user-nav.--sub .p-user-nav__li-link .p-user-nav__li-image img {
    transition: 0.3s;
    transition-property: transform;
  }
  .p-user-nav.--sub .p-user-nav__li-link:hover::after {
    transform: translate(0.3rem, -50%);
  }
  .p-user-nav.--sub .p-user-nav__li-link:hover .p-user-nav__li-image img {
    transform: scale(1.1);
  }
}
.p-user-nav.--sub .p-user-nav__li-link::after {
  width: clamp(16px, 1.36vw, 1.9rem);
  background-color: #11212F;
  position: absolute;
  top: 50%;
  right: clamp(9px, 1.64vw, 2.3rem);
  transform: translateY(-50%);
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--sub .p-user-nav__li-link::after {
    right: 5px;
  }
}
@media screen and (max-width: 767px) {
  .p-user-nav.--sub .p-user-nav__li-link::after {
    width: 1.3rem;
    right: 3px;
  }
}
.p-user-nav.--sub .p-user-nav__li-image {
  width: 39.3700787402%;
  max-width: 20rem;
  overflow: hidden;
}
.p-user-nav.--sub .p-user-nav__li-text {
  line-height: 1.6666666667;
}

.p-user-nav.--top .p-user-nav__li {
  gap: 2.5rem;
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--top .p-user-nav__li {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .p-user-nav.--top .p-user-nav__li {
    gap: 1.6rem;
  }
}
.p-user-nav.--top .p-user-nav__li-item {
  width: calc(33.3333333333% - 1.6666666667rem);
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--top .p-user-nav__li-item {
    width: 100%;
    max-width: 36rem;
  }
}
.p-user-nav.--top .p-user-nav__li-item.--nav01 .p-user-nav__li-link {
  padding-left: 3rem;
  gap: 2.6rem;
}
@media screen and (max-width: 1250px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav01 .p-user-nav__li-link {
    padding-left: 2.4vw;
    gap: 2.08vw;
  }
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav01 .p-user-nav__li-link {
    padding-left: 3rem;
    gap: 2.6rem;
  }
}
.p-user-nav.--top .p-user-nav__li-item.--nav01 .p-user-nav__li-image {
  width: 5rem;
}
@media screen and (max-width: 1250px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav01 .p-user-nav__li-image {
    width: 4vw;
  }
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav01 .p-user-nav__li-image {
    width: 5rem;
  }
}
.p-user-nav.--top .p-user-nav__li-item.--nav02 .p-user-nav__li-link {
  padding-left: 2.4rem;
  gap: 1rem;
}
@media screen and (max-width: 1250px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav02 .p-user-nav__li-link {
    padding-left: 1.92vw;
    gap: 0.8vw;
  }
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav02 .p-user-nav__li-link {
    padding-left: 2.4rem;
    gap: 1rem;
  }
}
.p-user-nav.--top .p-user-nav__li-item.--nav02 .p-user-nav__li-image {
  width: 14.5rem;
}
@media screen and (max-width: 1250px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav02 .p-user-nav__li-image {
    width: 11.6vw;
  }
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav02 .p-user-nav__li-image {
    width: 14.5rem;
  }
}
.p-user-nav.--top .p-user-nav__li-item.--nav03 .p-user-nav__li-link {
  padding-left: 4.8rem;
  gap: 3.9rem;
}
@media screen and (max-width: 1250px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav03 .p-user-nav__li-link {
    padding-left: 3.84vw;
    gap: 3.12vw;
  }
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav03 .p-user-nav__li-link {
    padding-left: 4.8rem;
    gap: 3.9rem;
  }
}
.p-user-nav.--top .p-user-nav__li-item.--nav03 .p-user-nav__li-image {
  width: 6.5rem;
}
@media screen and (max-width: 1250px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav03 .p-user-nav__li-image {
    width: 5.2vw;
  }
}
@media screen and (max-width: 1023px) {
  .p-user-nav.--top .p-user-nav__li-item.--nav03 .p-user-nav__li-image {
    width: 6.5rem;
  }
}
.p-user-nav.--top .p-user-nav__li-link {
  min-height: 15rem;
  color: #fff;
  background: linear-gradient(to bottom, #e7e5dd 0%, #282828 50%, #e7e5dd 100%);
  background-position: 50% 0%;
  background-size: auto 200%;
}
@media screen and (max-width: 767px) {
  .p-user-nav.--top .p-user-nav__li-link {
    min-height: 12rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-user-nav.--top .p-user-nav__li-link {
    transition: 0.3s;
    transition-property: background-position;
  }
  .p-user-nav.--top .p-user-nav__li-link:hover {
    background-position: 50% 100%;
  }
}
.p-user-nav.--top .p-user-nav__li-link::before {
  content: "";
  display: block;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border: 1px solid #fff;
  opacity: 0.4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.p-user-nav.--top .p-user-nav__li-link::after {
  width: 1.6rem;
  background-color: #fff;
  position: absolute;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
}
.p-user-nav.--top .p-user-nav__li-text {
  line-height: 1.5555555556;
}

.p-user-nav__li {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .p-user-nav__li-item {
    margin-inline: auto;
  }
}

.p-user-nav__li-link {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.p-user-nav__li-link::after {
  content: "";
  display: block;
  aspect-ratio: 19/26;
  -webkit-mask: url(../images/icon/icon_arrow-user.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow-user.svg) no-repeat center/contain;
  margin-left: auto;
}

.p-user-nav__li-text {
  font-size: clamp(14px, 1.29vw, 1.8rem);
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .p-user-nav__li-text {
    font-size: clamp(1.3rem, 3.47vw, 1.6rem);
  }
}

.p-user-cta__body {
  margin: 2.5rem auto 0;
  max-width: 83.2rem;
  gap: 3rem;
  padding-bottom: 2rem;
}
@media screen and (max-width: 1023px) {
  .p-user-cta__body {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .p-user-cta__body {
    padding-bottom: 0;
  }
}

.p-user-cta__box {
  width: calc(50% - 1.5rem);
  background-color: #e7e5dd;
  border-radius: 1rem;
  padding: 2rem;
}
@media screen and (max-width: 1023px) {
  .p-user-cta__box {
    width: 100%;
    max-width: 50rem;
  }
}

.p-user-cta__title {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}

.p-user-cta__tel {
  margin-top: 1.5rem;
}
.p-user-cta__tel .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .p-user-cta__tel .inner {
    flex-direction: column;
    gap: 0.4rem;
  }
}
.p-user-cta__tel .inner + .inner {
  margin-top: 0.4rem;
}
@media screen and (max-width: 767px) {
  .p-user-cta__tel .inner + .inner {
    margin-top: 0.8rem;
  }
}

.p-user-cta__tel-dt {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #282828;
  padding: 0.4rem 2.6rem;
  border-radius: 0.3rem;
}

.p-user-cta__tel-dd {
  font-family: "Roboto", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.3;
}
.p-user-cta__mail {
  font-family: "Roboto", sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  text-align: center;
  margin-top: 2.9rem;
}
@media screen and (max-width: 1023px) {
  .p-user-cta__mail {
    padding-bottom: 2.9rem;
  }
}
@media screen and (max-width: 767px) {
  .p-user-cta__mail {
    font-size: 2rem;
  }
}


.kakou-top-img {
  width: 700px;
  max-width: 100%; /* スマホでははみ出さない */
  height: auto;
  display: block;
  margin: 0 auto 20px; /* 中央寄せして下に余白 */
}

#kakou .manual-item {
  text-align: center;
}
#kakou .manual-item img {
  max-width: 80px;
}
#kakou .manual-item p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}

#kakou .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* すき間 */
}
#kakou .row > div {
  flex: 1 1 45%; /* 横幅45%で2列 */
  text-align: center;
}


/* manual ページ用 */
#manual .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* アイテム間の間隔 */
}

#manual .manual-item {
  flex: 1 1 30%; /* 幅30%で3列 */
  text-align: center;
  margin-bottom: 20px;
}

#manual .manual-item img {
  width: 150px;  /* 必要に応じてサイズ調整 */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

#manual .manual-item p {
  font-size: 14px;
  line-height: 1.6;
}

/* 余白調整：最後の行に少ないアイテムがあっても左寄せ */
#manual .row:last-child {
  justify-content: flex-start;
}



/* 設定値ページ（#parameter） 2列表示 */
#parameter .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 列間のスペース */
}

#parameter .manual-item {
  flex: 1 1 48%; /* 2列表示にする */
  text-align: center;
  margin-bottom: 20px;
}

#parameter .manual-item img {
  width: 300px;  /* 画像サイズ調整 */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

#parameter .manual-item p {
  font-size: 14px;
  line-height: 1.6;
}

/* 奇数で残った最後のアイテムも左寄せ */
#parameter .row:last-child {
  justify-content: flex-start;
}



/* ============================
   パソコン入れ替え注意事項ページ用
   （黒・ベージュ系統に統一）
   ============================ */
.p-user-text {
  font-size: 16px;
  line-height: 1.8;
  color: #282828; /* 全文の文字色 */
  margin: 40px 0;
}

.p-user-text h2 {
  font-size: 1.8em;
  margin-bottom: 1em;
  padding-bottom: .3em;
  border-bottom: 3px solid #9d9885; /* 大見出しはベージュ濃いめライン */
  color: #282828;
}

.p-user-text h3 {
  font-size: 1.4em;
  margin: 2em 0 1em;
  color: #282828;
  border-left: 5px solid #7e7a6a; /* 中見出しはボタン中間色 */
  padding-left: 10px;
}

.p-user-text h4 {
  font-size: 1.2em;
  margin: 1.5em 0 .5em;
  color: #636156; /* 小見出しはさらに濃いグレー */
}

.p-user-text ul {
  margin: 0 0 1em 1.2em;
  padding: 0;
  list-style: disc;
}

.p-user-text ul li {
  margin-bottom: .4em;
}

.p-user-text p {
  margin-bottom: 1em;
}

.p-user-text strong {
  color: #282828; /* 強調も黒に */
  font-weight: bold;
}

.p-user-text a {
  color: #636156; /* リンクも落ち着いたトーン */
  text-decoration: underline;
}

.p-user-text a:hover {
  text-decoration: none;
  color: #9d9885; /* ホバー時はベージュ強調 */
}

/* ==================================================
   ドライバ & ファームウェアダウンロードページ専用CSS
   クラス .driver に対応
================================================== */

/* 全体コンテナ */
.driver {
  max-width: 1100px;       /* 他ページのu-con--mdに合わせる */
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  background-color: #f1efe9; /* 薄いベージュ背景 */
  margin-bottom: 40px;
}

/* 見出し */
.driver h1, 
.driver h2 {
  color: #282828;
  border-left: 5px solid #9d9885;
  padding-left: 10px;
  margin-bottom: 20px;
}

.driver h2 {
  font-size: 1.6em;
  margin: 2em 0 1em;
}

.driver h3 {
  font-size: 1.4em;
  margin: 2em 0 1em;
  color: #282828;
  border-left: 5px solid #7e7a6a; /* 中見出しはボタン中間色 */
  padding-left: 10px;
}



/* テキストとリスト */
.driver p, 
.driver li {
  color: #282828;
  font-size: 15px;
  line-height: 1.7;
}

/* お知らせリスト */
.driver-text ul {
  margin: 0 0 1em 1.2em;
  padding: 0;
  list-style: disc;
}

.driver-text ul li {
  margin-bottom: .4em;
}

#driver .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 上揃え */
  gap: 20px; /* アイテム間の間隔 */
}


.driver .six.columns {
  flex: 1 1 50%; /* 左右均等 */
  max-width: 50%;
  box-sizing: border-box;
  padding: 0 10px;
}

.driver .six.columns img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid #bfbbab;
}

.driver .six.columns p {
  text-align: left;  /* 左揃え */
  margin-bottom: 1em;
}

.driver .six.columns img:hover {
  transform: scale(1.05);
}

/* スマホ表示時は縦並び */
@media (max-width: 768px) {
  .driver .six.columns {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
}






#driver .manual-item {
  flex: 1 1 30%; /* 幅30%で3列 */
  text-align: center;
  margin-bottom: 20px;
}

#driver .manual-item img {
  width: 250px;  /* 必要に応じてサイズ調整 */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

#driver .manual-item p {
  font-size: 14px;
  line-height: 1.6;
}

/* 余白調整：最後の行に少ないアイテムがあっても左寄せ */
#driver .row:last-child {
  justify-content: flex-start;
}


/* ==========================
   レスポンシブ対応
========================== */
@media (max-width: 768px) {
  .driver .six.columns,
  .driver .four.columns {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
}

/* ==================================================
   ドライバダウンロード用ボタンスタイル調整
================================================== */

/* ドライバページ専用で共通の矢印アイコンを消す */
.driver .c-btn::after {
  content: none !important; /* グローバル矢印を消す */
}

/* ドライバページ専用でテキスト用の矢印を追加 */
.driver .c-btn::before {
  content: "›";             /* 半角の矢印 */
  margin-right: 0.5em;      /* 矢印と文字の間 */
  color: #fff;              /* 矢印の色（白で統一） */
  font-size: 0.9em;         /* 少し小さめ */
  position: relative;       /* インラインのまま */
  top: 0;                   /* 縦位置リセット */
  display: inline-block;
}

/* ダウンロードボタン */
.driver .c-btn {
  display: inline-block;
  padding: 6px 14px;        /* ボタンサイズ調整 */
  font-size: 14px;
  background: #282828;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s;
  margin: 8px 6px;          /* 上下左右の余白 */
  position: relative;
}

.driver .c-btn:hover {
  background: #636156;
}

/* ボタンが複数ある場合（例: 64bit / 32bit）横並びに */
.driver .driver-item .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;  /* ボタン間の余白 */
  margin: 10px 0;
}

.driver-text ul {
  margin: 0 0 1em 1.2em;
  padding: 0;
  list-style: disc;
}

.driver-text ul li {
  margin-bottom: .4em;
}
















/* -------------------------------------------*/
.p-lcj__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-lcj__text.--center {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-lcj__text.--center {
    text-align: left;
  }
}

.p-lcj__banner {
  margin-top: 3.5rem;
}
.p-lcj__banner + * {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-lcj__banner + * {
    margin-top: 6rem;
  }
}

.p-lcj__banner-link {
  display: block;
  width: 80%;
  max-width: 70rem;
  margin-inline: auto;
  border-radius: 2rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .p-lcj__banner-link {
    width: 90%;
    border-radius: 1.2rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-lcj__banner-link {
    transition: 0.3s;
    transition-property: opacity;
  }
  .p-lcj__banner-link:hover {
    opacity: 0.7;
  }
}

.p-lcj-sec + * {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-lcj-sec + * {
    margin-top: 6rem;
  }
}

.p-lcj__archive {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 2.5rem;
}
@media screen and (max-width: 1023px) {
  .p-lcj__archive {
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .p-lcj__archive {
    row-gap: 3.2rem;
  }
}

.p-lcj__archive-item {
  width: calc(24% - 1.6666666667rem);
}
@media screen and (max-width: 1023px) {
  .p-lcj__archive-item {
    width: calc(33.3333333333% - 1.0666666667rem);
  }
}
@media screen and (max-width: 767px) {
  .p-lcj__archive-item {
    width: calc(50% - 0.8rem);
  }
}

.p-lcj__archive-link {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .p-lcj__archive-link {
    transition: 0.3s;
    transition-property: color;
  }
  .p-lcj__archive-link .p-lcj__archive-thumbnail img {
    transition: 0.3s;
    transition-property: transform;
  }
  .p-lcj__archive-link:hover {
    color: #1D6FB9;
  }
  .p-lcj__archive-link:hover .p-lcj__archive-thumbnail img {
    transform: scale(1.1);
  }
}

.p-lcj__archive-thumbnail {
  border: 1px solid #CCCCCC;
  aspect-ratio: 364/265;
  overflow: hidden;
}
.p-lcj__archive-thumbnail img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-lcj__archive-year {
  font-size: 1.4rem;
  margin-top: 0.5rem;
}
@media screen and (max-width: 1023px) {
  .p-lcj__archive-year {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-lcj__archive-year {
    margin-top: 0.2rem;
  }
}

.p-lcj__archive-title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.625;
  margin-top: 0.6rem;
}
@media screen and (max-width: 1023px) {
  .p-lcj__archive-title {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .p-lcj__archive-title {
    margin-top: 0;
  }
}

/* -------------------------------------------*/
.p-trouble .c-primary-title + .p-trouble__text {
  margin-top: 2.5rem;
}

.p-trouble__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-trouble__text.--center {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-trouble__text.--center {
    text-align: left;
  }
}

.p-trouble-head + * {
  margin-top: 2.5rem;
}
.p-trouble-head .c-primary-title + * {
  margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
  .p-trouble-head .c-primary-title + * {
    margin-top: 2.4rem;
  }
}

.p-trouble-nav + * {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-trouble-nav + * {
    margin-top: 6rem;
  }
}

.p-trouble-nav__li {
  max-width: 97.5rem;
  margin-inline: auto;
  gap: 2rem 3rem;
}
@media screen and (max-width: 767px) {
  .p-trouble-nav__li {
    row-gap: 1rem;
  }
}

.p-trouble-nav__item {
  width: calc(50% - 1.5rem);
}
@media screen and (max-width: 767px) {
  .p-trouble-nav__item {
    width: 100%;
  }
}

.p-trouble-nav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  padding-block: 0.7rem;
  padding-inline: 2.5rem;
  border: 2px solid #D8E6F0;
  background-color: #D8E6F0;
  border-radius: 0.6rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-trouble-nav__link {
    font-size: 1.6rem;
  }
}
.p-trouble-nav__link::after {
  content: "";
  display: block;
  width: 1.3rem;
  aspect-ratio: 10/13;
  -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
  background-color: #11212F;
  position: absolute;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .p-trouble-nav__link {
    transition: 0.3s;
    transition-property: background-color;
  }
  .p-trouble-nav__link:hover {
    background-color: #fff;
  }
}
.p-trouble-nav__link span {
  display: inline-block;
}

.p-trouble-sec + * {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-trouble-sec + * {
    margin-top: 5.6rem;
  }
}

.p-trouble__h3 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  background-color: #D8E6F0;
  padding-block: 2rem;
}
@media screen and (max-width: 767px) {
  .p-trouble__h3 {
    font-size: 1.8rem;
  }
}
.p-trouble__h3 + * {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-trouble__h3 + * {
    margin-top: 2.4rem;
  }
}
.p-trouble__h3 span {
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .p-trouble-sec__body {
    margin-top: 2.4rem;
  }
}

.p-trouble-sec__h4 {
  display: flex;
  flex-direction: column;
  background-color: #F0F4F7;
  padding: 1rem;
}
.p-trouble-sec__h4 .h4 {
  font-size: 1.8rem;
  font-weight: bold;
}
.p-trouble-sec__h4 .text {
  text-indent: -1.2em;
  padding-left: 1.2em;
}
.p-trouble-sec__h4 .text::before {
  content: "ー";
}
.p-trouble-sec__h4 + * {
  margin-top: 1.6rem;
}

@media screen and (max-width: 767px) {
  .p-trouble-sec__details {
    border: 1px solid;
    border-radius: 1rem;
    padding: 2rem;
  }
  .p-trouble-sec__details + .p-trouble-sec__details {
    margin-top: 1.6rem;
  }
  .p-trouble-sec__details .l-faq__question, .p-trouble-sec__details .l-faq__answer {
    gap: 0.8rem;
  }
  .p-trouble-sec__details .l-faq__question::before, .p-trouble-sec__details .l-faq__answer::before {
    width: 2rem;
    font-size: 2.2rem;
  }
  .p-trouble-sec__details .l-faq__question {
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.6rem;
    cursor: pointer;
  }
  .p-trouble-sec__details .l-faq__question::after {
    content: "";
    display: block;
    width: 1rem;
    aspect-ratio: 10/13;
    -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
            mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
    background-color: #11212F;
    transform: rotate(90deg);
    position: relative;
    top: 1rem;
  }
  .p-trouble-sec__details .l-faq__question span {
    padding-top: 0.2rem;
  }
  .p-trouble-sec__details .l-faq__answer {
    border-top: 1px solid;
    padding-top: 1.6rem;
  }
  .p-trouble-sec__details + * {
    margin-top: 3.2rem;
  }
}

/* -------------------------------------------*/
.l-breadcrumbs + .p-company-sec {
  padding-top: 0;
  margin-top: 3.9rem;
}

.p-company .c-primary-title + .p-company__text {
  margin-top: 2.5rem;
}

.p-company__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-company__text + .p-company__map {
  margin-top: 3.1rem;
}
@media screen and (max-width: 767px) {
  .p-company__text + .p-company__map {
    margin-top: 1.6rem;
  }
}

.p-company-sec {
  overflow: hidden;
  padding-top: 5rem;
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .p-company-sec {
    padding-top: 3rem;
    margin-top: 3rem;
  }
}

.p-company-bg {
  background-color: #e7e5dd;
  padding-block: 4rem;
}

.p-company__flex {
  display: flex;
  align-items: flex-start;
  gap: 6rem;
}
@media screen and (max-width: 1023px) {
  .p-company__flex {
    gap: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .p-company__flex {
    flex-direction: column;
    gap: 1.6rem;
  }
}
@media screen and (max-width: 1023px) {
  .p-company__flex.--lg {
    flex-direction: column;
  }
  .p-company__flex.--lg .p-company__flex-left {
    width: 100%;
  }
}

.p-company__flex-left.--md {
  width: 41.592920354%;
}
.p-company__flex-left.--lg {
  width: 44.2477876106%;
}
@media screen and (max-width: 767px) {
  .p-company__flex-left.--images {
    width: 100%;
    display: flex;
    gap: 1rem;
  }
  .p-company__flex-left.--images .p-company__flex-image {
    width: calc(50% - 0.5rem);
  }
}

.p-company__flex-image + .p-company__flex-image {
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-company__flex-image + .p-company__flex-image {
    margin-top: 0;
  }
}

.p-company__flex-right {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .p-company__flex-right {
    width: 100%;
  }
}

.p-company__map {
  aspect-ratio: 570/400;
}
.p-company__map iframe {
  width: 100%;
  height: 100%;
}

.p-company__table {
  max-width: 70.2rem;
  margin-inline: auto;
}
.p-company__table .c-table-th {
  width: 24.8554913295%;
}
@media screen and (max-width: 767px) {
  .p-company__table .c-table-th {
    width: 100%;
  }
}

.p-company-service__head {
  gap: 6.5rem;
}
@media screen and (max-width: 1023px) {
  .p-company-service__head {
    gap: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .p-company-service__head {
    flex-direction: column;
  }
}

.p-company-service__head-image {
  width: 40.7079646018%;
}
@media screen and (max-width: 767px) {
  .p-company-service__head-image {
    width: 100%;
  }
}

.p-company-service__head-box {
  flex: 1;
}

.p-company-service__body {
  margin-top: 4rem;
  padding-bottom: 10rem;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-company-service__body {
    margin-top: 3.2rem;
    gap: 2.4rem;
  }
}
.p-company-service__body::after {
  content: "";
  display: block;
  width: 42.7rem;
  aspect-ratio: 764/772;
  -webkit-mask: url(../images/under/undertitle-treat.png) no-repeat center/contain;
          mask: url(../images/under/undertitle-treat.png) no-repeat center/contain;
  background-color: #e7e5dd;
  position: absolute;
  right: max(-14.6rem, -10.43vw);
  bottom: -4rem;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .p-company-service__body::after {
    width: 70%;
    bottom: -3rem;
  }
}

.p-company-service__box {
  width: calc(50% - 1.5rem);
  border: 1px solid #e7e5dd;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .p-company-service__box {
    width: 100%;
  }
}

.p-company-service__h3 {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  background-color: #e7e5dd;
  padding-block: 1.15rem;
}

.p-company-service__box-inner {
  padding: 2rem 3rem 2.5rem;
}

.p-company-philosophy__h3 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #282828;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #282828;
}
.p-company-philosophy__h3:not(:first-child) {
  margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
  .p-company-philosophy__h3:not(:first-child) {
    margin-top: 3.2rem;
  }
}
.p-company-philosophy__h3 span {
  display: inline-block;
}
.p-company-philosophy__h3 + * {
  margin-top: 1rem;
}

/* -------------------------------------------*/
.p-guide__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-guide__text a {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .p-guide__text a {
    transition: 0.3s;
    transition-property: color;
  }
  .p-guide__text a:hover {
    color: #1D6FB9;
  }
}
.p-guide__text + .c-btn {
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-guide__text + .c-btn {
    margin-top: 0.8rem;
  }
}

.p-guide-flow {
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .p-guide-flow {
    padding-bottom: 0;
  }
}

.p-guide-flow__li {
  position: relative;
  z-index: 1;
}
.p-guide-flow__li::after {
  content: "";
  display: block;
  width: 26.5486725664%;
  height: 100%;
  background: linear-gradient(#e7e5dd 0%, #636156 100%);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .p-guide-flow__li::after {
    width: 40%;
  }
}

.p-guide-flow__li-item {
  border: 1px solid #282828;
  background-color: #fff;
  padding: 2.9rem;
  display: flex;
  gap: 3rem;
  counter-increment: flowcounter;
}
@media screen and (max-width: 1023px) {
  .p-guide-flow__li-item {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .p-guide-flow__li-item {
    padding: 1.8rem;
    gap: 0.8rem;
  }
}
.p-guide-flow__li-item.--support {
  margin-top: 8rem;
  border-width: 0.3rem;
  border-color: #282828;
  position: relative;
}
.p-guide-flow__li-item.--support::before {
  content: "";
  display: block;
  width: 13rem;
  aspect-ratio: 130/40;
  background-color: #636156;
  -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
          clip-path: polygon(100% 0, 0 0, 50% 100%);
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translate(-50%, -100%);
}
.p-guide-flow__li-item.--support .p-guide-flow__li-image {
  width: 42.9906542056%;
}
@media screen and (max-width: 1023px) {
  .p-guide-flow__li-item.--support .p-guide-flow__li-image {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .p-guide-flow__li-item.--support .p-guide-flow__li-image {
    width: 100%;
  }
}
.p-guide-flow__li-item.--support .p-guide-flow__li-h3 {
  font-size: 2.4rem;
  color: #282828;
}
@media screen and (max-width: 767px) {
  .p-guide-flow__li-item.--support .p-guide-flow__li-h3 {
    font-size: 1.8rem;
  }
}
.p-guide-flow__li-item.--support .p-guide-flow__li-h3::before {
  content: "";
  display: block;
  width: 5rem;
  aspect-ratio: 1/1;
  background: url(../images/under/guide/icon_support.png) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
  .p-guide-flow__li-item.--support .p-guide-flow__li-h3::before {
    width: 4.5rem;
  }
}
.p-guide-flow__li-item + .p-guide-flow__li-item {
  margin-top: 3rem;
}
.p-guide-flow__li-item .c-btn {
  min-width: 24rem;
  font-size: 1.6rem;
  padding-block: 0.9rem 1rem;
}
@media screen and (max-width: 767px) {
  .p-guide-flow__li-item .c-btn {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
    padding-inline: 2rem;
  }
}
.p-guide-flow__li-item .c-btn::after {
  width: 1.3rem;
  aspect-ratio: 10/13;
  -webkit-mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow.svg) no-repeat center/contain;
  right: 1.2rem;
}

.p-guide-flow__li-image {
  width: 33.4579439252%;
}
@media screen and (max-width: 1023px) {
  .p-guide-flow__li-image {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .p-guide-flow__li-image {
    width: 100%;
  }
}
.p-guide-flow__li-image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-guide-flow__li-box {
  flex: 1;
}
@media screen and (max-width: 1023px) {
  .p-guide-flow__li-box {
    width: 100%;
  }
}

.p-guide-flow__li-h3 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #282828;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.p-guide-flow__li-h3::before {
  content: counter(flowcounter, decimal-leading-zero);
  font-size: 4rem;
  font-family: "Roboto", sans-serif;
  line-height: 1.325;
}
.p-guide-flow__li-h3 + * {
  margin-top: 0.5rem;
}

/* -------------------------------------------*/
.p-maintenance__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-maintenance__text.--center {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-maintenance__text.--center {
    text-align: left;
  }
}

.p-maintenance-sec {
  margin-top: 6.5rem;
}
@media screen and (max-width: 767px) {
  .p-maintenance-sec {
    margin-top: 4rem;
  }
}
.p-maintenance-sec + .p-maintenance-sec {
  margin-top: 7.3rem;
}
@media screen and (max-width: 767px) {
  .p-maintenance-sec + .p-maintenance-sec {
    margin-top: 4rem;
  }
}

.p-maintenance__li {
  display: flex;
  flex-wrap: wrap;
  gap: 4.5rem 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-maintenance__li {
    gap: 2.4rem 1.4rem;
  }
}

.p-maintenance__li-item {
  width: calc(33.3333333333% - 1.6666666667rem);
  background-color: #fff;
}
@media screen and (max-width: 1023px) {
  .p-maintenance__li-item {
    width: calc(50% - 1.25rem);
  }
}
@media screen and (max-width: 767px) {
  .p-maintenance__li-item {
    width: calc(50% - 0.7rem);
  }
}

.p-maintenance__li-link {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .p-maintenance__li-link {
    transition: 0.3s;
    transition-property: box-shadow;
  }
  .p-maintenance__li-link:hover {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
  }
}

.p-maintenance__li-inner {
  padding: 0.8rem 1.5rem 1.9rem;
}
@media screen and (max-width: 767px) {
  .p-maintenance__li-inner {
    padding: 0.4rem 0.8rem 0.6rem;
  }
}

.p-maintenance__li-thumbnail {
  position: relative;
}
.p-maintenance__li-thumbnail::after {
  content: "";
  display: block;
  width: 16.9444444444%;
  aspect-ratio: 61/92;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
          clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color: #fff;
  opacity: 0.74;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-maintenance__li-text {
  font-size: 1.6rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .p-maintenance__li-text {
    font-size: 1.4rem;
  }
}

/* -------------------------------------------*/
.p-sample__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-sample__text.--center {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-sample__text.--center {
    text-align: left;
  }
}

.p-sample .c-primary-title {
  margin-top: 5.5rem;
}
@media screen and (max-width: 767px) {
  .p-sample .c-primary-title {
    margin-top: 4rem;
  }
}
.p-sample .c-primary-title:first-child {
  margin-top: 0;
}
.p-sample .c-primary-title + .p-sample__nav {
  margin-top: 2.9rem;
}

/* -------------------------------------------
    nav
--------------------------------------------*/
.p-sample-list__nav + .c-primary-title {
  margin-top: 4rem;
}

.p-sample-list__nav-li {
  max-width: 104rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1rem;
}
@media screen and (max-width: 767px) {
  .p-sample-list__nav-li {
    row-gap: 1rem;
  }
}

.p-sample-list__nav-item {
  width: calc(20% - 0.8rem);
}
@media screen and (max-width: 1023px) {
  .p-sample-list__nav-item {
    width: calc(33.3333333333% - 0.6666666667rem);
  }
}
@media screen and (max-width: 767px) {
  .p-sample-list__nav-item {
    width: calc(50% - 0.5rem);
  }
}

.p-sample-list__nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 4.4rem;
  font-size: 1.6rem;
  line-height: 1.125;
  text-align: center;
  color: #282828;
  border: 1px solid #282828;
  background-color: #fff;
  border-radius: 10rem;
  padding: 1.2rem 0.6rem;
}
@media screen and (max-width: 767px) {
  .p-sample-list__nav-link {
    font-size: 1.4rem;
    padding-inline: 1rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-sample-list__nav-link {
    transition: 0.3s;
    transition-property: color, background-color;
  }
  .p-sample-list__nav-link:hover {
    color: #fff;
    background-color: #282828;
  }
}

/* -------------------------------------------
    sec
--------------------------------------------*/
.p-sample-list__sec {
  margin-top: 10rem;
  background-color: #e7e5dd;
  padding-block: 6rem;
}
@media screen and (max-width: 767px) {
  .p-sample-list__sec {
    margin-top: 6rem;
    padding-block: 4rem;
  }
}

.p-sample-list__sec-li {
  gap: 3rem 5rem;
}
@media screen and (max-width: 1023px) {
  .p-sample-list__sec-li {
    gap: 2rem 3rem;
  }
}

.p-sample-list__sec-item {

  padding: clamp(16px, 2.4vw, 3rem);
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}
@media screen and (max-width: 1023px) {
  .p-sample-list__sec-item {

    padding: 1.2rem;
    gap: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-sample-list__sec-item {
    width: 100%;
  }
}

.p-sample-list__sec-img {
  width: 41.6666666667%;
}

.p-sample-list__sec-box {
  flex: 1;
}

.p-sample-list__sec-h3 {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.45;
}
@media screen and (max-width: 1023px) {
  .p-sample-list__sec-h3 {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .p-sample-list__sec-h3 {
    font-size: 1.7rem;
  }
}
.p-sample-list__sec-h3 + * {
  margin-top: 1rem;
}
@media screen and (max-width: 1023px) {
  .p-sample-list__sec-h3 + * {
    margin-top: 0;
  }
}
@media screen and (max-width: 767px) {
  .p-sample-list__sec-h3 + * {
    margin-top: 0.4rem;
  }
}

.p-sample-list__sec-logo img {
  width: initial;
  height: initial;
}
.p-sample-list__sec-logo + * {
  margin-top: 2rem;
}
@media screen and (max-width: 1023px) {
  .p-sample-list__sec-logo + * {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .p-sample-list__sec-logo + * {
    margin-top: 1.6rem;
  }
}

.p-sample-list__sec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}
@media screen and (max-width: 767px) {
  .p-sample-list__sec-tags {
    gap: 0.8rem;
  }
}

.p-sample-list__sec-tag {
  width: 6.8rem;
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
  padding-block: 0.5rem;
}
@media screen and (max-width: 1023px) {
  .p-sample-list__sec-tag {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-sample-list__sec-tag {
    width: 5.8rem;
    font-size: 1.3rem;
    padding-block: 0.3rem 0.5rem;
  }
}
.p-sample-list__sec-tag.--sm {
  background-color: #68A3D8;
}
.p-sample-list__sec-tag.--md {
  background-color: #1D6FB9;
}
.p-sample-list__sec-tag.--lg {
  background-color: #004583;
}

.p-sample-single__sec {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .p-sample-single__sec {
    margin-top: 4rem;
  }
}
.p-sample-single__sec.--case {
  padding-bottom: 2rem;
}

.p-sample-single__li {
  gap: 3rem;
}
@media screen and (max-width: 1023px) {
  .p-sample-single__li {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-sample-single__li {
    gap: 2.4rem 1.6rem;
  }
}

.p-sample-single__li-item {
  width: calc(25% - 2.25rem);
}
@media screen and (max-width: 1023px) {
  .p-sample-single__li-item {
    width: calc(33.3333333333% - 1.3333333333rem);
  }
}
@media screen and (max-width: 767px) {
  .p-sample-single__li-item {
    width: calc(50% - 0.8rem);
  }
}

/* -------------------------------------------
    head
--------------------------------------------*/
.p-sample-single__head {
  background-color: #e7e5dd;
  padding-block: 2rem;
}
@media screen and (max-width: 1023px) {
  .p-sample-single__head {
    padding-block: 4rem;
  }
}

.p-sample-single__head-body {
  max-width: 97rem;
  margin-inline: auto;
  align-items: center;
  gap: clamp(30px, 13.33vw, 5rem);
}
@media screen and (max-width: 1023px) {
  .p-sample-single__head-body {
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
  }
}

.p-sample-single__head-slide {
  width: 51.5463917526%;
  overflow: hidden;
}
@media screen and (max-width: 1023px) {
  .p-sample-single__head-slide {
    width: 85%;
  }
}
@media screen and (max-width: 767px) {
  .p-sample-single__head-slide {
    width: 100%;
  }
}
.p-sample-single__head-slide .swiper-pagination {
  margin-top: 2rem;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .p-sample-single__head-slide .swiper-pagination {
    gap: 1rem;
  }
}
.p-sample-single__head-slide .swiper-pagination-bullet {
  width: 1.4rem;
  height: 1.4rem;
  margin-inline: 0;
  background-color: #fff;
  border: 1px solid #B5B5B5;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .p-sample-single__head-slide .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
  }
}
.p-sample-single__head-slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #282828;
  border-color: #282828;
}

.p-sample-single__head-box {
  margin-top: -2rem;
  flex: 1;
}
@media screen and (max-width: 1023px) {
  .p-sample-single__head-box {
    margin-top: 0;
  }
}

.p-sample-single__head-text {
  font-size: 1.6rem;
  line-height: 1.875;
}
.p-sample-single__head-text + .p-sample-single__head-text {
  margin-top: 2.1rem;
}

/* -------------------------------------------
    case
--------------------------------------------*/
.p-sample-single__case-img {
  cursor: pointer;
  aspect-ratio: 260/165;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .p-sample-single__case-img img {
    transition: 0.3s;
    transition-property: transform;
  }
  .p-sample-single__case-img:hover img {
    transform: scale(1.1);
  }
}
.p-sample-single__case-img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-sample-single__case-text {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0.9rem;
}
@media screen and (max-width: 1023px) {
  .p-sample-single__case-text {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .p-sample-single__case-text {
    font-size: 1.4rem;
  }
}

/* -------------------------------------------
    faq
--------------------------------------------*/
.p-sample-single__faq {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-sample-single__faq {
    margin-top: 6rem;
  }
}

.p-sample-single__faq-body {
  max-width: 84rem;
  padding-inline: 4rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-sample-single__faq-body {
    padding-inline: 1.6rem;
  }
}

/* -------------------------------------------*/
.p-customer__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-customer__text.--center {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-customer__text.--center {
    text-align: left;
  }
}

/* -------------------------------------------
    nav
--------------------------------------------*/
.p-customer-list__nav-box {
  margin-top: 5rem;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  max-width: 94rem;
  margin-inline: auto;
  padding-inline: 4rem;
}
@media screen and (max-width: 1023px) {
  .p-customer-list__nav-box {
    flex-direction: column;
    gap: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .p-customer-list__nav-box {
    padding-inline: 1.6rem;
  }
}
.p-customer-list__nav-box + .p-customer-list__nav-box {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 0.2rem solid #282828;
}

.p-customer-list__nav-title {
  font-size: 2rem;
  font-weight: bold;
  min-width: 11em;
}
@media screen and (max-width: 767px) {
  .p-customer-list__nav-title {
    font-size: 1.8rem;
  }
}

.p-customer-list__nav-li {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
@media screen and (max-width: 1023px) {
  .p-customer-list__nav-li {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-customer-list__nav-li {
    gap: 1.6rem 1rem;
  }
}

.p-customer-list__nav-item {
  width: calc(33.3333333333% - 1.3333333333rem);
}
@media screen and (max-width: 767px) {
  .p-customer-list__nav-item {
    width: calc(50% - 0.5rem);
  }
}

.p-customer-list__nav-link {
  font-size: 1.6rem;
  text-align: center;
  color: #282828;
  border: 1px solid #282828;
  background-color: #fff;
  border-radius: 10rem;
  padding-block: 0.9rem;
  display: flex;
  flex-direction: column;
  max-height: 4.4rem;
}
@media screen and (max-width: 767px) {
  .p-customer-list__nav-link {
    font-size: 1.4rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-customer-list__nav-link {
    transition: 0.3s;
    transition-property: color, background-color;
  }
  .p-customer-list__nav-link:hover {
    color: #fff;
    background-color: #282828;
  }
}

/* -------------------------------------------
    case
--------------------------------------------*/
.p-customer-list__case {
  margin-top: 10rem;
}
.p-customer-list__case2 {
  margin-top: 10rem;
  background-color: #bfbbab;
}
@media screen and (max-width: 767px) {
  .p-customer-list__case {
    margin-top: 6rem;
  }
}
.p-customer-list__case + .p-customer-list__case {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .p-customer-list__case + .p-customer-list__case {
    margin-top: 5.6rem;
  }
}
@media screen and (max-width: 767px) {
  .p-customer-list__case .u-con--md {
    max-width: 72rem;
  }
}

.p-customer-list__case-li {
  gap: 3rem 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-customer-list__case-li {
    justify-content: center;
  }
}

.p-customer-list__case-item {
  width: calc(33.3333333333% - 1.6666666667rem);
  border: 1px solid #282828;
  padding: 1.5rem 1.5rem 2.2rem;
  display: flex;
  flex-direction: column;
}

.p-customer-list__case-item2 {
  width: calc(33.3333333333% - 1.6666666667rem);
  border: 1px solid #fff;
  padding: 1.5rem 1.5rem 2.2rem;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

@media screen and (max-width: 1023px) {
  .p-customer-list__case-item {
    width: calc(50% - 1.25rem);
  }
}
@media screen and (max-width: 767px) {
  .p-customer-list__case-item {
    width: 100%;
    max-width: 32rem;
  }
}

.p-customer-list__case-img + * {
  margin-top: 1rem;
}

.p-customer-list__case-title {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  color: #282828;
  background-color: #bfbbab;
  padding-block: 0.4rem;
}
.p-customer-list__case-title + * {
  margin-top: 1rem;
}

.p-customer-list__case-lead {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4444444444;
  flex: 1;
}
.p-customer-list__case-lead + * {
  margin-top: 1rem;
}

.p-customer-list__case-dl .inner {
  display: flex;
}

.p-customer-list__case-dt,
.p-customer-list__case-dd {
  font-size: 1.5rem;
  line-height: 1.6666666667;
}

.p-customer-list__case-dt::before {
  content: "■";
}

.p-customer-list__case-dd::before {
  content: "：";
}

.p-customer-list__case-btn {
  margin-top: 2rem;
}
.p-customer-list__case-btn .c-btn {
  width: 24rem;
  font-size: 1.6rem;
  margin-inline: auto;
  padding-block: 1rem;
}
.p-customer-list__case-btn .c-btn::after {
  width: 2rem;
  -webkit-mask-image: url(../images/icon/icon_arrow02.svg);
          mask-image: url(../images/icon/icon_arrow02.svg);
  top: 50%;
  right: 0.9rem;
}
.p-customer-single__sec {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__sec {
    margin-top: 5.6rem;
  }
}

/* -------------------------------------------
    head
--------------------------------------------*/
.p-customer-single__head-body {
  max-width: 75rem;
  margin-inline: auto;
}

.p-customer-single__head-top {
  display: flex;
  align-items: center;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__head-top {
    flex-direction: column;
    gap: 1rem;
  }
}
.p-customer-single__head-top + * {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__head-top + * {
    margin-top: 1.6rem;
  }
}

.p-customer-single__head-top-box {
  padding-right: 4rem;
  padding-block: 0.6rem;
  border-right: 1px solid #D8E6F0;
}
@media screen and (max-width: 767px) {
  .p-customer-single__head-top-box {
    width: 100%;
    padding-right: 0;
    padding-block: 0;
    border: none;
  }
}

.p-customer-single__head-h2 {
  font-size: 2.4rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .p-customer-single__head-h2 {
    font-size: 2.2rem;
  }
}
.p-customer-single__head-h2 + * {
  margin-top: 0.5rem;
}

.p-customer-single__head-tag {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  background-color: #282828;
  padding: 0.6rem 2.8rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__head-tag {
    font-size: 1.4rem;
  }
}

.p-customer-single__head-lead {
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.4166666667;
  color: #282828;
}
@media screen and (max-width: 767px) {
  .p-customer-single__head-lead {
    width: 100%;
    font-size: 1.8rem;
  }
}

.p-customer-single__head-image + * {
  margin-top: 2.6rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__head-image + * {
    margin-top: 1.6rem;
  }
}

.p-customer-single__head-flex {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
@media screen and (max-width: 1023px) {
  .p-customer-single__head-flex {
    flex-direction: column;
    gap: 1.6rem;
  }
}

.p-customer-single__head-add p,
.p-customer-single__head-flex-box p {
  font-size: 1.5rem;
  line-height: 1.7333333333;
}
.p-customer-single__head-add p + p,
.p-customer-single__head-flex-box p + p {
  margin-top: 3rem;
}
@media screen and (max-width: 1023px) {
  .p-customer-single__head-add p + p,
.p-customer-single__head-flex-box p + p {
    margin-top: 1.6rem;
  }
}
.p-customer-single__head-add p a,
.p-customer-single__head-flex-box p a {
  font-weight: bold;
  text-decoration: underline;
  color: #1D6FB9;
}
@media (hover: hover) and (pointer: fine) {
  .p-customer-single__head-add p a,
.p-customer-single__head-flex-box p a {
    transition: 0.3s;
    transition-property: color;
  }
  .p-customer-single__head-add p a:hover,
.p-customer-single__head-flex-box p a:hover {
    color: #004583;
  }
}

/* -------------------------------------------
    case
--------------------------------------------*/
.p-customer-single__case-li {
  gap: 3rem;
}
@media screen and (max-width: 1023px) {
  .p-customer-single__case-li {
    gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-customer-single__case-li {
    gap: 1.6rem;
  }
}

.p-customer-single__case-item {
  width: calc(33.3333333333% - 2rem);
}
@media screen and (max-width: 1023px) {
  .p-customer-single__case-item {
    width: calc(33.3333333333% - 1.3333333333rem);
  }
}
@media screen and (max-width: 767px) {
  .p-customer-single__case-item {
    width: 100%;
  }
}

/* -------------------------------------------
    interview
--------------------------------------------*/
.p-customer-single__interview-box {
  max-width: 95rem;
  margin-inline: auto;
  display: flex;
}
@media screen and (max-width: 767px) {
  .p-customer-single__interview-box {
    flex-direction: column;
    gap: 1.6rem;
  }
}
.p-customer-single__interview-box + .p-customer-single__interview-box {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__interview-box + .p-customer-single__interview-box {
    margin-top: 3.2rem;
  }
}

.p-customer-single__interview-image {
  width: 40.8421052632%;
}
@media screen and (max-width: 767px) {
  .p-customer-single__interview-image {
    width: 100%;
  }
}
.p-customer-single__interview-image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-customer-single__interview-inner {
  flex: 1;
  padding-block: 2rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__interview-inner {
    padding-block: 0;
  }
}

.p-customer-single__interview-h4,
.p-customer-single__interview-text {
  padding-inline: 3rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__interview-h4,
.p-customer-single__interview-text {
    padding-inline: 1.2rem;
  }
}

.p-customer-single__interview-h4 {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  color: #282828;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #282828;
}
.p-customer-single__interview-h4 + * {
  margin-top: 1.3rem;
}

.p-customer-single__interview-text {
  font-size: 1.6rem;
  line-height: 1.875;
}

/* -------------------------------------------
    info
--------------------------------------------*/
.p-customer-single__info-body {
  gap: 5rem;
}
@media screen and (max-width: 1023px) {
  .p-customer-single__info-body {
    flex-direction: column;
    gap: 2.4rem;
  }
}

.p-customer-single__info-image {
  width: 47.7876106195%;
}
@media screen and (max-width: 1023px) {
  .p-customer-single__info-image {
    width: 100%;
  }
}

.p-customer-single__info-box {
  flex: 1;
}

.p-customer-single__info-dl + * {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__info-dl + * {
    margin-top: 2.4rem;
  }
}

.p-customer-single__info-dt {
  font-size: 2.4rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .p-customer-single__info-dt {
    font-size: 2rem;
  }
}
.p-customer-single__info-dt + * {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__info-dt + * {
    margin-top: 1.6rem;
  }
}

.p-customer-single__info-dd {
  font-size: 1.6rem;
  line-height: 2.125;
}

.p-customer-single__info-li-item {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-customer-single__info-li-item::before {
  content: "■";
}
.p-customer-single__info-li-item.--flex {
  display: flex;
  gap: 1em;
}
@media screen and (max-width: 767px) {
  .p-customer-single__info-li-item.--flex {
    flex-direction: column;
    gap: 0;
  }
}
.p-customer-single__info-li-item.--flex::before {
  display: none;
}
.p-customer-single__info-li-item.--flex *:first-child::before {
  content: "■";
}
@media screen and (max-width: 767px) {
  .p-customer-single__info-li-item.--flex *:nth-child(2) {
    padding-left: 1em;
  }
}

.p-customer-single__info-more {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-customer-single__info-more {
    margin-top: 2.4rem;
  }
}
.p-customer-single__info-more a {
  font-size: 1.6rem;
  line-height: 1.5;
  text-decoration: underline;
  color: #1D6FB9;
}
@media (hover: hover) and (pointer: fine) {
  .p-customer-single__info-more a {
    transition: 0.3s;
    transition-property: color;
  }
  .p-customer-single__info-more a:hover {
    color: #004583;
  }
}

.sns-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle; /* テキストと中央揃え */
}



/* -------------------------------------------
    btn
--------------------------------------------*/
.p-customer-single__back {
  margin-top: 10rem;
}

.p-customer-single__back {
  text-align: center;
  margin: 40px 0;
}

.p-customer-single__back .c-btn {
  display: inline-block; /* ボタンの横幅が広がらないように */
}

@media screen and (max-width: 767px) {
  .p-customer-single__back {
    margin-top: 5.6rem;
  }
}

/* -------------------------------------------*/
.p-products__text {
  font-size: 1.6rem;
  line-height: 2.125;
}
.p-products__text.--center {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-products__text.--center {
    text-align: left;
  }
}
.p-products__text.--box {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.p-products__text.--02 {
  line-height: 1.875;
}

.p-products__h2 {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-products__h2 {
    font-size: 2.2rem;
  }
}
.p-products__h2 + * {
  margin-top: 3.9rem;
}
@media screen and (max-width: 767px) {
  .p-products__h2 + * {
    margin-top: 2.4rem;
  }
}
.p-products__h2 span {
  display: inline-block;
}

.p-products__anchor {
  margin-top: 3rem;
}
.p-products__anchor .c-btn {
  width: 46.2rem;
}
@media screen and (max-width: 767px) {
  .p-products__anchor .c-btn {
    width: 100%;
  }
}
.p-products__anchor .c-btn::after {
  transform: translateY(-50%) rotate(90deg);
}

.p-products-head .c-secondary-title + * {
  margin-top: 1.9rem;
}
.p-products-head + * {
  margin-top: 7.4rem;
}
@media screen and (max-width: 767px) {
  .p-products-head + * {
    margin-top: 4rem;
  }
}

/* -------------------------------------------
    tab-nav
-------------------------------------------*/
@media screen and (max-width: 1023px) {
  .p-products-tab__nav .u-con--md {
    padding-inline: 2.4rem;
  }
}

@media screen and (max-width: 767px) {
  .p-products-tab__nav-inner {
    overflow-x: scroll;
    padding-bottom: 4px;
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__nav-inner::-webkit-scrollbar {
    height: 2px;
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__nav-inner::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__nav-inner::-webkit-scrollbar-track {
    background: #fff;
  }
}

.p-products-tab__nav-body {
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
}
@media screen and (max-width: 1023px) {
  .p-products-tab__nav-body {
    gap: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__nav-body {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
}

.p-products-tab__nav-item {
  width: 16rem;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border: 1px solid #707070;
  border-bottom: none;
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
  padding-block: 1.1rem 0.7rem;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .p-products-tab__nav-item {
    transition: 0.3s;
    transition-property: background-color, border-color, padding;
  }
  .p-products-tab__nav-item:hover {
    border-color: #e7e5dd;
    background-color: #e7e5dd;
    padding-block: 1.6rem;
  }
}
@media screen and (max-width: 1023px) {
  .p-products-tab__nav-item {
    width: calc(19% - 0.9rem);
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__nav-item {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    white-space: nowrap;
    padding-inline: 1.6rem;
    border-bottom: 1px solid #707070;
    border-radius: 0.6rem;
    padding-block: 1.2rem;
  }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .p-products-tab__nav-item {
    transition: 0.3s;
    transition-property: background-color, border-color, padding;
  }
  .p-products-tab__nav-item:hover {
    padding-block: 1.2rem;
  }
}
.p-products-tab__nav-item[role=tab][aria-selected=true] {
  background-color: #e7e5dd;
  border-color: #e7e5dd;
  padding-block: 1.6rem;
}
@media screen and (max-width: 767px) {
  .p-products-tab__nav-item[role=tab][aria-selected=true] {
    padding-block: 1.2rem;
  }
}

/* -------------------------------------------
    tab-contents
-------------------------------------------*/
.p-products-tab__contents {
  background-color: #e7e5dd;
  padding-block: 6rem;
}
@media screen and (max-width: 767px) {
  .p-products-tab__contents {
    margin-top: 2.4rem;
    padding-block: 4rem;
  }
}

.p-products-tab__contents-nav {
  gap: 1rem 0.8rem;
}
.p-products-tab__contents-nav + * {
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .p-products-tab__contents-nav + * {
    margin-top: 3.2rem;
  }
}

.p-products-tab__contents-nav-item {
  width: calc(25% - 0.6rem);
}
@media screen and (max-width: 1023px) {
  .p-products-tab__contents-nav-item {
    width: calc(33.3333333333% - 0.5333333333rem);
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__contents-nav-item {
    width: calc(50% - 0.4rem);
  }
}

.p-products-tab__contents-nav-link {
  height: 100%;
  min-height: 8rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.43vw, 2rem);
  font-size: clamp(14px, 1.29vw, 1.8rem);
  font-weight: bold;
  line-height: 1.5;
  color: #282828;
  padding-inline: clamp(10px, 1.43vw, 2rem) clamp(6px, 0.86vw, 1.2rem);
  border: 2px solid #fff;
}
@media screen and (max-width: 767px) {
  .p-products-tab__contents-nav-link {
    font-size: 1.2rem;
    gap: 0.6rem;
    min-height: 5.6rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-products-tab__contents-nav-link {
    transition: 0.3s;
    transition-property: border-color;
  }
  .p-products-tab__contents-nav-link:hover {
    border-color: #282828;
  }
}
.p-products-tab__contents-nav-link::after {
  content: "";
  display: block;
  width: 1.4rem;
  aspect-ratio: 19/26;
  -webkit-mask: url(../images/icon/icon_arrow-user.svg) no-repeat center/contain;
          mask: url(../images/icon/icon_arrow-user.svg) no-repeat center/contain;
  background-color: #282828;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .p-products-tab__contents-nav-link::after {
    width: 1.1rem;
  }
}
.p-products-tab__contents-nav-link .icon {
  width: 4rem;
}
@media screen and (max-width: 767px) {
  .p-products-tab__contents-nav-link .icon {
    width: 3.2rem;
  }
}

.p-products-tab__sec-body + .p-products-tab__sec-body {
  margin-top: 6.4rem;
}
@media screen and (max-width: 767px) {
  .p-products-tab__sec-body + .p-products-tab__sec-body {
    margin-top: 4rem;
  }
}

.p-products-tab__sec-title {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-products-tab__sec-title {
    font-size: 2rem;
  }
}
.p-products-tab__sec-title .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.p-products-tab__sec-title .icon + * {
  margin-top: 1.6rem;
}
.p-products-tab__sec-title .icon.--lg {
  gap: 1rem;
}
.p-products-tab__sec-title .icon.--lg + * {
  margin-top: 0;
}
.p-products-tab__sec-title .icon.--lg .img {
  width: 9rem;
}
.p-products-tab__sec-title .icon::before, .p-products-tab__sec-title .icon::after {
  content: "";
  display: block;
  flex: 1;
  height: 0.2rem;
  background-color: #282828;
}
.p-products-tab__sec-title .img {
  width: 4rem;
}
@media screen and (max-width: 767px) {
  .p-products-tab__sec-title span {
    display: inline-block;
  }
}
.p-products-tab__sec-title + * {
  margin-top: 2.9rem;
}

.p-products-tab__flex {
  gap: 4rem 5rem;
}
.p-products-tab__flex.--02 {
  gap: 1rem;
}

.p-products-tab__item {
  background-color: #f1efe9;
  width: calc(50% - 2.5rem);
  padding: clamp(16px, 2.4vw, 3rem);
  display: grid;
  grid-template-columns: 40.8163265306% 1fr;
  grid-template-rows: -webkit-min-content 1fr;
  grid-template-rows: min-content 1fr;
  gap: 1.2rem clamp(16px, 2.14vw, 3rem);
  grid-auto-flow: row;
  grid-template-areas: "left info" "sec sec";
}
@media screen and (max-width: 1023px) {
  .p-products-tab__item {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__item {
    padding: 1.6rem;
    grid-template-columns: 38.7096774194% 1fr;
    grid-template-rows: auto auto;
    gap: 1.6rem;
  }
}
.p-products-tab__item.--02 {
  width: calc(50% - 0.5rem);
  -moz-column-gap: clamp(10px, 1.43vw, 2rem);
       column-gap: clamp(10px, 1.43vw, 2rem);
  grid-template-areas: "left info" "left sec";
}
@media screen and (max-width: 1023px) {
  .p-products-tab__item.--02 {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__item.--02 {
    grid-template-areas: "left info" "sec sec";
  }
}

.p-products-tab__item-info {
  grid-area: info;
}

.p-products-tab__item-h3 {
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .p-products-tab__item-h3 {
    font-size: 1.8rem;
  }
}
.p-products-tab__item-h3 + * {
  margin-top: clamp(5px, 0.71vw, 1rem);
}

.p-products-tab__logo {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .p-products-tab__logo {
    transition: 0.3s;
    transition-property: opacity;
  }
  .p-products-tab__logo:hover {
    opacity: 0.75;
  }
}
.p-products-tab__logo + * {
  margin-top: clamp(10px, 1.43vw, 2rem);
}
.p-products-tab__logo img {
  width: initial;
  height: initial;
}

.p-products-tab__item-sec {
  grid-area: sec;
}

.p-products-tab__item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}
@media screen and (max-width: 767px) {
  .p-products-tab__item-tags {
    gap: 0.8rem;
  }
}

.p-products-tab__item-tag {
  width: 6.8rem;
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
  padding-block: 0.5rem;
}
@media screen and (max-width: 1023px) {
  .p-products-tab__item-tag {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-products-tab__item-tag {
    width: 5.8rem;
    font-size: 1.3rem;
    padding-block: 0.3rem 0.5rem;
  }
}
.p-products-tab__item-tag.--sm {
  background-color: #9d9885;
}
.p-products-tab__item-tag.--md {
  background-color: #7e7a6a;
}
.p-products-tab__item-tag.--lg {
  background-color: #636156;
}

.p-products-tab__item-text {
  font-size: 1.6rem;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .p-products-tab__item-text {
    font-size: 1.4rem;
    line-height: 2;
  }
}

.p-products-tab__item-li {
  margin-top: clamp(8px, 1vw, 1.4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0 2em;
}

.p-products-tab__item-link {
  font-size: 1.6rem;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .p-products-tab__item-link {
    font-size: 1.4rem;
    line-height: 2;
  }
}
.p-products-tab__item-link::before {
  content: "►";
}
@media (hover: hover) and (pointer: fine) {
  .p-products-tab__item-link {
    transition: 0.3s;
    transition-property: color;
  }
  .p-products-tab__item-link:hover {
    color: #282828;
    font-weight: bold;
  }
}

.p-products-tab__item-left {
  grid-area: left;
}

@media (hover: hover) and (pointer: fine) {
  .p-products-tab__item-thumbnail {
    transition: 0.3s;
    transition-property: opacity;
  }
  .p-products-tab__item-thumbnail:hover {
    opacity: 0.75;
  }
}

.p-products-banner {
  margin-top: 10.4rem;
}
@media screen and (max-width: 767px) {
  .p-products-banner {
    margin-top: 4rem;
  }
}

.p-products-banner__body {
  max-width: 75rem;
  margin-inline: auto;
}

.p-products-banner__item + .p-products-banner__item {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-products-banner__item + .p-products-banner__item {
    margin-top: 1.6rem;
  }
}

.p-products-banner__link {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .p-products-banner__link {
    transition: 0.3s;
    transition-property: opacity;
  }
  .p-products-banner__link:hover {
    opacity: 0.8;
  }
}

/* ボーダー社製品のタイトル */
.feature-bodor .p-products-detail__feature-h3 {
  font-size: 1.4em;
  font-weight: bold;
  background: none;
  padding: 0;
  color: #000;
}

/* ボーダー社製品の左揃えタイトル */
.feature-bodor .p-products-detail__feature-h3.--left,
.feature-bodor .p-products-detail__feature-h3.--left span {
    text-align: left !important; /* 左揃えを強制 */
    font-weight: bold;           /* 太字 */
    font-size: 1.5em;            /* 必要に応じて調整 */
    background: none;            /* 背景色を削除 */
    display: block;              /* spanをブロック化 */
}

/* ボーダー社製品 各項目の上下スペース */
.feature-bodor .p-products-detail__head-body {
    margin-top: 2.5em;   /* セクション上部の余白 */
    margin-bottom: 2.5em; /* セクション下部の余白 */
}

.feature-bodor .p-products-detail__head-box {
    margin-bottom: 2em; /* 各項目テキスト下の余白 */
}

.feature-bodor .p-products-detail__head-image {
    margin-bottom: 2em; /* 画像下の余白 */
}

/* ===========================
   ボーダー社製品ページ画像統一
   縦長・横長問わず高さ332pxで統一
   高さは自動調整
=========================== */
.feature-bodor .p-products-detail__head-image img,
.p-products-detail__head-image img {
    width: auto;       /* 横幅は自動 */
    height: 332px;       /* 高さを統一 */
    display: block;     /* 不要な下余白を消す */
    margin: 0 auto;     /* センター配置 */
}

/* セクション間の上下スペースも確保 */
.p-products-detail__feature.feature-bodor {
    margin-top: 60px;
    margin-bottom: 60px;
}




/* -------------------------------------------
    nav
-------------------------------------------*/
@media screen and (max-width: 1023px) {
  .p-products-nav .u-con--md {
    padding-inline: 4rem;
  }
}

.p-products-nav__li {
  max-width: 98rem;
  margin-inline: auto;
  justify-content: center;
  gap: 4rem;
}
@media screen and (max-width: 1023px) {
  .p-products-nav__li {
    gap: 1.2rem 2.4rem;
  }
}

.p-products-nav__item {
  width: calc(33.3333333333% - 2.6666666667rem);
}
@media screen and (max-width: 1023px) {
  .p-products-nav__item {
    width: calc(33.3333333333% - 1.6rem);
  }
}
@media screen and (max-width: 767px) {
  .p-products-nav__item {
    width: 100%;
  }
}

.p-products-nav-link.c-btn {
  width: 100%;
  background-color: #e7e5dd;
  color: #282828;
  border-color: #e7e5dd;
  padding: 1.4rem 2rem;
}
.p-products-nav-link.c-btn::after {
  width: 2.3rem;
  -webkit-mask-image: url(../images/icon/icon_arrow02.svg);
          mask-image: url(../images/icon/icon_arrow02.svg);
  top: 50%;
  right: 1.3rem;
  background-color: #282828;
}
@media screen and (max-width: 1023px) {
  .p-products-nav-link.c-btn::after {
    width: 2rem;
    right: 0.8rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-products-nav-link.c-btn {
    transition: 0.3s;
    transition-property: color, background-color;
  }
  .p-products-nav-link.c-btn::after {
    transition: 0.3s;
    transition-property: background-color;
  }
  .p-products-nav-link.c-btn:hover {
    color: #fff;
    background-color: #282828;
  }
  .p-products-nav-link.c-btn:hover::after {
    background-color: #fff;
  }
}
@media screen and (max-width: 1023px) {
  .p-products-nav-link.c-btn {
    font-size: 1.6rem;
  }
}
.p-products-nav-link.c-btn.--current {
  background-color: #282828;
  color: #fff;
  border-color: #282828;
}
.p-products-nav-link.c-btn.--current::after {
  background-color: #fff;
}

.p-products-detail__head + * {
  margin-top: 7rem;
}
@media screen and (max-width: 767px) {
  .p-products-detail__head + * {
    margin-top: 4rem;
  }
}

.p-products-detail__head-body {
  flex-direction: row-reverse;
  gap: 5rem;
}
@media screen and (max-width: 1023px) {
  .p-products-detail__head-body {
    flex-direction: column;
    gap: 0;
  }
}

.p-products-detail__head-box {
  flex: 1;
}
@media screen and (max-width: 1023px) {
  .p-products-detail__head-box {
    display: contents;
  }
}
.p-products-detail__head-box .p-products__h2 {
  text-align: left;
}
@media screen and (max-width: 1023px) {
  .p-products-detail__head-box .p-products__h2 {
    order: 1;
  }
}
.p-products-detail__head-box .p-products__h2 + .p-products__text {
  margin-top: 2.4rem;
}
@media screen and (max-width: 1023px) {
  .p-products-detail__head-box .p-products__text {
    order: 3;
  }
}
.p-products-detail__head-box .p-products__text + * {
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-products-detail__head-box .p-products__text + * {
    margin-top: 1.6rem;
  }
}

.p-products-detail__head-video {
  width: 49.0740740741%;
}
@media screen and (max-width: 1023px) {
  .p-products-detail__head-video {
    order: 4;
  }
}
@media screen and (max-width: 767px) {
  .p-products-detail__head-video {
    width: 75.7142857143%;
    max-width: 30rem;
  }
}

.p-products-detail__head-link {
  aspect-ratio: 265/149;
  overflow: hidden;
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .p-products-detail__head-link img {
    transition: 0.3s;
    transition-property: transform;
  }
  .p-products-detail__head-link:hover img {
    transform: scale(1.1);
  }
}
.p-products-detail__head-link::after {
  content: "";
  width: 33.9622641509%;
  aspect-ratio: 90/64;
  background: url(../images/icon/icon_youtube.png) no-repeat center/contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-products-detail__head-image {
  width: 47.7876106195%;
}
@media screen and (max-width: 1023px) {
  .p-products-detail__head-image {
    order: 2;
    width: 80%;
    margin: 1.6rem auto 0;
  }
}

.p-products-detail__sec {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-products-detail__sec {
    margin-top: 6rem;
  }
}

.p-products-detail__feature-body {
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-products-detail__feature-body {
    row-gap: 1.6rem;
  }
}
.p-products-detail__feature-body + * {
  margin-top: 4rem;
}

.p-products-detail__feature-item {
  width: calc(33.3333333333% - 1.6666666667rem);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1023px) {
  .p-products-detail__feature-item {
    width: calc(50% - 1.25rem);
  }
}
@media screen and (max-width: 767px) {
  .p-products-detail__feature-item {
    width: 100%;
  }
}

.p-products-detail__feature-h3 {
  background-color: #282828;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 5.6rem;
}

.p-products-detail__feature-box {
  flex: 1;
  border: 1px solid #282828;
  border-top: none;
  padding: 1.2rem 1.5rem;
}

.p-products-detail__feature-li {
  max-width: 101rem;
  margin-inline: auto;
  gap: 2rem 3rem;
}
@media screen and (max-width: 767px) {
  .p-products-detail__feature-li {
    row-gap: 1.6rem;
  }
}

.p-products-detail__feature-li-item {
  width: calc(50% - 1.5rem);
  font-size: 1.6rem;
  font-weight: bold;
  color: #282828;
  border: 1px solid;
  border-left-width: 2rem;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .p-products-detail__feature-li-item {
    width: 100%;
  }
}

@media screen and (max-width: 1023px) {
  .p-products-detail__table-wrap {
    overflow-x: scroll;
    border: 1px solid #BFCED9;
    border-bottom: none;
  }
  .p-products-detail__table-wrap::-webkit-scrollbar {
    height: 2px;
  }
  .p-products-detail__table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
  }
  .p-products-detail__table-wrap::-webkit-scrollbar-track {
    background: #fff;
  }
}

.p-products-detail__table {
  width: 100%;
  min-width: 84rem;
}
.p-products-detail__table thead .p-products-detail__th {
  padding-block: 2.3rem;
}
.p-products-detail__table thead .p-products-detail__th:not(:first-child) {
  width: 27.4rem;
}
.p-products-detail__table tbody tr:nth-child(odd) .p-products-detail__th, .p-products-detail__table tbody tr:nth-child(odd) .p-products-detail__td {
  background-color: #e7e5dd;
}
.p-products-detail__table tbody .p-products-detail__th {
  padding-left: 3rem;
}
@media screen and (max-width: 1023px) {
  .p-products-detail__table tbody .p-products-detail__th {
    padding-inline: 1.6rem;
  }
}

.p-products-detail__th-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.1rem;
}
.p-products-detail__th-image img {
  width: 12.9rem;
}
.p-products-detail__th-image figcaption {
  text-align: center;
}

.p-products-detail__th,
.p-products-detail__td {
  font-size: 1.5rem;
  line-height: 1.5333333333;
  border: 1px solid #282828;
  padding-block: 1.7rem;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .p-products-detail__th,
.p-products-detail__td {
    padding-block: 1.2rem;
  }
}

.p-products-detail__th {
  font-weight: bold;
  text-align: left;
}
.p-products-detail__th:first-child {
  width: 30.3rem;
}
@media screen and (max-width: 767px) {
  .p-products-detail__th:first-child {
    width: 18rem;
  }
}

.p-products-detail__td {
  text-align: center;
}
.p-products-detail__td.--left {
  text-align: left;
}
.p-products-detail__td.--left p {
  max-width: 73.5rem;
  margin-inline: auto;
  padding-inline: 1.6rem;
}

.p-products-materials .p-products-nav {
  padding-top: 1rem;
}

.p-products-materials__sec {
  margin-top: 6rem;
}

.p-products-materials__table-wrap {
  max-width: 61.2rem;
  margin: 4rem auto 0;
}
@media screen and (max-width: 767px) {
  .p-products-materials__table-wrap {
    margin-top: 2.4rem;
  }
}
.p-products-materials__table-wrap + * {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-products-materials__table-wrap + * {
    margin-top: 1.6rem;
  }
}

.p-products-materials__table {
  width: 100%;
  border: 1px solid #282828;
}
.p-products-materials__table tr:nth-child(even) .p-products-materials__th, .p-products-materials__table tr:nth-child(even) .p-products-materials__td {
  background-color: #e7e5dd;
}

.p-products-materials__th,
.p-products-materials__td {
  font-size: 1.5rem;
  border: 1px solid #282828;
  padding-block: 1.7rem;
}
@media screen and (max-width: 767px) {
  .p-products-materials__th,
.p-products-materials__td {
    padding-block: 1.2rem;
  }
}

.p-products-materials__th {
  line-height: 2.2;
}
@media screen and (max-width: 767px) {
  .p-products-materials__th {
    line-height: 1.8;
  }
}
.p-products-materials__th:first-child {
  width: 23.5rem;
}
@media screen and (max-width: 767px) {
  .p-products-materials__th:first-child {
    width: 18rem;
  }
}

.p-products-materials__td {
  font-weight: bold;
  vertical-align: middle;
}
.p-products-materials__td:first-child {
  padding-left: 5rem;
}
@media screen and (max-width: 767px) {
  .p-products-materials__td:first-child {
    padding-left: 1.6rem;
  }
}
.p-products-materials__td:not(:first-child) {
  font-size: 2.2rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-products-materials__td:not(:first-child) {
    font-size: 1.8rem;
  }
}

.p-products-materials__att {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-size: 1.6rem;
  line-height: 1.875;
}

.p-products-materials__att-item {
  text-indent: -1em;
  padding-left: 1em;
}

.p-products-accessories .p-products-nav {
  padding-top: 1rem;
}

.p-products-accessories__sec {
  margin-top: 6rem;
  padding-block: 6rem;
}
@media screen and (max-width: 767px) {
  .p-products-accessories__sec {
    margin-top: 4rem;
  }
}
.p-products-accessories__sec.--bg {
  background-color: #f1efe9;
}

.p-products-accessories__body {
  gap: 3rem;
}

.p-products-accessories__item {
  width: calc(50% - 1.5rem);
  background-color: #fff;
  padding: 0 2rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-products-accessories__item {
    width: 100%;
  }
}

.p-products-accessories__image {
  width: 71.0909090909%;
  margin-inline: auto;
}
.p-products-accessories__image + * {
  margin: 0.6rem;
}

.p-products-accessories__h3 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #282828;
  text-align: center;
}
.p-products-accessories__h3 + * {
  margin-top: 0.9rem;
}


/* -------------------------------------------
    カスタマイズ
-------------------------------------------*/

/* 悩みバッジ */
.concern-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px; /* 行間/列間 */
  padding: 0;
  margin: 0;
  list-style: none;
}
.concern-badges li{
  list-style: none;
}
.concern-badges li span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;          /* 円の直径（PC）*/
  height: 200px;
  padding: 16px 18px;    /* テキストの余白 */
  text-align: center;
  line-height: 1.6;
  border-radius: 9999px; /* 完全な円 */
  background: #e7e5dd; /* 薄い色（ブランドに合わせて調整可）*/
  color: #1b2a3a;        /* 読みやすい濃いめの文字色 */
  font-weight: 800;
  box-sizing: border-box;
  word-break: keep-all;
}

/* 文字数が多い場合の可読性 */
@media (max-width: 960px){
  .concern-badges li span{
    width: 170px;
    height: 170px;
    padding: 14px;
  }
}
@media (max-width: 560px){
  .concern-badges{
    gap: 12px 14px;
    justify-content: center;
  }
  .concern-badges li span{
    width: 150px; /* スマホで少し小さめの円 */
    height: 150px;
    padding: 12px;
    font-size: 0.95rem;
  }
}


/* 下矢印 */
.p-custom__arrow {
  text-align: center;
  margin-top: 3.5rem;
}

.arrow-down {
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 55px solid #e7e5dd;
  margin-bottom: 2rem;
}

.p-custom__lead {
  font-size: 3rem;
  font-weight: bold;
  color: #333;
  text-align: center;
}


/* カスタマイズ事例写真 */

.p-custom__gallery {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
}

.p-custom__gallery img {
  width: 32%;
  height: auto;
  border-radius: 0px;
  background-color: #f8f8f8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  object-fit: cover;
  transition: transform 0.3s ease;
}

.p-custom__gallery img:hover {
  transform: scale(1.03);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .p-custom__gallery img {
    width: 100%;
  }
}



/* ご提案の進め方 */

.p-custom__proposal {
  margin-top: 5rem; /* セクション上にゆとりを作る */
  text-align: center;
}











/* 事例カード */

.p-custom__case {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 3rem;
  padding: 2rem;
  border-radius: 10px;
  background-color: #f9f9f7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.p-custom__case-img {
width: 100%;
max-width: 500px;
display: block;
}

.p-custom__case-img img {
  width: 100%;
  height: auto;
  border-radius: 0px;
  object-fit: cover;
}

.p-custom__case-text {
  display: flex;
  flex-direction: column;
}

.p-custom__case-text h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e7e5dd;
  display: inline-block;
  padding-bottom: 0.3rem;
}

.p-custom__case-text dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: 0.4rem;
  margin-bottom: 1rem;
}
.p-custom__case-text dt {
  font-weight: 600;
  color: #555;
}
.p-custom__case-text dd {
  margin: 0;
  color: #333;
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
  .p-custom__case {
    flex-direction: column;
  }
  .p-custom__case-img,
  .p-custom__case-text {
    max-width: 100%;
  }
}

/* 詳しく見るボタン */
.p-custom__btn {
  align-self: flex-end; /* ← これで右端へ */
  background-color: #000;
  color: #fff !important;
  padding: 0.8rem 2rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.p-custom__btn:hover {
  background-color: #333;
}

.p-custom__btn:hover {
  background-color: #333;   /* ホバー時：少し明るく */
  transform: translateY(-2px);
}


/* 事例カード内ボタンを強制的に白文字に */
.p-custom__case .p-custom__btn,
.p-custom__case .p-custom__btn:link,
.p-custom__case .p-custom__btn:visited {
  display: inline-block;
  background-color: #000;
  color: #fff !important;   /* ← 上書き対策 */
  padding: 0.8rem 2rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .3s ease, transform .2s ease;
}

.p-custom__case .p-custom__btn:hover,
.p-custom__case .p-custom__btn:active,
.p-custom__case .p-custom__btn:focus {
  background-color: #333;
  color: #fff !important;   /* ← hover時も白を維持 */
  transform: translateY(-2px);
  outline: none;
}

/* 中に <span> や <svg> を入れている場合の保険 */
.p-custom__case .p-custom__btn * { color: #fff !important; fill: #fff !important; }




.p-custom__note {
  text-align: center;
  margin-top: 4rem; /* ここで余白を調整 */
  font-size: 2rem;
 }


/* -------------------------------------------*/




/* -------------------------------------------*/