html { scroll-behavior: smooth; }
#wrap img {
    vertical-align: top;
    height: auto;
}
#wrap .main_visual img {
    max-width: 82%;
}
#wrap .mh_logo img {
    max-width: 100%;
    margin: 7px auto 0px;
}
.bg_color { background-color: #fffdfa;}
 #wrap {
    padding: 5% 0 20%;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
 }
#wrap .kiwi {
    font-family: 'Kiwi Maru', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
/* 結果の方 */
#wrapper .kiwi {
    font-family: 'Kiwi Maru', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}


#wrap .sec_cover {
    margin: auto;
}
 
#wrap .introduction {
    position: relative;
    background-image: url(../img/diagnose/bg_circle.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    padding: 8% 0;
    text-align: center;
    box-sizing: border-box;
    min-width: 100%;
    min-height: auto;
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    align-items: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
 #wrap .main_visual {
    margin: 0 auto 10px ;
}
 #wrap .mh_logo {
    padding: 0 5%;
 }
 #wrap .start_bt { width: 100%;}
 #wrap .start_bt a {
    width: 75%;
    max-width: 30rem;
    display: inline-block;
    margin: 0 auto;
    padding: 20px 0;
    background: url(../img/diagnose/arrow.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center bottom 6px;
    background-color: #2f2f2f;
    color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    }
#wrap .txt_min {
    width: 100%;
    font-weight: bold;
    margin-top: 15px;
}
#wrap .question .questions {
    text-align: center;
    position: relative;
    width: fit-content;
    margin: 0 auto 20px;
}

#wrap .question .questions::after,#wrap .question .questions::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 50px;
    top: 50%;

}
#wrap .question .questions::after {
    left: -60px;
    background: linear-gradient(270deg, #626262, transparent);
}
#wrap .question .questions::before {
    right: -60px;
    background: linear-gradient(90deg, #626262, transparent);
}

#wrap .question img {
    width: 60%;
    max-width: 200px;
    margin: 0px auto 5px;
    display: block;
}
 #wrap ul {
     padding: 20px;
     margin: 0 auto;
     box-sizing: border-box;
    max-width: 600px;
    }
#wrap ul li {
     padding-top: 70px;
     list-style: none;
 }
#wrap ul li:first-child {
     padding-top: 20px;
}
#wrap ul li p {
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1.2px;
}
#wrap ul li:last-child {
     margin-bottom: 0;
 }
#wrap ul li span {
     color: #fff;
     font-size: 16px;
     display: block;
     padding: 15px 10px;
     box-sizing: border-box;
     border-radius: 3px;
     background-color: #a79986;
     height: 100%;
    line-height: 19px;
}
#wrap button {
     background: #5c90d2;
     background: linear-gradient(30deg, #3f75ba, #65a0ea);
     width: 250px;
     display: block;
     margin: 50px auto 0px;
     text-align: center;
     padding: 15px 10px;
     font-size: 18px;
     font-weight: bold;
     box-shadow: none;
     color: #fff;
     border: none;
     box-sizing: border-box;
     border-radius: 5px;
     cursor: pointer;
 }
#wrap .result {
     padding: 20px;
     border: 3px solid #f1f1f1;
     box-sizing: border-box;
     margin: 0 auto;
     display: none;
 }
#wrap .result h2 {
     text-align: center;
     font-size: 18px;
     margin-bottom: 15px;
 }
#wrap .result h2 strong {
     font-size: 24px;
 }
#wrap .answer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px auto 0;
}
#wrap .answer label {
    width:48%;
    margin-bottom: 10px;
}
#wrap input {
    display: none;
}
#wrap input:checked + span {
    background-color: #e18095;
}

@media print, (min-width: 768px) {
#wrap {
    padding-top: 4%;
    width: 1080px;
}
#wrap .introduction {
    background-size: 63%;
    background-position: top;
    padding: 0% 0 10%;
}
#wrap .main_visual img {
    max-width: 55%;
}
#wrap .main_visual {
    margin: 0 auto 25px;
}
#wrap .mh_logo img {
    max-width: 90%;
    margin: 50px auto 2px;
}
}


/* diagnose_result */
#wrapper {
    padding: 20px 0 60px;
    color: #4b3f39;
    background-image: url(../img/diagnose/wrapper_bk.gif);
/*
    font-size: 16px;
    line-height: 22px;
*/
}


#wrapper .yr_ty {
    text-align: center;
    margin: 0 auto 10px;
    font-size: 21px;
    line-height: 32px;
}
#wrapper .yr_ty .godname {
    font-size: 32px;
}
#wrapper .yr_ty .name_line {    position: relative;    z-index: 0;    }
#wrapper.result_type01 .yr_ty .name_line::after { background-color: #f9eea7;}
#wrapper.result_type02 .yr_ty .name_line::after { background-color: #d8dbf1;}
#wrapper.result_type03 .yr_ty .name_line::after { background-color: #f7dfec;}
#wrapper.result_type04 .yr_ty .name_line::after { background-color: #d7ecf5;}
#wrapper.result_type05 .yr_ty .name_line::after { background-color: #d7e1f3;}
#wrapper.result_type06 .yr_ty .name_line::after { background-color: #efc6d4;}
#wrapper.result_type07 .yr_ty .name_line::after { background-color: #d1cbda;}
#wrapper.result_type08 .yr_ty .name_line::after { background-color: #f8e2c8;}

#wrapper .yr_ty .name_line::after {
    position: absolute;
    content: '';
    width: 0;
    height: 10px;
    left: 0;
    bottom: 0;
    z-index: -1;
}

#wrapper .relative {    position: relative; }

#wrapper .result_text {
    width: 90%;
    margin: 10px auto 30px;
}
#wrapper .result_text p {
    letter-spacing: 1.2px;
}

#wrapper .result_list {
/*  background-color: #efefef; */
    margin: 45px auto 45px;
    position: relative;
    z-index: 0;

}
#wrapper .result_list ul {
    width: 90%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-top: 20px;
}
#wrapper .result_list ul li {
    width: 25%;
    margin: 0px auto 15px;
    font-weight: bold;
    text-align: center;
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center 0;
}
#wrapper .result_list ul li a {
    display: block;
    padding: 100px 0 0 0;
    font-size: 14px;
    position: relative;
}
#wrapper .result_list ul li span {
    display: block;
    padding: 100px 0 0 0;
    font-size: 14px;
    position: relative;
}
#wrapper .result_list ul li a::after {
    content: '';
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: #eae6da;
    top: 0;
    z-index: -1;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0%);
    border-radius: 50%;
}

#wrapper .result_list li.type01 { background-image: url(../img/diagnose/result_type_min01.png);}
#wrapper .result_list li.type02 { background-image: url(../img/diagnose/result_type_min02.png);}
#wrapper .result_list li.type03 { background-image: url(../img/diagnose/result_type_min03.png);}
#wrapper .result_list li.type04 { background-image: url(../img/diagnose/result_type_min04.png);}
#wrapper .result_list li.type05 { background-image: url(../img/diagnose/result_type_min05.png);}
#wrapper .result_list li.type06 { background-image: url(../img/diagnose/result_type_min06.png);}
#wrapper .result_list li.type07 { background-image: url(../img/diagnose/result_type_min07.png);}
#wrapper .result_list li.type08 { background-image: url(../img/diagnose/result_type_min08.png);}


#wrapper .share_btn {
    border: 1px solid #333;
    margin: 0 auto;
    width: 88%;
    border-radius: 4px;
    padding-bottom: 20px;
}
#wrapper .share_btn a {
    display: block;
    margin: 0 auto 10px;
    width: 65%;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 18px 0;
    font-weight: bold;
}
#wrapper .share_btn p {
    text-align: center;
    font-weight: bold;
    width: fit-content;
    margin: -11px auto 25px;
    background-color: #fffdfa;
    padding: 0 5px;
}

#wrapper .result_mem {
    background-color: #ebe6d8;
    /* background-color: #f7f5ea; */
    padding: 35px 0 40px;
}

#wrapper .point { margin:0;}
#wrapper .memo_title {
    position: relative;
    font-size: 20px;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}
#wrapper .memo_title::before, #wrapper .memo_title::after {
    content: '';
    height: 16px;
    width: 22px;
    position: absolute;
    top: 50%;
    background-size: contain;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(-50%, 0);
    transform: translate(0, -50%);
    background-repeat: no-repeat;
}
#wrapper .memo_title::before { background-image: url(https://feel-i.jp/tmpl_smart_phone/img/diagnose/bk_star_left.png);    left: -43px;}
#wrapper .memo_title::after { background-image: url(https://feel-i.jp/tmpl_smart_phone/img/diagnose/bk_star_right.png);    right: -41px;}

#wrapper .point ul {
    width: 80%;
    margin: 10px auto 30px;
    text-align: center;
}
#wrapper .point ul li {
    margin-bottom: 3px;    
}

#wrapper .episode p {
    width: 80%;
    margin: 10px auto 0px;
}
#wrapper .btns {
    text-align: center;
    margin: 50px auto 0;
}
#wrapper .btns .to_mnhr_top {
    font-size: 14px;
    text-decoration: underline;
}

/* 相性など */
#wrapper .result_com {
    background-color: #fff;
    background-image: radial-gradient(closest-side, transparent 98%, #faf8f2 100%), radial-gradient(closest-side, transparent 98%, #faf8f2 100%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    padding: 30px 0;
}
#wrapper .match_type {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    z-index: 0;
    position: relative;
    margin: 20px auto 30px;
    background-image: url(../img/diagnose/icon_cross.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
}
#wrapper .match_type div { width: 40%;    position: relative;}
#wrapper .match_type img { width: 80%; display: block; margin: 0 auto;}
#wrapper .match_type .comp_img::after {
    content: '';
    position: absolute;
    height: 190px;
    width: 190px;
    background-color: #e9e9e9;
    background: linear-gradient(0deg, #dcc5c8, transparent);
    top: 0;
    z-index: -1;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0%);
    border-radius: 50%;
}
#wrapper .match_type .match_bg01::after {    background: linear-gradient(0deg, #f2d5b5, transparent);}
#wrapper .match_type .match_bg02::after {    background: linear-gradient(0deg, #d4d5f2, transparent);}
#wrapper .match_type .match_bg03::after {    background: linear-gradient(0deg, #efd4e1, transparent);}
#wrapper .match_type .match_bg04::after {    background: linear-gradient(0deg, #cef4f4, transparent);}
#wrapper .match_type .match_bg05::after {    background: linear-gradient(0deg, #bfcee7, transparent);}
#wrapper .match_type .match_bg06::after {    background: linear-gradient(0deg, #f4c8d6, transparent);}
#wrapper .match_type .match_bg07::after {    background: linear-gradient(0deg, #c4c3c6, transparent);}
#wrapper .match_type .match_bg08::after {    background: linear-gradient(0deg, #ffd8ad, transparent);}

#wrapper .comp_img span {
    margin: -15px auto 0;
    display: block;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
/*    background: linear-gradient(0deg, #ffebf2 40%, transparent 40%); */
    width: fit-content;
    line-height: 130%;
}
#wrapper .result_com p {
    width: 90%;
    margin: 0px auto;
}

/* イントロ */
#wrap .intro_txt {
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 600px;
}
#wrap .intro_txt p {
    letter-spacing: 1.2px;
    line-height: 20px;
    font-size: 14px;
    color: #4e4e4e;
}


@media only screen and (max-width: 767px) {
#wrapper .result_head .result_img {
    width: 65%;
    margin: 0 auto;
}
#wrapper .result_head .result_img img {
    width: 100%;
}
#wrapper .relative.result_tendency {
    margin-top: 15px;
}
#wrapper .type_tendency .type_name {
    text-align: center;
}
#wrapper .type_tendency .type_name span {    font-size: 22px; }

/* その他の結果 */
#wrapper .result_list ul li {
    width: 48%;
    margin: 0px auto 20px;
}
#wrapper .result_list ul li a {    padding: 108px 0 0 0;}
#wrapper .result_list ul li span {    padding: 108px 0 0 0;}

#wrapper .result_list ul li a::after {
    height: 105px;
    width: 105px;
}
/* 相性など */
#wrapper .match_type {    background-size: 25px;    margin: 20px auto 20px;}
#wrapper .comp_img span {
    font-size: 19px;
    letter-spacing: -1px;
}
#wrapper .match_type .comp_img::after {
    height: 85%;
    width: 85%;
}

}


@media print, (min-width: 768px) {
#wrapper {
    width: 600px;
    margin: 0 auto;
}
#wrapper .type_tendency .type_name span { font-size: 15px;}
#wrapper .type_tendency .type_name h2 { 
    font-size: 37px;
    font-weight: bold;
    line-height: 50px;
    margin-bottom: 20px;
}
#wrapper .type_tendency ul li {
    font-size: 15px;
    margin-bottom: 11px;
    line-height: 14px;
}

#wrapper .result_list ul {
    width: 100%;
    padding: 15px 0;
}


/* 結果のトップ表示 */
#wrapper .relative.result_img { width: 52%; text-align: center;}
#wrapper .relative.result_tendency {
    width: 46%;
    }
#wrapper .result_head img { width: 90%; }
#wrapper .type_tendency {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    }
#wrapper .result_head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 95%;
    margin: 0 auto ;
    padding: 20px;
    position: relative;
    box-shadow: 0 2px 3px #e0e0e0;
    border-radius: 10px;
}
#wrapper .type_tendency .type_name span {
    font-size: 20px;
    font-weight: bold;
}
#wrapper .type_tendency .type_name h2 {
    font-size: 47px;
    font-weight: bold;
}
#wrapper .type_tendency ul li {
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 13px;
}

#wrapper.result_type01 .result_head { border: 3px solid #cdb59a; }
#wrapper.result_type02 .result_head { border: 3px solid #6f7496; }
#wrapper.result_type03 .result_head { border: 3px solid #dbb1c8; }
#wrapper.result_type04 .result_head { border: 3px solid #a6d4e8; }
#wrapper.result_type05 .result_head { border: 3px solid #63769b; }
#wrapper.result_type06 .result_head { border: 3px solid #de8ba8; }
#wrapper.result_type07 .result_head { border: 3px solid #545158; }
#wrapper.result_type08 .result_head { border: 3px solid #eaab62; }

#wrapper .point {
    display: none;
}
}

#wrapper .move .name_line::after {
    width: 100%;
    -webkit-transition: width 1.2s cubic-bezier(0.76, 0, 0.24, 1) 0.3s;
    transition: width 1.2s cubic-bezier(0.76, 0, 0.24, 1) 0.3s;
}