/****************************************************************************************************

location.css

****************************************************************************************************/
span.anchorlink {
	top: -140px;
}
@media screen and (max-width: 979px) {
span.anchorlink {
	top: -130px;
}
}
@media screen and (max-width: 767px) {
span.anchorlink {
	top: -100px;
}
}

/*******************************************************
pc / sp
********************************************************/
@media screen and (min-width: 768px) {
.sp767{display: none;}
}
@media screen and (max-width: 767px) {
.pc767{display: none;}
}

@media screen and (min-width: 600px) {
.sp{display: none;}
}
@media screen and (max-width: 599px) {
.pc{display: none;}
}


/*******************************************************
header
********************************************************/
header.luxbar-fixed a{
color: #fff;
}
header.luxbar-fixed .logo_white{
display: block;
}
header.luxbar-fixed .logo_black{
display: none;
}


/*******************************************************
page-header
********************************************************/
.page-header{
position:relative;
display:gird;
}
.page-header img{
	object-fit: cover;
}
.page-header .note{
right: 10px;
bottom: 6px;
}

.page-header .pankuzu{
width: 100%;
position:absolute;
left:0;
top:0;
transform:translate(0%, 0%);
color: #fff;
z-index: 1;
}
.page-header .pankuzu a{
color: #fff;
}

.page-header .page-name{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
padding: 0;
align-self:center;
display:flex;
flex-direction:column;
width: 100%;
color: #fff;
}
.page-header .page-name .en{
font-family:'EB Garamond', serif;
font-size: 44px;
font-size: clamp(22px, 3vw, 44px);
letter-spacing:0.1em;
text-align:center;
}
.page-header .page-name .jp{
text-align:center;
font-size: 20px;
font-size: clamp(13px, 1.4vw, 20px);
letter-spacing:0.3em;
margin-top:8px;
}

@media screen and (max-width: 599px){
.page-header img{
height: 120px;
}
.page-header .note{
right: 5px;
bottom: 6px;
font-size: 8px;
}
.page-header .page-name .jp{
margin-top:0;
}
}


/*******************************************************
sec
********************************************************/
.sec_hd{
	position: relative;
}
.sec_text{
	padding: 8% 0;
	/*background-color: #f6f6f6;*/
}
.sec_merit{
	padding: 10% 0 4%;
	}
.sec_quality{
	padding: 4% 0 0;
	}
.sec_wrap{
	padding: 5% 0;
}

@media screen and (max-width: 767px) {
.sec_text{
	padding: 12% 0 10%;
}
.sec_merit{
	padding: 14% 0 7%;
	}
.sec_quality{
	padding: 6% 0 0;
	}

.sec_wrap{
	padding: 10% 0 6%;
}
}

@media screen and (max-width: 440px) {
.sec_merit{
	padding: 16% 0 8%;
	}
}

/*******************************************************
h1〜
********************************************************/
h1.h1_ttl{
	font-size: 30px;
	font-size: clamp(22px, 3vw, 30px);
	margin-bottom: 0.8em;
}
h1.h1_ttl .supText{
	font-size: 14px;
	font-size: clamp(10px, 3vw, 14px);
}

h2.h2_pagettl{
font-family:'EB Garamond', serif;
font-size: 32px;
font-size: clamp(22px, 4vw, 32px);
text-align: center;
letter-spacing:0.1em;
padding: 0;
}
h2.h2_ttl{
font-family:'EB Garamond', serif;
font-size: 38px;
font-size: clamp(24px, 4vw, 38px);
font-weight: normal;
line-height: normal;
letter-spacing:0.1em;
text-align: center;
margin-bottom: 0.2em;
padding: 0;
}

h2.h2_ttl .jp{
text-align:center;
font-size: 20px;
font-size: clamp(15px, 2vw, 20px);
letter-spacing:0.3em;
margin-left: 8px;
vertical-align: middle;
position: relative;
padding-bottom: 8px;
}


h3.h3_ttl{
	font-size: 26px;
	font-size: clamp(22px, 3vw, 26px);
letter-spacing:0.1em;
	margin-bottom: 1.4em;
	text-align: center;
}
h4.h4_ttl{
	font-size: 22px;
	font-size: clamp(18px, 2.8vw, 22px);
	margin-bottom: 1em;
	text-align: center;
}

.lead{
font-size: 18px;
font-size: clamp(14px, 2vw, 18px);
line-height: 2em;
letter-spacing: 0.14em;
}
.page_lead{
	font-size: 20px;
	font-size: clamp(16px, 2.4vw, 20px);
	text-align: center;
	line-height: 2em;
}
.sec_text .line{
width: 40px;
height: 3px;
margin: 4em auto;
background-color: #000;
}

@media screen and (max-width: 767px) {
.sec_text .line{
margin: 3em auto;
}
}

@media screen and (max-width: 440px) {
h2.h2_ttl .jp{
letter-spacing:0.2em;
margin-left: 6px;
padding-bottom: 6px;
}

h2.area_name .h2bg {
padding-right: 10px;
}

.lead{
	text-align: justify;
}
.lead .resp_autowrap{
display: inline;
}
}


.gold{
 color: #987f00;
}


/*******************************************************

sec_orien

********************************************************/
.sec_orien{
 padding: 5% 0;
 background-color: #f4f3f0;
}
.sec_orien .logo_zeh{
 max-width: 120px;
 height: auto;
 margin: 0 auto 2em;
}

.sec_orien h2{
 margin-bottom: 1em;
}
.sec_orien .h3_ttl {
 margin-bottom: 1em;
}
.sec_orien .h3_ttl + p{
 text-align: center;
 margin-bottom: 0.4em;
}
.sec_orien .cap10{
 text-align: center;
}
@media screen and (max-width: 767px) {
.sec_orien{
 padding: 12% 0 6%;
}
.sec_orien .logo_zeh{
 max-width: 100px;
 height: auto;
 margin: 0 auto 2em;
}
}
@media screen and (max-width: 599px) {
.sec_orien .logo_zeh{
 max-width: 80px;
 margin: 0 auto 2em;
}
.sec_orien .mx1024{
width: 100%;
}
/*.sec_orien .h3_ttl + p,
.sec_orien .cap10{
 text-align: justify;
}*/
/*.sec_orien .h3_ttl + p .resp_autowrap{
display: inline;
}*/
}

@media screen and (max-width: 440px) {
.sec_orien{
 padding: 14% 0 8%;
}
}


.sec_orien .orien_img{
 max-width: 1040px;
 height: auto;
 margin: 6% auto 0;
}
.sec_orien ul.orien_list{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-top: 4em;
}
.sec_orien ul.orien_list li{
 width: 31.666666%;
 text-align: center;
}
.sec_orien ul.orien_list li figure{
 margin-bottom: 0.5em;
}


.orien_list li .ttl_wrap{
color: #fff;
padding: 5px;
margin-bottom: 1em;
}
.orien_list li .ttl_wrap .ttl_line{
border: 1px solid #fff;
}
.orien_list li .ttl_wrap p{
	font-size: 24px;
	font-size: clamp(15px, 2vw, 24px);
 letter-spacing: 0.12em;
 padding: 0;
 line-height: 2.2em;
}
.orien_list li .ttl_wrap p span.subText {
  top: 0.2em;
}

.blue{
background-color: rgba(59,83,99,0.82);
}
.red{
background-color: rgba(94,59,68,0.82);
}
.green{
background-color: rgba(44,81,79,0.82);
}


.sec_orien ul.orien_list li .lead{
 line-height: 1.8em;
 font-size: 18px;
 font-size: clamp(13px, 1.8vw, 18px);
}

@media screen and (max-width: 767px) {
.sec_orien ul.orien_list{
 margin-top: 3em;
}
.sec_orien ul.orien_list li:last-child{
 margin-bottom: 0;
}
.sec_orien ul.orien_list li .lead{
 text-align: center;
}
}

@media screen and (max-width: 599px) {
.sec_orien ul.orien_list{
 justify-content: center;
} 
.sec_orien ul.orien_list li{
 width: 100%;
 max-width: 380px;
 text-align: center;
 margin-bottom: 3em;
}
.sec_orien ul.orien_list li figure{
 margin-bottom: 1em;
}
}


/*******************************************************

merit_wrap

********************************************************/
.merit_wrap{
 position: relative;
 padding: 6em 5% 5%;
 border: 1px solid #000;
 border-radius: 2em;
}
.merit_wrap h3.h3_ttl{
 width: 100%;
 max-width: 400px;
 position: absolute;
 top: -2.2%;
 left: 50%;
 transform:translate( -50%, 2.2%);
	font-size: 26px;
	font-size: clamp(22px, 3vw, 26px);
}
.merit_wrap h3.h3_ttl .h3_bg{
 padding: 0 0.2em 0 0.6em;
 background-color: #fff;
}

.merit_area{
 /*width: 90%;*/
 max-width: 1000px;
 margin: auto;
 text-align: center;
}
.merit_box01{
 margin-bottom: 10%;
}
.merit_box02{
 margin-bottom: 3em;
}

.merit_box01 figure{
 margin-top: 4em;
}
.env_wrap ul{
 margin-top: 3em;
}

@media screen and (max-width: 599px) {
.merit_wrap{
 padding: 5em 5% 6%;
}
.merit_wrap h3.h3_ttl{
 max-width: 320px;
 top: -0.8%;
 left: 50%;
 transform:translate( -50%, 0.8%);
 margin: auto;
}

.merit_box01{
 margin-bottom: 16%;
}
.merit_box02{
 margin-bottom: 8%;
}

.merit_box01 figure{
 max-width: 340px;
 margin: 4em auto 0;
}

}

@media screen and (max-width: 440px) {
.merit_wrap h3.h3_ttl{
 max-width: 300px;
 letter-spacing: normal;
}
}


.line02 span:after {
background: radial-gradient(circle farthest-side, #9e9e9f, #9e9e9f 30%, transparent 30%, transparent);
background-size: 14px;
content: '';
display: inline-block;
height: 8px;
width: 100%;
}


/*** 健康面やライフスタイルの好環境 **********************************/
.env_wrap{
 margin-top: 4em;
}
.env_wrap h4.h4_ttl{
 margin-bottom: 1em;
}
.env_wrap p{
 line-height: normal;
}

.env_wrap ul{
 display: flex;
 justify-content: space-between;
}
.env_wrap ul li{
 width: 32%;
}

.env_wrap ul li div{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #987f00;
border-radius: 1.8em;
}
.env_wrap ul li h5{
color: #fff;
font-size: 16px;
font-size: clamp(14px, 1.8vw, 16px);
text-align: center;
line-height: 1.6em;
letter-spacing: normal;
padding: 2px 4px;
}

.env_wrap ul li figure{
margin: 2em auto 1em;
}
.env_wrap ul li figure img{
max-width: 160px;
height: auto;
margin: auto;
}


@media screen and (max-width: 979px) and (min-width: 768px) {
.env_wrap ul li{
width: 30%;
}
.env_wrap ul li div{
border-radius: 3em;
}
.env_wrap ul li h5{
line-height: 1.2em;
padding: 6px 5px;
}

/*.env_wrap ul li:nth-child(2) div,
.env_wrap ul li:last-child div{
	margin-bottom: 4px;
}*/
.env_wrap ul li:nth-child(2) h5,
.env_wrap ul li:nth-child(3) h5{
 letter-spacing: normal;
 line-height: 2.4em;
}
}

@media screen and (max-width: 767px) {
.env_wrap ul{
flex-wrap: wrap;
/*flex-direction: column;*/
}
.env_wrap ul li{
 width: 48%;
 margin-bottom: 4em;
}
.env_wrap ul li:last-child{
margin: auto;
}
/*.env_wrap ul li figure img{
max-width: 180px;
}*/
}
@media screen and (max-width: 599px) {
.env_wrap{
 margin-top: 10%;
}
.env_wrap ul{
flex-direction: column;
}
.env_wrap ul li{
 width: 70%;
 margin: 0 auto 4em;
}
.env_wrap ul li:last-child{
 margin-bottom: 0;
}

.env_wrap ul li h5{
font-size: 16px;
font-size: clamp(14px, 2.4vw, 16px);
line-height: 1.8em;
}

/*.env_wrap ul li figure img{
max-width: 200px;
}*/
}
@media screen and (max-width: 490px) {
.env_wrap ul li{
 width: 80%;
 margin: 0 auto 4em;
}
}


/*******************************************************

sec_quality

********************************************************/
.sec_quality ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sec_quality ul li{
width: 22.5%;
margin-bottom: 3em;
border: 1px solid #444;
}

.sec_quality ul li .list_wrap{
margin: 2em;
}
ul li .list_wrap h6{
font-size: 16px;
font-size: clamp(14px, 3vw, 16px);
font-weight: 600;
letter-spacing: 0.12em;
text-align: center;
margin: 1em 0;
}
ul li .list_wrap p{
padding: 0;
font-size: 14px;
font-size: clamp(13px, 2vw, 14px);
text-align: justify;
line-height: 1.6em;
}

@media screen and (max-width: 979px) {
.sec_quality ul li{
width: 30.646992%;
margin-bottom: 3em;
}
.sec_quality ul::after{
content: "";
display: block;
width: 30.646992%;
height: 0;
}
}

@media screen and (max-width: 767px) {
.sec_quality ul li{
width: 47.175%;
margin-bottom: 5%;
}
}
@media screen and (max-width: 490px) {
.sec_quality ul li .list_wrap{
margin: 1.5em;
}
}


/*************************************************************************************
*************************************************************************************

print

*************************************************************************************
**************************************************************************************/

@media print {

}