@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*/
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

strong {
  font-weight: var(--bold);
}

html {
  line-height: 1;
}

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

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,
blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: '';
  content: none;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

a img {
  border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
}

html,
body {
  font-family: var(--font-ja);
  line-height: 1;
  font-size: 10px;
  font-weight: var(--medium);
  color: var(--color-txt);
  letter-spacing: 0.025em;
}

a {
  display: inline-block;
  color: var(--color-txt);
  cursor: pointer;
}

a,
a:hover {
  text-decoration: none;
}

button {
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  letter-spacing: 0;
}

body {
  position: relative;
  margin: auto;
}

small {
  font-size: 70%;
}

li {
  list-style: none;
}

::placeholder {
  color: #8e8e8e;
}

input,
textarea,
select,
option,
button {
  color: var(--color-txt);
  font-family: var(--font-ja);
  font-weight: var(--medium);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
option:focus-visible {
  outline: none;
}

@media screen and (max-width: 1350px) {

  html,
  body {
    font-size: calc(1000vw / 1350);
  }
}

@media screen and (max-width: 750px) {

  html,
  body {
    font-size: calc(1000vw / 750);
  }
}

.sp {
  display: block !important;
}

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

.pc {
  display: none !important;
}

@media screen and (min-width: 751px) {
  .pc {
    display: block !important;
  }
}

body {
  counter-reset: sections boxesd;
  overflow-x: hidden;
}

body.anime.fadeIn.active {
  animation: fadeIn .5s .2s ease-out forwards;
}

/* ----------------------------------
common
---------------------------------- */
:root {
  --color-black: #000;
  --color-white: #fff;
  --color-orange: #f09529;
  --color-blue: #1665b1;
  --color-yellow: #f0da24;
  --color-gray: #f7f7f7;
  --color-txt: #263354;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --bold: 700;
  --black: 900;
  --font-ja: 'Noto Sans JP', sans-serif;
}

a {
  transition: .3s;
}

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

body.fixed {
  width: 100%;
  height: 100%;
  position: fixed;
}

main {}

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

.ttl-h2 {
  font-size: 5rem;
  font-weight: var(--bold);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
}

.txt {
  font-size: 2.4rem;
  line-height: 1.625;
  letter-spacing: 0.02em;
}

.in {
  padding: 0 4rem;
}

select,
input:not([type="checkbox"]),
textarea {
  width: 100%;
  padding: 1.2rem 2.4rem;
  background: var(--color-white);
  border: 0.2rem solid #dcdedb;
  border-radius: 1rem;
  font-size: 2.4rem;
  line-height: 1.7;
}

textarea {
  resize: vertical;
  min-height: 28.4rem;
}

label.checkbox {
  display: flex;
  align-items: center;
  font-size: 2.4rem;
}

input[type="checkbox"] {
  position: relative;
  width: 3.7rem;
  height: 3.7rem;
  border: 0.2rem solid #dcdedb;
  border-radius: 0.5rem;
  background: var(--color-white);
  margin: 0 1.3rem 0 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: 0.2s;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: var(--color-orange);
  border: none;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1.3rem;
  border-right: 0.3rem solid #ffffff;
  border-bottom: 0.3rem solid #ffffff;
  transform: translate(-50%, -50%) rotate(50deg);
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.7rem;
  max-width: 58rem;
  border-radius: 5rem;
  font-size: 3rem;
  font-weight: var(--bold);
}

@media screen and (min-width: 751px) {
  a:not(.button):hover {
    opacity: .6;
  }
}

@media screen and (min-width: 751px) {
  .in {
    max-width: 120rem;
    margin: 0 auto;
  }

  .ttl-h2 {
    font-size: 3.6rem;
  }

  .button {
    font-size: 2rem;
  }

  .txt {
    font-size: 1.6rem;
  }

  select,
  input:not([type="checkbox"]),
  textarea,
  label.checkbox {
    font-size: 1.8rem;
  }

  input[type="checkbox"] {
    width: 2.7rem;
    height: 2.7rem;
  }

  input[type="checkbox"]:checked:before {
    width: 0.7rem;
    height: 1rem;
    border-width: 0.2rem;
  }
}


/* ----------------------------------
header
---------------------------------- */
header {
  padding: 1rem;
  background-color: #FDFDFB;
}

header .logo {
  width: 18rem;
  margin: 0 auto;
}

@media screen and (min-width: 751px) {
  header .logo {
    width: 19rem;
  }
}

/* ----------------------------------
mv
---------------------------------- */
#mv {
  background-color: #FDFDFB;
}

.mv {
  width: 100%;
  height: auto;
  position: relative;
  background: #1665B1 url(../img/mv_img-sp.webp);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  font-family: "Zen Maru Gothic", sans-serif;
}

.mv__title {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: left;
  padding-top: 4rem;
  margin: 0 0 0 4rem;
  gap: .8rem;
  position: unset;
}

.mv__read img {
  width: 3.4rem;
  padding-top: 1.5rem;
}

h1 img {
  width: 13.6rem;
}

.mv-left {
  width: 100%;
  padding: 5rem 4rem 6rem;
  margin-top: 5.5vw;
  background-image: url(../img/mv-left-bg-sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  color: #fff;
  text-align: center;
  font-weight: 700;
  position: unset;
}

.mv-point {
  margin-bottom: 3rem;
}

.mv-point h2 {
  font-size: 4.6rem;
}

.mv-point h2 span {
  font-size: 3.5rem;
  padding-bottom: 1rem;
  display: inline-block;
}

.mv-point__wrap {}

.mv-point__list {
  width: 87%;
  padding: 2.8rem 1.3rem 2.5rem 5rem;
  margin: 2.5rem auto;
  border-radius: .5rem;
  font-size: 2.8rem;
  color: #0D3964;
  background-color: #fff;
}

.mv-point__list li {
  padding-left: 2.8rem;
  text-align: left;
  position: relative;
}

.mv-point__list li:nth-of-type(2) {
  padding: 1.2rem 0 1.2rem 2.8rem;
}

.mv-point__list li::before {
  content: "";
  display: inline-block;
  background-image: url(../img/check.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.3rem;
  height: 2.3rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.mv-point__img {}

.mv-point__img img {
  width: 80%;
  margin: 0 auto;
}

.mv-search {}

.mv-search__title {
  width: fit-content;
  padding-top: 4rem;
  margin: 0 auto;
  font-size: 4rem;
  position: relative;
}

.mv-search__title::before {
  content: "";
  display: inline-block;
  background-color: #fff;
  width: 89vw;
  height: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mv-search__title p {
  position: relative;
}

.mv-search__title p::after {
  content: "";
  display: inline-block;
  background-image: url(../img/icon-search.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  top: 50%;
  left: -4.2rem;
  transform: translateY(-50%);
}

.mv-search__text {
  width: fit-content;
  margin: 3.3rem auto 0;
  font-size: 3rem;
  position: relative;
}

.mv-search__text::before,
.mv-search__text::after {
  content: "";
  display: inline-block;
  background-color: #fff;
  width: .1rem;
  height: 4rem;
  position: absolute;
  top: 50%;
  border-radius: 5px;
}

.mv-search__text::before {
  right: -5%;
  transform: translateY(-50%) rotate(35deg);
}

.mv-search__text::after {
  left: -5%;
  transform: translateY(-50%) rotate(-35deg);
}

.search__list {
  margin-top: 2rem;
  font-size: 3.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 2rem;
}

.search__list li {}

.search__list li a {
  width: 100%;
  padding: 1rem 1.7rem 1.3rem 0;
  border-radius: 3rem;
  background-color: #fff;
  color: #484206;
  background: #fff030;
  border: solid 1px #968910;
  box-shadow: 0 .8rem 0 #c1b439;
}

.search__list li a p {
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

.search__list li a p::before {
  content: "";
  display: inline-block;
  background-image: url(../img/vector.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.5rem;
  height: 1.9rem;
  position: absolute;
  top: 60%;
  right: -18px;
  transform: translateY(-50%);
}

@media screen and (min-width: 751px) {
  .mv {
    max-width: 1440px;
    width: 100%;
    max-height: 690px;
    height: calc(100vh - 6.6rem);
    margin: 0 auto;
    position: relative;
    background: url(../img/mv_img.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: "Zen Maru Gothic", sans-serif;
  }

  .mv__title {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 1rem;
    position: absolute;
    top: -3rem;
    right: 5rem;
    padding-top: 0;
  }

  .mv__read img {
    width: 3.4rem;
    padding-top: .5rem;
  }

  h1 img {
    width: 13rem;
  }

  .mv-left {
    width: 42rem;
    padding: 3rem 0 4rem;
    margin: 0;
    border-radius: 1rem;
    background-image: url(../img/mv-left-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    font-weight: 700;
    position: absolute;
    bottom: 2rem;
    left: 5rem;
  }

  .mv-point {
    display: block;
  }

  .mv-point h2 {
    font-size: 3.2rem;
  }

  .mv-point h2 span {
    font-size: 2.4rem;
    padding-bottom: .6rem;
    display: inline-block;
  }

  .mv-point__list {
    width: 34rem;
    padding: 1.5rem;
    margin: 2rem auto;
    border-radius: .5rem;
    font-size: 1.8rem;
    color: #0D3964;
    background-color: #fff;
  }

  .mv-point__list li {
    padding-left: 1.8rem;
    text-align: left;
    position: relative;
  }

  .mv-point__list li:nth-of-type(2) {
    padding: 1rem 0 1rem 1.8rem;
  }

  .mv-point__list li::before {
    content: "";
    display: inline-block;
    background-image: url(../img/check.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .mv-point__img {
    margin-bottom: 2.5rem;
  }

  .mv-point__img img {
    width: 30rem;
    margin: 0 auto;
  }

  .mv-search {}

  .mv-search__title {
    width: fit-content;
    padding-top: 2.5rem;
    margin: 0 auto;
    font-size: 2.4rem;
    position: relative;
  }

  .mv-search__title::before {
    content: "";
    display: inline-block;
    background-color: #fff;
    width: 34rem;
    height: 1px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .mv-search__title p {
    position: relative;
  }

  .mv-search__title p::after {
    content: "";
    display: inline-block;
    background-image: url(../img/icon-search.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.2rem;
    height: 2.2rem;
    position: absolute;
    top: 50%;
    left: -3rem;
    transform: translateY(-50%);
  }

  .mv-search__text {
    margin: 2rem auto 0;
    font-size: 1.8rem;
  }

  .mv-search__text::before,
  .mv-search__text::after {
    width: .1rem;
    height: 2.7rem;
    top: 63%;
  }

  .mv-search__text::before {
    right: -5%;
    transform: translateY(-50%) rotate(35deg);
  }

  .mv-search__text::after {
    left: -5%;
    transform: translateY(-50%) rotate(-35deg);
  }

  .search__list {
    padding: 0 4rem;
    margin-top: 1.2rem;
    font-size: 1.8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    gap: 1.2rem 1.5rem;
  }

  .search__list li {}

  .search__list li a {
    width: 100%;
    padding: .6rem 0.8rem .8rem 0;
    border-radius: 2rem;
  }

.search__list li a {
  box-shadow: 0 .4rem 0 #c1b439;
}
  .search__list li a:hover {
    opacity: 1;
    background-color: #fffbc7;
    box-shadow: none;
    transform: translateY(0.2rem);
  }

  .search__list li a p::before {
    width: 1.6rem;
    height: 1rem;
    top: 62%;
    right: -23px;
  }
}

.fixed-menu {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.1rem;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #263354;
  padding: 4.4rem 0 4.1rem;
  z-index: 3;
}

.fixed-menu a {
  width: 22rem;
  padding: 8.2rem 0 1.7rem;
  border-radius: 1rem;
  text-align: center;
  /* font-size: 3.6rem; */
  font-size: 2.9rem;
  font-weight: var(--black);
  letter-spacing: 0.02em;
  color: var(--color-white);
  overflow: hidden;
}

.fixed-menu a.search {
  background: url(../img/icon-search.png) center top 1.8rem/4.9rem auto no-repeat, url(../img/fixed_search_bg.jpg) center/105% auto no-repeat;
  border: 0.2rem solid #114381;
}

.fixed-menu a.tel {
  background: url(../img/icon-tel.png) center top 1.8rem/4.9rem auto no-repeat, url(../img/fixed_tel_bg.jpg) center/105% auto no-repeat;
  border: 0.2rem solid #992d2d;
}

.fixed-menu a.contact {
  background: url(../img/icon-mail.png) center top 2.4rem/5.2rem auto no-repeat, url(../img/fixed_mail_bg.jpg) center/105% auto no-repeat;
  border: 0.2rem solid #0c768d;
}

.pc-only {
  display: none;
}

.sp-only {
  display: block;
}

@media screen and (min-width: 751px) {

  .fixed-menu {
    padding: 2.4rem 0 2.1rem;
  }

  .fixed-menu a {
    padding: 6.2rem 0 1.7rem;
    width: 31rem;
    font-size: 2.4rem;
  }

  .fixed-menu a.search {
    background: url(../img/icon-search.png) center top 1.8rem/3.3rem auto no-repeat, url(../img/fixed_search_bg.jpg) center/105% auto no-repeat;
  }

  .fixed-menu a.tel {
    background: url(../img/icon-tel.png) center top 1.8rem/3.3rem auto no-repeat, url(../img/fixed_tel_bg.jpg) center/105% auto no-repeat;
  }

  .fixed-menu a.contact {
    background: url(../img/icon-mail.png) center top 2rem/4rem auto no-repeat, url(../img/fixed_mail_bg.jpg) center/105% auto no-repeat;
  }

  .pc-only {
    display: block;
  }

  .sp-only {
    display: none;
  }
}



/* ----------------------------------
lead
---------------------------------- */
.lead {
  padding: 5.3rem 0 3.4rem;
  background: #fffeea;
  overflow: hidden;
}

.lead .in {
  position: relative;
}

.lead .in::after {
  position: absolute;
  bottom: -3.4rem;
  right: -4rem;
  content: "";
  display: block;
  width: 27.9rem;
  height: 47.3rem;
  background: url(../img/lead_img.png) center/contain no-repeat;
}

.lead .ttl-h2 {
  margin-bottom: 4.4rem;
  font-size: 4.8rem;
  letter-spacing: 0.02em;
  line-height: 1.16;
}

.lead .ttl-h2 span {
  position: relative;
}

.lead .ttl-h2 span::before,
.lead .ttl-h2 span::after {
  position: absolute;
  top: 50%;
  content: "";
  display: block;
  width: 0.48rem;
  height: 11.4rem;
  background: var(--color-txt);
}

.lead .ttl-h2 span::before {
  left: -6rem;
  transform: translateY(-50%) rotate(-22deg);
}

.lead .ttl-h2 span::after {
  right: -12rem;
  transform: translateY(-50%) rotate(22deg);
}

.lead .list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 1.6rem;
  padding-right: 14.8rem;
}

.lead .list li {
  width: calc(33.33% - (1.6rem * 2 / 3));
  background: #fcf8be;
  aspect-ratio: 1/1;
}

@media screen and (min-width: 751px) {
  .lead {
    overflow: hidden;
  }

  .lead .ttl-h2 {
    font-size: 3.6rem;
  }

  .lead .list {
    padding-right: 0;
  }

  .lead .list li {
    width: calc(11.11% - (1.6rem * 8 / 9));
  }

  .lead .ttl-h2 span::before,
  .lead .ttl-h2 span::after {
    height: 6rem;
  }

  .lead .in::after {
    content: none;
  }
}

/* ----------------------------------
links
---------------------------------- */
.links {
  padding: 6rem 0 7.5rem;
  background: var(--color-blue);
}

.links .ttl-h2 {
  padding-top: 8.9rem;
  margin-bottom: 5.4rem;
  background: url(../img/icon-search.png) center top/6.8rem auto no-repeat;
  color: var(--color-white);
}

.links .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.2rem 3.5rem;
}

.links .list li {
  width: calc(33.33% - (3.5rem * 2 / 3));
}

.links .list li a {
  display: block;
  width: 100%;
  padding: 1.8rem 0;
  background: var(--color-white);
  border-radius: 10rem;
  font-size: 3rem;
  font-weight: var(--bold);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-blue);
}

@media screen and (min-width: 751px) {
  .links .list li {
    width: calc(20% - (3.5rem * 4 / 5));
  }

  .links .list li a {
    font-size: 1.8rem;
  }

  .links .ttl-h2 {
    padding: 0;
    background: none;
  }

  .links .ttl-h2 span {
    padding: 0 0 0 7rem;
    background: url(../img/icon-search.png) left center / 5rem auto no-repeat;

  }
}

/* ----------------------------------
contents
---------------------------------- */
.contents {
  padding: 5.4rem 0 8.8rem;
}

.contents.kanto-area {
  padding-top: 10rem;
  background-color: #FDFDFB;
}

.contents .ttl-h2 {
  margin: 0 -2rem 4.8rem;
  padding-bottom: 3rem;
  border-bottom: 0.3rem solid var(--color-txt);
}

.contents:nth-of-type(odd) {
  padding-top: 6.5rem;
  background: var(--color-gray);
}

.contents .flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4.2rem;
}

.contents .flex.rank {
  display: flex;
  /* 下の2列部分 */
  gap: 4.2rem;
  background-color: #FDFDFB;
}

.contents .item {
  position: relative;
  width: 100%;
  padding: 1.1rem 0.8rem;
  box-shadow: 0 0 2.6rem rgb(211 211 211 / 0.42);
  background-color: var(--color-white);
}

.contents .item.type2 {}

.contents .item.type3 {
  width: 100%;
}

.contents .item .accordion-ttl {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.contents .item .accordion-ttl.number {
  position: relative;
}

.contents .item .accordion-ttl.number1::before,
.contents .item .accordion-ttl.number2::before,
.contents .item .accordion-ttl.number3::before {
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  width: 6.1rem;
  height: 4.9rem;
  position: absolute;
  top: 0;
  left: 0;
}

.contents .item .accordion-ttl.number1::before {
  background-image: url(../img/no1.svg);
}

.contents .item .accordion-ttl.number2::before {
  background-image: url(../img/no2.svg);
}

.contents .item .accordion-ttl.number3::before {
  background-image: url(../img/no3.svg);
}

.contents .item .accordion-ttl img {
  width: 14.9rem;
}

.contents .item .accordion-ttl .txt-wrap {
  width: calc(100% - 14.9rem - 1.1rem);
}

.contents .item .accordion-ttl .accordion-triger {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16.3rem;
  padding: 1.2rem 0;
  background: var(--color-yellow);
  font-size: 1.9rem;
  text-align: center;
  clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
  cursor: pointer;
  z-index: 2;
}

.contents .item .accordion-ttl .accordion-triger::after {
  position: absolute;
  top: 45%;
  right: 1.4rem;
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-top: 1px solid var(--color-txt);
  border-right: 1px solid var(--color-txt);
  transform: translateY(-50%) rotate(135deg);
  transition: .3s;
}

.contents .item .accordion-ttl .accordion-triger.open::after {
  top: 55%;
  transform: translateY(-50%) rotate(-45deg);
}

.contents .item .accordion-ttl .ttl-h3 {
  margin-bottom: 1.9rem;
  font-size: 3rem;
  font-weight: var(--bold);
  line-height: 1.3;
}

.contents .item .accordion-ttl .price {
  margin-bottom: 2rem;
  font-size: 4rem;
  font-weight: var(--bold);
}

.contents .item .accordion-ttl .price small {
  font-size: 2.4rem;
}

.contents .item .accordion-ttl .name {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 2.4rem;
}

.contents .item .accordion-ttl .name span:not(.value) {
  padding: 0.9rem 1.5rem;
  background: var(--color-txt);
  font-size: 2rem;
  color: var(--color-white);
}

.contents .item .accordion-contents {
  display: none;
  padding: 5rem 1.1rem 7rem;
}

.contents .item .accordion-contents h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
  margin-bottom: 2.4rem;
  font-size: 2.4rem;
  letter-spacing: 0.04em;
}

.contents .item .accordion-contents .list+h4 {
  margin-top: 4rem;
}

.contents .item .accordion-contents h4 span {
  white-space: nowrap;
}

.contents .item .accordion-contents h4::before,
.contents .item .accordion-contents h4::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-txt);
}

.contents .item .accordion-contents .list {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.4;
}


.contents .item .accordion-contents .button {
  position: relative;
  margin: 5rem auto 0;
  background: var(--color-orange);
  color: var(--color-white);
  border: 0.2rem solid #de7f22;
  box-shadow: 0 1rem 0 rgb(222 127 34 / 1);
}

.contents .item .accordion-contents .button::after {
  position: absolute;
  top: 50%;
  right: 5rem;
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  border-top: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width: 751px) {
  .contents .ttl-h2 {
    margin: 0 0 4.8rem;
  }

  .contents .flex.rank {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 下の2列部分 */
    gap: 4.2rem;
  }

  .contents .item {
    width: calc(50% - (4.2rem * 1 / 2));
  }

  .contents .item.type2 {
    grid-column: 1 / -1;
    width: calc(50% - (4.2rem * 1 / 2));
    margin: 0 auto;
  }

  .contents .item.type3 {
    width: 100%;
  }

  .contents .item .accordion-ttl.number1::before,
  .contents .item .accordion-ttl.number2::before,
  .contents .item .accordion-ttl.number3::before {
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    width: 5.1rem;
    height: 3.9rem;
    position: absolute;
    top: 0;
    left: 0;
  }

  .contents .item .accordion-ttl img {
    width: 12.9rem;
  }

  .contents .item .accordion-ttl .txt-wrap {
    width: calc(100% - 12.9rem - 1.1rem);
  }

  .contents .item .accordion-ttl .ttl-h3 {
    margin-bottom: 1rem;
    font-size: 2.2rem;
    line-height: 1.3;
  }

  .contents .item .accordion-ttl .price {
    margin-bottom: 1.5rem;
    font-size: 3rem;
  }

  .contents .item .accordion-ttl .price small {
    font-size: 1.8rem;
  }

  .contents .item .accordion-ttl .name {
    font-size: 2rem;
  }

  .contents .item .accordion-ttl .name span:not(.value) {
    padding: 0.5rem 1.5rem;
    font-size: 1.6rem;
  }

  .contents .item .accordion-contents h4 {
    font-size: 2rem;
  }

  .contents .item .accordion-contents .list {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  .contents .item .accordion-contents .button {
    max-width: 40rem;
    height: 7rem;
    box-shadow: 0 0.5rem 0 rgb(222 127 34 / 1);
  }

  .contents .item .accordion-contents .button:hover {
    box-shadow: none;
    transform: translateY(0.5rem);
  }

  .contents .item .accordion-ttl .accordion-triger {
    width: 14.3rem;
    padding: 1rem 0;
    font-size: 1.5rem;
  }
}

/* ----------------------------------
voice
---------------------------------- */
#voice {
  padding: 11.6rem 0 9rem;
  background: url(../img/voice_bg.png) left top/71rem auto no-repeat;
}

#voice .ttl-h2 {
  margin-bottom: 6.1rem;
}

#voice .flex {
  position: relative;
}

#voice .flex+.flex {
  margin-top: 7.3rem;
}

#voice .flex .flex-img {
  position: absolute;
  width: 22.1rem;
  height: 22.1rem;
  border-radius: 100%;
  overflow: hidden;
}

#voice .flex:nth-of-type(even) .flex-img {
  top: -0.7rem;
  left: 2.1rem;
}

#voice .flex:nth-of-type(odd) .flex-img {
  top: -0.7rem;
  right: 0.5rem;
}

#voice .flex .flex-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#voice .flex-txt {
  background: var(--color-white);
  box-shadow: 0 0 1rem rgb(211 211 211 / 0.42);
}

#voice .flex-txt .ttl-h3 {
  padding: 5rem 25.2rem 2.6rem 3.5rem;
  background: #114381;
  font-size: 3rem;
  font-weight: var(--bold);
  color: var(--color-white);
  line-height: 1.46;
  letter-spacing: 0.06em;
  box-shadow: 0 0 1rem rgb(211 211 211 / 0.42);
}

#voice .flex:nth-of-type(even) .flex-txt .ttl-h3 {
  padding: 5rem 2.1rem 2.6rem 26.6rem;
}

#voice .flex-txt .ttl-h3 small {
  display: block;
  font-size: 2.4rem;
}

#voice .flex-txt .txt {
  padding: 3.5rem;
}

@media screen and (min-width: 751px) {
  #voice .flex {
    max-width: 96rem;
    margin: 0 auto;
  }

  #voice .flex .flex-img {
    right: auto !important;
    top: -1.7rem !important;
    left: 2.1rem !important;
    width: 20rem;
    height: 20rem;
  }

  #voice .flex-txt .ttl-h3 {
    font-size: 2.4rem;
    padding: 5rem 2.1rem 5rem 24.6rem !important;
  }

  #voice .flex-txt .ttl-h3 small {
    font-size: 1.8rem;
  }
}

/* ----------------------------------
flow
---------------------------------- */
#flow {
  padding: 11.4rem 0 8.7rem;
  background: #fffeea;
}

#flow .ttl-h2 {
  margin-bottom: 6.5rem;
  font-weight: var(--black);
  letter-spacing: 0.02em;
}

#flow .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 5.5rem;
}

#flow .flex .item {
  position: relative;
  width: 100%;
  background: var(--color-white);
  box-shadow: 0 0 1rem rgb(211 211 211 / 0.42);
}

#flow .flex .item:not(:first-of-type)::before {
  position: absolute;
  left: 50%;
  top: -4.2rem;
  content: "";
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  border-right: 0.2rem solid #114381;
  border-bottom: 0.2rem solid #114381;
  transform: translateX(-50%) rotate(45deg);
}

#flow .flex .item .ttl-h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 9.4rem;
  padding: 0 2.8rem;
  background: #114381;
  font-size: 3rem;
  font-weight: var(--bold);
  color: var(--color-white);
  overflow: hidden;
}

#flow .flex .item .ttl-h3 span {
  padding: 0.8rem 2.4rem 0.7rem;
  border: 0.2rem solid var(--color-white);
  border-radius: 5rem;
  font-size: 2rem;
  font-weight: var(--medium);
  letter-spacing: 0;
  line-height: 1;
}

#flow .flex .item .ttl-h3::after {
  position: absolute;
  content: "";
  display: block;
  mix-blend-mode: plus-lighter;
}

#flow .flex .item:nth-of-type(1) .ttl-h3::after {
  top: -0.9rem;
  right: 0.5rem;
  width: 11.3rem;
  height: 11.3rem;
  background: url(../img/flow_icon1.png) center/contain no-repeat;
}

#flow .flex .item:nth-of-type(2) .ttl-h3::after {
  top: 1.4rem;
  right: 1.1rem;
  width: 11.5rem;
  height: 7.1rem;
  background: url(../img/flow_icon2.png) center/contain no-repeat;
}

#flow .flex .item:nth-of-type(3) .ttl-h3::after {
  top: 1.3rem;
  right: 1.9rem;
  width: 10rem;
  height: 8.9rem;
  background: url(../img/flow_icon3.png) center/contain no-repeat;
}

#flow .flex .item:nth-of-type(4) .ttl-h3::after {
  top: 0.8rem;
  right: 1.5rem;
  width: 10.9rem;
  height: 7.9rem;
  background: url(../img/flow_icon4.png) center/contain no-repeat;
}

#flow .flex .item:nth-of-type(5) .ttl-h3::after {
  top: 0.6rem;
  right: 2.2rem;
  width: 9.7rem;
  height: 7.9rem;
  background: url(../img/flow_icon5.png) center/contain no-repeat;
}

#flow .flex .item .txt {
  padding: 2.3rem 2.8rem 2.3rem 3.9rem;
}

#flow .flex .item .txt img {
  max-width: 48.6rem;
  margin-top: 1.4rem;
}

@media screen and (min-width: 751px) {
  #flow .flex .item {
    width: calc(33.33% - (5.5rem * 2 / 3));
  }

  #flow .flex .item .ttl-h3 {
    padding: 0 1.8rem;
    font-size: 2.2rem;
    gap: 1rem;
  }

  #flow .flex .item .ttl-h3 span {
    padding: 0.8rem 1.4rem 0.7rem;
    font-size: 1.5rem;
  }

  #flow .flex .item .txt {
    padding: 2.3rem 1.8rem 3.3rem 1.8rem;
  }

  #flow .flex .item:nth-of-type(1) .ttl-h3::after {
    right: 1rem;
    width: 7.3rem;
  }

  #flow .flex .item:nth-of-type(2) .ttl-h3::after {
    right: 2.1rem;
    width: 8.5rem;
  }

  #flow .flex .item:nth-of-type(3) .ttl-h3::after {
    top: 1rem;
    width: 7rem;
  }

  #flow .flex .item:nth-of-type(4) .ttl-h3::after {
    width: 7.9rem;
  }

  #flow .flex .item:nth-of-type(5) .ttl-h3::after {
    width: 6.7rem;
  }

  #flow .flex .item:not(:first-of-type)::before {
    left: -4.1rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
    transform: translateY(-50%) rotate(-45deg);
  }

  #flow .flex .item:nth-of-type(4)::before {
    content: none;
  }

  #flow .flex .item:last-of-type {
    width: calc(67.4% - (5.5rem * 1 / 2));
  }
}

/* ----------------------------------
faq
---------------------------------- */
#faq {
  padding: 9.6rem 0 7.6rem;
}

#faq .ttl-h2 {
  margin-bottom: 6.7rem;
}

#faq dl+dl {
  margin-top: 3rem;
}

#faq .accordion-ttl {
  cursor: pointer;
}

#faq .accordion-ttl,
#faq .accordion-contents {
  position: relative;
}

#faq .accordion-ttl span,
#faq .accordion-contents span {
  position: absolute;
  font-size: 4rem;
  line-height: 1;
}

#faq .accordion-ttl span {
  left: 3.8rem;
  top: 2.9rem;
}

#faq .accordion-contents span {
  top: 2.4rem;
  left: 2.4rem;
  color: #1665b1;
}

#faq .accordion-ttl {
  margin: 0 -2rem;
  padding: 3.6rem 6.2rem 3.6rem 10rem;
  background: var(--color-gray);
}

#faq .accordion-ttl::before,
#faq .accordion-ttl::after {
  position: absolute;
  top: 50%;
  right: 2.4rem;
  content: "";
  display: block;
  width: 2rem;
  height: 0.2rem;
  background: #263354;
  transform: translateY(-50%);
  transition: .3s;
}

#faq .accordion-ttl::after {
  transform: translateY(-50%) rotate(90deg);
}

#faq .accordion-ttl.open::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

#faq .accordion-contents {
  display: none;
  padding: 3rem 0 1.8rem 8rem;
}

@media screen and (min-width: 751px) {
  #faq .accordion-ttl {
    margin: 0;
    padding: 2.6rem 6.2rem 2.6rem 8rem;
  }

  #faq .accordion-ttl span,
  #faq .accordion-contents span {
    font-size: 2.6rem;
  }

  #faq .accordion-ttl span {
    left: 4.6rem;
    top: 2.3rem;
  }

  #faq .accordion-contents span {
    top: 2.6rem;
    left: 4.6rem;
  }
}

/* ----------------------------------
contact
---------------------------------- */
#contact {
  padding: 8.3rem 0 6.1rem;
  background: #1665b1;
}

#contact .ttl-h2 {
  margin-bottom: 7.8rem;
  color: var(--color-white);
}

#contact form {
  padding: 5.8rem 2rem;
  background: var(--color-white);
  border-radius: 2rem;
}

#contact table {
  width: 100%;
}

#contact tr {
  padding: 2.4rem 2rem;
  background: var(--color-gray);
}

#contact tr+tr {
  margin-top: 2.8rem;
}

#contact th {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding-left: 1.3rem;
  margin-bottom: 1.3rem;
  font-size: 2.4rem;
}

#contact th span {
  font-size: 1.8rem;
  font-weight: var(--bold);
  padding: 0.6rem 1.8rem 0.8rem;
  border-radius: 3rem;
  background: #dcdedb;
}

#contact th span.required {
  background: #1665b1;
  color: var(--color-white);
}

#contact tr.shimei .checkbox {
  margin-top: 2.5rem;
  margin-left: 1.7rem;
}

#contact tr.request {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#contact tr.request td {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3.2rem 2.8rem;
  margin-top: 4.7rem;
  padding-left: 1.3rem;
}

#contact tr.request td .checkbox {
  width: calc(50% - 1.4rem);
}

#contact .policy {
  padding: 3.3rem 1.4rem 3.3rem 2.2rem;
  margin-top: 2.2rem;
  box-shadow: inset 0 0 0.6rem rgb(0 0 0 / 0.08);
  max-height: 20.4rem;
  overflow-y: scroll;
}

#contact .policy::-webkit-scrollbar {
  display: none;
}

#contact .policy .txt {
  font-size: 2.1rem;
  font-weight: var(--regular);
}

#contact .consent {
  padding: 1.8rem;
  color: var(--color-white);
  margin-top: 3.5rem;
  background: #1665b1;
}

#contact .consent .checkbox {
  justify-content: center;
  cursor: pointer;
}

#contact .button {
  width: 100%;
  height: 12.6rem;
  margin: 4.9rem auto 0;
  background: #f0da24;
  border-radius: 7rem;
  border: 0.2rem solid #f4a353;
  color: var(--color-txt);
  box-shadow: 0 1.2rem 0 rgb(240 178 42 / 1);
  transition: .3s;
  cursor: pointer;
}

#contact .button span {
  position: relative;
}

#contact .button span::after {
  position: absolute;
  top: 50%;
  right: -2.8rem;
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  border-top: 1px solid var(--color-txt);
  border-right: 1px solid var(--color-txt);
  transform: translateY(-50%) rotate(45deg);
}

#contact select {
  background: var(--color-white) url(../img/select_arrow.png) center right 1.9rem/2.2rem auto no-repeat;
}

@media screen and (max-width: 750px) {

  #contact tr,
  #contact td {
    display: block;
  }
}

@media screen and (min-width: 751px) {
  #contact form {
    padding: 5.8rem 5rem;
  }

  #contact th {
    font-size: 1.8rem;
    width: 31rem;
    padding: 0;
    margin: 0;
  }

  #contact tr {
    display: flex;
    align-items: center;
    padding: 2.4rem 3rem !important;
  }

  #contact td {
    width: calc(100% - 31rem);
  }

  #contact th span {
    font-size: 1.5rem;
    padding: 0.4rem 1.5rem 0.6rem;
  }

  #contact tr.shimei .checkbox {
    margin-left: 0;
  }

  #contact tr.request {
    padding: 0;
  }

  #contact tr.request td {
    margin: 0;
    padding: 0;
  }

  #contact tr.request td .checkbox {
    width: calc(33.33% - (2.8rem * 2 / 3));
  }

  #contact .policy .txt {
    font-size: 1.4rem;
  }

  #contact .button {
    max-width: 40rem;
    height: 7rem;
    box-shadow: 0 0.7rem 0 rgb(240 178 42 / 1);
  }

  #contact .button:hover {
    box-shadow: none;
    transform: translateY(0.7rem);
  }
}

.confirm #contact,
.thanks #contact {
  padding-top: 17rem;
}

body.confirm,
body.thanks {
  padding: 0;
}

.confirm #contact td {
  margin-top: 4.7rem;
  padding-left: 1.3rem;
  font-size: 2.4rem;
  line-height: 1.4;
}

.confirm .txt,
.thanks .txt {
  margin: 0 0 6rem;
  text-align: center;
  color: var(--color-white);
}

@media screen and (min-width: 751px) {
  .confirm #contact td {
    font-size: 1.8rem;
    margin: 0;
    padding: 0;
    line-height: 1.6;
  }
}


footer {
  background: #263354;
  padding: 2.1rem 0;
}

footer .copy {
  text-align: center;
  color: var(--color-white);
  font-size: 2.6rem;
  letter-spacing: 0.06em;
  line-height: 2;
}

footer a[href^="tel:"] {
  text-decoration: none !important;
  color: var(--color-white) !important;
}

@media screen and (min-width: 751px) {
  footer .copy {
    font-size: 1.6rem;
  }
}



/* アニメーション */
.anime.slideUp,
.anime.fadeIn,
.fadeLoad {
  opacity: 0;
}

.fadeLoad {
  animation: fadeIn 1s .3s ease-out forwards;
}

.anime.slideUp.active {
  animation: slideUp .5s .05s ease-out forwards;
}

.anime.fadeIn.active {
  animation: fadeIn 1s .3s ease-out forwards;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }

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

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}