@charset "utf-8";
/* CSS Document */
.wrapper{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 5%;
}
.pc{
    display: block;
}
.sp{
    display: none;
}
.lead{
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    margin: 8% auto;
}
.box{
    width: 90%;
    margin: 0 auto 10%;
}
.ttl{
    display: block;
    width: 40%;
    margin: 0 auto 3%;
}
.wi50{
    width: 50%;
    margin: 0 auto;
}
.kaset{
    padding: 0;
    overflow: hidden;
    background-color: #F5F4ED;
    box-sizing: border-box;
    padding: 5%;
}
.kaset li{
    position: relative;
    list-style: none;
    width: 25%;
    float: left;
    box-sizing: border-box;
    padding: 1%;
}
.abcd{
    position: absolute;
    display: block;
    width: 13%;
    top: 0;
    left: 0;
}
.kaset li p{
    font-size: 11px;
    line-height: 1.5;
    margin: 3% auto 0;
}
.cl1{
    background-color: #111111;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: solid 1px #c8c8c8;
    border-radius: 50%;
    margin: 3% 1%;
}
.cl2{
    background-color: #d9cfc3;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: solid 1px #c8c8c8;
    border-radius: 50%;
    margin: 3% 1%;
}
.cl3{
    background-color: #b1c1be;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: solid 1px #c8c8c8;
    border-radius: 50%;
    margin: 3% 1%;
}
.cl4{
    background-color: #2d3037;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: solid 1px #c8c8c8;
    border-radius: 50%;
    margin: 3% 1%;
}
.cl5{
    background-color: #d79c7e;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: solid 1px #c8c8c8;
    border-radius: 50%;
    margin: 3% 1%;
}
.clear{
    clear: both;
}
.kikonashi{
    width: 100%;
    margin: 0 auto 10%;
}
.kikonashi_ttl{
    display: block;
    width: 40%;
    margin: 0 auto;
}
.kikonashi p{
    text-align: center;
    font-size: 15px;
    line-height:1.6;
    margin: 2% auto;
}
.kikonashi_img{
    padding: 0;
    overflow: hidden;
}
.kikonashi_img li{
    list-style: none;
    width: 33.3%;
    float: left;
    box-sizing: border-box;
    padding: 1%;
}
.bg2{
    background-color: #f7f5f6;
}
.other_lead{
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    margin: 2% auto 8%;
}
.wi90{
    width: 80%;
    margin: 0 auto;
}
.m_top20{
    display: block;
    margin-top: 5%;
}
.btn{
    width: 70%;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
}
.btn a{
    display: block;
    background-color: #000;
    color: #fff;
    padding: 4% 0;
}
.br_s{
    display: none;
}
.under {
  background: linear-gradient(transparent 50%, #d1ecf3 50%);
}
.bold{
    font-weight: bold;
}
@media(max-width:750px){
.pc{
    display: none;
}
.sp{
    display: block;
}
.lead{
    width: 90%;
    font-size: 14px;
    margin: 10% auto;
}
.br_s{
    display: inline;
}
.box{
    width: 100%;
}
.ttl{
    width: 80%;
}
.wi50{
    width: 90%;
    margin: 0 auto;
}
.kaset li{
    width: 50%;
    padding: 2%;
    margin-bottom: 5%;
}
.abcd{
    width: 14%;
    top: 0%;
    left: 1%;
}
.kikonashi{
    margin: 0 auto 15%;
}
.kikonashi_ttl{
    width: 70%;
    margin: 0 auto;
}
.kikonashi p{
    font-size: 13px;
}
.kikonashi_img li{
    width: 50%;
    padding: 1%;
}
.kikonashi_img li:first-child{
    width: 100%;
    padding: 1%;
}
.other_lead{
    width: 90%;
    font-size: 13px;
}
.btn{
    width: 90%;
    font-size: 15px;
}
.clear_s{
    clear: both;
}
}