@charset "utf-8";
/* ===================================================================
CSS
 file name  :  top.css
=================================================================== */
/* =====================================
メイン
======================================== */
.top_main{
	margin-top: -130px;
	width: 100%;
	height: 770px;
	background: url("/images/top/bg_main.jpg")no-repeat center center;
	background-size: cover;
	overflow: hidden;
	position: relative;
}
@media screen and (min-width: 769px) {
	.top_main .main_text{
		position: absolute;
		z-index: 2;
		display: block;
		top: 40%;
		left: 55%;
		transform: translate(0%,-50%);
		width: 30%;
		max-width: 400px
	}
}
@media screen and (max-width: 1080px) {
	.top_main{
		height: 640px;
	}
}
@media screen and (max-width: 768px) {
	.top_main{
		margin-top: -65px;
		padding-top: 190px;
		height: 480px;
	}
	.top_main .main_text{
		background: rgba(255, 255, 255, 0.5);
		padding: 25px;
		text-align: center;
	}
	.top_main .main_text img{
		max-width: 214px;
		margin: auto;
	}
}
/* =====================================
BUSINESS
======================================== */
ul.business_list{
	max-width: 1180px;
	margin: 50px auto auto;
	display: flex;
	justify-content: center;
}
ul.business_list li{
	padding: 0 2.5px;
	position: relative;
}
ul.business_list li p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	color: #FFF;
	font-weight: 500;
	text-align: center;
	width: 100%;
	padding: 1em;
}
@media screen and (max-width: 768px) {
	ul.business_list{
		max-width: 490px;
		margin: 30px auto auto;
		flex-wrap: wrap;
	}
	ul.business_list li{
		width: 50%;
		margin-bottom: 5px;
	}
}
/* =====================================
NEWS
======================================== */
dl.news_list{
	border-top: 1px solid #CCC;
	line-height: 1.6;
}
dl.news_list dd{
	border-bottom: 1px solid #CCC;
}
@media print, screen and (min-width: 769px) {
	dl.news_list{
		max-width: 1000px;
		margin: 50px auto auto;
	}
	dl.news_list dt{
		padding: 1.5em 3em;
		font-size: 1.4rem;
	}
	dl.news_list dd{
		margin-top: -2.8em;
		padding: 0 3em 1.5em 12em;
	}
}
@media screen and (max-width: 768px) {
	dl.news_list{
		max-width: 480px;
		margin: 30px auto auto;
	}
	dl.news_list dt{
		padding: 1em 0 0.5em 0;
	}
	dl.news_list dd{
		padding: 0 0 1em 0;
	}
}
/* =====================================
MESSAGE
======================================== */
.message_area{
	background: #F0F0F0 url("/images/top/bg_message.jpg") no-repeat top center;
	background-size: contain;
}
@media print, screen and (min-width: 769px) {
	.massage_wrap{
		max-width: 1180px;
		margin: 50px auto auto;
		display: flex;
		flex-direction: row-reverse;
	}
	.massage_wrap .photo{
		width: 50%;
		padding-left: 3%;
	}
	.massage_wrap .text{
		width: 50%;
		padding-right: 3%;
	}
	.massage_wrap .text h3{
		font-size: 2.8rem;
		font-weight: 700;
	}
}
.massage_wrap .photo .name{
	margin-top: 1em;
}
.massage_wrap .photo .name span{
	font-weight: 500;
}
.massage_wrap .text p{
	margin-top: 1.5em;
}
.massage_wrap .text p.sign_text{
	text-align: right;
}
.massage_wrap .text .sign{
	text-align: right;
	margin-top: 0.5em;
}
.massage_wrap .text .sign img{
	max-width: 206px;
}
@media screen and (max-width: 768px) {
	.message_area{
		background: #F0F0F0 url("/images/top/bg_message_sp.jpg") no-repeat top center;
		background-size: contain;
	}
	.massage_wrap{
		margin: 30px auto auto;
	}
	.massage_wrap .photo{
		max-width: 480px;
		margin: auto;
	}
	.massage_wrap .text{
		margin-top: 30px;
	}
	.massage_wrap .text h3{
		font-size: 1.6rem;
		font-weight: 700;
	}
	.massage_wrap .text .sign img{
		max-width: 156px;
	}
}
/* =====================================
VOICE
======================================== */
.voice_wrap{
	max-width: 1180px;
	padding:50px 50px 150px 50px;
	margin: auto;
}
@media print, screen and (min-width: 769px) {
	.voice_list{
		display: flex;
		flex-wrap: wrap;
	}
	.voice_list li{
		width: 33.333%;
		padding: 2%;
		margin-top: 50px;
	}
}
.voice_list li a{
	color: #333;
	text-decoration: none;
}
.voice_list li .photo{
	text-align: center;
	overflow: hidden;
}
.voice_list li .photo img{
	object-fit: cover;
	transition: all 0.3s;
	width: 100%;
	height: 240px;
}
.voice_list li a:hover .photo img{
	transform: scale(1.1, 1.1);
}
.voice_list li .voice_head{
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}
.voice_list li .voice_head .date{
	font-size: 1.4rem;
}
.voice_list li .voice_head .star{
	max-width: 158px;
}
.voice_list li .name{
	margin-top: 0.5em;
	font-weight: 700;
}
.voice_list li .comment{
	margin-top: 0.5em;
}
.voice_btn{
	margin: 70px auto auto;
	max-width: 480px;
}
@media screen and (max-width: 768px) {
	.voice_wrap{
		padding:20px 20px 50px 20px;
	}
	.voice_list{
		margin: auto;
		max-width: 400px;
	}
	.voice_list li{
		margin-top: 30px;
	}
	.voice_list li .voice_head .date{
		font-size: 1.2rem;
	}
	.voice_list li .voice_head .star{
		max-width: 108px;
	}
	.voice_btn{
		margin: 30px auto auto;
	}
}
@media screen and (max-width: 480px) {
	.voice_list li .photo img{
		height: 200px;
	}
}
/*詳細*/
.voice_detail_wrap{
	padding:100px 0px 150px 0px;
}
.voice_detail_head{
	max-width: 1080px;
	padding:0px 50px 70px 50px;
	margin: auto;
	text-align: center;
}
.voice_detail_head .name{
	font-weight: 700;
}
.voice_detail_head .star_wrap{
	margin: 1em auto auto;
	padding-top: 1em;
	border-top: 1px solid #CCC;
	max-width: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
}
.voice_detail_head .star_wrap img{
	max-width: 158px;
	height: auto;
}
.voice_detail_head .star_wrap .point{
	font-weight: 700;
	font-size: 2.4rem;
	margin-left: 0.5em;
}
.voice_detail_photo{
	margin: 50px auto auto;
	max-width: 640px;
}
.voice_bottom_wrap{
	background: #F7F7F8;
}
.voice_bottom_wrap .comment{
	max-width: 980px;
	padding:70px 50px;
	margin: auto;
}
.voice_bottom_wrap .comment p{
	margin-top: 1em;
}
.voice_bottom_wrap .comment p.lead{
	font-weight: 700;
	margin-top: 0;
}
.voice_detail_btn{
	margin: 70px auto auto;
	padding: 0 20px;
	max-width: 520px;
}
@media screen and (max-width: 768px) {
	.voice_detail_wrap{
		padding:50px 0px 50px 0px;
	}
	.voice_detail_head{
		padding:0px 20px 30px 20px;
	}
	.voice_detail_head .star_wrap img{
		max-width: 108px;
	}
	.voice_detail_head .star_wrap .point{
		font-size: 2.0rem;
	}
	.voice_detail_photo{
		margin: 20px auto auto;
	}
	.voice_bottom_wrap .comment{
		max-width: 680px;
		padding:30px 20px;
		margin: auto;
	}
	.voice_detail_btn{
		margin: 30px auto auto;
	}
}
/* =====================================
SALES RECORD
======================================== */
.sales_record_wrap{
	max-width: 1180px;
	padding:50px 50px 150px 50px;
	margin: auto;
}
@media print, screen and (min-width: 769px) {
	.sales_record_list{
		display: flex;
		flex-wrap: wrap;
	}
	.sales_record_list li{
		width: 33.333%;
		padding: 2%;
		margin-top: 50px;
	}
}
.sales_record_list li .photo{
	text-align: center;
}
.sales_record_list  li .sales_title{
	margin-top: 0.5em;
	font-weight: 700;
}
.sales_record_btn{
	margin: 70px auto auto;
	max-width: 480px;
}
@media screen and (max-width: 768px) {
	.sales_record_wrap{
		padding:20px 20px 50px 20px;
	}
	.sales_record_list{
		margin: auto;
		max-width: 400px;
	}
	.sales_record_list li{
		margin-top: 30px;
	}
	.sales_record_btn{
		margin: 30px auto auto;
	}
}
/* =====================================
COMPANY
======================================== */
.company_area{
	background: #F0F0F0 url("/images/top/bg_company.jpg") no-repeat top center;
	background-size: cover;
}
.company_list_wrap{
	text-align: center;
}
dl.company_list{
	display: inline-block;
	text-align: left;
	margin: 50px auto auto;
	color: #FFF;
}
dl.company_list a{
	color: #FFF;
}
dl.company_list dt{
	font-weight: 700;
}
dl.company_list dd{
	margin-top: -2em;
	padding: 0 0 2em 12em;
}
@media screen and (max-width: 640px) {
	dl.company_list{
		margin: 30px auto auto;
	}
	dl.company_list dd{
		padding: 0 0 2em 8em;
	}
}
/* =====================================
プライバシーポリシー
======================================== */
.privacy_wrap{
	max-width: 1080px;
	padding: 100px 50px 150px 50px;
	margin: auto;
}
.privacy_wrap h2{
	font-weight: 500;
	margin-top: 3em;
}
.privacy_wrap p{
	margin-top: 1.5em;
}
.privacy_wrap p.mt_none{
	margin-top: 0;
}
@media screen and (max-width: 768px) {
	.privacy_wrap{
		padding: 50px 20px 70px 20px;
	}
}