@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-box{
    margin:40px 0;
    background:#fff;
    border:1px solid #ddd;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.author-title{
    margin:0;
    padding:18px 30px;
    background:#222;
    color:#fff;
    font-size:30px;
    font-weight:bold;
}

.author-position{
    margin:0;
    padding:28px 30px 12px;
    font-size:20px;
    color:#444;
}

.author-name{
    margin:0 30px;
    padding-bottom:12px;
    font-size:38px;
    font-weight:bold;
    color:#9b1d2d;
    border-bottom:3px solid #b71c1c;
}

.author-main{
    display:flex;
    gap:45px;
    padding:35px 30px;
}

.author-left{
    width:180px;
    flex-shrink:0;
    text-align:center;
}

.author-left img{
    width:180px;
    height:180px;
    border-radius:50%;
    object-fit:cover;
}

.author-sns{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:20px;
}

.author-sns a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    color:#fff;
    text-decoration:none;
    border-radius:50%;
    font-size:22px;
    transition:.3s;
}

.author-sns a:hover{
    transform:translateY(-3px);
    opacity:.85;
}

.author-sns .x{
    background:#111;
}

.author-sns .facebook{
    background:#1877f2;
}

.author-sns .instagram{
    background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.author-right{
    flex:1;
}

.author-right p{
    margin:0;
    font-size:18px;
    line-height:2;
}

.author-right hr{
    margin:30px 0;
    border:none;
    border-top:1px dashed #ccc;
}

.author-career{
    margin:0;
    padding:0;
    list-style:none;
}

.author-career li{
    position:relative;
    margin-bottom:14px;
    padding-left:24px;
    font-size:18px;
    line-height:1.8;
}

.author-career li::before{
    content:"■";
    position:absolute;
    left:0;
    color:#b71c1c;
}

@media screen and (max-width:768px){
    .author-title{
        font-size:24px;
        padding:16px 20px;
    }
    .author-position{
        padding:20px;
        font-size:16px;
    }
    .author-name{
        margin:0 20px;
        font-size:28px;
    }
    .author-main{
        display:block;
        padding:25px 20px;
    }
    .author-left{
        width:100%;
        margin-bottom:25px;
    }
    .author-left img{
        margin:auto;
    }
    .author-right p{
        font-size:16px;
        line-height:1.9;
    }
    .author-career li{
        font-size:16px;
    }
}
/*=====================================
  著者プロフィール
=====================================*/

.profile-box{
    margin:50px 0;
    border:1px solid #ddd;
    background:#fff;
}

.author-title{
    margin:0;
    padding:18px 30px;
    background:#222;
    color:#fff;
    font-size:30px;
    font-weight:bold;
    line-height:1.4;
}

.author-subtitle{
    padding:25px 30px 15px;
    font-size:20px;
    color:#555;
    line-height:1.8;
}

.author-name{
    margin:0 30px 30px;
    padding:12px 24px;
    border:2px solid #444;
    border-left:8px solid #222;
    font-size:36px;
    font-weight:bold;
    color:#9b1c31;
    line-height:1.4;
}

.author-content{
    display:flex;
    align-items:flex-start;
    gap:24px;
    padding:0 30px 35px;
}

.author-left{
    width:170px;
    flex-shrink:0;
}

.author-photo{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto;
}

.author-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.author-sns{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}

.author-sns a{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    font-size:20px;
    transition:.2s;
}

.author-sns a:hover{
    transform:translateY(-2px);
    opacity:.9;
}

.author-x{
    background:#000;
}

.author-facebook{
    background:#1877F2;
}

.author-instagram{
    background:linear-gradient(45deg,#405DE6,#833AB4,#E1306C,#F77737);
}

.author-right{
    flex:1;
    min-width:0;
}

.author-right p{
    margin:0 0 18px;
    font-size:18px;
    line-height:1.9;
}

.author-right a{
    font-weight:bold;
}

.author-career-title{
    margin:28px 0 12px;
    padding-bottom:8px;
    border-bottom:2px solid #ddd;
    font-size:22px;
    font-weight:bold;
}

.author-career{
    margin:0;
    padding-left:24px;
}

.author-career li{
    margin-bottom:8px;
    font-size:17px;
    line-height:1.8;
}

/* スマホ */

@media(max-width:767px){

.author-title{
    font-size:26px;
    padding:16px 20px;
}

.author-subtitle{
    padding:20px;
    font-size:16px;
}

.author-name{
    margin:0 20px 20px;
    padding:10px 18px;
    font-size:28px;
}

.author-content{
    display:block;
    padding:0 20px 25px;
}

.author-left{
    width:100%;
    text-align:center;
    margin-bottom:25px;
}

.author-photo{
    margin:auto;
}

.author-right p{
    font-size:16px;
}

.author-career-title{
    font-size:20px;
}

.author-career li{
    font-size:16px;
}

}

/*■■■スマホ非表示■■■*/
@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){
  /*必要ならばここにコードを書く*/
}