/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
:root {
	--white:#ffffff;
	--black:#191919;
	--l_black:#333333;
	--gray:#d9d9d9;
	--l_gray:#eeeeee;
	--d_gray:#999999;
	--dd_gray:#777777;
	--red:#D84639;
	--d_red:#5C1812;
	--yellow:#e5a82e;
	--d_yellow:#bb8210;
	--blue:#3459E7;
	--d_blue:#172457;
	--green:#36AC36;
	--d_green:#0F420F;
	--violet:#B63BD5;
	--d_violet:#3C1247;
	--sky:#5ec2d2;
	--brown:#926834;
}

/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0;
	font-family: 'Inter', sans-serif;
	font-size:14px;
	color:var(--black);
	letter-spacing:0.5px;
	box-sizing:border-box;
}
h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
a{
	font-size:14px;
	color:var(--black);
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
img{
	vertical-align:bottom;
}
ul{
	margin:0;
	padding:0;
	
	li{
		list-style:none
	}
}

/*---------- デフォルトスタイルのリセット ----------*/
input, textarea{
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
select, button{
	border:none;
	border-radius:0;
	cursor:pointer;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

/*---------- disabled ----------*/
input:disabled, textarea:disabled, select:disabled{
	background-color:var(--gray);
}

/*---------- scrollbar ----------*/
::-webkit-scrollbar{
	width:5px;
	height:5px;
}
::-webkit-scrollbar-track{
	background:var(--white);
}
::-webkit-scrollbar-thumb{
	background:var(--dd_gray);
	/*box-shadow:inset 0 0 0 1px var(--gray;*/
}

/*---------- text-select ----------*/
::selection{
	color:var(--dd_gray);
	background:none;
}
::-moz-selection{
	color:var(--dd_gray);
    background:none;
}

/*---------- loading ----------*/
.loading{
	display:none;
}	
.loading.active{
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.5);
	z-index:500;
	
	span{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		width:100%;
		text-align:center;

		i{
			font-size:50px;
			color:var(--white);
		}
	}
}

/*---------- responsive ----------*/
@media(max-width:768px){
	.pc{
		display:none !important;
	}
}
@media(min-width:769px){
	.sp{
		display:none !important;
	}	
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
header {
	position: relative;
	width: 100%;
	z-index: 100;
}

header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--white);
}

.header_index{
	position:relative;
	background:none;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:header_index;
}
@keyframes header_index{
	0%, 70%{
		transform:translateY(-100px);
		opacity:0;
	}
	100%{
		transform:translateY(0);
		opacity:1;
	}
}

.head_contents {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	/* max-width: 1440px; */
	height: 100px;
	margin: 0 auto;
	padding: 0 50px;
	border-bottom: 1px solid #999999;
	z-index: 100;
}

.head_logo a {
	display: block;
}

.head_logo a img {
	height: 80px;
}

.head_option {
	display: flex;
	align-items: center;
	gap: 30px;
	visibility: hidden;
}

/* .head_lang {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--white);
}

.head_lang i {
	font-size: 14px;
	color: var(--white);
}

.head_lang select {
	font-size: 12px;
	line-height: 1;
	color: var(--white);
	background: none;
	border: none;
}

.head_lang select option {
	background-color: var(--black);
}
*/
.head_hamburger {
	display: block;
	position: relative;
	width: 30px;
	height: 22px;
	margin-bottom: 1px;
	cursor: pointer;
	z-index: 100;
}

.head_hamburger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--black);
	animation-duration: 0.3s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

.head_hamburger span.top {
	top: 0;
	transform: rotate(0deg);
}

.head_hamburger span.middle {
	top: 50%;
	transform: rotate(0deg);
}

.head_hamburger span.bottom {
	top: 100%;
	transform: rotate(0deg);
	}

.head_nav {
	display: block;
	position: relative;
	/* top: 50%; */
	/* right: 0; */
	/* bottom: 0; */
	width: 400px;
	background-color: var(--white);
	/* overflow: auto; */
	opacity: 0;
	visibility: visible;
	transition: 0.3s;
	z-index: 90;
}

.head_nav_area {
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	/* padding: 0 30px; */
}

.head_nav_area .contents {
	/* display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 70px;
	gap: 50px; */
	align-items: center;
	height: 100%;
}
.head_nav_area .contents a {
	font-size: 18px;
	width: 100%;
    display: block;
}

.head_nav_area .contents ul {
	display: flex;
	justify-content: space-between;
}

.head_nav_area .contents .link li {
	display: block;
	margin-bottom: 20px;
}

.head_nav_area .contents .link li a {
	display: inline-block;
	position: relative;
	padding: 0 5px;
	font-family: YuMincho, 'Yu Mincho', serif;
	font-size: 24px;
	color: var(--white);
	transition: 0.3s;
}

.head_nav_area .contents .link li a::before {
	content: '';
	position: absolute;
	top: 48%;
	left: 0;
	width: 0;
	border-top: 1px solid var(--white);
	transition: 0.3s;
}

.head_nav_area .contents .link li a:hover {
	color: var(--d_gray);
}

.head_nav_area .contents .link li a:hover::before {
	width: 100%;
}

.head_nav_area .contents .link li:last-child {
	margin: 0;
}

/* .head_nav_area .contents .sns {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.head_nav_area .contents .sns a {
	display: block;
	margin-right: 15px;
}

.head_nav_area .contents .sns a i {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	font-size: 20px;
	color: var(--black);
	background-color: var(--white);
	border-radius: 50%;
	transition: 0.3s;
} */

/* .head_nav_area .contents .sns a i:hover {
	background-color: var(--d_gray);
}

.head_nav_area .contents .copy {
	font-size: 12px;
	color: var(--white);
	text-align: right;
}

body.nav_open {
	overflow: hidden;
} */

.head_nav {
	opacity: 1;
	visibility: visible;
}
/* body.nav_open .head_nav {
	opacity: 1;
	visibility: visible;
} */

body.nav_open .head_hamburger span.top {
	top: 50%;
	transform: rotate(30deg);
}

body.nav_open .head_hamburger span.middle {
	opacity: 0;
}

body.nav_open .head_hamburger span.bottom {
	top: 50%;
	transform: rotate(-30deg);
}

@keyframes nav_open_top {
	0% { top: 0; transform: rotate(0deg); }
	50% { top: 50%; transform: rotate(0deg); }
	100% { top: 50%; transform: rotate(30deg); }
}

@keyframes nav_open_middle {
	0%, 50% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes nav_open_bottom {
	0% { top: 100%; transform: rotate(0deg); }
	50% { top: 50%; transform: rotate(0deg); }
	100% { top: 50%; transform: rotate(-30deg); }
}

@keyframes nav_close_top {
	0% { top: 50%; transform: rotate(30deg); }
	50% { top: 50%; transform: rotate(0deg); }
	100% { top: 0; transform: rotate(0deg); }
}

@keyframes nav_close_middle {
	0%, 50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes nav_close_bottom {
	0% { top: 50%; transform: rotate(-30deg); }
	50% { top: 50%; transform: rotate(0deg); }
	100% { top: 100%; transform: rotate(0deg); }
}

/*------------------------------------------------*/
/*-------------------- footer --------------------*/
/*------------------------------------------------*/
.footer_contents {
    background-color: #555555;
    color: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center; 
	padding: 50px 0;
	gap: 30px;
}
.footer_contents a {
    color: var(--white);
}
.footer_contents .footer_logo img {
    width: 150px;
}
.footer_contents .footer_tags ul {
    display: flex;
    gap: 30px;
}
.footer_contents .footer_tags ul li a{
	font-size:16px;
}
.copy_rights {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.copy_rights p{
	font-size:14px;
}


/*------------------------------------------------*/
/*--------------------  home  --------------------*/
/*------------------------------------------------*/

/*---------- animation > 共通 ----------*/
.fadein_up{
	transform:translateY(50px);
	opacity:0;
	transition:0.8s;
}
.fadein_up.active{
	transform:translateY(0);
	opacity:1;
}

.fadein_left{
	transform:translateX(50px);
	opacity:0;
	transition:0.8s;
}
.fadein_left.active{
	transform:translateX(0);
	opacity:1;
}

/*---------- top > loading ----------*/
.top_loading_box{
	position:fixed;
	left:0;
	width:100%;
	height:0;
	background-color:var(--d_gray);
	overflow:hidden;
	opacity:0;
	z-index:5000;
	animation-duration:2s;
	animation-iteration-count:1;
	animation-timing-function:cubic-bezier(0.49, 0, 0.87, 0.17);
}
.top_loading_box img{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	height:200px;
	opacity:1;
	animation-name:top_loading_box_img;
	animation-duration:0.8s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box:before{
	content:'';
	position:absolute;
	left:0;
	width:100%;
	height:1px;
	background-color:var(--gray);
	z-index:1;
	animation-name:top_loading_box;
	animation-duration:1.8s;
	animation-iteration-count:1;
	animation-timing-function:ease;
	/* animation-timing-function:cubic-bezier(0.49, 0, 0.87, 0.17); */
}
.top_loading_box.top{
	top:0;
	animation-name:top_loading_top;
}
.top_loading_box.top:before{
	bottom:0;
}
.top_loading_box.top img{
	bottom:-100px;
}
.top_loading_box.bottom{
	bottom:0;
	animation-name:top_loading_bottom;
}
.top_loading_box.bottom:before{
	top:0;
}
.top_loading_box.bottom img{
	top:-100px;
}
@keyframes top_loading_box_img{
	0%, 20%{
		opacity:0;
	}
	80%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box{
	0%, 60%{
		width:0;
	}
	100%{
		width:100%;
	}
}
@keyframes top_loading_top{
	0%, 70%{
		height:50%;
		opacity:1;
	}
	100%{
		height:0;
		opacity:0;
	}
}
@keyframes top_loading_bottom{
	0%, 70%{
		height:50%;
		opacity:1;
	}
	100%{
		height:0;
		opacity:0;
	}
}

/*---------- v2 ----------*/
.top_loading_box_v2{
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--d_gray);
	overflow:hidden;
	opacity:0;
	z-index:5000;
	animation-name:top_loading_box_v2;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:cubic-bezier(0.49, 0, 0.87, 0.17);
}
.top_loading_box_v2 .img{
	position:relative;
	width:200px;
	height:200px;
}
.top_loading_box_v2 .img img{
	width:100%;
	opacity:1;
	animation-name:top_loading_box_img_v2;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v2 .img .icon1{
	position:absolute;
	top:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon1_v2;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v2 .img .icon2{
	position:absolute;
	top:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon2_v2;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v2 .img .icon3{
	position:absolute;
	bottom:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon3_v2;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v2 .img .icon4{
	position:absolute;
	bottom:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon4_v2;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
@keyframes top_loading_box_v2{
	0%, 80%{
		opacity:1;
	}
	100%{
		opacity:0;
	}
}
@keyframes top_loading_box_img_v2{
	0%, 10%{
		opacity:0;
	}
	25%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon1_v2{
	0%, 35%{
		opacity:0;
	}
	45%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon2_v2{
	0%, 45%{
		opacity:0;
	}
	55%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon3_v2{
	0%, 55%{
		opacity:0;
	}
	65%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon4_v2{
	0%, 65%{
		opacity:0;
	}
	70%, 100%{
		opacity:1;
	}
}

/*---------- v3 ----------*/
.top_loading_box_v3{
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	background-color:var(--d_gray);
	overflow:hidden;
	opacity:1;
	z-index:5000;
	animation-name:top_loading_box_v3;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:cubic-bezier(0.49, 0, 0.87, 0.17);
}
.top_loading_box_v3 .img{
	position:relative;
	width:200px;
	height:200px;
}
.top_loading_box_v3 .img img{
	width:100%;
	opacity:1;
	animation-name:top_loading_box_img_v3;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v3 .img .icon1{
	position:absolute;
	top:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon1_v3;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v3 .img .icon2{
	position:absolute;
	top:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon2_v3;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v3 .img .icon3{
	position:absolute;
	bottom:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon3_v3;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v3 .img .icon4{
	position:absolute;
	bottom:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon4_v3;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
@keyframes top_loading_box_v3{
	0%, 80%{
		left:0;
		opacity:1;
	}
	100%{
		left:-100%;
		opacity:0;
	}
}
@keyframes top_loading_box_img_v3{
	0%, 10%{
		transform:translateX(50px);
		opacity:0;
	}
	25%, 100%{
		transform:translateX(0);
		opacity:1;
	}
}
@keyframes top_loading_box_icon1_v3{
	0%, 35%{
		opacity:0;
	}
	45%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon2_v3{
	0%, 45%{
		opacity:0;
	}
	55%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon3_v3{
	0%, 55%{
		opacity:0;
	}
	65%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon4_v3{
	0%, 65%{
		opacity:0;
	}
	70%, 100%{
		opacity:1;
	}
}

/*---------- v4 ----------*/
.top_loading_box_v4{
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0;
	right:-100%;
	width:100%;
	height:100%;
	background-color:var(--d_gray);
	overflow:hidden;
	opacity:1;
	z-index:5000;
	animation-name:top_loading_box_v4;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:cubic-bezier(0.49, 0, 0.87, 0.17);
}
.top_loading_box_v4 .img{
	position:relative;
	width:200px;
	height:200px;
}
.top_loading_box_v4 .img img{
	width:100%;
	opacity:1;
	animation-name:top_loading_box_img_v4;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v4 .img .icon1{
	position:absolute;
	top:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon1_v4;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v4 .img .icon2{
	position:absolute;
	top:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon2_v4;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v4 .img .icon3{
	position:absolute;
	bottom:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon3_v4;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v4 .img .icon4{
	position:absolute;
	bottom:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon4_v4;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
@keyframes top_loading_box_v4{
	0%, 80%{
		right:0;
		opacity:1;
	}
	100%{
		right:-100%;
		opacity:0;
	}
}
@keyframes top_loading_box_img_v4{
	0%, 10%{
		transform:translateX(50px);
		opacity:0;
	}
	25%, 100%{
		transform:translateX(0);
		opacity:1;
	}
}
@keyframes top_loading_box_icon1_v4{
	0%, 35%{
		opacity:0;
	}
	45%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon2_v4{
	0%, 45%{
		opacity:0;
	}
	55%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon3_v4{
	0%, 55%{
		opacity:0;
	}
	65%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon4_v4{
	0%, 65%{
		opacity:0;
	}
	70%, 100%{
		opacity:1;
	}
}

/*---------- v5 ----------*/
.top_loading_box_v5{
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:-100%;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--d_gray);
	overflow:hidden;
	opacity:1;
	z-index:5000;
	animation-name:top_loading_box_v5;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:cubic-bezier(0.49, 0, 0.87, 0.17);
}
.top_loading_box_v5 .img{
	position:relative;
	width:200px;
	height:200px;
}
.top_loading_box_v5 .img img{
	width:100%;
	opacity:1;
	animation-name:top_loading_box_img_v5;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v5 .img .icon1{
	position:absolute;
	top:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon1_v5;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v5 .img .icon2{
	position:absolute;
	top:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon2_v5;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v5 .img .icon3{
	position:absolute;
	bottom:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon3_v5;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_box_v5 .img .icon4{
	position:absolute;
	bottom:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_box_icon4_v5;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
@keyframes top_loading_box_v5{
	0%, 80%{
		top:0;
		opacity:1;
	}
	100%{
		top:-100%;
		opacity:0;
	}
}
@keyframes top_loading_box_img_v5{
	0%, 10%{
		transform:translateY(50px);
		opacity:0;
	}
	25%, 100%{
		transform:translateY(0);
		opacity:1;
	}
}
@keyframes top_loading_box_icon1_v5{
	0%, 35%{
		opacity:0;
	}
	45%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon2_v5{
	0%, 45%{
		opacity:0;
	}
	55%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon3_v5{
	0%, 55%{
		opacity:0;
	}
	65%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_box_icon4_v5{
	0%, 65%{
		opacity:0;
	}
	70%, 100%{
		opacity:1;
	}
}



/*---------- new ----------*/
.top_loading_area{
	display:flex;
	justify-content:center;
	position:fixed;
	left:0;
	width:100%;
	height:0;
	background-color:var(--d_gray);
	overflow:hidden;
	opacity:0;
	z-index:5000;
	animation-duration:3.5s;
	animation-iteration-count:1;
	animation-timing-function:cubic-bezier(0.49, 0, 0.87, 0.17);
}
.top_loading_area:before{
	content:'';
	position:absolute;
	left:0;
	width:100%;
	height:1px;
	background-color:var(--gray);
	z-index:1;
	animation-name:top_loading_border;
	animation-duration:3.5s;
	animation-iteration-count:1;
	animation-timing-function:ease;
}
.top_loading_area .img{
	position:relative;
	width:200px;
	height:100px;
}
.top_loading_area .img img{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	width:100%;
	opacity:1;
	animation-name:top_loading_area_img;
	animation-duration:3.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_area.top{
	align-items:flex-end;
	top:0;
	animation-name:top_loading_area_top;
}
.top_loading_area.top:before{
	bottom:0;
}
.top_loading_area.top img{
	bottom:-100px;
}
.top_loading_area.bottom{
	align-items:flex-start;
	bottom:0;
	animation-name:top_loading_area_bottom;
}
.top_loading_area.bottom:before{
	top:0;
}
.top_loading_area.bottom img{
	top:-100px;
}
.top_loading_area .img .icon1{
	position:absolute;
	top:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_area_icon1;
	animation-duration:3.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_area .img .icon2{
	position:absolute;
	top:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_area_icon2;
	animation-duration:3.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_area .img .icon3{
	position:absolute;
	bottom:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_area_icon3;
	animation-duration:3.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}
.top_loading_area .img .icon4{
	position:absolute;
	bottom:10px;
	left:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--black);
	animation-name:top_loading_area_icon4;
	animation-duration:3.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-in;
}

@keyframes top_loading_area_img{
	0%, 10%{
		opacity:0;
	}
	25%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_area_icon1{
	0%, 30%{
		opacity:0;
	}
	42%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_area_icon3{
	0%, 42%{
		opacity:0;
	}
	54%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_area_icon2{
	0%, 54%{
		opacity:0;
	}
	66%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_area_icon4{
	0%, 66%{
		opacity:0;
	}
	78%, 100%{
		opacity:1;
	}
}
@keyframes top_loading_border{
	0%, 78%{
		width:0;
	}
	85%, 100%{
		width:100%;
	}
}
@keyframes top_loading_area_top{
	0%, 85%{
		height:50%;
		opacity:1;
	}
	100%{
		height:0;
		opacity:0;
	}
}
@keyframes top_loading_area_bottom{
	0%, 85%{
		height:50%;
		opacity:1;
	}
	100%{
		height:0;
		opacity:0;
	}
}





.main_container {
	padding-bottom: 150px;
}
.home_main_visual{
	position:relative;
	height:600px;
	overflow:hidden;

	h1{
		position:absolute;
		top:0;
		left:0;
		z-index:1;
	}
	img{
		position:relative;
		width: 100%;
		height:100%;
		object-fit:cover;
		z-index:2;
	}
}
.home_main_visual_v2{
	position:relative;
	height:600px;
	overflow:hidden;
	animation-name:home_main_visual_v2;
	animation-duration:4s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;

	h1{
		position:absolute;
		top:0;
		left:0;
		z-index:1;
	}
	img{
		position:relative;
		width: 100%;
		height:100%;
		object-fit:cover;
		z-index:2;
	}
}
@keyframes home_main_visual_v2{
	0%, 80%{
		/* transform:translateY(50px); */
		opacity:0;
	}
	100%{
		/* transform:translateY(0); */
		opacity:1;
	}
}


.overflow_hidden_box {
    overflow: hidden;
}
.home_set_1 {
	max-width: 1150px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
	margin-top: 150px;
	overflow: visible;
	position: relative;
}
.home_set_1 .side_1 {
    display: flex;
	z-index:30;
}
.home_set_1 .side_1 h2,
.home_set_1 .side_1 h3 {
	writing-mode: vertical-rl;
	text-orientation: upright;
}
.home_set_1 .side_1 h2 {
    font-family: 'Mohave', sans-serif;
    font-size: 120px;
    font-weight: 400;
    background-color: var(--white);
    letter-spacing: -50px;
    line-height: 80px;
    position: relative;
    z-index: 20;
}
.home_set_1 .side_1 h3 {
    font-size: 40px;
    font-weight: 400;
	padding-top: 25px;
	letter-spacing: 10px;
	z-index: 20;
}
.home_custom_1::before {
	content: "";
    width: 100vw;
    position: absolute;
    z-index: 1;
    border-radius: 30px;
}
.home_info::before {
    background-color: var(--d_red);
    right: 0;
    bottom: 1px;
	height: 200px;
}
.home_info .side_1 h2 {
    color: var(--red);
}
.home_custom_1 .side_2 {
    padding: 50px;
    position: relative;
    flex: 0 0 auto;
    height: fit-content;
	width: 70%;
	margin-bottom: 100px;
}
.home_custom_1 .side_2::before {
	content: "";
    width: 100vw;
    height: 100%;
    position: absolute;
    z-index: 5;
    border-radius: 30px;
}
.home_info .side_2::before {
    background-color: var(--red);
    top: 0;
    left: 0;
}
.home_custom_1 .side_2 .contents {
    display: grid;
	position: relative;
    z-index: 10;
}
.home_info .side_2 .contents {
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: repeat(2, auto); */
    gap: 50px;
}
.home_custom_1 .side_2 .contents img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.home_custom_1 .side_2 .contents .content {
    border-radius: 20px;
    overflow: hidden;
	background-color: var(--white);
	/* height: 320px; */
}
.home_info .side_2 .contents .content_detail {
    padding: 20px;
}
.home_custom_1 .side_2 .contents .content_detail .content_note {
    font-size: 16px;
    color: var(--dd_gray);
}
.home_custom_1 .side_2 .contents .content_detail .content_title {
    font-size: 18px;
    line-height: 30px;
}
.home_custom_1 .side_2 .bottom_side {
	position: relative;
    z-index: 10;
	margin-top: 50px;
}
.home_custom_1 .side_2 .bottom_side a {
    width: 100%;
    display: block;
    font-size: 18px;
    text-align: center;
    padding: 20px;
    background-color: var(--white);
    box-sizing: border-box;
    border-radius: 10px;
}
.home_custom_2::before {
    content: "";
    width: 100vw;
    position: absolute;
    z-index: 5;
    border-radius: 30px;
}
.home_about::before {
    background-color: var(--d_green);
    bottom: 1px;
    left: 0;
    height: 290px;
}
.home_about .side_1 h2 {
    color: var(--green);
}
.home_custom_2 .side_2 {
    position: relative;
    z-index: 10;
	width: 80%;
}
.home_custom_2 .side_2 .contents {
    height: 500px;
    width: auto;
    position: relative;
}
.home_custom_2 .side_2 .contents::before {
	content: "";
    background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
    position: absolute;
    height: 100%;
    width: 100vw;
	border-radius: 30px;
}
.home_about .side_2 .contents::before {
    background-image: url(/images/home_about_img_1.png);
    top: 0;
    right: 0;
}
.home_custom_2 .side_2 .bottom_side {
	display: flex;
    justify-content: space-between;
    align-items: flex-end;
	gap: 14%;
}
.home_about .side_2 .bottom_side {
    padding: 50px 0 50px 50px;
}
.home_custom_2 .about_link a {
    display: block;
    font-size: 18px;
    text-align: center;
    padding: 20px;
    color: var(--white);
    border-radius: 10px;
	box-sizing: border-box;
}
.home_custom_2 .about_link {
    width: 43%;
}
.home_custom_2 .about_content {
    width: 66%;
}
.home_about .about_link a {
    background-color: var(--green);
}
.home_custom_2 .about_content p {
    font-size: 18px;
	line-height:30px;
	color: var(--white);
}
.home_works .side_2 .contents::before {
    background-image: url(/images/home_works_img_1.png);
}
.home_works .side_1 h2 {
    color: var(--blue);
}
.home_works::before {
    background-color: var(--d_blue);
    right: 0;
    bottom: 1px;
    height: 290px;
}
.home_works .about_link a {
    background-color: var(--blue);
}
.home_works .side_2 .bottom_side {
    padding: 50px 50px 50px 0;
}
.home_staff .side_1 h2 {
    color: var(--violet);
}
.home_staff .side_2::before {
    background-color: var(--violet);
    top: 0;
    right: 0;
}
.home_staff::before {
    background-color: var(--d_violet);
    left: 0;
    bottom: 1px;
    height: 200px;
}
.home_staff .side_2 .contents {
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(2, auto); */
    gap: 40px;
}
.home_staff .side_2 .contents .content_detail .content_note {
    text-align: center;
}
.home_staff .side_2 .contents .content_detail .content_title {
    text-align: center;
	font-weight: 500;
}
.home_staff .side_2 .contents .content_detail {
    padding: 10px;
}

/*------------------------------------------------*/
/*--------------------- info ---------------------*/
/*------------------------------------------------*/
.head_box {
    overflow: hidden;
}
.container_page_head {
    max-width: 1200px;
    margin: 0 auto;
	position: relative;
	padding-top: 100px;
}
.container_page_head::before {
    content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 210px;
	width: 110vw;
	z-index: 10;
	border-radius: 50px 0;
}
.info_head::before {
	background-color: var(--red);
}
.container_page_head::after {
    content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 210px;
	width: 110vw;
	z-index: 5;
	border-radius: 0 50px;
}
.info_head::after {
	background-color: var(--d_red);
}
.container_page_head h1 {
    font-family: 'Mohave', sans-serif;
    font-size: 120px;
    font-weight: 500;
    line-height: 113px;
    color: var(--white);
	z-index: 20;
    position: relative;
}
.container_page_head h2 {
    font-size: 45px;
    font-weight: 400;
	z-index: 20;
    position: relative;
}
.container_contents {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 160px;
}

.news_tag{
	display:flex;
	align-items:center;
	gap:20px;
	margin-bottom:50px;
	padding-bottom:20px;
	border-bottom:1px solid var(--gray);
}
.news_tag h2{
	font-size:18px;
}
.news_tag ul{
	display:flex;
	gap:5px 15px;
	flex-wrap:wrap;
	align-items:center;
}
.news_tag ul li a{
	font-size:14px;
	color:var(--d_gray);
}
.news_tag ul li a:hover{
	color:var(--yellow);
}

.container_contents .container_contents_detail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(2, auto); */
    gap: 40px;
}
.container_contents .container_contents_detail .content::before{
    content: "";
	position: absolute;
	bottom: -10px;
	right: -10px;
	height: 100%;
	width: 100%;
	z-index: 10;
	border-radius: 20px;
}
.info_contents .container_contents_detail .content::before{
	background-color: var(--red);
}
.container_contents_detail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    position: relative;
    z-index: 20;
    border-radius: 20px 20px 0 0;
	background-color: #ffffff;
}
.container_contents_detail .content {
    /* border-radius: 20px; */
	position: relative;
	/* background-color: var(--white); */
	/* height: 320px; */
}
.container_contents .container_contents_detail .content_box{
	position: relative;
	height:100%;
	background-color: var(--white);
	border-radius: 20px;
	z-index:20;
}

.container_contents_detail .content_detail {
    padding: 20px;
	/* background-color: var(--white); */
	position: relative;
	z-index: 20;
	/* border-radius: 0 0 20px 20px; */
	/* height: 120px; */
    box-sizing: border-box;
}
.container_contents_detail .content_detail .content_note {
    font-size: 16px;
    color: var(--dd_gray);
	line-height: 30px;
}
.container_contents_detail .content_detail .content_title {
    font-size: 18px;
    line-height: 30px;
}
.container_contents .container_contents_page_numbers {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.container_contents .container_contents_page_numbers .page_number {
    font-size: 20px;
    font-family: 'Mohave', sans-serif;
    color: var(--white);
    height: 50px;
    width: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info_contents .container_contents_page_numbers .page_number {
    background-color: var(--d_red);
}

/*------------------------------------------------*/
/*--------------------- about --------------------*/
/*------------------------------------------------*/
.about_head::before {
    background-color: var(--green);
}
.about_head::after {
    background-color: var(--d_green);
}
.container_page_details .container_page_detail {
    margin: 0 auto;
    margin-top: 150px;
	max-width: 1200px;
}
.container_page_details .container_page_detail p {
    font-size: 18px;
    line-height: 34px;
}
.container_page_details .container_page_detail_img {
    margin-top: 150px;
    height: 400px;
    overflow: hidden;
}
.container_page_detail_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.page_contents {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 150px;
    justify-content: space-between;
}
.page_contents .page_contents_link {
    max-width: 300px;
	width: 30%;
}
.page_contents .page_contents_containers {
    max-width: 800px;
	width: 70%;
}
.page_contents .page_contents_link .sticky_box {
    position: sticky;
    top: 0;
}
.page_contents .page_contents_link a {
    display: flex;
    width: 100%;
    font-size: 16px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 20px 0;
	border-bottom: 1px solid;
	box-sizing: border-box;
}
.page_contents .page_contents_link a:first-of-type {
    border-top: 1px solid;
}
.page_contents .page_contents_link img {
    width: 20px;
}
.page_contents .page_contents_containers .page_contents_container {
    margin-top: 150px;
}
.page_contents .page_contents_containers .page_contents_container:first-of-type {
    margin-top: 0;
}
.page_contents .page_contents_containers .container_titles{
	margin-bottom:50px;
}
.page_contents .page_contents_containers .container_title_en {
    font-family: 'Mohave', sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 25px;
}
.page_contents_about .page_contents_containers .container_title_en {
    color: var(--green);
}
.page_contents .page_contents_containers .container_title_ja {
    font-size: 35px;
	letter-spacing: 3px;
}
.page_contents .page_contents_containers .container_detail {
    /* margin-top: 50px; */
	gap: 3%;
}
.page_contents .page_contents_containers .container_detail p {
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 1.5px;
}
.page_contents .page_contents_containers .container_detail img{
	margin-top:50px;
	width:100%;
}

.page_contents_container_set2 .container_detail {
    display: flex;
    justify-content: space-between;
}
.page_contents_container_set2 .container_detail_colum {
    width: 50%;
}
.page_contents_container .container_detail .container_detail_block {
    padding: 20px 0;
    border-bottom: 1px solid var(--d_gray);
}
.page_contents_container .container_detail .container_detail_block:first-of-type {
    border-top: 1px solid var(--d_gray);
}
.page_contents_container .container_detail .container_detail_colum_title {
    color: var(--d_gray);
    line-height: 26px;
	letter-spacing: 1.5px;
}
.page_contents_container_set3 .container_detail .container_detail_block {
    display: block;
}

/*------------------------------------------------*/
/*--------------------- works --------------------*/
/*------------------------------------------------*/
.works_head::before {
    background-color: var(--blue);
}
.works_head::after {
    background-color: var(--d_blue);
}
.page_contents_works .page_contents_containers .container_title_en {
    color: var(--blue);
}

/*------------------------------------------------*/
/*--------------------- staff --------------------*/
/*------------------------------------------------*/
.staff_head::before {
    background-color: var(--violet);
}
.staff_head::after {
    background-color: var(--d_violet);
}
.staff_contents .container_contents_detail .content::before{
	background-color: var(--violet);
}
.staff_contents .container_contents_page_numbers .page_number {
    background-color: var(--d_violet);
}
.staff_contents .container_contents_detail .content_detail {
    text-align: center;
}

/*------------------------------------------------*/
/*----------------article blog page---------------*/
/*------------------------------------------------*/
.article_container{
	max-width: 1200px;
	margin: 0 auto;
	padding:50px;
}
.blog_header{
	padding-bottom:50px;
	border-bottom:1px solid var(--red);

	time{
		font-size:16px;
		color:var(--d_gray);
	}
	h1{
		font-size:36px;
	}
	ul{
		display:flex;
		flex-wrap:wrap;
		gap:5px 10px;
		margin-top:20px;

		li{
			padding:5px 10px;
			font-size:12px;
			border: 1px solid var(--red);

			a{
				color:var(--red);
			}
		}
	}
}
.blog_body{
	padding:50px 0;

	> a{
		color:#d34490;
		text-decoration:none;
		font-weight:bold;
	}
	> p{
		line-height:2;
	}
	> img{
		text-align:center;
		display:block;
		margin:0 auto 20px;
		width:100%;
		max-width:350px;
	}
	> time{
		float:right;
		padding-top:10px;
	}
	pre{
		margin:20px 0;
		padding:10px;
		background-color:var(--l_gray);
		border:1px solid var(--gray);
		border-radius:5px;
	}
	blockquote{
		margin:20px 0;
		padding:2px 0 2px 10px;
		border-left:5px solid var(--gray);
	}
}

.blog_container{
	display:grid;
	gap:50px;
}
.blog_row{
	display:grid;
	gap:50px;

	&.col2{
		grid-template-columns:repeat(2, 1fr);
	}
	/* &.col3{
		grid-template-columns:repeat(3, 1fr);
	}
	&.col4{
		grid-template-columns:repeat(4, 1fr);
	} */
}
.blog_column{
	h2{
		padding:5px 0 5px 15px;
		font-size:30px;
		border-bottom:1px solid var(--red);
		border-left:5px solid var(--red);
	}
	h3{
		padding:3px 0 3px 15px;
		font-size:22px;
		border-left:3px solid var(--red);
	}
	p{
		font-size:16px;
		line-height:2;
	}
	a{
		text-decoration:underline;
	}
	.syntaxhighlighter{
		margin:0 !important;
		padding:10px 0 !important;
		border:1px solid var(--l_gray);
	}
	img{
		display:block;
		width:100%;
	}
	iframe{
		display:block;
		width:100%;
		height:400px;
	}
	hr{
		margin:50px 0;
		border:none;
		border-top:2px dotted var(--red);
	}
}
.blog_footer{
	padding-top:50px;
	border-top:1px solid var(--red);

	h2{
		margin-bottom:10px;
		font-size:20px;
	}
}
.related_container{
	display:grid;
	gap:15px;

	a{
		display:flex;
		align-items:center;
		gap:15px;
		padding:15px;
		border:1px solid var(--violet);

		time{
			font-size:13px;
			color:var(--gray);
		}
		h3{
			font-size:16px;
			color:var(--black);
		}
	}
}
.bottom_side_button a {
    width: 100%;
    display: block;
    font-size: 18px;
    text-align: center;
    padding: 20px;
    background-color: var(--white);
    box-sizing: border-box;
    border-radius: 10px;
    background-color: var(--d_red);
    color: var(--white);
    max-width: 1200px;
    margin: 0 auto;
}
.relate_area{
	.relate_item{
		border:1px solid var(--violet);
		margin-bottom:15px;
		padding:0 10px 10px;


		h3{
			margin:10px 0;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}

		a{
			color:#000;
		}

		.item{
			li:first-child{
				color:var(--black);
				border-right:1px solid var(--violet);
				padding-left:0;
			}

			li{
				display:inline-block;
				padding:0 5px;

				a{
					color:var(--violet);
				}
			}
		}
	}
}


/*-- ec_task --*/
.contents_flex{
	display:flex;
    padding:30px;
    background:#dffafa;
    align-items:center;
	gap:20px;

	> div{
		width:50%;

		img, video{
			width:100%;
		}

		#slider{
			.slick-list{
				width:100%;
			}
		}
	}

	.right_text{
		h3{ 
			font-size:32px;
			margin:0px 0 20px;
		}

		ul{
			max-width:520px;
			margin:0 auto;
		}
	}
}

.contents_flex.left{
	background:@white;
}


/*--------------------------------------------------*/
/*-------------------- paginate --------------------*/
/*--------------------------------------------------*/
.pagination{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	margin:50px 0 0;
	font-size:0;
	text-align:center;
}
.pagination li span,
.pagination li a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:50px;
	height:50px;
	font-size:18px;
	color:var(--white);
	border-radius:10px;
}
.paginate_info .pagination li span,
.paginate_info .pagination li a{
	background-color:var(--d_red);
}
.paginate_info .pagination li.active span,
.paginate_info .pagination li.active a{
	background-color:var(--red) !important;
}