@font-face {
    font-family: "Rounded M+ 1p";
    src: url("../font/rounded-mplus-1p-regular.ttf") format("truetype");
}

.top_box .banner{
    width:250px;
    padding-bottom: 2rem;
    margin: 0 auto;
}
.top_box .content_img {
    width: auto;
    min-width: 503px;
    height: auto;
    min-height: 503px;
    padding: 15px;
    border: solid 1px #ccc;
    display: flex;
    position: relative;
}
.top_box .content_img .content {
    margin: auto;
}

/** 袋麺 */
.top_box .content_img.img_ramen .content_img_svg {
    width:332px;
}
.top_box .content_img.img_ramen #content_thumbnail {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 118px;
    width:113px;
    height: 113px;
    object-fit: contain;
}
.top_box .content_img.img_ramen #content_text {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 271px;
    width:275px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
}

/** カレー */
.top_box .content_img.img_curry .content_img_svg {
    width:332px;
}
.top_box .content_img.img_curry #content_thumbnail {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 108px;
    width:119px;
    height: 119px;
    object-fit: contain;
}
.top_box .content_img.img_curry #content_text {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 271px;
    width:275px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
}

/** マヨおかき */
.top_box .content_img.img_mayo-okaki .content_img_svg {
    width:332px;
}
.top_box .content_img.img_mayo-okaki #content_thumbnail {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 88px;
    width:115px;
    height: 115px;
    object-fit: contain;
}
.top_box .content_img.img_mayo-okaki #content_text {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 244px;
    width:275px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
}

/** アートおかき */
.top_box .content_img.img_art-okaki .content_img_svg {
    width:332px;
}
.top_box .content_img.img_art-okaki #content_thumbnail {
    position: absolute;
    right: -76px;
    left: 0;
    margin: auto;
    top: 217px;
    width:69px;
    height: 69px;
    object-fit: contain;
}
.top_box .content_img.img_art-okaki #content_text {
    position: absolute;
    right: -26%;
    left: 0;
    margin: auto;
    top: 183px;
    width:275px;
    font-size: 14px;
    font-weight: 700;
}

/** コーンスナック */
.top_box .content_img.img_corn-snack .content_img_svg {
    width:130px;
}
.top_box .content_img.img_corn-snack #content_thumbnail {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 90px;
    width:71px;
    height: 71px;
    object-fit: contain;
}
.top_box .content_img.img_corn-snack #content_text {
    position: absolute;
    right: 0%;
    left: 0;
    margin: auto;
    top: 183px;
    width:52px;
    height:240px;
    font-size: 24px;
    font-weight: 900;
}

.top_box .content_img #content_text.notosans {
    font-family: 'Noto Sans JP',sans-serif;
}
.top_box .content_img #content_text.mincho {
    font-family: 'Noto Serif JP', serif;
}
.top_box .content_img #content_text.rounded {
    font-family: 'Rounded M+ 1p';
    src: url("../font/rounded-mplus-1p-regular.ttf") format("truetype");
}

.right .bg.bg_white {
    background: #FFFFFF;
}
.right .bg.bg_black {
    background: #090507;
}
.right .bg.bg_yellow {
    background: #F5FF00;
}
.right .bg.bg_orange {
    background: #FF7F00;
}
.right .bg.bg_red {
    background: #FF0000;
}
.right .bg.bg_pink {
    background: #F8ACCC;
}
.right .bg.bg_purple {
    background: #5A40BF;
}
.right .bg.bg_blue {
    background: #0C6AD1;
}
.right .bg.bg_lime {
    background: #8BE21A;
}
.right .bg.bg_brown {
    background: #6C3A26;
}
.right .bg.bg_pink2 {
    background: #FF0076;
}
.right .bg.bg_navy {
    background: #020E9B;
}
.right .bg.bg_green {
    background: #007209;
}
.right .bg.bg_blue2 {
    background: #02D8FF;
}
.right .bg.bg_green2 {
    background: #0094A0;
}
.right .bg.bg_red2 {
    background: #FA00B7;
}
.right .bg.bg_gray {
    background: #E1E1E1;
}
.right .bg.bg_brown2 {
    background: #BF8045;
}
.right .table_title {
    padding-bottom: 1.5rem;
}
.right .table_title .color-red{
    color:red;
}

.right .bgitem small{
    width: 44px;
}
.right .bglist{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}
.right div{
    font-weight: 700;
}
.right .bglist .bg{
    cursor: pointer;
    display: block;
    margin-bottom: 3px;
    width: 44px;
    height: 44px;
    border: solid 1px #ccc;
}
.form-group{
    padding-bottom:1.5rem;
}

.form-group select{
    min-width: 100%;
}
.form-group input[type="file"]::file-selector-button {
    padding: 0.7em 1em;
    border: solid 1px #ccc;
    background: #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.6rem;
    font-weight: 700;
}
.text02_group{
    padding: 0.2em 0 0.2em 2em;
}
.text02_group.active{
    display:block;
}
.text02_group.hidden{
    display:none;
}

.submit_btn .input_btn {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    min-width: 221px;
}
.reset_btn{
    margin-right: 2rem;
}
.reset_input_btn{
    line-height: 20px;
}
.reset_btn .reset_input_btn {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    margin-top: 66.4px;
    min-width: 153px;
    height:38px;
    background-color:#7C7B7B;
    font-size:16px;
    border-radius: 0px;
}
.btn_group{
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: hidden;
}
.bg_btn.red a{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    width: 440px;
    height: 100px;
    font-size: 22px;
    line-height: 50px;
}
.select_file{
    width: 153px;
    height: 38px;
}
.select_file label p {
    border: solid 1px #ccc;
    width: 153px;
    height: 38px;
    display: flex;
    justify-content: center;
    line-height: 34px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

#content_text svg {
    text-orientation: upright;
}

@media (max-width: 900px){
    .top_box .content_img {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 343px;
        height: 100%;
        max-height: 343px;
        min-width: 0px;
        min-height: 0px;
        margin: auto;
    }
    .top_box .content_img.img_curry .content_img_svg {
        width: 219.63px;
        height: 288.26px;
    }
    .top_box .content_img.img_curry #content_thumbnail {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        top: 70px;
        width: 81.15px;
        height: 81.15px;
        object-fit: contain;
    }
    .top_box .content_img.img_curry #content_text {
        top: 180px;
        width: 187px;
        height: 57px;
        font-size: 17px;
    }
    .top_box .content_img.img_corn-snack .content_img_svg {
        width: 219.63px;
        height: 288.26px;
    }
    .top_box .content_img.img_corn-snack #content_thumbnail {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        top: 60px;
        width: 49.15px;
        height: 53.83px;
        object-fit: contain;
    }
    .top_box .content_img.img_corn-snack #content_text {
        top: 130px;
        width: 40px;
        height: 57px;
        font-size: 14px;
    }
    .top_box .content_img.img_ramen .content_img_svg {
        width: 219.63px;
        height: 288.26px;
    }
    .top_box .content_img.img_ramen #content_thumbnail {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        top: 80px;
        width: 113px;
        object-fit: contain;
        width: 81.15px;
        height: 81.15px;
    }
    
    .top_box .content_img.img_ramen #content_text {
        top: 180px;
        width: 187px;
        height: 57px;
        font-size: 17px;
    }
    .top_box .content_img.img_art-okaki .content_img_svg {
        width: 219.63px;
        height: 288.26px;
    }
    .top_box .content_img.img_art-okaki #content_thumbnail {
        position: absolute;
        right: -45px;
        left: 0;
        margin: auto;
        top: 135px;
        width: 56px;
        height: 56px;
        object-fit: contain;
    }
    .top_box .content_img.img_art-okaki #content_text {
        position: absolute;
        right: -47%;
        left: 0;
        margin: auto;
        top: 117px;
        width: 260px;
        font-size: 9px;
        font-weight: 700;
        left: 6px;
    }
    .top_box .content_img.img_mayo-okaki .content_img_svg {
        width: 219.63px;
        height: 288.26px;
    }
    .top_box .content_img.img_mayo-okaki #content_thumbnail {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        top: 63px;
        width: 81.85px;
        height: 81.85px;
        object-fit: contain;
    }
    .top_box .content_img.img_mayo-okaki #content_text {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        top: 158px;
        width: 187px;
        height: 57px;
        font-size: 17px;
        font-weight: 700;
        text-align: center;
    }
    .estimate_block .top_box .right {
        width: 100%;
    }
    .estimate_block .top_box {
        display: block;
    }
    .right .bgitem small {
        font-size: 9.79px;
    }
    .right .bglist .bg {
        text-align: center;
        width: 43.06px;
        height: 43.06px;
    }
    .right .bgitem {
        width: calc(100%/6);
        max-width: 50px;
    }
    .btn_group {
        flex-direction: column-reverse;
    }
    .reset_btn {
        margin: auto;
    }
    .reset_btn .reset_input_btn {
        margin: auto;
    }
    .submit_btn {
        margin: 30px;
        height: 70px;
        display: flex;
        justify-content: center;
    }
    .submit_btn .input_btn {
        width: 60%;
        font-size: 18px;
    }
    .reset_btn {
        height: 40px;
        width: 200px;
        display: flex;
        justify-content: center;

    }
    .reset_btn .reset_input_btn {
        height: 38px;
        width: 153px;
    }
    .main_page .box_block {
        margin-bottom: 50px;
        min-width: 300px;
    }
    .bg_btn.red a {
        width: 292px;
        height: 67px;
        font-size: 18px;
        line-height: 33.5px;
    }
}

/* カラーボックス選択時枠線をつける */
.selected {
    border: solid 5px #CCCCCC !important;
}

/* SPレイアウトの時 */
@media (min-width: 901px) {
    .main_page .box_block {
        min-width: 901px;
    }
    .estimate_block .top_box .right {
        width: calc(100% - 503px);
        margin-left: 38px;
    }
    .right .bgitem{
        width:61px ;
        padding-bottom:1.5rem;
    }
}

/** safariの時　**/
@supports (-webkit-hyphens: none) and (not (-ms-ime-align: auto)) {
    .top_box .content_img.img_corn-snack #content_text.notosans {
        font-size: 18px;
    }

    .top_box .content_img.img_corn-snack #content_text.rounded {
        font-size: 18px;
    }
    
    .top_box .content_img.img_art-okaki #content_text.notosans {
        font-size: 10px;
    }

    .top_box .content_img.img_art-okaki #content_text.rounded {
        font-size: 10px;
    }
    
    @media (max-width: 900px) {
        .top_box .content_img.img_corn-snack #content_text.notosans {
            font-size: 11px;
        }
    
        .top_box .content_img.img_corn-snack #content_text.rounded {
            font-size: 11px;
        }

        .top_box .content_img.img_art-okaki #content_text.notosans {
            font-size: 6px;
            left: -5px;
        }
    
        .top_box .content_img.img_art-okaki #content_text.rounded {
            font-size: 6px;
            left: -5px;
        }
    }
}