﻿/* =============================================================
serina
============================================================= */

body{color: #333;}

a{color: #cc2938;}
a:hover{color: #ff9ea7;}

.fCChange{color: #dd5561;}
.fCSubChange{color: #cca429;}

.benefits .number::before{background-color: #f7eed3;}

.flowLst > li::after{border-left-color: #dd5561;}

.flowLst .num{background-color: #dd5561;}

.flowLst .txtArea .ttl{
    color: #dd5561;
}

.faqArea dl{border-color: #dd5561;}

.faqArea dt::before,
.faqArea dd::before{background-color: #dd5561;}

.faqArea dt a{color: #333;}

.faqArea dt a::before,
.faqArea dt a::after{background-color: #dd5561;}

.cmnTtl_1 > span{
    background-color: #dd5561;
    color: #fff;
}

.cmnTtl_2::after{background-color: #cc2938;}
.cmnTtl_3::before{background-color: #cc2938;}

.cmnBtn_1{color: #cc2938;}
.cmnBtn_1::after{border-left-color: #cc2938;}
.cmnBtn_1:hover::after{border-left-color: #ff9ea7;}

.cmnBtn_2 > a{
    background-color: #ffd7db;
    color: #333;
}
.cmnBtn_2 > a:hover{color: #333;}
.cmnBtn_2 > a::after{border-left-color: #333;}

.cmnTbl th,
.cmnTbl td{border-color:#dd5561;}
.cmnTbl th{background-color:#dd5561;}
.cmnTbl tr:last-child th{border-bottom-color: #dd5561!important;}

@media only screen and (max-width:640px){
    .cmnTbl.row tr:last-child td{border-bottom-color: #dd5561;}
    .cmnTbl th{border-bottom: 0!important;}
}

.fSize18sp16{font-size:18px !important;}

@media only screen and (max-width:640px){
    .fSize18sp16{font-size:16px !important;}
    .cmnTtl_1 > span{width: 100%;}
}

/* style
------------------------------------------------------- */
.benefits .photodate{
	width: 200px;
	transform: rotate(5deg);
}

.benefits .hpImg{
	width: 800px;
}

.partClmLst{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.partClmLst li{
    width: 180px;
    margin: 12px 0 0 12px;
}

.partClmLst li:nth-child(4n-3){margin-left: 0;}

.partClmLst li img{width: 100%;}

@media only screen and (max-width:640px){
	.benefits .hpImg{width: 100%;}

    .partClmLst li{
        width: calc(50% - 4px);
        margin: 8px 0 0 8px;
    }

    .partClmLst li:nth-child(4n-3){margin-left: 8px;}
    .partClmLst li:nth-child(2n-1){margin-left: 0;}
}


/* EOF */