@charset "UTF-8";
body{
    font-family: sans-serif;
    color:#333;
}
img{
    width:100%;
}
ul{
    padding: 0;
}
h2{
    line-height: 1.5em;
}
h1,h2,h3,h4,h5{
    font-feature-settings: "palt";
    letter-spacing: 1px;
    font-family: 'じゅん 501';
    font-weight: 500;
}
h4{
    line-height: 1.4em;
    font-size:1.4em;
}
h5{
    font-size:1.3em;
}
h6{
    font-size:1.3em;
}


.container_short{
    padding: 0;
}

.kodomo_box{
    padding:40px 0;
    background:linear-gradient(to bottom,rgba(255,255,255,0.4), rgba(255,255,255,0.6) );
}
.kodomo_h4_title{
    text-align: justify;
}

@media (min-width: 1000px) {
    h4{
        line-height: 1.4em;
        font-size:1.7em;
    }
    .kodomo_h4_title{
        text-align: center;
    }
    h5{
        font-size:1.4em;
    }
    .container_short{
        padding: 0 100px !important;
    }
    .kodomo_box{
        padding:40px;
        background:linear-gradient(to bottom,rgba(255,255,255,0.4), rgba(255,255,255,0.6) );
    }
}





.text_justify{
    text-align: justify;
}
.navbar-brand img{
    width:180px;
}
#mainNav.navbar-shrink{
    background-color: #ffe45f;
}
#mainNav.navbar-shrink .navbar-brand img{
    width:150px;
}
#mainNav .navbar-nav .nav-item .nav-link{
    color:#000;
    font-size: 1em;
}
a.nav-link:hover{
    color:#f4623a !important;
}

.btn-xl{
    font-size: 1em;
}
.bg-gray{
    background: linear-gradient(to right, #fcfcfc, #f0f0f0);
}
.bg_white_border{
    background-color: rgba(255,255,255,0.6);
}
header.masthead {
    padding-top: 8rem;
    padding-bottom: calc(10rem - 4.5rem);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%), url("../assets/img/23518109_l.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}
header.masthead img{
    width:100% !important;
}

.midashi_border{
    border-top: 1px solid rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(0,0,0,0.3);
    padding: 20px 0;
}


.mar_short{
    height:10px;
}
.mar_middle{
    height:40px;
}
.mar_large{
    height:80px;
}



.sp_displaynone{
    display: none;
}


#usage img{
    width:80%;
}
@media (min-width: 1000px) {
    #usage img{
        width:100%;
    }
    header.masthead img{
        width:600px !important;
    }

    .pc_displaynone{
        display: none;
    }
    .tablet_displaynone{
        display: none;
    }
    .sp_displaynone{
         display: block;
     }
}

@media (min-width: 1200px) {
    .system_block{
        padding: 0 280px;
    }
    .tablet_displaynone{
        display: block;
    }
}


.info_list ul li{
    display: block;
    width:100%;
    border-bottom: 1px solid #000;
    padding: 10px 0;
}
.info_list ul li span{
    display: block;
    text-align: left;
}
.info_list ul li span.date{
   width:100%;
}



.top_message{
    line-height: 1.6em;
    text-align: justify;
}


@media (min-width: 1000px) {
    .system_block{
        padding: 0 15%;
    }
    .top_message{
         text-align: center;
     }
    .info_list ul li{
        display: table;
        width:100%;
        border-collapse: collapse;
        border-bottom: 1px solid #000;
    }
    .info_list ul li span{
        display: table-cell;
        text-align: left;
        padding:10px 0;
    }

    .info_list ul li span.date{
        width:100px;
    }

}






.lightbox-container ul li{
    display: inline-block;
    list-style-type: none;
    vertical-align: top;
    width:50%;
    float:left;
    padding:10px;
}
.lightbox-container ul li img{
    object-fit: cover;
    width:100%;
    height:100px;
}
.screenshot_title{
    text-align: center;
    margin-top: 10px;
}

.screenshot_box{
    margin-top: 40px;
}
.page-section {
    padding: 4rem 0;
}

.btn_block ul li{
    list-style-type: none;
    float:left;
    width:50%;
    padding:10px;
}
.main_btn a{
    display: block;
    position: relative;
    width:100%;
    color:#fff;
    margin: 0 auto;
    text-align: center;
    padding:20px 0;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 1.1em;
}
.main_btn a img{
    width:12px !important;
    padding-left: 5px;
}

.green_btn a{
    background-color: #77ad31;
}
.pink_btn a{
    background-color: #c76180;
}
.green_btn a:hover{
background-color: #5c960f;
}
.pink_btn a:hover{
    background-color: #b24263;
}




.btn{
    padding: 15px 30px;
    margin-bottom: 5px;
}



.toiawase_message{
    text-align: justify;
}

@media (min-width: 1000px) {
    .toiawase_message{
        text-align: center;
    }


    .main_btn a{
        display: block;
        width:600px !important;
    }
    .page-section {
        padding: 8rem 0;
    }
    .screenshot_box{
        border: 1px solid rgba(0,0,0,0.7);
        border-radius: 10px;
        padding: 40px;
        box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
        margin: 0;
    }
    .lightbox-container ul li img{
        height:200px;
    }
}


@media (min-width: 1200px) {
    .lightbox-container ul li{
    width:25%;
    float:left;
}
}


.form_left{
    background-color: #fafafa;
}
.form_left, .form_right{
    padding: 10px 0;
}
textarea,input, select{
    width:100%;
}
@media (min-width: 1000px) {

    .formTable{
        display: table;
        width:100%;
        border-collapse: collapse;
    }
    .formTable_tr{
        display: table-row;
    }
    .form_left{
        display: table-cell;
        width:200px;
        vertical-align: middle;
        padding: 10px;
    }
    .form_right{
        display: table-cell;
        vertical-align: middle;
        padding: 10px;
    }
    .hissu{
        color:#ff0000;
        font-size: 0.8em;
    }
}




@media (min-width: 1000px) {
    .kanri_all_img{
        padding:0 15% 40px;
    }
}