@charset "utf-8";
/* CSS Document */

/* ========== kye-visual ========== */
#key-visual { border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; padding: 0; }

#key-visual header h1 { margin: 0; }

#key-visual h1 img {
	margin: 0 auto;
	width: 100%;
}

/* comoon add */
.orgin_clm .c-ground-01 {
    margin-top: 0px;
    border-top: 0px solid #fff;
    border-bottom: 0px solid #fff;
}

/* other */
#flg-about {
    margin-top: 1.5em;
    border-top: 1px solid #d4d4d4;
}

#flg-use {
    border-bottom: 1px solid #d4d4d4;
}

#flg-able {
    padding-top: 40px;
}

/* ========== heading ========== */

/* color */
#flg-charm { background-color: #e5f7f5; }
#flg-able > .c-ground-01.bgcr {
    background-color: #f9f8d3;
    border: none;
    box-shadow: none;
    padding: 30px 44px 30px 44px;
}

@media only screen and (max-width: 640px) {
    #flg-able > .c-ground-01.bgcr {
        padding: 20px 10px 10px 10px;
    }
}

/* ========== toc ========== */
.guidance-toc-01 {
	margin: .625em 0 0;
	padding: 0;
	letter-spacing: -.40em;
}

.guidance-toc-01 li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.guidance-toc-01 li a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

/* ----- for pc ----- */
.guidance-toc-01 {
	margin-top: 1.25em;
	margin-bottom: -.75em;
}
.guidance-toc-01 li {
	display: inline-block;
	margin-left: 1.97682344921609%;
	width: 23.51738241308793%;
	letter-spacing: normal;
}
.guidance-toc-01.pc > li:first-child { margin-left: 0; }

/* ----- for sp ----- */
.guidance-toc-01.sp img { width: 100%; }


/* ========== menu ========== */
.guidance-menu-01 > li { margin-top: 15px; }

@media only screen and (max-width: 640px) {
    .guidance-toc-01 {
    text-align: center;
    }
    .guidance-toc-01 li {
	width:48%;
    margin-left: 0px;
	letter-spacing: -0.4em;
    }
    .guidance-toc-01 li:nth-of-type(1),.guidance-toc-01 li:nth-of-type(3){
    margin-right: 2%;
    }

}

@media only screen and (min-width: 641px)  {
    .pc-hide{
        display: none;
    }

    .debit-charm-wrap{
        width: 80%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 640px)  {
    .sp-hide{
        display: none;
    }

    .debit-charm-wrap{
        width: 95%;
        margin: 0 auto;
    }
}


@media only screen and (max-width: 640px)  {
    .container_icon {
    left: 18%;
    }
}



.content-cash{
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-radius: 15px;
    padding: 15px;
    margin-top: 20px;
    align-items: center;
}

.content-cash .content-left{
    width: 25%;
    padding-right: 10px;
}

@media only screen and (min-width: 641px)  {
    .content-cash .content-left{
        width: 15%;
    } 
}

.content-cash .content-right{
    width: 70%;
}

@media only screen and (max-width: 640px)  {
    .content-cash p{
    text-align: center;
    }
}

.debit-02{
    display: flex;
    justify-content: center;
    align-items: end;
}

.debit-02 .debit-02-icon{
    margin: 0;
    margin-right: 5px;
}


@media only screen and (max-width: 640px)  {
    .icon-size{
        height: 45px;
    }
    .icon-size_02{
        height: 50px;
    }
}

/* ========== ttl ========== */

@media only screen and (max-width: 640px)  {
    .debit-ttl{
    font-size: 40px;
    }
    .debit-ttl span{
    font-size: 18px;
    vertical-align: middle;
    }

}

@media only screen and (min-width: 641px)  {
    .debit-ttl{
    font-size: 50px;
    }

    .debit-ttl span{
    font-size: 25px;
    vertical-align: middle;
    }
}

.debit-ttl-01{
    color: #37CEB7;
}

.debit-ttl-02{
    color: #26ACC0;
}

.debit-ttl-03{
    color: #1A90CD;
}

@media only screen and (max-width: 640px)  {
    .debit-ttl-03{
        color: #1A90CD;
        line-height: 0.8;
}
}


.debit-ttl-04{
    color: #516CDE;
}

.debit-ttl-block{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 640px)  {
    .debit-ttl-img{
        margin-left: 5px;
    }
    .debit-ttl-img img{
        width: 80%;
    }
}
@media only screen and (min-width: 641px)  {
    .debit-ttl-img{
        margin-left: 25px;
    }
}
.debit-04{
display: flex;
align-items: center;
}

.debit-04-left{
width: 70%;
}

.debit-04-right{
width: 30%;
margin-left: 10px;
}

@media only screen and (max-width: 640px) {
    .c-column-group .col-unit-1\/3 {
        float: left;
    }
}