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

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

/*必要ならばここにコードを書く*/
/*********特定のテキストのみ行間を詰める*********/
.tight-line {
line-height: 1.4 !important; /* 数値を小さくするほど詰まります（標準は1.5〜1.8程度） */
}

/*********アイキャッチ画像を横幅一杯に表示*********/
.entry-content {
    margin-top: 0.5em;
    margin-bottom: 3em;
}
/* Cocoonの本文エリアの制限を解除 */
.entry-content {
    overflow: visible !important;
}

/* 特定の画像（クラス名: full-width-img）を全幅にする */
img.full-width-img {
    display: block !important;
    max-width: none !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0em 0 !important; /* 上下に少し余白 */
    padding: 0 !important;
    border: none !important;
}

/* 画面の横揺れを防止 */
body {
    overflow-x: hidden;
}
/*********比較表ロング（上部固定）*********/
.table_design03 {
width: 100%;
border-collapse: separate; /* stickyと相性が良いのはseparate */
border-spacing: 0;
border: 1px solid #dcdcdc;
}
/* セルの色と枠線 */
.table_design03 th, td {
vertical-align: middle;
padding: 0 3px;
border: 1px solid #dcdcdc;
}
.table_design03 td, tr {
border: 1px solid #dcdcdc;
}
/* 最上部行を縦スクロール時に固定する */
.fixed01 {
position: -webkit-sticky; /* Safari対応 */
position: sticky;
top: 0;
z-index: 10; /* 他の行より上に表示させる */
background: #f5f5f5;
}
/* 枠線の調整（collapseを使わない場合） */
.fixed01:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
}

/*********動くボタン（表内）*********/
.move-btn {
position: relative;
/*font-weight: bold;*/
width: 100%;
max-width: 350px;
padding: 1.2em 0.2em;
margin: 5px 0px 5px 0px;
border-radius: 5px;/*角の丸み*/
/*background-color: #dc143c;背景色*/
background-color: #e85195;/*背景色*/
text-align: center;
line-height: 1.2;
color: #fff;/*文字色*/
display: inline-block;
text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);
box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
a:hover .move-btn {
background-color: #E60033;/*触れたときの背景色*/
color: #fff;/*触れたときの文字色*/
box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
animation-play-state: paused;
top: 3px;
}
.yureru-j {
animation: yureru-j 2s infinite;
}
@keyframes yureru-j {
0% {
transform: translate(0px, 2px);
}
5% {
transform: translate(0px, -2px);
}
10% {
transform: translate(0px, 2px);
}
15% {
transform: translate(0px, -2px);
}
20% {
transform: translate(0px, 2px);
}
25% {
transform: translate(0px, -2px);
}
30% {
transform: translate(0px, 0px);
}
}
/*********チェックリスト*********/
ul {
padding: 0.1em 1em 0.5em 1.3em;
position: relative;
margin: 0;
}
ul li {
line-height: 1.8;
padding: 0em 0;
list-style-type: none !important;/*ポチ消す*/
}
ul li:before {
font-family: FontAwesome;
content: "\f00c";
position: absolute;
left : 0em; /*左端からのアイコンまで*/
color: #1977b5; /*アイコン色*/
}
/*********Cocoonキャプションカスタマイズ*********/
.wp-caption .wp-caption-text, .gallery .gallery-caption {
font-size: 0.7em;
margin: 1px;
background-color: #fff;
}
.wp-caption {
padding-top: 2px;
border: 0px solid var(--cocoon-x-thin-color);
border-radius: 3px;
background-color: #fff;
text-align: center;
max-width: 100%;
}
/*********Cocoon吹き出しカスタマイズ*********/
.speech-person {
width: 15%;
min-width: 15%;
}
div.speech-balloon {
height: 100%;
position: relative;
padding: 13px;
background-color: var(--cocoon-custom-background-color);
border-width: 2px;
border-style: solid;
border-color: #808080;
color: var(--cocoon-custom-text-color);
border-radius: 6px;
max-width: 75%;
}
.speech-balloon::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
left: -12px;
top: 10px;
border-right-width: 12px;
border-right-style: solid;
border-right-color: #808080;
border-left-color: #808080 !important;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.sbp-l .speech-balloon {
margin-left: 5px;
}

/*********タイトルデザイン*********/
header {
    display: none !important;
}
.article h1 {
/*font-size:1.6em;
line-height: 1.5;
font-weight: bold;*/
/*margin-top: 0.1em;
margin-bottom: 0.1em;*/
margin-top: 0em;
margin-bottom: 0em;
/*position: relative;
padding: 1rem .5rem;*/
}
/*
.article h1:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
content: '';
border-radius: 3px;
background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
}*/

/*********見出しデザイン*********/
/* 左ライン見出し */
.article h2{
border-top: solid 0px #fff !important;
border-bottom: solid 0px #fff !important;
border-left: solid 5px #1977b5;/*左の線の色*/
background-color:#fff !important;
font-size: 1.5em;
padding: 0.3em 0.3em 0.3em 0.8em;
color: #4a4a4a;/*文字色*/
border-radius:0 !important;
margin-top: 3em !important;
}

.article h3 {
padding: 0.5em 0.5em 0.5em 0em;
color: #1977b5;/*文字色*/
font-size: 1.3em;
margin-top: 2.5em !important;
border-bottom: solid 3px #1977b5 !important;/*下の線の色*/
border-left: 0px solid var(--cocoon-middle-thickness-color);
border-right: 0px solid var(--cocoon-thin-color);
border-top: 0px solid var(--cocoon-thin-color);
border-bottom: 0px solid var(--cocoon-thin-color);
position: relative;
}

.article h3 span {
font-size: 0.7em;
font-weight: bold;
}
.article h4 {
font-size: 1.1em;
border-top: 0px solid #ddd;
border-bottom: 0px solid #ddd;
margin-top: 2.4em;
margin-bottom: 0.6em;
margin-left: 0.2em;
padding: 0em 0.5em;
color: #1977b5;/*文字色*/
background: transparent;
border-left: solid 5px #1977b5;/*左の線の色*/
border-right: solid 0px #fff;
}

.article h5 {
font-size: 1.1em;
border-top: 0px solid #ddd;
border-bottom: 0px solid #ddd;
margin-top: 2.4em;
margin-bottom: 0.6em;
margin-left: 1.72em;
padding: 0em 0.5em;
color: #1977b5;/*文字色*/
background: transparent;
border-left: solid 5px #1977b5;/*左の線の色*/
border-right: solid 0px #fff;
}
/*********マーカーデザイン*********/
mark {
background:linear-gradient(transparent 60%, #fcfc73 60%);
color: #333;
font-weight: bold;
border-radius:6px;
padding-bottom: 0.2em;
}
/*********リストデザイン*********/
.article ul {
margin-top: 1.2em;
margin-bottom: 1.5em;
padding: 0.5em 0.5em 0.5em 1.5em;
font-size: 100% !important;
}
/*********リストデザイン（番号）*********/
ol {
counter-reset:number; /*数字をリセット*/
list-style-type: none !important; /*数字を一旦消す*/
padding: 0.5em 0.5em 0.5em 0em;
margin-top: 1.2em;
margin-bottom: 1.5em !important;
font-size: 100% !important;
}
ol li {
position: relative;
padding-left: 30px;
line-height: 1.2em;
padding: 0.5em 0.5em 0.5em 33px;
}
ol li:before{
 /* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*以下数字のデザイン変える*/
display:inline-block;
background: #1977b5;/*色は任意*/
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
/*以下 上下中央寄せのため*/
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
/*********マイクロコピー*********/
.mcopy{
font-size: 0.8em;
text-align: center;
margin-bottom: 0.4em;
padding: 0em;
}
/*********ボタン下のマイクロコピー*********/
.mcopy_u{
font-size: 0.9em;
color: #db143c;
text-decoration: underline;
text-underline-offset: 4px;
text-align: center;
margin-top: -20px;
margin-bottom: 1.5em;
padding: 0em;
}
/*********個別訴求ボックス*********/
.sbox {
margin: 0px auto 4em;
padding: 20px 20px;
border-radius:  0px 0px 10px 10px;
border: 1px solid #ccc !important;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}
/*********個別訴求ボックスの見出し*********/
.sbox-title{ 
font-size: 1.4em;
font-weight: bold;
line-height:1.4;
padding: 18px 20px;
background-color:#2999c4;/*案件名の背景色*/
color: #fff;
margin-bottom:0em;
margin-top:0em;
border-radius:  10px 10px 0px 0px;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}
/*.sbox-ttl{
font-size: 1.8em;
margin-top: 0.1em;
margin-bottom: 0.8em;
padding: 0em 0em 0.3em 0em;
color: #364e96;
font-weight:bold;
border-bottom: dotted 4px #364e96;
line-height: 1.2;
}*/
/*********個別訴求ボックスのサブ見出し*********/
.sbox-subttl {
font-size: 1.2em;
line-height:1.4;
font-weight: bold;
padding: 0;
margin-top:0.4em;
margin-bottom:1em;
}
/*********個別訴求ボックス内のランキング王冠*********/
.sbox-rank{
margin:0 0 1em 0;
padding:0;
}
/*********個別訴求ボックス内の星*********/
.sbox-star{
margin:0 0 1em 0;
padding:0;
font-size: 20px;
}
.sbox-star img {
  vertical-align: middle;
}
/*********個別訴求ボックス内の2カラム*********/
.sbox-2column {
display: flex;
flex-wrap: wrap;
margin-bottom: 2em;
}
.column {
width: 100%;
padding:0px 0 15px 0;
}
@media (min-width: 1024px) {
.column {
width: 50%;
padding: 10px;
}
}
/*********個別訴求ボックス内の概要*********/
.gaiyou p {
background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
background-size: 8px 100%, /* 点線1のサイズ */
100% 2.5em; /* 点線2のサイズ */
line-height: 2.5em; /* 文字の高さ */
padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
/*********個別訴求ボックス内のテーブル*********/
.table_design02 {
border-collapse: collapse;
width: 100%;
margin-bottom:3.5em !important;
}
/* セルの色と枠線と横幅 */
.table_design02 th, .table_design02 td {
border: 1px solid #ddd;/*色は任意*/
background-color: #fff;/*色は任意*/
padding: .5em;
}
.table_design02 td {
width: 25%;
}
/* 一番左の縦列 */
.table_design02 th {
background-color:#4c97c0;/*色は任意*/
color: #fff;
font-weight: bold;
text-align: center;
width: 25%;
min-width: 4em;
}
/*********個別訴求ボックス内の◯△*********/
.sbox-review{
margin:0;
padding:0;
}

/*********見出し付きボックス*********/
.box01 {
position: relative;
margin: 3em 0 1em 0;
padding: 1em 1em 1em 1em;
border: solid 3px #1977b5;/*色は任意*/
border-radius: 8px;
}
.box01 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 25px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #1977b5;/*色は任意*/
font-weight: bold;
}
.box01 p {
margin: 0; 
padding: 0;
}
/*********個別訴求ボックス内のリスト*********/
.sbox-list-ttl{
margin:15px 0 0 0;
padding:0;
font-size: 22px;
line-height:1.4;
font-weight: bold;
}
.sbox-list-ttl:before {
content: '\f0a4';
padding: 0 .3em 0 0;
font-family: FontAwesome;
}
.sbox ul {
padding: 0.1em 1em 0.5em 1.3em;
position: relative;
margin: 0;
}
.sbox ul li {
line-height: 1.5;
padding: 0em 0;
list-style-type: none !important;/*ポチ消す*/
border-bottom: dashed 1px silver;
}
.sbox ul li:before {
font-family: FontAwesome;
content: "\f00c";
position: absolute;
left : 0em; /*左端からのアイコンまで*/
color: #1977b5; /*アイコン色*/
}
/*********動くボタン（個別訴求ボックス内）*********/
.move-btn1 {
position: relative;
font-weight: bold;
width: 100%;
max-width: 1200px;
padding: 1.2em 0.2em;
margin: 0 0 .1em 0 ;
border-radius: 10px;/*角の丸み*/
background-color: #dc143c;/*背景色 赤*/
/*background-color: #37a34a;*//*背景色 緑*/
font-size: 18px;
text-align: center;
color: #fff;/*文字色*/
display: inline-block;
/*text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);*/
box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
a:hover .move-btn1 {
opacity: 0.7;
animation-play-state: paused;
top: 3px;
}
.yureru-j {
animation: yureru-j 2s infinite;
}
@keyframes yureru-j {
0% {
transform: translate(0px, 2px);
}
5% {
transform: translate(0px, -2px);
}
10% {
transform: translate(0px, 2px);
}
15% {
transform: translate(0px, -2px);
}
20% {
transform: translate(0px, 2px);
}
25% {
transform: translate(0px, -2px);
}
30% {
transform: translate(0px, 0px);
}
}
/*********動くボタン（個別訴求ボックス外）*********/
.move-btn2 {
position: relative;
font-weight: bold;
width: 100%;
max-width: 1200px;
padding: 1.2em 0.2em;
margin: 0 0 0.1em 0 ;
border-radius: 10px;/*角の丸み*/
background-color: #dc143c;/*背景色 赤*/
/*background-color: #37a34a;背景色 緑*/
font-size: 18px;
text-align: center;
color: #fff;/*文字色*/
display: inline-block;
/*text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);*/
box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
a:hover .move-btn2 {
opacity: 0.7;
animation-play-state: paused;
top: 3px;
}
.yureru-j {
animation: yureru-j 2s infinite;
}
@keyframes yureru-j {
0% {
transform: translate(0px, 2px);
}
5% {
transform: translate(0px, -2px);
}
10% {
transform: translate(0px, 2px);
}
15% {
transform: translate(0px, -2px);
}
20% {
transform: translate(0px, 2px);
}
25% {
transform: translate(0px, -2px);
}
30% {
transform: translate(0px, 0px);
}
}

/*********アコーディオン*********/
.accord-01{
max-width: 100%;
margin-bottom: 7px;
border: 2px solid #155E83;/*色は任意*/
border-radius: 5px;
}
.accord-01 summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 1em 2em;
color: #155E83;/*色は任意*/
font-weight: 600;
cursor: pointer;
}
.accord-01 summary::-webkit-details-marker {
display: none;
}
.accord-01 summary::after {
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left: 10px;
border-bottom: 3px solid #155E83;/*色は任意*/
border-right: 3px solid #155E83;/*色は任意*/
content: '';
transition: transform .3s;
}
.accord-01[open] summary::after {
transform: rotate(225deg);
}
.accord-01 p {
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: .3em 2em 1.5em;
color: #333333;
transition: transform .5s, opacity .5s;
}
.accord-01[open] p {
transform: none;
opacity: 1;
}
/*********アコーディオン内のリスト*********/
.accord-01 ul {
padding: 0.1em 1em 0.5em 1.3em !important;
position: relative;
margin: 0 0 1em 2em !important;
}
.accord-01 ul li {
line-height: 1.5;
padding: 0em 0;
list-style-type: none !important;/*ポチ消す*/
border-bottom: dashed 1px silver;
}
.accord-01 ul li:before {
font-family: FontAwesome;
content: "\f00c";
position: absolute;
left : 0em; /*左端からのアイコンまで*/
color: #1977b5; /*アイコン色*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
	    .content {
        margin-top: 0px;
    }
}
.article ol {
padding-left: 0px;
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.speech-person {
width: 25% !important;
min-width: 25% !important;
}

.speech-wrap .speech-balloon {
padding: 10px;
max-width: 84%;
}
.speech-wrap.sbp-l .speech-balloon {
margin-left: 5px;
}

}