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

	common

	01. forPC Layout

	02. forSP Layout

--------------------------------------------------------*/





/********************************************************************************

	01. forPC Layout

********************************************************************************/

.col-wrap {display: flex;}

.col-wrap-flex-start {align-items: flex-start;}

.col-12 {width: 100%;}

.col-9 {width: 75%;}

.col-7 {width: 54.33%;}

.col-6 {width: 50%;}

.col-5 {width: 45.66%;}

.col-3 {width: 25%;}

.box-bg {
  overflow: hidden;
	margin:0 0 40px;
	padding: 12px 18px 18px;
}

.borderLightblue {
    border: 1px solid #87c4d9;
    border-top: none;
}
.borderOrange {
    border: 1px solid #f7b479;
    border-top: none;
}
.borderYellow {
    border: 1px solid #efd24c;
    border-top: none;
}
.borderGreen {
    border: 1px solid #cbcc52;
    border-top: none;
}
.borderPink {
    border: 1px solid #f39caf;
    border-top: none;
}
.borderPurple {
    border: 1px solid #cd98d9;
    border-top: none;
}
.borderPeacocgreen {
    border: 1px solid #7bced4;
    border-top: none;
}

.bg_pattern {
    background: url(../img/common/ico_circle_play.svg) no-repeat;
    background-size: 60px 60px;
}
.bg_transparent {
    background: transparent;
}
.bgWhite {
  background: #fff;
}
.bgLightblue {
	background: #ecf7fa;
}
.bgBeige {
	background: #fffaf6;
}
.bgYellow {
	background: #efd24c;
}
.bgGreen {
	background: #cbcc52;
}
.bgPink {
	background: #fff5f9;
}
.bgPurple {
	background: #cd98d9;
}
.bgPeacocgreen {
	background: #7bced4;
}

.hrGray {
    display: block;
    margin: 0 0;
    border: none;
    background: #fff;
}
.hrGray:before{
    content: "";
    display: block;
    border-top: 2px solid #dfdfdf;
}

/********************************************************************************

	02. forSP Layout
    *横幅が667px以下の場合


********************************************************************************/

@media screen and (min-width: 0px) and (max-width: 668px) {


.col-wrap {
    flex-wrap: wrap;    
}
.col-9, .col-7, .col-6, .col-5, .col-3 {width: 100%;}


}