@charset "utf-8";

/* ---------------------------------------------
CSS Info

 File name:  common.css
 Style Info: 共通要素

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

/* 共通：セクション
------------------------------------------------ */
.cm-sec {
	position: relative;
	background: #FFF;
}
.cm-sec:before {
	display: block;
	content: "";
	width: 100%;
	border-top: 4px solid #dd134f;
}
.cm-sec_ttl {
	margin-top: .75em;
	padding-bottom: 1.25em;
	border-bottom: 2px solid #d3d3d3;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}
.cm-sec_ttl i {
	margin-right: .5em;
	color: #dd134f;
}


@media screen and (max-width:767px) {
	.cm-sec {
		margin-bottom: 24px;
		padding: 0 16px 24px;}
	
	.cm-sec_ttl {
		font-size: 20px;
		font-size: 2rem;
	}
}
@media screen and (min-width:768px) {
	.cm-sec {
		margin-bottom: 32px;
		padding: 0 40px 32px;
	}
	.cm-sec_ttl {
		font-size: 24px;
		font-size: 2.4rem;
	}
}


/* 共通：特集
------------------------------------------------ */
/*--- メインカラム ---*/
.cm-feature_list li {border-bottom: 1px solid #d3d3d3;}
.cm-feature_list li a {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	position: relative;
	padding: 16px 0;
	color: #111;
}
.cm-feature_list li a:hover {opacity: .5;}
.cm-feature_list li a:after {
	position: absolute;
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #f7a3bc;
	right: 0;
	top: 50%;
	margin-top: -.85em;
}
.cm-feature_list .thumb img {vertical-align: bottom;}
.cm-feature_list .desc {
	padding: 0 24px 0 16px;
	font-weight: bold;
	line-height: 1.5;
	flex: 1;
}
.cm-feature_list .desc .label {color: #f0617f;}

.cm-feature_list.side-col .thumb {width: 64px;}
.cm-feature_list.side-col .desc {
	font-size: 15px;
	font-size: 1.5rem;
}
.cm-feature_list.side-col .desc .label {
		font-size: 12px;
		font-size: 1.2rem;
	}

@media screen and (max-width:767px) {
	.cm-feature_list.main-col .thumb {width: 64px;}
	.cm-feature_list.main-col .desc .label {
		font-size: 12px;
		font-size: 1.2rem;
	}
}
@media screen and (min-width:768px) {
	.cm-feature_list.main-col {
		display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
		-webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	}
	.cm-feature_list.main-col li {
		width: 48%;
	}
	.cm-feature_list.main-col li:nth-child(odd) {margin-right: 4%;}
	.cm-feature_list.main-col .thumb {width: 80px;}
	.cm-feature_list.main-col .desc {
		font-size: 18px;
		font-size: 1.8rem;
	}
	.cm-feature_list.main-col .desc .label {
		font-size: 14px;
		font-size: 1.4rem;
	}
}


/* 共通：関連記事
------------------------------------------------ */
.cm-related_list li a {display: block;}
.cm-related_list li a:hover {opacity: .5;}
.cm-related_list .hdr-area .name {
	margin-bottom: .5em;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #666;
	line-height: 1.2;
}
.cm-related_list .hdr-area .catch {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #111;
	line-height: 1.5;
}
.cm-related_list .body-area {margin-top: 8px;}
.cm-related_list .body-area .thumb img {vertical-align: bottom;}
.cm-related_list .body-area .desc ul li {
	font-size: 12px;
	font-size: 1.2rem;
	color: #111;
}
.cm-related_list .body-area .desc ul li i {
	margin-right: 4px;
	color: #f2bccc;
}

.cm-related_list.side-col > li {
	padding: 16px 0;
	border-bottom: 1px solid #d3d3d3;
}
.cm-related_list.side-col .body-area {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}
.cm-related_list.side-col .body-area .thumb {
	width: 96px;
	margin-right: 8px;
}
.cm-related_list.side-col .body-area .desc {flex: 1;}

@media screen and (max-width:767px) {
	.cm-related_list.main-col > li {
		padding: 16px 0;
		border-bottom: 1px solid #d3d3d3;
	}
	.cm-related_list.main-col .body-area {
		display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	}
	.cm-related_list.main-col .body-area .thumb {
		width: 96px;
		margin-right: 8px;
	}
	.cm-related_list.main-col .body-area .desc {flex: 1;}
}
@media screen and (min-width:768px) {
	.cm-related_list.main-col {
		display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
		-webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
		margin-top: 24px;
	}
	.cm-related_list.main-col > li {
		display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
		width: 32%;
		margin-bottom: 16px;
		border-style: solid;
		border-width: 2px 1px 1px;
		border-color: #f0617f #e3e3e3 #e3e3e3;
		border-radius: 4px;
	}
	.cm-related_list.main-col > li:not(:nth-child(3n)) {margin-right: 2%;}
	.cm-related_list.main-col > li a {
		display: block;
		padding: 16px;
		border-radius: 4px;
	}
	.cm-related_list.main-col .hdr-area .catch {
		font-size: 15px;
		font-size: 1.5rem;
	}
	.cm-related_list.main-col .body-area .thumb {margin-bottom: 8px;}
	.cm-related_list.main-col .body-area .desc ul li {
		font-size: 13px;
		font-size: 1.3rem;
	}
}


/*-----  アンカー -----*/
@media screen and (max-width:767px) {
	.anchor {
		margin-top: -52px;
		padding-top: 52px;
	}
}
@media screen and (min-width:768px) and (max-width:979px) {
	.anchor {
		margin-top: -76px;
		padding-top: 76px;
	}
}
@media screen and (min-width:980px) {
	#l-main .anchor {
		margin-top: -120px;
		padding-top: 120px;
	}
	#s-main .anchor {
		margin-top: -124px;
		padding-top: 124px;
	}
}

/*----- ボタン -----*/
a.signup-btn {
	display: inline-block;
	background: #2ca681;
	border-style: solid;
	border-width: 1px 1px 4px 1px;
	border-color: #2ca681 #2ca681 #258d6e;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}
a.signup-btn span {
	position: relative;
	display: inline-block;
	top: -2px;
	line-height: 20px;
	border-radius: 10px;
	padding: 0 1em;
	background: #FFF;
	font-size: 12px;
	font-size: 1.2rem;
	color: #2ca681;
}
a.signup-btn:hover {
	background: #48cea5;
	border-color: #30b58d;
}
a.signup-btn:hover span {color: #48cea5;}

.btns a {
	display: inline-block;
	padding: 0 1.5em;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background: #3c7ece;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #FFF;
}
.btns a:hover {background: #41beeb;}

button:disabled{
    filter:brightness(0.8);
    cursor:not-allowed;
}

/*----- リスト -----*/
.list-dot li {
	position: relative;
	margin: 0 0 0 1em;
}
.list-dot li:before {
	display: inline-block;
	content: "";
	position: absolute;
	top: .65em;
	left: -1em;
	width: .5em;
	height: .5em;
	border-radius: 50%;
}
.list-dot.blue li:before {background: #027dbf;}
.list-dot.gray li:before {background: #CCC;}

/*----- アコーディオン -----*/
.acd-check{
    display: none;
}
.acd-label{
	display: block;
	position: relative;
}
.acd-label:after{
	content: '\f067';
	font-family: "Font Awesome 5 Free";
	position: absolute;
	right: 5px;
	top: 0px;
}
.acd-content{
	height: 0;
	opacity: 0;
	transition: .5s;
	visibility: hidden;
}
.acd-check:checked + .acd-label:after{
	content: '\f068';
}
.acd-check:checked + .acd-label + .acd-content{
	height: auto;
	opacity: 1;
	visibility: visible;
}

/*----- 数字リスト -----*/
ol.list-num {
	counter-reset:number;
	list-style:none;
	margin:0;
	padding:0;
}
ol.list-num li:before{
	counter-increment: number;
	content: counter(number); 
	background: #66c0e8;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	margin-right: .3em;
	font-size: 90%;
}

/*----- 背景関連 -----*/
.bg-bl {background: #027dbf;}
.bg-gray {background: #f3f3f3;}

/*----- 文字関連 -----*/
.tex-center {text-align: center;}
.tex-right {text-align: right;}
.tex-bold {font-weight: bold;}
.tex-nml {font-weight: normal;}
.tex-big {
	font-size: 20px;
	font-size: 2rem;
}
.tex-small {
	font-size: 12px;
	font-size: 1.2rem;
}

.tex-red {color: #f03434;}
.tex-blue {color: #0764b4;}
.tex-sky {color: #48BFE3;}
.tex-orange {color: #ff9500;}
.tex-yel {color: #e1a400;}
.tex-gray {color: #757575;}

.marker_yel {
	background: #fff799;
	background: -webkit-linear-gradient(transparent 70%, #fff799 0%);
	background: linear-gradient(transparent 70%, #fff799 0%);
	font-weight: bold;
}


/*----- MARGIN -----*/
.mt8{margin-top:8px;}
.mb8{margin-bottom:8px;}
.mt16{margin-top:16px;}
.mb16{margin-bottom:16px;}
.mt24{margin-top:24px;}
.mb24{margin-bottom:24px;}
.mt32{margin-top:32px;}
.mb32{margin-bottom:32px;}
.mt40{margin-top:40px;}
.mb40{margin-bottom:40px;}
.mt48{margin-top:48px;}
.mb48{margin-bottom:48px;}
.mt56{margin-top:56px;}
.mb56{margin-bottom:56px;}
.mt64{margin-top:64px;}
.mb64{margin-bottom:64px;}