@charset "UTF-8";
/*!
Theme Name: yoshida-sgo
Version: 1.0.0
*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

:root{
	--main-color: #317121;
	--mainback-color: #fafff1;
	--sub-color: #6aa710;
	--subback-color: #f7f4ec;
	--main-txt-color: #317121;
	--sub-txt-color: #1353aa;

	--black-txt-color: #212121;
}

body,
button,
input,
select,
optgroup,
textarea {
	color:#212121;
	line-height: 1.6;
	letter-spacing: 0.04em;
	font-family: "Noto Sans JP","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,sans-serif;
}

img{
	vertical-align: top;
}
a:hover img{
	opacity: 0.8;
}
a,a:visited,a:active{
	color: var(--main-txt-color);
}
a:hover{
	color: var(--main-txt-color);
	text-decoration: none;
}

ul,ol{
	margin: 0;
	padding: 0;
}
ul li{
	list-style: inside none;
}
ol li{
	list-style-position: inside;
	margin-bottom: 20px;
}
ul.disc li{
	list-style: inside disc;
}
ul.arrowlist li,ul.arrowlist2 li{
	margin-bottom: 20px;
}
ul.arrowlist li:before,ul.arrowlist2 li:before,ul.arrowlist3 li:before{
	content: "\f138";
	margin-right: 5px;
	font-family: FontAwesome;
	font-weight: 400;
	font-size: 0.8em;
	color: var(--main-txt-color);
}
ul.arrowlist2 li:before{
	color: var(--sub-txt-color);
}
ul.arrowlist3 li:before{
	content: "\f105";
	font-weight: 400;
}


dl.table dt {
	float: left;
	padding-left:1em;
	font-weight:bold;
}
dl.table dt:before {
	content: '◆';
	margin-right: 5px;
	color: var(--main-txt-color);
}
dl.table dd {
	margin: 0 0 1.5em;
	padding-left: 14em;
	padding-bottom: 1.2em;
	border-bottom: 1px dashed #bbd3bc;
}
dl.table dt:first-child {
	padding-top:1.2em;
}
dl.table dt:first-child + dd {
	padding-top:1.2em;
	border-top: 1px dashed #bbd3bc;
}
.square:before {
	content: '■';
	margin-right: 6px;
	color: var(--main-txt-color);
}
.circle:before{
	content: "○";
	margin-right: 6px;
	color: var(--main-txt-color);
}
.rectangle{
	padding-left: 0.5em;
	margin: 0;
	margin-bottom: 0.5em;
	border-left: 4px solid var(--main-txt-color);
}

table{
	border-collapse: collapse;
	background-color: #ffffff;
	margin-bottom: 0.6em;
	font-size: 1em;
}
table tr:first-child th,table tr:first-child td{
	border-top: 1px solid #a4bfa5;
}
table tr th,table tr td{
	padding: 1.5em 0em;
	padding-left: 2em;
	border-bottom: 1px solid #a4bfa5;
	text-align: left;
}
table.time-table tr td{
	font-weight: bold;
	color: #111;
}
table tr th{
	background-color: var(--subback-color);
}
table tr td{
	padding: 1.5em 0em;
	padding-left: 2em;
}
table caption {
	background-color: #ffffff;
	border:1px solid var(--sub-txt-color);
	border-bottom: none;
	padding: 3px 0;
	padding-left: 10px;
	text-align: left;
}
table caption span.table-title{
	font-size: 1.2em;
	font-weight: bold;
	margin-right: 10px;
}
table.color2 tr:first-child th,table.color2 tr:first-child td{
	border-top: 2px solid var(--main-color);
}
table.color2 tr th,table.color2 tr td{
	border-bottom: 2px solid var(--main-color);
}
table.color2 tr th{
	background-color: var(--mainback-color);
}
table.color2 caption {
	border:1px solid var(--main-txt-color);
}

address{
	font-style: normal;
}
b{font-weight: normal;}
em{font-style: normal;}

.m-top0{margin-top: 0}
.m-btm0{margin-bottom: 0px}
.m-btm10{margin-bottom: 10px}
.m-btm30{margin-bottom: 30px}
.m-btm50{margin-bottom: 50px}
.m-btm80{margin-bottom: 80px}
.m-btm100{margin-bottom: 100px}

.greentxt{color: var(--main-txt-color);}
.orangetxt{color: var(--sub-txt-color);}
.redtxt{color: #dc3545;}
.bluetxt{color: var(--sub-txt-color);}
.blacktxt{color:var(--black-txt-color);}

.boldtxt{font-weight: bold !important;}
.smalltxt{font-size: 0.8em !important;}
.txtindent{text-indent: 1.2em}

.centertxt{text-align: center !important;}
.center-wrap{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
}

.box-shadow{
	box-shadow: 0 1.5rem 1rem -2rem hsl(180 50% 20% / 40%);
}

.hide{display:none;}

.btn{text-align: center;}
.btn a{
	position: relative;
	display: inline-block;
	min-width: 230px;
	padding: 10px 50px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--main-color);
	background: url("../images/common/green_bg.png") repeat center;
	border-radius: 5px;
}
.btn a:hover{
	color: var(--main-color);
	background: none;
	background-color: #fff;
	transition: all 1s;
}

.btn-left{
	text-align: left;
}
.btn-right{
	text-align: right;
}

.btn-1 a{
	color: var(--main-txt-color);
	border: 2px solid var(--main-color);
	background: none;
	background-color: #fff;
}
.btn-1 a:hover{
	color: #fff;
	background-color: var(--main-color);
}


.sp{
	display: none;
}

@media screen and (max-width: 768px) {
	.sp{display: block !important;}
	.pc{display: none !important;}
	.center-wrap{width: 94%;}
	.btn a{
		font-size: 5vw;
	}
	dl.table dt {
		float: unset;
		padding-left:unset;
	}
	dl.table dd {
		margin: 0 0 1.5em;
		padding-left: unset;
	}
	dl.table dt:first-child {
		padding-top:1.2em;
		border-top: 1px dashed var(--main-txt-color);
	}
	dl.table dt:first-child + dd {
		padding-top:unset;
		border-top: none;
	}
}

@media screen and (min-width: 769px){
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/*--------------------------------------------------------------
# flex box
--------------------------------------------------------------*/
.flex-wrap{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.flex-wrap-top{
	align-items: flex-start;
}
.flex-wrap-stretch{
	align-items: stretch;
}
.flex-wrap-between{
	justify-content: space-between;
}
.flex-wrap-center{
	justify-content: center;
}
.flex-wrap-left{
	justify-content: flex-start;
}
.flex-wrap-wrap{
	flex-wrap: wrap;
}
.flex-wrap .flex-wrap-text{
	width: 60%;
}
.flex-wrap .flex-wrap-text-s{
	width: 40%;
}
.flex-wrap .flex-wrap-imgL,
.flex-wrap .flex-wrap-imgR{
	width: 40%;
}
.flex-wrap .flex-wrap-imgR{
	margin-left:30px; 
}
.flex-wrap .flex-wrap-imgL{
	margin-right:30px; 
}
.flex-wrap .flex-half{
	width: 49.5%;
}

@media screen and (max-width: 768px) {
	.flex-wrap{
		flex-direction:column;
	}
	.flex-wrap .flex-wrap-text,.flex-wrap .flex-wrap-text-s{
		width: 100%;
	}
	.flex-wrap .flex-wrap-imgL,
	.flex-wrap .flex-wrap-imgR{
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.flex-wrap .flex-half{
		width: 100%;
	}
	footer #footer-address .flex-wrap a{
		margin-bottom: 20px;
	}
	#footer-banners ul li+li{
		margin-top: 20px;
	}
}

/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/
.site-header{
	position: absolute;
	width: 100%;
	background-color: rgba(255 255 255 / 25%);
	z-index: 5;
}
.site-branding{
	
}
.site-header-innerwrap{
	width: 100%;
	padding: 1.2em 1.6em;
	background-color: #fff;
	opacity: 0.96;
	box-shadow: 0px 4px 15px -13px #777777;
}
.site-title{
	width: 236px;
	margin: 0;
}
p.site-title {
	font-size: 2em;
	font-weight: bold;
}
.site-title a{
	display: flex;
	text-decoration: none;
}
.site-title a img{
	background-color: #fff;
}

/* スクロールでナビゲーション固定 */
.navfixed{
	position: fixed;
	top: 0;
}


@media screen and (max-width: 768px) {
	header#masthead #header-innerwrap{
		display: inline-block;
	}
	.site-header-innerwrap{
		position: fixed;
		align-items: flex-start;
	}
	.site-branding{
		position: relative;
		z-index: 100;
	}
	.site-title{
		font-size: 1.3em;
	}
	p.site-title{
		font-size: 1.3em;
	}
	.site-title a img{
		width: 250px;
		margin-right: 15px;
		padding: 0 8px;
		background-color: #fff;
	}
	.site-branding p.header-txt{
		width: 100%;
		margin-left: 5px;
	}

}

/*--------------------------------------------------------------
# navi
--------------------------------------------------------------*/
#nav-list {
	/*max-width: 900px;*/
	display: flex;
	justify-content: flex-end;
	list-style: none;
	margin: 0 auto;
	padding-left: 0;
	gap: 4.2vw;
}
#nav-list li.sp {
	display: none;
}
#nav-list li {
	text-align: center;
}
#nav-list li a {
	padding: 15px 0 10px;
	color: #212121;
	text-decoration: none;
	line-height: 1.2em;
}
#nav-list li:hover a,#nav-list li.current a{
	color: var(--main-txt-color);
}
#nav-list li a:before,#nav-list li.current a:before{
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	width: auto;
	height: 2px;
	background-color: var(--main-color);
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
#nav-list li:hover a:before,#nav-list li.current a:before{
	transform-origin: left top;
	transform: scale(1, 1);
}

#nav-list li.btn a {
	min-width: 180px;
	padding: 10px 0;
	padding-left: 28px;
	font-size: 1em;
	color: #fff;
}
#nav-list li.btn:hover a {
	color: var(--main-txt-color);
}
#nav-list li.btn a:before{
	position: absolute;
	top: auto;
	right: auto;
	left: auto;
	bottom: auto;
	width: 0;
	height: 0;
	content: "\f0e0";
	font-size: 1.2em;
	font-family: "Font Awesome 5 Free";
	transform: translateY(-45%) translateX(-28px);
}
#nav-list li.btn:hover a:before{
	transform: translateY(-45%) translateX(-28px);
	
}

#nav-toggle {
	display: none;
}


/* header subnavi */
.header-subnav{
	margin: 0.8em 0;
	margin-right: 2em;
	padding-left: 0;
	justify-content: flex-end;
}
.header-subnav li{
	padding: 0.4em 0;
	line-height: 1em;
}
.header-subnav li + li{
	margin-left: 2em;
	padding-left: 2em;
	border-left: 1px solid var(--black-txt-color);
}
.header-subnav li a{
	color: var(--black-txt-color);
	text-decoration: none;
}
.header-subnav li a:hover{
	color: var(--main-txt-color);
}

@media screen and (max-width: 990px) {
	#nav-list {
		gap: 1.2vw;
	}
}

@media screen and (max-width: 768px) {
	#site-navigation{
		background-color: transparent;
		position: fixed;
		top: 0;
		z-index: 98;
	}
	#nav-list li.sp {
		display: inline;
	}

	/* Toggle Button */
	#nav-toggle {
		position: absolute;
		top: 1em;
		right: 0;
		display: block;
		width: 40px;
		height: 38px;
		margin-right: 10vw;
		background-color: var(--main-txt-color);
		cursor: pointer;
		z-index: 101;
		border-radius: 5px;
	}
	#nav-toggle span {
		display: inline-block;
		position: absolute;
		height: 3px;
		width: 28px;
		top: 18px;
		right: 6px;
		background-color: #fff;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	#nav-toggle span::before, 
	#nav-toggle span::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		right: 0;
		background-color: #fff;
		-webkit-transition: -webkit-transform .5s, top .5s, background-color 0.3s, width 0.2s;
		-moz-transition: -moz-transform .5s, top .5s, background-color 0.3s width 0.2s;
		transition: transform .5s, top .5s, background-color 0.3s width 0.2s;
	}
	#nav-toggle span::before {
		top: -10px;
	}
	#nav-toggle span::after {
		top: 10px;
	}

	/* navigation */
	#nav-list {
		position: fixed;
		flex-direction: column;
		justify-content: flex-start;
		gap: 0em;
		right: 0;
		top: 0px;
		z-index: 99;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		padding: 5em 0 0;
		/*font-size: 2.3vw;*/
		background-color: #fff;
		/*transition: .3s ease-in-out;*/
		-moz-transform: translateX(105%);
		-webkit-transform: translateX(105%);
		transform: translateX(105%);
		overflow: auto;
	}
	#nav-list li{
		margin: 0;
		padding-left: 2.4em;
		border-bottom: 1px solid var(--main-color);
	}
	#nav-list li:first-child{
		border-top: 1px solid var(--main-color);
	}
	#nav-list li + li{
		margin: 0;
		padding-left: 2.4em;
		border-bottom: 1px solid var(--main-color);
	}
	#nav-list li a,
	.fixed #nav-list li a {
		width: 100%;
		display: block;
		color: var(--main-txt-color);
		padding: 12px 0;
		text-align: left;
	}
	#nav-list li.current {
		background-color: var(--main-color);
	}
	#nav-list li.current a{
		color: #fff;
	}
	#nav-list li.btn a {
		min-width: auto;
		padding: 10px 0;
		padding-left: 0px;
		font-size: 1em;
		font-weight: normal;
		color: var(--main-txt-color);
		border: 0;
		background: none;
	}
	#nav-list li.btn.current a {
		color: #fff;
	}
	#nav-list li.btn:hover a {
		color: var(--main-txt-color);
	}
	#nav-list li.btn a:before {
		content: none;
	}


	/* #nav-toggle 切り替えアニメーション */
	.open #nav-toggle span {
		width: 0;
		right: 4px;
		transform-origin: center;
		background-color: #fff;
		z-index: 101;
	}
	.open #nav-toggle span:after,
	.open #nav-toggle span:before {
		top: 0px;
		width: 32px;
		background-color: #fff;
		transform-origin: center;
		-webkit-transform: rotate(225deg);
		-moz-transform: rotate(225deg);
		transform: rotate(225deg);
	}
	.open #nav-toggle span:before {
		-webkit-transform: rotate(-225deg);
		-moz-transform: rotate(-225deg);
		transform: rotate(-225deg);
	}
	/* #global-nav スライドアニメーション */
	.open #nav-list {
		/* #global-nav top + #mobile-head height */
		-moz-transform: translateY(0%);
		-webkit-transform: translateY(0%);
		transform: translateX(0%);
		transition: 0.6s ease-in-out;
	}
	.open #nav-bg {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		/*content: '';*/
		width: 100%;
		height: 120vh;
		background-color: #fff;
		opacity: 0.75;
		transition: .5s;
	}
}

/*--------------------------------------------------------------
# screen
--------------------------------------------------------------*/
#screen,.page .entry-header,.category-information .page-header{
	height: 820px;
	background:url("../images/common/screen.jpg") no-repeat top center;
	background-color: #fff;
	background-size: auto;
	border-radius: 0 0 20px 20px;
}

.page .entry-header,.category-information .page-header{
	height: 430px;
	background:url("../images/common/screen.jpg") no-repeat 50% 70%;
	background-size: auto;
	border-radius: 0 0 20px 20px;
}
.page .entry-header .entry-header-innerwrap,.category-information .page-header .entry-header-innerwrap{
	display: flex;
	height: 100%;
	align-items: center;
	align-content: center;
}
.page .entry-header .entry-title,.category-information .page-header .page-title{
	display: block;
	margin: 3em auto 0;
	padding: 0.8em 3em;
	color: var(--main-txt-color);
	font-size: 2.2em;
	font-weight: 500;
	text-align: center;
	background-color: rgba(255 255 255 / 75%);
	border-radius: 10px;
}
.page .entry-header .entry-title span,.category-information .page-header .page-title span{
	position: relative;
	display: block;
	padding: 0 2em;
	font-size: 0.6em;
	font-weight: normal;
}
.page .entry-header .entry-title span:before,
.page .entry-header .entry-title span::after,
.category-information .page-header .page-title span:before,
.category-information .page-header .page-title span:after{
	display: inline-block;
	content: '';
	position: absolute;
	top: 55%;
	width: 30px;
	height: 1px;
	background-color: var(--main-txt-color);
}
.page .entry-header .entry-title span:before,
.category-information .page-header .page-title span:before{
	left: 0;
}
.page .entry-header .entry-title span::after,
.category-information .page-header .page-title span:after{
	right: 0;
}

@media screen and (max-width: 768px) {
	#screen{
		height: auto;
	}
	.page .entry-header .entry-title,.category-information .page-header .page-title{
		padding: 0.8em 1em;
		font-size: 1.6em;
	}
	.page .entry-header,.category-information .page-header{
		height: 360px;
		background:url("../images/common/screen.jpg") no-repeat bottom center;
	}
}

/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/
.post{
	margin-bottom: 0;
	padding-bottom: 20px;
}
.page{margin-bottom: 0;}

.site-main {
	padding: 0px 0 50px;
}
.site-main {
	padding: 0px 0 50px;
}

.entry-content{
	padding: 10px 0;
	background-color: #fff;
}

.entry-content .page-menu{
	max-width: 800px;
	margin-bottom: 80px;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2em 0em;
}
.entry-content .page-menu li:first-child{
	border-left: 0;
}
.entry-content .page-menu li{
	min-width: 25%;
	text-align: center;
	border-left: 1px solid var(--main-txt-color);
}
.entry-content .page-menu li:nth-child(5){
	border-left: 0;
}
.entry-content .page-menu li:last-child{
	/*margin-right: 3em;
	padding-right: 3em;
	border-right: 1px solid var(--main-txt-color);*/
}

.site-main h2{
	position: relative;
	padding: 0.4em 0 0.8em;
	font-size: 1.6em;
	font-weight: 500;
	text-align: center;
	background-color: var(--subback-color);
}
.site-main h2 span{
	display: block;
	font-size: 0.6em;
	font-weight: normal;
	line-height: 1em;
}
.site-main h2::first-letter,
.site-main h2 span::first-letter{
	color: var(--main-txt-color);
}

.site-main h2.other-ver1{
	padding: 3px 0px;
	color: #fff;
	font-size: 1.5em;
	font-weight: 500;
	background-color: var(--sub-color);
	border-radius: 10px;
}
.site-main h2.other-ver1::before{
	content: none;
}
.site-main h2.other-ver1::first-letter{
	color: #fff;
}

.site-main h3{
	display: block;
	padding-bottom: 0.4em;
	color: #212121;
	font-weight: normal;
	border-bottom: 1px solid var(--main-txt-color);
}
.site-main h3:before{
	content: "○";
	margin-right: 0.4em;
	color: var(--main-txt-color);
}
h4{
	padding-left: 0.5em;
	margin: 0;
	margin-bottom: 0.5em;
	border-left: 4px solid var(--main-txt-color);
}

@media screen and (max-width: 768px) {
	.entry-content .page-menu{
		margin-bottom: 40px;
		padding: 1em;
		border: 1px solid #eee;
		gap: 0.5em 0em;
	}
	.entry-content .page-menu li{
		min-width: 25%;
		text-align: center;
		border-left: 0;
	}
	.entry-content .page-menu li:before{
		content: "\f138";
		margin-right: 5px;
		font-family: FontAwesome;
		font-weight: 400;
		font-size: 0.8em;
		color: var(--main-txt-color);
	}
	.entry-content .page-menu li a{
		text-decoration: none;
	}
	.site-main h2{text-align: center;}
}


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

.footer-contact-btn {
	margin: 0 auto;
	padding: 4em 0;
	background-color: var(--subback-color);
}
.footer-contact-btn a{
	padding: 0.4em 4.5em;
	font-size: 1.6em;
	font-weight: normal;
	border-radius: 10px;
}

.page footer,.archive footer{
	padding-top: 0px;
	/*border-top: 3px solid var(--main-color);*/
}

.footer-menu-wrap{
	padding: 3em 2em 1em;
	color: #fff;
	background: url("../images/common/green_bg.png") repeat top center;
	/*background-color: var(--main-color);*/
}
a.footer-logo{
	display: flex;
	font-size: 1.6em;
	font-weight: 600;
	text-decoration: none;
	color: var(--black-txt-color);
	align-items: flex-end;
}
.footer-logo-img{
	margin-right: 5px;
}
.footer-info address{
	font-size: 0.9em;
	margin-left: 3em;
	line-height: 1.2em;
}
.footer-info address a{
	color: #fff;
	text-decoration: none;
}


.footer-nav{
	height: 280px;
	display: grid;
	grid-template-rows: 1fr 1fr auto auto auto;
	grid-template-columns:1fr 1fr 1fr 1fr;
	padding-left: 0;
	gap: 0.8em 1.8em;
}
.footer-nav .fnav-corporate {
	grid-row: 1 / 6;
	grid-column: 1;
}
.footer-nav .fnav-products {
	grid-row: 1 / 6;
	grid-column: 2;
}
.footer-nav .fnav-features {
	grid-row: 1 / 3;
	grid-column: 3;
}
.footer-nav .fnav-access {
	grid-row: 3 / 6;
	grid-column: 3;
}
.footer-nav .fnav-recruit {
	grid-row: 1 / 3;
	grid-column: 4;
}
.footer-nav .fnav-contact {
	grid-row: 3;
	grid-column: 4;
}
.footer-nav .fnav-info {
	grid-row: 4;
	grid-column: 4;
}
.footer-nav .fnav-en {
	grid-row: 5;
	grid-column: 4;
}
.footer-nav > li{
	padding-bottom: 0.8em;
	border-bottom: 1px dashed #477b38;
}
.footer-nav > li > a{
	font-size: 1.1em;
	font-weight: bold;
}
.footer-nav li a{
	font-size: 0.9em;
	color: #fff;
	text-decoration: none;
}
.footer-nav li > ul{
	margin-left: 0;
}
.footer-nav ul li:before{
	content: "-";
	margin-right: 0.4em;
}
.footer-nav li a:hover{
	text-decoration: underline;
}


.site-info{
	margin-bottom: 10px;
	padding: 10px 0;
	color: var(--black-txt-color);
	background-color: #fff;
}

#footer-copyright{
	margin: 0;
	text-align: center;
}
#footer-copyright .footer-subnav{
	padding-right: 0;
	justify-content: center;
}
#footer-copyright .footer-subnav li + li{
	margin-left: 15px;
	padding-left: 15px;
	border-left: 1px solid var(--black-txt-color);
}
#footer-copyright .footer-subnav li a{
	font-size: 0.8em;
	color: var(--black-txt-color);
}

#footer-copyright small a{
	color: var(--black-txt-color);
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	.footer-contact-btn a{
		width: 85%;
		padding: 0.8em 0;
		font-size: 6vw;
	}
	.footer-site-title a{
		font-size: 1.8em;
	}
	.footer-access {
		padding-right: 0px;
	}

	#footer-copyright{
		text-align: center;
	}
	#footer-copyright .footer-subnav li + li{
		margin-left: 0px;
		padding-left: 0px;
		border-left: 0px;
	}
	.site-info{
		margin-bottom: 0px;
	}
}