/* Theme Name: tantei */

@charset "utf-8";

*{
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;
}

body{
	position: relative;
	background: #fafafa;
	line-height: 27px;
    font-weight: normal;
	color: #000;
}
a{ color: #4682b4; }
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
#container{ padding: 10px 0 20px; }
main{
	margin: 10px 0 20px;
	background: #fff;
}

@media screen and (min-width: 960px){
    body{ font-size: 15px; }
	a:hover{ color: #b22222; }
	a img:hover{ opacity: .8; }
    .inner{
    	margin: auto;
    	max-width: 1060px;
    	box-sizing: border-box;
    }
    #container{
    	display: flex;
    	justify-content: space-between;
    }
    main{ padding: 30px 70px; }
    #container main{
    	flex: 740px 0 1;
    	margin-top: 0;
    	margin-right: 20px;
		padding: 0 15px 20px;
    	box-sizing: border-box;
    }
    #container #sidebar{ flex: 300px 0 0; }
}
@media screen and (max-width: 959px){
    body{ font-size: 20px; }
	main{
		margin-top: 0;
		padding: 0;
	}
	#container main, main.page{ padding: 0 15px 10px; }
	#container #sidebar{ padding: 0 15px 20px; }
}
@media screen and (max-width: 599px){
	body{ font-size: 18px; }
}

/* ------------------------------------------------
 header
------------------------------------------------ */
header{
	background: -webkit-linear-gradient(to left, #039be5, #13b0fc);
	background: linear-gradient(to left, #039be5, #13b0fc);
	color: #fff;
}
header .inner{ padding: 0 10px; }
header .descr{
	margin-bottom: 5px;
	padding-top: 5px;
	font-size: 13px;
}
header .sitename{
	line-height: 1.5;
	font-weight: bold;
	font-size: 22px;
}
header .sitename a{
	text-decoration: none;
	color: #fff;
}

#breadcrumb ul{
    margin: 5px 0;
    padding: 0;
}
#breadcrumb ul li{
	padding-bottom: 0;
	list-style: none;
	line-height: 1.5;
	font-size: 13px;
	color: #616161;
}
#breadcrumb ul li:after{
	content: ">";
	margin: 0 5px;
}
#breadcrumb ul li a{
	text-decoration: none;
	color: #616161
}

@media screen and (max-width: 959px){
	header .inner{ text-align: center; }
}

/* ------------------------------------------------
 main
------------------------------------------------ */
main h1, main h2, main h2 span,
main h3, main h3 span, main h4{ font-family: "Noto Sans JP", sans-serif; }
main h1{
	margin-bottom: 20px;
	padding-top: 10px;
	line-height: 40px;
	font-size: 27px;
	color: #333;
}
main h2{
	margin: 20px 0;
	padding: 10px 20px;
	text-align: center;
	overflow: hidden;
}
main h2 span{
	position: relative;
	display: inline-block;
	margin: 0 10px;
	padding: 0 20px;
	color: #039be5
}
main h2 span:before,
main h2 span:after{
	position: absolute;
	content: "";
	top: 50%;
	width: 1000%;
	height: 1px;
	background: #039be5;
}
main h2 span:before{ right: 100%; }
main h2 span:after{ left: 100%; }
main h3{
	position: relative;
	margin: 20px 0 30px;
	padding: 10px;
	background: #039be5;
	text-align: center;
	color: #fff;
}
main h3:after{
	position: absolute;
	content: "";
	left: 50%;
	bottom: -20px;
    border: 10px solid transparent;
    border-top: 10px solid #039be5;
}
main h3 a{ color: #fff; }
main h4{
	margin: 20px 0;
	padding: 10px 0 10px 20px;
	background: #f4fbff;
	border-left: 5px solid #039be5;
	color: #039be5;
}
main h4.point{
	margin: 30px 0;
	padding: 0 0 1px 0;
	background: none;
    border-bottom: 1px solid #039be5;
    border-left: 0;
}
main h4.point span{
	padding: 5px 15px;
	max-width: 80%;
	background: #039be5;
	line-height: 27px;
	font-size: 15px;
	color: #fff;
}
main h4.st-matome{
	padding: 10px 15px;
	background: none;
	border-left: 0;
	color: #000;
}
main p, main table{ margin-bottom: 20px; }
main table{
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
main table th,
main table td{
	padding: 10px;
	border: 1px solid #999;
	line-height: 24px;
	font-weight: normal;
}
main ul{ padding: 5px 20px 10px 20px; }
main ul li{ padding-bottom: 5px; }
main ul li:last-child{ padding-bottom: 0; }
main ol{
	list-style-type: decimal;
	margin-bottom: 20px;
	padding: 10px 10px 10px 30px;
}

@media screen and (min-width: 960px){
	main h2{
		line-height: 32px;
		font-size: 22px;
	}
	main h3{
		line-height: 30px;
		font-size: 20px;
	}
	main h3 a:hover{
		text-decoration: none;
		color: #fff;
	}
	main h4{
		line-height: 26px;
		font-size: 16px;
	}
}
@media screen and (max-width: 959px){
	main p{ line-height: 30px; }
}
@media screen and (min-width: 600px){
	main h2{
		line-height: 35px;
		font-size: 24px;
	}
	main h3{
		line-height: 32px;
		font-size: 22px;
	}
	main h4{
		line-height: 31px;
		font-size: 21px;
	}
}
@media screen and (max-width: 599px){
	main h1{
		line-height: 35px;
		font-size: 22px;
	}
	main h2{
		line-height: 27px;
		font-size: 20px;
	}
	main h3{
		line-height: 27px;
		font-size: 19px;
	}
	main h4{
		line-height: 26px;
		font-size: 17px;
	}
}

/* single */
.catgroup{ margin-bottom: 0; }
.catgroup a{
	display: inline-block;
	margin: 5px 0;
	padding: 8px;
	background: #039be5;
	border-radius: 2px;
	line-height: 1;
	text-decoration: none;
	font-size: 13px;
	color: #fff;
}
.blogbox{
	margin-bottom: 10px;
	line-height: 1;
	font-size: 13px;
    color: #616161;
}
.blogbox i{ margin-right: 5px; }
.eyecatch{
	margin-bottom: 20px;
	text-align: center;
}
#toc_container{
	margin: 0 auto 20px;
	padding: 15px 20px;
	border: 1px solid #aaa;
	text-align: center;
	font-size: 15px!important;
}
#toc_container .toc_title{
	position: relative;
	display: inline-block;
	margin: 0 auto 10px;
	border-bottom: 2px solid #333;
}
#toc_container .toc_title a{ color: #4682b4; }
#toc_container .toc_title:before{
	content: "\f0f6\00a0";
	font-family: FontAwesome;
}
#toc_container ul li{
	margin-bottom: 5px;
	padding-left: 1em;
	text-align: left;
	line-height: 27px;
    font-weight: bold;
}
#toc_container ul li a{
	display: block;
	padding-bottom: 5px;
	color: #000;
}
#toc_container ul li .toc_number{
	margin-right: 5px;
	font-weight: bold;
	color: #ccc;
}
#toc_container ul ul{ padding: 5px 0; }
#toc_container ul ul li{ font-weight: normal; }
#toc_container ul ul li a{ border-bottom: 1px dotted #ccc; }
#toc_container ul ul ul li a{ border-bottom: 0; }
.sns{
	margin-top: 20px;
	padding: 10px 0 20px;
}
.sns ul{ justify-content: center; }
.sns ul li{
	position: relative;
	margin-right: 10px;
	padding-bottom: 5px;
	width: 40px;
    list-style: none;
    font-size: 18px;
}
.sns li a{
	display: block;
	margin: 5px;
	padding: 6px 0 4px;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
}
.sns li a span{ display: none; }
.sns li.twitter a{ background: #55acee; }
.sns li.facebook a{ background: #3b5998; }
.sns li.pocket a{ background: #f03e51; }
.sns li.hatebu a{ background: #00a5de; }
.sns li.line a{ background: #25af00; }
.sns li.share-copy a{
	background: #f3f3f3;
	color: #757575;
}
@font-face {
    font-family: stsvg;
    src:  url('fonts/stsvg.eot?poe1v2');
    src:  url('fonts/stsvg.eot?poe1v2#iefix') format('embedded-opentype'),
    url('fonts/stsvg.ttf?poe1v2') format('truetype'),
    url('fonts/stsvg.woff?poe1v2') format('woff'),
    url('fonts/stsvg.svg?poe1v2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="st-svg-"], [class*=" st-svg-"] {
	font-family: stsvg !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.st-svg-hateb:before{ content: "\e911"; }
.tagst{
	padding-top: 10px;
	font-size: 13px;
}
.p-navi dl dt{
	flex: 50px 0 0;
	font-weight: bold;
	font-size: 14px;
	color: #666;
}
.p-navi dl dd{
	padding-left: 5px;
	line-height: 25px;
	font-size: 15px;
}

@media screen and (min-width: 960px){
	#toc_container .toc_title a:hover{ color: #b22222; }
	#toc_container ul li a:hover{ opacity: .5; }
	.sns li a:hover{
		-webkit-transform: translateY(1px);
		transform: translateY(1px);
	}
}
@media screen and (max-width: 959px){
	.blogbox{ font-size: 14px; }
}
@media screen and (min-width: 600px){
	#toc_container .toc_title{
		line-height: 30px;
		font-size: 20px;
	}
}
@media screen and (max-width: 599px){
	#toc_container .toc_title{
		line-height: 30px;
		font-size: 18px;
	}
}

/* kanren */
.kanren dl{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f3f3f3;
}
.kanren dl:last-child{ border-bottom: 0; }
.kanren dl dt{ flex: 100px 0 0; }
.kanren dl dd{ padding-left: 15px; }
.kanren h3{
	margin: 0 0 3px;
	padding: 0;
	background: none;
	text-align: left;
	line-height: 26px;
	font-size: 16px;
}
.kanren h3:after{
	position: static;
	border: 0;
}
.kanren h3 a{
	text-decoration: none;
	color: #1a1a1a;
}
.kanren h5{
	line-height: 26px;
	font-size: 16px;
}
.kanren h5 a{
	text-decoration: none;
	color: #1a1a1a;
}
.kanren .catgroup a{
	margin-top: 0;
	padding: 5px;
}
.blog_info{
	line-height: 1.7;
	font-size: 13px;
    color: #888;
}
.blog_info i{ margin-right: 5px; }

@media screen and (min-width: 960px){
	.single .kanren .catgroup a:hover{ opacity: .5; }
	.kanren h3 a:hover{ color: #000; }
	.single .kanren h5 a:hover{ color: #b22222; }
	.kanren .catgroup a{ font-size: 10px; }
	.kanren .excerpt{
		line-height: 1.8;
		font-size: 13px;
		color: #888;
	}
}
@media screen and (max-width: 959px){
	.kanren .excerpt{ display: none; }
}

/* pagenation */
.pagenation ul{
	display: flex;
	justify-content: center;
	align-items: center;
}
.pagenation ul li{
	margin: 0 2px 5px;
	padding-bottom: 0;
	list-style: none;
	text-align: center;
	line-height: 1.3;
	font-size: 15px;
}
.pagenation ul li.active,
.pagenation ul li a{
	padding: 7px 8px;
	min-width: 20px;
	border: 1px solid #ccc;
}
.pagenation ul li.active{ opacity: .5; }
.pagenation ul li a{
	display: block;
	text-decoration: none;
	color: #999;
}

/* ------------------------------------------------
 sidebar
------------------------------------------------ */
#sidebar h4{
	position: relative;
	margin-bottom: 15px;
	padding: 7px 0 7px 10px;
	font-size: 14px;
	color: #039be5;
}
#sidebar h4:after{
	position: absolute;
	content: "";
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 3px;
	background: -webkit-linear-gradient(to left, #13b0fc, #039be5);
	background: linear-gradient(to left, #13b0fc, #039be5);
}
.search{ margin: 30px 0; }
.search form{
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border: 1px solid #f3f3f3;
}
.search form input{
	background: none;
	border: 0;
	font-size: 14px;
	-webkit-appearance: none;
}
.search form input[type=text]{
	flex: 215px 0 0;
	padding: 10px;
	color: #333;
}
.search form input[type=submit]{
	padding: 10px 25px;
	color: #424242;
	cursor: pointer;
}
ul.categories li{
	list-style: none;
	line-height: 24px;
	font-size: 14px;
}
ul.categories li a{
	position: relative;
	display: block;
	padding: 10px;
	border-bottom: 1px solid #e1e1e1;
	text-decoration: none;
	color: #1a1a1a;
}
ul.categories li a:after{
	position: absolute;
	content: "";
	top: 50%;
	right: 10px;
	width: 4px;
	height: 4px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	-webkit-transform: rotate(45deg) translateY(-50%);
	transform: rotate(45deg) translateY(-50%);
}

@media screen and (min-width: 961px){
	#sidebar .kanren h5 a:hover{ color: #b22222; }
	ul.categories li a:hover{ opacity: .5; }
}

/* ------------------------------------------------
 footer
------------------------------------------------ */
footer{
	padding: 20px 15px;
	background: #81c7e8;
	text-align: center;
	color: #fff;
}
footer a{
	text-decoration: none;
	color: #fff;
}
.footerlogo h3{
	line-height: 30px;
	font-size: 22px;
}
.footer-description{ font-size: 12px; }
.footermenubox ul{ justify-content: center; }
.footermenubox ul li{
	list-style: none;
	padding: 0 10px;
	border-right: 1px solid #fff;
	line-height: 18px;
	font-size: 12px;
}
.footermenubox ul li:last-child{ border-right: 0; }
.copyr{ font-size: 12px; }
#page-top{
	position: fixed;
	right: 15px;
	bottom: 20px;
	padding-top: 13px;
	width: 60px;
	height: 60px;
	background: #039be5;
	border-radius: 50%;
	box-sizing: border-box;
	text-align: center;
	font-size: 27px;
	color: #fff;
	z-index: 9999;
	cursor: pointer;
}

#pop{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
	z-index: 99;
}
.pop_wrap{
	position: absolute;
	top: 50%;
	left: 0;
	padding: 0 15px;
	width: 100%;
	box-sizing: border-box;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.pop_box{ text-align: center; }
.pop_box a{ display: inline-block; }
.pop_close{
	position: relative;
	margin: 0 auto 20px;
	padding: 10px 0;
	width: 300px;
	max-width: 100%;
	border: 2px solid #fff;
	border-radius: 5px;
	text-align: center;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}
.pop_close:after{
	position: absolute;
	content: "×";
	top: 40%;
	right: 10px;
	font-weight: bold;
	font-size: 2rem;
	color: #fff;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

@media screen and (min-width: 960px){
	footer a:hover{ color: #fff; }
}

/* ------------------------------------------------
 contact
------------------------------------------------ */
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form textarea,
.wpcf7-submit{
	display: block;
	margin: 5px auto;
	padding: 7px 15px;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 15px;
	-webkit-appearance: none;
}
.wpcf7-form textarea{
	padding: 5px;
	width: 100%;
}
.wpcf7-submit{
	background: #039be5;
	color: #fff;
	cursor: pointer;
}
@media screen and (min-width: 960px){
	.wpcf7-submit{ width: 50%; }
}

/* ------------------------------------------------
 tantei
------------------------------------------------ */
.feature{
	margin-bottom: 20px;
	padding: 15px;
	background: #fff;
	border: 1px solid #039be5;
	box-shadow: 1px 1px 3px #ddd;
}
.feature ul{ padding: 0; }
.feature ul li{
	list-style: none;
	border-bottom: 1px dotted #039be5;
	font-weight: bold;
	color: #424242;
}
.feature ul li:before{
	content: "\f14a";
	margin-right: 5px;
	font-family: FontAwesome;
	color: #039be5;
}
.feature ul li:last-child{ border-bottom: 0; }
dl.tantei_info{
	align-items: center;
	margin-bottom: 20px;
	font-size: 90%;
}
dl.tantei_info dt{
	flex: 100px 0 0;
	padding: 5px 0;
	background: #039be5;
	text-align: center;
	color: #fff;
}
dl.tantei_info dd{
	flex: auto 1 1;
    margin-left: 10px;
	padding: 5px 0;
	border-bottom: 1px solid #039be5;
}
dl.tantei_info ul{
	flex-wrap: wrap;
	align-items: center;
	padding: 0;
}
dl.tantei_info ul li{
	list-style: none;
	padding-bottom: 0;
}
dl.tantei_info ul li:after{
	content: ",";
	margin: 0 5px 0 1px;
}
dl.tantei_info ul li:last-child:after{ content: none; }

/* ------------------------------------------------
 refine
------------------------------------------------ */
.refine{
	margin: auto;
	padding: 0 0 20px;
	max-width: 600px;
	box-sizing: border-box;
}
#searchform .flex{
	flex-wrap: wrap;
	align-items: start;
	justify-content: space-between;
}
#searchform label{
	position: relative;
	flex: 49% 0 0;
	margin-bottom: 8px;
	padding: 10px 5px 10px 20px;
	background: #fff;
	border: 1px solid #039be5;
	border-radius: 3px;
	box-sizing: border-box;
	line-height: 1.6;
	cursor: pointer;
}
#searchform label:before,
#searchform label.checked:after{
	position: absolute;
	content: "";
	top: 50%;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#searchform label.checked{ background: #edf9ff; }
#searchform label:before{
	left: 4px;
	width: 12px;
	height: 12px;
	background: #fff;
	border: 1px solid #039be5;
}
#searchform label.checked:after{
	left: 7px;
	width: 8px;
	height: 8px;
	background: #039be5;
}
#searchform label input[type=radio]{ display: none; }
#searchform .refine_btn input{
	margin: 10px 0;
	padding: 15px;
	width: 100%;
	background: #fd8419;
	border: 0;
	border-bottom: 3px solid #ce7136;
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
}

.refine_search h3{
	margin-top: 0;
	text-align: left;
	font-size: 130%;
}
.refine_search h3:after{
	position: static;
	border: 0;
}
.refine_search h3 a{
	position: relative;
	display: block;
}
.refine_search h3 a:after{
	position: absolute;
    content: "\f138";
    top: 50%;
    right: 0;
    font-family: FontAwesome;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.refine_search dl{ border-bottom: 0; }
section.tantei{
	margin-bottom: 20px;
	padding: 15px;
	border: 1px solid #eee;
}
section.tantei .tantei_box .img{
    margin-bottom: 20px;
    text-align: center;
}
section.tantei .tantei_box .feature,
section.tantei .tantei_box .tantei_info{ margin-bottom: 10px; }

@media screen and (min-width: 960px){
	#searchform label:hover{ background: #edf9ff; }
	#searchform .refine_btn input:hover{
		opacity: .5;
		-webkit-transform: translateY(1px);
		transform: translateY(1px);
	}
}
@media screen and (max-width: 959px){
	#searchform label,
	#searchform .refine_btn input{
		font-size: 80%;
	}
}
@media screen and (min-width: 600px){
    section.tantei .tantei_box{
    	display: flex;
    	justify-content: space-between;
    }
    section.tantei .tantei_box .img{
        flex: auto 1 1;
        margin-right: 15px;
    }
    section.tantei .tantei_box .txt{ flex: 64% 0 0; }
}
@media screen and (max-width: 599px){
	section.tantei .tantei_box .img img{
		width: auto;
	    height: 250px;
	}
	#searchform label,
	#searchform .refine_btn input{
		font-size: 2.7vw;
	}
}

/* ------------------------------------------------
 styles
------------------------------------------------ */
.clearfix{ zoom: 1; }
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}
.fa{
	display: inline-block;
	text-rendaring: auto;
	font: normal normal normal 14px/1 FontAwesome;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.flex{ display: flex; }
blockquote{
	margin: 20px 0;
	padding: 50px 20px 20px;
	background: url(images/quote.png) 0 0 no-repeat #f3f3f3;
}
.komozi{
	line-height: 1.5!important;
	font-size: 80%!important;
}
.hutoaka, .st-mycolor, .rmarker, .ymarker,
.st-mymarker-s, .rmarker-s, .y-marker-s{ font-weight: bold; }
.hutoaka, .st-aka{ color: #f33; }
.st-mycolor{ color: #ff9800; }
.rmarker{ background: #ffcdd2; }
.ymarker{ background: #fff9c4; }
.st-mymarker-s, .ymarker-s{
	background: -webkit-linear-gradient(transparent 70%, #fff9c4 0%);
	background: linear-gradient(transparent 70%, #fff9c4 0%);
	font-weight: bold;
}
.rmarker-s{
	background: -webkit-linear-gradient(transparent 70%, #ffcdd2 0%);
	background: linear-gradient(transparent 70%, #ffcdd2 0%);
}
.layout-box{ padding: 0 15px; }
.st-blackboard{
	margin: 0 0 20px;
	background: #fff;
	border: 3px solid #f3f3f3;
}
.st-blackboard-title-box{
	margin-bottom: 10px;
	text-align: center;
}
.st-blackboard-title{
	display: inline-block;
	padding: 10px 10px 5px;
	background: #fff;
	border-bottom: 2px solid #424242;
	font-weight: bold;
	color: #424242;
}
.st-blackboard-title:before{
	content: "\f0f6\00a0";
	font-family: FontAwesome;
}
.st-blackboard li{
	list-style: none;
	padding: 10px 0 10px 1.3em!important;
	border-bottom: 1px dotted #ccc;
	line-height: 1.3;
	text-indent: -1.3em;
	font-size: 15px;
}
.st-blackboard li:before{
	content: "\f058\00a0\00a0";
	font-family: "FontAwesome";
	color: #f00;
}
.cta-tyosei{ padding: 10px 15px; }
.st-mybtn{
	margin: 0 auto 20px;
	border: 1px solid #ccc;
	line-height: 27px;
}
.st-mybtn a{
	position: relative;
	display: block;
	padding: 17px;
	padding-left: 60px;
	text-decoration: none;
	text-align: center;
	overflow: hidden;
}
.st-mybtn .fa.fa-after{ margin-left: 10px; }
.st-mybtn .fa:not(.fa-after){ margin-right: 10px; }
.st-mybtn.st-reflection a:after {
	content:'';
    height:100%;
    width:30px;
    position:absolute;
    top:-180px;
    left:0;
    background-color: #fff;
    opacity:0;
    transform: rotate(45deg);
    -webkit-animation: reflection 5s ease-in-out infinite;
    animation: reflection 5s ease-in-out infinite;
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
.st-mybtn label{ position: relative; }
.st-mybtn .label{
	position: absolute;
	top: 50%;
	left: -60px;
	padding-top: 13px;
	width: 52px;
	height: 52px;
	background: #ff738e;
	border-radius: 100px;
	box-sizing: border-box;
	line-height: 1.2;
	font-size: 11px;
	color: #ff0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.st-mybtn .label:after{
	position: absolute;
	content: "";
	right: -7px;
	bottom: 0;
	border: 6px solid transparent;
	border-left: 10px solid #ff738e;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}
.st-mybtn.cv_btn{
	position: relative;
	background: -webkit-linear-gradient(#66bb6a, #43a047);
	background: linear-gradient(#66bb6a, #43a047);
	border: 1px solid #81c784;
	border-radius: 5px;
	box-shadow: 0 3px 0 #388e3c;
	font-weight: bold;
	color: #fff;
}
.st-mybtn.cv_btn a{
	padding-left: 17px;
	color: #fff;
}
.cv_btn a:before{
	position: absolute;
	content: "\f054";
	top: 50%;
	right: 30px;
	font-family: FontAwesome;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.contents-waku{
	padding: 0 15px 5px;
	background: #fff8dc;
}
.contents-box{
	margin-bottom: 1em;
	padding: 1em;
	background: #fff;
	border: 2px solid #eee;
	border-radius: 10px;
}
.cbox-midashi{
	margin-bottom: 10px;
	text-align: center;
	line-height: 1.5;
	font-weight: bold;
	font-size: 24px;
}
.cbox-moji{
	line-height: 25px;
	color: #666;
    line-height: 1.8;
}
.contents-box .cbox-moji{ font-size: 16px; }
.st-wide-background{
	margin-bottom: 20px;
	padding: 20px 15px;
    margin-top: 20px;
}
.lp-midashi{
	background: #ffa103!important;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
}
.st-step-title{
	position: relative;
	margin: 30px 0 20px;
	padding: 10px 10px 10px 65px;
	background: #f4fbfe;
	border-bottom: 2px solid #039be5;
	line-height: 30px;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: bold;
	font-size: 20px;
}
.st-step-box{
	position: absolute;
	display: block;
	bottom: 15px;
	left: -5px;
}
.st-step{
	position: relative;
	display: inline-block;
	margin-right: 15px;
	padding: 5px 7px;
	width: 50px;
	height: 50px;
	background: #039be5;
	border-radius: 5px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	line-height: 18px;
	font-weight: normal;
	font-size: 13px;
	color: #fff;
}
.st-step:before{
	position: absolute;
	content: "";
	left: 50%;
	bottom: -20px;
	border: 10px solid transparent;
	border-top: 13px solid #039be5;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.st-step-no{
	font-weight: bold;
	font-size: 150%;
}
.freebox{
	position: relative;
	margin-bottom: 20px;
	padding: 10px 0;
	background: #f4fbff;
	border-top: 1px solid #039be5;
}
.freebox.has-title{ padding-top: 0; }
.free-inbox{
	padding: 10px 15px;
}
.p-free:after{
	display: block;
	content: "";
	margin-bottom: 30px;
}
.p-entry-f{
	position: absolute;
	top: 0;
	left: 0;
	padding: 3px 20px;
	max-width: 80%;
	background: #039be5;
	font-size: 15px;
	color: #fff;
}
.p-entry-f .fa{ margin-right: 5px; }
.st-mybox{
	padding: 0 20px;
	border: 2px solid #ccc;
}
.st-in-mybox{ padding: 20px 0; }
.clip-memobox{
	display: table;
	margin-bottom: 20px;
	padding: 10px;
	background: #f3f3f3;
	border-radius: 3px;
}
.clip-fonticon,
.clip-memotext{
	display: table-cell;
	vertical-align: middle;
}
.clip-fonticon{
    padding: 0 15px 0 10px;
    text-align: center;
}
.clip-memobox.st-text-guide .fa:before,
.clip-memobox.st-text-guide .fa:after{
    display: block;
    line-height: .8;
}
.clip-memobox.st-text-guide .fa:before{ padding-top: 10px; }
.clip-memobox.st-text-guide .fa:after{
	content: "関連";
	margin-top: 10px;
	font-size: 11px;
	white-space: nowrap;
}
.clip-memotext{
	padding-left: 15px;
	width: 100%;
	border-left: 1px solid #e0e0e0;
	box-sizing: border-box;
	line-height: 1.7;
	font-size: 95%;
}
.clip-memotext p:last-child{ margin-bottom: 0; }
.st-memobox2{
	position: relative;
	margin: 25px 0 20px;
	padding: 20px 20px 0;
	border: 1px solid #9e9e9e;
}
.st-memobox2 .st-memobox-title{
	position: absolute;
	display: inline-block;
	top: -8px;
	left: 10px;
	padding: 0 9px;
	background: #fff;
	line-height: 1;
	font-size: 90%;
}
.st-memobox2 .st-memobox-title:before{
	content: "\f0f6\00a0";
	font-family: FontAwesome;
}
.st-share{
	padding: 5px;
	background: #fafafa;
	border-radius: 3px;
	line-height: 1.7;
	font-size: 95%;
}
.st-share:before{
	content: "\00a0\00a0\f0c1\00a0\00a0\00a0";
	font-family: FontAwesome;
	color: #9e9e9e;
}
.maruno{
	margin-bottom: 0;
	padding-bottom: 0;
}
.maruno ol li{
	list-style-type: none;
	counter-increment: st-section;
	margin-bottom: 7px;
	padding-bottom: 5px;
	line-height: 23px;
}
.maruno ol li:before{
	content: counters(st-section,"");
	float: left;
	margin: 0 10px 0 -3em;
	min-width: 23px;
	height: 23px;
	background: #039be5;
	border-radius: 50%;
	text-align: center;
	line-height: 23px;
	font-size: 60%;
    color: #fff;
}
.responbox,
.responbox .lbox{ margin-bottom: 10px; }
iframe{ width: 100%; }

.alignleft{ text-align: left; }
.aligncenter{ text-align: center; }
.alignright{ text-align: right; }
img.aligncenter{
	display: block;
	margin: auto;
}
.accordion dt{
	position: relative;
	padding: 20px 15px;
	background: #ffa103;
	text-align: center;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
}
.accordion dt:after{
	position: absolute;
	content: "\f078";
	right: 30px;
	font-family: FontAwesome;
}
.accordion dt.open:after{ content: "\f077"; }
.accordion dd{
	display: none;
	padding: 15px;
	background: #fff9c4;
}

@media screen and (min-width: 960px){
	.st-mybtn:hover{ opacity: .5; }
	.st-wide-background{
		margin-left: -70px;
		margin-right: -70px;
		padding-left: 70px;
		padding-right: 70px;
	}
	.freebox{
		line-height: 24px;
		font-size: 14px;
	}
	.clip-memotext{
		line-height: 1.7;
		font-size: 90%;
	}
	.st-memobox2>*{ font-size: 90%; }
}
@media screen and (max-width: 959px){
	.midashi-tyosei{ padding: 0 15px; }
	.st-mybtn a{
		line-height: 30px;
		font-size: 85%;
	}
	.st-memobox2>*{ font-size: 95%; }
	.cbox-midashi{ font-size: 21px; }
}
@media screen and (min-width: 600px){
	.st-wide-background{
		margin-left: -30px;
		margin-right: -30px;
		padding-left: 30px;
		padding-right: 30px;
	}
	.responbox .lbox{
		float: left;
		padding-right: 15px;
		width: 40%;
		box-sizing: border-box;
	}
	.responbox .rbox{
		float: left;
		width: 60%;
		box-sizing: border-box;
	}
	iframe{ min-height: 430px; }
	.sp{ display: none; }
}
@media screen and (max-width: 599px){
	.st-wide-background{
		margin-left: -15px;
		margin-right: -15px;
	}
	.st-step-title{ font-size: 19px; }
	.clip-fonticon{ font-size: 150%; }
	.st-mybtn.cv_btn a{ line-height: 1.4; }
	iframe{ min-height: 250px; }
	.accordion{ font-size: 85%; }
}