@charset "UTF-8";

/* =======================================
    01.Base（reset / base / typography）
======================================= */
/* ------ Reset -------*/
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}
html,body {
  -webkit-text-size-adjust: 100%;
}


/* ------ root -------*/
:root {
  /* color */
  --color-primary: #152d87;
  --color-secondary: #00529f;
  --color-bg-blue: #c5dbef;

  /* size */
  --size-10: min(0.962vw, 10px);
  --size-15: min(1.442vw, 15px);
  --size-18: min(1.731vw, 18px);
  --size-20: min(1.923vw, 20px);
  --size-25: min(2.404vw, 25px);
  --size-30: min(2.885vw, 30px);
  --size-40: min(3.846vw, 40px);
  --size-50: min(4.808vw, 50px);
  --size-60: min(5.769vw, 60px);
  --size-70: min(6.731vw, 70px);
  --size-80: min(7.692vw, 80px);
  --size-100: min(9.615vw, 100px);

  /* font */
  --font-txt-list: min(1.346vw, 1.4rem);
  --font-txt-small: min(1.635vw, 1.7rem);
  --font-txt-base: min(1.923vw, 2rem);
  --font-txt-large: min(2.404vw, 2.5rem);
  --font-ttl-topic: min(3.077vw, 3.2rem); 
  --font-ttl-sub: min(3.365vw, 3.5rem);
  --font-ttl-main: min(4.327vw, 4.5rem);
}
@media (max-width: 767px) {
  :root {
    /* size */
    --size-10: min(2.667vw, 12px);
    --size-15: min(4vw, 18px);
    --size-18: min(4.8vw, 22px);
    --size-20: min(5.333vw, 24px);
    --size-25: min(6.667vw, 30px);
    --size-30: min(8vw, 35px);
    --size-40: min(10.667vw, 46px);
    --size-50: min(13.333vw, 58px);
    --size-60: min(16vw, 70px);
    --size-70: min(18.667vw, 82px);
    --size-80: min(21.333vw, 92px);
    --size-100: min(26.667vw, 120px);

    /* font */
    --font-txt-list: min(2.933vw, 1.3rem); /* 1.1rem */
    --font-txt-small: min(3.2vw, 1.4rem); /* 1.2rem */
    --font-txt-base: min(3.467vw, 1.5rem); /* 1.3rem */
    --font-txt-large: min(3.733vw, 1.7rem); /* 1.4rem */
    --font-ttl-topic: min(4.8vw, 2.2rem); /* 1.8rem */
    --font-ttl-sub: min(5.333vw, 2.4rem); /* 2rem */
    --font-ttl-main: min(6.667vw, 2.9rem); /* 2.5rem */
  }
}


/* ------ Responsive -------*/
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}


/* ------ box -------*/
body {
  /* min-width: 1050px; */
  overflow-y: scroll;
  background-color: #fff;
}
body.fixed {
  position: fixed;
  width: 100%;
  left: 0;
}
@media screen and (max-width: 767px) {
  body {
    min-width: 100%;
    padding-bottom: 65px;
  }
}
#pageWrapper{
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
section {
  position: relative;
  width: 100%;
}
.container {
  box-sizing: border-box;
  max-width: 1040px; /* 1000px */
  margin: 0 auto;
  position: relative;
  padding: 0 var(--size-20);
  width: 100%;
}
.case{
  position: relative;
}
@media screen and (max-width: 767px) {
  .container {
    padding: 0;
    width: 90%;
  }
}


/* ------ text -------*/
html {
  font-size: 62.5%;
}
body, button{
  color: #333;
  font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--font-txt-base);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.05em;
}
main p{
  margin-bottom: 1.5em;
}
main p:last-child{
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  body, button{
    line-height: 1.7;
    letter-spacing: 0.02em;
  }
}


/* =======================================
  02. Utilities（margin / padding etc）
======================================= */
/* ------ padding -------*/
.section-pad{
  padding: var(--size-80) 0;
}
@media screen and (max-width: 767px) {
  .section-pad{
    padding: var(--size-40) 0;
  }
}
.case-mb{
  margin-bottom: var(--size-60);
}
@media screen and (max-width: 767px) {
  .case-mb{
    margin-bottom: var(--size-30);
  }
}


/* ------ margin -------*/
.mb_30{
  margin-bottom: var(--size-30);
}
.mb_40{
  margin-bottom: var(--size-40);
}
.mb_50{
  margin-bottom: var(--size-50);
}
.mb_60{
  margin-bottom: var(--size-60);
}
.mb_80{
  margin-bottom: var(--size-80);
}
@media screen and (max-width: 767px) {
  .mb_30{
    margin-bottom: var(--size-20);
  }
  .mb_40{
    margin-bottom: var(--size-25);
  }
  .mb_50{
    margin-bottom: var(--size-30);
  }
  .mb_60{
    margin-bottom: var(--size-35);
  }
  .mb_80{
    margin-bottom: var(--size-40);
  }
}


/* ------ 配置 -------*/
.center{
  text-align: center;
}


/* ------ fadeInUp -------*/
.fadeInUp{
  -webkit-transform: translateZ(0);
  /* display: none; */
  opacity: 0;
}
.fadeInUp.animated {
  -webkit-transform: translateZ(0);
  animation-name: animated;
  animation-duration: 1s;
  animation-timing-function: ease;
  position: relative;
  opacity: 1;
}
@keyframes animated {
  from {
    opacity: 0;
    bottom: -20px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}


/* =======================================
    03. Components（button / card / badge）
======================================= */
/* ------ title -------*/
/* .ttl_main */
.ttl_main{
  color: var(--color-primary);
  font-size: var(--font-ttl-main);
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: var(--size-50);
  text-align: center;
}
.ttl_main::after{
  content: '';
  background-color: var(--color-bg-blue);
  display: block;
  margin: var(--size-30) auto 0;
  height: min(0.481vw, 5px);
  width: min(15.577vw, 162px);
}
.ttl_main.white::after{
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .ttl_main{
    margin-bottom: var(--size-30);
  }
  .ttl_main::after{
    margin: var(--size-20) auto 0;
    height: 4px;
    width: 90px;
  }
}


/* marker */
.marker_gradation{
  background: linear-gradient(to right, #2b2c8f 0%, #c8203c 100%);
  color: #fff;
  padding: 0 var(--size-10);
  margin-bottom: 5px;
}
.marker_blue{
  background-color: var(--color-bg-blue);
  color: var(--color-primary);
  padding: 5px var(--size-15);
}
.marker_yellow{
  display: inline;
  position: relative;
  padding: 0 0.15em;
  background: linear-gradient(transparent 62%,#ffff00 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.marker_white{
  display: inline;
  position: relative;
  padding: 0 0.15em;
  background: linear-gradient(transparent 62%,#fff 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media screen and (max-width: 767px) {
  .marker_blue{
    padding: 0;
    line-height: 1.4;
  }
}


/* ------ background -------*/
.bg_gray{
  background-color: #f2f2f2;
  border-radius: var(--size-20);
  padding: var(--size-30);
}
@media (max-width: 767px){
  .bg_gray{
    border-radius: var(--size-15);
    padding: var(--size-20) var(--size-10);
  }
}


/* ------ btn -------*/
.link_box {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .link_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

/* btn */
.btn{
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
}
.btn img{
  width: min( 37.885vw, 394px);
}
a.btn.none{
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .btn:hover{
    text-decoration: none;
    transform:scale(0.95);
    transition: 0.3s all;
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .btn{
    margin: 0 auto 5.333vw;
    /* margin: 0 auto 20px; */
  }
  .btn:last-child{
    margin: 0 auto;
  }
  .btn img{
    width: 100%;
  }
}

/* a */
a{
  color: #333;
  text-decoration: none;
}
a:hover,a:focus,a:active{
  color: #333;
}
a.txt_link{
  color: var(--color-secondary);
  text-decoration: underline;
}
a.none{
  pointer-events: none;
}
@media screen and (min-width: 768px) {
   a:hover{
    text-decoration: none;
    opacity: 0.7;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  a.txt_link:hover{
    text-decoration: none;
    opacity: 1;
  }
}


/* ------ .list-------*/
.list li{
  list-style: disc;
}




/* ------ fixed -------*/
.btn_fixed{
  display: none;

  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
@media (max-width: 767px){
  .btn_fixed{
    display: block;
  }

  .btn_fixed.is-visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .btn_fixed{
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 5px 0px 10px rgba(0,0,0,0.2);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
  .btn_fixed img{
    display: block;
    margin: 0 auto 2px;
    width: min(96%, 399px);
  }
}


/* ------ cta_box -------*/
.cta_box{
  text-align: center;
}
.txt_download{
  margin-bottom: var(--size-18);
  width: min(36.154vw, 376px);
}
.btn_download{
  width: min(36.538vw, 380px);
}
@media screen and (max-width: 767px) {
  .txt_download{
    width: min(86%, 380px);
  }
  .btn_download{
    width: min(90%, 376px);
  }
}


/* ------ accordion -------*/
/* base (共通) */
.accordion{
  list-style: none;
}

/* .accordion_head */
.accordion_head{
  position: relative;
  width: 100%;
}

/* .accordion_trigger */
.accordion_trigger{
  border: 0;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  position: relative;
  box-sizing: border-box;
}
.accordion_mark{
  position: absolute;
  right: var(--size-30);
  top: var(--size-30);
  width: var(--size-30);
  height: var(--size-30);
  display: grid;
  place-items: center;
}
.accordion_mark::before{
  content: "";
  background-image: url(../img/icon_open.svg);
  background-size: 100% auto;
  display: inline-block;
  width: var(--size-30);
  height: var(--size-30);
}
.accordion_trigger[aria-expanded="true"] .accordion_mark::before{
  content: "";
  background-image: url(../img/icon_close.svg);
}
@media (max-width: 767px){
  .accordion_mark{
    top: var(--size-18);
    right: var(--size-18);
    width: var(--size-15);
    height: var(--size-15);
  }
  .accordion_mark::before{
    width: var(--size-15);
    height: var(--size-15);
  }
}

/* .accordion_panel */
.accordion_panel{
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
}
.accordion_content{
  box-sizing: border-box;
}


/* ------ .scroll_box-------*/
@media screen and (max-width: 767px) {
  .scroll_box{
    overflow-x: scroll;
  }
  .scroll_box img{
    max-width: max-content;
  }
}


/* =======================================
    04. Layout（header / footer / grid）
======================================= */
/* ------ header -------*/
.site_header{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border-radius: 100px;
  box-sizing: border-box;

  position: fixed;
  top: var(--size-10);
  left: 1%;
  width: 98%;
  z-index: 1000;
}
.header_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(1.852vw, 30px); /* 1620px */
  padding: 0 min(0.617vw, 10px) 0 min(1.852vw, 30px);/* 1620px */
  height: min(4.938vw, 80px); /* 1620px */
}
.h_left{
  display: flex;
  align-items: center;
  gap: min(1.852vw, 30px); /* 1620px */
}
@media screen and (max-width: 767px) {
  .site_header{
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    top: var(--size-15);
    left: auto;
    width: 100%;
  }
  .header_inner{
    height: auto;
    padding: 0 var(--size-15);
  }
}

/* .logo */
.logo, .logo img{
  width: min(24.519vw, 255px);
  display: block;
}
@media (max-width: 1620px){
  .logo, .logo img{
    width: min(15.741vw, 255px); /* 1620px */
  }
}
@media screen and (min-width: 768px) {
  .logo:hover{
    text-decoration: none;
    transform:scale(0.95);
    transition: 0.3s all;
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .logo, .logo img{
    width: min(32vw, 120px);
  }
}


/* .btn_download_top */
.btn_download_top{
  position: relative;
  top: -3px;
  display: block;
}
@media (max-width: 1620px){
  .btn_download_top img{
    width: min(23.889vw, 387px); /* 1620px */
  }
}
@media (max-width: 767px){
  .btn_download_top.pc{
    display: none;
  }
}

/* nav (PC) */
.header_nav ul{
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: min(1.852vw, 30px); /* 1620px */
  margin: 0;
  padding: 0;
}
.header_nav ul a{
  display: inline-block;
  display: block;
  font-weight: 800;

  font-size: var(--font-txt-small);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 1620px){
  .header_nav ul a{
    font-size: min(1.049vw, 1.7rem); /* 1620px */
  }
}
@media (min-width: 768px){
  .header_nav ul a:hover{
    color: var(--color-primary);
    transition: 0.3s ease;
    opacity: 1;
  }
}
@media (max-width: 767px){
  .header_nav{
    position: fixed;
    top: 0;
    right: 0;
    width: min(78vw, 320px);
    height: 100vh;
    background: #fff;
    padding: var(--size-60) var(--size-15) var(--size-15);
    transform: translateX(104%);
    transition: transform 0.25s ease;
    z-index: 1000;
    box-shadow: -10px 0 20px rgba(0,0,0,0.08);
  }
  .header_nav ul{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }
  .header_nav ul li{
    border-bottom: 1px solid #ccc;
    width: 100%;
  }
  .header_nav ul a{
    box-sizing: border-box;
    display: block;
    font-size: var(--font-txt-large);
    padding: var(--size-15);
    width: 100%;
  }
}

/* hamburger */
.header_toggle {
  display: none; /* PCは非表示 */
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2000;
}
.nav_btn {
  position: relative;
  width: 30px;
  height: 23px;
}
.hamburger {
  background-color: #000;
  border-bottom: 1px solid #fff;
  position: absolute;
  width: 30px;
  height: 2px;
  right: 0;
  transition: all 0.5s;
}
.hamburger_01 {
  top: 1px;
}
.hamburger_02 {
  top: 10px;
}
.hamburger_03 {
  top: 20px;
}
@media (max-width: 767px){
  .header_toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* overlay */
.header_overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 999;
}

@media (max-width: 767px){
  /* open状態 */
  .site_header.is-open .header_nav{
    transform: translateX(0);
  }
  .site_header.is-open .header_overlay{
    display: block;
  }
  .site_header.is-open .header_overlay[hidden]{
    display: block;
  }

  /* ハンバーガーを×に */
  .site_header.is-open .hamburger_01{
    transform: rotate(-38deg);
    top: 13px;
  }
  .site_header.is-open .hamburger_02{
    opacity: 0;
  }
  .site_header.is-open .hamburger_03{
    transform: rotate(38deg);
    top: 13px;
  }
}


/* ------ footer -------*/
footer{
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
}
footer .copy{
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-align: right;
  padding: var(--size-15) var(--size-30);
}
@media screen and (max-width: 767px) {
  footer .copy{
    font-size: 1rem;
    padding: var(--size-10) var(--size-15);
  }
}


/* ------ flex-box -------*/
.col2{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
@media screen and (max-width: 767px) {
  .col2{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}



/* =======================================
    05. Pages
======================================= */
/* ------ #mainvisual_area -------*/
#mainvisual_area{
  background-image: url(../img/bg_mainvisual_a.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
  height: min(72.115vw, 750px);
}
.img_mainvisual{
  position: relative;
  top: min(14.423vw, 150px);
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 1040px) {
  #mainvisual_area{
    background-size: cover;
  }
  .img_mainvisual img{
    width: min(76.538vw, 796px); 
   }
}
@media screen and (max-width: 767px) {
  #mainvisual_area{
    min-height: auto;
  }
  .img_mainvisual{
    top: var(--size-40);
  }
  .img_mainvisual img{
    width: 80vw;
    /* width: 300px; */
  }
}


/* ------ #intro_area -------*/
#intro_area{
  background-image: url(../img/bg_intro.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;

  padding-bottom: var(--size-60);
}
@media screen and (max-width: 767px) {
  #intro_area{
    padding-bottom: var(--size-40);
  }
}

#intro_area .ttl_box{
  position: relative;
}
.ttl_intro{
  text-align: center;
}
.ttl_intro img{
  width: min(90.865vw, 945px);
}
.ttl_intro_deco{
  position: absolute;
  mix-blend-mode: screen;
  max-width: min(93.558vw, 973px);
  top: min(4.231vw, 44px);
  left: calc(50% - min(47.885vw, 498px));
  z-index: 1;
}
.txt_intro_lead img{
  margin: 0 auto;
  width: min(82.788vw, 861px);
}
@media screen and (max-width: 767px) {
  #intro_area .ttl_box{
    margin-bottom: var(--size-10);
  }
  .ttl_intro img{
    width: min(90vw, 945px);
  }
  .ttl_intro_deco{
    top: min(7.2vw, 27px);
    left: 4vw;
    width: min(91vw, 973px);
  }
  .txt_intro_lead img{
    width: min(80%, 861px);
  }
}

/* -- intro_box -- */
.intro_box{
  max-width: min(86.827vw, 903px);
  margin: 0 auto;
  padding-top: var(--size-80);
}
.img_intro{
  position: absolute;
  top: 0;
  left: calc(50% - min(35.769vw, 372px));
  width: min(71.442vw, 743px);
  z-index: 2;
}
.bg_intro_balloon{
  width: 100%;
}
.txt_intro_bottom{
  margin-top: calc(var(--size-20)  * -1);
}
.txt_intro_bottom img{
  margin: 0 auto;
  width: min(62.788vw, 653px);
}
@media screen and (max-width: 767px) {
  .intro_box{
    max-width: min(100vw, 903px);
    padding-top: 10.667vw;
  }
  .img_intro{
    width: min(80vw, 743px);
    left: 5vw;
  }
  .txt_intro_bottom{
    margin: 0 auto;
    width: min(70vw, 399px);
  }
  .txt_intro_bottom img{
    padding-left: var(--size-10);
    width: min(90%, 653px);
  }
  .bg_intro_balloon_sp{
    position: absolute;
    bottom: -5.333vw;
    left: 9.867vw;
    width: 6.667vw;
  }
}

/* .txt_box */
.intro_box .txt_box{
  box-sizing: border-box;
  position: absolute;
  top: min(22.115vw, 230px);
  left: 0;
  padding: var(--size-30) var(--size-60) 0;
  width: 100%;
  z-index: 1;
}
.ttl_intro_sub{
  text-align: center;
}
.ttl_intro_sub{
  margin: 0 auto;
  width: min(42.404vw,441px);
}
@media screen and (max-width: 767px) {
  .intro_box .txt_box{
    background-color: #fff;
    border-radius: var(--size-20);
    padding: 16vw var(--size-20) var(--size-20);
    position: relative;
    top: 0;
    margin-top: 2.667vw;
    margin-bottom: var(--size-25);
  }
  .ttl_intro_sub{
    width: min(96%,441px);
  }
}

/* -- .list_intro_box -- */
/* list */
.list_intro_box{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* item */
.intro_item{
  color: var(--color-primary);
  display: grid;
  grid-template-columns: min(3.846vw, 40px) min(19.231vw, 200px) 1fr;
  column-gap: var(--size-15);
  align-items: center;
  padding: var(--size-15) 0;
  border-bottom: 1px solid var(--color-primary);
}
.intro_item:last-child{
  border-bottom: none;
}
.list_intro_box .icon_check{
  width: min(3.846vw, 40px);
}
.intro_item .title{
  font-size: var(--font-ttl-topic);
  font-weight: 900;
  line-height: 1.1;
}
.intro_item .text{
  line-height: 1.3;
  letter-spacing: 0;
  padding-left: var(--size-30);
  position: relative;
}
.intro_item .text::before{
  content: '...';
  font-size: 110%;
  position: absolute;
  top: 50%;
  transform: translateY(-77%);
  left: 0;
}
@media (max-width: 767px){
  .intro_item{
    grid-template-columns: min(7.467vw, 28px) 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--size-10);
    row-gap: 5px;
    align-items: center;
    padding: var(--size-10) 0;
  }
  .list_intro_box .icon_check{
    width: min(7.467vw, 28px);
  }
  .intro_item .title{
    grid-column: 2;
    grid-row: 1;
    white-space: normal;
  }
  .intro_item .text{
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: var(--size-10);
    padding-left: var(--size-20);
  }
}


/* ------ #about_area -------*/
#about_area{
  background-image: url(../img/bg_about.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;

  padding: var(--size-60) 0;
  text-align: center;
}
.about_inner{
  background-color: #fff;
  border-radius: var(--size-50);
  box-sizing: border-box;
  padding: var(--size-70);
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 767px){
  #about_area{
    padding: var(--size-40) 0;
  }
  .about_inner{
    border-radius: var(--size-20);
    padding: var(--size-20) var(--size-20) var(--size-30);
  }
}

.ttl_about{
  font-size: var(--font-ttl-topic);
  font-weight: 900;
  color: #000;
  text-align: center;
}
#about_area .marker_yellow{
  font-size: 110%;
  font-weight: 800;
  letter-spacing: 0;
}
.img_about_01{
  width: min(22.596vw, 235px);
}
.img_about_02{
  width: min(61.827vw, 643px);
}
#about_area .txt_box p{
  color: #000;
}
@media (max-width: 767px){
  .img_about_01{
    width: min(50%, 235px);
  }
  .img_about_02{
    width: min(94%, 643px);
  }
}


/* ------ #service_area -------*/
#service_area{
  background-image: url(../img/bg_service.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
}
@media (max-width: 767px){
  #service_area{
    background-size: 200% auto;
  }
}

/* -- .campaign_box -- */
.ttl_campaign{
  color: var(--color-primary);
  font-size: var(--font-ttl-sub);
  font-weight: 900;
  margin-bottom: 0.5em;
  letter-spacing: 0.05em;
  text-align: center;
}
.ttl_campaign .marker_white{
  padding: 0 0.5em;
}
.campaign_box .txt_lead{
  text-align: center;
}
@media (max-width: 767px){
  .campaign_box{
    padding-bottom: var(--size-15);
  }
}

/* .list_campaign_box */
/* list */
.list_campaign_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* item */
.campaign_item{
  background-color: #fff;
  border-radius: var(--size-20);
  box-sizing: border-box;
  color: #000;
  font-size: var(--font-txt-small);
  font-weight: 800;
  padding: var(--size-30) var(--size-15);
  margin: 0 .5% var(--size-10);
  text-align: center;
  width: 32.333%;
}
.campaign_item .icon_campaign{
  display: block;
  margin: var(--size-15) auto 0;
  width: min(10.673vw, 111px);
}
@media (max-width: 767px){
  .campaign_item{
    font-size: var(--font-txt-list);
    border-radius: var(--size-10);
    padding: var(--size-10);
    width: 48%;
    margin: 0 1% 6px;
  }
  .campaign_item:nth-child(5){
    width: 60%;
  }
  .campaign_item .icon_campaign{
    margin: var(--size-10) auto 0;
    width: min(18.667vw, 70px);
  }
}

/* -- .point_box -- */
.point_balloon{
  margin: 0 auto var(--size-20);
  width: min(75vw,780px);
}
.bg_point_balloon{
  width: 100%;
  height: auto;
}
.ttl_point{
  font-size: min(2.692vw, 2.8rem);
  font-weight: 900;
  position: absolute;
  top: var(--size-70);
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 1;
}
.point_box .scroll_box{
  margin-bottom: var(--size-15);
}
.point_box .txt_info{
  text-align: center;
}
@media (max-width: 767px){
  .point_balloon{
    width: min(80vw, 465px);
  }
  .ttl_point{
    font-size: min(4.533vw, 2rem); /* 1.7rem */
    top: 8%;
  }
  .point_box .scroll_box img{
    width: 160%;
  }
}


/* ------ #feature_area -------*/
#feature_area{
  background-image: url(../img/bg_feature.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.ttl_feature{
  margin-bottom: calc(var(--size-60) * -1);
  position: relative;
  z-index: 1;
}
.ttl_feature img{
  margin: 0 auto;
  width: min(78.365vw, 815px);
}
@media (max-width: 767px){
  .ttl_feature{
    margin-bottom: calc(var(--size-40) * -1);
  }
  .ttl_feature img{
    width: min(70vw, 561px);
  }
}

/* -- .list_feature_box -- */
/* list */
.list_feature_box{
  background-color: #fff;
  box-sizing: border-box;
  border-radius: var(--size-20);
  padding: var(--size-100) var(--size-60) var(--size-70) var(--size-70);
  position: relative;
}
.list_feature_box::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--size-20);
  padding: 4px; 
  background: linear-gradient(to right,#2b2c8f 0%,#c8203c 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@media (max-width: 767px){
  .list_feature_box{
    border-radius: var(--size-15);
    padding: var(--size-50) var(--size-18) var(--size-40);
  }
  .list_feature_box::before{
    border-radius: var(--size-15);
    padding: 3px; 
  }
}

/* item */
.feature_item{
  box-sizing: border-box;
  padding-bottom: var(--size-80);
}
.feature_item.feature_04{
  padding-bottom: 0;
}
.feature_inner{
  display: grid;
  grid-template-columns: var(--size-100) 1fr min(28.846vw, 300px); /* num / text / image */
  column-gap: var(--size-25);
  align-items: flex-start;
}
@media (max-width: 767px){
  .feature_item{
    padding-bottom: var(--size-50);
  }
  .feature_inner{
    display: grid;
    grid-template-columns: var(--size-40) 1fr; /* 01 / 見出し・本文 */
    column-gap: var(--size-15);
    row-gap: var(--size-15);
    align-items: start;
  }
}

/* .number */
.num_feature{
  display: block;
  justify-self: center;
  margin-top: calc(var(--size-20) * -1);
  width: 100%;
}
@media (max-width: 767px){
  .num_feature{
    margin-top: 0;
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
  }
}

/* .txt_box */
.ttl_feature_sub{
  font-size: min(2.885vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.5em;
}
.txt_feature{
  font-size: var(--font-txt-small);
  line-height: 1.65;
}
@media (max-width: 767px){
  .feature_item .txt_box{
    grid-column: 2;
    grid-row: 1;
  }
  .ttl_feature_sub{
    font-size: min(5.067vw, 2.2rem);/* 1.9rem */
  }
}

/* .img_feature */
.img_feature{
  width: 100%;
}
.img_feature img{
  display: block;
  justify-self: center;
}
.feature_01 .img_feature{
  margin-top: calc(var(--size-20) * -1);
}
.feature_04 .img_feature{
  margin-top: calc(var(--size-40) * -1);
}
@media (max-width: 767px){
  .img_feature{
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .img_feature img{
    display: block;
    margin: 0 auto;
    width: min(61.333vw, 230px);
  }
  .feature_01 .img_feature,
  .feature_04 .img_feature{
    margin-top: 0;
  }
  .feature_03 .img_feature img{
    width: min(61.333vw, 230px);
  }
  .feature_04 .img_feature img{
    width: min(53.333vw, 200px);
  }
}

/* -- .list_record_box -- */
.list_record_box{
  border: 3px solid #000;
  background: #fff;
  box-sizing: border-box;
  margin: var(--size-30) auto 0;
  width: 80%;
}
.ttl_record{
  background: #000;
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 5px 5px;
  margin: 0;
}
@media (max-width: 767px){
  .list_record_box{
    margin: var(--size-20) auto 0;
    width: 90%;
  }
}

.record_body{
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;;
  padding: var(--size-20) var(--size-30);
}
@media (max-width: 767px){
  .record_body{
    grid-template-columns: 1fr;
    row-gap: var(--size-15);
    padding: var(--size-15);
  }
}

.list_record_box ul{
  padding-left: 1.7em;
  background-image: url(../img/line_dots_b_pc.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 3px auto;
}
.list_record_box ul:nth-child(1){
  padding-left: 1.2em;
  background: none;
}
.list_record_box ul li{
  font-size: var(--font-txt-list);
  margin-bottom: 0.5em;
}
.list_record_box ul li:last-child{
  margin-bottom: 0;
}
@media (max-width: 767px){
  .list_record_box ul{
    padding-left: 2em;
    padding-top: 1.2em;
    background-image: url(../img/line_dots_b_sp.svg);
    background-repeat: repeat-x;
    background-position: top left;
    background-size: auto 3px;
  }
  .list_record_box ul:nth-child(1){
    padding-left: 2em;
    padding-top: 0;
  }
  .list_record_box ul li{
    margin-bottom: 0;
  }
}


/* ------ #comparison_area -------*/
#comparison_area{
  background-image: url(../img/bg_comparison.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;

  text-align: center;
}
#comparison_area .ttl_comparison{
  margin-bottom: calc(var(--size-60) * -1);
  position: relative;
  z-index: 1;
}
@media (max-width: 767px){
  #comparison_area .container{
    width: 96%;
  }
  #comparison_area .ttl_comparison{
    margin: 0 auto calc(var(--size-25) * -1);
    width: 84%;
    /* margin: 0 1.5% calc(var(--size-40) * -1) 4.5%;
    width: 94%; */
  }
}

#comparison_area .ttl_comparison img{
  margin: 0 auto;
}
@media (max-width: 767px){
  #comparison_area .scroll_box img{
    width: 100%; /* 150% */
  }
}


/* ------ #service-menu_area -------*/
#service-menu_area{
  background-image: url(../img/bg_service-menu.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}
@media (max-width: 767px){
  #service-menu_area .ttl_main{
    font-size: min(6.133vw, 2.6rem); /* 2.3rem */
    padding-right: 0.5em;
  }
}

/* -- .list_service-menu_box -- */
/* list */
.list_service-menu_box{
  max-width: 950px;
  margin: 0 auto;
}

/* item */
.list_service-menu_box .service-menu_item{
  background-color: #fff;
  margin-bottom: var(--size-30);
  position: relative;
  padding-left: 20px;

  /* 右下を斜めにカット */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 32px),
    calc(100% - 32px) 100%,
    0 100%
  );
}
/* 左側のライン */
.list_service-menu_box .service-menu_item::before{
  content: "";
  background: linear-gradient(to bottom, #2b2c8f 0%, #c8203c 100%);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20px;
}
@media (max-width: 767px){
  .list_service-menu_box .service-menu_item{
    margin-bottom: var(--size-20);
    padding-left: 10px;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 22px),
      calc(100% - 22px) 100%,
      0 100%
    );
  }
  .list_service-menu_box .service-menu_item::before{
    width: 10px;
  }
}

/* accordion_head */
.ttl_service-menu{
  border-bottom: 1px solid #ccc;
  color: #000;
  font-size: var(--font-ttl-sub);
  font-weight: 900;
  max-width: 620px;
  margin: 0 auto var(--size-10);
  padding-bottom: var(--size-10);
  text-align: center;
}
.txt_service-menu_top{
  margin-bottom: 0;
  text-align: center;
}
.num_service-menu{
  position: absolute;
  top: var(--size-15);
  left: var(--size-15);
  height: min(4.615vw, 48px);
  width: auto;
}
@media (max-width: 767px){
  .ttl_service-menu{
    padding: 0 var(--size-20) var(--size-10);
    line-height: 1.4;
  }
  .num_service-menu{
    top: var(--size-10);
    left: var(--size-10);
    height: min(5.867vw, 22px);
  }
}

/* .accordion_trigger */
.list_service-menu_box .accordion_trigger{
  padding: var(--size-40) var(--size-50);
  width: 100%;
}
@media (max-width: 767px){
  .list_service-menu_box .accordion_trigger{
    padding: var(--size-15);
  }
}

/* .accordion_content */
.list_service-menu_box .accordion_content{
  padding: 0 var(--size-50) var(--size-40);
  width: 100%;
}
.ttl_service-menu_sub{
  color: var(--color-primary);
  font-size: var(--font-ttl-topic);
  font-weight: 800;
  margin-bottom: 1em;
  text-align: center;
}
@media (max-width: 767px){
  .list_service-menu_box .accordion_content{
    padding: 0 var(--size-20) var(--size-20);
  }
}


/* ---- .service-menu_01 ---- */
.service-menu_01 .ttl_service-menu_sub{
  margin-bottom: 0.5em;
}
/* -- .planning_box -- */
/* .list */
.list_planning_box{
  box-sizing: border-box;
  max-width: 660px;
  margin: 0 auto;
  padding: var(--size-30) var(--size-50);
}
/* item */
.planning_item{
  border-bottom: 2px solid #fff;
  margin-bottom: var(--size-10);
  padding: 0 var(--size-20) var(--size-10);

  display: grid;
  grid-template-columns: min(19.231vw, 200px) 1fr;
  column-gap: var(--size-50);
  align-items: center;
}
.planning_item:last-child{
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
@media (max-width: 767px){
  .list_planning_box{
    padding: var(--size-20) var(--size-15);
  }
  .planning_item{
    padding: 0 0 var(--size-10) ;
    grid-template-columns: min(24vw, 90px) 1fr;
    column-gap: var(--size-30);
  }
}

/* -- .awareness_box -- */
.ttl_awareness{
  background-color: var(--color-primary);
  border-radius: 50px;
  box-sizing: border-box;
  color: #fff;
  font-size: var(--font-ttl-topic);
  font-weight: 900;
  max-width: 330px;
  margin: 0 auto -30px;
  padding: 5px ;
  position: relative;
  line-height: 1.4;
  text-align: center;
  z-index: 1;
}
@media (max-width: 767px){
  .ttl_awareness{
    max-width: min(45.333vw, 330px);
  }
}

/* list */
.list_awareness_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--size-60) var(--size-50) var(--size-20);
}
@media (max-width: 767px){
  .list_awareness_box{
    padding: var(--size-50) var(--size-15) 0;
  }
}

/* item */
.awareness_item{
  margin-bottom: var(--size-20);
  width: 30.333%;
}
.awareness_item .title{
  color: #5385b9;
  font-size: var(--font-txt-large);
  font-weight: bold;
  margin-bottom: 0.5em;
  text-align: center;
}
.awareness_item ul li{
  font-size: var(--font-txt-small);
  margin-left: 1em;
  line-height: 1.3;
}
.awareness_01 ul,
.awareness_02 ul{
  padding-left: var(--size-40);
}
.awareness_04 ul,
.awareness_05 ul{
  padding-left: var(--size-20);
}
.awareness_03{
  width: 36.333%;
  letter-spacing: 0;
}
.awareness_03 div{
  display: flex;
}
.awareness_03 div ul:nth-child(1){
  width: 64%;
}
.awareness_03 div ul:nth-child(2){
  width: 36%;
}
@media (max-width: 767px){
  .awareness_item{
    margin: 0 auto var(--size-20);
    width: 48%;
  }
  .awareness_03{
    width: 48%;
  }
  .awareness_05{
    width: 54%;
  }
  .awareness_01 ul,
  .awareness_02 ul,
  .awareness_04 ul,
  .awareness_05 ul{
    padding-left: 0;
  }
  .awareness_03 div{
    flex-direction: column;
  }
  .awareness_03 div ul:nth-child(1){
    width: 100%;
  }
  .awareness_03 div ul:nth-child(2){
    width: 100%;
  }
}

/* .icon_awareness */
.icon_awareness{
  display: block;
  margin: 0 auto;
}
@media (max-width: 767px){
  .icon_awareness{
    width: auto;
    height: var(--size-50);
  }
}

/* ---- .service-menu_02 ---- */
/* -- .survey_box -- */
.img_survey{
  display: block;
  margin: 0 auto;
  width: min(57.692vw, 600px);
}
@media (max-width: 767px){
  .img_survey{
    width: min(100%, 600px);
  }
}

/* -- .result_box -- */
.ttl_result{
  color: var(--color-primary);
  font-size: var(--font-txt-large);
  font-weight: 800;
  margin-bottom: 1em;
  text-align: center;
}

/* .list */
.list_result_box{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-30);
}
@media (max-width: 767px){
  .list_result_box{
    grid-template-columns: 1fr;
    gap: var(--size-15);
    margin: 0 auto;
    width: 90%;
  }
}

/* .item */
.result_item{
  background: #f2f2f2;
  border-radius: var(--size-30);
  overflow: hidden;
  box-sizing: border-box;
}
.result_item .title{
  margin: 0;
  padding: var(--size-10) 0;
  background: #2d8dd2;
  color: #fff;

  font-size: var(--font-txt-large);
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}
.result_item > ul{
  box-sizing: border-box;
  display: grid;
  row-gap: 5px;
  justify-content: center;
  align-content: center;
  min-height: 130px;
  padding: var(--size-20);
}
.result_item.result_03 > ul{
  min-height: 174px;
}
.result_item > ul > li{
  font-size: var(--font-txt-small);
  font-weight: 800;
  letter-spacing: 0.02em;
}
@media (max-width: 767px){
  .result_item{
    border-radius: var(--size-20);
    min-height: auto;
  }
  .result_item > ul,
  .result_item.result_03 > ul{
    row-gap: 0;
    padding: var(--size-15);
    min-height: auto;
  }
}


/* ---- .service-menu_03 ---- */
/* -- .access-data_box -- */
.img_access-data{
  display: block;
  margin: 0 auto;
  width: min(64.808vw, 674px);
}
@media (max-width: 767px){
  .access-data_box .scroll_box img{
    width: 100%;
  }
}

/* list */
.list_access-data_box{
  padding: var(--size-30) var(--size-100);
}
@media (max-width: 767px){
  .list_access-data_box{
    padding: var(--size-10) var(--size-20);
  }
}

/* item */
.access-data_item{
  color: var(--color-secondary);
  font-size: var(--font-txt-large);
  font-weight: 800;
  padding: 5px 0;
  display: grid;
  grid-template-columns: var(--size-20) 1fr;
  column-gap: var(--size-15);
  align-items: center;
}
.access-data_item .icon_check{
  width: min(3.462vw, 36px);
}
@media (max-width: 767px){
  .access-data_item{
    grid-template-columns: var(--size-20) 1fr;
    column-gap: var(--size-10);
    line-height: 1.4;
  }
  .access-data_item .icon_check{
    width:var(--size-20);
  }
}

/* ---- .service-menu_04 ---- */
/* -- line-campaign_box -- */
.line-campaign_box{
  border-radius: var(--size-30);
  border: 3px solid #000;
  padding: var(--size-50);
}
.ttl_line-campaign{
  font-size: var(--font-txt-large);
  font-weight: 800;
  color: #000;
  text-align: center;
  margin-bottom: 1em;
}
@media (max-width: 767px){
  .line-campaign_box{
    border-radius: var(--size-15);
    border: 2px solid #000;
    padding: var(--size-20);
  }
  .line-campaign_box .scroll_box img{
    width: 160%;
  }
}

/* -- .list_line-campaign_box -- */
/* item */
.line-campaign_item{
  display: grid;
  grid-template-columns: min(19.231vw, 200px) 1fr;
  column-gap: var(--size-30);
  align-items: center;
  margin-bottom: var(--size-20);
}
.line-campaign_item:last-child{
  margin-bottom: 0;
}
@media (max-width: 767px){
  .line-campaign_item{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--size-20); 
    align-items: flex-start; 
    padding:  var(--size-15);
  }
}
.img_planning{
  width: min(19.231vw, 200px);
}
.line-campaign_item .title{
  color: var(--color-secondary);
  font-size: var(--font-txt-large);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 0.5em;
}
.line-campaign_item .list li,
.line-campaign_item .text{
  font-size: var(--font-txt-small);
}
.line-campaign_item .list{
  margin-left: 1em;
}
@media (max-width: 767px){
  .img_planning{
    display: block;
    margin: 0 auto;
    width: min(48vw, 180px);
  }
  .line-campaign_item .title{
    line-height: 1.5;
  }
}


/* ------ #system_area -------*/
#system_area{
  padding-bottom: var(--size-100);
}
#system_area .container{
  max-width: 100%;
}
#system_area .txt_lead{
  margin-bottom: var(--size-50);
  text-align: center;
}
@media (max-width: 767px){
  #system_area{
    padding-bottom: var(--size-50);
  }
  #system_area .container{
    margin: 0;
    width: 100%;
  }
  #system_area .txt_lead{
    margin-bottom: var(--size-10);
  }
}

/* -- slider(swiper) -- */
.system_slider_wrap{
  position: relative;
  max-width: 1650px;
  margin: 0 auto;
}
/* .js-system-slider{
  overflow: visible !important;
} */
.js-system-slider{
  padding: var(--size-25) !important;
}
.js-system-slider .swiper-slide{
  height: auto;
  overflow: visible !important;
}
.system_card{
  height: 100%;
}
@media (min-width: 768px){
  .js-system-slider .swiper-slide{
    max-width: 500px;
    /* margin-right: min(2.604vw, 50px) !important; */
  }
  .js-system-slider .swiper-slide:last-child{
    margin-right: 0;
  }
}

/* -- .list_system_box -- */
/* list */
.system_card{
  background: #fff;
  border-radius: var(--size-15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 1920px時 */
  position: relative;
  overflow: hidden;
}

/* deco_system */
.deco_system{
  display: block;
  position: absolute;
  left: calc(var(--size-25) * -1);
  top: calc(var(--size-25) * -1);
  width: min(7.604vw, 146px); /* 1920px時 */
  z-index: 1;
}
@media (max-width: 767px){
  .deco_system{
    left: calc(var(--size-15) * -1);
    top: calc(var(--size-25) * -1);
    width: var(--size-70);
  }
}

/* item */
.system_item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* .txt_box */
.system_item .txt_box{
  padding: var(--size-30) min(1.212vw, 20px); /* 1650px時 */
}
.ttl_system{
  color: var(--color-primary);
  font-size: min(1.697vw, 2.8rem); /* 1650px時 */
  font-weight: 800;
  margin-bottom: 1em;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}
.line_system{
  display: block;
  margin-bottom: var(--size-25);
  border-top: 2px dashed var(--color-primary);
  width: 100%;
}
@media (max-width: 1280px){
  .ttl_system{
    font-size: min(1.563vw, 2rem); /* 1280px時 */
  }
}
@media (max-width: 767px){
  .system_item .txt_box{
    padding: var(--size-15);
  }
  .ttl_system{
    font-size: min(4vw, 1.7rem); /* 1.5rem */
  }
  .line_system{
    margin-bottom: var(--size-20);
  }
}

/* tags_system_box */
.tags_system_box{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  row-gap: var(--size-10);
  justify-items: left;
}
.tags_system_box .tag{
  background: #e2edf7;
  border-radius: 50px;
  color: var(--color-primary);
  display: inline-block;
  font-size: min(0.97vw, 1.6rem); /* 1650px時 */
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.05em;
  padding: var(--size-10) min(1.212vw, 20px); /* 1650px時 */
  text-align: left;
}
@media (max-width: 767px){
  .tags_system_box .tag{
    font-size: min(2.667vw, 1.2rem); /* 1rem */
    padding: 5px var(--size-10);
  }
}

/* system_nav */
.system_nav{
  border: none;
  background: #132a74;
  cursor: pointer;
  display: block;
  position: absolute;
  bottom: calc(var(--size-100) * -1);
  height: 48px;
  width: 48px;
}
.system_nav--prev{
  left: 25%;
}
.system_nav--next{
  right: 25%;
}
.system_nav::before{
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  inset: 0;
  margin: auto;
  height: 8px;
  width: 8px;
}
.system_nav--prev::before{
  transform: rotate(-135deg);
  left: 5px;
}
.system_nav--next::before{
  transform: rotate(45deg);
  right: 5px;
}
@media (min-width: 768px){
  .system_nav:hover{
    background: #2848b1;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
}
@media (max-width: 767px){
  .system_nav{
    bottom: calc(var(--size-30) * -1);
    height: 30px;
    width: 30px;
  }
  .system_nav::before{
    height: 5px;
    width: 5px;
  }
  .system_nav--prev{
    left: 18%;
  }
  .system_nav--next{
    right: 18%;
  }
}


/* ------ #voice_area -------*/
#voice_area{
  padding-bottom: var(--size-30);
}
@media (max-width: 767px){
  #voice_area{
    padding-bottom: var(--size-10);
  }
}

/* -- .list_voice_box -- */
/* list */
.list_voice_box{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-20);
}

/* item */
.voice_item{
  background: #f3f1de;
  border-radius: 12px;
  box-sizing: border-box;
  padding: var(--size-30);
}
@media screen and (max-width: 767px){
  .list_voice_box{
    grid-template-columns: 1fr;
    gap: var(--size-15);
    margin: 0 auto;
    width: 96%;
  }
  .voice_item{
    padding: var(--size-18);
  }
}
.voice_inner{
  display: grid;
  grid-template-columns: min(10.192vw, 106px) 1fr;
  column-gap: var(--size-25);
  align-items: center;
}
.icon_voice{
  display: block;
  width: min(10.192vw, 106px);
  height: auto;
}
.ttl_voice{
  font-size: var(--font-txt-large);
  font-weight: 800;
  color: #000;
  margin-bottom: 0.5em;
  line-height: 1.3;
}
.txt_voice{
  color: #000;
}
@media screen and (max-width: 767px){
  .voice_inner{
    grid-template-columns: min(21.333vw, 80px) 1fr;
    column-gap: var(--size-20);
  }
  .icon_voice{
    width: min(21.333vw, 80px);
  }
}


/* ------ #case-study_area -------*/
#case-study_area{
  background-image: url(../img/bg_service.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
}
@media (max-width: 767px){
  #case-study_area{
    background-size: 200% auto;
  }
}

/* -- .list_case-study_box -- */
/* item */
.list_case-study_box .case-study_item{
  background-color: #f2f2f2;
  border-radius: var(--size-20);
  margin-bottom:var(--size-50);
  position: relative;
}
@media (max-width: 767px){
  .list_case-study_box .case-study_item{
    border-radius: var(--size-15);
    margin-bottom:var(--size-25);
  }
}

/* accordion_head */
.ttl_case-study{
  border-bottom: 1px solid #666;
  font-size: var(--font-txt-large);
  font-weight: 800;
  max-width: 700px;
  margin: 0 auto var(--size-15);
  padding-bottom: var(--size-10);
  text-align: center;
}
.ttl_case-study_sub{
  font-size: min(2.885vw, 3rem);
  font-weight: 900;
  margin-bottom: var(--size-40);
  text-align: center;
}
.icon_case-study_number{
  position: absolute;
  top: calc(var(--size-30) * -1);
  left: 0;
  width: var(--size-100);
}
@media (max-width: 767px){
  .ttl_case-study_sub{
    font-size: min(4.533vw, 2rem);/* 1.7rem */
    margin-bottom: var(--size-15);
  }
  .icon_case-study_number{
    top: calc(var(--size-25) * -1);
    width: min(16vw, 60px);
  }
}

/* .accordion_trigger */
.list_case-study_box .accordion_trigger{
  display: block;
  padding: var(--size-40) var(--size-50) 0;
  width: 100%;
}
@media (max-width: 767px){
  .list_case-study_box .accordion_trigger{
    padding: var(--size-20) var(--size-20) 0;
  }
}

/* 画像ブロック（閉じた時：少しだけ見える） */
.list_case-study_box .thumb_case-study{
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(.2,.8,.2,1);
}
.list_case-study_box .thumb_case-study img{
  display: block;
  margin: 0 auto;
}
@media (max-width: 767px){
  .list_case-study_box .thumb_case-study{
    max-height: 90px;
  }
}

/* 下の方をぼかす（背景をぼかす） */
.list_case-study_box .thumb_case-study::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(242,242,242,0) 0%, rgb(255, 255, 255) 50%);
  opacity: 1;
  transition: opacity 0.42s cubic-bezier(.2,.8,.2,1);
}

/* 開いた時 */
.list_case-study_box .accordion__trigger[aria-expanded="true"] .thumb_case-study{
  max-height: 300px;
}
.list_case-study_box .accordion__trigger[aria-expanded="true"] .thumb_case-study::after{
  opacity: 0;
  transition-delay: 0.10s;
}

/* 閉じる時は delay なし */
.list_case-study_box .accordion__trigger[aria-expanded="false"] .thumb_case-study::after{
  transition-delay: 0s;
}

/* .accordion_content */
.list_case-study_box .accordion_content{
  padding: var(--size-40) var(--size-50);
  width: 100%;
}
@media (max-width: 767px) {
  .list_case-study_box .accordion_content{
    padding: var(--size-20);
  }
}

/* .case-study_box */
.case-study_box .label_case-study{
  color: #fff;
  margin-bottom: 1.2em;
  text-align: center;
}
.case-study_box .label_case-study span{
  background-color: #333;
  box-sizing: border-box;
  display: inline-block;
  min-width: min(16.346vw, 170px);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
}
.case-study_box .case:nth-last-of-type(2) .label_case-study span{
  letter-spacing: 0.05em;
  padding-left: 0;
}
.case-study_box .txt_case-study{
  font-weight: 800;
  margin-bottom: 1.2em;
  text-align: center;
}
.case-study_box .txt_case-study_sub{
  max-width: min(57.692vw, 600px);
  margin: 0 auto;
}
.case-study_box .info_box{
  max-width: min(68.269vw, 710px);
  margin: 0 auto;
}
.case-study_02 .case-study_box .info_box{
  max-width: min(59.615vw, 620px);
}
.case-study_box .info_box p{
  margin-bottom: 0;
}
.case-study_box ul{
  max-width: min(57.692vw, 600px);
  margin: 0 auto;
}
.case-study_box li{
  list-style: disc;
}
@media (max-width: 767px) {
  .case-study_box .label_case-study span{
    min-width: min(34.667vw, 130px);
  }
  .case-study_box .txt_case-study_sub,
  .case-study_box .info_box,
  .case-study_02 .case-study_box .info_box,
  .case-study_box ul{
    max-width: 100%;
  }
  .case-study_box .txt_case-study{
    font-size: min(3.733vw, 1.6rem); /* 1.4rem */
  }
  .case-study_box ul{
    margin-left: var(--size-20);
  }
}


/* ------ #faq_area -------*/
#faq_area{
  background-image: url(../img/bg_service-menu.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}
@media (max-width: 767px){
  #faq_area{
    padding-bottom: var(--size-60);
  }
}

/* -- .list_faq_box -- */
/* item */
.list_faq_box .faq_item{
  background-color: #fff;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.4);
  margin-bottom: var(--size-18);
}
.icon_q, .icon_a{
  width: var(--size-40);
  height: auto;
  flex: 0 0 auto;
}
@media (max-width: 767px){
  .icon_q, .icon_a{
    width: var(--size-20);
  }
}

/* .accordion_trigger */
.list_faq_box .accordion_trigger{
  display: flex;
  align-items: center;
  gap: min(2.115vw, 22px);
  padding: var(--size-30) var(--size-80) var(--size-30) var(--size-40);
  width: 100%;
}
.list_faq_box .accordion_title{
  font-size: var(--font-txt-large);
  font-weight: 800;
  text-align: left;
}
@media (max-width: 767px){
  .list_faq_box .accordion_trigger{
    gap: var(--size-15);
    padding: var(--size-15) var(--size-40) var(--size-15) var(--size-15);
  }
}
.list_faq_box .accordion_mark{
  right: var(--size-40);
  top: 50%;
  transform: translateY(-50%);
  width: min(2.5vw, 26px);
  height: min(2.5vw, 26px);
}
.list_faq_box .accordion_mark::before{
  background-image: url(../img/icon_open_b.svg);
  width: min(2.5vw, 26px);
  height: min(2.5vw, 26px);
}
.list_faq_box .accordion_trigger[aria-expanded="true"] .accordion_mark::before{
  background-image: url(../img/icon_close_b.svg);
}
@media (max-width: 767px){
  .list_faq_box .accordion_mark{
    right: var(--size-15);
    width: var(--size-15);
    height: var(--size-15);
  }
  .list_faq_box .accordion_mark::before{
    width: var(--size-15);
    height: var(--size-15);
  }
}

/* .accordion_content */
.list_faq_box .accordion_content{
  background-image: url(../img/line_dots_pc.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 92% auto;
  display: flex;
  align-items: flex-start;
  gap: min(2.115vw, 22px);
  padding: var(--size-30) var(--size-80) var(--size-30) var(--size-40);
  width: 100%;
}
.list_faq_box .accordion_content p{
  font-size: var(--font-txt-small);
}
@media (max-width: 767px){
  .list_faq_box .accordion_content{
    background-image: url(../img/line_dots_sp.svg);
    background-size: 90% auto;
    gap: var(--size-15);
    padding: var(--size-15) ;
    background-size: 92% auto;
  }
}