@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

a img:hover{opacity:0.7;}
.categoryid-40 .entry-categories-tags{display:none;}

/*記事下関連記事変更*/
#custom_html-22 .main-widget-label,#custom_html-23 .main-widget-label,#custom_html-24 .main-widget-label,#custom_html-25 .main-widget-label{border-left: solid 2px #2e3c56; padding: 0em .75em; font-size: 20px; font-weight:bold;}
.article-footer .navi-entry-cards{ display:flex;flex-wrap: wrap;}
.article-footer .navi-entry-card-link{ width:25%; border:none;padding:7px !important;}
@media screen and (max-width: 600px) and (min-width: 481px){.article-footer .navi-entry-card-link{width:33.33%}}
@media screen and (max-width: 480px){.article-footer .navi-entry-card-link{width:50%}}
.article-footer .navi-entry-card-link:hover{ box-shadow: none;}
.article-footer .navi-entry-card-thumb{ width:100%;}
.article-footer .navi-entry-card-thumb img{ border-radius:5px; transition: transform .25s,-webkit-transform .25s;box-shadow: 0 6px 8px rgb(0 0 0 / 15%), 0 6px 6px -6px rgb(0 0 0 / 15%);}
.article-footer .navi-entry-card-thumb img:hover{transform: scale(1.06);opacity:1;}
.article-footer .navi-entry-card-content{clear:both;margin-left:0;margin-right:0;}
.article-footer .card-arrow .a-wrap::after{display:none;}
.article-footer .navi-entry-card-title{padding-top:10px;font-size:14px;text-decoration:underline;font-weight:700;line-height:1.5;}
.article-footer .navi-entry-card-title:hover{opacity:0.7;}
.article-footer .navi-entry-card-snippet{display:none;}


.um-account-meta-img-b,.um-misc-img{display: none !important;}


/*paypal解説用*/
.paypal-box{ position: relative;}
.paypal-link{ display:inline-block;}
.paypal-text{ display: none; font-size:0.9em; position: absolute; background: #fffaf0; border: 2px solid lightgray; border-radius:5px; width: 90%; z-index: 1; padding:1em;}
.paypal-link:hover + .paypal-text { display: block;}

/*タブ付きボックス*/
.blank-box.bb-tab{margin-top:2.5em;}
/*タブ付きボックスに入れた箇条書きの下マージン調整*/
.blank-box ul{ margin-bottom:0;}
/*アイコンボックスのスマホ時パディング*/
@media screen and (max-width: 440px){.information-box, .question-box, .alert-box { padding: 32px 6px 6px;}}

/*パンくずリスト文字サイズ変更*/
@media screen and (min-width: 441px){.breadcrumb { font-size: 15px;}}

/*ボックス色変更*/
/*赤をうすく*/
html .body .has-red-border-color{ border-color:#ea5550;}
html .body .caption-box.has-red-border-color .box-label{ background-color: #ea5550;}
/*水色を濃く*/
html .body .has-watery-blue-background-color{ background-color: #e7f5fe;}

/*タイムライン*/
.timeline-item-title { font-size:1.1em;}

/*箇条書き*/
ol,ul{padding-left:25px;}
/*スクロール*/
html{scroll-behavior:smooth;}
/*記事トップカード表示*/
.entry-card-wrap{box-shadow:3px 3px 6px -2px #555;}
@media screen and (min-width: 768px){.entry-card-wrap img{ width:90%;}
	.entry-card-thumb{ width:250px;}
	.entry-card-content { margin-left: 250px;margin-right:10px;}}
.entry-card-thumb  .cat-label{display:none;}
.entry-card-content .admin-pv{display:none;}
.entry-card-content .entry-card-title {margin-bottom:10px;line-height:1.5;}
.entry-card-snippet{ line-height:1.5;}
@media screen and (max-width: 480px){.e-card-title { font-size: 14px;}}
.new-entry-card-link{border:1px solid lightgray; border-radius:5px;margin-bottom:1em !important;box-shadow:3px 3px 6px -2px #555;}
.new-entry-card-title{ font-size:14px; padding-top:0.7em;padding-bottom:0.7em;}
.list-title-in { padding: 0 60px;}

/*タブ付き囲み枠の左右マージン*/
.block-box{ margin-left: 0; margin-right: 0;}
/*ラベル付きボックス*/
.label-box-label{ font-size:1em; display: inline-block; background: #fff;}
.label-box-content{ padding-top:1.5em;}
/*日付の下のマージン*/
.date-tags{ margin-bottom:3em;}
/*ヘッダーメニュー*/
#navi .navi-in a{ font-weight: bold; font-size:15px;}
/*通知バー*/
.notice-area{ font-size:1em; font-weight: bold; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 15%), 0 3px 3px -2px rgb(0 0 0 / 15%);}
.notice-area red{ color: red;}
@media screen and (max-width: 400px){.notice-area{ font-size:0.9em;}}
@media screen and (max-width: 350px){.notice-area{ font-size:0.85em;}}
/*サイドバー*/
.sidebar h3{ background:#2e3c56; color: white;}
#categories-2{ margin-bottom: 2em;}
/*サイドバーの背景を透明に*/
.sidebar{ background:none; padding-top:0;}
/*検索窓*/
.search-edit{ box-shadow: 0 2px 5px 0 rgb(0 0 0 / 15%), 0 3px 3px -2px rgb(0 0 0 / 15%);}
#search-2 .search-box{ margin-top: 0;}
/*サイドバープロフィール*/
#author_box-2 .circle-image img,#slide-in-author_box-2 .circle-image img{ border-radius:0;}
#slide-in-author_box-2 .author-description p{line-height:1.7;}
/*プロフィールボックスの背景*/
.nwa .author-box{background: #ffffff; margin-top:0; padding:0; border-radius:3px; border:none; border:1px solid rgb(200 200 198);}
.nwa .author-box .author-widget-name{ background:#2e3c56; color: white; font-size:1.17em; font-weight:bold; padding:12px; border-top-left-radius:3px; border-top-right-radius:3px; margin-bottom:1em;}
#sidebar .author-description p{line-height:1.7;}
/*プロフィールボックスのSNSアイコン*/
#author_box-3{ margin-bottom:4em;}
#author_box-3 .sns-buttons .follow-button{ margin-right:8px;}
.author-box .sns-follow-buttons a.follow-button{ border-radius:50%; width:40px; height: 40px; font-size: 24px;}
.author-box .sns-follow-buttons a.follow-button span{ line-height: 37px;}
.author-box .sns-follow-buttons a.follow-button .icon-twitter-logo{color: #1da1f2;}
.author-box .sns-follow-buttons .twitter-button{ border: 1px solid #1da1f2 !important;}
.author-box .sns-follow-buttons a.follow-button .icon-facebook-logo{color: #3b5998;}
.author-box .sns-follow-buttons .facebook-button{ border: 1px solid #3b5998 !important;}
.author-box .sns-follow-buttons a.follow-button .icon-feedly-logo{color: #2bb24c;}
.author-box .sns-follow-buttons .feedly-button{ border: 1px solid #2bb24c !important;}
.author-box .sns-follow-buttons a.follow-button .icon-rss-logo{color: #f26522;}
.author-box .sns-follow-buttons .rss-button{ border: 1px solid #f26522 !important;}
/*記事下のプロフィールボックス*/
#author_box-3 .main-widget-label{ display:inline-block; border:1px solid #2e3c56; background:#2e3c56;color:#fff; padding:3px 10px; font-size:0.9em;}
#author_box-3 .author-box{border:1px solid #2e3c56; border-radius:0;}
#author_box-3 .circle-image img{border-radius:0;}
#author_box-3 .author-thumb{margin-top:10px;}
#author_box-3 .author-name{margin-top:5px;}
#author_box-3 .author-description p{line-height:1.7; margin-bottom:0;}
/*サイドバー目次*/
.toc-widget-box{ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;border:1px solid rgb(200 200 198);}
.toc-widget-box li{ margin-bottom:0.3em;}
#custom_html-3{ margin-top: 1.5em;}
.sidebar-scroll .toc{ background: #fff;}
.sidebar-scroll .toc-widget-box{max-height: 170px; overflow-y: scroll; background: #fff;}
.sidebar-scroll #toc-2 h3{ margin-bottom: 0;}
.sidebar-scroll #toc-2{ margin-bottom: 0.5em;}
.nwa .toc { padding: 0 0.5em 0 1em;}
#custom_html-2{margin-bottom:0em;}

/*アメブロ版誘導ボックス*/
#custom_html-20,#slide-in-custom_html-20{border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;border:1px solid rgb(200 200 198); margin-bottom:1.8em;}
#custom_html-20 h3,#slide-in-custom_html-20 h3{margin:0; text-align:center;}
#slide-in-custom_html-20 h3{font-size:1.1em;}
#custom_html-20 div,#slide-in-custom_html-20 div div{background: #fff; padding:0.5em; line-height:1.7;}
#slide-in-custom_html-20 div div{font-size:0.9em;}
.side-button a:hover{ opacity:0.7;}
/*人気記事*/
#custom_html-21,#slide-in-custom_html-21{border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;border:1px solid rgb(200 200 198); margin-bottom:0;}
#slide-in-custom_html-21{margin-bottom:1.8em;}
#custom_html-21 h3,#slide-in-custom_html-21 h3{margin:0; text-align:center;}
#slide-in-custom_html-21 h3{font-size:1.1em;}
#custom_html-21>div,#slide-in-custom_html-21>div div{background: #fff;padding:0.5em;}
#custom_html-21 .a-wrap:hover { box-shadow: none; background: #efefef;}
#custom_html-21 .widget-entry-card{ font-size: 15px;}
#slide-in-custom_html-21 .widget-entry-card{ font-size: 14px; padding:0;}
#slide-in-custom_html-21 .widget-entry-cards figure{width:100px;}
#slide-in-custom_html-21 .widget-entry-card-content { margin-left:106px;}
#custom_html-21 .card-title-bold .card-title{font-weight:400; line-height:1.5; padding-top:0.5em;}
#slide-in-custom_html-21 .card-title-bold .card-title{font-weight:400; line-height:1.5; padding: 5px 0 0 0;}
#custom_html-21 .card-arrow .card-content{margin-right:0;}
#slide-in-custom_html-21 .card-arrow .card-content{margin-right:0;padding:0 0 0 0.5em;}
#custom_html-21 .card-arrow .a-wrap::after,#slide-in-custom_html-21 .card-arrow .a-wrap::after{display:none;}
#custom_html-21 .border-square a,#slide-in-custom_html-21 .border-square a{ border-top:none; border-left:none; border-right:none;}
#custom_html-21 .border-square a:not(:last-child){ border-bottom:2px dashed #ddd;}
#slide-in-custom_html-21 .border-square a:not(:last-child){ border-bottom:2px dashed #ddd;}
#custom_html-21 .border-square a:last-child,#slide-in-custom_html-21 .border-square a:last-child{border-bottom:none; margin-bottom:0;}
#custom_html-21 .widget-entry-cards .a-wrap{margin-bottom:0;}
#slide-in-custom_html-21 .widget-entry-cards .a-wrap{margin-bottom:5px;; padding:5px 0 5px 0;}
/*カテゴリー*/
#categories-3,#custom_html-17,#slide-in-custom_html-17{ background: #fff; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;border:1px solid rgb(200 200 198); margin-bottom:4em;}
#slide-in-custom_html-17{margin-bottom:1.8em;}
#categories-3 h3,#custom_html-17 h3,#slide-in-custom_html-17 h3{ margin-bottom:0; margin-top:0;}
#slide-in-custom_html-17 h3{text-align: center;}
#categories-3 h3:before,#custom_html-17 h3:before{ font-family: "Font Awesome 5 Free"; content: "\f0ca"; color: #fff; padding-right:8px;}
/*親カテゴリー*/
.widget_categories > ul,#custom_html-17 .textwidget > ul,#slide-in-custom_html-17 .textwidget > ul{ padding:0.5em 0 1em 0;}
#custom_html-17 .textwidget ul li,#slide-in-custom_html-17 .textwidget ul li{ list-style: none;}
#custom_html-17 .textwidget ul,#slide-in-custom_html-17 .textwidget ul{ margin: 0;}
.widget_categories ul li a,#custom_html-17 .textwidget ul li a,#slide-in-custom_html-17 .textwidget ul li a{ line-height: 1.5; border-bottom: 1px dashed #CCCCCC; padding: 10px 1em; color:#333; text-decoration: none; display: block;}
#slide-in-custom_html-17 .textwidget ul li a{font-size:0.9em;}
#custom_html-17 .textwidget ul li a:hover{background-color: #f5f8fa; transition: all 0.3s ease-in-out; color: #333;}
.widget_categories ul li a::before,#custom_html-17 .textwidget ul li a::before,#slide-in-custom_html-17 .textwidget ul li a::before{ font-family: "Font Awesome 5 Free"; content: "\f303"; color: #4169e1; padding-right: 6px; font-weight: 900;}
.widget_categories > ul > li > a:first-child,#custom_html-17 .textwidget > ul > li > a:first-child,#slide-in-custom_html-17 .textwidget > ul > li > a:first-child{ border-top: none;}
/*子カテゴリー*/
.widget_categories ul li ul,#custom_html-17 .textwidget ul li ul,#slide-in-custom_html-17 .textwidget ul li ul{ padding-left:1.5em;}
.widget_categories > ul ul a,#custom_html-17 .textwidget > ul ul a,#slide-in-custom_html-17 .textwidget > ul ul a{ padding-left: 1em;}
.widget_categories ul li ul li a::before,#custom_html-17 .textwidget ul li ul li a::before,#slide-in-custom_html-17 .textwidget ul li ul li a::before{ font-family: "Font Awesome 5 Free"; content: "\f105"; color: #4169e1; padding-right: 6px; font-weight: 900;}
/*スマホ時のTwitterタイムライン非表示*/
#slide-in-custom_html-4{display:none;}
/*スマホ時のサイドバー下バナー・Twitterバナー非表示*/
#slide-in-custom_html-2{display:none;}
#slide-in-custom_html-3{display:none;}
/*スマホ時のサイドバー目次非表示*/
#slide-in-toc-2{display:none;}
/*PC時にサイドバー上バナーを消す*/
#custom_html-30{display:none;}
/*CTA*/
.widget_cta_box{ margin-top: 3em; margin-bottom: 3em;}

/*フッターの記事一覧*/
.footer { margin-top: 0;}
.footer-bottom { margin-top: 10px;}
.navi-footer-in a {font-size:16px;}
#navi-footer-in a:hover{ background:#2e3c56; text-decoration:underline;}
#content-bottom{ background: #e0e7fa; padding-top:1em; margin-bottom:0;}
#custom_html-29{margin-bottom:0em; padding-bottom: 1.5em;}
#content-bottom-in #custom_html-29 .custom-html-widget{ display:flex;}
#b-left{ width:30%; padding: 16px 20px 0px 16px;}
#b-right{ width:70%; padding: 16px 0 0 16px;}
.b-title{ margin-bottom:5px; font-size: 1.17em; font-weight:bold;}
.b-content{ display:flex; flex-wrap: wrap; margin-bottom: 1em;}
.b-content div{ width:200px; margin-bottom: 5px;}
.b-content a{ text-decoration:none; color:black;}
.b-content a:hover{ text-decoration:underline;}
.b-content div:before{ font-family: "Font Awesome 5 Free"; content:"\f105"; font-weight: 900; margin-right:3px;}
@media screen and (max-width: 480px){
.navi-footer-in a {font-size:13px;}
#content-bottom-in #custom_html-29 .custom-html-widget{ display:block;}
#b-left{ width:100%; padding: 16px 12px;}
#b-right{ width:100%; padding: 16px 12px;}
.b-content div{ width:50%; margin-bottom: 5px;}
.b-content a{ font-size:0.9em;}
}

/*ブログカード*/
.blogcard-wrap{ width:100%;}
.blogcard-title{ line-height:1.5; font-size:1.05em; margin-top:1.2em;}
/*.blogcard-title:after{ display:block; content:"⇒ この記事を読む"; font-size:0.9em; font-weight:500; color:#1967d2;}*/
.blogcard-footer{display:none;}
.blogcard-snippet{ display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:1.8;}
.blogcard-outer{ position: relative; margin-top: 2em;}
.blogcard-outer-title{position: absolute; top: -5px; left: 15px; background: #fff; font-size: 0.85em; line-height: 0.2; padding: 0 5px; z-index:10;}
.blogcard-outer a{ margin:0;}
.a-wrap:hover{ background: #fff; box-shadow: 10px 10px 12px lightgray;}
.blogcard-outer .blogcard{ border: 1px solid gray; padding-top: 1em;}
.blogcard-outer > figure{ margin-bottom: 0;}
@media screen and (max-width: 480px){
.blogcard-snippet {display:none;}
.blogcard-title{ margin-top: 1em;}
}

/*Twitterカード下のフォローボタン*/
.follow-button{ margin-bottom:1.5em; margin-top:0; text-align:center;}
.follow-button a{ color:white; text-decoration:none; font-size:0.9em; background:#1b95e0; border:2px solid #1b95e0; border-radius:7px; padding:5px 10px;}
.follow-button a:before{ font-family: FontAwesome; content:"\f099";}
.follow-button a:hover{ color: #1b95e0;background: white;}

/*フッター*/
#custom_html-11 p{ margin:0;}
#custom_html-11 .textwidget{ background: #2e3c56; height: 500px; overflow-y: scroll;}



.entry-content .main-widget-label {
    display: block;
}
/*マーカー*/
.marker{background: linear-gradient(transparent 60%, #ffd6d6 60%);}
.green-marker{background: linear-gradient(transparent 60%, #b2ffb2 60%);}
.blue-marker{background: linear-gradient(transparent 60%, #c1e0ff 60%);}
/*h1タグ*/
@media screen and (max-width:480px){.entry-title{padding:0.6em 0;}}
/*h2タグ*/
.article h2{font-size:1.4em; padding:20px; background:#2e3c56; color:white; position:relative; margin-bottom:1.5em;}
.article h2::before,.article h2::after{position:absolute;left:0;content:'';width:100%;height:6px;box-sizing: border-box;}
.article h2::before{top:0;border-bottom:2px solid white;}
.article h2::after {bottom:0;border-top:2px solid white;}
@media only screen and (max-width:599px){.article h2{font-size:20px;padding:20px;}}
/*h3タグ*/
.article h3{background-color:#ffecb4; border-left:none; border-top:3px solid #ffc107; padding:10px 15px 10px 15px; font-size:1.4em; margin-bottom:1.5em;margin-top:0; border-right:none; border-bottom:none; font-size: 1.3em;}
/*h4タグ*/
.article h4{border:none; display:inline-block; background:#e6f3f4; border-radius:5px; padding:10px 15px ; font-size:1em;}
/*疑似h4*/
.hyodai{border:none; display:inline-block; background:#e6f3f4; border-radius:5px; padding:10px 15px ; font-size:1em; font-weight:bold;}
.postid-208 .entry-content h3,.postid-472 .entry-content h3,.postid-943 .entry-content h3,.postid-1740 .entry-content h3,.postid-2580 .entry-content h3,.postid-308 .entry-content h3{margin-bottom:1em; border:none; display:inline-block; background:#ffecb4; border-radius:5px; padding:10px 15px ; font-size:1em; font-weight:bold;}

/*.postid-943 a{ text-decoration:none;}*/
.postid-943 a:hover{text-decoration:none; }

.pageid-3737 .ss-top{ display: none !important;}
.pageid-3737 .article-footer{ display: none;}

/*目次*/
.toc{border-top:4px double rgba(200,200,200,.5); border-bottom: 4px double rgba(200,200,200,.5); border-left:none; border-right: none; width:100%; }
.article .toc{background: linear-gradient(-45deg,transparent 25%,rgba(200,200,200,.2) 25%,rgba(200,200,200,.2) 50%,transparent 50%,transparent 75%,rgba(200,200,200,.2) 75%,rgba(200,200,200,.2)) !important; background-size: 4px 4px !important; font-size:0.95em;}
@media screen and (max-width: 480px){.article .toc{ padding: 1em;}}
.toc-title{text-align: center; color:#2e3c56; position: relative; margin-bottom:0em;padding-top:0; padding-bottom:0;padding-left:0; line-height:2; font-size:1.15em;}
.toc.tnt-number-detail ol li:before { color:#d28368;}
.toc-content{padding-top:0 !important;}
.toc-content ol{margin:0;}
.toc-content li a:hover{color: #e53900; text-decoration:none;}

/*難易度ボックス*/
.level{margin-top:0;margin-bottom:3em;}
.level td:nth-child(1){ text-align:center; width:30%;}
.level tr:first-child td{border-top:2px solid #2e3c56;}
.level tr:last-child td{border-bottom:2px solid #2e3c56;}
.level td:first-child{border-left:2px solid #2e3c56;}
.level td:last-child{border-right:2px solid #2e3c56; }
.level-before{margin-bottom:0 !important; text-align:center; background:#2e3c56; color:white;padding:7px;}

.normal tr:nth-of-type(2n+1){background: none !important;}
.normal td:nth-child(1){background: #f0f8ff !important;}
.normal td:nth-child(2){background: none !important;}
.normal td{border: 1px solid #dcdcdc;}
.normal tr:first-child td{border-top:1px solid gray;}
.normal tr:last-child td{border-bottom:1px solid gray;}
.normal td:first-child{border-left:1px solid gray;}
.normal td:last-child{border-right:1px solid gray; }
/*インフォメーションBOXなどのスマホ時のアイコンサイズ*/
@media screen and (max-width: 440px){ .information-box::before{ font-size: 25px;} .alert-box::before{ font-size: 25px;}}

/*中身に線のない表*/
.noline-table{margin-top:0; border:2px solid #2e3c56;border-radius:5px;}
.noline-table td{border:none;background:white;}
.noline-table tr{ border-bottom:1px dashed lightgray;}

/*記事下SNSシェアボタン*/
.article-footer .sns-share-buttons .button-caption{ display:none;}
.article-footer .sns-share-buttons{justify-content:center;}
.article-footer .sns-share-buttons .share-button{border-radius:50%;}
.article-footer .sns-share-buttons .share-button{width:40px; height:40px; font-size:19px;}
.article-footer .sns-share-buttons .share-button:not(:last-child){margin-right:10px;}
@media screen and (max-width: 834px){
.article-footer .sns-share-buttons .share-button{width:40px !important; height:40px !important; font-size:16px;}
.article-footer .sns-share-buttons .share-button:not(:last-child){margin-right:8px;}
}
.sns-share-buttons .twitter-button:hover{color:#1da1f2; background:white; border:1px solid #1da1f2;}
.sns-share-buttons .facebook-button:hover{color:#3b5998; background:white; border:1px solid #3b5998;}
.sns-share-buttons .hatebu-button:hover{color:#2c6ebd; background:white; border:1px solid #2c6ebd;}
.sns-share-buttons .pocket-button:hover{color:#ef4056; background:white; border:1px solid #ef4056;}
.sns-share-buttons .line-button:hover{color:#00c300; background:white; border:1px solid #00c300;}
.sns-share-buttons .copy-button:hover{color:#333; background:white; border:1px solid #333;}
.sns-share-buttons .pinterest-button:hover{color:#bd081c; background:white; border:1px solid #bd081c;}

/*グーテンベルク・リスト入りボックス*/
.caption-box-content{ padding: 0.8em;}
.caption-box-content li{ margin-bottom: 0.5em !important;}

/*補足ボックス*/
.hosoku { background: #fff3db; margin: 0 0 1.5em 0;box-shadow:3px 3px 6px -2px #555; }
.hosoku_title { display: inline-block; background: #fca60d; color: #ffffff; padding: 2px 10px; margin: 0; }
.hosoku_inner { padding: 15px; margin: 0; }
.hosoku_inner p{ margin:0;}

/*注意ボックス*/
.alert_box { background: #ffebee; box-shadow: 3px 3px 6px -2px #555; margin: 0 0 1.5em 0; }
.alert_box_title { display: inline-block; background: #f57a78; color: #ffffff; padding: 2px 10px; margin: 0; }
.alert_box_inner { padding: 5px 15px 15px 15px; margin: 0; }
.alert_box_inner p { margin: 0; }

/*小まとめボックス*/
.matomebox { position: relative; border: 2px solid #59a136; margin: 1.5em 0 1.5em 0; box-shadow:3px 3px 6px -2px #555;}
.matomebox_title { position: absolute; top: -0.8em; left: 20px; background: #ffffff; color: #59a136; padding: 0 0.5em; margin: 0; }
.matomebox_inner { padding: 20px 15px 15px 15px; margin: 0; }
.matomebox_inner p { margin: 0; }

/*黒板*/
.blackboard{border:8px solid #aa6600; background:#104300; color:#ffffff; box-shadow:2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding:15px; margin:0 0 1.5em 0;}

/*関連記事ボックス*/
.linkbox { position: relative; border: 2px solid #aa6600; margin: 1.5em 0 1.5em 0; box-shadow:3px 3px 6px -2px #555;}
.linkbox_title { position: absolute; top: -0.8em; left: 20px; background: #aa6600; color: #ffffff; padding: 0 0.5em; margin: 0; font-weight:bold;}
.linkbox_inner { padding: 25px 15px 15px 15px; margin: 0; }
.linkbox_inner p { margin: 0;}
.linkbox_inner ul { margin-top: 0; margin-bottom:0;}
.linkbox_inner li { margin-right: 0 !important;}
@media screen and (max-width: 768px){ .linkbox_inner{ padding-left: 0;}}
/*箇条書きボックス*/
.list_box { border: 2px solid #fca60d; box-shadow: 3px 3px 6px -2px #555; padding: 15px; margin: 0 0 1.5em 0;}
.list_box ul { margin-top: 0; margin-bottom:0;}

/*青ボタン*/
.btn_blue{border:2px solid #6bb6ff; background: #6bb6ff;display: inline-block; margin:0 !important; padding: 0.4em 1.3em; border-radius: 5px; box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15); color: #fff; text-decoration: none !important; vertical-align: middle; transition:0.3s ease-in-out; font-weight:bold; font-size:1.1em;}
@media screen and (min-width: 768px){ .btn_blue br{display:none;}}
.btn_blue:hover{background:white;color:#6bb6ff;}
.twbtn_mae:before{content:"＼ Twitter限定情報も多数あるよ ／"; font-size:0.9em; }
.twbtn_mae{text-align:center; margin-bottom:0 !important;}
.twbtn_p{margin-top:0;text-align:center;}
.twbox{border:2px solid #fdc668; padding:1.5em; border-radius:5px; margin-bottom:1.5em; background:#fff3db;box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);}
.twbox p{margin:0;}

/*コードボックス*/
.code{background:#f5f5f5; margin:0;}
.code-before{text-align:center;margin:0;}
.code-before:before{content:"以下コードをコピー ⇒ HTML表示に貼付";font-size:0.8em;color:#494949;}
.code_title{display:inline-block; color:white; font-size:0.8em; padding:3px 8px; margin:15px 0 0 15px;}
.code_inner{font-size:0.8em; padding:15px; }
.htm{background:#2e3c56;}
.htm::before{content:"HTMLコード";}

.code_css{background:#f5f5f5; margin:0;}
.code_css .htm+.code_inner{border-bottom:1px dashed lightgray; }
.css{background:#f7ab00;}
.css::before{content:"CSSコード";}

pre{background-color:#f5f5f5 !important; border:none; overflow:visible; white-space:pre-wrap; padding:0; margin:0; font-family:Menlo,Monaco,Consolas,"CourierNew",monospace;line-height:1.5;}
.code-under{ margin:0 0 1.5em 0;}
.code-under li{ font-size:0.85em;}

/*切替タブ*/
.su-tabs{padding:0px !important; border-radius:0px !important; background:none !important;}
.su-tabs-pane{padding:0 !important; font-size:1em !important;}
.su-tabs-nav{text-align:center !important; margin-bottom:1em;}
.su-tabs-nav .tab_orange{background:#fca60d; border:3px solid #fca60d;border-radius:50%; width:20px; height:20px !important; min-height:20px; padding:0 !important; margin-right:1em;}
.su-tabs-nav .tab_red{background:#d9333f; border:3px solid #d9333f;border-radius:50%; width:20px; height:20px !important; min-height:20px; padding:0 !important; margin-right:1em;}
.su-tabs-nav .tab_blue{background:#4169e1; border:3px solid #4169e1;border-radius:50%; width:20px; height:20px !important; min-height:20px; padding:0 !important; margin-right:1em;}
.su-tabs-nav .tab_green{background:#59a136; border:3px solid #59a136;border-radius:50%; width:20px; height:20px !important; min-height:20px; padding:0 !important; margin-right:1em;}
.su-tabs-nav .tab_brown{background:#8b4513; border:3px solid #8b4513;border-radius:50%; width:20px; height:20px !important; min-height:20px; padding:0 !important; margin-right:1em;}
.su-tabs-nav .tab_pink{background:#eb6ea5; border:3px solid #eb6ea5;border-radius:50%; width:20px; height:20px !important; min-height:20px; padding:0 !important; margin-right:1em;}
.su-tabs-nav .tab_skyblue{background:#87cefa; border:3px solid #87cefa;border-radius:50%; width:20px; height:20px !important; min-height:20px; padding:0 !important; margin-right:1em;}
.su-tabs-nav .tab_yellow{background:#ecd828; border:3px solid #ecd828;border-radius:50%; width:20px; height:20px !important; min-height:20px; padding:0 !important; margin-right:1em;}


.su-tabs-nav .su-tabs-current{background:white !important}
@media only screen and (max-width:768px){.su-tabs-mobile-stack .su-tabs-nav{display:flex !important; justify-content: center; margin-bottom:1.5em;}}
@media only screen and (max-width: 768px){.su-tabs-mobile-stack .su-tabs-nav span { display: inline-block !important;}}
.su-tabs:before{content:"＼ 色を選ぶとコードが変わる ／"; text-align:center !important; display:block;margin-bottom:0.5em;}
.no-before-tab .su-tabs:before{ content:"＼ 選ぶとコードが変わる ／";}


.su-tabs-nav .tab_list{font-weight:bold;border:2px solid #59a136;background:#59a136;border-radius:5px !important;margin-bottom:5px;margin-right:5px !important;color:white !important;}
.su-tabs-nav .tab_list:hover{color:#59a136 !important;}
.su-tabs-nav .tab_list.su-tabs-current{border:2px solid #59a136;color:#59a136 !important;}

/*アコーディオン*/
.toggle-wrap{margin:0 auto 1.5em auto;}
.toggle-wrap input+br{display:none;}
.toggle-button{width:80%; margin:0 auto; border:1px solid #2e3c56;}
.toggle-content{border:none !important; padding:1.5em 0 0 0 !important;}
.toggle-content p:first-child,.toggle-content p:last-child{display:none;}

/*アコーディオン（実際に利用）*/
.su-spoiler-style-fancy{ border: none !important; border-radius: 5px !important; color: #333; background: linear-gradient(-45deg,transparent 25%,rgba(200,200,200,.15) 25%,rgba(200,200,200,.15) 50%,transparent 50%,transparent 75%,rgba(200,200,200,.15) 75%,rgba(200,200,200,.15)) !important; background-size: 4px 4px !important;}
.su-spoiler-style-fancy.su-spoiler-closed>.su-spoiler-title,.su-spoiler-style-fancy>.su-spoiler-title { border: 1px solid #e0e0e0 !important; font-size:1em !important; padding-top: 15px; padding-bottom: 15px; border-radius: 5px !important; background: linear-gradient(-45deg,transparent 25%,rgba(200,200,200,.15) 25%,rgba(200,200,200,.15) 50%,transparent 50%,transparent 75%,rgba(200,200,200,.15) 75%,rgba(200,200,200,.15)) !important; background-size: 4px 4px !important;}
.su-spoiler-icon{ top: calc(50% - 10.7px) !important; font-size:18px !important;}
.su-spoiler-style-fancy>.su-spoiler-content { border-radius: 0px !important; border:none; border-top-width: 0px; padding-top: 1m; padding-bottom:1em;}
.su-spoiler-style-fancy>.su-spoiler-content h4{ margin-top:0;}
/*吹き出し*/
.speechL,.speechR{display: flex; margin-bottom: 1.5em;}
.speechL { margin-right: 100px;}
@media screen and (max-width: 768px){ .speechL { margin-right: 0;}}
.speechR { flex-direction: row-reverse; margin-left: 100px;}
@media screen and (max-width: 768px){ .speechR { margin-left: 0;}}
.speechL .person, .speechR .person { width: 12%; min-width: 12%;}
@media screen and (max-width: 480px){.speechL .person, .speechR .person { width: 16%; min-width: 16%;}}
.speechL .icon, .speechR .icon { margin: 0;}
.speechL .icon img, .speechR .icon img { border-radius: 50%; width: 100%;}
.speechL .name, .speechR .name { text-align: center; font-size: 14px;}
@media screen and (max-width: 768px){ .speechL .name, .speechR .name { font-size: 10px;}}
@media screen and (max-width: 350px){ .speechL .name, .speechR .name { font-size: 9px;}}
.speechL .say, .speechR .say{ position: relative; max-width: calc(100% - 14%); height: 100%; border-radius: 6px; padding: 10px;}
.speechL .say{ margin-left: 20px;}
.speechR .say{ margin-right: 20px;}
.speechL .say:before, .speechR .say:before { position: absolute; display: block; content: ''; width: 0; height: 0; top: 10px; border-top: 12px solid transparent; border-bottom: 12px solid transparent;}
.speechL .say:before { left: -12px;}
.speechR .say:before { right: -12px; left: auto;}
.speechL .say:after, .speechR .say:after { position: absolute; display: block; content: ''; width: 0; height: 0; top: 10px; border-top: 12px solid transparent; border-bottom: 12px solid transparent;}
.speechL .say:after { left: -9px;}
.speechR .say:after { right: -9px; left: auto;}
.speechL .say p, .speechR .say p { margin: 0;}

/*会話風（オレンジ）*/
.spL_orange .say, .spR_orange .say { border: 2px solid #fdc668; background: #ffffff;}
.spL_orange .say:before { border-right: 12px solid #fdc668;}
.spL_orange .say:after { border-right: 12px solid #ffffff;}
.spR_orange .say:before { border-left: 12px solid #fdc668;}
.spR_orange .say:after { border-left: 12px solid #ffffff;}

/*アイコンにボーダー*/
.bd_orange img{ border: 2px solid #fdc668;}

/*アイコンに背景*/
.bg_orange img{ background: #ffecc7;}

/*ココナラカード*/
.coconala-profile br,.coconala-img a br{ display:none;}

/*アプリーチ*/
.appreach { text-align: left; padding: 10px; border: 1px solid #7C7C7C; border-radius: 5px; overflow: hidden;}
.appreach:after { content: ""; display: block; clear: both;}
.appreach p { margin: 0;}
.appreach a:after { display: none;}
.appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0 3% 0 0 !important; width: 25% !important; height: auto !important; max-width: 120px !important;}
.appreach__detail { display: inline-block; font-size: 20px; line-height: 1.5; width: 72%; max-width: 72%;}
.appreach__detail:after { content: ""; display: block; clear: both;}
.appreach__name { font-size: 16px; line-height: 1.5em !important; max-height: 3em; overflow: hidden;}
.appreach__info { font-size: 12px !important;}
.appreach__developper, .appreach__price { margin-right: 0.5em;}

.appreach__links { float: left; height: 40px; margin-top: 8px; white-space: nowrap;}
.appreach__aslink img { margin-right: 10px; height: 40px; width: 135px;}
.appreach__gplink img { height: 40px; width: 134.5px;}
.appreach__star { position: relative; font-size: 14px !important; height: 1.5em; width: 5em;}
.appreach__star__base { position: absolute; color: #737373;}
.appreach__star__evaluate { position: absolute; color: #ffc107; overflow: hidden; white-space: nowrap;}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}