@charset "utf-8";

/* ここから全体 */

* {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

body {
    max-width: 1900px;
    padding-inline: 15%;
    background-color: #f7be78;
}

.flex {
    display: flex;
    /* flex-wrap: wrap; */
}

p {
    font-size: 1.2vw;
    font-family: 娃娃体-简;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.5); /* 白で50%透明 */
    background-size: contain;
    margin: 0 15px;
    padding: 10px;
    
}

/* img, div, p {
    max-width: 100%;
    overflow: hidden;
} */


/* ここまで全体 */

/* ここからbody */

.center {
    text-align: center;
}

/* ここから特徴１ */

#toku_1 {
    align-items: center;
}

#toku_1_img{
    width: 100%;
    max-width: 80%;
}


/* ここまで特徴１ */

/* ここから特徴２ */

#toku_2 {
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

#toku_2 img {
    width: 90%;
}

#toku_2 p {
    margin-left: 50px;
    padding-left: 20px;
}


/* ここまで特徴２ */

/* ここから特徴３ */

#toku_3_tyui {
    text-align: center;
    padding-top: 20px;
    margin-left: 100px;
}

#toku_3 {
    align-items: center;
}

.toku_3_img{
    width: 100%;
    max-width: 80%;
}

/* ここまで特徴３ */

/* ここから全ての特徴 */

/* #toku_1 div:first-child,
#toku_2 div:first-child,
#toku_3 div:first-child {
    flex-grow: 0;
}

#toku_1 div:last-child,
#toku_2 div:last-child,
#toku_3 div:last-child {
    flex-grow: 1;
} */

#toku_haikei_1 {
    background-image: url(../images/haikei1.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 30px;
    padding-bottom: 70px;
    padding-inline: 50px;
    margin-bottom: 5px;
}

#toku_haikei_2 {
    background-image: url(../images/haikei2.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 5px;
    padding-inline: 20px;
}

#toku_haikei_3 {
    background-image: url(../images/haikei3.png);
    padding-top: 30px;
    padding-bottom: 60px;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 5px;
    padding-inline: 60px;
    
}

/* ここまで全ての特徴 */

/* ここまでbody */

/* ここからfooter */

.fixed_btn {
    position: fixed;
    bottom: 20px;
    /* 画面の下からの位置 */
    right: 20px;
    /* 画面の右端からの位置 */
    z-index: 1000;
    /* 他の要素の上に表示されるようにする */
    width: auto;
}

.fixed_btn img {
    width: 100%;
    max-width: 40%;
    display: block; /* 余白が出ないように配置 */
    margin: 0 auto; /* 中央配置 */
}

.foot_box img {
    width: 100%;
    max-width: 40%;
    /* margin-left: -100px; */
}

/* ここまでfooter */

@media (min-width: 1260px) {

    /* ここから特徴１ */

#toku_1 {
    align-items: center;
}

#toku_haikei_1{
    padding-inline: 50px;
}

#toku_1_img{
    width: 100%;
    max-width: 50%;
    overflow-x: hidden;
}

#toku_1_p{
    overflow-x: hidden;
}


/* ここまで特徴１ */

}

/* ここからスマホ版 */

@media screen and (max-width: 768px) {

    /* ここから全体 */

    p {
        font-size: 2.3vw;
        font-family: 娃娃体-简;
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.5); /* 白で50%透明 */
        background-size: contain;
        margin: 0 auto;
        padding: 3px;
        
    }

    body {
        max-width: 1900px;
        padding-inline: 0%;
        background-color: #f7be78;
    }

    /* ここまで全体 */

/* ここから特徴１ */

#toku_1 {
    align-items: center;
}

#toku_1_img{
    width: 100%;
    max-width: 40%;
}


/* ここまで特徴１ */

/* ここから特徴２ */

#toku_2 {
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

#toku_2_img {
    width: 100%;
    max-width: 100%;
}

#toku_2 p {
    margin-left: 0px;
    padding-left: 0px;
}


/* ここまで特徴２ */

/* ここから特徴３ */

#toku_3_tyui {
    text-align: center;
    padding-top: 0px;
    padding-bottom: 5px;
    margin: 0 auto;

}

#toku_3 {
    align-items: center;
}

.toku_3_img{
    width: 100%;
    max-width: 40%;
}

/* ここまで特徴３ */

/* ここから背景 */

#toku_haikei_1 {
    background-image: url(../images/haikei1.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 0px;
    padding-bottom: 15px;
    padding-inline: 10px;
    margin-bottom: 5px;
}

#toku_haikei_2 {
    background-image: url(../images/haikei2.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 0px;
    padding-bottom: 15px;
    padding-inline: 10px;
    margin-bottom: 0px;
}

#toku_haikei_3 {
    background-image: url(../images/haikei3.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 0%;
    padding-bottom: 5px;
    padding-inline: 10px;
    margin-bottom: 5px;
    
}

/* ここまで背景 */

/* ここからフッター */

.fixed_btn {
    position: fixed;
    bottom: 20px;
    /* 画面の下からの位置 */
    right: 20px;
    /* 画面の右端からの位置 */
    z-index: 1000;
    /* 他の要素の上に表示されるようにする */
    width: auto;
}

.fixed_btn img {
    width: 100%;
    max-width: 20%;
    display: block; /* 余白が出ないように配置 */
    margin-right: 0px; /* 中央配置 */
}

.foot_box img {
    width: 100%;
    max-width: 15%;
    /* margin-left: -100px; */
}

/* ここまでフッター */


}

/* ここまでスマホ版 */