p.SH_ttl1 {
    font-weight: bold;
    padding: 10px 0 10px 0;
    text-align: center;
    margin: 0 0 20px 0;
    border: solid 2px;
    font-size: 18px;
}

p.SH_ttl1_mt {
    margin-top: 20px;
}

p.SH_ttl2 {
    font-weight: bold;
    padding: 14px 0 14px 0;
    color: #fff;
    text-align: center;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
    font-size: 120%;
}

@media screen and (max-width: 640px) {

    p.SH_ttl1,
    p.SH_ttl2 {
        margin-top: 50px;
    }
}

div.SH_point_dd {
    margin-top: 1em;
    margin-bottom: 0.5em;
    background-color: #E2EFD9;
    width: 100%;
    border: solid 1px #385623;
}

div.SH_point_dd div.SH_point_head {
    background-color: #008974;
    width: 100%;
    padding: 0.5em 1em;
}

a.line-link {
    display: inline !important;
}

img.SH_point-link {
    width: 210px;
}

div.line_link {
    display: flex;
    max-width: 100%;
    height: auto;
    margin: 30px 0 30px 0;
}

div.line_next {
    margin-left: auto;
    display: table;
    border-collapse: separate;
    border-spacing: 5px 0;
}

div.line_next a{
    text-align: right;
}

div.line_link>div.line_back_menu>a {
    text-decoration: none;
    display: block;
    color: #000 !important;
    padding: 5px 10px;
    border-radius: 1em;
    background: #fff;
    border: solid 2px #000;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

div.line_link>div.line_next>a {
    text-decoration: none;
    display: block;
    color: #000 !important;
    padding: 5px 10px;
    border-radius: 1em;
    background: #fff;
    border: solid 2px #000;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

div.line_link>div.line_back_menu>a:hover {
    color: #fff !important;
    background-color: #a9a9a9;
}

div.line_link>div.line_next>a:hover {
    background-color: #DEEAF6;
}

div.line_next>a>span {
    display: table-cell;
    vertical-align: middle;
}


/* 20221017追加 */

p.SH_ttl1.mgt0 {
    margin-top: 0;
}

p.SH_ttl2.mgt0 {
    margin-top: 0;
}

.mt60 {
    margin-top: 60px;
}

.m0202_flex_box {
    display: flex;
    justify-content: space-between;
    width: 71%;
    margin: 20px auto;
}

.w42 {
    width: 42%;
    text-align: center;
}

.w43 {
    width: 43%;
    margin: 20px auto;
}

.flex_box.wrap {
    flex-wrap: wrap;
}

.line-bottom {
    border-bottom: solid 2px #B0B0B0;
}

@media screen and (max-width: 768px) {
    #m_02_02 div.SH_st_screen {
        margin-top: 0;
    }

    .m0202_flex_box {
        width: 81%;
    }

    .w43 {
        width: 220px;
    }

    div.line_next.sp a {
        padding-right: 1em !important;
        text-align: right;
        position: relative;
    }

    div.line_next.sp span {
        position: absolute;
        right: 0.25em;
        top: 50%;
        transform: translateY(-50%);
    }

    .line-bottom {
        border-bottom: none;
    }
}

.line-top {
    border-top: solid 2px #B0B0B0;
}



.products_box {display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1010px;height:auto;margin:25px auto 30px;padding:30px 70px 30px;background-color:#8D9BC1;border-radius:20px;}
@media screen and (max-width:640px) {.products_box {width:100%;padding:5.5vw 2vw 5vw;margin:5vw auto 5vw;}}

.products_box h2 {width:90%;font-size:42px;color:#02275b;text-align:center;font-weight:500;letter-spacing:0;margin:0 auto 1px;}
@media screen and (max-width:640px) {.products_box h2 {width:94%;font-size:6.5vw;margin:0 auto 0.2vw;}}

.btn_unit {
    width: 50.5%;
    padding: 0;
    margin: 0 auto;
    background: #fff;
    border-radius: 5%;
    padding: 0;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width:640px) {.btn_unit{width: 90%;}}

.btn_unit2 {
    width: 46%;
    padding: 0;
    margin: 20px 0;
    background: #fff;
    border-radius: 5%;
    padding: 0;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width:640px) {.btn_unit2 {width:84%;margin:4vw auto;}}

.waku_btn {width:54%;padding:10px 40px 10px 20px; margin:15px auto 40px;border:2px solid #8d9bc1;border-radius:10px;font-size:120%;line-height:150%;color:#8d9bc1;text-align:left;background:url(../images/parts/arrow_01.png) right center no-repeat;background-size:36px;}
@media screen and (max-width: 640px) {.waku_btn {width:100%;padding:2vw 8vw 2vw 6vw; margin:3vw auto 6vw;font-size:100%;line-height:140%;}}
@media screen and (max-width: 420px) {.waku_btn {padding:2vw 9vw 2vw 4vw;}}

.qa_box {max-width:1010px;height:auto;margin:30px auto 60px;padding:0;font-size:18px;font-weight:500;line-height:1.8;}
@media screen and (max-width:640px) {.qa_box {width:100%;padding:0;margin:0vw auto 8vw;font-size:3.5vw;font-weight:500;line-height:1.5;}}

.qa_box .ques {width:100%;text-align:left;padding-top:6px;padding-bottom:6px;padding-right:6px;padding-left:2.8em;text-indent:-2em;margin:20px auto 0;background:#d2daf0;}
@media screen and (max-width:640px) {.qa_box .ques {padding-top:2vw;padding-bottom:2vw;padding-right:2vw;margin:3vw auto 0;}}

.qa_box .ans {display:block;width:100%;text-align:left;padding-top:6px;padding-bottom:6px;padding-right:40px;padding-left:2.8em;text-indent:-2em;margin:0 auto 0;background:#fff4d0;cursor:pointer;position:relative;}
@media screen and (max-width:640px) {.qa_box .ans {padding-top:2vw;padding-bottom:2vw;padding-right:6vw;margin:0 auto 0;}}

.qa_box .ans_ss {width:100%;text-align:left;padding:3px 12px;margin:0 auto 10px;background:#fff4d0;}
@media screen and (max-width:640px) {.qa_box .ans_ss {padding:1vw 2vw;margin:0 auto 2vw;}}

.qa_box a {cursor:pointer;text-decoration:none;color:#3ea4ca;}
.qa_box a:hover {color:#f69f2e;}

/* --- 開閉用のCSS --- */
.faq-check {
  display: none;
}

.faq-check + .ans + .ans_ss {
  display: none;
}

.faq-check:checked + .ans + .ans_ss {
  display: block;
}

.qa_box .ans::after {
  content: "▼";
  position: absolute;
  right: 15px;             /* 右端からの距離 */
  top: 1.2em;             /* 上下中央に配置 */
  text-indent: 0; 
  transform: translateY(-50%); /* 上下中央に配置するための調整 */
  font-size: 1em;        /* 矢印の大きさ */
  color: #666;             /* 矢印の色 */
  transition: transform 0.3s; /* くるっと回るアニメーションの時間（0.3秒） */
}
@media screen and (max-width:640px) {.qa_box .ans::after {right:1.5vw;top:1.2em;}}

/* 2. チェックボックスが入ったら（開いたら）「▲」に回転させる */
.faq-check:checked + .ans::after {
  /* 上下中央を保ったまま、180度回転させて「▲」にします */
  transform: translateY(-50%) rotate(180deg); 
}

.qa_box h2 {font-weight:bold;font-size:40px;line-height:1.4;margin:100px auto 30px;color:#8d9bc1;text-align:center;}
@media screen and (max-width:640px) {.qa_box h2 {font-size:5.5vw;line-height:1.5;margin:20vw auto 4vw;}}

.qa_box h2 .large {font-size:1.3em;}

.terms_kajo {padding-left:1em;text-indent:-1em;margin-bottom:0.5em;}

div.cap_info {font-size:90%;margin-top:1em;text-align:center;}
@media screen and (max-width: 640px) {div.cap_info {font-size:80%;line-height:1.5;}}
@media screen and (max-width: 420px) {div.cap_info {text-align:left;}}

.cap_info2 {width:100%;font-size:90%;margin:10px auto 40px;text-align:center;line-height:1.5;}
@media screen and (max-width: 640px) {.cap_info2 {font-size:80%;margin:2vw auto 4vw;text-align:left;}}
