@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_clm_center {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;}
.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;}
.ovrflw_hidden{
	overflow: 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);}
.bgc_sub{
  background: var(--color-sub-bg);}
.bgc_lightyellow{
  background: var(--color-lightyellow);}
.bgc_gradation{
  background: var(--color-gradation);}
.bdr_radius_10{
  border-radius: 10px;}
.bdr_radius_20{
  border-radius: 20px;}
.bdr_sub{
  border: 1px solid var(--color-sub-bg);}
.bdr_red{
  border: 1px solid var(--color-red);}
/*テキスト*/
.txt_bold{
  font-weight: 700 !important;}
.txt_white{
  color: var(--color-white);}
.txt_gray{
  color: var(--color-gray)}
.txt_red{
  color: var(--color-red);}
.txt_double{
  font-size: 2.125em;}
.txt_xbig {
  font-size: 1.5em;
  font-weight: 700;}
.txt_big {
  font-size: 1.25em;
  font-weight: 500;}
.txt_small {
  font-size: 0.875em;}
.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;}
/*リスト*/
.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;}
.lst_disc li:before {
    content: "・";
    font-size: 1em;
    position: absolute;
    left: 0;
    top: 0;}
.lst_disc li:last-of-type{
  margin-bottom: 0;}
/*空間*/
.mgn_left_1em {
  margin-left: 1em !important;}
.mgn_top_1em{
  margin-top: 1em!important;}
.mgn_top_2em{
  margin-top: 2em!important;}
.mgn_btm_0{
  margin-bottom: 0 !important;}
.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;}
.pdg_all_0{
  padding: 0 !important;}
.pdg_all_1em{
  padding: 1em;}
.pdg_all_2em{
  padding: 2em;}
.pdg_vertical_1em{
  padding-top: 1em !important;
  padding-bottom: 1em !important;}
.pdg_vertical_1-5em{
  padding-top: 1.5em !important;
  padding-bottom: 1.5em !important;}
.pdg_vertical_2em{
  padding-top: 2em;
  padding-bottom: 2em;}
.pdg_holizon_1em{
  padding-left: 1em;
  padding-right: 1em;}
.pdg_btm_0{
  padding-bottom: 0;}
.pdg_btm_1em{
  padding-bottom: 1em!important;}
.pdg_btm_2em{
  padding-bottom: 2em!important;}
.pdg_btm_3em{
  padding-bottom: 3em!important;}
.pdg_top_0{
  padding-top: 0;}
.pdg_top_1em{
  padding-top: 1em!important;}
.pdg_top_2em{
  padding-top: 2em!important;}
.pdg_top_3em{
  padding-top: 3em!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;}
/*トグル*/
.accordion_txt {
  max-height: 312px;
  overflow: hidden;
  transition: max-height 0.5s ease;}
.accordion_check {
  display: none;}
.accordion_check:checked + .accordion_txt {
  max-height: 2000px; }
.accordion_lbl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin: 1.5em auto 0;
	width: 100%;
	position: relative;
	color: var(--color-red);
	cursor: pointer;}
.accordion_lbl::before,
.accordion_lbl::after { 
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-red); }
.read_more { 
	transition: all 0.5s ease;
	opacity: 1; }
.read_less {
	transition: all 0.5s ease;
	display: none;
	opacity: 0;} 
.accordion_lbl .icon-arrow{
	font-size: 0.5em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    border: 1px solid;
    border-radius: 50%;
    margin-left: 1em;
    transform: rotate(90deg);
    transition: all 0.5s ease;}
/*.accordion_check:checked + .accordion_txt + .accordion_lbl .icon-arrow{
	transform: rotate(270deg);}*/
.accordion_check:checked ~ .accordion_lbl .read_more,
.accordion_check:checked ~ .content_inner .accordion_lbl .read_more{
  display: none;
  opacity: 0;
}

.accordion_check:checked ~ .accordion_lbl .read_less,
.accordion_check:checked ~ .content_inner .accordion_lbl .read_less {
  display: block;
  opacity: 1;
}

.accordion_check:checked ~ .accordion_lbl .icon-arrow,
.accordion_check:checked ~ .content_inner .accordion_lbl .icon-arrow{
  transform: rotate(270deg);
}
/*アニメーション*/
.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.appear {
  display: inline-block;
  /* マスクで徐々に表示 */
  -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%;
  }
}
.zoom_wrap{
  width: 100%;
  line-height: 0;
  /*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;}
.delay_0-5,.appear.delay_0-5 {
  animation-delay: 0.5s;}
.delay_0-75,.appear.delay_0-75 {
  animation-delay: 0.75s;}
.delay_1,.appear.delay_1 {
  animation-delay: 1s;}

/*===============================================
●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;}
}