@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.logo-image {
	padding: 10px 20px;
}

.eye-catch {
	margin: 0.3em auto 2em;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #AAA;
}

.entry-content {
    color: #333;
}

.article h2 {
	margin: 4em 0 1em;
	padding: 17px 5px 15px;
}
.article h3 {
	margin: 3em 0 1em;
	font-size: 1.1em;
}

.main p {
	color: #333;
	margin: 1em 0 1.3em;
	line-height: 1.8;
}

.toc {
    border: 2px solid #5e7ba7;
	margin: 3em auto;
	padding: 7px 10px;
}

.toc-title {
    border-bottom: 1px solid #5e7ba7;
}

.widget_recent_entries ul, .widget_categories ul, .widget_archive ul, .widget_pages ul, .widget_meta ul, .widget_rss ul, .widget_nav_menu ul {
	padding: 0 1em;
}

.blank-box, .common-icon-box {
	margin: 2em 0;
}

.blank-box.bb-tab {
	margin-top: 3em;
}

table {
	margin: 2.5em 0 !important;
}
table th {
	background-color: #a5f3b9;
}
table th, table td {
	 border: 1px solid #AAA;
}
table tr:nth-of-type(2n+1) {
	background-color: #FFF;
}

.entry-content img {
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}

.blogcard-type img {
	margin-top: 0;
	margin-bottom: 0;
}
.blogcard-type {
	margin: 3em 0;
}
.blogcard-favicon {
	margin-top: 0;
}
.blogcard-snipet {
	margin-top: 0.5em;
}

.entry-content .speech-icon img, .entry-content .speech-icon amp-img {
	margin-top: 0;
}

.blank-box.bb-tab::before {
	line-height: 1.8;
}

.marker-under {
	background: linear-gradient(transparent 60%, #ffe566 60%);
}
.marker-under-red {
	background: linear-gradient(transparent 60%, #ffb6b9 60%);
}

.entry-content>*, .demo .entry-content p {
	margin-bottom: 1.6em;
}

.speech-wrap {
	margin-top: 3em!important;
	margin-bottom: 3em!important;
}
.speech-icon img {
	margin-bottom: 0;
}

.footer {
    background-color: #d8dde4;
    border-bottom: solid 6px #234777;
}
.copyright {
    color: #333;
}
.fotter_link {
    color: #333 !important;
}


.fz-05em {
	font-size: 0.5em!important;
}
.fz-06em {
	font-size: 0.6em!important;
}
.fz-07em {
	font-size: 0.7em!important;
}
.fz-08em {
	font-size: 0.8em!important;
}
.fz-09em {
	font-size: 0.9em!important;
}
.fz-11em {
	font-size: 1.1em!important;
}
.fz-12em {
	font-size: 1.2em!important;
}
.fz-13em {
	font-size: 1.3em!important;
}
.fz-14em {
	font-size: 1.4em!important;
}
.fz-15em {
	font-size: 1.5em!important;
}

.m0{ margin: 0!important; }/*周りからのmarginを0に*/
.m0-t{ margin-top: 0!important; }/*上からのmarginを0に*/
.m0-r{ margin-right: 0!important; }/*右からのmarginを0に*/
.m0-b{ margin-bottom: 0!important; }/*下からのmarginを0に*/
.m0-l{ margin-left: 0!important; }/*左からのmarginを0に*/

.m5{ margin: 5px!important; }
.m5-t{ margin-top: 5px!important; }
.m5-r{ margin-right: 5px!important; }
.m5-b{ margin-bottom: 5px!important; }
.m5-l{ margin-left: 5px!important; }

.m10{ margin: 10px!important; }
.m10-t{ margin-top: 10px!important; }
.m10-r{ margin-right: 10px!important; }
.m10-b{ margin-bottom: 10px!important; }
.m10-l{ margin-left: 10px!important; }

.m15{ margin: 15px!important; }
.m15-t{ margin-top: 15px!important; }
.m15-r{ margin-right: 15px!important; }
.m15-b{ margin-bottom: 15px!important; }
.m15-l{ margin-left: 15px!important; }

.m20{ margin: 20px!important; }
.m20-t{ margin-top: 20px!important; }
.m20-r{ margin-right: 20px!important; }
.m20-b{ margin-bottom: 20px!important; }
.m20-l{ margin-left: 20px!important; }

.m25{ margin: 25px!important; }
.m25-t{ margin-top: 25px!important; }
.m25-r{ margin-right: 25px!important; }
.m25-b{ margin-bottom: 25px!important; }
.m25-l{ margin-left: 25px!important; }

.m30{ margin: 30px!important; }
.m30-t{ margin-top: 30px!important; }
.m30-r{ margin-right: 30px!important; }
.m30-b{ margin-bottom: 30px!important; }
.m30-l{ margin-left: 30px!important; }

.m40{ margin: 40px!important; }
.m40-t{ margin-top: 40px!important; }
.m40-r{ margin-right: 40px!important; }
.m40-b{ margin-bottom: 40px!important; }
.m40-l{ margin-left: 40px!important; }

.m50{ margin: 50px!important; }
.m50-t{ margin-top: 50px!important; }
.m50-r{ margin-right: 50px!important; }
.m50-b{ margin-bottom: 50px!important; }
.m50-l{ margin-left: 50px!important; }

.m60{ margin: 60px!important; }
.m60-t{ margin-top: 60px!important; }
.m60-r{ margin-right: 60px!important; }
.m60-b{ margin-bottom: 60px!important; }
.m60-l{ margin-left: 60px!important; }

.m70{ margin: 70px!important; }
.m70-t{ margin-top: 70px!important; }
.m70-r{ margin-right: 70px!important; }
.m70-b{ margin-bottom: 70px!important; }
.m70-l{ margin-left: 70px!important; }

.m80{ margin: 80px!important; }
.m80-t{ margin-top: 80px!important; }
.m80-r{ margin-right: 80px!important; }
.m80-b{ margin-bottom: 80px!important; }
.m80-l{ margin-left: 80px!important; }

.m90{ margin: 90px!important; }
.m90-t{ margin-top: 90px!important; }
.m90-r{ margin-right: 90px!important; }
.m90-b{ margin-bottom: 90px!important; }
.m90-l{ margin-left: 90px!important; }

.m100{ margin: 100px!important; }
.m100-t{ margin-top: 100px!important; }
.m100-r{ margin-right: 100px!important; }
.m100-b{ margin-bottom: 100px!important; }
.m100-l{ margin-left: 100px!important; }

.m120{ margin: 120px!important; }
.m120-t{ margin-top: 120px!important; }
.m120-r{ margin-right: 120px!important; }
.m120-b{ margin-bottom: 120px!important; }
.m120-l{ margin-left: 120px!important; }


.btn-k {
    background-color: #62ca60; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 5px 0 0 #60ad57; /* ボタン陰色 */
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 2em auto 4em;
    padding: 0.3em 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
}
.btn-k:hover {
    opacity: 0.8;
}
.btn-k a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    position: relative;
    overflow: hidden;
}
.btn-k a::before {
    display: block;
    position: absolute;
    z-index: 1;
    left: -100%;
    top: -50vh;
    content: '';
    width: 3rem;
    height: 100vh;
    transform: rotate(5deg);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    animation: highLight 3s ease-in-out 0s infinite;
}
@keyframes highLight {
    from { left: -5%; }
    15%, 100% { left: 105%; }
}
.btn-k > img { float: left; }
.btn-k::after{ content: ''; clear: left; }

.fotter_link {
	color: #FFF;
}

.box-green-titleon {
	position: relative;
	max-width:600px;
	margin: 2em auto;
	padding: 1.7em 2em;
	border: 2px solid #58be89;
	border-radius: 4px;
}
.box-green-titleon .box-title {
	position: absolute;
	top: -10px;
	left: 30px;
	background: #fff;
	color: #58be89;
	padding: 0 10px;
	line-height: 1;
	font-size: 20px;
	font-weight: bold;
}
.box-green-titleon p {
	margin: 0;
	padding: 0;
}


/* FAQショートコード */
.faq_block .faq_q::before,
.faq_block .faq_a::before {
    color: #fff;
    box-shadow: none;
    border-radius: 50%;
    position: absolute;
    top: .75em;
    left: 0;
    display: block;
    width: 2em;
    line-height: 2;
    text-align: center;
    font-family: Arial,sans-serif;
}
.faq_block .faq_q::before {
    font-weight: 400;
    content: "Q";
    background-color: #d55656;
}
.faq_block .faq_a::before {
    content: "A";
    background-color: #6599b7;
}
.faq_block .faq_q,
.faq_block .faq_a {
    position: relative;
    padding: 0.75em 1em 1em 3em;
    line-height: 1.8;
}
.faq_block .faq_q {
    font-weight: 700;
}
.faq_block .faq_a:not(:last-child) {
    margin-bottom: 1em;
    padding-bottom: 2em;
    border-bottom: solid 1px rgba(200,200,200,.5);
}
.faq_block .faq_q {
    font-weight: 700;
}
.article dd.faq_a {
  margin-left: 0px;
}
.faq_block div {
  border-top: 1px solid #AAA;
  padding: 20px 10px 10px 10px;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
	.btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a {
		margin: 2em 4em;
		padding: 14px 20px;
		font-size: 1.1em;
	}
}


/*1030px以下*/
@media screen and (max-width: 1030px){

}


/*768px以下*/
@media screen and (max-width: 768px){
	main.main{
		padding: 10px 25px;
	}

	.btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a {
		margin: 2em 3em;
		padding: 14px 35px;
		font-size: 1.2em;
	}

	.blogcard-snipet {
		margin-top: 0;
	}
}


/*480px以下*/
@media screen and (max-width: 480px){
	main.main{
		padding: 10px 15px;
	}
	.article h3, .article h4, .article h5, .article h6 {
		margin-top: 2em;
	}

	.btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a {
		margin: 2em 0;
		padding: 14px 35px;
		font-size: 1.1em;
	}

}