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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* テキストサイズ */
.fz-18px{
font-size:1rem;
}
/* リンク */
a{
color:#96f;
transition : all 0.3s ease 0s;
}
a:hover{color:#d0bcff;}
/* 目次 */
.toc{
width:100%;
}
/* 見出し */
.article h2{
background:none;
position:relative;
}
.article h2::before{
content:"";
display:block;
width:4px;
height:100%;
background:#96f;
position:absolute;
top:0;
left:0;
}
.article h3{
border:none;
position:relative;
}
.article h3::before{
content:"";
display:block;
width:100%;
height:2px;
background:#96f;
position:absolute;
bottom:0;
left:0;
}
.article h4{
border:none;
position:relative;
}
.article h4::before {
content: "";
margin-right: 8px;
width: 16px;
height: 3px;
background: #96f;
display: inline-block;
position: relative;
top: -5px;
}
/* ボタン */
.btn-style{
font-weight: bold;
margin: auto;
padding: 20px 30px;
border-radius:100px;
background:#5715cd;
color: white;
display: block;
text-align: center;
font-size: 1.5rem;
line-height: 1.4;
position: relative;
box-shadow: 0 0 3px #333;
text-decoration:none;
width:80%;
}
@media screen and (max-width: 640px) {
.btn-style{
width:100%;
font-size: 1.2rem;
}
}
a.btn-style:hover{
color:#fff;
transform: translateY(2px);
}
/* 画像ボーダー */
.entry-content img {
border: solid 1px #ddd;
box-sizing: border-box;
}
/* ブログカード */
.blogcard{
border-radius:8px;
border:1px solid #ddd;
padding:1rem;
display:flex;
cursor:pointer;
}
.blogcard img{
border:none;
max-width:100%;
}
.blogcard figure{
min-width:300px;
width:300px;
margin-right:1rem;
}
.blogcard dt{
padding:0;
margin-bottom:5px;
}
.blogcard dt a{
font-size:1.25rem;
font-weight:bold;
text-decoration:none;
color:#1b1b1b;
}
.blogcard dd{
font-size:.8rem;
color:#777;
padding:0;
margin-left:0;
}
/* 箇条書き */
.list_1 ul,
.list_1 ol{
margin: 10px 10px 30px 10px;
background: #f2ecff;
padding: 0.5em 0.5em 0.5em 2em;
}
/* ボックス */
.entry-content .box{
margin-bottom:28px;
}
.entry-content .box dl{
border-radius:.7rem;
overflow:hidden;
}
.entry-content .box dt{
padding:16px 16px 13px;
font-size:1rem;
font-weight:bold;
line-height:1.4;
position:relative;
}
.entry-content .box dd{
font-size:.9rem;
padding:1rem;
line-height:1.5;
margin-left:0;
}
.titlebox{
border:2px solid #ffd6d6;
}
.titlebox dt{
background:#ffd6d6;
}
.titlebox dd{
}
.numberbox{
border:2px solid #d6ffea;
}
.numberbox dt{
background:#d6ffea;
padding-left:54px !important;
}
.numberbox dt span{
display:inline-block;
width:36px;
height:40px;
line-height:36px;
background:#61da9c;
color:#fff;
font-weight:bold;
position:absolute;
top:0;
left:10px;
text-align:center;
}
.numberbox dt span::after{
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 0 18px 8px 18px;
border-color: transparent transparent #d6ffea transparent;
display:block;
position:absolute;
bottom:0;
left:0;
}
.stepbox{
border:2px solid #d6d6ff;
}
.stepbox span{
display:block;
background:#c391ea;
padding:3px 0 1px;
border-radius:0 100px 100px 0;
color:#fff;
margin-top:-.3rem;
margin-bottom:5px;
margin-left:-1rem;
width:100px;
text-align:center;
}
.stepbox span::before{
content:"STEP.";
}
.stepbox dt{
background:#d6d6ff;
}
.doubleline{
padding:16px;
border: double 5px #96f;
line-height:1.6;
}
.shadowbox{
padding:18px;
background: #fff;
border-top: solid 6px #96f;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
line-height:1.6;
}
.fukidashi{
border-radius:.7rem;
margin:0 0 0 36px;
background:#fff0c6;
padding:1.2rem 1.2rem 1rem;
line-height:1.5;
position:relative;
}
.fukidashi::before,
.fukidashi::after{
content:"";
display:block;
position:absolute;
border-radius:100px;
background:#fff0c6;
}
.fukidashi::before{
content:"";
width:14px;
height:14px;
bottom:5px;
left:-36px;
}
.fukidashi::after{
content:"";
width:24px;
height:24px;
bottom:15px;
left:-20px;
}

/* テーブル */
.entry-content table:not(.light-style) {
    table-layout: fixed;
}
.entry-content table tr:nth-child(even) td{
background:#fff;
}
.entry-content table:not(.not-bold) tr td:first-of-type{
font-weight:normal;
}
.entry-content table th{
text-align:center;
font-weight:bold;
}
.entry-content table td{
text-align:center;
}

/* スマホ用 */
@media screen and (max-width: 640px) {
.scrolltable{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding:0 10px;
}
.entry-content .box{
padding:0 10px;
}
table.scroll_table th,
table.scroll_table td{
width:100px !important;
}
.blogcard{
padding:1rem;
display:block;
}
.blogcard figure{
width:100%;
margin-right:0;
margin-bottom:5px;
}
.blogcard dd{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}

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

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

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