@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 768px) and (max-width: 1399px){
	html {font-size: calc(100vw * 10 / 1400);
		text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	}
	
}

@media screen and (min-width: 1400px){
	html{
	font-size: 62.5%;
	font-size: 10px;
}
}
/*html{
	font-size: 62.5%;
	font-size: 10px;
}*/

html.is-fixed{
	height: 100%;
    overflow: hidden;
}

body {
	font-family:'Noto Sans JP', sans-serif,'Raleway',sans-serif,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MSPゴシック','MS PGothic',sans-serif;
	font-weight: 300;
	line-height: 1.0;
	letter-spacing: 0;
	color: var(--text-color);
	font-size: 0;
	background-color: #FFF;
}


/**************************************************
 usually
**************************************************/
.clearFix:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	_zoom: 1;
}
*:first-child+html .clearFix:after{ zoom: 1; } /* IE7 */

/* align */
.flexbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

/* inner */
.inner{
	max-width: 1200px;
	margin: auto;
}

/* a img input */
a,a img,input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="image"]{
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
}

a img:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="image"]:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/**************************************************
 common
**************************************************/
p,ol,table,ol,dl{
	padding: 1.6rem 0 0 0;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.5;
	color: var(--default-textcolor);
}

ul li{
	/*margin: 0 0 0 20px;*/
	/*list-style: disc;*/
	list-style: none;
}

/* ol li{
	margin: 0 0 0 2.5px;
	list-style: decimal;
} */


table{
  border-collapse: separate;
  border-spacing: 0.1rem;
}

/* table th,table td{ padding: 1rem;} */
/*table th{ background-color: rgba(255,255,255,0.3);}
table td{ background-color: rgba(255,255,255,0.2);}*/

a{
	color: #000;
	text-decoration: none;
	outline:none;
	font-weight: var(--font-bold);
	line-height: 1.5;
}
a:hover{ color: #000;}

img{
	max-width: 100%;
	height: auto;
}
/* img[src$=".svg"] {width: 100%;} */

.smp{display: none;}


:root{
	--main-color: #A063C3;
	--btn-color:#5ED59E;
	--nav-color:#333;
	--text-color: #333333;
	--border-color: #D9DEE6;
	--box-color:#F5EFF9;
	--arc-color:#EDE153;
	--med-color:#4CE37E;
	--aut-color:#4CB3E3;
	--ret-color:#E34C90;
	--max:104rem;
	--inter: "Inter", sans-serif;
	--font-bold:700;
}

h1{
	font-size: 1.6rem;
	align-items: center;
	font-weight: var(--font-bold);
	font-family: var(--zenkaku);
	position: relative;
	z-index: 9999;
}

h1 img{
	width: 24.6rem;
	margin-inline-end: 1.6rem;
}

.contentInner{
	max-width: 104rem;
	margin-inline: auto;
}

.wrapper{}

.content_box,.content_inner{
	max-width: 104rem;
	margin: 0 auto;
	padding-inline: 1.2rem;
}

.re{flex-direction: row-reverse;}

/**************************************************
 header
**************************************************/

header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparent;
	align-items: center;
	z-index: 1000;
}


#globalNavi{
	align-items: center;
	justify-content: flex-end;
	margin-block-start: 2.4rem;
}

#globalNavi ul{
	padding-block: 2.4rem;
	padding-inline: 3.2rem 6.4rem;
	border-radius: 40px 0 0 40px;
	align-items: center;
	background-color: #fff;
}

#globalNavi > ul > li{margin-inline-end: 4rem;position: relative;}

#globalNavi > ul > li:last-of-type{margin-inline-end: 0;}

#globalNavi > ul > li > a
{
	display: block;
	font-size: 1.6rem;
	font-weight: var(--font-bold);
	position: relative;
}


#globalNavi > ul > li > a:hover{color: var(--main-color);}




/*

#globalNavi{
    display: block;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    right: 0;
	background-color: #FFF;
    background-size: cover;
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transition: .4s ease-in-out;
}

#globalNavi.active{
	opacity: 1;
	visibility: visible;
}

.g_main_navi,.g_main_target{
	margin-block-start: 10.4rem;
	max-width: var(--max);
	margin-inline: auto;
}

.g_main_navi ul,.g_main_target ul{
	border-top: 0.1rem solid #6F88AF;
}

.g_main_navi ul li{
	width: calc(100% / 3);
	margin-block-start: 4rem;
}

.g_main_navi ul li a{
	font-size: 1.6rem;
	position: relative;
}

.g_main_navi ul li a::after{
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.2rem;
	background: var(--main-color);
	bottom: -0.5rem;
	transform: scale(0,1);
	transform-origin: center top;
	transition: .5s;
}

.g_main_navi ul li a:hover::after{transform: scale(1,1);}

.g_main_target p{
	color: var(--main-color);
	font-weight: var(--font-bold);
	padding-block-end: 1.6rem;
}

.g_main_target ul{justify-content: flex-start;}

.g_main_target ul li{
	width: calc(100% / 3);
	margin-block-start: 4rem;
}

.g_main_target ul li a{
	font-size: 1.6rem;
	position: relative;
}

.g_main_target ul li a::after{
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.2rem;
	background: var(--main-color);
	bottom: -0.5rem;
	transform: scale(0,1);
	transform-origin: center top;
	transition: .5s;
}

.g_main_target ul li a:hover::after{transform: scale(1,1);}

.g_main_target ul li > ul{
	border: none;
	border-left: 0.2rem solid #6F88AF;
	padding-inline-start: 1.6rem;
}

.g_main_target ul li > ul > li{
	width: 100%;
	margin-block-start: 2.4rem;
}

.g_main_target ul li:first-of-type > ul > li:first-of-type{margin-block-start: 1.6rem;}

.g_main_target ul li > ul > li > a{
	color: #6F88AF;
}

.g_main_target ul li:last-of-type ul{border: none;}

.g_main_target ul li:last-of-type ul li{margin-block-start: 4rem;}

.g_main_target ul li:last-of-type ul li:first-of-type{margin-block-start: 0;}

.g_main_target ul li:last-of-type ul li a{color: var(--text-color);} */



/**************************************************
 menu
**************************************************/
#menu{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 2.4rem;
	right: 2.4rem;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	border: 0.1rem solid var(--main-color);
	text-align: center;
	z-index: 9998;
	background-color: var(--main-color);
	transition: .3s;
	opacity: 1;
	visibility: visible;
	cursor: pointer;
	pointer-events: auto;
	display: none;
}

#menu.active{background-color: #fff;}

#menu.close{
	opacity: 0;
	visibility: hidden;
	transition: .4s ease-in-out;
	pointer-events: none;
}

.menu-btn,
.menu-btn span {
	display: inline-block;
	transition: all .8s;
	box-sizing: border-box;
}

.menu-btn {
	position: relative;
	width: 2rem;
	height: 1.7rem;
	background: none;
	border: none;
	appearance: none;
	cursor: pointer;
}

.menu-btn span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.2rem;
	background-color: #fff;
	border-radius: 4px;
	transition: .3s;
}

#menu.active .menu-btn span{background-color: var(--main-color)}

.menu-btn span:nth-of-type(1) {top: 0;}
.menu-btn span:nth-of-type(2) {top: 7px;}
.menu-btn span:nth-of-type(3) {bottom: 1px;}

.menu-btn.active span:nth-of-type(1) {transform: translateY(7px) rotate(-45deg);}
.menu-btn.active span:nth-of-type(2) {opacity: 0;}
.menu-btn.active span:nth-of-type(3) {transform: translateY(-7px) rotate(45deg);}

.smp_bottom_menu{display: none;}

/**************************************************
 attend_btn
**************************************************/
.attend_btn{
	margin-block-start: 8rem;
	text-align: center;
}

.attend_btn a{
	display: inline-block;
	color: #fff;
	background-color: var(--btn-color);
	padding-block: 2.4rem;
	padding-inline: 16rem;
	font-size: 3.2rem;
	border-radius: 50px;
	line-height: 1;
	border: 0.1rem solid var(--btn-color);

	background-color: #D1D1D1;
	border: 0.1rem solid #D1D1D1;
	pointer-events: none;
}

.attend_btn a:hover{
	background-color: #fff;
	color: var(--btn-color);
}

.movie_pdf_btn{
	
	text-align: center;
}

.movie_pdf_btn a{
	padding-inline: 2.4rem;
	width: 43.3rem;
	display: block;
	margin-inline: auto;
	pointer-events: initial;
	color: #fff;
	background-color: var(--main-color);
	border: 0.1rem solid var(--main-color);
}

.movie_pdf_btn a:hover{
	color: var(--main-color);
	background-color: #fff;
	border: 0.1rem solid var(--main-color);
}


/**************************************************
 attend_btn_double
**************************************************/
.attend_btn_double{
	margin-block-start: 8rem;
	max-width: var(--max);
	margin-inline: auto;
}

.first_double{
	margin-block-start: 15rem;
}

.attend_btn_double ul{padding: 0;align-items: stretch;justify-content: center;}

.attend_btn_double ul li{
	width: 70%;
}

.attend_btn_double > ul > li > span{
	font-size: 1.4rem;
	font-weight: 500;
	text-align: center;
	margin-block-start: 1.6rem;
	display: block;
	line-height: 1.5;
}

.attend_btn_double ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	/* height: 100%; */
	height: auto;
	color: #fff;
	text-align: center;
	background-color: var(--main-color);
	padding-block: 1.6rem 1.6rem;
	font-size: 3.2rem;
	border-radius: 50px;
	line-height: 1.5;
	border: 0.1rem solid var(--main-color);
	flex-wrap: wrap;
	pointer-events: none;
}

.attend_btn_double ul li a span{
	display: block;
	width: 100%;
	font-size: 1.6rem;
	margin-block-start: 1rem;
}

.attend_btn_double ul li:last-of-type a{
	/* background-color: var(--btn-color); */
	background-color: #bbb;
	/* border: 0.1rem solid var(--btn-color); */
	border: 0.1rem solid #bbb;
}

.attend_btn_double ul li a small{
	font-size: 1.6rem;
}

.attend_btn_double ul li a:hover{
	background-color: #fff;
	color: var(--main-color);
}

.attend_btn_double ul li:last-of-type a:hover{
	color: var(--btn-color);
}


/**************************************************
 table
**************************************************/
.t_st1 table{
	width: auto;
	padding: 0;
	/* border: 0.1rem solid #A6ACB5; */
	border-collapse: collapse;
	table-layout: fixed;
	margin-block-start: 2.4rem;
}

.t_st1 table tr th,
.t_st1 table tr td{
	padding-block: 0.8em;
	color: var(--text-color);
	font-size: 1.6rem;
	/* border: 0.1rem solid #A6ACB5; */
	padding-inline: 2.4rem;
}
.t_st1 table tr:nth-of-type(2),
.t_st1 table tr:nth-of-type(3),
.t_st1 table tr:nth-of-type(4),
.t_st1 table tr:nth-of-type(5){
	border-bottom: 0.1rem solid #EAEAEA;
}

.t_st1 table tr:first-of-type th{padding-block: 1.4rem;}

.t_st1 table tr th{
	font-weight: var(--font-bold);
	background-color: #F5EFF9;
}

.t_st1 table tr:first-of-type th:first-of-type{background-color: #ECE1F4}

.t_st1 table tr th:nth-of-type(2),
.t_st1 table tr th:nth-of-type(3),
.t_st1 table tr th:nth-of-type(4),
.t_st1 table tr td:nth-of-type(1),
.t_st1 table tr td:nth-of-type(2),
.t_st1 table tr td:nth-of-type(3)
{
	border-right: 0.1rem solid #EAEAEA;
}

.cau_t_st2 tr:first-of-type th:nth-of-type(3),
.cau_t_st2 tr:first-of-type th:nth-of-type(4),
.cau_t_st2 tr:nth-of-type(2) td:nth-of-type(2),
.cau_t_st2 tr:nth-of-type(2) td:nth-of-type(3){
border: none;
background-color: transparent;
}

.cau_t_st2 table tr:nth-of-type(2){
	border-bottom: none;
}

.cau_t_st2 table tr:nth-of-type(2) td:nth-of-type(1),
.cau_t_st2 table tr:nth-of-type(2) th
{border-bottom: 0.1rem solid #EAEAEA;}

.t_st1 table tr td{
	text-align: center;
	padding-block: 0.8rem;
	background-color: #fff;
}




/**************************************************
 mainVisual
**************************************************/
.mainVisual{
	position: relative;
	height: 84vh;
	width: 100%;
}

/* .mainVisual .main_img{
	width: 100%;
	height: 100%;
	background: url(../img/main/mv.jpg)no-repeat center center;
	background-size: cover;
} */

.main_video video.vi_smp{display: none;}

.main_video{
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main_video video {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}

.main_txt{
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(255,255,255,0.75);
	padding-block-end: 6.4rem;
	padding-inline: 6.4rem 8.4rem;
	border-radius: 0 24px 0 0;
}

.main_txt h2{width: 63rem;}

.main_link{
	position: fixed;
	bottom: 4rem;
	right: 4rem;
	width:18rem;
	height: 18rem;
	z-index: 9999;
}

.main_gov{
	right: 24.4rem;
}

.main_link a svg{width: 100%;margin-block-end: 0.8rem;}

.main_link a svg path{transition: 0.2s;}

.main_link a{
	height: 100%;
	display: flex;
	align-content: center;
	justify-content: center;
	font-size: 1.6rem;
	color: #fff;
	flex-wrap: wrap;
	text-align: center;
	background-color: var(--btn-color);
	border: 0.1rem solid var(--btn-color);
	border-radius: 50%;
}

.main_link a span{
	font-size: 1.2rem;
	display: block;margin-block-start: 0.4rem;
}

.main_gov a{
	background-color: var(--main-color);
	border: 0.1rem solid var(--main-color);
}

.main_link a:hover{
	background-color: #fff;
	color: var(--btn-color);
}

.main_gov a:hover{color: var(--main-color);}

.main_link a:hover svg path{fill: var(--btn-color);}

.main_gov a:hover svg path{fill: var(--main-color);}
/**************************************************
 copyHanger
**************************************************/
.copyHanger{
	margin-block-start: 12rem;
}

.copy_title{
	max-width: var(--max);
	margin-inline: auto;
}

.copyHanger h2{
	font-size: 4.8rem;
	color: var(--main-color);
	line-height: 1.5;
}

.copyHanger p{
	padding-block-start: 4.8rem;
	line-height: 2;
	font-size:2rem;
	width: 50%;
}

.cpoy_point{
	position: relative;
	margin-block-start: 6.4rem;
}

.cpoy_point::before{
	content: '';
	width: 36.4rem;
	height: 24rem;
	background: url(../img/copy/img01.jpg)no-repeat center center;
	background-size: 100%;
	border-radius: 8px;
	position: absolute;
	top: -13rem;
	left: 27rem;
}

.cpoy_point::after{
	content: '';
	width: 48rem;
	height: 27rem;
	background: url(../img/copy/img02.jpg)no-repeat center center;
	background-size: 100%;
	border-radius: 8px;
	position: absolute;
	bottom: -5rem;
	left: 6.4rem;
}

.cpoy_point .copy_point_list{
	position: relative;
	padding-block: 3.6rem 6.4rem;
}

.cpoy_point .copy_point_list::before{
	content: '';
	width: calc(104rem + (100% - 104rem) / 2);
	height: 100%;
	background-color: var(--box-color);
	position: absolute;
	border-radius: 0 16px 16px 0px;
	top: 0;
	left: 0;
	z-index:-1;
}

.cpoy_point .copy_point_list dl{
	margin-block-start: 3.2rem;
	padding: 0;
	width: 50%;
	margin-inline: auto 0;
}

.cpoy_point .copy_point_list dl:first-of-type{
	margin-block-start: 0;
}

.cpoy_point .copy_point_list dl dt{
	font-size: 1.6rem;
	color: var(--main-color);
	font-family: var(--inter);
}

.cpoy_point .copy_point_list dl dd{
	font-size: 2.4rem;
	font-weight: var(--font-bold);
	margin-block-start: 1rem;
	
}

.copyHanger .attend_btn{
	margin-block-start: 13rem;
}

.copyHanger .attend_btn a{
	background-color: #D1D1D1;
	padding-inline: 6.4rem;
	pointer-events: none;
	border: none;
}


/**************************************************
 infoHanger
**************************************************/
.infoHanger{
	margin-block-start: 8rem;
	/* margin-block-start: 16rem; */
}

.infoHanger h2{
	font-size: 4.8rem;
	max-width: var(--max);
	margin-inline: auto;
}

.infoHanger h2 span{
	color: var(--main-color);
	font-size: 1.6rem;
	display: block;
	margin-block-end: 2rem;
	font-family: var(--inter);
	font-weight: 500;
}

.info_cont{position: relative;}

.info_cont::before{
	content: '';
	width: 70rem;
	height: 50rem;
	background: url(../img/info/img01.jpg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	right: 0;
	top: -5rem;
	border-radius: 16px 0 0 16px;
}

.info_cont_txt{
	width: 50%;
	margin-inline-start: calc((100% - 104rem) / 2);
}

.info_cont_txt dl{
	padding: 0;
	margin-block-start: 4rem;
}

.info_cont_txt dl dt{
	font-size: 1.6rem;
	color: var(--main-color);
	font-weight: var(--font-bold);
}

.info_cont_txt dl dd h3{
	margin-block-start: 1.2rem;
	font-size: 2.4rem;
	line-height: 1;
}

.info_cont_add{
	max-width: var(--max);
	margin-inline: auto;
	margin-block-start: 4.8rem;
	background-color: #F5EFF9;
	border-radius: 16px;
	padding-block: 3.2rem;
	padding-inline: 3.2rem;
}

.info_cont_add p{
	font-weight: var(--font-bold);
	line-height: 2;
	padding: 0;
}

.info_cont_add p span{color: var(--main-color);}

/**************************************************
 movieHanger
**************************************************/
.movieHanger{
	margin-block: 8rem;
	max-width: 64rem;
	margin-inline: auto;
}

.movieHanger .movie_iframe{
	position: relative;
    padding-bottom: 56.25%;
    height: 0;
	overflow: hidden;
}

.movie_iframe iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/**************************************************
 companyHanger
**************************************************/
.companyHanger{margin-block-start: 8rem;position: relative;}

.companyHanger::before{
	content: '';
	width: 46rem;
	height: 30rem;
	background: url(../img/company/img01.jpg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	left: 0;
	top: 15rem;
}

.companyInner{
	max-width: var(--max);
	margin-inline: auto;
}

.companyHanger h2{
	font-size: 4.8rem;
	max-width: var(--max);
	margin-inline: auto;
	width: 35%;
}

.companyHanger h2 span{
	color: var(--main-color);
	font-size: 1.6rem;
	display: block;
	margin-block-end: 2rem;
	font-family: var(--inter);
	font-weight: 500;
}

.companyHanger .companyInner > ul{
	width: 63%;
}

.companyHanger ul li{}

.companyHanger ul li button{
	display: block;
	font-family: var(--inter);
	font-size: 4rem;
	position: relative;
	padding-block: 3.2rem;
	border-bottom: 0.1rem solid rgba(0,0,0,0.1);
	display: block;
	font-weight: 500;
	width: 100%;
	text-align: left;
	transition: .2s;
	line-height: 1.5;
	letter-spacing: 1.5px;
}


.companyHanger ul li button::before{
	content: '';
	width: 4.8rem;
	height: 4.8rem;
	background: url(../img/company/arroww02.svg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	right: 0;
}

.companyHanger ul li:nth-child(2) button::before{
	background: url(../img/company/arroww01.svg)no-repeat center center;
	background-size: 100%;
}

.companyHanger ul li:nth-child(3) button::before{
	background: url(../img/company/arroww03.svg)no-repeat center center;
	background-size: 100%;
}

.companyHanger ul li:nth-child(4) button::before{
	background: url(../img/company/arroww04.svg)no-repeat center center;
	background-size: 100%;
}

.companyHanger ul li button span{
	display: block;
	color: var(--arc-color);
	font-size: 1.6rem;
	font-family: "Noto Sans JP", serif;
	font-weight: var(--font-bold);
}

.companyHanger ul li:nth-child(2) button span{color: var(--med-color);}
.companyHanger ul li:nth-child(3) button span{color: var(--aut-color);}
.companyHanger ul li:nth-child(4) button span{color: var(--ret-color);}


.companyHanger ul li button:hover{
	opacity: 0.5;
}


.companyHanger .com_pop_modal{
	display: none;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	transition: .3s;
	animation: modalopen .5s;
	overflow: scroll;
	overflow: hidden;
	overflow-y: scroll;
}

@keyframes modalopen {
	from {opacity: 0}
	to {opacity: 1}
}

.companyHanger .com_pop_modal .pop_modalInner{
	max-width: var(--max);
	background-color: #Fff;
	margin: 14rem auto 0;
	padding-block-start: 4.8rem;
	padding-inline: 6.4rem;
	border-radius: 20px;
	position: relative;
}

.companyHanger .com_pop_modal .pop_modalInner h3{
	font-family: var(--inter);
	font-size: 4rem;
	font-weight: 500;
}

.companyHanger .com_pop_modal .pop_modalInner h3 span{
	display: block;
	color: var(--arc-color);
	font-size: 1.6rem;
	font-family: "Noto Sans JP", serif;
	font-weight: var(--font-bold);
	padding-block-end: 3.2rem;
	border-bottom: 0.2rem solid #EAEAEA;
	margin-block-start: 1.6rem;
}

.companyHanger .pop_med .com_pop_modal .pop_modalInner h3 span{color: var(--med-color);}
.companyHanger .pop_aut .com_pop_modal .pop_modalInner h3 span{color: var(--aut-color);}
.companyHanger .pop_ret .com_pop_modal .pop_modalInner h3 span{color: var(--ret-color);}


.companyHanger .com_pop_modal .com_pop_list{
	padding-block-start: 3.2rem;
	overflow-y: scroll;
	height: 45rem;
}

.companyHanger .com_pop_modal .com_pop_list dl{
	padding-block: 2rem;
	border-bottom: 0.1rem solid #EAEAEA;
}

.companyHanger .com_pop_modal .com_pop_list dl:first-of-type{padding-block-start: 0;}

.companyHanger .com_pop_modal .com_pop_list dl dt{width: 5%;color: var(--arc-color);}
.companyHanger .pop_med .com_pop_modal .com_pop_list dl dt{color: var(--med-color);}
.companyHanger .pop_aut .com_pop_modal .com_pop_list dl dt{color: var(--aut-color);}
.companyHanger .pop_ret .com_pop_modal .com_pop_list dl dt{color: var(--ret-color);}

.companyHanger .com_pop_modal .com_pop_list dl dd{
	width: 90%;
	position: relative;
}

.companyHanger .com_pop_modal .com_pop_list dl dd::before{
	content: '';
	width: 1.7rem;
	height: 1.5rem;
	background: url(../img/blank/blank.svg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	right: 0.8rem;
}

.companyHanger .com_pop_modal .com_pop_list dl a:hover{
	opacity: 0.5;
}

.companyHanger .com_pop_modal span#modalClose{
	width: 5.6rem;
	height: 5.6rem;
	position: absolute;
	background: url(../img/company/close.svg)no-repeat center center;
	background-size: cover;
	top: 2.4rem;
	right: 2.4rem;
	cursor: pointer;
}

.companyHanger .com_pop_modal span::before{
	content: '';
	background: url(../img/pop/close.svg)no-repeat center center;
	background-size: 100%;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 50%;
	transform: translate(0%,-50%);
	left: 20px;
}

/**************************************************
 areaHanger
**************************************************/
.areaHanger{
	margin-block-start: 8rem;
	position: relative;
	overflow-x: hidden;
}

.areaHanger::before{
	content: '';
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 22rem;
    background-repeat: repeat-x;
    background-size: contain;
    top: 3rem;
    z-index: 1;
    left: 0;
    margin-inline-start: calc(50% - 50vw);
    margin-inline-end: calc(50% - 50vw);
    padding-inline-start: calc(50vw - 50%);
    padding-inline-end: calc(50vw - 50%);
	background: url(../img/area/area_bg.svg) repeat-x;
    background-position: center;
    animation: bgloop 25s linear infinite;
	z-index: -1;
}

@keyframes bgloop {
	from {
		background-position: 0 0;
	}

	to {
		background-position: -1700px 0;
	}
}

.areaHanger h2{
	font-size: 4.8rem;
	max-width: var(--max);
	margin-inline: auto;
}

.areaHanger h2 span{
	color: var(--main-color);
	font-size: 1.6rem;
	display: block;
	margin-block-end: 2rem;
	font-family: var(--inter);
	font-weight: 500;
}

.area_cont{
	position: relative;
	margin-block-start: 6.4rem;
	padding-block-end: 6.4rem;
}

.area_cont::before{
	content: '';
	width: 100%;
	height: 38rem;
	background-color: var(--main-color);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.area_cont dl{
	padding: 0;
	padding-inline: 2.4rem;
	width: 50%;
}

.area_cont dl dt{text-align: center;}

.area_cont dl dt img{border-radius: 16px;}

.area_cont dl dd{
	text-align: center;
	margin-block-start: 2.4rem;
	color: #fff;
}

.area_cont dl dd h3{
	font-size: 3.2rem;
}

/**************************************************
 bg
**************************************************/
.bg{
	padding-block-start: 8rem;
	padding-block-end: 12rem;
	position: relative;
}

.bg::before{
	content: '';
	width: 30%;
	height: 100%;
	background: url(../img/bg/bg.png)no-repeat center center;
	opacity: 0.2;
	background-size: cover;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}


/**************************************************
 methodHanger
**************************************************/
.methodHanger{
	max-width: var(--max);
	margin-inline: auto;
}

.methodHanger h2{
	font-size: 4.8rem;
	max-width: var(--max);
	margin-inline: auto;
}

.methodHanger h2 span{
	color: var(--main-color);
	font-size: 1.6rem;
	display: block;
	margin-block-end: 2rem;
	font-family: var(--inter);
	font-weight: 500;
}

.methodHanger ul{margin-block-start: 6.4rem;}

.methodHanger ul li{width: 70%;}

/**************************************************
 cautionHanger
**************************************************/
.cautionHanger{
	margin-block-start: 8rem;
	max-width: var(--max);
	margin-inline: auto;
}

.cautionHanger h2{
	font-size: 4.8rem;
	max-width: var(--max);
	margin-inline: auto;
}

.cautionHanger h2 span{
	color: var(--main-color);
	font-size: 1.6rem;
	display: block;
	margin-block-end: 2rem;
	font-family: var(--inter);
	font-weight: 500;
}

.cautionHanger ul{
	margin-block-start: 4.8rem;
}


.cautionHanger ul li{
	padding-block-start: 1.6rem;
	font-size: 1.6rem;
	font-weight: 400;
	display: block;
}

.cautionHanger ul li:first-of-type{padding-block-start: 0;}

.cautionHanger ul li a{
	color: var(--btn-color);
	text-decoration: underline;
	text-decoration-color: var(--btn-color);
}

.cautionHanger p{line-height: 1.7;}

.cautionHanger h3{
	font-size: 2.4rem;
	margin-block-start: 4.8rem;
}

.cautionHanger h4{
	font-size: 1.6rem;
	color: var(--main-color);
	margin-block-start: 2.4rem;
}

.cautionHanger .tableCont tr th{width: 180px;}

.cautionHanger .tableCont tr th:first-of-type{width: 320px;}

/**************************************************
 contactHanger
**************************************************/
.contactHanger{
	margin-block-start: 8rem;
	max-width: var(--max);
	margin-inline: auto;
	position: relative;
}

/* .contactHanger::before{
	content: '';
	width: 38.2rem;
	height: 25.7rem;
	background: url(../img/contact/img01.png)no-repeat center center;
	background-size: 100%;
	position: absolute;
	top: 0;
	right: 0;
} */

.contactHanger h2{
	font-size: 4.8rem;
	max-width: var(--max);
	margin-inline: auto;
}

.contactHanger h2 span{
	color: var(--main-color);
	font-size: 1.6rem;
	display: block;
	margin-block-end: 2rem;
	font-family: var(--inter);
	font-weight: 500;
}

.contactHanger > p{padding-block-start: 4.8rem;line-height: 2;}

.con_box{
	padding-block: 3.2rem;
	padding-inline-start: 3.2rem;
	background-color: #F5EFF9;
	border-radius: 16px;
	margin-block-start: 3.2rem;
}

.con_box > p{padding: 0;font-weight: var(--font-bold);}


/**************************************************
 footer
**************************************************/
footer{
	background-color: #333333;
	padding-block: 6.4rem;
	position: relative;
}

footer > p{
	font-size: 1.2rem;
	color: #fff;
	font-weight: 500;
	max-width: var(--max);
	margin-inline: auto;
}

footer > p span{
	font-size: 1.6rem;
	display: block;
	margin-block-end: 0.8rem;
}



/**************************************************
 fade
**************************************************/

.copy_title h2,.copy_title p,.cpoy_point,.attend_btn,.infoHanger h2,.info_cont,
.info_cont_add,.copy_title h2,.companyHanger h2,.companyHanger,.companyHanger ul,
.areaHanger h2,.areaHanger::before,.areaHanger dl,.methodHanger h2,.methodHanger ul li,
.cautionHanger h2,.cautionHanger ul,.cautionHanger p,.cautionHanger h3,.cau_table,.contactHanger h2,
.contactHanger p,.contactHanger .con_box,.movieHanger,.attend_btn_double{
	opacity: 0;
	visibility: hidden;
	transition: 1s;
}

.info_cont::before,
.companyHanger::before,
.areaHanger dl:last-of-type,
.methodHanger ul li:last-of-type{
	opacity: 0;
	visibility: hidden;
	transition: 1s;
}

.copy_title h2.appear,.copy_title p.appear,.cpoy_point.appear,.attend_btn.appear,
.infoHanger h2.appear,.info_cont.appear,.info_cont_add.appear,.companyHanger h2.appear,
.companyHanger.appear,.companyHanger ul.appear,.areaHanger h2.appear,.areaHanger.appear::before,
.areaHanger dl.appear,.methodHanger h2.appear,.methodHanger ul li.appear,
.cautionHanger h2.appear,.cautionHanger ul.appear,.cautionHanger p.appear,.cautionHanger h3.appear,
.cau_table.appear,.contactHanger h2.appear,.contactHanger h2.appear,.contactHanger p.appear,
.contactHanger .con_box.appear,.movieHanger.appear,.attend_btn_double.appear{
	opacity: 1;
	visibility: visible;
}

.info_cont.appear::before,
.companyHanger.appear::before,
.areaHanger dl:last-of-type.appear,
.methodHanger ul li.appear:last-of-type{
	transition-delay: .5s;
	opacity: 1;
	visibility: visible;
}


@media screen and (min-width: 1400px){
	.cpoy_point::before{
		content: '';
		width: 36.4rem;
		height: 24rem;
		background: url(../img/copy/img01.jpg)no-repeat center center;
		background-size: 100%;
		border-radius: 8px;
		position: absolute;
		top: -13rem;
		left: auto;
		right: calc(100vw - 46vw);
	}
	
	.cpoy_point::after{
		content: '';
		width: 48rem;
		height: 27rem;
		background: url(../img/copy/img02.jpg)no-repeat center center;
		background-size: 100%;
		border-radius: 8px;
		position: absolute;
		bottom: -5rem;
		left: auto;
		right: calc(100vw - 40vw);
	}

}