@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;500;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,400;1,900&display=swap');
@font-face {
	font-family: "kouzan";
	src: url("../font/KouzanSoushoOTF.woff2") format("woff2"),url("./font/KouzanSoushoOTF.woff") format("woff");
}

body{
	background: url(../img/back_image.webp);
}
*{
	box-sizing: border-box;
}
a{
	display: inline;
	font-size: inherit;
	color:blue;
	text-decoration: underline;
}
.d_name {
	font-family: "kouzan";
	font-size: 32px;
}
span.bold{
	font-size: inherit;
	color:#F15A22;
}

/***loading gif ****/
.loading{
	position: fixed;
	bottom:100px;
	left:50%;
	transform: translateX(-50%);
	z-index:99;
	width: 100px;
	height: 100px;
}

/****pagebottom****/
.pagebottom{
	position: fixed;
	bottom: 0px;
	right: 0px;
	display: flex;
	flex-flow:row nowrap;
	justify-content: space-between;
	align-items: center;
	width: 600px;
	height: 70px;
	padding:10px 10px;
	background-color: #fff;
	z-index: 9;
	opacity: 0;
}

.pagebottom div{
	height: 100%;
}

.pagebottom div img{
	display: inline-block;
	width: auto;
	height: 100%;
}

.pagebottom .h-left img{
	display: none;
}



.pagebottom .h-right{
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	height: 40px;
}

.pagebottom .h-right .h_tel{
	padding-right: 15px;
}

.pagebottom .h-right .h_tel img{
	width: 40px;
	height: auto;
	padding-right: 5px;
}

.pagebottom .h-right .h_mail img{
	width: 40px;
	height: auto;
	padding-right: 5px;
}

/* gatefold */
.gatefold {
	width: 100%;
}

.wrap{
          display: flex;
          flex-flow: column nowrap;
          justify-content:center;
          align-items: flex-start;
	width: 100%;
	/* height: 100%; */
	opacity:0;
}

.img {
	width: 100%;
	height: 100vh ;
	background: url("../img/top_img_sp2.webp") repeat top center;
	background-size: contain;
	background-attachment: fixed ;
}

img.feture{
	display: block;
	width: 100%;
	max-width: 700px;
	height: auto;
	margin-bottom: 10px;
}

.navi{
	width: 100%;
	height: 500px;
	background-color: red;
}

.sub_title{
	font-size: 18px;
	color:#F68B1E;
	font-weight: bold;
}

.titel{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
}

.sign{
	display: inline-block;
	text-align: right;
	width: 100%;
}

.content.banner img{
	width: 100%;
	height: 100%;
}


.content{
	display: flex;
	flex-flow:  nowrap;
	justify-content: center;
	width: 100%;
	padding:50px 10px;
}

.content > div{
	width: 100%;
	max-width: 1024px;
	padding:0 10px;
}

.content.recrute>div {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
	align-items: stretch;
	overflow: hidden;
}

.twitter-timeline{
	width: 100%;
	padding:10px;
	height: 400px;
	overflow-y: scroll;
	margin-bottom: 20px;
}

.insta_wrap, .insta_wrap_sp{
	width: 100%;
	max-width: 350px;
	padding:0px;
}

.insta_wrap{
	display: none;
}

.insta_wrap img, .insta_wrap_sp img{
	width: 100%;
	height: auto;
}

.recruite_title{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background-color: #19d;;
	padding:5px;
}
.engage{
	margin-top:20px;
	margin-bottom: 40px;
}

#engage-contributions-widget-wrapper{
	display: none;
}

.engage-recruit-widget-sp{
	display: block;
}

.content.banner {
	padding-left:0;
	padding-right: 0;
}

.content.banner div {
	padding-left:0;
	padding-right: 0;
}

.content.about>div {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	overflow: hidden;
}


.content.about>div .ecpresion_wrap{
	width: 100%;
}
.content.about>div .image_wrap{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding:0px 0px 5px 5px;
}

.content.about>div .image_wrap.left{
	padding:0px 0px 0px 5px;
	order:1;
}

.content.about>div .image_wrap img{
	width: 80%;
	height: auto;
	margin-top:15px;
}

.komiadsi {
	display: block;
	font-size: inherit;
	color:#5095d9;
	margin-top:10px;
}

.table {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items:flex-start;
	background: url(../img/sakura_bg.webp) no-repeat;
	background-size: contain;
	background-position: bottom right;
}
.table-row{
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	border-top: 1px solid #666;
}

.table-row:last-of-type{
	border-bottom: 1px solid #666;
}

.table-row p:first-of-type {
	width: 30%;
	padding:10px 10px;
	background-color: #ddd;
	border-right: 1px solid #666;
	border-left: 1px solid #666;
}

.table-row p:last-of-type{
	width: 70%;
	padding:10px 10px;
	border-right: 1px solid #666;
}

.taio_map{
	display: block;
	width: 360px;
	margin:10px auto;
}

.ecpresion iframe {
	width: 100%;
}

.policy_li{
	padding-left:65px;
}

.policy_li span{
	font-size: inherit;
	display: inline-block;
	position: relative;
	margin-bottom: 15px;;
}

.policy_li span::before{
	content: "";
	display: inline-block;
	position: absolute;
	top:0;
	left: -55px;
	width: 50px;
	height: 50px;
	background: url(../img/s_1.png);
	background-size: cover;
}

.policy_li span:nth-of-type(2)::before{
	background: url(../img/s_2.png);
}

.policy_li span:nth-of-type(3)::before{
	background: url(../img/s_3.png);
}

.policy_li span:nth-of-type(4)::before{
	background: url(../img/s_4.png);
}

.policy_li span:nth-of-type(5)::before{
	background: url(../img/s_5.png);
}

.footer{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding:20px 10px 80px;
	background-color: #DD6B3D;

}

.footer div{
	color: #fff;
}

.footer div.f_name {
	font-size: 20px;
	margin-bottom:10px;
}

.recrute_sns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	margin-top: 30px;
	margin-bottom: 20px;
	width: 100%;
}

.sns_section_title {
	font-size: 18px;
	font-weight: 900;
	color: #5095d9;
	text-align: center;
	margin-bottom: 15px;
	position: relative;
	width: 100%;
}

.sns_section_title::after {
	content: "";
	display: block;
	width: 50px;
	height: 3px;
	background: #5095d9;
	margin: 5px auto 0;
	border-radius: 2px;
}

.sns_card {
	flex: 1;
	min-width: 250px;
	max-width: 400px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 15px 15px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sns_card:hover {
	transform: scale(1.03);
	box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.sns_intro {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 20px;
	color: #444;
	letter-spacing: 0.05em;
}

.sns_qr {
	display: none;
	width: 200px;
	height: 200px;
	margin-bottom: 15px;
	border-radius: 15px;
	background: #fff;
	padding: 10px;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
	border: 1px solid #f0f0f0;
}

.sns_qr img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sns_name {
	font-size: 16px;
	font-weight: 900;
	margin-bottom: 10px;
	letter-spacing: 0.02em;
}

.x_card {
	background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,240,240,0.9) 100%);
	border-top: 4px solid #000;
}

.x_card .sns_name {
	color: #000;
}

.insta_card {
	background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,240,245,0.9) 100%);
	border-top: 4px solid #E1306C;
}

.insta_card .sns_name {
	color: #E1306C;
}

.sns_link {
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	background: #5095d9;
	padding: 10px 25px;
	border-radius: 30px;
	transition: all 0.3s;
	box-shadow: 0 4px 10px rgba(80, 149, 217, 0.3);
}

.x_card .sns_link {
	background: #333;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.insta_card .sns_link {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	box-shadow: 0 4px 10px rgba(225, 48, 108, 0.3);
}

.sns_link:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0,0,0,0.2);
	text-decoration: none;
	color: #fff;
}

.recrute_right{
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	text-align: center;
}

.ft_br{
	display: inline;
}

.recrute_right div{
	width: 100%;
}

.recrute_right div img{
	width: 100%;
	height: auto;
}




@media all and (min-width: 768px) {

	/***pagebottom****/
	.pagebottom .h-left img{
		display: block;
	}

	.img {
		background: url("../img/top_img_tab2.webp") repeat center center;
		background-size: contain;
		background-attachment: cover;
	}

	.content{
		flex-flow: row nowrap;
	}

	.content > div{
		padding:0;
	}

	.content.recrute>div {
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		overflow: hidden;
	}

	.twitter-timeline{
		width: 350px;
		height:600px ;
		margin-bottom: 0px;
	}

	.insta_wrap, .insta_wrap_sp{
		padding:0 10px;
	}

	.insta_wrap{
		display: block;
	}

	.insta_wrap_sp{
		display: none;
	}

	.engage {
		margin-top:0;
	}

	#engage-contributions-widget-wrapper{
		display: block;
		width: 400px !important;
		max-width: 400px !important;
		height: 300px !important;
	}

	.engage-recruit-widget-sp{
		display: none;
	}

	.recrute_right{
		width: 100%;
		max-width: 800px;
	}

	.recrute_sns {
		width: 400px;
		margin-bottom: 0;
	}

	.ecpresion {
		font-size: 18px;
	}

	.content.about>div {
		flex-flow: row nowrap;
		justify-content: space-evenly;
	}

	.content.about>div .ecpresion_wrap{
		width: 70%;
	}
	.content.about>div .image_wrap{
		width: 30%;
		padding:70px 0px 5px 5px;
	}

	.content.about>div .image_wrap.left{
		padding:70px 30px 0px 5px;
		order: 0;
	}

	.table-row p:first-of-type {
		width: 20%;
		padding:10px 15px;
	}

	.table-row p:last-of-type{
		width: 80%;
		padding:10px 15px;
	}

	.content.about>div .image_wrap img{
		width: 100%;
		height: auto;
		margin-top:15px;
	}

	.ft_br{
		display: none;
	}

	.sns_qr {
		display: block;
	}

}


@media all and (min-width: 1024px) {
	.gatefold::before,
	.gatefold::after {
		content: '';
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background: url(../img/top_img_back.webp) top center no-repeat;
		background-size: cover;
		-webkit-transition: all 1s;
		transition: all 3s;
		z-index: 1;
	}

	.gatefold::before {
		left: 0;
		clip: rect(0px 50vw 100vh 0px);
	}

	.gatefold::after {
		right: 0;
		clip: rect(0px 100vw 100vh 50vw);
	}

	.gatefold.open::before {
		-webkit-transform: translate3d(-550px,0,0);
		transform: translate3d(-550px,0,0);
		opacity: 0;
	}

	.gatefold.open::after {
		-webkit-transform: translate3d(550px,0,0);
		transform: translate3d(550px,0,0);
		opacity: 0;
	}

	.img {
		background: url("../img/top_img2.webp") no-repeat center center / cover;
		background-attachment: fixed ;
	}

	img.feture{
		max-width: 700px;
		margin-bottom: 20px;
	}

	.twitter-timeline{
		width: 450px;
		margin-bottom: 0px;
	}

	#engage-contributions-widget-wrapper{
		width: 500px !important;
		max-width: 500px !important;
	}

	.recrute_right{
		width: 500px;
		max-width: 500px;
	}

	.recrute_sns {
		width: 100%;
		max-width: 1000px;
	}


}


@media all and (min-width: 1440px) {

	.ecpresion {
		font-size: 22px;
	}

}