@charset "utf-8";

/* common style
----------------------------------------------------------- */
div#contents.home{}


/* main_copy style
----------------------------------------------------------- */
div#contents.home{
	position:relative;
	& h1#main_copy{
		width:100vw;
		position:absolute;
		top:60px;
		left: calc(-50vw + 50%);
		margin:calc(600px/2 - 10em) auto 0;
		padding: 0;
		text-align:center;
		z-index:2;
		& strong{
			width:10em;
			display:block;
			margin:0 auto 15px;
			padding:5px 0 10px;
			color:#fff0b3;
			font-family: "Noto Serif JP", serif;
			font-size:90px;
			text-align:center;
			line-height: 1;
			background-color:rgba(0,100,50,0.8);
			white-space:nowrap;
		}
		& span{
			color:#fff;
			font-size:24px;
			text-align:center;
			background-color:rgba(0,100,50,0.8);
		}
	}
}
@media screen and (max-width: 960px) {
	div#contents.home h1#main_copy strong {
		font-size: 9vw;
	}
}
@media screen and (max-width: 540px) {
	div#contents.home h1#main_copy strong {
		font-size: 9vw;
	}
	div#contents.home h1#main_copy span {
		font-size: 5.5vw;
	}
}
/* recruit_movie style
----------------------------------------------------------- */
div#contents.home{
	& a.recruit_movie{
		width:240px;
		position:absolute;
		right: calc(-50vw + 50% + 240px - 120px);
		display:block;
		margin:-180px 0;
		padding:calc(240px/2 - 2.5em) 0;
		color:#fff;
		font-size:24px;
		font-weight:bold;
		text-align:center;
		border-radius:50%;
		background:url(../img/top/movie_bk.webp) no-repeat center center;
	}
}
@media screen and (max-width:1280px){
	div#contents.home a.recruit_movie {
		right: calc(-50vw + 50% + 240px - 180px);
	}
}
@media screen and (max-width:960px){
	div#contents.home {
		& a.recruit_movie {
			width: 180px;
			margin: -120px 0;
			padding: calc(180px/2 - 2.5em) 0;
			font-size: 20px;
		}
	}
}
@media screen and (max-width:540px){
	div#contents.home {
		& a.recruit_movie {
			width: 150px;
			right:calc(50vw - 75px);
			margin: -200px 0;
			padding: calc(150px/2 - 2.5em) 0;
		}
	}
}

/* slideshow style
----------------------------------------------------------- */
div#contents.home #slideshow {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;
	&  ul#slider li a {
		padding: 600px 0 0 0;
	}
}
#slideshow ul{
	position: relative;
	min-width:1024px;
	margin: 0;
	z-index:1;
}
#slideshow ul#slider li a,
#slideshow ul#slider li span{
	width:100%;
	display:block;
	padding:20% 0 0 0;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
#slideshow div.bx-wrapper div.bx-pager {
	padding-left:120px;
	padding-right:120px;
	text-align: center;
}
@media screen and (min-width:1024px){
	#slideshow ul#slider li a,
	#slideshow ul#slider li span{
		padding-top:600px;
	}
}
@media screen and (max-width:960px){
	#slideshow div.bx-wrapper div.bx-pager{
		padding-left:60px;
		padding-right:120px;
		text-align:left;
	}
}
@media screen and (max-width:540px){
	#slideshow div.bx-wrapper div.bx-pager{
		padding-left:30px;
		padding-right:30px;
		text-align:center;
	}
}
@media screen and (max-width:480px){
	#header h1#site_logo {
		margin-left:-15px;
	}
}
@media screen and (max-width:460px){
	#header h1#site_logo {
		width:calc(100%*345/460/0.9);
	}
}


/* topics_list style
----------------------------------------------------------- */
div#contents.home #topics_list{}

@media screen and (max-width:820px){
	div#contents.home #topics_list{
		& ul.list{
			& li{
				padding-left:0;
				& span.date{
					display:block;
					margin-bottom:10px;
					padding-left:calc(11em + 30px);
				}
				& a{
					width:100%;
				}
			}
		}
	}
}
@media screen and (max-width:540px){
	div#contents.home #topics_list{
		& h1.ttl{
			margin-top:90px;
		}
		& ul.list li{
			&::before {
				font-size: 16px;
			}
			& span.date{
				font-size:16px;
				padding-left:calc(10em + 30px);
			}
			& a{
				font-size:16px;
			}
		}
	}
}

/* interview_list style
----------------------------------------------------------- */
div#contents.home #interview_list{
	width: 100vw;
	max-width:100vw;
	margin-left: calc(-50vw + 50%);
	padding: 0;
	background:none;
	overflow:hidden;
	& ul#carousel{
		width:calc(100vw - 60px);
		& li:nth-child(1){margin-top:60px;}
	}
}
div#carousel_wrap {
    transform: rotate(-12deg);
    & div.bx-viewport{
    	overflow:visible !important;
    }
	& ul#carousel li {
    	transform: rotate(12deg);
    }
}
div#contents.home #interview_list{
	& ul li p.baloon{
		display:none;
		position:absolute;
		top: -180px;
    	left: -150px;
    	transition:all 0.3s linear;
	}
	& ul li:hover p.baloon{
		display:block;
	}
}
@media (max-width:540px){
    div#carousel_wrap{
	    & ul#carousel li{
	        float:none !important;
	    }
	    & div.bx-wrapper{
	    	max-width: none!important;
	    }
	}
	#interview_list {
		& ul li div.profile_image{
			opacity: 0 !important;
			&.after {
				opacity: 1 !important;
			}
		}
	    & a.btn{min-width:0;}
    }
}
@media (max-width:420px){
    div#carousel_wrap ul#carousel{
    	letter-spacing:0!important;
    	transform: translateX(20vw);
    	& li{
			&:nth-child(1){
				margin-top:0!important;
			}
        }
    }
    div.bx-wrapper{
    	max-width: none!important;
    }
}

/* contents_list style
----------------------------------------------------------- */
div#contents.home #contents_list{
	width: calc(100vw - 60px);
	margin-left: calc(-50vw + 50% + 30px);
	padding:0 30px;
	& ul{
		& li{
			width:20%;
			height:500px;
			position:relative;
			background-repeat:no-repeat;
			background-position:center center;
			background-size:auto 130%;
			transition:all 0.3s linear;
			transform-origin: center center;
			&:nth-child(1){background-image:url(../img/top/contents1.webp);}
			&:nth-child(2){background-image:url(../img/top/contents2.webp);}
			&:nth-child(3){background-image:url(../img/top/contents3.webp);}
			&:nth-child(4){background-image:url(../img/top/contents4.webp);}
			&:nth-child(5){background-image:url(../img/top/contents5.webp);}
			&:hover{
				background-size:auto 125%;
			}
			& a{
				min-height:calc(9em + 90px);
				position:absolute;
				bottom:0;
				display:block;
				padding:30px;
				background-color:rgba(0,100,50,0.8);
				&:hover{
					background-color:orange;
				}
				& h2.contents_name{
					margin-bottom:30px;
					color:#fff !important;
					font-size:20px;
					text-align:center;
					text-decoration:underline;
					white-space:nowrap;
					&:hover{
						text-deforation:none;
					}
				}
				& p{
					color:#fff !important;
				}
			}
				
		}
	}
}
@media screen and (min-width:1400px){
	div#contents.home #contents_list ul li a{
		min-height:calc(7em + 90px);
	}
}
@media screen and (max-width:1400px){
	div#contents.home #contents_list ul li{
		background-size:auto 105%;
	}
	div#contents.home #contents_list ul li:hover{
		background-size:auto 100%;
	}
}
@media screen and (max-width:1280px){
		div#contents.home #contents_list{
		& ul{
			& li{
				width:50%;
				height: 400px;
				&:nth-child(1){background-image:url(../img/top/contents1tb.webp);}
				&:nth-child(1){background-position:right 25% center;}
				&:nth-child(2){background-image:url(../img/top/contents2tb.webp);}
				&:nth-child(2){background-position:right 20% center;}
				&:nth-child(3){background-image:url(../img/top/contents3tb.webp);}
				&:nth-child(4){background-image:url(../img/top/contents4tb.webp);}
				&:nth-child(4){background-position:right 25% center;}
				&:nth-child(5){background-image:url(../img/top/contents5tb.webp);}
				& a{
					min-height: calc(3em + 90px);
					padding: 20px 30px;
					& h2.contents_name{
						margin-bottom:15px;
					}
				}
			}
		}
	}
}
@media screen and (max-width:660px){
	div#contents.home #contents_list{
		& ul{
			& li{
				width:100%;
				height: 400px;
				&:nth-child(1){background-image:url(../img/top/contents1tb.webp);}
				&:nth-child(1){background-position:right 25% center;}
				&:nth-child(2){background-image:url(../img/top/contents2tb.webp);}
				&:nth-child(2){background-position:right 20% center;}
				&:nth-child(3){background-image:url(../img/top/contents3tb.webp);}
				&:nth-child(4){background-image:url(../img/top/contents4tb.webp);}
				&:nth-child(4){background-position:right 25% center;}
				&:nth-child(5){background-image:url(../img/top/contents5tb.webp);}
				& a{
					min-height: calc(3em + 90px);
					padding: 20px 30px;
					& h2.contents_name{
						margin-bottom:15px;
					}
				}
			}
		}
	}
}
@media screen and (max-width:420px){
	div#contents.home #contents_list{
		padding:0;
		& ul{
			& li{
				&:nth-child(1){background-image:url(../img/top/contents1sp.webp);}
				&:nth-child(1){background-position:center center;}
				&:nth-child(2){background-image:url(../img/top/contents2sp.webp);}
				&:nth-child(2){background-position:center center;}
				&:nth-child(3){background-image:url(../img/top/contents3sp.webp);}
				&:nth-child(4){background-image:url(../img/top/contents4sp.webp);}
				&:nth-child(4){background-position:center center;}
				&:nth-child(5){background-image:url(../img/top/contents5sp.webp);}
			}
		}
	}
}



/* faq_list style
----------------------------------------------------------- */
div#contents.home #faq_list{
	padding:0 25px 0 0;
	& dl{
		& dt{
			width: 100%;
      		min-height: 100px;
			position:relative;
			padding:30px 0 15px 120px;
			color:#006633;
			font-size:18px;
			font-weight:bold;
			text-decoration:underline;
			cursor:pointer;
			transition:all 0.3s linear;
			&:hover{
				color:orange;
			}
			&:before{
				width:90px;
				content:"Q";
				position:absolute;
				top:0;
				left:0;
				display:block;
				padding:calc(45px - 0.7em) 0 calc(45px - 0.4em);
				color:#fff;
				font-size:36px;
				font-weihgt:bold;
				text-align:center;
				vertical-align:middle;
				line-height:1;
				border-radius:50%;
				background-color:#009937;
			}
		}
		& dd{
			padding:0 0 0 120px;
			&:before{
				content:"A";
				margin-right:15px;
				color:#ef2800;
				font-size:36px;
				font-weight:bold;
				line-height:1;
			}
		}
	}
}

@media screen and (max-width:660px){
	div#contents.home #faq_list{
		& dl{
			& dt{
				min-height:60px;
				padding:10px 0 0 90px;
				&:before{
					width:60px;
					padding:calc(30px - 0.7em) 0 calc(30px - 0.4em);
				}
			}
			& dd{
				margin-bottom:30px;
				padding-left:20px;
			}
		}
	}
}
@media screen and (max-width:540px){
	div#contents.home #faq_list{
		padding:0;
	}
}

/* message_list style
----------------------------------------------------------- */
div#contents.home #message_list{
	padding:0 25px 0 0;
	& ul{
		& li{
			width:calc(33.33% - 20px);
			min-height:calc(3em + 40px);
			position:relative;
			margin:0 30px 30px 0;
			padding:20px;
			border-radius:15px;
			&:nth-child(3n){
				margin-right:0;
			}
			&.yamaguki{background-color:#fff0b3;}
			&.wasurena{background-color:#d8e7ff;}
			&.wakame  {background-color:#e2f3ce;}
			&:before{
				width:60px;
				height:60px;
				content:"";
				position:absolute;
				bottom:0;
				right:30px;
				display:block;
				transform:rotate(150deg) skewX(-45deg);
				z-index:-1;
				display:none;/*デザイン変更*/
			}
			&.yamaguki:before{background-color:#fff0b3;}
			&.wasurena:before{background-color:#d8e7ff;}
			&.wakame:before  {background-color:#e2f3ce;}
		}
	}
	& button#btn {margin-bottom:15px;}
	& button#btn2{margin-top:0;margin-bottom:0;}
}
div#contents.home #message_list ul.dib{
    overflow:hidden;
    transition:height 0.5s ease;
}
div#contents.home #message_list ul.dib li{
	color:#936636;
	border:3px #936636 solid;
	border-radius:50px;
    transition:opacity 0.3s ease;
    background-color:#fff;
}

@media screen and (max-width:960px){
	div#contents.home #message_list{
		& ul{
			& li{
				width:calc(50% - 15px);
				&:nth-child(3n){margin-right:30px;}
				&:nth-child(2n){margin-right:0;}
			}
		}
	}
}
@media screen and (max-width:540px){
	div#contents.home #message_list{
		& ul{
			& li{
				width:100%;
				margin-right:0;
				&:nth-child(3n){margin-right:0;}
				&:nth-child(2n){margin-right:0;}
				font-size:14px;
			}
		}
	}
}
@media screen and (max-width:540px){
	div#contents.home #message_list{
		padding:0;
	}
}