@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.3
*/

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

.f08em {font-size: 0.8em;}

.swpm-button-wrapper input[type="submit"] {
  color: #fff;
	background-color: #094;
	border-bottom: 2px solid #00662d;
	padding: 1rem 3rem 1rem 2rem;
    border-radius: 1em;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

.swpm-button-wrapper:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}

/*=================================
著者プロフィール
==================================*/
/* プロフィール全体を囲む箱のスタイル */
.author-profile {
    background-color: #f9f9f9; /* 背景色（お好みの色に） */
    border: 1px solid #e0e0e0;   /* 枠線 */
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
}

/* タイトルや名前のスタイル */
.author-profile-title {
    font-size: 1.25rem;
    background: #c32121; /* image.pngのような赤い見出しにする場合 */
    color: #fff;
    padding: 10px;
    margin: 0 0 15px 0;
}
.author-position {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}
.author-name {
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: 1px solid #c32121;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* 横並びにするための設定（画面が広い時だけ横並び） */
.author-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 600px) {
    .author-body {
        flex-direction: row; /* 横並びにする */
        align-items: flex-start;
    }
    .author-image {
        flex: 0 0 150px; /* 画像の横幅を150pxに固定 */
        text-align: center;
        margin: 0;
    }
    .author-text {
        flex: 1; /* 残りの幅をテキストが使う */
    }
}

/* SNSボタンの簡単な装飾 */
.author-sns {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.author-sns a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background: #eee;
    color: #333;
    text-decoration: none;
    font-size: 0.8rem;
}
/* ホバーした時の色（例：Xは黒、FBは青などお好みで） */
.author-sns a:hover {
    opacity: 0.8;
}
/* =================================
   著者プロフィール内 SNSボタン専用スタイル
   ================================== */

/* ボタンが並ぶ横一列のエリアを左寄せに整える */
.author-sns {
    margin-top: 12px !important;
    display: flex !important;
    justify-content: flex-start !important; /* 画像の真下に左寄せ */
    gap: 8px !important;                     /* ボタン同士の間隔 */
    padding: 0 !important;
    list-style: none !important;
}

/* SNSボタンの形状：最初の状態（角丸の四角・サイズ32px）を再現 */
.author-sns a {
    display: flex !important;
    align-items: center !important;     /* ◀ 縦方向の真ん中寄せ */
    justify-content: center !important;   /* ◀ 横方向の真ん中寄せ */
    width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;          /* ◀ 行の高さによるズレをリセット */
    padding: 0 !important;              /* ◀ 内部の余白によるズレをリセット */
    border-radius: 4px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* マウスを乗せたときに少し浮き上がらせる演出 */
.author-sns a:hover {
    transform: translateY(-2px) !important;
    opacity: 0.9 !important;
}

/* ---------------------------------
   各SNSのブランドカラーを強制適用
   --------------------------------- */

/* X (旧Twitter) ：クラス名「x」またはURL判定 */
.author-sns a.x,
.author-sns a[href*="twitter"],
.author-sns a[href*="x.com"] {
    background-color: #1da1f2 !important; /* 元の綺麗な水色（黒が良い場合は #111111 に変更してください） */
}

/* Facebook ：クラス名「facebook」またはURL判定 */
.author-sns a.facebook,
.author-sns a[href*="facebook"] {
    background-color: #1877f2 !important; /* Facebookのブルー */
}

/* Instagram ：クラス名「instagram」またはURL判定 */
.author-sns a.instagram,
.author-sns a[href*="instagram"] {
    /* インスタ特有の綺麗なグラデーション */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}



/*■■■スマホ非表示■■■*/
@media only screen and (max-width: 480px)
{.pc {display: none!important}}

/*■■■ＰＣ非表示■■■*/
@media only screen and (min-width: 481px)
{.sumaho {display: none!important}}


strong.tomato { color: tomato !important;}
.tomato { color: tomato !important;}
strong.red { color: red !important;}
.red { color: red !important;}
strong.green { color: green !important;}
.green { color: green !important;}
.page .main-body .article-body h2{font-size: 1.3em}

.page .main-body .article-body h3{
     font-size: 100%;
     text-align: left;
     color: #330;
     clear: both;
     border: solid 1px #AAA;
     border-left: solid 8px #FF8000;
     padding: 3px;
     padding-left: 5px;
}
.main-body h3::after {content: none}

p {margin: 0 0 1.7em}

.section-in .textwidget .menu     {
	text-align: center;
	width: 200px;
    float: left;
    border: solid 1px #AAA;
    border-bottom: solid 2px;
    border-right: solid 2px;
    padding: 10px;
	font-size: 10px;
}

.menu ul, ol {list-style-type: none}

ul, menu, dir {
    list-style-type: disc;
    -webkit-margin-start: 0px;
    -webkit-padding-start: 0px;
}

.menu_sb1 ul li a {
    display: block;
    overflow: auto;
    font: bold 17px Verdana;
	color: black;
    padding: 8px;
    text-indent: -5px;
	line-height: 5px;
}

article ol{list-style-type: decimal}
figcaption {text-align:center; font-size:12px}

/* ヘッダー画像の背景を黒に */
.site-header-conts {background-color: #000;padding: 0;}


/*タグのデザイン*/
.post-tag{display:inline-block}
.post-tag dd li {
    background-color: #fff;
	margin:0px;
	padding:0px;
}
.post-tag dd li a {
    margin: 0 0 5px 5px;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 2px 2px 0 0 #ddd;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    vertical-align: middle;
}
.post-tag dd li a::before {
    display: inline-block;
    margin-right: 5px;
    content: "\e91f";
    font-size: 12px;
    color:  #e3504c;
}
.tagcloud a,.post-tag a{
 font-size: 12px !important; /* 文字のサイズ */
 margin: 2px 0px;
 white-space: nowrap;
 border:solid 1px #aaa;
}
.tagcloud a:hover,.post-tag a:hover {
 border:solid 1px #f60; /* マウスホバー時の枠色*/
}



/*-------------------- 吹き出しを作る（ここから）--------------------*/
.kaiwa {
 margin: 40px 0;
 padding : 0 40px;
 position: relative;
}
.kaiwa:after,.bal:before {
 clear: both;
 content: "";
 display: block;
}
.kaiwa-img-left {
 position: absolute;
 left: 0;
 margin: 0;
 width: 60px;
 height: 60px;
}
.kaiwa-img-right {
 position: absolute;
 right: 0;
 margin: 0;
 width: 60px;
 height: 60px;
}
.kaiwa  figure img {
 width: 100%;
 height: 100%;
 border: 1px solid #aaa;
 border-radius: 50%;
 margin: 0;
}
.kaiwa-img-description {
 padding: 5px 0 0;
 font-size: 10px;
 text-align: center;
 line-height: 1;
}
.kaiwa-text-right {
 position: relative;
 margin-left: 40px;
 padding: 10px;
 border: 1px solid #192f60;
 border-radius: 10px;
 float: left;
 max-width: 100%;
}
.kaiwa-text-left {
 position: relative;
 margin-right: 40px;
 padding: 10px;
 border: 1px solid #006400;
 border-radius: 10px;
 float: right;
 max-width: 100%;
}
.kaiwa p {
 margin: 0 0 20px;
}
.kaiwa p:last-child {
 margin-bottom: 0;
}
/* 会話 */
.kaiwa-text-right:before {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-right: 10px solid #192f60;
 top: 15px;
 left: -20px;
}
.kaiwa-text-right:after {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-right: 10px solid #fff;
 top: 15px;
 left: -19px;
}
.kaiwa-text-left:before {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-left: 10px solid #006400;
 top: 15px;
 right: -20px;
}
.kaiwa-text-left:after {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-left: 10px solid #fff;
 top: 15px;
 right: -19px;
}
/* 考え毎 */
.think .kaiwa-text-right,.think .kaiwa-text-left {
 border-radius: 30px;
}
.think .kaiwa-text-right:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 left: -12px;
}
.think .kaiwa-text-right:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 left: -19px;
}
.think .kaiwa-text-left:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 right: -12px;
}
.think .kaiwa-text-left:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 right: -19px;
}
/*-------------------- 吹き出しを作る（ここまで）--------------------*/

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

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

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