@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
    /*1 ヘッダー*/
        /*1-1 ヘッダーをカスタマイズ*/
        .header {
        position: relative;
        box-shadow: 0 3px 6px; /*影 左右はずらさず（0）、下に3px影を伸ばして、6pxのぼかしを加える*/
        background: #00c3cd;
        }
        
        /*1-2 ヘッダーのサイトタイトル*/
        .site-name-text{ /*デフォルトサイズ 28px*/
        font-size: 40px;
        }
        @media screen and (max-width: 768px){ /*端末幅が768px以下のとき*/
        #header .site-name-text{ /*デフォルトサイズ 22px*/
        font-size: 30px;
         }
        }
        @media screen and (max-width: 480px){ /*端末幅が480px以下のとき*/
        #header .site-name-text{ /*デフォルトサイズ 18px*/
        font-size: 25px;
         }
        }

        /*1-3 ヘッダーロゴの位置を調整*/
        .logo {
        margin-top: 22px; /*上からの余白*/
        }
        @media screen and (max-width: 480px){ /*スマホ用*/
        .logo {
        margin-top: 12px;
        }
        }

    /*2 ボディ*/
    	/*2-1 スマホ画面サイズの余白を調整*/
		@media screen and (max-width: 768px) {
		.content .main, .content .sidebar {
		padding: 0 20px; /*左右の余白のみ調整*/
		}
		}

        /*2-2 トップページ*/
            /*2-2-1 記事一覧をオシャレにカスタマイズする*/
            .main, .sidebar { /*メインカラムやサイドバーの背景色を消す*/
            background: none;
            }
            .cat-label { /*記事一覧のカテゴリーの表示をカスタマイズ*/
            top: 0.5em; /*上からの距離*/
            left: 0.5em; /*左からの距離*/
            border: none; /*ボーダーを消す*/
            font-size: 12px; /*文字サイズ*/
            color: #fff; /*文字色*/
            background: #00c3cd; /*背景色*/
            padding: 1px 10px; /*余白*/
            border-radius: 14px; /*角を丸く*/
            }
            /*画像に影を付けてフワっと浮かせる*/
            .entry-card-thumb {
            transition-duration: 0.2s; /*アニメーションの時間*/
            box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
            }
            .entry-card-thumb:hover {
            transform: translateY(-6px); /*マウスホバーで上に移動*/
            box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
            }
            .entry-card-thumb img { /*画像下の隙間を消す*/
            vertical-align: bottom;
            }
            .a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
            background: none;
            }
            .entry-card-title { /*タイトルのデザインを修正*/
            margin-top: 10px; /*上に余白を付ける*/
            line-height: 1.5; /*行間を広く*/
            }
            .entry-card-title:hover {
            color: #00c3cd; /*マウスホバー時の色*/
            }
            @media screen and (max-width: 768px){
            .entry-card-title {
            font-size: 14px; /*スマホでの文字の大きさ*/
            line-height: 1.4; /*スマホでの行間*/
             }
            }
            .e-card-info { /*日付部分も調整する*/
            color: #666; /*色を薄く*/
            }
            @media screen and (max-width: 768px){
            .e-card-info {
            font-size: 14px; /*スマホでの文字サイズ*/
             }
            }

            /*2-2-2ページネーション（ページ送り）をカスタマイズ*/
            .pagination-next-link {
            background-color: #00c3cd; /*背景色*/
            color: #fff; /*文字色*/
            border: none; /*ボーダーを消す*/
            border-radius: 30px;
            box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2); /*「次のページ」部分の影*/
            }
            .pagination-next-link:hover { /*マウスホバー時*/
            background-color: #55e5ee;
            transition: all 0.5s ease;
            color: #fff;
            }
            .page-numbers { /*通常時*/
            color: #00c3cd;
            border: 1px solid #00c3cd;
            border-radius: 50%;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); /*数字部分の影*/
            }
            .pagination .current { /*現在のページ*/
            background-color: #00c3cd;
            color: #fff;
            }
            .page-numbers.dots { /*ドット「…」の部分*/
            opacity: 1;
            background: none;
            }
            .pagination a:hover { /*マウスホバー時*/
            background-color: #00c3cd;
            color: #fff;
            }
            a.prev, a.next { /*両サイドの記号を消す*/
            display: none;
            }
            @media screen and (max-width: 480px) { /*スマホ表示を大きくする*/
            .page-numbers {
            width: 48px;
            height: 48px;
            line-height: 48px;
             }
            }

        /*2-3 Hタグ*/
            /*2-3-1 既存見出しのCSSをリセットさせる*/
            .article h1 {
            padding: 0;
            background: none;
            }
            .article h2 {
            padding: 0;
            background: none;
            }
            .article h3 {
            border: none;
            padding: 0;
            }
            .article h4 {
            border: none;
            padding: 0;
            }
            .article h5 {
            border: none;
            padding: 0;
            }
            .article h6 {
            border: none;
            padding: 0;
            }
            /*2-3-2 記事タイトルの見た目をカスタマイズ*/
            .post-title {
            font-size: 26px;
            margin: 16px 0;
            line-height: 1.3;
            padding: 0 0 10px 0;
            position: relative;
            }
            .post-title::after { /* グラーデーションラインをひく擬似要素 */
            content:"";
            display: block;
            position: absolute;
            bottom: -10px;
            height: 4px;
            width: 100%;
            background: -webkit-linear-gradient(left, #00c3cd 0%,#00c3cd 100%);
            background: linear-gradient(to right, #00c3cd 0%,#00c3cd 100%);
            }

            /*2-3-3 タイトルをアニメーションで動かす*/
            .post-title {
            animation-name: fadein;
            animation-duration: 2s;
            }
            @keyframes fadein {
            from {
            opacity: 0;
            transform: translateY(20px);
            }
            to {
            opacity: 1;
            transform: translateY(0);
            }
            }

            /*2-3-4 h1～h6*/
            /*h1*/
            @media screen and (max-width: 480px){ /*480px以下*/
            .article h1{
            font-size: 18px;
            letter-spacing: 0.05em; 
            line-height: 1.5;
            } 
            }
            /*h2*/
            .article h2 {
            position: relative;
            color: white;
            background: #00c3cd;
            line-height: 1.25;
            padding: 0.5em 0.5em;
            }
            @media screen and (max-width: 480px){ /*480px以下*/
            .article h2{
            font-size: 18px;
            letter-spacing: 0.05em;
            line-height: 1.5;
            padding: 0.5em 0.5em;
            }
            }
            /*h3*/
            .article h3 {
            color: #545454;/*文字色*/
            padding: 0.4em 0.5em;/*上下左右の余白*/
            border-top: solid 3px #00c3cd;/*上線*/
            border-bottom: solid 3px #00c3cd;/*下線*/
            }
            @media screen and (max-width: 480px){ /*480px以下*/
            .article h3{
            padding: 0.4em 0.5em;/*上下左右の余白*/
            font-size: 18px;
            letter-spacing: 0.05em; 
            }
            }
            /*h4*/
            .article h4 {
            padding: 0.25em 0.5em;/*上下 左右の余白*/
            color: #545454;/*文字色*/
            background: transparent;/*背景透明に*/
            border-left: solid 5px #00c3cd;/*左線*/
            }
            /*h5*/
            .article h5 {
            color: #545454;/*文字色*/
            padding: 0.4em 0;/*上下の余白*/
            border-bottom: solid 2px #00c3cd;/*下線*/
            }
            /*h6*/
            .article h6 {
            color: #545454;/*文字色*/
            }

        /*2-4 記事内アイキャッチ画像の調整*/
        .eye-catch img{
        padding-top:20px; /*記事タイトルとの余白*/
        margin: 0 auto; /*中央寄せ*/
        }
        .eye-catch .cat-label { /*アイキャッチ内のカテゴリ名を非表示*/
        display: none;
        }

            /*2-4-1 カテゴリーとタグの見た目を調整*/
            .cat-link { /* カテゴリー */
            color: #fff;
            text-decoration: none;
            display: inline-block;
            margin-right: 5px;
            padding: 2px 8px;
            font-size: 12px;
            background-color: #00c3cd;
            border-radius: 20px; /*角の丸み*/
            word-break: break-all;
            }
            .cat-link:hover { /* マウスホバー時 */
            opacity: 1;
            background: #55e5ee;
            transition: all .5s ease; /* ふわっと変化するアニメーション */
            color: #fff;
            }
            .tag-link { /* タグ */
            color: #fff;
            text-decoration: none;
            display: inline-block;
            margin-right: 5px;
            padding: 2px 8px;
            font-size: 12px;
            background-color: #00c3cd;
            border: none;
            border-radius: 20px; /*角の丸み*/
            word-break: break-all;
            }
            .tag-link:hover { /* マウスホバー時 */
            background: #55e5ee;
            transition: all .5s ease;
            color: #fff;
            }

        /*2-5 投稿日・更新日をカスタマイズ*/
        .date-tags {
        line-height: .8;
        position: relative;
        color: #aaa; /* 文字色を薄くする */
        }
        .post-date {
        order: 1; /* 投稿日の表示順を1番目に */
        }
        .post-update {
        order: 2; /* 更新日の表示順を2番目に */
        }
        .post-date, .post-update {
        padding: 2px;
        display: inline;
        font-size: .8em; /* 少しだけ文字サイズを大きく */
        }
        .post-date::before { /* 投稿日のアイコンの変更 */
        font-family: FontAwesome;
        content: "\f040";
        padding-right: 3px;
        }
        .post-update::before { /* 更新日のアイコンの変更 */
        font-family: FontAwesome;
        content: "\f021";
        padding-right: 3px;
        }

        /*2-6 目次*/
        /*前提条件としてCocoonの目次設定にて、「目次表示の深さ：H3見出しまで」、「目次ナンバーの表示：表示しない」にする*/
        .toc { /**全体の定義**/
        display: block; /*幅を指定*/
        }
        .toc-list > li{ /*H2を指定*/
        font-weight: bold; /*太字にする*/
        }
        .toc-list > li li{ /*H3を指定*/
        font-weight: normal;
        padding-left: 1em; /*デフォルトより1文字、左に移動*/
        line-height: 1.4; /*行間を指定*/
        margin: 0.7em 0px; /*段落間を指定*/
        }
        /*480px以下*/
        @media screen and (max-width: 480px){
        .toc-list > li li{ /*H3を指定*/
        font-weight: normal;
        padding-left: 0%; /*デフォルト値*/	 
        }
        }

        /*2-7 画像に影を追加*/
        .entry-content img { /*クラス名はテーマによって都度変更する*/
        box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*影をつける*/
        /*display: inline-block; ブロック要素化（当行を適用すると、クラシックエディタ時に画像が左寄せになってしまうので無効中 2020/09/19）*/
        margin: 0 auto; /*中央寄せ*/
        }

    	/*2-8 各ブロックの装飾を変更*/
		/*2-8-1 タブ見出しボックスの角を変更*/
		.tab-caption-box-label {
		    border-top-left-radius: 5px;
		    border-top-right-radius: 5px;
		}
		.tab-caption-box-content {
		    border-radius: 5px;
		    border-top-left-radius: 0;
		}
		/*2-8-2 タイムラインの◯を変更*/
		.timeline-item:before {
		    content: '';
		    width: 12px;
		    height: 12px;
		    background: #00c3cd;
		    position: absolute;
		    left: 105px;
		    top: 24px;
		    border-radius: 100%;
		}
		/*2-8-3 検索案内のボタン背景色を変更*/
		.search-form div.sbtn {
		    background-color: #00c3cd;
		    color: #fff;
		    padding-left: 20px;
		    padding-right: 30px;
		    position: absolute;
		}
		/*2-8-4 ボタンに影をつける*/
		.btn{
			box-shadow: 0 7px 10px -5px rgba(0,0,0,0.5);
		}
		/*2-8-5 ラベルボックスのタイトル背景を変更*/
		.label-box-label {
		    margin-left: 2em;
		    padding: 0 0.8em;
		    font-size: 0.9em;
		    background-color: #f8f4e6;
		    display: inline-block;
		}
		/*2-8-6 タブボックスの角を調整*/
		.blank-box.bb-tab::before {
		    border-radius: 5px 5px 0 0;
		    }
		/*2-8-7 付箋風ボックスの色を変更*/
		.blank-box.sticky.st-blue {
		    border-color: #00c3cd;
		    background-color: #E5F2FF;
		}
		/*2-8-8 Table（表）背景色の設定*/
		table th {
		background: #55e5ee;
		border-color: #00c3cd;
		color: #ffffff;
		text-align: center;
		vertical-align: middle;
		}
		table td {
		background: #ffffff;
		border-color: #00c3cd;
		text-align: center;
		vertical-align: middle;
		}
		/*2-8-9 白抜きボックスの設定*/
		.blank-box{
		border-color: #FFD900;/*色変更*/
		}

        /*2-9 記事内でクラス名を指定して装飾を追加*/
            /*2-9-1 ブロックに枠を追加*/
			.article-frame { /*ブロックにクラス名「article-frame」を指定*/
			background: transparent;
			padding: 1em;
			margin:2em 0;
			border: solid 3px #FFD900;
			border-radius: 3px;/*角の丸み*/
			}

            /*2-9-2 リストブロックに枠を追加*/
			.article-list { /*ブロックにクラス名「article-list」を指定*/
			background: transparent;
			padding: 1em 2.5em;
			margin:2em 0;
			border: solid 3px #FFD900;
			border-radius: 3px;/*角の丸み*/
			}
            
			/*2-9-3 YouTubeの装飾*/
			.video-container {
			margin: 0px auto; /*中央寄せ*/
			}
			
			/*2-9-4 Instagramの装飾*/
			.my-instagram {
			margin: 0px auto; /*中央寄せ*/
			max-width: 540px; /*最大幅を指定*/
			}
			
			/*2-9-5 Twitterの装飾*/
			.twitter-tweet {
			margin: 0px auto; /*中央寄せ*/
			}

		/*2-10 Googleマップの調整*/
		/*2-10-1 Googleマップの色合いを調整（現在停止中）*/
		/*iframe{
		-webkit-filter: saturate(150%);
		filter: saturate(150%);
		}*/
		
		/*2-10-2 Googleマップをレスポンシブに対応させる*/
		 .gmap {
		   position: relative;
		   width: 100%;
		   padding-top: 75%; /* = height ÷ width × 100 */
		 }
		 .gmap iframe {
		   position: absolute;
		   top: 0;
		   left: 0;
		   width: 100%;
		   height: 100%;
		 }

		/*2-11 ブログカードをカスタマイズ*/
		/* https://s41t0h.jp/cocoon-simple-blogcard/ */
		.blogcard { /* 枠線を変更 */
		padding: 1rem;
		color: #333;
		position: relative;
		border: none !important;
		box-shadow: 0px 0px 4px -1px rgba(0,0,0,1);
		}

		a.blogcard-wrap{
		font-weight: normal;
		width: 100%;
		}
		a.blogcard-wrap:hover{
		background-color: transparent!important;
		opacity: 0.8;
		}

		a.blogcard-wrap:hover img.blogcard-thumb-image{
		transform: scale(1.05);
		transition: .3s;
		}

		.blogcard-thumbnail {
		line-height: 0;
		margin-right: 1rem;
		overflow: hidden;
		width: 22%;
		}

		.blogcard-title{
		margin-bottom: .5rem;
		line-height: 1.7;
		}

		.blogcard-title::before{
		content: '関連記事';
		display: inline-block;
		font-size: .7em;
		background-color: #FFD900;
		padding: .3em .5em;
		font-weight: bold;
		color: #fff;
		border-radius: 2px;
		vertical-align: middle;
		margin-right: .5rem;
		}

		.blogcard-snippet{
		display: none;
		}
		
		/*続きを読むを挿入*/
		.internal-blogcard:after,.external-blogcard:after{
		content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
		font-weight: bold;
		font-size: .8em;
		color: #fff;
		padding: .5em;
		border-radius: 2px;
		width: 30%;
		background-color: #00c3cd;
		margin-left: auto;
		text-align: center;
		position: absolute;
		bottom: .8rem;
		right: .8rem;
		}

		@media screen and (max-width: 480px){
		.blogcard-thumbnail{
		width: 40%;
		}
		.blogcard-snippet{
		display: none;
		}
		/*続きを読むを挿入*/
		.internal-blogcard:after,.external-blogcard:after{
		content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
		font-weight: bold;
		font-size: .8em;
		color: #fff;
		padding: .5em;
		border-radius: 2px;
		width: 45%;
		background-color: #00c3cd;
		margin-left: auto;
		text-align: center;
		position: static;
		bottom: 0rem;
		right: 0rem;
		}
		}

		.blogcard-footer{
		clear: none;
		}

		.internal-blogcard-site{
		display: none;
		}

		.blogcard-date{
		float: none;
		font-family: "游ゴシック体", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "メイリオ", Meiryo, Arial, sans-serif;
		font-weight: bold;
		color: #AAAAAA;
		}
		
		/*2-12 もしものかんたんリンクをカスタマイズ*/
		.easyLink-info-btn {
		display: inline!important;
		}
		.easyLink-info-btn a{
		margin: 5px 10px 5px 0!important;
		padding: 0 5px!important;
		line-height: 35px!important;
		display: inline-block!important;
		width: 100%!important;
		box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
		font-size: 1em!important;
		}
		.easyLink-info-btn-amazon{
		background:#f6a306!important;
		}
		.easyLink-info-btn-rakuten{
		background:#cf4944!important;
		}
		.easyLink-info-btn-yahoo{
		background:#51a7e8!important;
		}
		@media screen and (max-width: 480px){
		div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
		width: 100%!important;
		position: relative;
		}
		.easyLink-info-btn a:before {
		padding-right: 5px;
		right: 5px;
		position: absolute;		
		}
		}
		
		/*2-13 アフィリエイトテキストリンクを改行しない*/
		/*<span class="img-inline">ここにアフィリエイトのコード</span>*/
		/*2020/08/13：一時的に無効化 問題がなければコード削除
		.img-inline > img {
		display: inline !important;
		}
		*/
		
        /*2-14 SNSシェアボタンをカスタマイズ*/
		/*---SNSボタンを丸くする---*/
		#main .button-caption {
		display: none; /*キャプション非表示*/
		}
		
		/*SNSシェアボタン*/
		.sns-share-message{
		font-weight: bold; /*太字*/
		color: #00c3cd; /*文字色*/
		}
		.sns-share-buttons {
		flex-wrap: nowrap; /*折り返さない*/
		justify-content: center; /*中央寄せ*/
		}
		.sns-share-buttons a {
		border-radius: 50%; /*丸くする*/
		font-size: 20px; /*アイコンのサイズ*/
		margin: 0 3px; /*ボタン同士の間隔*/
		}
		#main .sns-share a {
		width: 35px; /*ボタンの横幅*/
		height: 35px; /*ボタンの高さ*/
		}
		
		/*SNSフォローボタン*/
		.sns-follow-message{
		font-weight: bold; /*太字*/
		color: #00c3cd; /*文字色*/
		}
		.sns-follow-buttons {
		justify-content: center; /*中央寄せ*/
		}
		.sns-follow-buttons a {
		border-radius: 50%; /*丸くする*/
		font-size: 20px; /*アイコンのサイズ*/
		margin: 0 3px; /*ボタン同士の間隔*/
		}
		#main .sns-follow a {
		width: 35px; /*ボタンの横幅*/
		height: 35px; /*ボタンの高さ*/
		}
		.social-icon { /*アイコン（円ではなく、その中のSNSマーク）のサイズ変更*/
		font-size: 17px;
		}
		/*SNSフォローボタン(SANGOと同じ 2021/12/22現在これを使用)*/
		/*ウィジェットFollow Me*/
		.widget .follow_btn {
		  margin-top: 0;
		  text-align: center;
		}
		.widget .follow_btn a {
		  margin: 15px 5px 10px;
		text-decoration: none;
		}
		.widget .follow_btn a:before {
		  width: 50px;
		  height: 50px;
		  line-height: 50px;
		}
		/*Follow Me*/
		.follow_btn {
		  margin-top: 15px;
		}
		.follow_btn a {
		  display: inline-block;
		  margin: 15px 10px 0 0;
		  color: #919191;
		  text-align: center;
		  font-size: 11px;
		}
		.follow_btn a:hover {
		  text-decoration: none;
		  transform: translateY(-4px);
		}
		.follow_btn a:before {
		  display: block;
		  width: 60px;
		  height: 60px;
		  margin: 0 auto;
		  border-radius: 12px;
		  color: #fff;
		  font-family: FontAwesome;
		  font-size: 35px;
		  text-align: center;
		  line-height: 60px;
		}
		.fa5 .follow_btn a:before {
		  font-family: "Font Awesome 5 Brands";
		}
		.follow_btn .Twitter:before {
		  background: #3ab4ff;
		  content: "\f099";
		}
		.follow_btn .Facebook:before {
		  background: #4f96f6;
		  content: "\f09a";
		}
		.follow_btn .Instagram:before,
		.profile-sns li .fa-instagram {
		  background: url("library/images/insta.jpg");
		  background-repeat: no-repeat;
		  background-size: cover;
		  content: "\f16d";
		}
		.follow_btn .YouTube:before {
		  background: #f0504f;
		  content: "\f16a";
		}
		.fa5 .follow_btn .YouTube:before {
		  content: "\f167";
		}
		.follow_btn .Feedly:before {
		  background: #72d865;
		  content: "\f143";
		}
		.follow_btn .RSS:before {
		  background: #ee802f;
		  content: "\f09e";
		}
		.follow_btn .Website:before {
		  background: #ffb35d;
		  content: "\f0ac";
		}
		.follow_btn .LINE:before {
		  background: #59d869;
		  content: "\f3c0";
		}
		.fa4 .follow_btn .LINE:before {
		  content: "\f075";
		}
		.fa5 .follow_btn .Feedly:before,
		.fa5 .follow_btn .RSS:before,
		.fa5 .follow_btn .Website:before {
		  font-family: "Font Awesome 5 Free";
		  font-weight: 900;
		}
		
        /*2-15 コメント欄をカスタマイズ*/
        .comment-btn { /*Cocoon設定でコメント入力欄を「ボタンで表示切り替え」に設定している時に適用されるコード1*/
        background-color: #00c3cd;
        color: #fff;
        border: none;
        font-size: 20px;
        transition: 0.5s;
        }
        .comment-btn:hover { /*Cocoon設定でコメント入力欄を「ボタンで表示切り替え」に設定している時に適用されるコード2*/
        background-color: #55e5ee;
        color: #fff;
        transition: 0.5s;
        }
        /*コメント入力欄のカスタマイズ*/
        .comment-respond { /*入力欄全体の枠*/
        border: 2px solid #00c3cd;
        margin-top: -2px;
        }
        .comment-respond p {
        margin: 1em 0;
        }
        #commentform { /*フォーム部分の枠*/
        padding: 20px;
        }
        p.comment-notes { /*注意書きの文字サイズ*/
        font-size: 14px;
        }
        p.form-submit {
        margin: 2em 0 1em 0;
        }
        #commentform input[type="text"], #commentform textarea { /*入力スペースの装飾*/
        padding: 11px;
        border: none;
        border-radius: 4px;
        font-size: 18px;
        width: 100%;
        background: #e2e2e2; /*入力スペースの背景色*/
        }
        #commentform input[type="submit"] { /*送信ボタンの装飾*/
        -webkit-appearance: none;
        padding: 11px;
        width: 100%;
        margin: 0;
        cursor: pointer;
        background: #00c3cd;
        color: #fff;
        border: none;
        font-size: 16px;
        transition: 0.5s;
        }
        #commentform input[type="submit"]:hover { /*送信ボタンのマウスホバー時*/
        background: #55e5ee;
        transition: 0.5s;
        }
        /*コメントリストのカスタマイズ*/
        /*以下はコメントタイプをシンプルスレッドに設定している場合のコード（デフォルトに変更する場合はうぇぶあしびさんのページを参考に変更する）*/
        /*吹き出しにする場合は管理画面の「設定＞ディスカッション」より「アバターを表示」に設定する*/
        .comment-list { /*全体の枠*/
        border: 2px solid #00c3cd;
        padding: 0;
        border-radius: 5px 5px 0 0;
        }
        .comment-title { /*タイトルの装飾*/
        margin: 0;
        font-size: 24px;
        background: #00c3cd;
        color: #fff;
        padding-left: 20px;
        font-weight: normal;
        }
        .comment-title:before { /*タイトルにアイコンを付ける*/
        font-family: FontAwesome;
        content: '\f27b';
        color: #fff;
        margin-right: 4px;
        }
        .commets-list {
        padding: 20px 20px 20px 20px;
        }
        .commets-list > li {
        border-top: 2px dashed #00c3cd; /*スレッドを区切る点線*/
        margin-top: 30px;
        padding-top: 20px;
        }
        .commets-list > li:first-child {
        border: none;
        margin-top: 0;
        padding-top: 0;
        }
        .commets-list .children {
        border-left: 2px solid #ccc; /*返信コメントの左側のボーダー*/
        margin-top: 0;
        }
        .commets-list .avatar { /*アバターの位置調整*/
        float: left;
        border-radius: 50%;
        margin-right: 10px;
        }
        .st-comment-content { /*コメントの吹き出し*/
        background: #e2e2e2;
        padding: 2px 10px;
        margin: 20px 0 6px 0;
        border-radius: 10px;
        position: relative;
        }
        .st-comment-content::before { /*吹き出しの三角部分*/
        content: "";
        position: absolute;
        top: -14px;
        left: 50px;
        border-style: solid;
        border-color: transparent transparent #e2e2e2 transparent;
        border-width: 0 20px 20px 0;
        }
        .st-comment-content p { /*吹き出し内の文字を調整*/
        font-size: 14px;
        margin: 1em 0;
        line-height: 1.5em;
        }
        .comment-reply-link { /*返信ボタンの装飾*/
        color: #fff;
        border: none;
        border-radius: 20px;
        background: #00c3cd;
        padding: 1px 12px;
        transition: 0.5s;
        }
        .comment-reply-link:hover { /*返信ボタンのマウスホバー時*/
        color: #fff;
        background: #55e5ee;
        transition: 0.5s;
        }
        .commets-list .st-comment-body {
        margin-bottom: 0;
        }

    /*3 フッター*/
        /*3-1 フッター下部の隙間を調整*/
        .footer-bottom{
        padding-bottom: 25px; /* デフォルト:18px */
        }

        /*3-2 フッダーニューをカスタマイズ*/
        .footer {
        margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
        background: #00c3cd; /*フッター背景色*/
        border-top: 4px solid #fff; /*上部にボーダー追加*/
        }
        .footer-bottom {
        margin-top: 14px; /*フッター内上部の余白を詰める*/
        }
        .footer-bottom-logo { /*ロゴの位置調整*/
        float: none;
        bottom: auto;
        position: static;
        margin-bottom: 10px;
        }
        .footer-bottom-logo .logo-image {
        padding: 0;
        max-width: 160px; /*ロゴ画像を少し大きく*/
        margin: 0 auto;
        }
        .footer-bottom-content { /*メニュー＆クレジットの位置調整*/
        float: none;
        text-align: center;
        }
        .navi-footer-in > .menu-footer { /*メニューの位置調整*/
        justify-content: center;
        margin-bottom: 1em;
        }
        .navi-footer-in a {
        color: #fff; /*メニューの文字色*/
        }
        .navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
        color: #fff; /*文字色を通常時と同じに*/
        background: none; /*背景色をなしに*/
        text-decoration: underline; /*アンダーラインを追加*/
        }
        .footer-bottom.fnm-text-width .menu-footer li {
        line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
        }
        .copyright {
        color: #fff; /*クレジットの文字色*/
        }
        @media screen and (max-width: 834px) {
        .navi-footer-in > .menu-footer li.menu-item {
        border: none; /*モバイルでメニューのボーダーを消す*/
         }
        }
        @media screen and (max-width: 460px) {
        .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
        width: 100%;
        display: block;
        flex: auto;
        padding: 0.3em 0;
         }
        }

    /*4 サイドバー*/
        /*4-1 サイドバーの見出しデザインをカスタマイズ*/
        .sidebar h3 {
        background: none; /*背景色を解除*/
        padding: 0; /*余白をなしに*/
        font-size: 18px; /*文字サイズを小さく*/
        color: #545454;
        letter-spacing: 2px; /*文字の間隔を少し広く*/
        text-align: center;
        }
        .sidebar h3:after { /*下段にラインを引く*/
        content:"";
        display:block;
        height:2px;
        width:100%;
        background: #00c3cd;
        }
        
        /*4-2 サイドバーのSNSフォローボタンをカスタマイズ*/
		.sidebar .sns-follow-buttons a {
		width: 30%; /*ボタンの幅*/
		}
		.sidebar .sns-follow {
		margin: 0 0 24px 0;
		}
		.sidebar .sns-follow-buttons a {
		background: none !important;
		border: 1px solid #444d53;
		color: #444d53;
		border-radius: 50px;
		}
		.sidebar .twitter-button:hover {
		background-color: #1da1f2 !important;
		color: #fff;
		border-color: #1da1f2;
		}
		.sidebar .feedly-button:hover {
		background-color: #2bb24c !important;
		color: #fff;
		border-color: #2bb24c;
		}
		.sidebar .rss-button:hover {
		background-color: #f26522 !important;
		color: #fff;
		border-color: #f26522;
		}
        
        /*4-3 新着記事マウスホバー時を変更*/
        .widget_recent_entries ul li a:hover { 
        background: none;
        transition: 0.2s;
        color: #00c3cd;
        }
        
        /*4-4 サイドバーのカテゴリーのデザインをカスタマイズ*/
        .widget_categories ul li a { /*親カテゴリ用のコード*/
        color: #333;
        text-decoration: none;
        padding: 6px 0;
        display: block;
        padding-right: 4px;
        padding-left: 4px;
        border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
        font-size: 16px;
        }
        .widget_categories ul li a::before { /*親カテゴリのアイコン*/
        font-family: FontAwesome;
        content: "\f0da";
        padding-right: 10px;
        }
        .widget_categories > ul > li > a:first-child { 
        border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
        }
        .widget_categories > ul > li > a:last-child {
        border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
        }
        .widget_categories ul li a .post-count { /*記事数用のコード*/
        background: none; /*背景を消す*/
        border: 1px solid #ccc; 
        border-radius: 20px; /*角の丸み*/
        color: #555; /*文字色*/
        display: inline-block;
        padding: 3px 10px;
        text-decoration: none;
        font-size: 13px;
        margin: 2px;
        flex: 0 1 auto;
        display: flex;
        justify-content: space-between;
        }
        .widget_categories ul li a:hover { /*親子共通マウスホバー時*/
        background: none;
        transition: 0.2s;
        color: #00c3cd;
        }
        .widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
        background: #00c3cd;
        color: #fff;
        transition: 0.2s;
        }
        .widget_categories ul li ul { /*子カテゴリのボックス*/
        border-bottom: 1px dotted #ccc;
        }
        .widget_categories ul li ul li a { /*子カテゴリ用のコード*/
        color: #333;
        text-decoration: none;
        padding: 0 4px 4px 4px;
        display: block;
        border: none;
        }
        .widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
        font-family: FontAwesome;
        content: "・";
        padding: 0;
        }
        
        /*4-5 タググラウンドをカスタマイズ*/
        .tagcloud a {
        background: none; /*背景を消す*/
        border: 1px solid #ccc; 
        border-radius: 20px; /*角の丸み*/
        color: #555; /*文字色*/
        display: inline-block;
        padding: 3px 10px;
        text-decoration: none;
        font-size: 13px;
        margin: 2px;
        flex: 0 1 auto;
        display: flex;
        justify-content: space-between;
        }
        .tagcloud a .tag-caption::before {
        content: "#"; /*アイコンの変更*/
        padding-right: 3px;
        }
        .tagcloud a:hover { /*マウスホバー時*/
        background: #00c3cd;
        border: 1px solid #228e94;
        color: #fff;
        transition: 0.2s; /*アニメーションの時間*/
        }


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

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

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

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