@charset "UTF-8";
/* ---------------------------------------------
アニメーション
-----------------------------------------------*/
.fadeRightTrigger,
.fadeLeftTrigger,
.fadeUpTrigger, .fadeInTrigger {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  backface-visibility: hidden;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
  backface-visibility: hidden;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
  backface-visibility: hidden;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  backface-visibility: hidden;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.delay02 {
  animation-delay: 0.2s;
}

.delay04 {
  animation-delay: 0.4s;
}

.delay06 {
  animation-delay: 0.6s;
}

.delay08 {
  animation-delay: 0.8s;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  font-family: source-han-sans-japanese, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.6em;
  line-height: 1.6;
  color: #333;
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 767px) {
  body {
    min-width: auto;
  }
}

input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  border: none;
  box-sizing: border-box;
}
input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}
input[type=submit]::focus,
input[type=button]::focus {
  outline-offset: -2px;
}

img {
  border: 0;
  vertical-align: bottom;
  width: 100%;
  height: auto;
  /*image-rendering: -webkit-optimize-contrast;*/
}
.safari img {
  image-rendering: inherit;
}

/* mouseover
--------------------------------------------------*/
@media screen and (min-width: 768px) {
  .over:hover {
    opacity: 0.6;
    transition: opacity 0.3s;
  }
}
label {
  cursor: pointer;
}

/* link
--------------------------------------------------*/
a {
  display: block;
  color: #333;
  transition: 0.3s;
  will-change: transform, opacity;
}
a:link, a:active, a:visited {
  text-decoration: none;
}
a:focus {
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: none;
    /*opacity: $opacity;*/
  }
}
a:hover {
  opacity: 0.7;
}

a[href*="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 450px) {
  a[href*="tel:"] {
    pointer-events: all;
  }
}

/* input
--------------------------------------------------*/
button {
  color: #333;
  transition: 0.3s;
  will-change: transform;
  letter-spacing: 0.05em;
}
button:focus {
  text-decoration: none;
}

.wrapper {
  width: 1000px;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .wrapper {
    width: 90%;
  }
}

.pc {
  display: block;
}

.sp, .ssp {
  display: none;
}

.pc-tb {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc, .ssp {
    display: none;
  }
  .sp, .pc-tb {
    display: block;
  }
}
@media screen and (max-width: 450px) {
  .sp, .ssp {
    display: block;
  }
  .pc-tb, .pc {
    display: none;
  }
}
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

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

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

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

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

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

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

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

dd {
  margin-left: 0;
}

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

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

address {
  font-style: inherit;
}

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

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

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

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

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

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

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

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

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

legend {
  padding: 0;
}

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

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

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

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

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

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

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

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

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

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

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

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

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

.ttl {
  color: #002199;
  text-align: center;
  font: 700 4rem/1.5 source-han-sans-japanese, sans-serif;
}
.ttl p {
  font-size: 2rem;
}
@media screen and (max-width: 450px) {
  .ttl {
    font-size: 3.2rem;
  }
  .ttl p {
    font-size: 1.6rem;
  }
}

footer {
  padding: 2.5rem 0 2rem;
  background-color: #002199;
}
@media screen and (max-width: 450px) {
  footer {
    padding: 2rem 0;
  }
}
footer .footer_container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  footer .footer_container {
    flex-direction: column;
    gap: 2rem;
  }
}
@media screen and (max-width: 450px) {
  footer .footer_container {
    gap: 1rem;
  }
}
footer .footer_container p,
footer .footer_container dt,
footer .footer_container dd,
footer .footer_container a {
  font-size: 1.4rem;
  color: #fff;
}
@media screen and (max-width: 767px) {
  footer .footer_container p,
  footer .footer_container dt,
  footer .footer_container dd,
  footer .footer_container a {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  footer .footer_container p svg,
  footer .footer_container dt svg,
  footer .footer_container dd svg,
  footer .footer_container a svg {
    width: 10px;
    height: 10px;
  }
}
footer .footer_container dl {
  display: flex;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  footer .footer_container dl {
    gap: 1.5rem;
  }
}
footer .footer_container dl dt {
  font-weight: 600;
}
footer .footer_container dl dd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}
footer .footer_container dl dd a {
  text-decoration: underline;
}
footer .footer_container dl dd svg {
  fill: #fff;
  vertical-align: middle;
}

.l-nav {
  display: none;
}
@media screen and (max-width: 450px) {
  .is-fixed .l-nav {
    opacity: 1;
    pointer-events: all;
  }
  .l-nav-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: spvw(100);
  }
  .l-nav__button {
    width: calc(100% - 3.5em);
    height: spvw(100);
    margin: 0 auto;
  }
  .l-nav__button a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #a79280;
    color: #ffffff;
    font-size: 2rem;
    letter-spacing: 0.1em;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88px;
  padding: 9px 1vw 9px 2vw;
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  background: #fff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 1080px) {
  .header {
    height: 7rem;
  }
}
@media screen and (max-width: 767px) {
  .header {
    height: 70px;
  }
}
@media screen and (max-width: 450px) {
  .header {
    height: 60px;
  }
}
.header .logo {
  width: 162px;
}
@media screen and (max-width: 767px) {
  .header .logo {
    width: 130px;
  }
}
.header .cta_container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.phone_btn {
  height: 7rem;
  border-radius: 14px 0px 0px 14px;
  background: linear-gradient(180deg, #0081CC 42.32%, #006098 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 1080px) {
  .phone_btn {
    height: 6rem;
  }
}
@media screen and (max-width: 767px) {
  .phone_btn {
    height: 55px;
    width: 5.5rem;
    border-radius: 10px 0px 0px 10px;
  }
}
@media screen and (max-width: 450px) {
  .phone_btn {
    width: 50px;
    height: 50px;
  }
}
.phone_btn .icon {
  width: 4rem;
  height: 4rem;
  margin-left: 2rem;
}
@media screen and (max-width: 1080px) {
  .phone_btn .icon {
    height: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .phone_btn .icon {
    margin: 0;
  }
}
.phone_btn .icon img {
  vertical-align: text-top;
}
@media screen and (max-width: 1080px) {
  .phone_btn .icon img {
    height: 3rem;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
.phone_btn .phone_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  padding-right: 2rem;
}
@media screen and (max-width: 767px) {
  .phone_btn .phone_inner {
    display: none;
  }
}
.phone_btn .phone_inner p {
  font: normal 600 1.2rem/1 source-han-sans-japanese, sans-serif;
  color: #fff;
}
.phone_btn .phone_inner p strong {
  font-size: 1.2rem;
}
.phone_btn .phone_inner .num {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-size: 2.8rem;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
  line-height: 1.1;
  color: #fff;
}
@media screen and (max-width: 1080px) {
  .phone_btn .phone_inner .num {
    font-size: 2.4rem;
  }
}

.mail_btn {
  height: 7rem;
  width: 12rem;
  border-radius: 0px 14px 14px 0px;
  background: linear-gradient(180deg, #EA0000 29.99%, #930000 100%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media screen and (max-width: 1080px) {
  .mail_btn {
    height: 6rem;
  }
}
@media screen and (max-width: 767px) {
  .mail_btn {
    border-radius: 0px 10px 10px 0px;
    height: 5.5rem;
    width: 5.5rem;
  }
}
@media screen and (max-width: 450px) {
  .mail_btn {
    width: 50px;
    height: 50px;
  }
}
.mail_btn svg {
  vertical-align: middle;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
@media screen and (max-width: 1080px) {
  .mail_btn svg {
    height: 2rem;
  }
}
.mail_btn p {
  font: 700 1.4rem/1.1 source-han-sans-japanese, sans-serif;
  color: #fff;
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  .mail_btn p {
    display: none;
  }
}

/*-------------------------------------------
/
/    FV
/
-------------------------------------------*/
.fv {
  margin-top: 88px;
  position: relative;
  overflow: hidden;
  height: 47.9166666667vw;
  background: url(../images/kv_bg.jpg) 0/cover no-repeat;
}
@media screen and (max-width: 767px) {
  .fv {
    height: 55vh;
    margin-top: 7rem;
  }
}
@media screen and (max-width: 450px) {
  .fv {
    height: 90vh;
    margin-top: 6rem;
  }
}
.fv .fv_txt {
  width: 84.0972222222vw;
  max-width: 1200px;
  top: 5%;
  z-index: 10;
  left: 48%;
  transform: translateX(-50%);
  position: absolute;
}
@media screen and (max-width: 767px) {
  .fv .fv_txt {
    width: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 450px) {
  .fv .fv_txt {
    width: 97%;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
  }
  .fv .fv_txt img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}

/*-------------------------------------------
/
/    こんなお悩みを抱えています
/
-------------------------------------------*/
.onayami {
  background: url(../images/oyanami_bg.jpg) 0/cover no-repeat;
  padding: 8rem 0 0;
}
@media screen and (max-width: 767px) {
  .onayami {
    padding: 6.4rem 2rem 0;
  }
  .onayami .wrapper {
    width: 95%;
  }
}
@media screen and (max-width: 450px) {
  .onayami {
    padding: 4rem 0 0;
  }
}
.onayami .onayami_ttl {
  background: #f7f7fa;
  border-radius: 1rem 1rem 0 0;
}
@media screen and (max-width: 767px) {
  .onayami .onayami_ttl {
    border-radius: 2rem 2rem 0 0;
  }
}
.onayami .onayami_contents {
  background: #f7f7fa;
}
.onayami .onayami_contents .onayami_img {
  width: 89%;
  margin: -10px auto 0;
}
@media screen and (max-width: 450px) {
  .onayami .onayami_contents .onayami_img {
    width: 95%;
  }
}

.triangle {
  filter: drop-shadow(0px 15px 6px rgba(0, 0, 0, 0.13));
}
@media screen and (max-width: 450px) {
  .triangle {
    filter: drop-shadow(0px 8px 6px rgba(0, 0, 0, 0.13));
    width: 95%;
  }
}

.omakase {
  background: url(../images/omakase_bg.jpg) 0/cover no-repeat;
}
@media screen and (max-width: 450px) {
  .omakase .wrapper {
    width: 95%;
  }
}
.omakase .omakase_contents {
  background: #fff;
  padding-bottom: 1rem;
  position: relative;
}
.omakase .omakase_contents::after {
  content: "";
  width: 30rem;
  height: 303px;
  background: url(../images/omakase_img.png) 0/contain no-repeat;
  position: absolute;
  top: 5rem;
  right: -7rem;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .omakase .omakase_contents::after {
    right: -1rem;
    width: 18rem;
    height: 18rem;
  }
}
@media screen and (max-width: 450px) {
  .omakase .omakase_contents::after {
    top: 1rem;
    right: 0;
    width: 15rem;
    height: 15rem;
  }
}
.omakase .omakase_contents .omakase_ttl {
  width: 74%;
  margin: 2rem auto 0;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 450px) {
  .omakase .omakase_contents .omakase_ttl {
    margin-top: 50px;
    width: 87%;
  }
}
.omakase .omakase_contents .omakase_txt {
  text-align: center;
  font-weight: 600;
  margin-top: 1.4rem;
}
.omakase .omakase_contents .omakase_txt strong {
  font-weight: 900;
  color: #002199;
}
.omakase .omakase_contents .arrow_img {
  width: 54px;
  margin: 2.2rem auto 0;
}
.omakase .omakase_mainimg {
  width: 95%;
  max-width: 1260px;
  margin: 0 auto;
}
@media screen and (max-width: 450px) {
  .omakase .omakase_mainimg {
    width: 100%;
  }
}

/*-------------------------------------------
/
/    屋根対策説明 explane
/
-------------------------------------------*/
.explane {
  padding: 8rem 0;
  background: url(../images/explane_bg.jpg) 0/cover no-repeat;
}
@media screen and (max-width: 767px) {
  .explane {
    padding: 6.4rem 0;
  }
}
@media screen and (max-width: 450px) {
  .explane {
    padding: 4rem 0 6rem;
  }
}
.explane .wrapper {
  max-width: 1025px;
}
.explane .explane_ttl {
  width: 92rem;
  max-width: 92rem;
  min-width: 700px;
  width: 63.8888888889vw;
  margin: 0 auto;
  position: absolute;
  z-index: 10;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .explane .explane_ttl {
    min-width: auto;
    width: 90%;
  }
}
@media screen and (max-width: 450px) {
  .explane .explane_ttl {
    top: -2rem;
  }
}
.explane .explane_contents {
  background: #fff;
  position: relative;
  margin-top: 8rem;
  padding: 3.7rem 2rem 5.6rem;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 450px) {
  .explane .explane_contents {
    margin-top: 4rem;
  }
}
.explane .explane_lead_container {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 450px) {
  .explane .explane_lead_container {
    align-items: flex-start;
  }
}
.explane .explane_lead_container .img {
  flex-basis: 32%;
}
@media screen and (max-width: 450px) {
  .explane .explane_lead_container .img {
    width: 40%;
    width: 20%;
    display: none;
  }
}
.explane .explane_lead_container .explane_txt {
  position: relative;
  flex-basis: 45%;
  padding: 3rem 2.8rem;
}
@media screen and (max-width: 450px) {
  .explane .explane_lead_container .explane_txt {
    width: 100%;
    padding: 3rem 2rem;
    margin: 0 auto;
    flex-basis: 100%;
  }
}
.explane .explane_lead_container .explane_txt .explane_headline {
  width: 28.3333333333vw;
  max-width: 408px;
  min-width: 314px;
}
@media screen and (max-width: 450px) {
  .explane .explane_lead_container .explane_txt .explane_headline {
    min-width: auto;
    width: 100%;
  }
}
.explane .explane_lead_container .explane_txt p {
  margin-top: 1.6rem;
}
@media screen and (max-width: 767px) {
  .explane .explane_lead_container .explane_txt p {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 450px) {
  .explane .explane_lead_container .explane_txt p {
    margin-top: 1rem;
  }
}
.explane .explane_lead_container .explane_txt::before, .explane .explane_lead_container .explane_txt::after {
  position: absolute;
  width: 35px;
  height: 35px;
  content: "";
}
@media screen and (max-width: 450px) {
  .explane .explane_lead_container .explane_txt::before, .explane .explane_lead_container .explane_txt::after {
    width: 25px;
    height: 25px;
  }
}
.explane .explane_lead_container .explane_txt::before {
  border-right: solid 6px #0081cc;
  border-top: solid 6px #0081cc;
  top: 0;
  right: 0;
}
.explane .explane_lead_container .explane_txt::after {
  border-left: solid 6px #0081cc;
  border-bottom: solid 6px #0081cc;
  bottom: 0;
  left: 0;
}
.explane .explane_chart {
  background: url(../images/explane_bg02.png) repeat, #f6f7f9;
  border: 1px solid #54bae5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2.4rem 2rem;
  gap: 8px;
  max-width: 960px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .explane .explane_chart {
    gap: 5px;
  }
}
@media screen and (max-width: 450px) {
  .explane .explane_chart {
    flex-direction: column;
    justify-content: center;
    margin-top: 2.4rem;
  }
}
.explane .explane_chart .chart_box {
  flex-basis: 26%;
}
@media screen and (max-width: 767px) {
  .explane .explane_chart .chart_box {
    flex-basis: 31%;
  }
}
.explane .explane_chart .chart_box .img {
  margin-bottom: 1.7rem;
}
.explane .explane_chart .chart_box .underline {
  color: #063458;
  font-weight: 500;
  line-height: 1.9;
  text-decoration-color: #063458;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  font-size: max(1.11vw, 14px);
}
@media screen and (max-width: 767px) {
  .explane .explane_chart .chart_box .underline {
    font-size: 1.4rem;
    line-height: 1.5;
    text-underline-offset: 4px;
  }
}
.explane .explane_chart .chart_box .underline strong {
  font-weight: 900;
}
.explane .explane_chart .arrow {
  flex-basis: 2.6%;
  margin-top: 9rem;
}
.explane .explane_chart .arrow img {
  height: 46px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 450px) {
  .explane .explane_chart .arrow {
    transform: rotate(90deg);
    margin-top: 0;
    margin: auto;
  }
}
.explane .kaiketsu {
  padding-top: 5rem;
  box-shadow: 0px 0px 20px 0px rgba(94, 0, 0, 0.2);
}
.explane .kaiketsu .explane_lead_container {
  flex-direction: row-reverse;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  .explane .kaiketsu .explane_lead_container {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 450px) {
  .explane .kaiketsu .explane_lead_container {
    flex-direction: column;
  }
}
.explane .kaiketsu .explane_lead_container .img {
  flex-basis: 39%;
}
.explane .kaiketsu .explane_lead_container .explane_txt {
  margin-top: 3rem;
  margin: 3rem 0 2rem;
}
@media screen and (max-width: 450px) {
  .explane .kaiketsu .explane_lead_container .explane_txt {
    margin: 0 0 2rem;
  }
}
.explane .kaiketsu .explane_lead_container .explane_txt::before {
  border-right: solid 6px #ff974c;
  border-top: solid 6px #ff974c;
  top: 0;
  right: 0;
}
.explane .kaiketsu .explane_lead_container .explane_txt::after {
  border-left: solid 6px #ff974c;
  border-bottom: solid 6px #ff974c;
  bottom: 0;
  left: 0;
}
.explane .kaiketsu .explane_chart {
  background: url(../images/explane_bg02.png) repeat, #fffeee;
  border: 1px solid #ffb05b;
}
.explane .kaiketsu .explane_chart .chart_box {
  flex-basis: 28%;
}
@media screen and (max-width: 767px) {
  .explane .kaiketsu .explane_chart .chart_box {
    flex-basis: 36%;
  }
}
.explane .kaiketsu .explane_chart .chart_box p {
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.8rem;
}
.explane .kaiketsu .explane_chart .chart_box p strong {
  color: #EA0000;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .explane .kaiketsu .explane_chart .chart_box p {
    font-size: 1.6rem;
  }
  .explane .kaiketsu .explane_chart .chart_box p strong {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 450px) {
  .explane .kaiketsu .explane_chart .chart_box p {
    text-align: center;
  }
}
.explane .explane_chart02 {
  position: relative;
}
.explane .explane_chart02 .hukidashi {
  position: absolute;
  background: url(../images/chart_hukidashi.png) 0/contain no-repeat;
  width: 155px;
  height: 155px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: #063458;
  line-height: 1.4;
  top: -1.5rem;
  right: 1.8rem;
}
@media screen and (max-width: 1000px) {
  .explane .explane_chart02 .hukidashi {
    width: 135px;
    height: 135px;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .explane .explane_chart02 .hukidashi {
    width: 115px;
    height: 115px;
    font-size: 1.2rem;
    right: 0;
  }
}
@media screen and (max-width: 450px) {
  .explane .explane_chart02 .hukidashi {
    top: auto;
    bottom: 7rem;
  }
}
.explane .marker {
  padding-bottom: 4px;
  background: linear-gradient(transparent 55%, #fffb7a 45%);
}
.explane .arrow_og {
  width: 42%;
  margin: 3rem auto;
}
@media screen and (max-width: 450px) {
  .explane .arrow_og {
    width: 90%;
  }
}
.explane .movie {
  width: 82%;
  margin: 3.2rem auto 0;
}
@media screen and (max-width: 450px) {
  .explane .movie {
    width: 100%;
  }
}
.explane .movie video {
  width: 100%;
}

/*-------------------------------------------
/
/    CTA
/
-------------------------------------------*/
.cta {
  background: url(../images/cta_bg.jpg) 0/cover no-repeat;
  padding: 10rem 2rem;
}
@media screen and (max-width: 450px) {
  .cta {
    padding: 8rem 2rem;
  }
}
.cta .wrapper {
  max-width: 900px;
  width: 95%;
}
@media screen and (max-width: 450px) {
  .cta .wrapper {
    width: 90%;
  }
}
.cta .cta_contents {
  background: #fff;
  padding: 6.4rem 4rem 4rem;
  position: relative;
  border-radius: 1rem;
  box-shadow: 0px 4.487px 4.487px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 450px) {
  .cta .cta_contents {
    padding: 11rem 2rem 4rem;
  }
}
.cta .cta_contents .cta_ttl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -15px;
  width: 58%;
}
@media screen and (max-width: 767px) {
  .cta .cta_contents .cta_ttl {
    width: 85%;
  }
}
@media screen and (max-width: 450px) {
  .cta .cta_contents .cta_ttl {
    width: 50%;
    top: -3rem;
  }
}
.cta .cta_contents .cta_head {
  width: 32.6388888889vw;
  max-width: 470px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .cta .cta_contents .cta_head {
    width: 65%;
  }
}
@media screen and (max-width: 450px) {
  .cta .cta_contents .cta_head {
    width: 100%;
  }
}
.cta .cta_btncontainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 2rem;
  gap: 2rem;
}
@media screen and (max-width: 450px) {
  .cta .cta_btncontainer {
    flex-direction: column;
    align-items: center;
  }
}
.cta .cta_btncontainer .cta_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  max-width: 380px;
}
.cta .cta_btncontainer .cta_box svg {
  vertical-align: middle;
}
@media screen and (max-width: 450px) {
  .cta .cta_btncontainer .cta_box {
    width: 100%;
  }
}
.cta .cta_btncontainer .cta_box .call {
  color: #073c8c;
}
.cta .cta_btncontainer .cta_box .phone_btn {
  font-size: min(1.94vw, 28px);
}
.cta .cta_btncontainer .cta_box .cta_btn {
  width: 100%;
  border-radius: 1rem;
}
@media screen and (max-width: 767px) {
  .cta .cta_btncontainer .cta_box .phone_inner {
    display: block;
  }
  .cta .cta_btncontainer .cta_box .phone_inner .num {
    font-size: 2rem;
  }
}
.cta .cta_btncontainer .cta_box.mail .call {
  color: #EA0000;
}
.cta .cta_btncontainer .cta_box.mail .mail_btn {
  flex-direction: row;
  gap: 8px;
}
.cta .cta_btncontainer .cta_box.mail .mail_btn p {
  margin-top: 0;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .cta .cta_btncontainer .cta_box.mail .mail_btn p {
    font-size: 1.6rem;
    display: block;
  }
}
.cta .cta_btncontainer .cta_box.mail .mail_btn img {
  width: 2.4rem;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
}

/*--------------------------------------------*/
/*--------------------------------------------*/
/* コンテナのスタイル */
.case-slider-container {
  width: 100%;
  margin: 0 auto;
  padding: 12rem 0;
  background: url(../images/case_bg.jpg) 0/cover no-repeat;
}
@media screen and (max-width: 767px) {
  .case-slider-container {
    padding: 8rem 0;
  }
}
@media screen and (max-width: 450px) {
  .case-slider-container {
    padding: 6.4rem 0;
  }
}

.case-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  padding: 4rem 2rem;
  border: 1px solid #c4d3e9;
}
@media screen and (max-width: 450px) {
  .case-content {
    padding: 8px 1rem 4rem;
  }
}

/* メインスライダー */
.main-swiper {
  width: 100%;
  overflow: hidden;
  margin-top: 9rem;
}
@media screen and (max-width: 767px) {
  .main-swiper {
    margin-top: 6.4rem;
  }
}
@media screen and (max-width: 767px) {
  .main-swiper {
    margin-top: 4rem;
    overflow-x: hidden;
  }
}

/* 各案件のメイン画像スライダー */
.case-main-swiper {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
@media screen and (min-width: 1600px) {
  .case-main-swiper {
    height: 268px;
  }
}
@media screen and (max-width: 450px) {
  .case-main-swiper {
    height: 180px;
  }
}
.case-main-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
}
.case-main-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.3s;
}
.case-main-swiper .swiper-slide:hover img {
  transform: scale(1.05);
}
.case-main-swiper .swiper-slide.before::after {
  content: "";
  width: 86px;
  height: 28px;
  background: url(../images/before.png) 0/contain no-repeat;
  z-index: 10;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 450px) {
  .case-main-swiper .swiper-slide.before::after {
    width: 60px;
    height: 20px;
  }
}
.case-main-swiper .swiper-slide.after::after {
  content: "";
  width: 86px;
  height: 28px;
  background: url(../images/after.png) 0/contain no-repeat;
  z-index: 10;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 450px) {
  .case-main-swiper .swiper-slide.after::after {
    width: 60px;
    height: 20px;
  }
}
.case-main-swiper .swiper-slide.ing::after {
  content: "";
  width: 86px;
  height: 28px;
  background: url(../images/ing.png) 0/contain no-repeat;
  z-index: 10;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 450px) {
  .case-main-swiper .swiper-slide.ing::after {
    width: 60px;
    height: 20px;
  }
}

.case-item {
  background-color: #fff;
  overflow: hidden;
  padding: 1.5rem 1.5rem 5rem;
  border: 1px solid #c4d3e9;
}

/* メイン画像とビデオコンテナをrelativeにして擬似要素の配置を可能に */
.main-image-link,
.main-video-container {
  position: relative;
  display: block;
  height: 300px;
}
@media screen and (min-width: 1600px) {
  .main-image-link,
  .main-video-container {
    height: 268px;
  }
}
@media screen and (max-width: 450px) {
  .main-image-link,
  .main-video-container {
    height: 180px;
  }
}
.main-image-link video,
.main-video-container video {
  width: 100%;
  height: 300px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (min-width: 1600px) {
  .main-image-link video,
  .main-video-container video {
    height: 268px;
  }
}
@media screen and (max-width: 450px) {
  .main-image-link video,
  .main-video-container video {
    height: 180px;
  }
}

/* サムネイルエリアのスタイル */
.case-content .case-thumb-swiper {
  width: 100%;
  height: 150px;
}
@media screen and (max-width: 450px) {
  .case-content .case-thumb-swiper {
    height: 270px;
  }
}
.case-content .case-thumb-swiper .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  transform: none !important; /* Swiperの変形を無効化 */
  transition: none !important; /* Swiperのアニメーションを無効化 */
  height: auto;
}
@media screen and (max-width: 767px) {
  .case-content .case-thumb-swiper .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 450px) {
  .case-content .case-thumb-swiper .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
.case-content .case-thumb-swiper .swiper-slide {
  width: 100%;
  height: 0;
  height: 70px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.7;
}
.case-content .case-thumb-swiper .swiper-slide:hover {
  opacity: 0.9;
}
.case-content .case-thumb-swiper .swiper-slide.active {
  opacity: 1;
  box-shadow: 0 0 0 2px #4a90e2;
}
.case-content .case-thumb-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  display: block;
}
.case-content .case-thumb-swiper .swiper-slide.before::after {
  content: "";
  width: 45px;
  height: 15px;
  background: url(../images/before.png) 0/contain no-repeat;
  z-index: 10;
  position: absolute;
  bottom: 0;
  right: 0;
}
.case-content .case-thumb-swiper .swiper-slide.after::after {
  content: "";
  width: 45px;
  height: 15px;
  background: url(../images/after.png) 0/contain no-repeat;
  z-index: 10;
  position: absolute;
  bottom: 0;
  right: 0;
}
.case-content .case-thumb-swiper .swiper-slide.ing::after {
  content: "";
  width: 45px;
  height: 15px;
  background: url(../images/ing.png) 0/contain no-repeat;
  z-index: 10;
  position: absolute;
  bottom: 0;
  right: 0;
}
.case-content .case-thumb-swiper .thumb-slide {
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: opacity, transform;
  border: 2px solid transparent;
  overflow: hidden;
}
.case-content .case-thumb-swiper .thumb-slide:hover {
  opacity: 0.7;
}

/* 案件情報のスタイル */
.info_detail_01 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3.8rem;
}
@media screen and (max-width: 450px) {
  .info_detail_01 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }
}
.info_detail_01 h3 {
  font: 600 2.4rem/1.4 source-han-sans-japanese, sans-serif;
  color: #002199;
}
@media screen and (max-width: 450px) {
  .info_detail_01 h3 {
    font-size: 1.8rem;
  }
}
.info_detail_01 .place {
  background: #002199;
  color: #fff;
  padding: 4px 1.2rem 7px;
  font: 600 1.8rem/1 source-han-sans-japanese, sans-serif;
}
@media screen and (max-width: 450px) {
  .info_detail_01 .place {
    font-size: 1.4rem;
    padding: 4px 1rem;
  }
}

.case-info {
  margin-top: 0.4rem;
}
@media screen and (max-width: 450px) {
  .case-info {
    margin-top: 1.4rem;
  }
}
.case-info dl {
  display: flex;
  color: #002199;
  margin-top: 0.8rem;
  font-size: 1.8rem;
  gap: 3.6rem;
  font-weight: 700;
}
@media screen and (max-width: 450px) {
  .case-info dl {
    font-size: 1.4rem;
    gap: 1rem;
  }
}
@media screen and (max-width: 450px) {
  .case-info dl dt {
    flex-basis: 25%;
  }
}
.case-info dl dd {
  color: #333;
  font-weight: 600;
}
@media screen and (max-width: 450px) {
  .case-info dl dd {
    flex-basis: 75%;
  }
}
.case-info .info_detail {
  margin-top: 2rem;
}
@media screen and (max-width: 450px) {
  .case-info .info_detail {
    margin-top: 1rem;
  }
}

/* ナビゲーションボタンのスタイル */
.swiper-button-container {
  height: 40px;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  margin-top: 6.4rem;
}
@media screen and (max-width: 450px) {
  .swiper-button-container {
    margin-top: 4rem;
  }
}

.swiper-button-next,
.swiper-button-prev {
  position: static;
  width: 40px;
  height: 40px;
  font-size: 12px;
  bottom: 0;
  top: auto;
  transform: none;
  margin-top: 0;
}
.swiper-button-next img,
.swiper-button-prev img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 20px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  content: none;
  font-size: 18px;
  font-weight: bold;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: #fff;
}

/* スワイパーページネーション（ドット）のスタイル */
.swiper-pagination {
  top: auto;
  bottom: 0;
  position: static;
  width: -moz-fit-content !important;
  width: fit-content !important;
}
.swiper-pagination .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background-color: #e0e4f2;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #063458;
  opacity: 1;
}

/* YouTubeのレスポンシブ対応 */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  height: 300px; /* 最小高さを設定 */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* モーダル内の動画専用設定 */
#modal-video .video-wrapper {
  max-width: 90vw;
  max-height: 80vh;
  width: 800px; /* 固定幅を設定 */
  height: 450px; /* 固定高さを設定（16:9比率） */
  padding-bottom: 0; /* モーダル内では padding-bottom を無効化 */
  position: relative;
}

#modal-video .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* メインスライドの動画プレースホルダー */
.video-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.video-placeholder img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-play-button:hover {
  background: rgb(255, 0, 0);
  transform: translate(-50%, -50%) scale(1.1);
}

/* サムネイルの動画表示 */
.video-thumb-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.video-thumb-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.video-thumb-overlay .play-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.video-thumb-overlay span {
  font-size: 10px;
  font-weight: bold;
}

/* スライド内のビデオ調整 */
.swiper-slide.video {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

/* モーダル内の動画（既存のモーダルスタイルを継承） */
#modal-video {
  max-width: 100%;
  max-height: 80vh;
  display: none; /* 初期状態で非表示 */
  position: relative;
  z-index: 10;
  width: 100%;
  height: auto;
}

/* モーダル内の画像の表示制御を強化 */
#modal-image {
  display: none; /* 初期状態で非表示 */
  position: relative;
  z-index: 5; /* 動画より下に配置 */
}

/* モーダルコンテンツ内での表示優先順位を明確化 */
.modal-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 240px;
}

/* 動画表示時は画像を完全に隠す */
.modal-content.video-mode #modal-image {
  display: none !important;
  visibility: hidden;
}

/* 画像表示時は動画を完全に隠す */
.modal-content.image-mode #modal-video {
  display: none !important;
  visibility: hidden;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .video-play-button {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  .video-thumb-overlay .play-icon {
    font-size: 16px;
  }
  #modal-video .video-wrapper {
    width: 90vw;
    height: 50.625vw; /* 16:9 比率を維持 */
  }
}
/*--------------------------------------------*/
/*--------------------------------------------*/
.features {
  padding: 12rem 2rem;
  background: #f4faff;
}
@media screen and (max-width: 767px) {
  .features {
    padding: 8rem 2rem;
  }
}
@media screen and (max-width: 450px) {
  .features {
    padding: 8rem 0;
  }
}
.features .wrapper {
  max-width: 1160px;
  width: 95%;
}
@media screen and (max-width: 450px) {
  .features .wrapper {
    width: 90%;
  }
}
.features .features_head {
  background: url(../images/feature_head_bg.png) 0/contain no-repeat;
}
.features .features_head .feature_container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6rem;
}
@media screen and (max-width: 767px) {
  .features .features_head .feature_container {
    gap: 3rem;
  }
}
@media screen and (max-width: 450px) {
  .features .features_head .feature_container {
    flex-direction: column;
  }
}
.features .features_head .feature_container .feature_txt {
  flex-basis: 43%;
}
.features .features_head .feature_container .feature_txt h2 {
  font: 700 2.22vw/1.4 source-han-sans-japanese, sans-serif;
  font-size: min(2.22vw, 32px);
  margin-top: 3.2rem;
  color: #EA0000;
}
@media screen and (max-width: 767px) {
  .features .features_head .feature_container .feature_txt h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
}
@media screen and (max-width: 450px) {
  .features .features_head .feature_container .feature_txt h2 {
    margin-top: 1.4rem;
    font-size: 2.4rem;
    text-align: center;
  }
}
.features .features_head .feature_container .feature_txt h2 span {
  color: #333;
  font: 700 1.8vw/1.4 source-han-sans-japanese, sans-serif;
  font-size: min(1.8vw, 26px);
}
@media screen and (max-width: 767px) {
  .features .features_head .feature_container .feature_txt h2 span {
    font-size: 1.8rem;
  }
}
.features .features_head .feature_container .feature_txt h2 img {
  display: inline;
  width: 25.2083333333vw;
  margin-right: 1rem;
}
@media screen and (max-width: 450px) {
  .features .features_head .feature_container .feature_txt h2 img {
    width: 70%;
  }
}
.features .features_head .feature_container .imgbox {
  flex-basis: 45%;
}
.features .features_head .feature_container .imgbox img {
  border-radius: 20px;
  box-shadow: 0px 0px 13px 0px rgba(0, 33, 153, 0.2);
}
.features .features_head .feature_header_inner {
  margin: 8px auto 0;
  max-width: 930px;
  background: url(../images/feature_head_innerbg.png) 0/contain no-repeat;
  padding: 2rem;
  font: 700 1.8vw/1.3 source-han-sans-japanese, sans-serif;
  font-size: min(1.8vw, 26px);
  color: #002199;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .features .features_head .feature_header_inner {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 450px) {
  .features .features_head .feature_header_inner {
    line-height: 1.6;
    background: url(../images/feature_head_innerbg_sp.png) 0/contain no-repeat;
    padding: 2rem 1rem;
  }
}
.features .features_head .feature_header_inner strong {
  color: #EA0000;
}
.features .feature_contents {
  background: url(../images/feature01_bg.png) 0/cover no-repeat;
  background-position: bottom right;
  padding: 4rem 0 4rem 5rem;
  position: relative;
  max-width: 1080px;
  width: 92%;
  margin: 10rem 0 0 auto;
}
@media screen and (max-width: 767px) {
  .features .feature_contents {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 8rem auto;
    background: #fff;
    border-radius: 2rem 0 2rem 0;
    padding: 4rem;
    box-shadow: 0px 4px 9px 0px rgba(8, 100, 154, 0.3);
  }
}
@media screen and (max-width: 450px) {
  .features .feature_contents {
    width: 100%;
    padding: 4rem 2.4rem;
  }
}
.features .feature_contents .txtbox {
  flex-basis: 46%;
}
@media screen and (max-width: 767px) {
  .features .feature_contents .txtbox {
    display: contents;
    width: 90%;
    margin: 0 auto;
  }
}
.features .feature_contents .txtbox .num {
  width: 7.2vw;
  max-width: 104px;
  margin-top: 0;
  position: absolute;
  top: -3rem;
  top: -2.08vw;
}
@media screen and (max-width: 767px) {
  .features .feature_contents .txtbox .num {
    order: 0;
    width: 80px;
  }
}
@media screen and (max-width: 450px) {
  .features .feature_contents .txtbox .num {
    top: -6vw;
  }
}
.features .feature_contents .txtbox .feature_lead {
  font: 800 2.2vw/1.6 source-han-sans-japanese, sans-serif;
  font-size: min(2.22vw, 32px);
  color: #002199;
  margin-top: 1.6vw;
}
@media screen and (max-width: 767px) {
  .features .feature_contents .txtbox .feature_lead {
    order: 1;
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 450px) {
  .features .feature_contents .txtbox .feature_lead {
    line-height: 1.4;
  }
}
.features .feature_contents .txtbox p {
  margin-top: 3.2rem;
  margin-top: 1.6vw;
  line-height: 1.9;
}
@media screen and (max-width: 767px) {
  .features .feature_contents .txtbox p {
    order: 3;
    width: 90%;
    margin: 2.8vw auto 0;
  }
}
@media screen and (max-width: 450px) {
  .features .feature_contents .txtbox p {
    margin-top: 2rem;
    line-height: 1.6;
  }
}
.features .feature_contents .txtbox .txt02 {
  margin-top: 1.25vw;
  margin-top: 1.8rem;
}
@media screen and (max-width: 767px) {
  .features .feature_contents .txtbox .txt02 {
    order: 4;
    width: 90%;
    margin: 1.6vw auto 0;
  }
}
@media screen and (max-width: 1080px) {
  .features .feature_contents .txtbox {
    width: 50%;
  }
  .features .feature_contents .txtbox p {
    font-size: 1.5rem;
  }
  .features .feature_contents .txtbox p br {
    display: none;
  }
}
.features .feature_contents .img {
  width: 36.1111111111vw;
  max-width: 520px;
  min-width: 360px;
  position: absolute;
  top: -36px;
  right: 0;
}
@media screen and (max-width: 767px) {
  .features .feature_contents .img {
    order: 2;
    position: static;
    width: 90%;
    margin: 2rem auto 0;
  }
}
@media screen and (max-width: 450px) {
  .features .feature_contents .img {
    min-width: auto;
    width: 100%;
  }
}
.features .feature_contents.reverse {
  background: url(../images/feature02_bg.png) 0/cover no-repeat;
  background-position: bottom left;
  margin: 8rem auto 0 0;
}
@media screen and (max-width: 767px) {
  .features .feature_contents.reverse {
    background: #fff;
    border-radius: 0 2rem 0 2rem;
    padding: 4rem;
    margin: 8rem auto 0;
    box-shadow: 0px 4px 9px 0px rgba(8, 100, 154, 0.3);
  }
}
.features .feature_contents.reverse .txtbox {
  width: 42%;
  margin: 0 9% 0 auto;
}
@media screen and (min-width: 1600px) {
  .features .feature_contents.reverse .txtbox {
    margin-right: 5%;
  }
}
.features .feature_contents.reverse .img {
  right: auto;
  left: 0;
}

/*=========================================*/
/*=========================================*/
.faq {
  background: #ebf1ff;
  padding: 12rem 0;
  /*アコーディオン全体*/
  /*アコーディオンタイトル*/
  /*アイコンの＋と×*/
  /*　closeというクラスがついたら形状変化　*/
  /*アコーディオンで現れるエリア*/
}
@media screen and (max-width: 450px) {
  .faq {
    padding: 6.4rem 0;
  }
}
.faq .accordion-area {
  max-width: 720px;
  margin: 6.4rem auto 0;
}
@media screen and (max-width: 450px) {
  .faq .accordion-area {
    margin: 4rem auto 0;
  }
}
.faq .title {
  border-radius: 12px 12px 0px 0px;
  background: linear-gradient(0deg, #3574e1 0%, #1450b8 69.23%);
  box-shadow: 0px 4px 9px 0px rgba(8, 100, 154, 0.3);
  position: relative; /*+マークの位置基準とするためrelative指定*/
  margin-top: 1.6rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: normal;
  padding: 1.4rem 2.8rem;
  transition: all 0.5s ease;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.8rem;
  font-weight: 600;
  color: #002199;
  padding-right: 7rem;
}
@media screen and (max-width: 450px) {
  .faq .title {
    padding-right: 5rem;
    font-size: 1.5rem;
    gap: 1rem;
    padding: 1.2rem 5rem 1.4rem 2rem;
  }
}
.faq .title span {
  color: #fff;
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-size: 3.2rem;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
  line-height: 1.1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 4rem;
  flex-basis: 5.6%;
  height: 4rem;
}
@media screen and (max-width: 450px) {
  .faq .title span {
    font-size: 2.4rem;
    min-width: 3.2rem;
    height: 3.2rem;
  }
}
.faq .title p {
  flex-basis: 95%;
  margin-top: 1rem;
  color: #fff;
}
@media screen and (max-width: 450px) {
  .faq .title p {
    margin-top: 0.5rem;
  }
}
.faq .title::before {
  position: absolute;
  content: "";
  width: 15px;
  height: 8px;
  background: url(../images/faq_icon.svg) 0/contain no-repeat;
  right: 3rem;
  transition: 0.3s;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 450px) {
  .faq .title::before {
    right: 2rem;
  }
}
.faq .title.close::before {
  transform: rotate(180deg);
}
.faq .box {
  display: none; /*はじめは非表示*/
  margin: 0 0 2.4rem;
  padding: 2rem 2rem 2.4rem 2.8rem;
  background: #fff;
  border: 1px solid #cbd8e0;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0px 4px 9px 0px rgba(8, 100, 154, 0.3);
}
@media screen and (max-width: 450px) {
  .faq .box {
    padding: 1rem 2rem 2rem 2rem;
  }
}
.faq .box .inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.6rem;
  padding-right: 4rem;
}
@media screen and (max-width: 450px) {
  .faq .box .inner {
    gap: 1rem;
    padding-right: 0;
  }
}
.faq .box .inner h4 {
  font: 700 1.6rem/1.6 source-han-sans-japanese, sans-serif;
  color: #002199;
  margin-top: 1.6rem;
}
.faq .box p {
  gap: 16px;
  font-weight: 600;
  flex-basis: 90%;
  margin-top: 10px;
}
@media screen and (max-width: 450px) {
  .faq .box p {
    font-size: 1.4rem;
  }
}
.faq .box span {
  color: #002199;
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-size: 3.2rem;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
  line-height: 1.1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 4rem;
  height: 4rem;
  flex-basis: 5.6%;
}
@media screen and (max-width: 450px) {
  .faq .box span {
    min-width: 3rem;
    font-size: 2.4rem;
    justify-content: flex-start;
  }
}

/*=========================================*/
/*=========================================*/
.wrap_form {
  padding: 10rem 0;
}
@media screen and (max-width: 767px) {
  .wrap_form {
    padding: 6rem 0;
  }
}
.wrap_form .area {
  margin-top: 8rem;
}
.wrap_form .area p {
  text-align: center;
  font-weight: 600;
}
@media screen and (max-width: 450px) {
  .wrap_form .area {
    margin-top: 6.4rem;
  }
}
.wrap_form .area dl {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 450px) {
  .wrap_form .area dl {
    flex-direction: column;
  }
}
.wrap_form .area dl .area_ttl {
  background: #cce0fd;
  padding: 5px 2rem 1rem;
  border: 1px solid #d8e1f1;
  color: #002199;
  font-weight: 700;
  text-align: center;
  color: #002199;
}
@media screen and (max-width: 450px) {
  .wrap_form .area dl .area_ttl {
    padding: 1rem;
    font-size: 1.4rem;
  }
}
.wrap_form .area dl .area_ttl span {
  display: block;
  font-size: 1rem;
  line-height: 1;
}
@media screen and (max-width: 450px) {
  .wrap_form .area dl .area_ttl span {
    line-height: 1.5;
  }
}
.wrap_form .area dl dd {
  padding: 1rem 2rem;
  color: #002199;
  background: #fff;
  border: 1px solid #d8e1f1;
}
@media screen and (max-width: 450px) {
  .wrap_form .area dl dd {
    font-size: 1.5rem;
  }
}
.wrap_form .area dl dd i {
  font: normal 500 1rem/1 source-han-sans-japanese, sans-serif;
  vertical-align: super;
}
.wrap_form form {
  max-width: 65rem;
  margin: 4rem auto 0;
}
@media screen and (max-width: 450px) {
  .wrap_form form {
    margin-top: 6.4rem;
  }
}
.wrap_form form table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .wrap_form form table th,
  .wrap_form form table td {
    display: block;
    width: 100% !important;
  }
}
.wrap_form form table th {
  position: relative;
  width: 30%;
  font-weight: 600;
  text-align: end;
  padding: 1.5rem 0;
  padding-right: 3.7rem;
}
@media screen and (max-width: 767px) {
  .wrap_form form table th {
    text-align: left;
    padding-bottom: 1rem;
  }
}
.wrap_form form table th.check-list {
  padding-top: 0;
}
.wrap_form form table th.check-list span {
  top: 0.5rem;
  top: 0;
}
.wrap_form form table th span {
  position: absolute;
  top: 1.8rem;
  right: 1.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #EA0000;
}
@media screen and (max-width: 767px) {
  .wrap_form form table th span {
    position: static;
    margin-left: 1rem;
  }
}
.wrap_form form table td {
  padding-bottom: 1.6rem;
}
@media screen and (max-width: 767px) {
  .wrap_form form table td {
    padding-bottom: 0;
  }
}
.wrap_form form table td div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .wrap_form form table td p {
    font-size: 1.4rem;
  }
}
.wrap_form form table td p a {
  text-decoration: underline;
}
.wrap_form form table td p svg {
  margin-top: 4px;
}
.wrap_form form table td p svg path {
  fill: #000;
}
.wrap_form form table td input,
.wrap_form form table td select,
.wrap_form form table td textarea {
  background-color: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 6px;
  box-shadow: 2px 2px 6px 0px rgba(19, 13, 62, 0.06) inset;
}
.wrap_form form table td input[type=text],
.wrap_form form table td input[type=email],
.wrap_form form table td input[type=tel],
.wrap_form form table td select,
.wrap_form form table td textarea {
  width: 100%;
  padding: 1.5rem 2rem;
}
.wrap_form form table td input::-moz-placeholder {
  color: #ccc;
}
.wrap_form form table td input::placeholder {
  color: #ccc;
}
.wrap_form form table td input[type=checkbox] {
  border: 1px solid #c8e2f0;
}
.wrap_form form table td textarea {
  margin-bottom: 3rem;
}
.wrap_form form table td .policy {
  font-size: 1.4rem;
}
.wrap_form form table td .policy a {
  margin-right: 5px;
  display: inline-block;
}
.wrap_form form table td .policy a svg {
  margin: 0 5px;
}
.wrap_form form table .select-wrap {
  position: relative;
  width: 25.5rem;
  margin-bottom: 1.6rem;
}
@media screen and (max-width: 767px) {
  .wrap_form form table .select-wrap {
    margin-bottom: 1rem;
  }
}
.wrap_form form table .select-wrap::before {
  content: "";
  width: 1.4rem;
  aspect-ratio: 1/1;
  background: url(../images/contact_icon.png) no-repeat center/contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
}
.wrap_form form .accept {
  justify-content: center;
  align-items: center;
}
.wrap_form form .accept input {
  width: 16px;
  height: 16px;
}
.wrap_form form .btn-submit {
  position: relative;
  display: flex;
  justify-content: center;
  background: #EA0000;
  color: #fff;
  width: 38.2rem;
  margin: 4rem auto;
  cursor: pointer;
}
@media screen and (max-width: 450px) {
  .wrap_form form .btn-submit {
    width: 80%;
  }
}
.wrap_form form .btn-submit:hover input[type=submit] {
  opacity: 0.7;
}
.wrap_form form .btn-submit svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -4rem;
}
@media screen and (max-width: 767px) {
  .wrap_form form .btn-submit svg {
    right: -2rem;
  }
}
.wrap_form form .btn-submit svg path {
  transition: all 0.3s;
}
.wrap_form form .btn-submit input[type=submit] {
  width: 100%;
  aspect-ratio: 1/0.14;
  background-color: #EA0000;
  border: 1px solid #EA0000;
  font-weight: 500;
  color: #fff;
  text-align: center;
  transition: all 0.3s;
}
.wrap_form .check-container {
  margin-bottom: 12px;
}
.wrap_form .check-container .check {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.wrap_form .check-container .check:checked + label::after {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}
.wrap_form .check-container label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.2s ease;
  color: #333;
}
.wrap_form .check-container label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid #dfe6ef;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.2s ease;
}
.wrap_form .check-container label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 10px;
  height: 16px;
  border: solid #002199;
  border-width: 0 4px 4px 0;
  opacity: 0;
  transform: scale(0) rotate(45deg);
  transition: all 0.2s ease;
}
.wrap_form .check-container.round label::before {
  border-radius: 50%;
}

/* モーダル - position + transform方式 */
/* モーダル */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  z-index: 9999;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90vh;
}
@media screen and (max-width: 450px) {
  .modal-content {
    width: 90%;
  }
}

.close-modal {
  position: absolute;
  top: -80px;
  right: 0;
  color: white;
  font-size: 35px;
  cursor: pointer;
  z-index: 10000;
}

#modal-image {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}

.thanks .wrapper {
  width: 80%;
  max-width: 700px;
  margin-top: 10rem;
}
.thanks h2 {
  font: 600 2.8rem/1.6 source-han-sans-japanese, sans-serif;
  color: #002199;
}
.thanks p {
  margin: 1.6rem auto;
  margin-top: 1.6rem;
}
.thanks .btn-wrap {
  color: #fff;
  background: #EA0000;
  width: 50%;
  padding: 1rem 2rem;
  text-align: center;
  margin: 4rem auto;
}