@charset "UTF-8";

.saving{
    width:94%;
    margin:30px auto;
}

.saving dl{
    list-style: none;
}

.saving h2{
    text-align: center;
}

.saving-main{
    width: 100%;
    text-align: left;
}

.saving-main h1{
    margin-bottom:10px;
    color: #F38300;
    text-align: center;
}

.saving-list-box{
    display: flex;
    margin:30px 0;
    padding:16px ;
    border: 1px solid #CCC;
}

.saving-list-box-img{
    width: 40%;
    height: auto;
}

.saving-list-box h3{
    margin:10px 0 0;
    font-size:18px;
}

.saving-list-box-text{
    width: 100%;
    margin:0 0 0 20px;
    color: dimgray;
}

.saving-list-box-text p{
    margin-bottom:0;
}

.continue{
    margin-top:10px;
    text-align: right;
    color: #F38300;
}

.saving-icon{
    display: inline;
    padding:5px;
    color: #FFF;
    font-size: 12px;
    border-radius:5px;
}

.saving-icon a{
    color: #FFF;
}

.saving-icon01{
    background: #6EDCFF;
}

.saving-icon02{
    background: #4CCD2B;
}

.saving-icon03{
    background:#F39800;
}

.saving-icon04{
    background:#FFCC00;
}

.saving-icon05{
    background:#E58DFF;
}

.text01{
    margin:20px 0;
}

/* 記事ページ */

.saving-main-article{
    width: 100%;
    text-align: left;
}

.saving-main-article h1{
    border-left:5px solid #F38300;
    padding:0 10px;
    color: grey;
}

.saving-main-article h2{
    font-size: 24px;
    color: grey;
    text-align: left;
    border-bottom:solid 1px #F38300;
}

.card-list h4{
    padding:10px;
    font-size: 20px;
    background: #F38300;
    color: #FFF;
}

.card-list-inner{
    padding:20px;
    margin-bottom:20px;
    border: solid 1px #CCC;
    text-align: center;
}

.info-img{
    width:50%;
    margin:0 auto;
}

.info-list dl{
    display: flex;
    flex-wrap: wrap;
    width:auto;
    font-size: 12px;
    border: solid 1px #CCC;
    text-align: left;
}

.info-list dt {
    width: 30%;
    padding:10px;
    border-bottom: solid 1px #CCC;
}

.info-list dd {
    width: 70%;
    margin:0 ;
    padding: 10px;
    border-bottom: solid 1px #CCC;
}

.info-list dt:last-of-type {
    border-bottom:none;
}
.info-list dd:last-of-type {
    border-bottom:none;
}

.point{
    width: 100%;
    margin:20px auto ;
}

.point h4{
    display: inline;
    padding:5px 10px;
    font-size:16px;
    font-weight: normal;
    border-radius:10px 10px 0 0;
    background: #4CCD2B;
    color: #FFF;
}

.point ul{
    padding:20px;
    border: solid 1px #4CCD2B;
    text-align: left;
}

.point ul li{
    list-style: disc;
    margin-left:12px;
}

.card-text{
    margin:20px 0;
}

.fare i{
    color:#6EDCFF;
}

.hospital i{
    color:#4CCD2B;
}

.life i{
    color:#F39800;    
}

.travel i{
    color:#FFCC00;    
}

.creca i{
    color:#E58DFF;    
}


.side{
    margin-left: auto;

}

.side-inner{
    border: solid 1px #CCC;
}

.side h4{
    padding:10px;
    font-size:18px;
    background: #F38300;
    color: #FFF;
    text-align: center;
}

.side dl{
    padding:0 20px 0;
}


@media (min-width: 768px) {
.saving-main, .saving-main-article{
    max-width: 870px;
	margin-right:1em;
    padding:0;
}

}

@media (min-width: 1280px) {
.saving{
        display: flex;
        max-width: 1200px;
    }


.saving-list-box h3{
    font-size:20px;
}

.saving-list-box{
    display: flex;
    margin:30px 0;
    padding:20px ;
}

.saving-list-box-img{
margin:0;
}

.info{
    display: flex;
    margin-bottom:20px;
}

.info-img{
    width: 300px;
    text-align: left;
    border: solid 1px #CCC;
}

.point{
    width: 58%;
    margin:20px auto ;
}

.info-list dl{
    width: 90%;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
}

.info-list dt{
    width:30% ;
}

.info-list dd{
    width:70%;
}


.point h4{
    padding:5px 10px;
    font-size:16px;


}

    .side-inner{
        width: 300px;
    }

    .side h4{
    font-size:20px;
}

}