/* リセットCSS */
*,
*::before,
*::after {
    margin: 0;  /* 要素の外側の余白:　上右下左 */
    padding: 0; /* 要素の内側の余白:　上右下左 */
    box-sizing: border-box;
}

/* CSSカスタムプロパティの定義 */
:root{
    --font-color_normal: #323339; /* フォント色[通常] #2A3132*/
    --font-color_em: #7D4427; /* フォント色[強調] #7D4427*/
    --font-color_em2: #FFFFFF; /* フォント色[強調] #7D4427*/
    --page-background-color: #FFFFFF; /* 背景色 #eff5fa #EDEDED*/
    --frame-color: #7D4427; /* フレーム色[] #F19ED2*/
    --box-color: #d6d5d5;  /* box色*/
    --box-btn-color: red;
    --cta-box-color: #C09200;/* cta box色*/
    --cta-font-color: #FFFFFF; /* cta font色*/

    --font-size_normal: 12px; /* フォントサイズ[通常]*/
    --font-size_em: 24px; /* フォントサイズ[強調]*/

    --display_max-width_SP: 520px; /* 画面最大サイズ[For smartphone] */
    --display_min-width_SP: 250px; /* 画面最大サイズ[For smartphone] */
}


/* For smartphone */
body {
    font-family:  Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Noto Sans JP', 'Dancing Script', cursive, sans-serif; /* */
    /* font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; /* */
    color: var(--font-color_normal);       /* */
    margin: 0 auto;           /* 要素の外側の余白:　上右下左 */
    max-width: var(--display_max-width_SP);       /* */
    min-width: var(--display_min-width_SP);       /* */
    background-color: var(--page-background-color);  /* #eff5fa ⇒ #A2C523 */
    text-align: center;
}
main{
    margin: 5%;/* 要素の外側の余白:　上右下左 */
}

img{
    max-width: 100%;
    /* object-fit: contain;          /* */
    padding: 0 0 0 0; /* 要素の内側の余白:　上右下左 */
    margin: 1rem auto;
}
span{
    display: inline-block;
}
/* 見出し */
.catch {
    display: flex;
    align-items: center; /* 垂直中心 */
    justify-content: center; /* 水平中心 */
    text-align: center;
    color: var(--font-color_em);
    font-weight: bold;
    padding: 1rem 0; /* 要素の内側の余白:　上右下左 */
}
.catch:before, .catch:after {
    border-top: 2px solid;
    content: "";
    width: 3em; /* 線の長さ */
}
.catch:before {
    margin-right: 1em; /* 文字の右隣 */
}
.catch:after {
    margin-left: 1em; /* 文字の左隣 */
}

.box_btn{
    max-width: fit-content;
    text-align: center;
    font-weight: bold;
    font-size: 150%;
    color: var(--font-color_em2);
    background-color: var(--box-btn-color);
    box-shadow: 5px 5px 7px  #d6d5d5;
    padding: 1rem 2rem;    
    border-radius: 0.2rem;
    text-decoration: none;
    display: block;
    margin: 1rem auto;
    transition: all .2s;
}

.box_btn:hover{
    opacity: 0.6;
}
/* section10 ----title---- */
.section10{
    width: 100%;
    padding: 0 0 0 0;    /* 要素の内側の余白:　上右下左 */
    margin: 1rem 0;     /* 要素の外側の余白:　上右下左 */
}


/* section20 ----お悩み---- */
.section20{
    width: 100%;
    padding: 0 0 0 0;    /* 要素の内側の余白:　上右下左 */
    margin: 1rem 0;     /* 要素の外側の余白:　上右下左 */
}

/* section30 ----提案---- */
.section30{
    width: 100%;
    padding: 0 0 1rem 0;    /* 要素の内側の余白:　上右下左 */
    margin: 1rem 0;     /* 要素の外側の余白:　上右下左 */
}

/* section40 ----特長---- */
.section40{
    width: 100%;
    padding: 0 0 0 0;    /* 要素の内側の余白:　上右下左 */
    margin: 1rem 0;     /* 要素の外側の余白:　上右下左 */
}

/* section50 ----使い方---- */
.section50{
    width: 100%;
    padding: 1rem 0 0 0;    /* 要素の内側の余白:　上右下左 */
    margin: 1rem 0;     /* 要素の外側の余白:　上右下左 */
}

/* section60 ----期待の声---- */
.section60{
    width: 100%;
    padding: 1rem 0 0 0;    /* 要素の内側の余白:　上右下左 */
    margin: 1rem 0;     /* 要素の外側の余白:　上右下左 */
}
/* section70 ----ご案内--- */
.section70{
    width: 100%;
    padding: 1rem 0 5rem 0;    /* 要素の内側の余白:　上右下左 */
    margin: 1rem 0;     /* 要素の外側の余白:　上右下左 */
}

.section70 .box{
    Width: 90%;            /* */
    margin: 0 auto;/* 要素の外側の余白:　上右下左 */
    background-color: white;
    border: 1px solid black;
    border-radius: 12px;
    font-size: 75%;/* */
    padding: 0.5rem 0.5rem 0.5rem 2rem;/* 要素の内側の余白:　上右下左 */
    text-align: left;
}
.section70 .box1{
    Width: 90%;            /* */
    margin: 0 auto;/* 要素の外側の余白:　上右下左 */
    background-color: white;
    border: 1px solid black;
    border-radius: 12px;
    font-size: 75%;/* */
    padding: 0.5rem 0.5rem 0.5rem 2rem;/* 要素の内側の余白:　上右下左 */
    text-align: left;
}
.section70 .box2{
    Width: 90%;            /* */
    font-size: 75%;/* */
    text-align: left;
    margin: 0 auto;/* 要素の外側の余白:　上右下左 */
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;/* 要素の内側の余白:　上右下左 */
}



/* footer */

/* For not smartphone */