/*
 * Lep6o
 * iinuma
 */
:root {
  --maincolor: #2c3147;
  --subcolor: #464a60;
  --maintext: #373737;
  --primary-color: #185ee0;
  --secondary-color: #e6eef9;
  --bg-blue: #f7fafe;
  --vwtext: clamp(0.5rem, calc(0.25vw + 0.55rem), 2rem);
  --spvwtext: clamp(11px, calc(0.25vw + 0.55rem), 2rem);
  --easing: cubic-bezier(.2, 1, .2, 1);
  --transition: .8s var(--easing);
  --color-base: #f8f8f8;
  --color-gray: #ddd;
  --color-point: #ff2460;
  --color-red: #ff7272;
  --color-theme: #f5695f;
  --color-theme-darken: #f12617;
  --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
  --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
  --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff, .2);
  --box-shadow-bgwhite: 0px 0px 10px rgba(0, 0, 0, .1019607843);
}

html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}


body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  color: var(--maintext);
}

button {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.body-wrap {
  padding-top: 90px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {}


h2 {
  font-size: 18px;
  margin: 0;
  padding: 0;
}


.fw500 {
  font-weight: 500;
}

.mt-0 {
  margin-top: 0px !important;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mr-0 {
  margin-right: 0 !important;
}

.ml-10{
  margin-left: -10px;
}

.bg-blue {
  background-color: #f9fdff;
}

.mw-1200 {
  max-width: 1200px;
  margin: 0 auto;
}


a:focus,
button:focus {
  outline: none;
}

.d-flex {
  display: flex;
}


@media screen and (max-width: 800px) {
  .body-wrap {
    padding-top: 70px;
  }

}

/*==================================
=              General            =
==================================*/

.bg-main{
  background: var(--maincolor);
}


/*==================================
=          Login Custom           =
==================================*/

.authentication-wrapper.authentication-basic .authentication-inner{
  margin: 30px !important;
}

.authentication-wrapper.authentication-basic .authentication-inner .card .app-brand{
  margin-bottom: 0px !important;
}

.layer-z{
  z-index: 1;
  position: relative;
}


.login-on-button{
  background: #ffffff;
  color: var(--maincolor);
  border: none;
  white-space: nowrap;
}

.login-on-button:hover{
  background: #ffffff !important;
  color: var(--maincolor) !important;
  border: none;
  white-space: nowrap;
}

.login-off-button{
  border: 1px solid #6e7591 !important;
  color: #6e7591;
  white-space: nowrap;
  background-color: var(--maincolor);
}

.login-off-button:hover{
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
  white-space: nowrap;
  background-color: var(--maincolor);
}

.login-label-title {
  color: var(--maincolor);
  text-align: center;
  margin-bottom: 25px;
  margin-top: 25px;
  font-weight: 600;
}



.login-btn{
  background: #2c3147;
    border: none;
    height: 50px;
    color: #ffffff;
}

.login-btn:hover{
  background: #2c3147!important;
    border: none;
    height: 50px;
    color: #ffffff!important;
}

h4.login-title{
  margin: 25px auto;
  text-align: center;
  color: var(--subcolor);
}

.login-label {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--subcolor);
  margin-bottom: 5px;
}


/*==================================
=        Register Select         =
==================================*/

.rs-wrap{
  max-width: 900px;
  margin: auto;
  height: calc(100vh - 32px);
  display: flex;
  align-content: center;
}

.rs-section-title{
  font-size: 42px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-bottom: 15px;
}

.rs-section-text{
  font-size: 15px;
  color: #ffffff;
  text-align: center;
}

.rs-box{
  padding: 30px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  min-height: 320px;
}

.rs-title{
  font-size: 24px;
  color: var(--maincolor);
  font-weight: 600;
  text-align: center;
  display: block;
}

.rs-title span{
  background: #ed4f4f;
  border-radius: 100vh;
  padding: 4px 4px;
  font-size: 13px;
  display: block;
  color: #ffffff;
  margin-bottom: 5px;
}

.rs-text{
  font-size: 15px;
  color: var(--maincolor);
  font-weight: 500;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .rs-wrap{
    padding: 50px 10px;
    height: auto;
  }


}


/**********************************
lording
************************************/
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: var(--subcolor);
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

/* ローディングアニメーション */
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #545454;
  transform: translateZ(0);
  animation: loadAnime 1.1s infinite linear;
}

@keyframes loadAnime {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*==================================
=           Font awesome           =
==================================*/

.fa-chevron-down {
  margin-left: 5px;
}

.fa-caret-right {
  margin-top: 4px;
  margin-right: 5px;
}

.fa-user-pen,
.fa-award,
.fa-list-ol,
.fa-map-location-dot,
.fa-circle-question,
.fa-comment-dots,
.fa-id-card-clip,
.fa-download,
.fa-folder-tree,
.fa-list-check,
.fa-envelope,
.fa-bookmark {
  margin-right: 10px;
}

.fa-paper-plane {
  margin-right: 10px;
}


/*==================================
=              Google Icon        =
==================================*/

.material-symbols-outlined {
  font-size: 36px;
  position: relative;
  top: 10px;
  margin-right: 5px;
}

/*==================================
=               Spinner           =
==================================*/

.spinner-grow,
.spinner-border {
  color: #464a60;
  display: inline-block;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

.spinner-border-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
}

/*==================================
=              NAVI              =
==================================*/

nav {
  height: 90px;
  width: 100vw;
  background-color: #2c3147;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
}

/*Styling logo*/
.logo {
  padding: 0;
  text-align: center;
}

.logo img {
  height: 26px;
}

/*Styling Links*/
.nav-links {
  display: flex;
  list-style: none;
  width: 100vw;
  padding: 0 0.7vw;
  justify-content: space-evenly;
  align-items: center;
  text-transform: uppercase;
  margin: 0;
}

.nav-links li a {
  text-decoration: none;
  margin: 0 0.7vw;
}

.nav-links li a:hover {
  color: #61DAFB;
}

.nav-links li {
  position: relative;
}

.nav-links li a::before {
  content: "";
  display: block;
  height: 3px;
  width: 0%;
  background-color: #61DAFB;
  position: absolute;
  transition: all ease-in-out 250ms;
  margin: 0 0 0 10%;
}

.nav-links li a:hover::before {
  width: 80%;
}


.login-button {
  background-color: transparent;
  border: 1.5px solid #f2f5f7;
  border-radius: 5px;
  padding: 0.6rem 1rem;
  margin-left: 0;
  font-size: 12px;
  cursor: pointer;
  color: #ffffff;
  margin-right: 10px;
  height: 48px;
  min-width: 90px;

}

.login-button:hover {
  color: #131418;
  background-color: #f2f5f7;
  border: 1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}

.logout-button {
  background-color: transparent;
  border: 1.5px solid #f2f5f7;
  border-radius: 5px;
  padding: 0.6rem 1rem;
  margin-left: 0;
  font-size: 12px;
  cursor: pointer;
  color: #ffffff;
  margin-right: 10px;
  height: 48px;
  /* min-width: 90px; */
  min-width: 95px;

}

.logout-button:hover {
  color: #131418;
  background-color: #f2f5f7;
  border: 1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}

.join-button {
  color: #131418;
  background-color: #ffffff;
  border: 1.5px solid #ffffff;
  border-radius: 5px;
  padding: 0.6rem 1rem;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  height: 48px;
  min-width: 90px;
}

.join-button:hover {
  color: #f2f5f7;
  background-color: transparent;
  border: 1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}


.mypage-button {
  color: #131418;
  background-color: #ffffff;
  border: 1.5px solid #ffffff;
  border-radius: 5px;
  padding: 0.6rem 1rem;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  height: 48px;
  min-width: 90px;
  margin-right: 10px;
}

.mypage-button:hover {
  color: #f2f5f7;
  background-color: transparent;
  border: 1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}


.hamburger div {
  width: 30px;
  height: 3px;
  background: #f2f5f7;
  margin: 5px;
  transition: all 0.3s ease;
}

.hamburger {
  display: none;
}

.hamburger-logo {
  display: none;
}

#sp-menu {
  display: none;
}

.sp-menu-button {}

li.sp-hambuger-search {
  display: none;
}

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

  nav {
    position: fixed;
    height: 70px;
  }

  .hamburger {
    display: block;
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
    transition: all 0.7s ease;
  }

  .hamburger-logo {
    display: block;
    position: absolute;
    top: 25%;
    left: 5%;
  }

  .hamburger-logo img {
    height: 20px;
    margin-top: 7px;
  }


  .nav-links {
    position: fixed;
    background: #2c3147;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
    padding: 30px;
  }

  .nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% 30%);
    pointer-events: all;
  }

  .nav-links li {
    opacity: 0;
  }

  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }

  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }

  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }

  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.7s;
  }

  .nav-links li:nth-child(5) {
    transition: all 0.5s ease 0.8s;
  }

  .nav-links li:nth-child(6) {
    transition: all 0.5s ease 0.9s;
    margin: 0;
  }

  .nav-links li:nth-child(7) {
    transition: all 0.5s ease 1s;
    margin: 0;
  }

  li.fade {
    opacity: 1;
  }

  .top-search {
    display: none;
  }

  li.top-search {
    margin: 0 10px;
    display: none !important;
  }

  .sp-menu-button {
    width: 100%;
  }

  .join-button,
  .login-button,
  .logout-button,
  .mypage-button {
    width: 50%;
  }

  li.sp-hambuger-search {
    width: 100%;
    display: block;
  }

  .ham-sp-section {
    display: block;
    position: relative;
    border: 1px solid;
    border-color: #ffffff;
    border-radius: 10px;
  }

  .ham-tab-content {
    display: none;
    width: 100%;
    box-sizing: border-box;
    height: 150px;
    padding: 10% 0;
  }

  .ham-sp-prtext {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    color: #ffffff;
  }


  /*メニューをページ下部に固定*/
  #sp-menu {
    position: fixed;
    width: 100%;
    bottom: 0px;
    font-size: 0;
    opacity: 0.9;
    z-index: 99;
    /*display: block;*/
    display: none;
  }

  /*メニューを横並びにする*/
  #sp-menu ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  #sp-menu li {
    justify-content: center;
    align-items: center;
    width: 20%;
    padding: 0;
    margin: 0;
    font-size: 14px;
    border-right: 1px solid #fff;
  }

  /*左側メニューを緑色に*/
  #sp-menu li {
    background: var(--subcolor);
  }

  /*左側メニューをオレンジ色に*/
  #sp-menu li:last-child {
    background: #b08a4d;
  }

  /*ボタンを調整*/
  #sp-menu li a {
    color: #fff;
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px 0px;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }

  .spmenu-icon {
    font-size: 22px;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #ffffff;
  }

}

/*Animating Hamburger Icon on Click*/
.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  transition: all 0.7s ease;
  width: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

/*==================================
=            MEGA MENU            =
==================================*/

.bottom-nav-other {
  position: relative;
  top: 90px;
  background: #dddddd;
  display: flex;
  list-style: none;
  padding: 15px 0.7vw;
}

.bottom-nav {}

.header__menu {
  position: relative;
  /*top: 90px;*/
  width: 100%;
  /*background-color: #494d63;*/
  background-color: #18bfc6;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.header__menu li {
  display: inline-block;
  padding: 1em 3%;
}

.header__menu li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
}

.header__menu li a:hover {
  color: #ffffff;
  font-weight: 500;
}

ul.mega__menu-second {
  visibility: hidden;
  opacity: 0;
}

.header__menu li:hover {
  /*background-color: #535770;*/
  background-color:#28b0b6;
  -webkit-transitionrgba(73, 77, 99, 0.857).5s;
  transition: all 0.5s;
}

li.mega__menu ul.mega__menu-second {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  background: #ededed;
  /* メガメニューの背景色 */
  padding: 20px;
  box-sizing: border-box;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  z-index: 1000;
  overflow-y: scroll;
  height: 70vh;
}

li.mega__menu:hover ul.mega__menu-second {
  top: 55px;
  visibility: visible;
  opacity: 1;
}

li.mega__menu ul.mega__menu-second li {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}


li.mega__menu ul.mega__menu-second li:hover {
  background-color: #ededed;
  font-size: 14px;
}

li.mega__menu ul.mega__menu-second li a {

  padding: 3px 0;
  color: #2c3148;
  /*border: 1px solid #2c3148;
  border-radius: 100vh;
  padding: 3px 7px;
  min-width: 20px;
  */
}

li.mega__menu ul.mega__menu-second li a:hover{
  font-weight:800;
  transition:0.5s;
}



li.mega__menu ul.mega__menu-second li a:not(:first-child) {
  margin-left: 15px;
}

li.mega__menu ul.mega__menu-second li a:not(:last-child)::after {
  content: "｜";
  margin-left: 15px;
}

.mega-flex {
  display: flex;
  align-items: center;
}

.mega-in-title {
  font-size: 14px;
  font-weight: 500;
  margin-right: 20px;
  width: 160px;
  min-width: 160px;
  color: #ffffff;
  background-color: #2c3148;
  border: 1px solid #2c3148;
  border-radius: 100vh;
  padding: 3px 0px;

}


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

  .header__menu {
    display: none;
  }

}



/*==================================
=            SEARCH            =
==================================*/


.selectbox-003 {
  display: inline-flex;
  align-items: center;
  position: relative;
  border-right: solid 1px #dddddd;
  margin-bottom: 0px;
}

.selectbox-003::after {
  position: absolute;
  right: 15px;
  width: 10px;
  height: 7px;
  background-color: #535353;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
  pointer-events: none;
}

.selectbox-003 select {
  appearance: none;
  min-width: 140px;
  height: 48px;
  padding: .4em calc(.8em + 20px) .4em .8em;
  border: none;
  border-radius: 3px 0px 0px 3px;
  background-color: #fff;
  color: #333333;
  font-size: 13px;
  cursor: pointer;
}


.search-form-010 {
  display: flex;
  align-items: center;
  gap: 0 10px;
  margin-left: -5px;
}

.search-form-010 label {
  width: 250px;
  margin-bottom: 0px;
}

.search-form-010 input {
  width: 100%;
  height: 48px;
  padding: 1px 5px 1px 12px;
  border: none;
  box-sizing: border-box;
  color: #000;
  outline: none;
  border-radius: 0px 3px 3px 0px;
}

.search-form-010 button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  max-width: 140px;
  height: 48px;
  border: none;
  border-radius: 3px;
  background-color: #4070ff;
  color: #fff;
  cursor: pointer;
}

.search-form-010 button::before {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%23fff%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  content: '';
}





/*==================================
=            MV from PC            =
==================================*/

.mv-section {
  position: relative;
  overflow-x: hidden;
}

.swiper-mv .swiper-slide img {
  width: 100%;
  object-fit: cover;
  aspect-ratio:2 / 1;
  /*height: 300px;*/
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: relative;
}

span.swiper-pagination-bullet {
  width: 20px;
  border-radius: 3px;
}

.swiper-mv .swiper-pagination-bullet {
  background-color: #2c3147;
}

.swiper-mv .swiper-slide {
  transition: .3s;
}

.swiper-mv .swiper-slide.swiper-slide-prev,
.swiper-mv .swiper-slide.swiper-slide-next {
  opacity: .3;
}

.swiper-button-next, .swiper-button-prev{
  color: var(--maincolor) !important;
}

.swiper-button-next:after, .swiper-button-prev:after{
  font-size: 30px !important
}

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

  .mv-section {
    display: none;
  }
}

/*==================================
=            MV from SP            =
==================================*/

.mv-sp-section {
  display: none;
}

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

  .mv-sp-section {
    display: block;
    position: relative;
    background: url(../img/sp_mv_bg.jpg);
    background-size: cover;
  }

  .mv-sp-cover{
    background: #00000036;
  }

  .mv-sp-prtext {
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    color: #ffffff;
  }


  .sp-tab-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
  }

  .tabs {
    display: flex;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
    padding: 0.75rem;
    border-radius: 99px;
    width: 100%;
    margin-bottom: 0px;
  }

  .tabs * {
    z-index: 2;
  }

  .tabs input[type=radio] {
    display: none;
  }

  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: calc(100% / 3);
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color 0.15s ease-in;
    margin-bottom: 0px;
  }

  .notification {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.75rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    transition: 0.15s ease-in;
  }

  .tab-content {
    display: none;
    width: 100%;
    box-sizing: border-box;
    height: 150px;
    padding: 10% 0;
  }

  .centertest {}

  .tab-in-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
  }

  input[type=radio]:checked+label {
    color: var(--primary-color);
  }

  input[type=radio]:checked+label>.notification {
    background-color: var(--primary-color);
    color: #fff;
  }


  input[id=radio-1]:checked~.glider {
    transform: translateX(0);
  }

  input[id=radio-2]:checked~.glider {
    transform: translateX(100%);
  }

  input[id=radio-3]:checked~.glider {
    transform: translateX(200%);
  }

  input[id=radio-ham1]:checked~.glider {
    transform: translateX(0);
  }

  input[id=radio-ham2]:checked~.glider {
    transform: translateX(100%);
  }

  input[id=radio-ham3]:checked~.glider {
    transform: translateX(200%);
  }


  .glider {
    position: absolute;
    display: flex;
    height: 54px;
    width: calc(100% / 3.1);
    background-color: var(--secondary-color);
    z-index: 1;
    border-radius: 99px;
    transition: 0.25s ease-out;
  }



  /* free word search box */
  .search-container {
    text-align: center;
    display: flex;
    justify-content: space-between;
  }

  .search-input {
    padding: 10px;
    width: 66%;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 50px;
    font-size: 16px;
    border: none;
  }

  .search-button {
    width: 30%;
    height: 50px;
    margin-left: 1%;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #e7ce3a;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }


  .mv-sp-point-area {
    display: flex;
    padding: 20px;
  }

  .mv-sp-point {
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 11px;
    width: calc(100% / 2);
    padding: 15px 0;
    text-align: center;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff50;
    font-size: 13px;
  }

  .mv-sp-point:last-child {
    margin-right: 0px;
  }

  .mv-sp-point span {
    font-size: 20px;
    font-weight: bold;
    margin-left: 5px;
  }

  .mv-guidenavi{
    width: 100%;
    background: #ffffff;
    display: flex;
  }

  .mv-guide-left,
  .mv-guide-right{
    width: 50%;
    color: #ffffff;
    padding: 15px;
    text-align: center;
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    font-size: 12px;
  }

  .mv-guide-left{
    background: #2c3147;
  }

  .mv-guide-right{
    background: #3fa99c;
  }

  /*mv-sp-dropdown-search*/

  .drop-container {
    display: flex;
    justify-content: space-between;
  }

  .drop-left-column {
    display: flex;
    flex-direction: column;
    width: 67%;
  }

  .sp-dropdown {
    margin-bottom: 10px;
  }

  .sp-dropdown:last-child {
    margin-bottom: 0px;
  }

  .drop-right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 30%;
  }

  .drop-search-button {
    padding: 10px;
    background-color: #e7ce3a;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 16px;

  }

  select#category-first,
  select#category-second {
    width: 100%;
    border-radius: 5px;
    height: 50px;
    border: none;
    padding: 5px;
    font-size: 12px;
  }

  .mv-sp-selects {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 100%;
  }

  .mv-sp-selects::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
  }

  .mv-sp-selects select {
    appearance: none;
    /*min-width: 230px;*/
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
  }

}

/*==================================
=            RESPONSIVE             =
==================================*/

/*=====  End of RESPONSIVE  ======*/



/*==================================
=           TOP NEWPOST           =
==================================*/
section.post {
  /*max-width: 90%;*/
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.bg-text-newspace {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 10rem;
  letter-spacing: -3px;
  display: inline-block;
  position: absolute;
  font-weight: bold;
  color: #f9f9f9;
  /* color: #ffffff; */
  bottom: -1.5rem;
  right: -1.5rem;
  /* -webkit-text-stroke: 1px #f2f2f2; */
}

.bg-text-ranking {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 10rem;
  letter-spacing: -3px;
  display: inline-block;
  position: absolute;
  font-weight: bold;
  color: #f4f4f4;
  /* color: #ffffff; */
  bottom: -1.5rem;
  right: -1.5rem;
  /* -webkit-text-stroke: 1px #f2f2f2; */
}


.space-card {
  background-color: #ffffff;
  /*width: calc(20% - 16px);
  min-width:  calc(20% - 16px);*/
  display: block;
  border-radius: 10px;
  position: relative;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .1019607843);
}

.img-container {
  width: 100%;
  /* 画像コンテナの幅を50%に設定 */
  position: relative;
}

.img-container::before {
  content: "";
  /* 疑似要素を生成して背景を設定 */
  display: block;
  padding-top: 66.6667%;
  /* アスペクト比 3:2 の場合（2 ÷ 3 × 100） */
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0px 0px;
}

.card-space-dataarea {
  /*background-color: #f3f4fc;*/
  background-color: #f4f5f8;
  padding-top: 5px;
  border-radius: 0 0 10px 10px;
}

.card-space-dataarea span {
  font-size: 11px;
  font-weight: 500;
  padding: 10px;
  color: #b0b2ba;
}



.card-space-title {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 10px 0 10px;
  margin-bottom: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 52px;
}

.card-space-discription {
  font-size: 11px;
  padding: 0 10px 0px;
  margin-bottom: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 32px;
}

.card-space-category {
  font-size: 10px;
  font-weight: 500;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  padding: 5px 10px;
  margin-top: 10px;
}

.card-space-category p {
  width: 25%;
  min-width: 25%;
  display: inline-block;
  margin: 0 auto;
  white-space: nowrap;
}

.card-space-category span {
  font-weight: 300;
  margin-left: 5px;
  color: var(--maincolor);
}

.card-space-area {
  font-size: 10px;
  font-weight: 500;
  padding: 5px 10px;
}

.card-space-area p {
  width: 25%;
  min-width: 25%;
  display: inline-block;
  margin: 0 auto;
  white-space: nowrap;
}

.card-space-area span {
  font-weight: 300;
  margin-left: 5px;
  width: 70%;
  min-width: 70%;
  color: var(--maincolor);
}

.card-space-border {
  border-right: 1px solid #dddddd;
  padding: 0 10px;
}

.card-space-file {
  font-size: 10px;
  font-weight: 500;
  padding: 5px 10px;
  border-top: 1px solid #dddddd;
}

.card-space-file p {
  width: 25%;
  min-width: 25%;
  display: inline-block;
  margin: 0 auto;
  white-space: nowrap;
}

.card-space-file span {
  font-weight: 300;
  margin-left: 5px;
  color: var(--maincolor);
}




section.ranking-post {
  background: #f9f9f9;
  position: relative;
  overflow: hidden;
}


.section-title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 500;
}

.section-title p {
  border: 1px solid #dddddd;
  border-radius: 2px;
  font-size: 12px;
  padding: 10px 15px;
  display: flex;
  float: right;
  margin-top: 10px;
  color: var(--maintext);
}

.section-title p a {
  color: #000;
}


.l-inner {
  position: relative;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10rem;
}

.l-inner-detail {
  position: relative;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10rem;
}

.l-section {
  /*border-top: 1px solid #eee;*/
}

.l-section .l-inner,
.l-section .l-inner-detail {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

[class*=swiper-post]:focus {
  outline: none;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}

.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}


a.swiper-slide {
  text-decoration: none;
  color: var(--maintext);
}


.top-slide .swiper-button-prev,
.top-slide .swiper-button-next {
  display: grid;
  place-content: center;
  width: 4rem;
  height: 2.5rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.top-slide .swiper-button-prev::before,
.top-slide .swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border-radius: 3px;
  border: solid 1px var(--maincolor);
}

.top-slide .swiper-button-prev::after,
.top-slide .swiper-button-next::after {
  width: 0.6rem;
  height: 0.6rem;
  content: "";
  border: solid var(--maincolor);
  border-width: 2px 2px 0 0;
}

.top-slide .swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.top-slide .swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.top-slide {
  overflow: hidden;
}

.top-slide .swiper {
  overflow: visible;
}

.top-slide .swiper-controller {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 2rem;
  margin-left: -10px;
}

.top-slide .swiper-pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 0 auto 0 0;
  text-align: center;
}

.top-slide .swiper-pagination-bullet {
  width: 1.6rem;
  height: 5px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  vertical-align: top;
  background-color: #9a9a9a;
}

.top-slide .swiper-pagination-bullet-active {
  width: 4rem;
  background-color: var(--color-theme);
}

.top-slide .swiper-button-prev,
.top-slide .swiper-button-next {
  position: relative;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin: 0;
}

.top-slide .swiper-button-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.top-slide .swiper-button-disabled::before {
  /*-webkit-box-shadow: var(--box-shadow-inset);
          box-shadow: var(--box-shadow-inset);*/

}

.top-slide .swiper-slide {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-right: 16px;
}

.top-slide .swiper-slide:last-child {
  margin-right: 0; /* 最後のスライドはmarginなし */
}

.top-slide .slide {
  overflow: hidden;
  width: 14rem;
  border-radius: 4px;
  /*-webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);*/
  box-shadow: 0px 0px 21px 7px #e8e8e8;
  border-radius: 10px;
}

.top-slide .slide-media {
  padding-top: 62.5%;
}

.top-slide .slide-media img {
  height: calc(100% + 16px);
  -webkit-transform: translateY(-16px);
  transform: translateY(-16px);
}

.top-slide .slide-content {
  padding: 3.2rem;
}

.top-slide .slide-date {
  font-size: 1.2rem;
  line-height: 1;
  display: block;
  color: var(--color-theme);
}

.top-slide .slide-title {
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3.2em;
  margin-top: 1.6rem;
}


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


  .top-slide .swiper-button-prev,
  .top-slide .swiper-button-next {
    display: grid;
    place-content: center;
    width: 7rem;
    height: 4.5rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    right: 0;
  }

}

@media only screen and (max-width: 1280px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  .l-inner {
    padding: 0 4rem;
  }

  .l-inner-detail {
    padding: 0 2rem;
  }

  .pc {
    display: none !important;
  }
}

@media only screen and (max-width: 599px) {
  html {
    font-size: 50%;
  }

  .pc-tab {
    display: none !important;
  }

  .top-slide .slide {
    width: 24rem;
  }

  .section-title {
    font-size: 21px;
  }

  .section-title p {
    margin-top: 8px;
  }

}

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

  .top-slide .swiper-button-prev::before,
  .top-slide .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }

  .top-slide .swiper-button-prev:hover::before,
  .top-slide .swiper-button-next:hover::before {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  .top-slide .slide {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }

  .top-slide .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }

  .top-slide .slide:hover {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
    -webkit-box-shadow: var(--box-shadow-hover);
    box-shadow: var(--box-shadow-hover);
  }

  .top-slide .slide:hover img {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

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

.pc-img { display: block !important; }
.sp-img { display: none !important; }
 

@media only screen and (max-width: 650px) {
    .pc-img { display: none !important; }
    .sp-img { display: block !important; }
    .support_banner{
      width: calc(100% + 10px);
    }
}

.rank-ribbon {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 10px;
  margin: 0;
  padding: 7px 0;
  z-index: 2;
  width: 40px;
  text-align: center;
  font-size: 17px;
  color: white;
  /*background: #ff785b;*/

}

.rank-ribbon:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-bottom: 10px solid transparent;
}

/* 連番ごとに異なる背景色を設定 */
.swiper-slide:nth-child(1) .rank-ribbon {
  background-color: #cbbe76;
}

.swiper-slide:nth-child(1) .rank-ribbon:after {
  border-left: 20px solid #cbbe76;
  border-right: 20px solid #cbbe76;
}

.swiper-slide:nth-child(2) .rank-ribbon {
  background-color: silver;
}

.swiper-slide:nth-child(2) .rank-ribbon:after {
  border-left: 20px solid silver;
  border-right: 20px solid silver;
}

.swiper-slide:nth-child(3) .rank-ribbon {
  background-color: #cd7f32;
}

.swiper-slide:nth-child(3) .rank-ribbon:after {
  border-left: 20px solid #cd7f32;
  border-right: 20px solid #cd7f32;
}

.swiper-slide:nth-child(n + 4) .rank-ribbon {
  background-color: #808080;
}

.swiper-slide:nth-child(n + 4) .rank-ribbon:after {
  border-left: 20px solid #808080;
  border-right: 20px solid #808080;
}



/*==================================
=           banner-search          =
==================================*/
.banner-search-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4列のグリッドを指定 */
  gap: 20px;
  /* 列と行の間隔を調整 */
}

.banner-search-area a {
  text-decoration: none;
  color: var(--maintext);
}

.banner-search-area a:not(.bsarea-number):hover {
  background-color: #f3f3f3;
  transition: all 0.5s 0s ease;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .1019607843);
}

.banner-search-area a:hover {
  opacity: 0.8;
}


.bs-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 100vh;
  font-size: 14px;
  position: absolute;
  bottom: 10%;
  left: 5%;
  width: 90%;
}

.bs-label span {
  margin-left: 15px;
  font-weight: 500;
  font-size: var(--vwtext);
}

.bs-number {
  background: var(--maincolor);
  color: #ffffff;
  border-radius: 100vh;
  text-align: center;
  display: inline-block;
  padding: 2px 20px;
  margin: 5px;
}

.bs-content {
  position: relative;
}

.bs-content img {
  width: 100%;
  border-radius: 3px;
  height: 150px;
  object-fit: cover;
}

.bsarea-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
  border: 1px solid #dddddd;
}

.bsarea-label span {
  margin-left: 15px;
  font-weight: 500;
  font-size: var(--vwtext);
}

.bsarea-number {
  background: var(--maincolor);
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  display: inline-block;
  padding: 2px 20px;
  margin: 10px;
}


.gallery03 {
  margin-bottom: 3rem;
  margin-top: 3rem;
  padding-bottom: 3rem;
  background: #f8f8f9;
}

.gallery03 .l-inner {
  padding-bottom: 0;
}

.gallery03 .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.gallery03 .swiper-slide {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.gallery03 .slide {
  width: var(--slide-width);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  --slide-width: 200px;
}

.gallery03 .slide-media {
  height: 130px;
}

.gallery03 .slide-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.2rem 1.6rem 0rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.3)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%);
}

.gallery03 .slide-title {
  font-size: 1rem;
  line-height: 1;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gallery03 .slide:hover {
  width: calc(var(--slide-width) * 1.5);
}

.gallery03 .slide:hover .slide-content {
  opacity: 1;
}


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

  .banner-search-area {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .bs-label span {
    font-size: var(--spvwtext);
  }

  .bs-number {
    padding: 2px 10px;
    font-size: 11px;
  }

  .bsarea-label span {
    font-size: var(--spvwtext);
  }

  .bsarea-number {
    padding: 2px 10px;
    font-size: 11px;
  }

}


/*==================================
=          Top News          =
==================================*/

.top-news {
  height: 300px;
  width: 100%;
  overflow-y: scroll;
  padding: 20px;
  border: 1px solid #eeeeee;
}

.top-news-link {
  display: flex;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.top-news-time {
  display: flex;
  align-items: center;
  background-color: var(--subcolor);
  color: #ffffff;
  padding: 2px 8px 3px 8px;
  margin-right: 15px;
  font-size: 12px;
}

.top-news-title {}


/*==================================
=          User InterView          =
==================================*/

.interview-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.interview-card {
  background-color: #ffffff;
  /*width: calc(20% - 16px);
  min-width:  calc(20% - 16px);*/
  display: block;
  border-radius: 10px;
  position: relative;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .1019607843);
}

.img-container {
  width: 100%;
  /* 画像コンテナの幅を50%に設定 */
  position: relative;
}

.img-container::before {
  content: "";
  /* 疑似要素を生成して背景を設定 */
  display: block;
  padding-top: 66.6667%;
  /* アスペクト比 3:2 の場合（2 ÷ 3 × 100） */
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0px 0px;
}

.interview-company {
  background: var(--maincolor);
  color: #ffffff;
  position: absolute;
  top: 3%;
  border-radius: 0 3px 3px 0;
  font-weight: 500;
  font-size: var(--vwtext);
  padding: 4px 10px;
  max-width: 80%;
}

.interview-space-dataarea {
  /*background-color: #f3f4fc;*/
  background-color: #f4f5f8;
  padding-top: 5px;
  border-radius: 0 0 10px 10px;
}

.interview-space-dataarea span {
  font-size: 11px;
  font-weight: 500;
  padding: 10px;
  color: #b0b2ba;
}



.interview-space-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 2行以上のテキストを省略表示 */
}

.interview-space-discription {
  font-size: 11px;
  padding: 0 10px 10px;
}

.interview-textarea {
  padding: 10px;
}

.interview-label {
  background-color: var(--subcolor);
  color: #ffffff;
  border-radius: 100vh;
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  min-width: 80px;
  text-align: center;
  margin-bottom: 3px;
}

.interview-text {
  font-size: 12px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 480px) {
  .interview-area {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
  }

  .interview-company {
    font-size: 14px;
  }

}


/*==================================
=               Footer            =
==================================*/

section.footer {
  border-top: 1px solid #f0f0f0;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.footer-top a {
  text-decoration: none;
  color: var(--maintext);
}

.footer-box {
  background: #ffffff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .1019607843);
  border-radius: 10px;
  padding: 30px 15px;
  text-align: center;
  font-size: var(--vwtext);
  font-weight: 500;
}

.footer-box img {
  display: block;
  margin: 1rem auto;
  width: 2.5rem;
}

.footer-mid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.footer-company {
  text-align: center;
  font-size: 12px;
}

.footer-company img {
  width: 3rem;
  display: block;
  margin: 0 auto;
}

.footer-listmenu {
  font-size: 12px;
  border-right: 1px solid var(--subcolor);
  display: flex;
  padding: 5px;
}

.footer-listmenu ul {
  text-align: left;
  /* テキストを左寄せに */
  margin: 0 auto;
  /* ul要素を中央寄せに */
  padding: 0;
}

.footer-listmenu li {
  list-style: none;
  margin-bottom: 7px;
}

.footer-listmenu li:not(.footer-h)::before {
  content: "chevron_right";
  font-family: "Material Symbols Outlined";
  margin-right: 8px;
  position: relative;
  top: 1px;
}

.footer-listmenu a {
  text-decoration: none;
  color: #ffffff;
}


.footer-h {
  font-weight: 500;
}

.footer-bg {
  background-color: var(--maincolor);
}


.footer-bottom {
  color: #ffffff;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0px;
}

.footer-bottom img {
  width: 80%;
}

.footer-top-bg {}


.copyright {
  border-top: 1px solid var(--subcolor);
  margin-top: 20px;
  padding-top: 20px;
  font-size: 12px;
  text-align: center;
  color: #ffffff;
}

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

  .footer-top-bg {
    background-color: var(--bg-blue);
  }

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .footer-box {
    font-size: 13px;
  }

  .footer-box img {
    width: 4rem;
  }

  .footer-bottom {
    color: #ffffff;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
  }

  .footer-bg {
    padding-bottom: 90px;
  }

  .footer-bottom img {
    width: 220px;
    margin: 20px auto 50px;
  }

  .footer-listmenu {
    border-right: none;
  }

  .footer-listmenu ul {
    width: 100%;
    border-bottom: 1px solid;
    border-color: var(--subcolor);
    line-height: 30px;
    padding-bottom: 5px;
  }

  .footer-listmenu li {
    width: 49%;
    display: inline-flex;
  }

  .footer-h {
    display: block !important;
  }

  .copyright {
    border-top: none;
  }

}


/*==================================
=       Under search results      =
==================================*/

.page-navigation-list {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
}

.page-navigation-list ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-navigation-list li::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  margin: 0 10px;
}

.page-navigation-list li:last-child::after {
  content: "";
}

.page-navigation-list a {
  text-decoration: none;
  color: var(--maintext);
}


.under-search-left-area {
  width: 30%;
  margin-right: 30px;
}

.sidemenu-wrap {
  display: flex;
}

.under-search-right-area {
  width: 70%;
}


.search-wrap {
  box-shadow: var(--box-shadow-bgwhite);
  border-radius: 10px;
}

.search-title {
  background-color: var(--subcolor);
  color: #ffffff;
  border-radius: 10px 10px 0 0;
  padding: 15px 20px;
  font-size: 14px;
}


.search-box {
  padding: 20px;
  font-size: 15px;

}

.search-box span {
  margin-left: 5px;
}

.search-box ul {
  margin: 0;
  padding: 0;
}

.search-box li {
  list-style: none;
  line-height: 30px;
  border-bottom: 1px solid #e9ebf1;
  padding-top: 10px;
}

.search-box li:first-child {
  padding-top: 0px;
}

.search-box a {
  text-decoration: none;
  color: var(--maintext);
}

.search-box a:hover {
  font-weight: 500;
}

/* tag */

.tag-heading {
  margin-bottom: 10px;

}

.search-tag-box {
  padding: 20px;
  font-size: 15px;
}

.search-tag-box span {
  margin-left: 5px;
}



.checkbox-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.checkbox-container {
  margin-bottom: 15px;
}

.checkbox-container .label {
  cursor: pointer;
  border: 1px solid #e9ebf1;
  border-radius: 100vh;
  margin-right: 7px;
  margin-bottom: 8px;
  padding: 2px 7px;
  font-size: 16px;
}

.checkbox-container .check_box {
  display: none;
}

.checkbox-container .check_box:checked+.label {
  background-color: var(--subcolor);
  color: #ffffff;
  border: 1px solid;
  border-color: var(--subcolor);
}


.search-space-wrap {
  box-shadow: var(--box-shadow-bgwhite);
  border-radius: 10px;
  display: flex;
  margin-bottom: 20px;
}

.search-space-image {
  position: relative;
}

.search-space-image img {
  border-radius: 10px 0px 0px 10px;
  object-fit: cover;
  height: 290px;
  width: 300px;
}

.search-space-image span {
  position: absolute;
  top: 0;
  left: 20px;
  background: #db305f;
  color: #ffffff;
  width: 48px;
  padding: 5px 10px;
  font-size: 14px;
}

.search-space-image span:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 24px solid #db305f;
  border-right: 24px solid #db305f;
  border-bottom: 10px solid transparent;
}


.search-space-info-wrap {
  padding: 20px;
  width: 100%;
}

.search-space-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.ssiw-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}

.ssiw-item {
  margin-bottom: 5px;
}

li.ssiw-item {
  margin-left: 1.2em;
  text-indent: -0.6em;
}


.ssiw-checkmark {
  margin-right: 5px;
  color: var(--color-point);
}

.ssiw-price-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.ssiw-price-wrap span {
  border: 1px solid;
  padding: 4px 7px 4px 7px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--subcolor);
  color: #ffffff;
}

.ssiw-price-member {
  font-size: 18px;
  font-weight: 800;
  margin-left: 10px;
}



.ssiw-price-nomember {
  font-size: 12px;
  font-weight: bold;

}

.ssiw-price-nomember a {
  text-decoration: none;
  color: var(--color-point);
}

.ssiw-category {
  font-size: 12px;
  padding: 4px 6px;
  background-color: #efefef;
  margin-bottom: 10px;
}

.ssiw-category ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ssiw-category a {
  text-decoration: none;
  color: var(--maintext);
}

.ssiw-category a:hover {
  font-weight: bold;
}

.ssiw-category li::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  margin: 0 10px;
}

.ssiw-category li:last-child::after {
  content: "";
}

.ssiw-button {
  background: #db305f;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  padding: 15px;
  width: 100%;
  display: block;
  border-radius: 5px;
}

a.ssiw-button {
  text-decoration: none;
}


/* pagenation */

.pagenation {
  background: #ffffff;
  box-shadow: var(--box-shadow-bgwhite);
  border-radius: 100vh;
  margin: 20px 0;
  padding: 15px 20px;
  display: inline-block;
}

.pc-pagenation {
  display: flex;
  text-align: center;
}

.pc-pagenation li {
  font-size: 14px;
  flex: 1;
}

.pc-pagenation li:first-child {
  text-align: left;
}


.pc-pagenation li:last-child {
  text-align: right;
}

.pc-pagenation a {
  background: #dddddd;
  border-radius: 100vh;
}


.sp-pagenation {
  display: none;
}


.pagination-wrap {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}


.pagination-001 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 12px;
  list-style-type: none;
  padding: 0;
  font-size: 18px;
}

.pagination-001 li {}

.pagination-001 a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  border: 1px solid #bacad6;
  border-radius: 100vh;
  color: #bacad6;
}

.pagination-001 a:not(:hover) {
  text-decoration: none;
}

.pagination-001 .current a {
  background-color: var(--subcolor);
  border: 1px solid var(--subcolor);
  color: #fff;
  pointer-events: none;
}


/*
.search-accordion {
  display: none;
  }
 */


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

  .sidemenu-wrap {
    flex-direction: column;
  }


  .under-search-left-area {
    width: 100%;
    margin: 0;
  }

  .under-search-right-area {
    width: 100%;
    margin-top: 30px;
  }

  .search-space-image img {
    width: 250px;
  }

}

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

  .search-space-wrap {
    flex-direction: column;
  }

  .search-space-image img {
    width: 100%;
    border-radius: 10px 10px 0 0;
    max-height: 216px;
  }

  /*
.search-accordion {
  margin: 3em auto;
  max-width: 60vw;
  display: block;
  }
  .search-toggle {
  display: none;
  }
  .search-option {
  position: relative;
  margin-bottom: 1em;
  }
  .search-ac-title,
  .search-content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
  }
  .search-ac-title {
  border: solid 1px #ccc;
  padding: 1em;
  display: block;
  color: #333;
  font-weight: bold;
  }
  .search-ac-title::after,
  .search-ac-title::before {
  content: "";
  position: absolute;
  right: 1.25em;
  top: 1.25em;
  width: 2px;
  height: 0.75em;
  background-color: #999;
  transition: all 0.3s;
  }
  .search-ac-title::after {
  transform: rotate(90deg);
  }
  .search-content {
  max-height: 0;
  overflow: hidden;
  }
  .search-content p {
  margin: 0;
  padding: 0.5em 1em 1em;
  font-size: 0.9em;
  line-height: 1.5;
  }
  .search-toggle:checked + .search-ac-title + .search-content {
  max-height: 500px;
  transition: all 1.5s;
  }
  .search-toggle:checked + .search-ac-title::before {
  transform: rotate(90deg) !important;
  }
*/
}


/**********************************/
#search-menu {
  min-width: 250px;
}


.search-accordion {
  background-color: var(--subcolor);
  color: #ffffff;
  cursor: pointer;
  padding: 15px 20px;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
}


.search-accordion.active {
  border-radius: 10px 10px 0 0;
}

.search-symbol {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-symbol span {
  display: block;
  background-color: #FFFFFF;
  width: 100%;
  height: 1px;
  transition: all 0.4s ease;
}

.search-symbol span:nth-of-type(1) {
  transform: translateX(15px);
}

.search-symbol span:nth-of-type(2) {
  transform: rotate(-90deg);
}

.search-accordion.active .search-symbol span:nth-of-type(2) {
  transform: rotate(0deg);
}

.search-panel {
  list-style-type: none;
  margin: 0;
  padding: 0 20px;
  background-color: #fefcf3;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

ul.search-panel {
  border-radius: 0 0 10px 10px;
  background-color: #ffffff;
  box-shadow: var(--box-shadow-bgwhite);
}

.search-panel li {
  list-style: none;
  line-height: 30px;
  border-bottom: 1px solid #e9ebf1;
  padding-top: 10px;
}

.search-panel li:last-child {
  margin-bottom: 20px;
}

.search-panel a {
  text-decoration: none;
  color: var(--maintext);
  font-size: 16px;
}

.search-panel a:hover {
  font-weight: 500;
}

.search-area {
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  padding: 10px 0;
  align-items: center;
}

select#search-area-first,
select#search-area-second,
select#search-area-second-another,
select#search-area-third {
  width: 60%;
  padding: 10px;
}

.use-label {
  display: none;
}

.ac-mt {
  margin-top: 25px;
}

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

  .ac-mt {
    margin-top: 10px;
  }


  #search-menu {
    width: 100%;
  }

  .search-accordion {
    border-radius: 3px;
    background-color: #f0f0f0;
    color: #3e3e3e;
    font-size: 12px;
    font-weight: 600;
  }

  .search-symbol span {
    background-color: #b8b8b8;
  }

  .use-label {
    border: 1px solid;
    border-color: var(--subcolor);
    padding: 1px 5px 2px;
    font-size: 12px;
    display: block;
    margin: 1px auto 0 10px;
    border-radius: 100vh;
    font-weight: 600;
  }
}

/*  modal  */

.page-wrapper {
  width: 100%;
  height: 100%;
  background: url(https://goo.gl/OeVhun) center no-repeat;
  background-size: cover;
}

.blur-it {
  filter: blur(4px);
}

/* .modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(44 49 71 / 70%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
  z-index: 50;
}

.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 600px;
  height: 400px;
  border-radius: 10px;
  padding: 20px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%;
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
} */

.head {
  width: 90%;
  height: 32px;
  /*padding: 12px 30px;
  overflow: hidden;
  background: #e2525c;*/
}

.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #aeaeae;
  line-height: 15px;
}

.modal-content {
  /* padding: 5% 10%; */
  padding: 5% 8%;
}

.login-please {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 15px;
}

.login-please span {
  color: var(--color-red);
}

.login-please-button {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 12px 30px;
  text-align: center;
}

.login-please-button a {
  font-weight: 600;
  color: var(--color-red);
}

a.modalbtn.trigger {}

/********   Form Modal *********/

.form-modal-wrap {
  padding: 30px;
  border: 6px solid #f0f0f0;
  border-radius: 10px;
  margin-bottom: 15px;
  text-align: center;
}

.form-group-modal {}

.form-group-modal label {
  display: block;
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 18px;
  color: var(--subcolor);
}

.form-group-modal input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  display: inline-block;
}

.form-group-modal button {
  width: 100%;
  background-color: #db305f;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
}



@media screen and (max-width: 600px) {
  .modal {
    width: 95%;
    height: auto;
    border-radius: 10px;
    padding: 10px;
    display: none;
    margin: 0;
    margin-left: 2.5%;
    position: absolute;
    top: 30%;
    left: 0;
    background: #fff;
    transition: all 0.5s ease-in-out;
  }

  .modal-content {
    padding: 10% 5%;
  }

  .login-please-button {
    font-size: 14px;
  }
}


/**************************

Space Detail

****************************/

.detail-top-wrap {
  display: flex;
}

.detail-thumb {
  width: 40%;
  margin-right: 20px;
  position: relative;
}

.detail-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 313px;
}


.detail-info {
  width: 60%;
}


.di-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 15px;
}

.bookmark-button {
  position: absolute;
  bottom: 23px;
  left: 10px;
  padding: 10px;
  background-color: #ff9a7a;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.bookmark-button:hover {
  background-color: #4070ff;
}

.bookmark-done-button {
  position: absolute;
  bottom: 23px;
  left: 10px;
  padding: 10px;
  background-color: #4070ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.bookmark-done-button:hover {
  background-color: #ff9a7a;
}

.di-tag {}

.di-tag ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
}

.di-tag li {
  list-style: none;
  border: 1px solid;
  border-color: var(--subcolor);
  border-radius: 100vh;
  font-size: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 1px 5px;
}

.di-tag a {
  color: var(--subcolor);
}

.di-tag a:hover {
  font-weight: 600;
}


.di-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.di-item {
  margin-bottom: 5px;
}

li.di-item {
  margin-left: 1.2em;
  text-indent: -0.6em;
}


.di-checkmark {
  margin-right: 5px;
  color: var(--color-point);
}

.di-discription {
  line-height: 1.5;
}

.di-summary {
  border: 2px solid #dddddd;
  padding: 15px;
  position: relative;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 14px;
}

.di-summary span {
  position: absolute;
  top: -3px;
  left: 3%;
  transform: translate(0, -50%);
  background: #f9fdff;
  color: #c1c1c1;
  font-size: 16px;
  font-weight: 500;
}


/* CTA */
.detail-cta-wrap {
  width: 100%;
  height: auto;
  /*background: linear-gradient(to bottom right, #ef714e, #ef9431);*/
  background-color: #fce8da;
  padding: 30px;
  text-align: center;
  position: relative;
  margin-top: 50px;
  /* bottom fixed ver
      padding: 15px;
    position: fixed;
    bottom: 0;
    z-index: 500;
    */
}

.dc-img {}

.detail-cta-wrap img {
  position: absolute;
  height: 100%;
  padding: 30px 30px 0 30px;
  top: 0;
  left: 0;
}

.dc-voice {}

.dc-voice ul {
  display: flex;
  justify-content: center;
}

.dc-voice li {
  background: #ffffff;
  border-radius: 100vh;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 10px;
  margin-bottom: 10px;
}

.sample li:last-child {
  margin-right: 0px;
}

.dc-inbox {
  /*background: #ffffff;*/
  border-radius: 15px;
  padding: 15px;
}

.cta-pr {
  font-size: 30px;
  color: #ff9a7a;
  font-weight: 600;
  text-align: center;
  margin: 10px 0 20px 0px;
  position: relative;
  display: inline-block;
  padding: 0 30px;
}

.cta-pr span {
  font-size: 18px;
  font-weight: 500;
  display: block;
}


.cta-pr:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 1px;
  height: 100%;
  background: #ff9a7a;
  border-radius: 3px;
  transform: rotate(-25deg);
}

.cta-pr:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #ff9a7a;
  border-radius: 3px;
  transform: rotate(25deg);
}

.dc-btn {
  display: flex;
  justify-content: center;
}

.space-bookmark {
  background: #dddddd;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 20px;
  border-radius: 10px;

}

.space-contact {
  background: #ff9a7a;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 25px 20px;
  border-radius: 10px;
  min-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.space-contact:hover {
  background: #fc8a67;
}

.form-title {
  font-size: 28px;
  font-weight: 600;
  margin-top: 50px;
  margin-bottom: 20px;
  padding-right: 10px;
  line-height: 1.5;
  text-align: center;
  color: var(--maintext);
}

/*
.form-label {
  border: 1px solid #eeeeee;
  padding: 15px;
  font-size: 14px !important;
  font-weight: 500;
  background: #fbfbfb;
  display: block;
  color: var(--subcolor);
  margin-bottom: 20px;
  line-height: 1.8;
}
*/

.form-label {
  /* border: 1px solid #eeeeee; */
  /* padding: 15px; */
  font-size: 14px !important;
  font-weight: 700;
  background: #fbfbfb;
  display: block;
  color: var(--subcolor);
  margin-bottom: 8px;
  line-height: 1.8;
}


.form-textarea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  display: inline-block;
}

.form-button button {
  width: 100%;
  background-color: #db305f;
  color: #fff;
  padding: 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
}

.support_banner img {
  width: 100%;
}

/**  共通Wrap **/

.detail-wrap {
  border-radius: 15px;
  box-shadow: var(--box-shadow-bgwhite);
  padding: 50px;
  margin-top: 50px;
  background: #ffffff;
}

.pricelink {
  font-weight: 500;
  color: var(--color-point);
}

.detail-title {
  font-size: 28px;
  font-weight: 600;
  margin-top: 50px;
  margin-bottom: 20px;
  padding-right: 10px;
  line-height: 1.5;
  display: inline-block;
  position: relative;
  z-index: 1;
  border-radius: 3px;
}

/*  center ver

position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding-left: 10px;

*/

.lineMarker.scroll-in {
  background-position: -100% 1.5rem;
}

.lineMarker {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgb(223 238 245) 10%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgb(223 238 245) 10%);
  background-image: linear-gradient(left, transparent 50%, rgb(223 238 245) 10%);
  background-repeat: repeat-x;
  background-size: 200% .7em;
  background-position: 0 .8em;
  transition: all 2.0s ease;
}



.sortable-table {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-collapse: collapse;
  font-size: 14px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px 10px 0 0;
}


.table-design th:first-child {
  border-top-left-radius: 12px;
  /* 左上の角を丸くする */
}

.table-design th:last-child {
  border-top-right-radius: 12px;
  /* 右上の角を丸くする */
}

.sortable-table thead tr {
  background-color: var(--subcolor);
  color: #ffffff;
  text-align: left;
}

.sortable-table th,
.sortable-table td {
  padding: 15px;
}

.sortable-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.sortable-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}


.sortable-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}





#my-table1 {
  width: 100%;
  border-collapse: collapse;
}

#my-table1 th {
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
}

#my-table1 th,
#my-table1 td {
  flex: 1;
  text-align: center;
  border: 1px solid #ddd;
  /* セルの境界線を追加（オプション） */
}





.detail-main-wrap {
  border-radius: 15px;
  box-shadow: var(--box-shadow-bgwhite);
  padding: 20px;
  margin-top: 30px;
}


/* chart js*/
#tooltip-canvas {
  position: absolute;
  top: 200px;
  left: 75px;
}

.btn-reload {
  position: absolute;
  top: 280px;
  left: 50%;
  width: 30px;
  margin-left: -15px;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.btn-reload:hover {
  opacity: 1;
}

.detail-dete-wrap {
  display: flex;
}

.dete-sex {

  width: 33%;
}

#my-chart {
  width: 100%;
}





/****************************

QA

******************************/

.detail-qa-wrap {
  border-radius: 15px;
  box-shadow: var(--box-shadow-bgwhite);
  padding: 40px;
  margin-top: 30px;
  background: #ffffff;
}

.qa-container {
  width: 100%;
  font-size: 14px;
}

.qa-list:not(:first-child) {
  margin-top: 10px;
}

.question-title {
  background: #f1f1f1;
  cursor: pointer;
  padding: 20px 40px;
  position: relative;
}

.question-title:before {
  position: absolute;
  display: block;
  content: 'Q';
  top: 20px;
  left: 12px;
  color: var(--color-red);
  font-weight: 600;
}

.question-title:after {
  position: absolute;
  display: block;
  content: '';
  top: 40%;
  right: 22px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(-45deg);
  transition: all .3s ease-in-out;
}

.question-title.collapsed:after {
  transform: rotate(135deg);
  top: 45%;
}

.answer-text {
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  display: block;
  padding: 20px 40px;
  position: relative;
}

.answer-text:before {
  position: absolute;
  display: block;
  content: 'A';
  top: 20px;
  left: 12px;
  color: var(--subcolor);
  font-weight: 600;
}


/***********************
user voice
************************/

.detail-voice-wrap {
  border-radius: 15px;
  box-shadow: var(--box-shadow-bgwhite);
  padding: 40px;
  margin-top: 30px;
}

.uservoice {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.uservoice .faceicon {
  float: left;
  margin-right: -90px;
  width: 50px;
}

.uservoice .faceicon img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.uservoice .chatting {
  width: 100%;
}

.voicebox {
  font-size: 14px;
  /*display: inline-block;*/
  position: relative;
  margin: 5px 0 0 75px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #f1f1f1;
}

.voicebox span {
  font-weight: 600;
  margin-bottom: 5px;
}

.voicebox:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #f1f1f1;
}

.voicebox p {
  margin: 0;
  padding: 0;
  margin-top: 5px;
}


/*************************
staff voice
**************************/

.comment-container {
  display: flex;
  align-items: center;
}

.comment-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.comment-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
}

.comment-content span {
  font-weight: 600;
}

.comment-content p {
  margin-top: 5px;
}

@media (max-width: 768px) {
  .comment-container {
    flex-direction: column;
  }

  .comment-image {
    margin-right: 0;
    margin-bottom: 10px;
  }
}


/*************************
table info
***************************/

.detail-table-info {
  width: 100%;
  border-collapse: collapse;
  /* margin-top: 20px;*/
  font-size: 14px;

}

.detail-table-info td {
  border: 1px solid #e7e7e7;
  text-align: left;
  padding: 15px;
}

.detail-table-info td:first-child {
  background: #f1f1f1;
  width: 35%;
}

.dti-mini-title {
  font-size: 18px;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 5px;
  background-color: var(--subcolor) !important;
  color: #ffffff;
  text-align: center !important;
  border-radius: 10px 10px 0 0;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
}



/**************************
dl-file
****************************/

.dl-file-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.dl-file {
  background-color: #ffffff;
  box-shadow: var(--box-shadow-bgwhite);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.dl-file img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  filter: blur(2px);
}

.dl-file-content {
  padding: 10px 15px 15px 15px;
  font-size: 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dl-file-content p {
  font-weight: 600;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  height: 40px;
}

.dl-file-content ul {
  margin: 10px 0;
}

.dl-file-button {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: var(--color-point);
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-radius: 100vh;
  cursor: pointer;
  font-weight: 500;
}

a.dl-file-button.modalbtn.trigger {
  color: #ffffff;
}


/***************************
detail-map
****************************/

.detail-ad-text {
  padding: 15px;
  border: 1px solid #ddd;
  font-weight: 600;
  margin-bottom: 15px;
}

.detail-ad-text span {
  display: inline-block;
  margin-left: 10px;
  font-weight: 400;
}


/***************************
detail-flow
****************************/

.flow_design07 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow07 {
  padding-left: 0;
  width: 100%;
  counter-reset: step-counter;
  list-style-type: none;
  margin-bottom: 20px;
}

.flow07>li {
  list-style-type: none;
  display: flex;
}

.flow07>li:not(:last-child) {
  margin: 0 0 50px;
}

.flow07>li .icon07 {
  width: 60px;
  box-sizing: border-box;
  padding: 20px 10px 10px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  background: #c3b999;
  border-radius: 5px 5px 0 0;
  position: relative;
  line-height: 125%;
  margin: 0;
  font-weight: 500;
}

.icon07::before {
  counter-increment: step-counter;
  content: "STEP " counter(step-counter);
  font-size: 14px;
  font-weight: bold;
  white-space: pre-line;
}

.flow07>li .icon07 span {
  display: block;
  font-size: 20px;
  margin-top: 7px;
}

.flow07>li .icon07::after {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 20px solid #c3b999;
  position: absolute;
  bottom: -20px;
  left: 0;
}

.flow07>li dl {
  padding: 0 0 0 30px;
  width: calc(100% - 115px);
}

.flow07>li dl dt {
  padding: 0 0 5px;
  margin: 0 0 15px;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 4px solid #CCCCCC;
  position: relative;
}

.flow07>li dl dt::after {
  content: '';
  width: 20%;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
  background-color: #c3b999;
}

.flow07>li dl dd {
  margin: 0;
}

.sp-br {
  display: none;
}


/*********************************

Detail responsive

**********************************/
@media screen and (max-width: 800px) {

  .sp-br {
    display: block;
  }


  /* top view */

  .detail-top-wrap {
    flex-direction: column;
  }

  .detail-thumb {
    width: calc(100% + 4rem);
    margin: 20px -2rem;
  }

  .detail-info {
    width: 100%;
  }

  .di-title {
    font-size: 21px;
  }

  .di-tag ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .di-tag li {
    margin-right: 7px;
    padding: 3px 5px;
    margin-bottom: 7px;
  }

  .di-list {
    font-size: 14px;
  }

  .di-summary {
    border: 2px solid #dddddd;
    padding: 15px;
    position: relative;
    border-radius: 5px;
    margin-top: 25px;
    font-size: 14px;
  }


  /* cta */

  .detail-cta-wrap {
    padding: 20px;
  }

  .detail-cta-wrap img {
    position: absolute;
    height: 40%;
    padding: 20px 20px 0 20px;
    top: 0;
    left: 0;
  }

  .dc-voice ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-end;
  }

  .dc-voice li {
    padding: 7px 12px;
    font-size: 12px;
    margin-right: 0px;
  }

  .cta-pr {
    font-size: 20px;
  }

  .cta-pr:before {}

  .cta-pr:after {}

  .cta-pr span {
    font-size: 12px;
  }

  .space-contact {
    min-width: 100%;
  }

  a.space-contact-link {
    width: 100%;
  }


  /* price */


  .detail-wrap {
    padding: 25px;
  }

  .detail-title {
    font-size: 21px;
  }

  .sortable-table {
    overflow-x: scroll;
  }

  #my-table1 {
    white-space: nowrap;
  }

  .dti-mini-title {
    font-size: 14px;
  }

  .detail-table-info td {
    padding: 15px 10px;
  }

  .detail-ad-text {
    font-size: 14px;
  }

  .detail-ad-text span {
    margin-left: 0px;
  }

  .comment-content {
    font-size: 14px;
  }

  p.detail-freespace {
    font-size: 14px;
  }


  .flow07>li dl dt {
    font-size: 14px;
  }

  .flow07>li dl dd {
    font-size: 12px;
  }


  .flow07>li .icon07 {
    width: 52px;
    line-height: 160%;
  }

  .flow07>li .icon07::after {
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
  }

  .flow07>li dl {
    padding: 0 0 0 20px;
    width: calc(100% - 40px);
  }

}


/*==================================
=          Contact          =
==================================*/

.contact-form-wrap{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.contact-form-input{
  width: 48%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.contact-form-input input{
  width: 100%;
  padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-form-text{
    border: 1px solid #eeeeee;
    padding: 15px;
    font-size: 14px !important;
    font-weight: 500;
    background: #fbfbfb;
    display: block;
    color: var(--subcolor);
    margin-bottom: 20px;
    line-height: 1.8;
}


@media screen and (max-width: 800px) {
  .contact-form-wrap {
    flex-direction: column;
}

.contact-form-input {
  width: 100%;
  margin-top: 20px;
}

.contact-form-label {
  font-size: 16px;
}
}

.fade:not(.show){
  opacity: 1 !important;
}

.d-flex{
  display: flex !important;
}


.document-wrap{
  max-width: 700px;
  margin: 0 auto;
  padding: 25px;
}

.document-wrap > h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.document-wrap > h2 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  border-bottom: 2px solid #333;
  padding-bottom: 5px;
}

.document-wrap > p {
  margin: 10px 0;
  font-size: 15px;
}

.document-wrap > ul {
  list-style-type: disc;
  margin-left: 20px;
  font-size: 15px;
}

.document-wrap > ul >li {
  list-style-type: disc;
}



/*==================================
=          AQ Archive page          =
==================================*/

.ft-qa-title{
  font-size: 21px;
  margin-top: 30px;
}

.ft-accordion {
  margin: 1rem 0;
  max-width: 100%;
}

.ft-toggle {
	display: none;
}

.ft-faq {
	position: relative;
	margin-bottom: 1rem;
}

.ft-question, .ft-anser {
	transform: translateZ(0);
	transition: all 0.3s;
}

.ft-question {
	border: solid 1px #b6b6b6;
	padding: 20px 30px 20px 20px;
	display: block;
	color: #333;
}

.ft-question span {
    font-size: 18px;
    padding-right: 0.6rem;
    color: #c30a01;
    line-height: 0;
}

.ft-question:after, .ft-question:before {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 2px;
	height: 0.75rem;
	background-color: #999;
	transition: all 0.3s;
}

.ft-question:after {
	transform: rotate(90deg);
}

.ft-anser {
	max-height: 0;
	overflow: hidden;
}

.ft-anser div {
	margin: 0;
	padding: 20px;
	line-height: 1.8;
}

.ft-anser span {
	font-size: 18px;
	padding-right: 0.6rem;
	color: #304fb1;
	line-height: 0;
}

.ft-toggle:checked + .ft-question + .ft-anser {
	max-height: 500px;
	transition: all 1.5s;
}

.ft-toggle:checked + .ft-question:before {
	transform: rotate(90deg) !important;
}





/*==================================
=          company-info page          =
==================================*/

@media screen and (max-width: 600px) {
h3.executive-name {
  font-size: 24px;
}
h4.executive-title {
  font-size: 14px;
}
}

/*==================================
=          Compalete page          =
==================================*/


.public-logo img{
  height: 35px;
}


/*==================================
=          Swiper custom          =
==================================*/

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 15px 5px 0 !important;
}







  /* メンテナンスオーバーレイ */
  .maintenance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: all;
}

.maintenance-content {
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 90%;
    width: 400px;
    /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);*/
}

.maintenance-icon {
    font-size: 48px;
    color: #FF9500;
    margin-bottom: 20px;
    display: block;
}

.maintenance-content h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #333;
}

.maintenance-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}