@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP);
@import url(https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Kiwi+Maru&family=Noto+Sans+JP:wght@100..900&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

/* common
------------------------------------------------------*/

body {
	font-family: "Noto Sans JP", sans-serif;
}
a:link   {color: #006633;text-decoration: underline;}
a:visited{color: #006633;text-decoration: underline;}
a:hover  {color: #ff6400;text-decoration: none;}
a:active {color: #006633;text-decoration: underline;}
body,
input,
select,
textarea {
	font-size: 16px;
}
a {
	transition:all 0.3s linear;
}
a:hover{
	color:orange!important;
}

@media screen and (min-width:420px){
	body,
	input,
	select,
	textarea {
		font-size: 14px;
	}
}
@media screen and (min-width:640px){
	body,
	input,
	select,
	textarea {
		font-size: 16px;
	}
}
@media screen and (min-width:1500px){
	body{
	    background-image:url(../img/bk1500.svg);
	    background-size: 750px auto;
	}
}

dl.dib{
	display:block;
	letter-spacing:-0.4em;
	& dt{
		display:inline-block;
		vertical-align:top;
		letter-spacing:normal
	}
	& dd{
		display:inline-block;
		vertical-align:top;
		letter-spacing:normal
	}
}
p.indent{
	padding-left:1em;
	text-indent:-1em;
}

/* structure
---------------------------------------- */
div#header{
	width:100%;
	position:fixed;
	top:0;
	left:0;
	margin:0 auto;
	padding:0;
	overflow:hidden;
	background:transparent;
	background-image:none;
	z-index:3001;
}
div#container{
	width:auto;
	padding:0;
	overflow:hidden;
}
div#contents{
	width:100%;
	max-width: calc(1024px + 10%);
	position:relative;
	clear:both;
	margin:calc(100px + 1.8em + 30px) auto 180px;
	padding:0 5%;
}
.inquiry div#contents,
.consalting div#contents{
	max-width:960px;
}
.page_content,
.page_content div.inner {
	width: auto;
}
@media screen and (min-width:760px){
	div#header{
		margin-bottom:60px;
	}
}
@media screen and (max-width:960px){
	div#contents {
		margin: calc(100px + 1.8em - 30px) auto 180px;
		padding: 0 calc(5% + 25px) 0 5%;
	}
}
@media screen and (max-width:540px){
	div#contents {
		padding: 0 5%;
	}
}


a.btn, a.btn:link,
input[type="button"].btn,
input[type="submit"],
input[type="button"],
button#btn,
button#btn2{
	max-width:500px;
	padding:20px 30px;
	font-family: "Noto Sans JP", sans-serif;
	font-size:20px;
	border:none;
	border-radius: 5px;
	background-color: #009937;
	transition:all 0.3s linear;
	clear: both;
}
a.btn:hover, a.btn:link:hover,
input[type="button"].btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button#btn:hover,
button#btn2:hover{
	color:#fff!important;
	background-color: orange;
}

@media screen and (max-width:540px){
	a.btn,
	input[type="button"].btn,
	a.btn2,
	input[type="button"].btn2,
	button#btn,
	button#btn2{
		min-width:100%;
		font-size:16px!important;
	}
}

/* header
---------------------------------------- */
div#header div.inner {
	width:100%;
}
#gnav_logo{
	height:100px;
	padding:30px 0 30px 30px;
	font-size:16px;
	font-weight:bold;
	transition:all 0.3s linear;
	& img{
		margin-right:15px;
	}
}
#gnav{
    width:100%;
    z-index:9999;
	& ul#gnav_menu{
		width:100%;
		clear:both;
		text-align:center;
		& li{
			margin:10px;
			& a{
				font-family: "Noto Sans JP", sans-serif;
				font-size:18px;
				font-weight:bold;
			}
		}
	}
	& ul#gnav_cta{
		height:100px;
		position:absolute;
		top:0;
		right:0;
		& li a{
			height:100px;
			display:block;
			padding:65px 35px 0;
			color:#fff!important;
			font-family: "Noto Sans JP", sans-serif;
			font-size:16px;
			font-weight:bold;
			transition:all 0.3s linear;
		}
		& li:nth-child(1) a{
			background:#009937 url(../img/icon_app.png) no-repeat center top 10px;
		}
		& li:nth-child(2) a{
			background:#006633 url(../img/icon_mail.png) no-repeat center top 10px;
		}
		& li a:hover{
			background-color:orange;
		}
	}
}

.slide div#container{
	margin-top:50px;
}
.slide #header{
	height:50px;
	&::before{
	    content:"";
	    position:absolute;
	    inset:0;
	    background:#006633;
	    mix-blend-mode:multiply;
	    pointer-events:none;
	}
	& #gnav_logo{
		width:calc(172px + 45px + 6em + 30px);
		float:left;
		padding:5px 15px;
		background-color:#fff;
	}
	& #gnav{
		width:calc(100% - 172px - 45px - 8em - 30px - 100px);
		float:right;
		margin-right:100px;
		overflow:hidden;
		& ul#gnav_menu{
			white-space:nowrap;
			& li a{
				color:#fff;
			}
		}
		& ul#gnav_cta li{
			width:50px;
			& a{
				height:50px;
				padding:60px 0 0;
				background-position: center top 7px;
				background-size:36px auto;
			}
		}
	}
}
@media screen and (max-width:1280px){
	.slide #header #gnav_logo{
		display:none;
	}
	.slide #header #gnav{
		width:calc(100% - 100px);
	}
	#header #gnav ul#gnav_cta li a{
		padding:60px 35px 0;
		background-size:40px auto;
		background-position: center 15px;
	}
	.slide #header #gnav ul#gnav_menu{
		padding-right:15px;
		text-align:right;
		& li a{
			font-size:16px;
		}
	}
}

@media screen and (max-width:960px){
	div#header, .slide div#header{
		margin-bottom: 0px;
		background-color:rgba(255,255,255,0.85);
		& #gnav{
			width:calc(100vw - 30px);
			max-height:100vh;
			position:fixed;
			top:0;
			right:0;
			display:none;
			float:none;
			margin-right:0;
			border-radius:0 0 0 10px;
			background-color:rgba(255,255,255,0.85);
			overflow-y:scroll;
			& ul#gnav_menu{
				width:calc(100vw - 30px);
				height:auto;
				position:static;
				& li{
					width:auto;
					display:block;
					margin:0;
					padding:0 0 0 30px;
					border-bottom:1px #ccc solid;
					& a{
						width:100%;
						display:block;
						padding:15px 0;
						color:#6c4f31;
						font-size:18px;
						text-align:left;
						white-space:nowrap;
						background:none;
					}
				}
			} 
			& ul#gnav_cta{
				width:calc(100vw - 30px);
				height:auto;
				position:static;
				& li{
					width:auto;
					display:block;
					& a{
						height:auto;
						padding:20px 0 20px 65px;
						font-size:18px;
						text-align:left;
						background-position:left 10px center;
					}
				}
			}
		}
	}
	.slide div#header:before{
		background-color:rgba(255,255,255,0.85);
	}
	.slide #header #gnav_logo{
		display:block;
	}
}
@media screen and (max-width:540px){
	#gnav_logo {
		padding: 15px 0 30px 0;
	}
}
@media screen and (max-width:420px){
	#gnav_logo {
		padding: 15px 0 30px 0;
	}
}

/* Hamburger */
/* btn_menu */
button#btn_menu {
	display:none;
	opacity: 0;
	z-index: 9999;
}
@media screen and (max-width: 960px){
	button#btn_menu {
		width: 90px;
		height: 90px;
		position: fixed;
		top: 0;
		right: 0;
		display: block;
		text-align: center;
		border:none;
		transition: all 0.3s linear;
		background:#006633;
		opacity: 1.0;
		transition: all 0.3s linear;
		overflow:hidden;
		z-index:99999;
	}
	button#btn_menu:hover {
		background-color:orange;
	}
	button#btn_menu.close {
		background-image:none;
		background-blend-mode:lighten;
	}
	button#btn_menu:before,
	button#btn_menu:after{
		width:32px;
		height:5px;
		content:"";
		position:absolute;
		top:27.5px;
		left:29px;
		display:block;
		background-color:#fff;
		transition:all 0.3s ease-out;
		z-index:10;
	}
	button#btn_menu:after{
		top:auto;
		bottom:27.5px;
	}
	button#btn_menu.close:before,
	button#btn_menu.close:after{
		top:42.5px;
		bottom:auto;
		transition:all 0.3s ease-out;
	}
	button#btn_menu.close:before{
		transform:rotate(-225deg);
	}
	button#btn_menu.close:after{
		top:auto;
		bottom:42.5px;
		transform:rotate(225deg);
	}
	button#btn_menu span{
		width:32px;
		height:5px;
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		margin:-2.5px 0 0 -16px;
		background-color:#fff;
		transition:all 0.3s ease-out;
	}
	button#btn_menu.close span{
		width:0;
		margin:-0.5vw 0 0 0;
		opacity:0;
	}
}
@media screen and (max-width:540px){
	button#btn_menu {
		width: 60px;
		height: 60px;
	}
	button#btn_menu:before,
	button#btn_menu:after{
		width:25px;
		height:5px;
		top:15px;
		left:19px;
	}
	button#btn_menu:after{
		top:auto;
		bottom:15px;
	}
	button#btn_menu.close:before,
	button#btn_menu.close:after{
		top:27px;
	}
	button#btn_menu span{
		width:25px;
		margin: -2.5px 0 0 -11px;
	}
}
@media screen and (max-width:420px){
	h1#gnav_logo {
    	padding: 5px 0 30px 0;
    	& img{
			display:block;
		}
	}
}

/* side navi
------------------------------------------------------*/
ul#side_nav{
	width:70px;
	position:fixed;
	right:0;
	bottom:calc(50vh - 515*0.5px);
	z-index:5;
	& li{
		transform:scale(0.8);
		transition:all 0.3s linear;
		transform-origin: center right;
		&:nth-child(1){
			margin-bottom:-30px;
		}
		&:nth-child(2){
			margin-top:-30px;
		}
		& a{
			width:70px;
			display:block;
			border-top:1px #ccc solid;
			border-left:1px #ccc solid;
			border-bottom:1px #ccc solid;
			border-radius:10px 0 0 10px;
			background-repeat:no-repeat;
			background-color:#fff;
			background-position:center center;
			overflow:hidden;
		}
		&:nth-child(1) a{
			height:300px;
			background-image:url(../img/sidenav1.png);
		}
		&:nth-child(2) a{
			height:215px;
			background-image:url(../img/sidenav2.png);
		}
		& a span{
			display:none;
		}
	}
	& li:hover{
		margin:0;
		transform:scale(1);
		& a{
			border-color:orange;
		}
	}
}
@media screen and (max-width:960px){
	ul#side_nav {
		width: 45px;
		& li {
			transform: scale(1);
			&:nth-child(1):hover{
				margin-bottom: -30px;
			}
			&:nth-child(2){
				margin-top: 45px;
			}
			& a {
      			width: 45px;
      		}
		}
	}
}
@media screen and (max-width:540px){
	ul#side_nav{
		display:none;
	}
}



/* footer
------------------------------------------------------*/



/* pagetop
------------------------------------------------------*/
a#pagetop{
	width:35vw;
	max-width:140px;
	position:absolute;
	top:0;
	right:0;
	bottom:auto;
	display:block;
	padding:0;
	text-align:center;
	transition:all 0.3s linear;
	z-index:99999;
}
a#pagetop.fixed{
	position:fixed;
	top:auto;
	bottom:5px;
	right:15px;
	transition:all 0.3s linear;
}
a#pagetop img{
	opacity:1!important;
}
a#pagetop:hover img{
	opacity:0.5!important;
}

/* category_title
----------------------------------------------------------- */
div#page_name{
	width:100vw;
	margin-left:calc(-50vw + 512px);
	margin-bottom:120px;
	padding:60px 0;
	text-align:center;
	background-repeat:no-repeat;
	background-position:center 50%;
	background-size:100% auto;
	animation: slide_anime 5s ease;
}
div#page_name.bg01{background-image:url(../img/pttl/01.webp);}
div#page_name.bg02{background-image:url(../img/pttl/02.webp);}
div#page_name.bg03{background-image:url(../img/pttl/03.webp);}
div#page_name.bg04{background-image:url(../img/pttl/04.webp);}
div#page_name.bg05{background-image:url(../img/pttl/05.webp);}
div#page_name.bg06{background-image:url(../img/pttl/06.webp);}
div#page_name.bg07{background-image:url(../img/pttl/07.webp);}
div#page_name.bg08{background-image:url(../img/pttl/08.webp);}
div#page_name.bg09{background-image:url(../img/pttl/09.webp);}

h1.pttl,
p.p_outline{
	display:inline-block;
	text-align:center;
	line-height:1;
	border-radius:5px;
	background-color:rgba(0,100,50,1);
}
h1.pttl{
	margin-bottom:10px;
	padding:5px 10px 10px;
	font-family: "Noto Serif JP", serif;
	color:#fff0b3;
	font-size:50px;
}
p.p_outline{
	padding:5px 10px 7px;
	color:#fff;
	font-size:18px;
}
@keyframes slide_anime {
	0%   {background-position:center 100%;}
	100% {background-position:center 50%;}
}

@media screen and (max-width:1280px){
	div#page_name{
		margin-left:calc(-50vw + 50%);
	}
}
@media screen and (max-width: 680px) {
	div#page_name {
		margin-bottom: 90px;
		background-size:auto 100%;
		animation: slide_anime_sp 5s ease;
	}
}
@keyframes slide_anime_sp {
	0%   {background-position:center -60px;}
	100% {background-position:center 0;}
}
@media screen and (max-width: 540px) {
	h1.pttl {
		font-size:calc(100vw/540*50);
	}
	h2#cttl{
		font-size:28px;
		margin-bottom:30px;
		padding:35px 0 40px;
	}
	p.p_outline {
		font-size:16px;
	}
}
@media screen and (max-width: 420px) {
	p.p_outline {
		font-size:14px;
	}
}

/* title
----------------------------------------------------------- */
.page_content div.inner h1,
div#contents.home h1.ttl,
div#contents.interview h1.sttl{
	margin:150px auto 30px;
	padding-bottom: 10px;
	font-family: "Noto Serif JP", serif;
	color:#009937;
	font-size:42px;
	text-align:center;
	line-height: 1.4;
	border-bottom:5px #e1e1e1 solid;
	& span{
		color:#ef2800;
	}
}
.page_content div.inner h1:first-child,
div#contents.interview section + h1.sttl{
	margin-top:0;
}

.page_content div.inner h2{
	margin:90px auto 15px;
	padding:1px 0 5px 15px;
	font-size:24px;
	text-align:left;
	border-left:5px #009937 solid;
	border-bottom:1px #ccc solid;
}
.page_content div.inner strong{
	font-weight:bold;
}

.page_content div.inner p{
	overflow:hidden;
}
.page_content div.inner p.note{
	font-size:14px;
}

@media screen and (max-width: 540px) {
	.page_content div.inner h1,
	div#contents.home h1.ttl,
	div#contents.interview h1.sttl {
		font-size:calc(100vw/540*42);
	}
}

/* sitenavi
----------------------------------------------------------- */
ul#sitenavi{
	margin-bottom:15px;
	padding:5px;
	border-radius:10px;
	background-color: rgba(255,255,255,0.9);
}
ul#sitenavi li{
	position: relative;
	margin:0 15px 5px 0;
	padding-left:30px;
	transition:all 0.3s linear;
}
ul#sitenavi li.home{
	padding-left:30px;
	background:url(../img/icon_home.png) no-repeat left 0.2em;
}
ul#sitenavi li::before {
	width:25px;
	height:25px;
	position:absolute;
	top:1px;
	left:0;
	content:"";
	display:inline-block;
	border-radius:50%;
	background:#0064aa url(../img/plus.png) no-repeat center center;
	transition:all 0.3s linear;
}
ul#sitenavi li.home::before {
	display:none;
}
ul#sitenavi li:has(a):hover:before{
	background:#ff6400 url(../img/minus.png) no-repeat center center;
}
@media screen and (max-width: 720px) {
	ul#sitenavi li {
		padding-left:25px;
	}
	ul#sitenavi li::before {
		width:20px;
		height:20px;
		top:3px;
		background-size:60% auto;
	}
}
@media screen and (max-width: 540px) {
	ul#sitenavi{
		font-size:12px;
	}
}




/* local_navi
----------------------------------------------------------- */
ul#lnavi{
	margin:80px auto 0;
	padding:20px 0 0 0;
	text-align:center;
	border-top:1px #ccc solid;
}
ul#lnavi li{
	margin:0 10px 10px;
}


/* pager
----------------------------------------------------------- */
ul.pager {
	clear:both;
	margin:0 auto;
	padding:30px 0 0;
	text-align:left;
	letter-spacing:-0.4em;
	border-top:1px #02ab83 solid;
}
ul.pager li{
	display:inline-block;
	margin:0 5px 10px 0;
	vertical-align:top;
	letter-spacing:normal;
	border-radius:10px;
	overflow:hidden;
}
ul.pager li.btn{
	width:calc(50% - 7.5px);
	margin:0 7.5px 15px 0;
}
ul.pager li.btn.next,
ul.pager li.btn.home{
	margin-right:0;
}
ul.pager li a{
	display:block;
	width:auto;
	padding:10px;
	color:#fff;
	text-align:center;
	border-radius:calc(0.5em + 10px);
	background-color:#00b996;
}
ul.pager li.prev a{
	padding-left:40px;
	background:#00b996 url(../img/arr.png) no-repeat left 10px center;
}
ul.pager li.next a{
	padding-right:40px;
	background:#00b996 url(../img/arr_r.png) no-repeat right 10px center;
}
ul.pager li a:hover{
	background-color:orange;
}
ul.pager li:not(.btn) a,
ul.pager li:not(.btn) span{
	width:calc(1em + 10px);
	display:block;
	padding:10px 5px;
	color:#fff;
	text-align:center;
	transition:all 0.3s linear;
}
ul.pager li:not(.btn) span{
	color:#464646;
}
@media screen and (min-width:640px){
	ul.pager li.btn{
		width:calc(25% - 11.25px);
	}
	ul.pager li.btn.next{
		margin-right:15px;
	}
}
@media screen and (min-width:860px){
	ul.pager li.btn{
		width:10em;
	}
}



/* sp_navi
----------------------------------------------------------- */
ul#sp_navi{
	display:none;
}
@media screen and (max-width: 510px) {
	ul#sp_navi{
		width:100%;
		display:block;
		position:fixed;
		bottom:0;
		opacity:1!important;
		z-index:999999999;
	}
	ul#sp_navi li{
		width:25%;
		height:50px;
		position:relative;
		transition:all 0.3s linear;
	}
	ul#sp_navi li:nth-child(1){background-color:#74a21c;}
	ul#sp_navi li:nth-child(2){background-color:#0086dc;}
	ul#sp_navi li:nth-child(3){background-color:#eb7a5a;}
	ul#sp_navi li:nth-child(4){background-color:#02ab83;}
	ul#sp_navi li a{
		width:95%;
		position:absolute;
		top:50%;
		left:50%;
		padding:0 2.5%;
		color:#fff;
		font-size:16px;
		text-align:center;
		transform:translateY(-50%) translateX(-50%);
		-webkit-transform:translateY(-50%) translateX(-50%);
	}
	ul#sp_navi li:hover{
		background-color:#ff6400;
	}
}


/* topics
---------------------------------------- */
ul.list {
	margin:10px auto 30px;
	border-bottom:1px #ccc solid;
	overflow:hidden;
}
ul.list li{
	min-height:calc(1.8em + 30px);
	position:relative;
	margin:0 auto;
	padding:15px 0 15px calc(13em + 30px);
	vertical-align:top;
	border-bottom:1px #ccc solid;
	overflow:hidden;
}
ul.list li:before{
	width:calc(11em - 20px);
	position:absolute;
	top:10px;
	left:0;
	display:block;
	padding:5px 10px;
	color:#fff;
	font-size:18px;
	text-align:center;
}
li.recruit_topics:before {content:"採用のお知らせ";  background-color:#00b4ff;}
li.recruit_event:before  {content:"イベント";        background-color:#ff9664;}
li.interview:before      {content:"採用インタビュー";background-color:#45b496;}

ul.list li a{
	display:block;
}
ul.list li span.date,
ul.list li a{
	display:inline-block;
	vertical-align:top;
	font-size:18px;
}
ul.list li span.date{
	width:6em;
	margin-right:30px;
}
ul.list li a{
	width:calc(100% - 6em - 35px);
}





/* konnahito
----------------------------------------------------------- */
div#contents.personality{
	& div#page_name p.p_outline{
		line-height:1.4;
	}
	& .page_content div.inner div.editor_content{
		& p.philosophy{
			text-align: left;
			max-width: 35em;
			margin: 0 auto;
		}
		& h1 + p.philosophy strong{
			display:block;
			padding-left: 1.2em;
			text-indent: -1.2em;
		}
		& p.competency strong{
				display:block;
				padding-left: 0.9em;
				text-indent: -0.9em;
		}
	}
}
div#contents.personality .page_content div.inner div.konnahito{
	& ul{
		margin-top:30px;
		& li{
			width:calc(50% - 15px);
			position:relative;
			margin-right:30px;
			margin-bottom:15px;
			padding: 40px 200px 100px 50px;
			background:url(https://ae211dbkym.smartrelease.jp/cms/wp-content/uploads/2026/05/baloon.png) no-repeat left top / 70% auto;
			&:nth-child(2n){
				margin-right:0;
			}
			&:after{
				width:180px;
				height:210px;
				content:"";
				position:absolute;
				right:0;
				bottom:0;
				display:block;
				background-repeat:no-repeat;
				background-position:center bottom;
				background-size:100% auto;
			}
			&:nth-child(1):after{background-image:url(https://ae211dbkym.smartrelease.jp/cms/wp-content/uploads/2026/05/ill3-1.png);}
			&:nth-child(2):after{background-image:url(https://ae211dbkym.smartrelease.jp/cms/wp-content/uploads/2026/05/ill4-1.png);}
			&:nth-child(3):after{background-image:url(https://ae211dbkym.smartrelease.jp/cms/wp-content/uploads/2026/05/ill5-1.png);}
			&:nth-child(4):after{background-image:url(https://ae211dbkym.smartrelease.jp/cms/wp-content/uploads/2026/05/ill6-1.png);}
		}
	}
}
@media screen and (max-width:1054px){
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			margin-top:30px;
			& li{
				padding: 4vw 16vw 8vw 4vw;
			}
		}
	}
}
@media screen and (max-width:960px){
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			margin-top:30px;
			& li{
				min-height: 320px;
				padding: 4vw 10vw 12vw 6vw;
				background-size: 90% auto;
			}
		}
	}
}
@media screen and (max-width:768px){
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			& li{
				width:100%;
				max-width:540px;
				min-height:240px;
				display:block;
				padding: 6vw 30vw 11vw 8vw;
				background-size: 70% auto;
				&:nth-child(2n){
					margin-left:calc(100% - 540px);
				}
			}
		}
	}
}
@media screen and (max-width:640px){
	div#contents.personality{
		& .page_content div.inner div.editor_content{
			& h1 + p{
				max-width:none!important;
			}
		}
	}
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			& li{
				min-height: 34vw;
				margin-left:0!important;
				padding: 6vw 38vw 5vw 9vw;
				font-size:16px;
				background-size: 64% auto;
			}
		}
	}
}
@media screen and (max-width:540px){
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			& li{
				min-height: 64vw;
				padding: 10vw 24vw 5vw 11vw;
				background-size: 85% auto;
			}
		}
	}
}
@media screen and (max-width:480px){
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			& li{
				min-height: 50vw;
				padding: 10vw 20vw 5vw 11vw;
				background-size: 90% auto;
				&::after {
    				width: 120px;
    				height:140px;
    			}
			}
		}
	}
}
@media screen and (max-width:450px){
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			& li{
				min-height: 65vw;
				padding:12vw 10vw 22vw 12vw;
				background-size: 100% auto;
			}
		}
	}
}
@media screen and (max-width:420px){
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			& li{
				padding:10vw 9vw 22vw 12vw;
				&::after {
    				width: 96px;
    				height:112px;
    			}
			}
		}
	}
}
@media screen and (max-width:350px){
	div#contents.personality .page_content div.inner div.konnahito{
		& ul{
			& li{
				font-size:14px;
			}
		}
	}
}


/* hagano_no
----------------------------------------------------------- */

div#contents.number .page_content div.inner ul#hagano_no{
	margin:60px auto 0;
	& li{
		width:calc(33.33% - 20px);
		position:relative;
		margin:0 30px 30px 0;
		padding:45px 15px 60px;
		border-radius:10px;
		border:5px #e1e1e1 solid;
		text-align:center;
		&:after{
			width:70px;
			height:81px;
			content:"";
			position:absolute;
			top:-45px;
			right:-30px;
			display:block;
			background:url(../../number/img/ribon.png) no-repeat center center / 100% auto;
		}
		& h2.no_ttl{
			margin:0 auto 0;
			padding:0;
			font-size:20px;
			font-weight:bold;
			text-align:center;
			border:none;
		}
		& p.number{
			min-width: 170px;
			display: inline-block;
			margin:0 auto;
			padding:0;
			font-size:20px;
			font-weight:bold;
			text-align:center;
			line-height:1;
			& strong{
				margin:0 10px 0 0;
				font-family: "Google Sans Flex", sans-serif;
				color:#009937;
				font-size:100px;
				font-weight: 500;
			}
		}
		&:nth-child(3n){
			margin-right:0;
		}
		&:nth-child(6){
			padding-top:calc(45px - 0.625em);
			padding-bottom:calc(60px - 0.625em);
			& p.number strong{
				margin-bottom:-30px;
			}
		}
		&.column2{
			width:calc(50% - 15px);
		}
		& p.fontsize_middle strong{
			margin-right:0;
			font-size:60px;
		}
		&.column_two_thirds{
			width:calc(66.66% - 10px);
		}
		&.margin_right0px{
			margin-right:0;
		}
		&.margin_right30px{
			margin-right:30px;
		}
	}
}
div#contents a.recruit_btn{
	width:100%;
	max-width:480px;
	margin:0 auto 30px;
	padding:15px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	display:block;
	border-radius:5px;
	background-color:#009937;
	&:hover{
		color:#fff!important;
		background-color:orange;
	}
}

@media screen and (max-width:960px){
	div#contents.number .page_content div.inner ul#hagano_no{
		& li{
			width:calc(50% - 15px);
			&:nth-child(3n){margin-right:30px;}
			&:nth-child(2n){margin-right:0;}
			&:last-child{
				width:100%;
				margin-right:0;
			}
		}
	}
}
@media screen and (max-width:680px){
	div#contents.number .page_content div.inner ul#hagano_no{
		& li{
			width:100%;
			padding: 30px 15px;
			&:nth-child(3n){margin-right:0;}
			&.column2 {
				width:100%;;
			}
		}
	}
}
@media screen and (max-width:540px){
	div#contents.number .page_content div.inner ul#hagano_no{
		& li{
			& h2.no_ttl{
				margin-bottom:10px;
				& br{
					display:none;
				}
			}
			& strong{
				font-size: 90px;
			}
		}
	}
}



/* interview_list
------------------------------------------------------*/
#interview_list{
	max-width:1024px;
	margin:60px auto 0;
	padding:0 0 320px;
	background:url(../../interview/img/ill.webp) no-repeat center bottom / auto 260px;
	& ul{
		& li{
			width:calc(33.33% - 40px);
			position:relative;
			margin:0 60px 60px 0;
			&:nth-child(3n){
				margin-right:0;
			}
			& div.profile_image{
				width:calc(1024px/3 - 120px/3);
				height:calc(1024px/3 - 120px/3);
				margin:0 auto 15px;
				border-radius:calc(1024px/3/2 - 120px/3/2);
				background-repeat:no-repeat;
				background-position:center center;
				background-size:cover;
				overflow:hidden;
				transition:all 0.3s linear;
				&.after{
					position:absolute;
					top:0;
				}
			}
			& h2{
				margin:0 auto 15px;
				font-size:18px;
				font-weight:bold;
			}
		}
	}
}
#interview_list ul li a       div.profile_image.after{opacity:0;}
#interview_list ul li a:hover div.profile_image.after{opacity:1;}

@media screen and (max-width:1144px){
	#interview_list{
		& ul li{
			width:calc(33.33% - 20px);
			margin-right:30px;
		}
	}
}
@media screen and (max-width:960px){
	#interview_list{
		& ul li{
			& div.profile_image{
				width: 100%;
				height: 0;
				padding-top: 100%;
			}
		}
	}
}
@media screen and (max-width:620px){
	#interview_list{
		& ul{
			& li{
				width:calc(50% - 15px);
				margin:0 30px 30px 0;
				&:nth-child(3n){
					margin-right:30px;
				}
				&:nth-child(2n){
					margin-right:0;
				}
			}
		}
	}
}
@media screen and (max-width:592px){
	#interview_list{
		padding-bottom:calc(90%/819*477 + 30px);
		background-size:100% auto;
	}
}
@media screen and (max-width:420px){
	#interview_list{
		& ul{
			& li{
				width:100%;
				margin:0 0 30px 0;
				&:nth-child(3n){
					margin-right:0;
				}
				& div.profile_image{
					width: 240px;
			        height: 0;
			        padding-top: 240px;
			        left: calc(50% - 120px);
	        	}
			}
		}
	}
}


/* interview_page
------------------------------------------------------*/
#interview_page{
	max-width:1024px;
	margin:60px auto 0;
	& div.main_image{
	}
	& div.profile_wrap{
		position: relative;
		margin:30px auto 0;
		z-index: 0;
		& div.profile_image{
			width:300px;
			height:300px;
			float:left;
			margin:-60px 0 60px 0;
			border-radius:50%;
			background-repeat:no-repeat;
			background-position:center center;
			background-size:cover;
			overflow:hidden;
		}
		& dl.profile_text{
			width:calc(100% - 360px);
			float:right;
			margin:0 auto 60px;
			& dt{
				width:10em;
				padding:5px;
				&:nth-child(4n-3){
					background-color:#daf0e1;
				}
			}
			& dd{
				width:calc(100% - 10em);
				padding:5px;
				&:nth-child(4n-2){
					background-color:#daf0e1;
				}
			}
		}
	}
	& div.entry_content{
		margin-bottom:60px;
	}
	& h2.post_title{
		clear:both;
		margin:0 auto;
		font-size:28px;
		padding:30px 0;
		border-top:1px #006633 solid;
		border-bottom:1px #006633 solid;
	}
	& div.entry_content{
		& h3.question{
			margin:60px auto 15px;
			color:#005aaa;
			font-size:24px;
			font-weight:bold;
			&:before{
				content:"――";
			}
		}
	}
}
/* oneday_schedule
------------------------------------------------------*/
table.oneday{
	width:100%;
	border-right:1px #ccc solid;
	& td{
		height:15em;
		position:relative;
		padding:15px 0;
		width:calc(100%/10);
		vertical-align: middle;
		writing-mode: vertical-lr;
		text-orientation: upright;
		letter-spacing: 0.1em;
		border-left:1px #ccc solid;
	}
}
table.oneday td{background:#e3f1dc;}
table.oneday td.twelve{background:#f5f0e1;}
table.oneday td.seventeen,table.oneday td.eighteen{background:#ecf7fa;}

table.oneday td         {background:#e3f1dc;}
table.oneday td.break   {background:#f5f0e1;}
table.oneday td.overtime{background:#ecf7fa;}

table.oneday td:after{
	position:absolute;
	bottom:-1.5em;
	left:0;
	writing-mode: horizontal-tb;
}
table.oneday td.eight:after{content:"8:00";}
table.oneday td.nine:after{content:"9:00";}
table.oneday td.ten:after{content:"10:00";}
table.oneday td.eleven:after{content:"11:00";}
table.oneday td.twelve:after{content:"12:00";}
table.oneday td.thirteen:after{content:"13:00";}
table.oneday td.fourteen:after{content:"14:00";}
table.oneday td.fifteen:after{content:"15:00";}
table.oneday td.sixteen:after{content:"16:00";}
table.oneday td.seventeen:after{content:"17:00";}


table.oneday_schedule{
	width:100%;
}
table.oneday_schedule .work    {background:#e3f1dc;}
table.oneday_schedule .break   {background:#f5f0e1;}
table.oneday_schedule .overtime{background:#ecf7fa;}

table.oneday_schedule th{
	width:46%;
	padding:3px 1%;
}
table.oneday_schedule td{
	width:2%;
	position:relative;
	padding:0;
	text-align:center;
}
table.oneday_schedule .right{
	text-align:right;
}
table.oneday_schedule td:before{
	width:1px;
	height:100%;
	content:"";
	position:absolute;
	top:0;
	left:50%;
	display:block;
	background:#646464;
}



/* business
------------------------------------------------------*/
div#contents.business{
	& div.business_box{
		padding:30px 42% 0 0;
		background-repeat:no-repeat;
		background-position:top 100px right calc(50vw - 512px);
		background-size:380px auto;
		background-attachment: fixed;
		&#credit     {background-image:url(../../business/img/bk_credit.webp);}
		&#insurance  {background-image:url(../../business/img/bk_insurance.webp);}
		&#agriculture{background-image:url(../../business/img/bk_agriculture.webp);}
		&#supply     {background-image:url(../../business/img/bk_supply.webp);}
		&#welfare    {background-image:url(../../business/img/bk_welfare.webp);}
		&#asset      {background-image:url(../../business/img/bk_asset.webp);}
		& h2{
			font-size:36px;
		}
		& h3.ttl{
			margin:30px auto 0;
			color:#009937;
			font-size:24px;
			font-weight:bold;
		}
		& p.copy{
			margin:0 auto 15px;
			color:#006633;
			font-family: "Noto Serif JP", serif;
			font-size:28px;
			font-weight:bold;
		}
		& a{
			&:before{
				background-image:url(../img/arr2.png);
			}
		}
		& ul.dib li{
			width:calc(33.33% - 20px);
			min-height:calc(30px + 7em);
			position:relative;
			margin-right:30px;
			margin-bottom:130px;
			padding:15px 10px 15px 20px;
			border-radius:20px;
			background-color:#e2ffce;
			&:nth-child(3n){
				margin-right:0;
			}
			&:after{
				width:calc(100%*130/178);
				max-width:130px;
				content:"";
				position:absolute;
				right:0;
				bottom:-100%;
				display:block;
				padding-top:100%;
				background-repeat:no-repeat;
				background-position:center center;
				background-size:100% auto;
			}
			&:nth-child(1):after{background-image:url(../../business/img/ill1.png);}
			&:nth-child(2):after{background-image:url(../../business/img/ill2.png);}
			&:nth-child(3):after{background-image:url(../../business/img/ill3.png);}
		}
	}
}

@media screen and (max-width:1159px){
	div#contents.business{
		& div.business_box{
			padding:30px 0 calc(50% + 30px);
			background-position:bottom center;
			background-size:100% auto;
			background-attachment: scroll;
			&#credit     {background-image:url(../../business/img/bk_credittb.webp);}
			&#insurance  {background-image:url(../../business/img/bk_insurancetb.webp);}
			&#agriculture{background-image:url(../../business/img/bk_agriculturetb.webp);}
			&#supply     {background-image:url(../../business/img/bk_supplytb.webp);}
			&#welfare    {background-image:url(../../business/img/bk_welfaretb.webp);}
			&#asset      {background-image:url(../../business/img/bk_assettb.webp);}
		}
	}
}
@media screen and (max-width:640px){
	div#contents.business{
		& div.business_box{
			& h2{
				font-size:28px;
			}
			& p.copy{
				font-size:24px;
			}
			& h3.ttl {
				font-size: 20px;
			}
			& ul.dib li {
				width: calc(33.33% - 20px/3);
				min-height:120px;
				margin-right:10px;
			}
		}
	}
}
@media screen and (max-width:540px){
	div#contents.business{
		& div.business_box{
			& ul.dib li {
				width: calc(100% - 130px);
				margin-right:0;
				margin-bottom:30px;
				&::after {
					width:120px;
					max-width:120px
					top: auto;
					right:-130px;
					bottom:0;
					padding-top: 120px;
				}
			}
		}
	}
}
@media screen and (max-width:420px){
	div#contents.business{
		& div.business_box{
			& ul.dib li {
				width: calc(100% - 100px);
				min-height: 100px;
				padding:10px 15px 10px 20px;
				&::after {
					width:90px;
					max-width:90px;
					right:-100px;
					padding-top: 90px;
				}
			}
		}
	}
}

ul#business_section{
	width:100%;
	position:relative;
	margin:120px auto 0;
	padding-top:54%;
	background:url(../../business/img/main_bk.svg) no-repeat center center;
	& li{
		width:180px;
		height:180px;
		position:absolute;
		&:nth-child(1){top:-90px;left:calc(50% - 90px);}
		&:nth-child(2){top:calc(25% - 90px);right:0;}
		&:nth-child(3){top:calc(75% - 90px);right:0;}
		&:nth-child(4){bottom:-90px;left:calc(50% - 90px);}
		&:nth-child(5){top:calc(75% - 90px);left:0;}
		&:nth-child(6){top:calc(25% - 90px);left:0;}
		& a{
			width:100%;
			position:absolute;
			display:block;
			background-repeat:no-repeat;
			background-position:center center;
			opacity:1;
			&:hover{opacity:1;}
		}
		&:nth-child(1) a{background-image:url(../../business/img/1h.svg);}
		&:nth-child(2) a{background-image:url(../../business/img/2h.svg);}
		&:nth-child(3) a{background-image:url(../../business/img/3h.svg);}
		&:nth-child(4) a{background-image:url(../../business/img/4h.svg);}
		&:nth-child(5) a{background-image:url(../../business/img/5h.svg);}
		&:nth-child(6) a{background-image:url(../../business/img/6h.svg);}
		&:hover img{opacity:0!important;}
	}
}
@media screen and (max-width:1054px){
	ul#business_section{
		& li{
			width: calc(100vw*180/1054);
			height:calc(100vw*180/1054);
			&:nth-child(1){top:calc(-100vw*180/1054/2);left:calc(50% - 100vw*180/1054/2);}
			&:nth-child(2){top:calc(25% - 100vw*180/1054/2);right:0;}
			&:nth-child(3){top:calc(75% - 100vw*180/1054/2);right:0;}
			&:nth-child(4){bottom:calc(-100vw*180/1054/2);left:calc(50% - 100vw*180/1054/2);}
			&:nth-child(5){top:calc(75% - 100vw*180/1054/2);left:0;}
			&:nth-child(6){top:calc(25% - 100vw*180/1054/2);left:0;}
		}
	}
}
@media screen and (max-width:760px){
	ul#business_section{
		margin-top:90px;
	}
}
@media screen and (max-width:660px){
	ul#business_section{
		margin-bottom:-30px;
	}
}
@media screen and (max-width:540px){
	ul#business_section{
		margin-top:60px;
		margin-bottom:-90px;
		& li{
		}
	}
}

/* bounding smile
------------------------------------------------------*/
#rolling_wrap{
	width: 100vw;
	position:absolute;  
	text-align: center;
	transition:top .7s ease-out;
	z-index:2;
}
#rolling_img{
	width:85px;
}
.bounce{
	animation:bounce .5s ease;
}
@media screen and (max-width:680px){
	div#rolling_wrap img#rolling_img{
		width:75px;
		margin-top: 15px;
	}
}
@media screen and (max-width:540px){
	div#rolling_wrap img#rolling_img{
		width:65px;
		margin-top: 20px;
	}
}
@media screen and (max-width:420px){
	div#rolling_wrap img#rolling_img{
		width:55px;
		margin-top: 25px;
	}
}
@keyframes bounce{
  0%{
    transform:translateY(0) rotate(0deg);
  }

  35%{
    transform:translateY(-20px) rotate(140deg);
  }

  60%{
    transform:translateY(0) rotate(240deg);
  }

  80%{
    transform:translateY(-6px) rotate(320deg);
  }

  100%{
    transform:translateY(0) rotate(360deg);
  }
}