/* ==================================
   さんくすのこだわり
=================================== */

.intro_cont { margin-top: 2em;}
@media print, screen and (min-width: 1025px){
.intro_cont { margin-top: 4em;}
}

.intro_catch {
    text-align: center;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";
    letter-spacing: .1rem;
    font-weight: 700;
    font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}
.intro_catch::after {
    content: "";
    width: 2em;
    height: 1px;
    background: #333;
    display: inline-block;
    margin-bottom: 0.3em;
    margin-left: 0.5em;
}
@media print, screen and (min-width: 1025px){
.intro_catch::after { width: 3em;}
}

.intro_txt { margin-bottom: 2em;}

.intro_pic img { display: block; width: 100%; height: auto;}
.intro_pic { position: relative; z-index: 1;}

.intro_picback { position: relative; margin-bottom: 1.5em;}
.intro_picback::before {
    content: "";
    background: #00A73C;
    position: absolute;
    bottom: -1.5em;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
@media print, screen and (min-width: 1025px){
.intro_picback { margin-bottom: 3em;}
.intro_picback::before { bottom: -3em;}
}


/* =================================
   こだわり */

.concept_title { margin-bottom: 0 !important;}

.concept_pic01 img,.concept_pic02 img { display: block; width: 100%; height: auto; border-radius: .5em;}
.concept_pic02_main {
    width: 90%;
    margin-right: auto;
}
.concept_pic02_sub {
    width: 50%;
    margin-left: auto;
    margin-top: -3em;
}

.concept_pic01,.concept_pic02_main,.concept_pic02_sub {
    position: relative;
    margin-right: 1em;
    margin-bottom: 1em;
    display: block;
}
.concept_pic01::before,
.concept_pic02_main::before,
.concept_pic02_sub::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00A73C;
    bottom: -1em;
    right: -1em;
    z-index: -1;
    border-radius: .5em;
}

.concept_list { counter-reset: number 0;}

@media print, screen and (min-width: 768px){
.concept_list li { position: relative;}
.concept_list li:nth-child(odd)::before {
    content: "";
    position: absolute;
    width: 70%;
    height: 100%;
    background: #fff;
    left: 0;
    top: 0;
    z-index: -3;
}
.concept_list li:nth-child(odd)::after {
    content: "";
    position: absolute;
    width: 30%;
    height: 100%;
    background: #E5F6EB;
    right: 0;
    top: 0;
    z-index: -3;
}

.concept_list li:nth-child(even)::before {
    content: "";
    position: absolute;
    width: 70%;
    height: 100%;
    background: #FAFAFA;
    right: 0;
    top: 0;
    z-index: -3;
}
.concept_list li:nth-child(even)::after {
    content: "";
    position: absolute;
    width: 30%;
    height: 100%;
    background: #E5F6EB;
    left: 0;
    top: 0;
    z-index: -3;
}
}

.concept_catch {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";
    font-weight: 700;
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
}

.concept_tx {
    position: relative;
}
.concept_list li .concept_tx::before {
    counter-increment: number 1;
    content: counter(number,decimal-leading-zero) "";
    position: absolute;
    top: -.2em;
    left: 0;
    color: #E5F6EB;
    z-index: -2;
    font-size: clamp(5rem, 1.818rem + 15.91vw, 13.75rem);
    font-family: Impact, "Haettenschweiler", "Franklin Gothic Bold", "Charcoal", "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
    line-height: 1;
}

@media only screen and (max-width: 767px){
.concept_item {
    display: flex;
    flex-direction: column;
}
.concept_tx { order: 1;}
.concept_pic01 { order: 2;}
.concept_pic02 { order: 2;}
}

@media print, screen and (min-width: 768px){
.concept_item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.concept_tx { width: 55%;}
.concept_pic01,.concept_pic02 { width: 40%;}
}


/* =================================
   さんくすの取り組み */

.initiatives_list > li {
    border: solid 1px #18AF4E;
    border-radius: .5em;
    padding: 1.5em 1em;
}

.initiatives_title {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";
    font-weight: 700;
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
    text-align: center;
    margin-bottom: 0.5em;
}
.initiatives_title span { background: linear-gradient(transparent 60%, #FFF98C 60%);}

.initiatives_txt {
    padding-top: 1.5em;
    border-top: solid 1px #18AF4E;
}
.initiatives_point { color: #E51F23;}

.initiatives_list > li + li { margin-top: 1.5em;}

@media print, screen and (min-width: 768px){
.initiatives_title { margin-bottom: 1em;}
.initiatives_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.initiatives_list > li { width: 48%; padding: 2em;}
.initiatives_list > li:last-child { width: 100%; margin-top: 2em;}
.initiatives_list > li + li { margin-top: 0;}
}

/* ボタン */
.initiatives_link a {
    background: #00A73C;
    color: #fff;
    border: solid 1px #00A73C;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    text-decoration: none;
    letter-spacing: .1rem;
    transition: all .2s ease;
    display: inline-block;
    font-size: 90%;
}
.initiatives_link { margin-top: 1em; text-align: center;}
.initiatives_link a:hover {background: #fff; color: #00A73C;}

@media print, screen and (min-width: 768px){
.initiatives_link { margin: 1em .5em .5em .5em;}
.initiatives_btn { display: flex; justify-content: center;}
}

/* 4つの秘密 */
.secret_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    counter-reset: number 0;
    padding-top: 1.5em;
}
.secret_list li {
    width: 48%;
    background: #E5F6EB;
    position: relative;
    border-radius: 0.5em;
}
.secret_title {
    position: absolute;
    top: -1em;
    left: 50%;
    transform: translate(-50%,0);
    display: block;
    text-align: center;
    background: #00A73C;
    width: 60%;
    margin: 0 auto -1em auto;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";
}
.secret_list li .secret_title::after {
    counter-increment: number 1;
    content: counter(number) "";
    font-family: Impact, "Haettenschweiler", "Franklin Gothic Bold", "Charcoal", "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
    font-size: clamp(1.375rem, 1.057rem + 1.59vw, 2.25rem);
    margin-left: 0.1em;
    font-weight: 400;
}
.secret_list li:nth-child(-n+2) { margin-bottom: 2em;}

@media print, screen and (min-width: 768px){
.secret_list li { width: 22.5%;}
.secret_list li:nth-child(-n+2) { margin-bottom: 0;}
}

.secret_pic img { display: block; width: 100%; height: auto; border-radius: .5em .5em 0 0;}
.secret_txt {padding: .5em; text-align: center;}
@media print, screen and (min-width: 768px){
.secret_txt { padding: .7em;}
}