@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- page_ttl
- intro_sec
- mdc_sec
- symbol_sec
-------------------------*/
@media screen and (max-width: 768px) {
    .inner {
        width: 91.7%;
    }
}

/*============================
#page_ttl
============================*/
@media screen and (max-width: 768px) {
    #page_ttl {
        height: 80vw;
    }
}
#page_ttl::after {
    background: url(../quality/img/kv.jpg) no-repeat;
    background-size: cover;
}
@media screen and (max-width: 768px) {
    #page_ttl::after {
        top: 76px;
        height: inherit;
        background: url(../quality/img/kv_sp.jpg) no-repeat center center;
        background-size: cover;
    }
}

.bg {
    background: url(../quality/img/bg.jpg) no-repeat top center;
    background-size: cover;
}

.bg_white {
    background-color: #fff;
}

.sttl_f34_en {
    z-index: 1;
    position: relative;
    margin-inline: auto;
    padding: 0 0 60px;
    color: #585216;
    text-align: center;
    line-height: 1;
}
@media screen and (max-width: 768px) {
    .sttl_f34_en {
        padding: 0 0 30px;
    }
}
.sttl_f34_en .en {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    font-size: 3.4rem;
    letter-spacing: -0.05em;
}
@media screen and (max-width: 768px) {
    .sttl_f34_en .en {
        font-size: 2.4rem;
    }
}
.sttl_f34_en .jp {
    display: block;
    margin-top: 3px;
    font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
    .sttl_f34_en .jp {
        font-size: 1.4rem;
    }
}
.sttl_f34_en.icon .en {
    position: relative;
    padding: 0 22px;
}
.sttl_f34_en.icon .en::before, .sttl_f34_en.icon .en::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: url(../img/sttl_icon02.svg) no-repeat;
    background-size: contain;
}
.sttl_f34_en.icon .en::before {
    left: 0;
}
.sttl_f34_en.icon .en::after {
    right: 0;
}

.sttl_f25 {
    position: relative;
    text-align: center;
    margin-inline: auto;
    padding: 0 0 57px;
    color: #1c3a1c;
    text-align: center;
    line-height: 1;
}
@media screen and (max-width: 768px) {
    .sttl_f25 {
        margin-bottom: 34px;
        padding-bottom: 24px;
    }
}
.sttl_f25 .en {
    display: block;
    font-size: 2.5rem;
    letter-spacing: -0.05em;
}
@media screen and (max-width: 768px) {
    .sttl_f25 .en {
        font-size: 1.7rem;
    }
}
.sttl_f25 .en::before, .sttl_f25 .en::after {
    filter: brightness(0) saturate(100%) invert(26%) sepia(96%) saturate(352%) hue-rotate(17deg) brightness(91%) contrast(90%);
}
.sttl_f25 .jp {
    display: block;
    margin-top: 5px;
    font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
    .sttl_f25 .jp {
        margin-top: 7px;
        font-size: 1.2rem;
    }
}
.sttl_f25::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 26px;
    width: 70px;
    height: 14.77px;
    background: url(../common/img/flower_icon02.svg) no-repeat;
    background-size: cover;
}
@media screen and (max-width: 768px) {
    .sttl_f25::after {
        width: 70px;
        height: 15px;
        bottom: 0;
    }
}

.grid + .sttl_f25 {
    margin-top: 60px;
}
@media screen and (max-width: 768px) {
    .grid + .sttl_f25 {
        margin-top: 66px;
    }
}

.notes_area {
    background-color: #fff;
}

p.lead18 {
    max-width: 1060px;
    width: 90%;
    margin: 0 auto 50px;
    color: #1c3a1c;
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.86;
}
@media screen and (max-width: 768px) {
    p.lead18 {
        margin-bottom: 30px;
        font-size: 1.6rem;
    }
}

p.lead20 {
    display: block;
    max-width: 1060px;
    width: 90%;
    margin: 0 auto 20px;
    color: #1c3a1c;
    font-size: 2rem;
    text-align: center;
    line-height: 1.86;
}
@media screen and (max-width: 768px) {
    p.lead20 {
        width: 100%;
        font-size: 1.8rem;
    }
}

.txt_f18 {
    display: block;
    color: #1c3a1c;
    font-size: 1.8rem;
    line-height: 1.55;
}
.txt_f16 {
    display: block;
    color: #1c3a1c;
    font-size: 1.6rem;
    line-height: 1.86;
}
.txt_f15 {
    display: block;
    margin-top: 5px;
    color: #1c3a1c;
    font-size: 1.5rem;
    line-height: 1.5;
}
@media screen and (max-width: 768px) {
    #amenity .txt_f15 {
        margin-top: 8px;
    }
}

.txt_f14 {
    display: block;
    color: #1c3a1c;
    font-size: 1.4rem;
    line-height: 1.86;
}
.txt_f14.inline-block {
    display: inline-block;
    margin: unset;
}

.txt_f14.note {
    max-width: 1060px;
    margin-inline: auto;
    margin-top: 15px;
}
@media screen and (max-width: 768px) {
    .txt_f14.note {
        margin-top: 30px;
        font-size: 1rem;
    }
}

.txt_f10 {
    display: block;
    color: #1c3a1c;
    font-size: 1rem;
    line-height: 1.55;
}
/*============================
intro_sec
============================*/
#intro_sec {
    color: #1C3A1C;
}
#intro_sec .inner {
    display: flex;
    flex-direction: column;
    padding: 90px 0 69px;
}
@media screen and (max-width: 768px) {
    #intro_sec .inner {
        padding: 75px 0 0;
    }
}
#intro_sec .inner .sttl_f30 {
    font-size: 3rem;
    text-align: center;
}
@media screen and (max-width: 768px) {
    #intro_sec .inner .sttl_f30 {
        font-size: 2rem;
        line-height: 1.5;
        transform: translateX(0.3em);
    }
}
#intro_sec .inner .flower_icon {
    max-width: 40.77px;
    width: 100%;
    margin: 40px auto 0;
}
@media screen and (max-width: 768px) {
    #intro_sec .inner .flower_icon {
        max-width: 36px;
        margin-top: 24px;
    }
}
#intro_sec .inner .txt_f18 {
    margin-top: 40px;
    font-size: 1.8rem;
    line-height: 2.3;
    text-align: center;
}
@media screen and (max-width: 768px) {
    #intro_sec .inner .txt_f18 {
        margin-top: 24px;
        font-size: 1.2rem;
        line-height: 2.333;
    }
}
#intro_sec .inner .link_list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    max-width: 1059px;
    width: 97%;
    margin: 68px auto 0;
}
@media screen and (max-width: 1024px) {
    #intro_sec .inner .link_list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 768px) {
    #intro_sec .inner .link_list {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
}
#intro_sec .inner .link_list li {
    height: 69px;
}
@media screen and (max-width: 768px) {
    #intro_sec .inner .link_list li {
        height: 54px;
    }
}
#intro_sec .inner .link_list li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: inherit;
    background-color: rgba(28, 58, 28, 0.5019607843);
    line-height: 1;
    transition: background-color 0.3s;
}
#intro_sec .inner .link_list li a .en {
    display: block;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
}
@media screen and (max-width: 768px) {
    #intro_sec .inner .link_list li a .en {
        font-size: 1.2rem;
    }
}
#intro_sec .inner .link_list li a .jp {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
    #intro_sec .inner .link_list li a .jp {
        font-size: 0.9rem;
    }
}
#intro_sec .inner .link_list li a:hover {
    background-color: #1c3a1c !important;
    opacity: 1 !important;
}

#intro_sec ~ section {
    padding: 85px 0 110px;
}
@media screen and (max-width: 768px) {
    #intro_sec ~ section {
        padding: 67px 0 80px;
    }
}

/*============================
	grid
============================*/
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1060px;
    margin-inline: auto;
}
@media screen and (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}
.grid .grid_item.last_item {
    width: 210%;
}
.grid figure {
    position: relative;
    height: -moz-fit-content;
    height: fit-content;
}
.grid figure figcaption {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 3px;
    font-size: 1.2rem;
}
@media screen and (max-width: 768px) {
    .grid figure figcaption {
        right: 2px;
        bottom: 2px;
        font-size: 1rem;
    }
}
.grid figure figcaption.white {
    color: #fff;
}
.grid figure figcaption.white.band {
    background-color: rgba(0, 0, 0, 0.8);
}
.grid figure figcaption.black {
    color: #000;
}
.grid figure figcaption.black.band {
    background-color: rgba(255, 255, 255, 0.8);
}
.grid figure figcaption.left {
    right: auto;
    left: 5px;
}
@media screen and (max-width: 768px) {
    .grid figure figcaption.left {
        left: 2px;
    }
}
.grid figure figcaption.relative {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    margin-top: 10px;
    text-align: right;
}
@media screen and (max-width: 768px) {
    .grid figure figcaption.relative {
        margin-top: 5px;
    }
}
.grid.ex_layout1 {
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: auto;
}
.grid.ex_layout1 .item1 {
    grid-area: 1/1/4/2;
}
.grid.ex_layout1 .item2 {
    grid-area: 1/2/2/4;
}
.grid.ex_layout1 .item3 {
    grid-area: 2/2/3/3;
}
.grid.ex_layout1 .item4 {
    grid-area: 2/3/3/4;
}
.grid.ex_layout1 .item5 {
    grid-area: 3/2/4/3;
}
@media screen and (max-width: 768px) {
    .grid.ex_layout1 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid.ex_layout1 .item1 {
        grid-area: 1/1/2/3;
    }
    .grid.ex_layout1 .item2 {
        grid-area: 2/1/3/3;
    }
    .grid.ex_layout1 .item3 {
        grid-area: 3/1/4/2;
    }
    .grid.ex_layout1 .item4 {
        grid-area: 3/2/4/3;
    }
    .grid.ex_layout1 .item5 {
        grid-area: 4/1/5/2;
    }
}
.grid.ex_layout1 .item2 {
    margin-top: -20px;
}
@media screen and (max-width: 768px) {
    .grid.ex_layout2 {
        gap: 36px 20px;
    }
}
.grid.ex_layout2 .grid_item.flex1 {
    grid-area: 1/1/2/5;
    display: flex;
    gap: 28px;
}
@media screen and (max-width: 768px) {
    .grid.ex_layout2 .grid_item.flex1 {
        grid-area: 1/1/2/3;
        flex-direction: column;
        gap: 14px;
    }
}
.grid.ex_layout2 .grid_item.flex1 > div {
    order: 1;
    margin-top: 15px;
}
.grid.ex_layout2 .grid_item.flex1 figure {
    order: 2;
}
@media screen and (max-width: 768px) {
    .grid.ex_layout2 .grid_item.flex1 figure {
        max-width: 210px;
        width: 53.6%;
        margin-inline: auto;
    }
}
.grid.ex_layout2 .grid_item.flex2 {
    width: 210%;
}
@media screen and (max-width: 768px) {
    .grid.ex_layout2 .grid_item.flex2 {
        grid-area: 5/1/6/3;
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .grid.ex_layout2 .grid_item.flex2 .txt_f14 {
        font-size: 1rem;
    }
}
.grid.ex_layout2 .grid_item.flex3 {
    grid-area: 4/1/5/5;
    display: flex;
    gap: 28px;
}
@media screen and (max-width: 768px) {
    .grid.ex_layout2 .grid_item.flex3 {
        grid-area: 6/1/7/3;
        flex-direction: column;
        gap: 14px;
    }
}
.grid.ex_layout2 .grid_item.flex3 > div {
    z-index: 2;
    position: relative;
    order: 1;
    width: 45%;
    margin-top: 15px;
}
@media screen and (max-width: 768px) {
    .grid.ex_layout2 .grid_item.flex3 > div {
        width: inherit;
    }
}
.grid.ex_layout2 .grid_item.flex3 > div p.txt_f18:nth-of-type(1) {
    width: 210%;
}
@media screen and (max-width: 768px) {
    .grid.ex_layout2 .grid_item.flex3 > div p.txt_f18:nth-of-type(1) {
        width: 100%;
    }
}
.grid.ex_layout2 .grid_item.flex3 figure {
    z-index: 1;
    position: relative;
    order: 2;
}
.grid figure + .txt_f18 {
    margin-top: 11px;
    line-height: 1.55;
}
@media screen and (max-width: 768px) {
    .grid figure + .txt_f18 {
        margin-top: 13px;
        font-size: 1.6rem;
        letter-spacing: -0.05em;
        line-height: 1.4;
    }
}
.grid figure + .txt_f16 {
    margin-top: 11px;
    line-height: 1.55;
}
.grid .txt_f15 {
    line-height: 1.86;
}
@media screen and (max-width: 768px) {
    .grid .txt_f15 {
        margin-top: 2px;
        font-size: 1.4rem;
        line-height: 1.55;
    }
}

/*============================
zeh
============================*/
#zeh .flexbox {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    max-width: 1060px;
    width: 100%;
    margin-inline: auto;
}
#zeh .flexbox:nth-of-type(1) {
    margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
    #zeh .flexbox:nth-of-type(1) {
        margin-bottom: 36px;
    }
}
#zeh .flexbox:nth-of-type(2) {
    margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
    #zeh .flexbox:nth-of-type(2) {
        margin-bottom: 36px;
    }
}
#zeh .flexbox:nth-of-type(3) {
    margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
    #zeh .flexbox:nth-of-type(3) {
        margin-bottom: 60px;
    }
}
@media screen and (max-width: 768px) {
    #zeh .flexbox {
        flex-direction: column;
        gap: 13px;
    }
}
#zeh .flexbox > div {
    width: calc(50% - 14px);
}
@media screen and (max-width: 768px) {
    #zeh .flexbox > div {
        width: 100%;
    }
}
#zeh .flexbox > figure {
    width: calc(50% - 14px);
}
@media screen and (max-width: 768px) {
    #zeh .flexbox > figure {
        width: 100%;
    }
}
#zeh .flexbox .flex_ttl {
    background-color: #BEB0A2;
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
}
#zeh .flexbox .flex_ttl + .txt_f14 {
    margin-block: 15px 10px;
}
#zeh .flexbox .flex_inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    margin-inline: auto;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
    #zeh .flexbox .flex_inner {
        gap: 20px;
    }
}
#zeh .flexbox .flex_inner .txt_f16 {
    margin-block: 15px 0;
    line-height: 1.5;
}
@media screen and (max-width: 768px) {
    #zeh .flexbox .flex_inner .txt_f14 {
        margin-top: 5px;
    }
}
@media screen and (max-width: 768px) {
    #zeh .lead20:nth-of-type(1) {
        margin-bottom: 45px;
    }
}
@media screen and (max-width: 768px) {
    #zeh .lead20:nth-of-type(2) {
        margin-bottom: 4px;
    }
}
#zeh .lead20 + .txt_f16 {
    max-width: 1060px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 35px;
    text-align: center;
}
@media screen and (max-width: 768px) {
    #zeh .lead20 + .txt_f16 {
        width: 100%;
        font-size: 1.4rem;
        line-height: 1.55;
    }
}

/*============================
structure
============================*/
#structure {
    padding-bottom: 0 !important;
}
#structure .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 28px;
    grid-row-gap: 28px;
}
@media screen and (max-width: 768px) {
    #structure .grid {
        grid-template-columns: 1fr;
    }
}
#structure .grid .item1 {
    grid-area: 1/1/3/2;
}
#structure .grid .item2 {
    grid-area: 1/2/2/3;
}
#structure .grid .item3 {
    grid-area: 2/2/3/3;
}
#structure .grid .item4 {
    grid-area: 3/1/4/2;
    display: flex;
    gap: 20px;
}
#structure .grid .item4 div {
    width: 50%;
}
#structure .grid .item4 figure {
    width: 50%;
}
#structure .grid .item4 .txt_f15 {
    width: 105%;
}
@media screen and (max-width: 768px) {
    #structure .grid .item1 {
        grid-area: unset;
    }
    #structure .grid .item2 {
        grid-area: unset;
    }
    #structure .grid .item3 {
        grid-area: unset;
    }
    #structure .grid .item4 {
        grid-area: unset;
    }
}
#structure .grid .txt_f15 {
    margin-block: 5px 20px;
    line-height: 1.86;
}
#structure .grid .txt_f15 {
    margin-block: 5px 20px;
    line-height: 1.86;
}

.quality .bg + .notes_area {
    padding-top: 70px;
    background-color: #fff;
}
.quality .bg + .notes_area ul {
    max-width: 1060px;
    width: 90%;
    margin: auto;
    padding: 0;
    color: #1c3a1c;
}
/*# sourceMappingURL=quality.css.map */