@charset "utf-8";
#content_Wrap {
font-feature-settings: "palt";
}
figure {
position: relative;
}
.note {
font-size: 10px;
line-height: 1.4;
}
figure + .note {
padding-top: 1em;
}
/* ----------------------------------
concept
---------------------------------- */

.main_Wrap {
background: linear-gradient(to right,  rgb(30, 62, 27) 0%,rgba(47,94,41,1) 50%,rgb(30, 62, 27) 100%);
padding: 4em 0;
}
.main_Wrap .page_ttl{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: fit-content;
}
.main_Wrap .page_ttl h3 {
color: #fff;
text-align: center;
font-size: clamp(26px, 2.7vw, 32.4px);
line-height: 1.5;
letter-spacing: 0.18em;
font-family: "Cinzel", serif;
}
.main_Wrap .page_ttl h4 {
color: #fff;
text-align: center;
font-size: clamp(12px, 1.125vw, 13.5px);
line-height: 1.5;
letter-spacing: 0.06mm;
}

.sec01 {
background: linear-gradient(to right,  rgba(230,244,240,1) 0%,rgba(245,249,248,1) 50%,rgba(230,244,240,1) 100%);
padding: 80px 0;
}
.ttl {
position: relative;
width: 94%;
max-width: 1200px;
text-align: center;
margin: 0 auto 50px;
padding: 0 0 30px;
}
.ttl::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background: linear-gradient(to right,  rgba(47,94,41,0) 0%,rgba(47,94,41,1) 17%,rgba(47,94,41,1) 83%,rgba(47,94,41,0) 100%);
}
.ttl h5 {
font-size: clamp(15px, 1.5vw, 18px);
color: #fff;
background: linear-gradient(to right,  rgba(47,94,41,0) 0%,rgba(47,94,41,1) 17%,rgba(47,94,41,1) 83%,rgba(47,94,41,0) 100%);
padding: 0.5em 0;
}
.ttl h3 {
color: #2f5e29;
font-size: clamp(30px, 3.34vw, 40px);
line-height: 1.5;
letter-spacing: 0.08em;
padding-top: 0.4em;
}
.logo_Area {
text-align: center;
}
.logo_Area figure {
width: 141px;
margin: 0 auto;
}
.logo_Area p {
font-size: clamp(16px, 1.67vw, 20px);
letter-spacing: 0.15em;
padding: 1.25em 0;
}
.logo_Area h4 {
font-size: clamp(22px, 2.0834vw, 25px);
letter-spacing: 0.15em;
line-height: 0.9;
}
.logo_Area span {
font-size: 48%;
}
.explanation_Area {
width: 94%;
max-width: 1200px;
text-align: center;
background: #fff;
margin: 70px auto 0;
padding: 30px 2.5% 38px;
}
.explanation_Area h4 {
font-size: clamp(16px, 1.67vw, 20px);
letter-spacing: 0.15em;
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #000;
}
.explanation_Area p {
font-size: clamp(14px, 1.34vw, 16px);
letter-spacing: 0.15em;
line-height: 1.8;
}
.explanation_Area figure {
width: 100%;
max-width: 820px;
margin: 30px auto 0;
}

.yug {
text-align: center;
margin: 60px auto 0;
}
.yug .area01 {
width: 94%;
margin: 0 auto;
}
.yug .area01 h4 {
font-size: clamp(18px, 2vw, 24px);
letter-spacing: 0.06em;
line-height: 1.6;
}
.yug .area01 p {
}
.yug .area02 {
width: 94%;
max-width: 800px;
background: #fff;
border: 1px solid #9d7b04;
box-sizing: border-box;
margin: 40px auto 0;
padding: 1.25em;
}
.yug .area02 h3 {
color: #9d7b04;
font-size: clamp(24px, 2.34vw, 28px);
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.yug .area02 h3::before {
content: "";
flex-grow: 1;
height: 1px;
background: #9d7b04;
margin:0 .75em 0 0;
}
.yug .area02 h3::after {
content: "";
flex-grow: 1;
height: 1px;
background: #9d7b04;
margin:0 0 0 .75em;
}
.yug .area02 h4 {
color: #2f5e29;
font-size: clamp(18px, 1.67vw, 21px);
letter-spacing: 0.1em;
padding: 1em 0;
}
.yug .area02 p {
font-size: clamp(13px, 1.167vw, 14px);
}

.sec02 {
display: flex;
flex-direction: column;
background: #e9f9eb;
padding: 80px 0;
gap: 80px 0;
}

.image_content {
display: flex;
flex-wrap: wrap;
width: 94%;
max-width: 1200px;
margin: 0 auto;
gap: 40px 5%;
}
.image_content .img_box {
position: relative;
width: 47.5%;
}
.image_content .img_box .deco {
position: absolute;
height: fit-content;
}
.image_content .img_box .deco.type01 {
top: 9%;
left: 10%;
transform: translate(-50%, -50%);
width: 24.9122807%;
}
.image_content .img_box .deco.type02 {
bottom: 12%;
right: 4.5%;
transform: translate(50%, 50%);
width: 20.35087719%;
}
.image_content .img_box .deco.type03 {
bottom: 3%;
left: 3.2%;
transform: translate(-50%, 50%);
width: 14.73684211%;
}
.image_content .img_box .deco.type04 {
top: 3%;
right: 2.5%;
transform: translate(50%, -50%);
width: 18.07017544%;
}
.image_content .img_box .deco.type05 {
bottom: 19%;
left: 1%;
transform: translate(-50%, 50%);
width: 18.07017544%;
}
.image_content .img_box .deco.type06 {
top: 1%;
right: 2.5%;
transform: translate(50%, -50%);
width: 9.47368421%;
}

.image_content figure {
}

.image_content .text_box {
width: 47.5%;
}
.image_content .text_box .flex {
align-items: center;
}
.image_content .text_box .flex .v_line{
display: block;
width: 1px;
height: 3em;
background: #9d7b04;
margin: 0 1em;
}
.image_content .text_box .flex h3 {
color: #9d7b04;
font-size: clamp(48px, 5vw, 60px);
}
.image_content .text_box .flex p {
color: #9d7b04;
font-size: clamp(32px, 3.34vw, 40px);
letter-spacing: 0.1em;
}
.image_content .text_box h5 {
color: #2f5e29;
font-size: clamp(18px, 3vw, 24px);
letter-spacing: 0.1em;
line-height: 1.8;
padding: 1.2em 0;
}

.image_content .text_box > p {
font-size: clamp(14px, 1.34vw, 16px);
letter-spacing: 0.1em;
line-height: 1.8;
}
.sec03 {
background: url(../img/sec03_bg.jpg)no-repeat top center;
background-size: cover;
padding: 80px 0;
}
.sec03 > div {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.sec03 .area01 {
}


.sec03 .area01 .flex {
align-items: center;
justify-content: center;
}
.sec03 .area01 .flex h3 {
font-size: clamp(26px, 3.584vw, 43px);
letter-spacing: 0.08em;
}
.sec03 .area01 .flex span {
width: 56px;
margin-right: 0.8em;
}
.sec03 .area01 p {
text-align: center;
font-size: clamp(16px, 1.67vw, 20px);
letter-spacing: 0.15em;
line-height: 1.6;
padding-top: 2.5em;
}

.sec03 .area02 {
text-align: center;
margin: 60px auto 80px;
}
.sec03 .area02 h3 {
color: #9d7b04;
font-size: clamp(28px, 3.334vw, 40px);
letter-spacing: 0.15em;
}
.sec03 .area02 p {
font-size: clamp(16px, 1.67vw, 20px);
letter-spacing: 0.15em;
line-height: 1.6;
padding-top: 1em;
}
.sec03 .area03{
text-align: center;
}
.sec03 .area03 h3 {
color: #9d7b04;
font-size: clamp(26px, 3vw, 36px);
letter-spacing: 0.15em;
color: #fff;
background: linear-gradient(to right, rgba(47, 94, 41, 0) 0%, rgba(47, 94, 41, 1) 17%, rgba(47, 94, 41, 1) 83%, rgba(47, 94, 41, 0) 100%);
padding: 0.4em 0;
}
.sec03 .area03 ul {
display: flex;
flex-wrap: wrap;
max-width: 1020px;
gap: 20px 2.94117647%;
margin: 60px auto 20px;
}
.sec03 .area03 li {
width: 31.37254902%;
}
.sec03 .note {
}

/*=============================
調整
=============================*/
@media only screen and (max-width: 1280px) {


}

/*=============================
tab
=============================*/
@media only screen and (max-width: 1024px) {


}


/*=============================
spから
=============================*/
@media screen and (max-width: 767px) {
.main_Wrap .page_ttl {
    width: 100%;
}
.main_Wrap .page_ttl h3 {
    letter-spacing: 0.12em;
}
.sec01 {
    padding: 40px 0 60px;
}
.logo_Area figure {
    width: calc(141px * 0.80141844);
}
.logo_Area p {
    line-height: 1.5;
}
.explanation_Area {
    margin: 50px auto 0;
    padding: 30px 2.5% 30px;
}
.explanation_Area p {
    letter-spacing: 0.04em;
}
.yug .area02 {
    margin: 30px auto 0;
}
.sec02 {
    padding: 40px 0;
    gap: 40px 0;
}
.image_content {
    gap: 30px 5%;
}
.image_content .img_box {
    width: 100%;
    order: 1;
}
.image_content .text_box {
    width: 100%;
    order: 2;
}
.sec03 {
    padding: 50px 0;
}
.sec03 .area01 .flex {
   flex-direction: column;
   gap: 1em 0;
}
.sec03 .area01 p {
    letter-spacing: 0.08em;
}
.sec03 .area02 {
    margin: 50px auto;
}
.sec03 .area02 p {
    letter-spacing: 0.08em;
}
.sec03 .area03 h3 {
    line-height: 1.28;
}
.sec03 .area03 ul {
    margin: 30px auto 20px;
}
.sec03 .area03 li {
    width: 100%;
}
.sec03 .note {
text-align: left;
}







}