/******************************
 profile
******************************/
.profile-area .profile-box{
	text-align: center;
	border: 2px solid rgba(204,204,204,0.25);
}

.profile-area .profile-box-inner{ padding: 5%; }

.profile-area .profile-avatar{
	width: 18%;
	display: block;
	margin: 0 auto 1em;
	padding: 0;
}

.profile-area .profile-avatar img{
	width: 100%;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(0,0,0,0.16);
	-webkit-backface-visibility: unset;
    backface-visibility: unset;
}

.profile-area .profile-avatar a:hover img{
	transform: scale(1.05);
	opacity: 1;
}

.profile-area .profile-name{
	font-size: 1.2em;
	margin: 0 0 1em;
	text-align: center;
}


.profile-area .profile-name a{
	font-weight: bold;
	text-decoration: none;
}

.profile-area .profile-name span{
	display: block;
	font-size: 0.7em;
	font-weight: normal;
	opacity: 0.7;
}

.profile-area .profile-description{
	display: block;
}

.profile-area .profile-description{
	font-size: 0.9em;
	text-align: left;
}

.profile-area .profile-acount{
	padding: 0 0 3%;
}

.profile-area .profile-acount .acount-title{
	margin: 0 0 0.15em;
	text-transform: uppercase;
}

.profile-area .profile-acount .acount-title::before,
.profile-area .profile-acount .acount-title::after{
	content: "|";
	margin: 0 0.75em;
	display: inline-block;
	transform: rotate(40deg);
}

.profile-area .profile-acount .acount-title::before{
	transform: rotate(-40deg);
}

.profile-area .profile-acount ul{
	text-align: center;
	margin: 0;
}

.profile-area .profile-acount li{
	display: inline-block;
	margin: 0.2em;
	padding: 0;
	border: none !important;
}

.profile-area .profile-acount li::before{
	content: none;
}

.profile-area .profile-acount a{
	color: initial;
	display: block;
	text-decoration: none;
}

.profile-area .profile-acount a span{
	display: none;
}

.profile-area .profile-acount li a::before{
	font-size: 1em;
	background: #444;
	width: 2em;
	height: 2em;
	line-height: 2em;
	position: relative;
	color: #fff;
	font-family: "fontawesome";
	content: "\f144";
	display: block;
	border-radius: 50%;
	transition: 0.3s ease-in-out;
}

.profile-area .profile-acount li a:hover::before{
	background: #fff;
	color: #444;
}

.profile-area .profile-acount li.profile-twitter a::before{content: "\f099";}
.profile-area .profile-acount li.profile-facebook a::before{content: "\f09a";}
.profile-area .profile-acount li.profile-instagram a::before{content: "\f16d";}
.profile-area .profile-acount li.profile-url a::before{content: "\f0ac";}

/******************************
 cta
******************************/
.cta-inner{
	color: #fff;
	padding: 5%;
}

.cta-inner .ctatitle{
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	margin: 0 0 1em;
}

.cta-area .cta-eyecatch{
	width: 100%;
	text-align: center;
	vertical-align: top;
}

.cta-area .cta-eyecatch.descriptionnone{
	margin-bottom: 0;
}

.cta-area .cta-eyecatch img{
	margin: 0 auto;
}

.cta-area .btn-l{
	margin: 1.5em 0 0;
}

.cta-area,
.profile-area{
	margin-bottom: 30px;
}

/******************************
 btn
******************************/
.btn{
	margin: 1.5em 0 2em;
	text-align: center;
}

.btn a{
	display: inline-block;
	position: relative;
	font-weight: 700;
	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
	text-decoration: none;
	padding : 1em 2em;
	color: #fff;
	background: #444;
	border-radius: 5px;
	box-shadow: 0 4px 0 0 rgba(119,119,119,0.2);
	opacity: 1;
}

.btn a:hover{
	color: #fff;
	box-shadow: 0 8px 35px -8px rgba(0,0,0,0.3) !important;
	transform: translateY(-2px);
}

/******************************
 info frame
******************************/
.info-frame{
	background: #f3f3f3;
	padding: 2em;
	text-align: center;
	margin: 2em 0;
}

.info-frame p{
	margin-bottom: 1.5em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.info-frame .btn{
	margin: 0;
}

.info-frame .btn a{
	min-width: 56%;
}

/******************************
 kijilink
******************************/
.kijilink{
	margin: 1em 0;
	text-align: left;
	border: 1px solid rgba(204,204,204,0.5);
}

.kijilink a{
	color: #333;
	text-decoration: none;
	display: block;
	padding: 2%;
}

.kijilink .kijilink-eyecatch{
	float: left;
	max-width: 20%;
	margin-right: 2%;
}

.kijilink .kijilink-eyecatch img{
	width: 100%;
	margin: 0 !important;
}

.kijilink.labelon .kijilink-content::before{
	content: "関連記事";
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.0;
	color: #fff;
	background: #222;
	padding: 0.4em;
	display: inline-block;
	position: relative;
	top: -0.4em;
	border-radius: 2px;
}

.kijilink-eyecatch + .kijilink-content { padding-left: 22%; }

.kijilink .kijilink-title{
	margin: 0;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.5;
}

.kijilink .kijilink-date{ font-size: 0.8em; }

.kijilink.large .kijilink-eyecatch{
	max-width: 100%;
	margin: 0 0 2%;
	float: none;
	display: block;
}

.kijilink.large .kijilink-content{
	margin: 0;
	padding: 0;
}

.kijilink.large .kijilink-title {
	font-size: 1em;
	margin-bottom: 0.2em;
}

/******************************
 explain
******************************/
.explain {
	border: 2px solid #ddd;
	margin: 2.5em 0;
	padding: 1.5em;
	font-size: 0.95em;
}

.explain p:last-child {
	margin-bottom: 0;
}

.explain.intitle{ padding-top: 0; }

.explain .ex-title{ margin: 0; }

.explain .ex-title span{
	display: inline-block;
	background: #fff;
	padding: 0.1em 0.5em;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.05em;
	position: relative;
	top: -1.1em;
	left: -0.5em;
	border-radius: 3px;
}

.explain.box-yellow .ex-title span,
.explain.box-red .ex-title span,
.explain.box-blue .ex-title span,
.explain.box-green .ex-title span,
.explain.box-black .ex-title span,
.explain.box-caution .ex-title span,
.explain.box-warning .ex-title span{
	color: #fff;
}

.explain.box-yellow .ex-title span{background: #fc6;}
.explain.box-red .ex-title span{background: #faa;}
.explain.box-blue .ex-title span{background: #9cd;}
.explain.box-green .ex-title span{background: #9da;}
.explain.box-black .ex-title span{background: #555;}
.explain.box-caution .ex-title span{background: #fa0;}
.explain.box-warning .ex-title span{background: #f55;}

.explain.box-yellow{
	background: #ffe;
	border-color: #fc6;
}

.explain.box-red{
	background: #fee;
	border-color: #faa;
}

.explain.box-blue{
	background: #eef7ff;
	border-color: #9cd;
}

.explain.box-green{
	background: #efd;
	border-color: #9da;
}

.explain.box-black{
	background: #222;
	border-color: #555;
	color: #eee;
}

.explain.box-caution{
	background: #ffe;
	border-color: #fa0;
	color: #432;
}

.explain.box-warning{
	background: #fee;
	border-color: #f55;
	color: #433;
}

.explain.box-caution .ex-title span,
.explain.box-warning .ex-title span{
	padding-left: 1.8em;
}

.explain.box-caution .ex-title span::before,
.explain.box-warning .ex-title span::before{
	font-family: "fontawesome";
	display: inline-block;
	font-size: 1.1em;
	position: absolute;
	top: 0;
	left: 0.5em;
}

.explain.box-caution .ex-title span::before{
	content: "\f071";
	color: #fff;
}

.explain.box-warning .ex-title span::before{
	content: "\f06a";
	color: #fff;
}

/******************************
 voice
******************************/
.voice{
	margin: 1em 0 1.5em;
	font-size: 0.95em;
}

.voice .voice-content{
	background-color: #f3f3f3;
	padding: 1em 1.5em;
	position: relative;
	width: auto;
	max-width: 86%;
	border-radius: 1.5em;
}

.voice.l .voice-content{ float: left; }

.voice.r .voice-content{ float: right; }

.voice .voice-content h2,
.voice .voice-content h3,
.voice .voice-content h4,
.voice .voice-content h5{
	margin: 10px 0 !important;
	padding: 0;
}

.voice .voice-content p{ margin-bottom: 1em; }

.voice .voice-content p:last-child{ margin-bottom: 0; }

.voice .voice-icon{ position: relative; }

.voice .voice-icon img{
	width: 12%;
	border-radius: 50%;
	margin: 0;
}

.voice .voice-icon .voice-name{
	font-size: 0.85em;
	font-weight: bold;
	padding: 0.5em 0;
}

.voice.l .voice-icon img{
	float: left;
	margin-right: 2%;
}

.voice.r .voice-icon img{
	float: right;
	margin-left: 2%;
}


.voice.l .voice-content::after,
.voice.r .voice-content::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	border: 8px solid transparent;
}

.voice.l .voice-content::after {
	left: -20px;
	border-right: 20px solid #f3f3f3;
	transform: rotate(35deg);	
}

.voice.r .voice-content::after {
	right: -20px;
	border-left: 20px solid #f3f3f3;
	transform: rotate(-35deg);
}


.voice.l .voice-icon .voice-name{ text-align: left; }

.voice.r .voice-icon .voice-name{ text-align: right; }

.voice.large .voice-icon img{ width: 16%; }

.voice.large .voice-content{ width: 81%; }

.voice.voice-yellow .voice-content{ background: #fe8; }
.voice.l.voice-yellow .voice-content::after { border-right-color: #fe8; }
.voice.r.voice-yellow .voice-content::after { border-left-color: #fe8; }

.voice.voice-red .voice-content{ background: #fcc; }
.voice.l.voice-red .voice-content::after { border-right-color: #fcc; }
.voice.r.voice-red .voice-content::after { border-left-color: #fcc; }

.voice.voice-blue .voice-content{ background: #bef; }
.voice.l.voice-blue .voice-content::after { border-right-color: #bef; }
.voice.r.voice-blue .voice-content::after { border-left-color: #bef; }

.voice.voice-green .voice-content{ background: #bfc; }
.voice.l.voice-green .voice-content::after { border-right-color: #bfc; }
.voice.r.voice-green .voice-content::after { border-left-color: #bfc; }

.voice.voice-black .voice-content{
	background: #222;
	color: #eee;
}
.voice.l.voice-black .voice-content::after { border-right-color: #222; }
.voice.r.voice-black .voice-content::after { border-left-color: #222; }

.voice.voice-line .voice-content{
	background: #bef18c;
	color: #444;
}
.voice.l.voice-line .voice-content::after { border-right-color: #bef18c; }
.voice.r.voice-line .voice-content::after { border-left-color: #bef18c; }

/******************************
 layout frame
******************************/
.layout-frame .grid4{ font-size: 0.9em; }

.layout-frame .grid4 p{ line-height: 1.8; }

/******************************
 media queries
******************************/
@media only screen and (min-width: 768px) {
	.layout-frame{
		margin-left: -1%;
		margin-right: -1%;
		letter-spacing: -0.5em;
	}

	.layout-frame .layout-unit{
		display: inline-block;
		padding: 0 1%;
		vertical-align: top;
		letter-spacing: normal;
	}

	.layout-frame .grid2{ width: 50%; }

	.layout-frame .grid3{ width: 33.333%; }

	.layout-frame .grid4{ width: 25%; }

	.layout-frame.ratio-l .grid2:nth-child(odd){ width: 66.666%; }

	.layout-frame.ratio-l .grid2:nth-child(even){ width: 33.333%; }

	.layout-frame.ratio-r .grid2:nth-child(odd){ width: 33.333%; }

	.layout-frame.ratio-r .grid2:nth-child(even){ width: 66.666%; }

	.entry-content .layout-frame img{ margin-bottom: 0.5em; }
}

@media only screen and (max-width: 767px) {
	.layout-frame.layout-sp{
		margin-left: -2%;
		margin-right: -2%;
		letter-spacing: -0.5em;
	}

	.layout-sp .layout-unit{
		display: inline-block;
		padding: 0 2%;
		vertical-align: top;
		letter-spacing: normal;
	}

	.layout-sp .grid2{ width: 50%; }

	.layout-sp .grid4{ width: 50%; }

	.entry-content .layout-frame.layout-sp { font-size: 0.9em; }

	.entry-content .layout-frame.layout-sp img{ margin-bottom: 0.5em; }
}

@media only screen and (max-width: 480px) {
	.btn.big a, .info-frame .btn a {
		font-size: 0.9em;
		min-width: 80%;
		max-width: 90%;
	}

	.info-frame { padding: 1.5em 1em; }

	.info-frame p { font-size: 0.9em; }

	.voice .voice-icon img { width: 18%; }
	
	.voice.l .voice-icon img { margin-right: 4%; }
	
	.voice.r .voice-icon img { margin-left: 4%; }

	.voice .voice-content {
		max-width: 78%;
		font-size: 0.95em;
	}

	.voice .voice-icon .voice-name{ padding: 0.1em 0 0.3em; }

	.voice.large .voice-icon img { width: 22%; }

	.voice.large .voice-content { width: 73%; }

	.kijilink a { padding: 3%; }

	.kijilink .kijilink-eyecatch { max-width: 40%; }
	
	.kijilink-eyecatch + .kijilink-content { padding-left: 42%; }

	.kijilink .kijilink-title { font-size: 0.8em }

	.explain { padding: 1em; }

	.profile-area .profile-avatar {
		width: 32% !important;
		padding: 0 !important;
	}

	.profile-area .profile-acount {
		background: rgba(204,204,204,0.25);
		padding: 0.5em;
	}

	.cta-area .cta-inner { padding: 4%; }

	.cta-area .cta-eyecatch {
		width: 100%;
		display: block;
		margin: 0 auto 1em;
		padding: 0;
	}

	.cta-inner .ctatitle { font-size: 1.4em; }
}

/******************************
 clearfix
******************************/
.cf { zoom: 1; }

.cf:before, .cf:after {
	content: "";
	display: table;
}

.cf:after { clear: both; }