/* -------------------*/
/* -------------------*/
/* About -------------------*/

.f_page_menu{
	position: relative;
	width: 900px;
	margin: 100px auto 200px;
}
@media screen and (max-width: 960px){
	.f_page_menu{
		width: 90%;
		margin: 10% auto;
	}
	.about-mission .f_page_menu{
		margin: -5% auto 30%;
	}
	.about-outline .f_page_menu{
		margin: 5% auto 30%;
	}
}
@media screen and (max-width: 650px){
	.about-mission .f_page_menu{
		margin-top: 10%;
	}
	.about-outline .f_page_menu{
		margin: 0 auto 30%;
	}
}

#about{
	position: relative;
	width: 100%;
	height: auto;
}
#about .section{
	position: relative;
	width: 100%;
	height: auto;
	padding: 60px 0 0px;
}
#about .section:last-child{
	padding-bottom: 16%;
}
#about .section .inner{
	width: 900px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 2;
	text-align: center;
}
#about .section h3{
	padding-bottom: 60px;
	font-size: 26px;
	letter-spacing: 6px;
}
#about .section h4{
	padding-bottom: 40px;
	font-size: 20px;
	letter-spacing: 4px;
}

/* mission -------------------*/

#about #philosophy ul{
	width: 75%;
	margin: 0 auto;
	text-align: left;
}
#about #philosophy ul li{
	padding-left: 40px;
	letter-spacing: 0.15em;
	font-size: 18px;
}
#about #philosophy ul li:not(:last-child){
	padding-bottom: 6%;
}
#about #philosophy ul li:nth-child(1){
	background: url(../img/service/number-1.png)left 10% no-repeat;
	background-size: 28px;
}
#about #philosophy ul li:nth-child(2){
	background: url(../img/service/number-2.png)left 10% no-repeat;
	background-size: 28px;
}
#about #philosophy ul li:nth-child(3){
	background: url(../img/service/number-3.png)left 10% no-repeat;
	background-size: 28px;
}

#about #management p{
	font-size: 23px;
}
#about #management p span{
	background: linear-gradient(transparent 50%, rgba(234, 96, 142, 0.2) 50%);
}
#about #management .mv-box{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border: 1px solid #f2f2f2;
	margin-top: 150px;
}
#about #management .mv-box iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
@media screen and (max-width: 960px){
	#about .section h3,
	#about .section h4{
		padding-bottom: 5%;
	}
	#about .section{
		padding: 3% 0 16%;
	}
	#about .section:last-child{
		padding-bottom: 30%;
	}
	#about .section .inner{
		width: 90%;
	}
	#about #philosophy ul li{
		font-size: 16px;
	}
	#about #philosophy ul li br{
		display: none;
	}
	#about #management p{
		font-size: 16px;
	}
}
@media screen and (max-width: 650px){
	#about .section h3{
		padding-bottom: 8%;
		font-size: 18px;
		letter-spacing: 4px;
	}	
	#about .section h4{
		padding-bottom: 5%;
		font-size: 15px;
	}
	#about .section{
		padding: 10% 0 5%;
	}
	#about .section .inner{
		width: 88%;
	}
	#about .section .inner p,
	#about #philosophy ul li{
		font-size: 13px;
		line-height: 1.8;
	}
	#about #philosophy ul li{
		padding-left: 34px;
	}
	#about #philosophy ul li:nth-child(1),
	#about #philosophy ul li:nth-child(2),
	#about #philosophy ul li:nth-child(3){
		background-size: 24px;
	}
	#about #management .mv-box{
		margin-top: 15%;
	}
}

/* outline -------------------*/

#about #outline{
	position: relative;
	width: 100%;
	height: auto;
	padding: 60px 0 0;
}
#about #outline .inner{
	width: 900px;
	margin: 0 auto;
}

@media screen and (max-width: 960px){
	#about #outline{ padding: 3% 0; }
	#about #outline .inner{ width: 90%; }
	table.two_column{ width: 100%; }
	table.two_column th{ width: 28%; }
	table.two_column td{ width: 72%; }
	table.two_column th,
	table.two_column td{ padding: 18px 0 16x; }
	table.two_column dt{ width: 200px; }
	table.two_column dd{ width: auto; }
}
@media screen and (max-width: 650px){
	#about #outline{padding: 10% 0 20%;}
	#about #outline .inner{width: 88%;}
	table.two_column th,
	table.two_column td{ display: block; width: 100%; padding: 16px 0 14px; font-size: 12px; }
	table.two_column th{ border-bottom: none; padding-bottom: 0; }
	table.two_column td{ padding-top: 3%; text-align: left; line-height: 1.5; }
	table.two_column dt{ width: 160px; }
	table.two_column .file_btn a{ width: 100%; height: 50px; line-height: 50px; border-radius: 10px; background-size: 14px 16px;}
}

/* office(takasaki/fujioka/honjo) -------------------*/

#about #office{
	position: relative;
	width: 100%;
	height: auto;
	padding: 60px 0 0;
	margin-bottom: -5%;
}
#about #office .inner{
	width: 900px;
	margin: 0 auto;
}
#about #office .head-title{
	position: relative;
	overflow: hidden;
	text-align: left;
	width: 100%;
}
#about #office .head-title h3{
	padding: 0 0 20px;
	margin-bottom: 50px;
	font-size: 32px;
	border-bottom: 4px solid #f2f2f2;
}
#about #office .head-title h3 span{
	color: var(--main-color);
	font-size: 46px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 2px;
	padding-right: 20px;
}
#about #office .head-title .icon{
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
}
#about #office .head-title .icon li{
	width: 50px;
	height: auto;
	margin-left: 10px;
}
#about #office .header_visual img{
	width: 100%;
	border-radius: 10px;
	margin-bottom: 70px;
}
/* tab menu */
.details .tab-menu{
	width: 100%;
	overflow: hidden;
	padding-bottom: 40px;
	margin-top: -10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.details .tab-menu li{
	position: relative;
	width: 49%;
	height: 60px;
	line-height: 58px;
	border-radius: 30px;
	font-size: 16px;
	letter-spacing: 2px;
	font-weight: bold;
	text-align: left;
	padding-left: 44px;
	cursor: pointer;
	color: #fff; 
	background: url(../img/common/icon_menu_white.svg) 20px center no-repeat;
	background-size: 12px 8px;
}
.details .tab-menu li span{
	font-size: 12px;
}
.details .tab-menu li.select{
}
.details .tab-menu li:hover{
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter:alpha(opacity=70);
}
.details .tab-menu li.select:hover{
	opacity: 1;
}
.details table th,
.details table td{
	padding-left: 20px;
}
.details table th{
	border-bottom: 1px solid #ddd;
}
.details .tab_content li{
	width: 100%;
}
.details .hide{
	display: none;
}
.details .footer-info{
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 100%;
	padding-top: 80px;
}
.details .footer-info .item{
	text-align: left;
}
.details .footer-info .instructions{
	width: 450px;
}
.details .footer-info .instructions p{
	padding-bottom: 20px;
}
.details .footer-info .file_btn a{
	display: inline-block;
	width: 350px;
	height: 70px;
	line-height: 65px;
	border-radius: 35px;
	color: #666;
	font-size: 16px;
	text-align: center;
	text-decoration: underline;
}
.details .footer-info .file_btn a img{
	display: inline-block;
	margin-left: 4px;
	width: 18px;
	height: auto;
	vertical-align: sub;
}
.details .footer-info .file_btn a:hover{
	text-decoration: none;
}
.details .footer-info .user-info{
	width: 360px;
}
.details .footer-info .tbl{
	position: relative;
	width: 100%;
	height: auto;
	border-top: 1px solid #eee;
}
.details .footer-info .tbl th,
.details .footer-info .tbl td{
	padding: 22px 0 20px;
	padding-right: 0;
	letter-spacing: 2px;
	border-bottom: 1px solid #eee;
}
.details .footer-info .tbl th{
	width: 40%;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #ddd;
}
.details .footer-info .tbl td{
	width: 60%;
	padding-left: 20px;
}
.details .footer-info .user-info p{
	padding-top: 20px;
	text-align: right;
}

/* hydroponics */
.details .tab-menu .suikou{
	background-color: var(--sk-color);
	border: 2px solid;
	border-color: var(--sk-color);
	border-bottom: solid 4px #68c2a7;
}
.details .tab-menu .suikou img,
.details .tab-menu .seikatsu img{
	width: auto;
	height: 30px;
	position: absolute;
	right: 14px;
	top: 12px;
}
#hydro_outline th{
	background-color: #e6f6f1;
}
#hydro_outline .file_btn a{
	border: solid 4px;
	border-color: var(--sk-color);
	background: url(../img/about/icon_right_hydroponics.svg) 15% center no-repeat;
	background-size: 10px 14px;
}

/* lifecare */
.details .tab-menu .seikatsu{
	background-color: var(--lc-color);
	border: 2px solid;
	border-color: var(--lc-color);
	border-bottom: solid 4px #c68ecf;
}
#lifecare_outline th{
	background-color: #f4e8f6;
}
#lifecare_outline .file_btn a{
	border: solid 4px;
	border-color: var(--lc-color);
	background: url(../img/about/icon_right_lifecare.svg) 15% center no-repeat;
	background-size: 10px 14px;
}

/* food-pantry */
#about #office .link_fp{
	width: 60%;
	height: 300px;
	margin: 5% auto 10%;
	border-radius: 20px;
	background: url(../img/top/service_03.jpg) center center no-repeat;
	background-size: cover;
}
#about #office .link_fp .text_box{
	width: 80%;
	height: auto;
	margin: 0 auto;
	padding-top: 8%;
}
#about #office .link_fp .text_box h3{
	padding-bottom: 20px;
	text-align: left;
	color: #fff;
}
#about #office .link_fp .text_box p{
	color: #fff;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
}
#about #office .link_fp .text_box .btn_more{
	position: relative;
	float: right;
	clear: both;
	padding-top: 3%;
}
#about #office .link_fp .text_box .btn_more a{
	width: 230px;
	height: 128px;
	padding-top: 50px;
	padding-right: 14px;
	letter-spacing: 2px;
	font-weight: bold;
	color: #fff;
	background: url(../img/common/icon_arrow_white.svg) 70% 43% no-repeat,
				url(../img/top/service_morelink_yellow.png) right bottom no-repeat;
	background-size: 8px 10px,230px 128px;
}
#about #office .link_fp .text_box .btn_more a:hover{
	color: var(--fp-color);
	background: url(../img/common/icon_arrow_yellow.svg) 70% 43% no-repeat,
				url(../img/top/service_morelink_ov.png) right bottom no-repeat;
	background-size: 8px 10px,230px 128px;
}
@media screen and (max-width: 960px){
	#about #office .link_fp{
		width: 90%;
	}
}
@media screen and (max-width: 650px){
	#about #office .link_fp{
		width: 90%;
		height: 260px;
		border-radius: 10px;
		margin: 10% auto;
	}
	#about #office .link_fp .text_box{
		width: 90%;
		padding-top: 10%;
	}
	#about #office .link_fp .text_box h3{
		padding-bottom: 5%;
		text-align: center;
		font-size: 16px;
		letter-spacing: 0.15em;
	}
	#about #office .link_fp .text_box p{
		font-size: 11px;
	}
	#about #office .link_fp .text_box .btn_more,
	#about #office .link_fp .text_box .btn_more a{
		width: 100%;
		height: 40px;
		line-height: 40px;
		border-radius: 25px;
		margin: 0;
		padding: 0;
		color: var(--main-color);
		font-size: 12px;
	}
	#about #office .link_fp .text_box .btn_more{
		margin-top: 20px;
	}
	#about #office .link_fp .text_box .btn_more a{
		background: url(../img/common/icon_arrow_pink.svg) 90% center no-repeat;
		background-size: 8px 12px;
		background-color: #fff;
	}
	#about #office .link_fp .text_box .btn_more a:hover {
		background: url(../img/common/icon_arrow_white.svg) 90% center no-repeat;
		background-size: 8px 12px;
		background-color: var(--fp-color);
		color: #fff;
	}
}

/* access */
#access{
	position: relative;
	overflow: hidden;
	width: 100%;
	z-index: 2;
}
#access:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 80%;
	margin: 0 -10% 0;
	background-color: rgba(var(--main-color-rgb),0.6);
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	z-index: -1; /* 必須 */
}
#access .inner{
	width: 900px;
	margin: 0 auto 0;
	padding: 150px 0 400px;
}
#access h3{
	color: #fff;
}
#access .map{
	padding-bottom: 30px;
}
#access p{
	float: left;
	text-align: left;
	color: #fff;
	line-height: 1.8;
}
#access .map_btn{
	float: right;
}
#access .map_btn a{
	display: inline-block;
	width: 350px;
	height: 70px;
	line-height: 70px;
	border-radius: 35px;
	color: #fff;
	text-align: center;
	border-bottom: solid 4px #666;
	background: url(../img/common/icon_more_link.png) 85% center no-repeat;
	background-color: #777;
}
#access .map_btn a:hover{
	background-color: #888;
}
@media screen and (max-width: 960px){
	#about #office{
		padding-bottom: 8%;
	}
	#about #office .inner{
		width: 90%;
	}
	#about #office .head-title h3{
		font-size: 27px;
		margin-bottom: 3%;
	}
	#about #office .head-title h3 span{
		font-size: 41px;
		padding-right: 2%;
	}
	#about #office .header_visual img{
		margin-bottom: 5%;
	}
	/* tab menu */
	.details .tab-menu{
		padding-bottom: 5%;
	}
	.details .tab-menu li{
		font-size: 14px;
		padding-left: 5%;
		background: url(../img/common/icon_menu_white.svg) 5% center no-repeat;
		background-size: 10px 7px;
	}
	.details .tab-menu li span{
		font-size: 11px;
	}
	.details .footer-info .instructions{
		width: 53%;
	}
	.details .footer-info .file_btn a{
		width: 100%;
		font-size: 14px;
	}
	.details .footer-info .user-info{
		width: 40%;
	}
	/* hydroponics */
	#hydro_outline .file_btn a{
		background: url(../img/about/icon_right_hydroponics.svg) 15% center no-repeat;
		background-size: 8px 11px;
	}
	/* lifecare */
	#lifecare_outline .file_btn a{
		background: url(../img/about/icon_right_lifecare.svg) 15% center no-repeat;
		background-size: 8px 11px;
	}
	#access .inner{
		width: 90%;
		padding: 12% 0 35%;
	}
	#access .map{
		padding-bottom: 5%;
	}
	#access .map iframe{
		width: 100%;
	}
	#access p{
		float: none;
		width: 100%;
		text-align: center;
	}
	#access .map_btn{
		float: none;
		width: 100%;
		padding-top: 3%;
	}
}
@media screen and (max-width: 650px){
	#about #office{
		padding-bottom: 10%;
	}
	#about #office .inner h3{
		font-size: 15px;
	}
	#about #office .head-title h3{
		font-size: 17px;
	}
	#about #office .head-title h3 span{
		font-size: 24px;
	}
	#about #office .header_visual img{
		margin-bottom: 8%;
	}
	#about #office .head-title .icon li{
		width: 40px;
		margin-left: 8%;
	}
	/* tab menu */
	.details .tab-menu{
		padding-bottom: 8%;
		display: block;
	}
	.details .tab-menu li{
		width: 100%;
		height: 50px;
		line-height: 48px;
		border-radius: 10px;
		font-size: 13px;
		padding-left: 10%;
		background: url(../img/common/icon_menu_white.svg) 5% center no-repeat;
		background-size: 10px 7px;
	}
	.details .tab-menu li span{
		font-size: 11px;
	}
	#about #office .two_column{
		border: 1px solid #eee;
		border-top: none;
	}
	#about #office .two_column th,
	#about #office .two_column td{
		display: block;
		width: 100%;
		border: none;
		padding: 12px 14px;
	}
	.details .footer-info{
		display: block;
		padding-top: 10%;
	}
	.details .footer-info p{
		font-size: 12px;
	}
	.details .footer-info .item{
		width: 100%;
		margin-top: 10%
	}
	.details .footer-info .file_btn a{
		width: 100%;
		height: 54px;
		line-height: 48px;
		border-radius: 27px;
		font-size: 13px;
	}
	.details .footer-info .file_btn a img{
		width: 14px;
	}
	.details .footer-info .user-info{
		padding-top: 0;
		font-size: 12px;
	}
	.details .footer-info .user-info th{
		width: 25%;
	}
	.details .footer-info .user-info th,
	.details .footer-info .user-info td{
		padding: 14px 20px;
	}
	.details .footer-info .user-info th{
		border-left: 1px solid #eee;
	}
	.details .footer-info .user-info td{
		border-right: 1px solid #eee;
	}
	/* hydroponics */
	.details .tab-menu .suikou{
		margin-bottom: 6px;
	}
	#hydro_outline .file_btn a{
		background: url(../img/about/icon_right_hydroponics.svg) 15% center no-repeat;
		background-size: 8px 11px;
	}
	.details .tab-menu .suikou img,
	.details .tab-menu .seikatsu img{
		width: auto;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 12px;
	}
	/* lifecare */
	#lifecare_outline .file_btn a{
		background: url(../img/about/icon_right_lifecare.svg) 15% center no-repeat;
		background-size: 8px 11px;
	}
	#access .inner{
		width: 90%;
		height: 620px;
		padding: 60px 0 0;
	}
	#access .map iframe{
		height: 200px;
	}
	#access p{
		font-size: 12px;
	}
	#access .map_btn{
		float: none;
		width: 100%;
		padding-top: 3%;
	}
	#access .map_btn a{
		width: 100%;
		height: 50px;
		line-height: 50px;
		border-radius: 10px;
	}
}