/* CSS Document */
@import url("image_fade.css");
/* sp View   ～768px  ----------------------------------------------------------------------------------------------*/
/*html, body {
  overflow-x: hidden;
}*/
section{
  /*  padding-left: 0;*/
}
#rinen{
    width: 100%;
}
.full_width_img  {
    /*width: 100vw;
    margin-left: calc(50% - 50vw - 1em);
    margin-right: calc(50% - 50vw);*/
    
    /*  親のsectionが下記定義をしているの
    section{ padding: 150px 1em 1px 2em;}*/
    width: auto;
    /* 親のpadding-left(2em)分、左に引き戻す */
    margin-left: -2em; 
    /* 親のpadding-right(1em)分、右に引き戻す */
    margin-right: -1em; 
    
    /* ※画像の横幅を親の枠 + 余白分に強制拡大 */
    /*max-width: none; 
    width: calc(100% + 3em); *//* 100% + 左余白(2em) + 右余白(1em) */
    
}
.rinen_text{
    font-size: 14px;
    width: 90%;
    display: inline-block;
    text-align: left;
    line-height: 1.5em;
    margin:0 auto 2em;
    border-bottom: dotted 6px #090;
}
.rinen_text strong{
    color: red;
}
#rinen2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#rinen2 .element{
    width: 320px;
   /* display: flex;
    flex-wrap: wrap;*/
}
#rinen2 .element img{
    display: block;
    /*width: 320px;*/
    border-radius: 10px;
}
#rinen2 .element div{
    width: 320px;
    height: 180px;
    margin-top: 1em;
    background-repeat: no-repeat;
    background-position: center; /* 画像を中央に配置 */
    background-size: contain; /* ★ 画像全体をdiv内に収める */
    background-size: 50%; /* ★ divの幅の80%のサイズで表示 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}
#rinen2 .element:nth-of-type(1) div{background-image: url("../img/about/heart1.svg");}
#rinen2 .element:nth-of-type(2) div{background-image: url("../img/about/heart2.svg");}
#rinen2 .element:nth-of-type(3) div{background-image: url("../img/about/heart3.svg");}

#housin {
   /* display: flex;*/
        display: inline-block;

}
#housin .element {
    background-repeat: no-repeat;
    background-position: top 14px left; /* 画像を中央に配置 */
    background-size:20%; /* ★ 画像全体をdiv内に収める */
    
    margin-bottom: 2em;
    text-align: left;
    font-size: 24px;

   /* display: flex;*/
}
#housin .element .no {
    vertical-align: 10px;
    padding-left: 1em;
}
#housin .element .title{
    width: 160px;
    height: 128px;
    padding-top: 32px;
    font-size: 48px;
    text-align: center;
    vertical-align: 0px;

}
#housin .element:nth-of-type(1){background-image: url("../img/about/zo_bg1.svg");}
#housin .element:nth-of-type(2){background-image: url("../img/about/zo_bg2.svg");}
#housin .element:nth-of-type(3){background-image: url("../img/about/zo_bg3.svg");}

#housin .element .text{
    padding-left: 1em;
    font-size: 16px;
}

/* --- スマホ用（共通設定：縦並び） --- */
.feature_element {
  display: grid;
  grid-template-areas:
    "title"
    "image"
    "text";
  gap: 6px;
  margin-bottom: 50px;
}

.feature_title { grid-area: title; }
.feature_image { grid-area: image; }
.feature_text  { grid-area: text; }



#features .feature_element{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2em;
}
#features .feature_element div{
    margin-bottom: 6px;
}
#features .feature_element .feature_title{
    font-size: 28px;
    background: url("../img/about/title_flame1.png") no-repeat left top , url("../img/about/title_flame2.png") no-repeat right top;
    padding: 18px 36px 0
}
#features .feature_element .feature_img img{
    width: 320px;
    height: auto;
    border-radius: 16px;
}
#features .feature_element .feature_text{
    text-align: left;
    width: 320px;
    background-color: #FFF06E;
    border-radius: 20px;
    padding: 1em;
    align-self: center;
}

.symbol_text{
    width: 90%;
    max-width: 960px;
    display: inline-block;
    text-align: left;
    line-height: 1.5em;
}
.symbol_text p{
    text-align: center;
}
.symbol_text strong{
    color: var(--accent-color);
}
#symbol .img_area{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
#list_10e{
    max-width: 960px;
    margin: 1em auto;
    list-style: none;
    text-align: left;
    padding: 0;
}
#list_10e li{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 0.5em;
}
#list_10e li span{
    line-height: 1.2em;
}
#list_10e li span:nth-of-type(1){
    color: #548235;
    font-size: 24px;
    display: block;
    width: 100%;
}
#list_10e li span:nth-of-type(2){
    color: #333;
    display: block;
    margin-left: 1em;
    text-align: justify;
}

#history ul{
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    text-align: left;
    padding-left: 0;
}
#history ul li{
    width: 100%;
    line-height: 1.2em;
}
#history ul li:nth-child(1){
    font-weight: bold;
    border-bottom: 1px #fff;
}
#history ul li:nth-child(2){
    margin-left: 1em;
}
#cost>div{
    margin-bottom: 2em;
    text-align: left;
}
#cost .sub_title{
    color: var(--secondary-color);
    font-size: 24px;
    border-bottom: 1px var(--secondary-color) dashed;
    padding: 0.5em;
    margin-bottom: 0.5em;
}
#cost ul,#cost li{
    /*width: fit-content;*/
    line-height: 1.5em;
}
#cost ul{
    width: fit-content;
    list-style: none;
/*    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;*/
    text-align: left;
    margin: 0 auto 1em;
    padding: 0
}
#cost ul li{
    line-height: 1.5em;
    display: flex;
    margin-right: auto;
    width: 100%;
    justify-content: flex-end;
    /*margin-bottom: 0.5em;*/
}
#cost ul li span{
    display: block;
    margin-left: 0.5em;
}
/*--- Tablet View ---------------------------------------------------------------------------------------------------------*/
@media (min-width: 768px){
    .rinen_text{
        width: fit-content;
        font-size: 20px;
        font-weight: bold;
        line-height: 1.8em;
    }
    #housin .element {
        background-repeat: no-repeat;
        background-position: left; /* 画像を中央に配置 */
        background-size:10%; /* ★ 画像全体をdiv内に収める */

        margin-bottom: 2em;
        text-align: left;
        font-size: 24px;

       /* display: flex;*/
    }
    #housin .element .text{
        padding-left: 5em;
        font-size: 24px;
    }
    #housin ol{
        font-size: 18px;
        width: fit-content;
    }
    #housin ol li span{
        display: inline;
    }
    /* --- PC用（横並び・順序入れ替え） --- */
    .feature_element {
        display: grid !important;
        /*grid-template-columns: repeat(3, 1fr);*/
        grid-template-columns: auto auto auto;
        align-items: center;
    }

    /* 奇数行: 説明文(1) タイトル(2) 画像(3) */
    .feature_element:nth-of-type(odd) {
        grid-template-areas: "text title image";
    }
    #features .feature_element:nth-of-type(odd) .feature_title {
        background: url("../img/about/title_flame1.png") no-repeat left top , url("../img/about/title_flame3.png") no-repeat left bottom;
        padding: 35px 00px 35px 20px;
    }

    /* 偶数行: 画像(1) タイトル(2) 説明文(3) */
    .feature_element:nth-of-type(even) {
        grid-template-areas: "image title text";
    }
    #features .feature_element:nth-of-type(even) .feature_title {
        background: url("../img/about/title_flame2.png") no-repeat right top , url("../img/about/title_flame4.png") no-repeat right bottom;
        padding: 35px 20px 35px 0px;
    }

    .feature_title {
        grid-area: title;
        /* 縦書きにする設定 */
        writing-mode: vertical-rl;

        /* 中央揃えにしたい場合 */
        justify-self: center; /* Grid内の左右中央 */
        align-self: center;   /* Grid内の上下中央 */

        /* 必要に応じてフォント調整 */
        text-orientation: upright; /* 英数字も横に倒さず直立させる設定 */
    }
    #features .feature_element .feature_img img{
        width: 480px;
    }
    #features .feature_element .feature_text{
        width: auto;
        max-width: 500px;
        border-radius: 100px;
        padding: 1em 3em;
    }

    #catch img{
        max-width: 960px;
        height: auto;
    }
    .symbol_text{
        width: fit-content;
    }
    .symbol_text p{
        text-align: right;
    }
    #list_10e li{
        flex-wrap: nowrap;
        align-items: center;
    }
    #list_10e li span:nth-of-type(1){
        width: auto;
    }
    #history{
        width: 640px;
        margin: 0 auto;
    }
    #history ul{
        display: flex;
        flex-wrap: nowrap;
    }
    #history ul li{
        width: auto;
    }
    #history ul li:nth-child(1){
        margin-right: 1em;
        white-space: nowrap;
    }
    #cost>div{
        width: 480px;
        margin: 2em auto;
        text-align: center;
    }
    #cost .sub_title{
        padding-left: 1em;
        text-align: left;
        border-left: 8px solid var(--secondary-color);
    }
    #cost ul{
        width: 100%;
    }
    #cost ul li{
        width: 100%;
        justify-content: flex-end;
    }
    #cost ul li span{
        width: 50%;
        display: block;
    }

}