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

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



/*********チェックリスト*********/
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;
}

/*********タイトルデザイン*********/
.article h1 {
font-size:1.6em;
line-height: 1.5;
font-weight: bold;
margin-top: 0.1em;
margin-bottom: 0.1em;
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{
font-size: 1.4em;
margin-top: 2.5em;
border-top: solid 2px #364e96 !important;
border-bottom: solid 2px #364e96 !important;
}
*/
/* 左ライン見出し */
.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;
}

.article h3 {
padding: 0.5em 0.5em 0.5em 0em;
color: #4a4a4a;
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 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;
}
/*********動くボタン（個別訴求ボックス外）*********/
.move-btn2 {
position: relative;
font-weight: bold;
width: 100%;
max-width: 1200px;
padding: 1.2em 0.2em;
margin: 0 0 5em 0 ;
border-radius: 5px;/*角の丸み*/
background-color: #dc143c;/*背景色*/
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);
}
}
/*********見出し付きボックス*********/
.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;
}
/*********比較表ロング（上部固定）*********/
.table_design03 {
border-collapse: collapse;
width: 100%;
margin-bottom:5em !important;
}
/* 最上部行を縦スクロール時に固定する */
.table_design03 thead td {
background-color: #fff !important;
border: 1px solid #fff;
border-bottom: 1px solid #ddd;
position: sticky;
top: 0;
z-index: 1/* tbody内のセルより手前に表示する */
}
/* セルの色と枠線 */
.table_design03 th, .table_design03 td {
border: 1px solid #ddd;/*線の色は任意*/
background-color: #fff;/*背景の色は任意*/
padding: .5em;
color: #333;
}
/* 一番左の縦列 */
.table_design03 th {
background-color:#4c97c0;/*色は任意*/
color: #fff;
font-weight: bold;
text-align: center;
width: 20%;
min-width: 4em;
}
/* 特定の列だけ色を変える 
.table_design03 td:nth-of-type(1) {
background-color: #fde8d0;
}*/
/* 一番下の行 */
.table_design03 tfoot td {
background-color: #fff !important;
border: 1px solid #fff;
}
.table_design03 td.sita{
vertical-align: bottom; 
}
/*********動くボタン（比較表の最下段のボタン）*********/
.move-btn {
position: relative;
font-weight: bold;
width: 100%;
max-width: 350px;
padding: 1.0em 0.2em;
margin: 0px 0px;
border-radius: 5px;/*角の丸み*/
background-color: #dc143c;/*背景色は任意*/
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-btn {
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);
}
}
/*********個別訴求ボックスの見出し*********/
.sbox-title{ 
font-size: 26px;
font-weight: bold;
padding: 18px 20px;
background-color:#2ca9e1;/*色は任意*/
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.4;
}
/*********個別訴求ボックス*********/
.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-subttl {
font-size: 1.3em;
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;
}
/*********個別訴求ボックス内のリスト*********/
.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: 5px;/*角の丸み*/
background-color: #dc143c;/*背景色*/
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);
}
}
/*********吹き出し*********/
.balloon_l,
.balloon_r{
margin: 30px 0;
display:flex;
justify-content: flex-start;
align-items: flex-start; /*縦位置を上揃え*/
}
.balloon_r{
 justify-content:flex-end;
}
.faceicon img{
 width: 140px; /*任意のサイズ*/
min-width:100px;
height: auto;
}
.balloon_r .faceicon{
margin-left:25px;
}
.balloon_l .faceicon{
margin-right:5px;
}
.balloon_r .faceicon{
order:2 !important;
}
.says {
max-width:500px; /*最大幅は任意*/
display: flex;
flex-wrap: wrap;
position: relative;
padding: 17px 13px 15px 18px;
border-radius: 12px;
background: #C6E4EC;/*色は任意*/
box-sizing:border-box;
margin:0 !important;
line-height:1.5;
color: #090909;/*文字色*/
}
.says p{
margin:8px 0 0 !important; 
}
.says p:first-child{
margin-top:0 !important;
}
.says:after {
content: "";
position: absolute;
border: 10px solid transparent;
}
.balloon_l .says:after {
left: -26px;
border-right: 22px solid #C6E4EC;/*色は任意*/
}
.balloon_r .says:after {
right: -26px;
border-left: 22px solid #C6E4EC;/*色は任意*/
}
/*********口コミ*********/
.reviews_l,
.reviews_r{
margin: 30px 0;
display:flex;
justify-content: flex-start;
align-items: flex-start; /*縦位置を上揃え*/
}
.reviews_r{
 justify-content:flex-end;
}
.faceicons img{
width: 120px; /*任意のサイズ*/
min-width:70px;
height: auto;
}
.reviews_r .faceicons{
margin-left:25px;
}
.reviews_l .faceicons{
margin-right:5px;
}
.reviews_r .faceicons{
order:2 !important;
}
.talk {
max-width:600px; /*最大幅は任意*/
display: flex;
flex-wrap: wrap;
position: relative;
padding: 17px 13px 15px 18px;
border-radius: 12px;
background: #f5f5f5;/*色は任意*/
box-sizing:border-box;
margin:0 !important;
line-height:1.5;
color: #333;/*文字色*/
}
.talk p{
margin:8px 0 0 !important; 
}
.talk p:first-child{
margin-top:0 !important;
}
.talk:after {
content: "";
position: absolute;
border: 10px solid transparent;
}
.reviews_l .talk:after {
left: -26px;
border-right: 22px solid #f5f5f5;
}
.reviews_r .talk:after {
right: -26px;
border-left: 22px solid #f5f5f5;
}
/*********追記*********/
.ps{
margin:1em 0 .7em 0;
font-weight:bold;
font-size:1.8em;
color:#c81428;
}
/*********アコーディオン*********/
.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){
/*必要ならばここにコードを書く*/
}
.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;
}

}