@charset "utf-8";
/* CSS Document */
/*配置*/
.flex_space {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between; }
.flex_center {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center; }
.flex_row_2 > div,
.flex_row_2 > li,
.flex_row_2 > a {
  width: 45%; }
.flex_clm_center {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
.gap_2em{
  gap: 2em;}
.dsp_flex{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;}
.dsp_blk{
  display: block;}
.dsp_inlineblk{
  display: inline-block !important;}
.dsp_inlineflex{
  display: inline-flex;}
.aln_center{
  align-items: center;}
.aln_end{
  align-items: end;}
.pos_relative{
  position: relative;}
.pos_absolute{
  position: absolute;}
.pos_center{
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}
.visibility_hidden{
	visibility: hidden;}
/*ブロック*/
.bgc_gray {
  background: var(--color-gray); }
.bgc_red{
  background: var(--color-red);
  color: var(--color-white);}
.bgc_white{
  background: var(--color-white);
  color: var(--color-default);
  padding: 2em 1em;}
.bgc_indigo{
  background: var(--color-indigo);
  color: white;}
.bgc_lightblue{
  background: var(--color-lightblue);}
.bgc_gradation{
  background: var(--color-gradation);}
.bgc_recruit{
  background: var(--color-recruit);}
.bdr_radius{
  border-radius: 10px;}
.bdr_red{
  border: 1px solid var(--color-red);}
/*テキスト*/
.txt_bold{
  font-weight: 700;}
.txt_white{
  color: var(--color-white);}
.txt_gray{
  color: var(--color-gray)}
.txt_red{
  color: var(--color-red);}
.txt_blue{
  color: var(--color-blue);}
.txt_xxbig{
  font-size: 2.5em;
  font-weight: 700;}
.txt_xbig {
  font-size: 1.75em;
  font-weight: 700;}
 .txt_big {
  font-size: 1.25em;
  font-weight: 700;}
.txt_small {
  font-size: 0.875em;}
.text_underline{
  text-decoration: underline;}
.txt_left{
  text-align: left;}
.txt_center{
  text-align: center;}
.txt_right{
  text-align: right;}
.txt_vertical{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  display: block;
  display: inline-block\9;
  margin: 0 auto;
  text-align: left;}
.valgn_top{
  vertical-align: top;}
/*リスト*/
.lst_arrow li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 1.5em;}
.lst_arrow li:before {
    content: "\e902";
    font-family: iconmett;
    color: var(--color-red);
    font-size: 1.4em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);}
.lst_arrow li:last-of-type{
  margin-bottom: 0;}
.lst_disc li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 1.5em;}
.lst_disc li:before {
    content: "・";
    font-size: 1.4em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);}
.lst_disc li:last-of-type{
  margin-bottom: 0;}
/*空間*/
.mgn_right_1em,{
  margin-right: 1em!important;}
.mgn_left_1em,{
  margin-left: 1em !important;}
.mgn_top_1em{
  margin-top: 1em!important;}
.mgn_btm_0{
  margin-bottom: 0;}
.mgn_btm_0-5em{
  margin-bottom: 0.5em !important;}
.mgn_btm_1em{
  margin-bottom: 1em !important;}
.mgn_btm_1-5em{
  margin-bottom: 1.5em !important;}
.mgn_btm_2em{
  margin-bottom: 2em !important;}
.mgn_btm_2-5em{
  margin-bottom: 2.5em !important;}
.mgn_btm_3em{
  margin-bottom: 3em !important;}
.mgn_btm_4em{
  margin-bottom: 4em !important;}
.mgn_btm_5em{
  margin-bottom: 5em !important;}
.pdg_all_1em{
  padding: 1em;}
.pdg_all_2em{
  padding: 2em;}
.pdg_btm_0{
  padding-bottom: 0;}
.pdg_btm_1em{
  padding-bottom: 1em!important;}
.pdg_top_0{
  padding-top: 0;}
.pdg_top_1em{
  padding-top: 1em!important;}
.pdg_left_1em{
  padding-left: 1em!important;}
.pdg_right_1em{
  padding-right: 1em!important;}
.line_height_0{
  line-height: 0;}
.line_height_1-5{
  line-height: 1.5;}
/*トグル*/
.faq-list li{
  padding: 0.5em 1em;
  margin-bottom: 1.5em;}
.faq-list input[type="checkbox"] {
  display: none;}
.faq-list .toggle_inner {
  border-top: 1px solid var(--color-red);
  padding: 0 1em;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 1s;
  transition: all 1s; }
.toggle_header {
  display: block;
  padding: 1em 3em 1em 1em;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 1s;
  transition: all 1s; }
.toggle_header:after{
  font-family: iconmett;
  content: "\e900";
  color: var(--color-red);
  font-size: 1.5em;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.5s ease;}
.faq-list input[type="checkbox"]:checked + .toggle_header + .toggle_inner {
  max-height: 10em;
  padding-top: 1em;
  padding-bottom: 1em;
  opacity: 1;}
.faq-list input[type="checkbox"]:checked + .toggle_header::after {
  transform: translateY(-50%) rotate(270deg);}
.faq-list li:has(input[type="checkbox"]:checked) {
  border: 2px solid var(--color-red);}
/*アニメーション*/
.fadein{
  visibility:hidden;
  opacity: 0;}
.fadein.appear{
  animation: fadeIn 1.5s ease-out 0s forwards;}
@keyframes fadeIn {
  from {
    opacity: 0;
	visibility: visible;
  }
  to {
    opacity: 1;
	visibility: visible;
  }
}
.fadein_right{
  visibility: hidden;
  opacity: 0;}
.fadein_right.appear{
	animation: fadeInRight 1.5s ease-out 0s forwards;}
@keyframes fadeInRight {
  from {
    opacity: 0;
	visibility: visible;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
	visibility: visible;
    transform: translateX(0);
  }
}
.fadein_up {
  visibility: hidden;
  opacity: 0;}
.fadein_up.appear{
  animation: fadeInUp 1s ease forwards; }
@keyframes fadeInUp {
  from {
    transform: translateY(20px); }
  to {
    opacity: 1;
	visibility: visible;
    transform: translateY(0); } }
.gradually {
  display: inline-block;
  background-color: var(--color-red);
  color: var(--color-white);
  padding: 0.2em 0.5em;
  /* マスクで徐々に表示 */
  -webkit-mask-image: linear-gradient(to right, black 0%, black 100%);
  mask-image: linear-gradient(to right, black 0%, black 100%);
  -webkit-mask-size: 0% 100%; 
  mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: expandMask 1s ease forwards;
}
@keyframes expandMask {
  to {
    -webkit-mask-size: 100% 100%;
    mask-size:100% 100%;
  }
}
#page_title h1.gradually{
  background-color: var(--color-white);
  color: var(--color-red);}
.zoom_wrap{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;}
.zoom_cnt{
  width: 100%;
  transform: scale(1.25);}
.zoom_cnt.appear{
  animation: zoomOut 2s ease forwards;}
/*.zoom_out{
  transform: scale(1); }*/
@keyframes zoomOut {
  from {
    transform: scale(1.25); }
  to {
    transform: scale(1); }
}
 
.delay_0-25,.appear.delay_0-25 {
  animation-delay: 0.25s; !important}
.delay_0-5,.appear.delay_0-5 {
  animation-delay: 0.5s; !important}
.delay_0-75,.appear.delay_0-75 {
  animation-delay: 0.75s; !important}
.delay_1,.appear.delay_1 {
  animation-delay: 1s; !important}
.delay_1-25,.appear.delay_1-25 {
  animation-delay: 1.25s;}
.delay_1-5, .appear.delay_1-5 {
  animation-delay: 1.5s;}
.delay_2,
,.appear.delay_2 {
  animation-delay: 2s;}
.delay_2-5 {
  animation-delay: 2.5s;}
.delay_3 {
  animation-delay: 3s;}
.delay_3-5 {
  animation-delay: 3.5s;}
.delay_4 {
  animation-delay: 4s;}
.delay_4-5 {
  animation-delay: 4.5s;}
.delay_5 {
  animation-delay: 5s;}

/*===============================================
●smart.css  画面の横幅が767pxまで
===============================================*/
@media screen and (max-width: 767px) {
	body{}
	.mgn_btm_2em{
	  margin-bottom: 1.5em !important;}
	.mgn_btm_4em{
	  margin-bottom: 3em !important;}
	.mgn_btm_5em{
	  margin-bottom: 3em !important;}
}