@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

/************************************
** 比較表
************************************/
/* 比較表全体 */
.compare-box {
  display:-webkit-box;/* 配置 */
  display:-ms-flexbox;/* 配置 */
  display:flex;/* 配置 */
  max-width:600px;/* 横幅 */
  margin: 0 auto 2rem;/* 余白 */
  border-radius:4px;/* 角丸 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
  background: #fef9ed; /* 背景色 */
}
/* 左のボックス、右のボックス */
.compare-box .compare-left-wrap, .compare-box .compare-right-wrap{
  width:50%;/* 横幅半分ずつ */
  overflow:hidden;/* はみ出さないように*/
}
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
  background: #fdc44f; /* 背景色 */
  text-align: center;/* 中央寄せ */
  color: #FFF; /* 文字色 */
  font-weight: bold;/* 文字太さ */
  padding:0em 1em;/* 余白 */
  font-size:15px;/* 文字大きさ */
  line-height:1.5;/* 行間 */
  height:65px;/* 縦幅 */
  display:table-cell;/* 形式 */
  vertical-align:middle;/* 高さ中央寄せ */
  width:1000px;/* 横幅 */
}
/* 左のタイトル */
.compare-box .compare-left-head{
  border-radius:4px 0 0 0;/* 角丸 */
}
/* 右のタイトル */
.compare-box .compare-right-head{
  border-radius:0 4px 0 0;/* 角丸 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right{
  padding:1.5em;/* 余白 */
  font-size:15px;/* 文字大きさ */
  line-height:2;/* 行間 */
  text-align: justify;/* 段落両端 */
  text-justify: inter-ideograph;/* 段落両端 */
}
/* 文章 */
.compare-box p {
  padding: 0;/* 余白 */
  margin: 0 0 20px 0;/* 余白 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
  /* 左のタイトル、右のタイトル */
  .compare-box .compare-left-head, .compare-box .compare-right-head{
    font-size:12px;/* 文字大きさ */
    height:50px;/* 高さ */
  }
  /* 左のコンテンツ、右のコンテンツ */
  .compare-box .compare-left, .compare-box .compare-right {
      padding: 1.2em;/* 余白 */
      font-size: 12px;/* 文字大きさ */
   }
}
/************************************
** 比較表 箇条書き(記号)
************************************/
/* 箇条書き(記号) */
.compare-box .list{
   list-style: none !important;/* 行頭記号リセット */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き 行 */
.compare-box .list li { 
   border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類　色) */
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px;/* 横幅 */
   padding: 0 0 0.7em 1.4em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き 行最後 */
.compare-box .list li:last-child{ 
   border:none;
}
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
   background-color:  #ffa952; /* 色 */
   position: absolute;/* 配置 */
   content: '';/* 空文字 */
   top: 10px;/* 上からの距離 */
   left: 7px;/* 下からの距離 */
   width: 7px;/* 横幅 */
   height: 7px;/* 縦幅 */
   border-radius: 4px;/* 角丸 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号 */
  .compare-box .list li:before {
    top: 9px;/* 上からの距離 */
    left: 3px;/* 下からの距離 */
    width:5px;/* 横幅 */
    height:5px;/* 縦幅 */
  }
}
/************************************
** 比較表　箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.compare-box .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.compare-box .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
  border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類　色) */
}
/* 箇条書き 行最後 */
.compare-box .list-number li:last-child{ 
   border:none;
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 12px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:5px;/* 上からの距離 */
   width: 18px;/* 横幅 */
   height: 18px;/* 縦幅 */
   line-height: 18px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/* 箇条書き 行頭記号リセット */
.compare-box .list-number li:after{
  content:'';
}
/*スマホで見た時*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .compare-box .list-number li{
     padding: 0 0 0.5em 1.8em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .compare-box .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 16px;/* 横幅 */
    height: 16px;/* 縦幅 */
    line-height: 16px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}

/************************************
** 比較表セパレート
************************************/
/* 全体左 */
.compare-box-separate .compare-left{
background:#f0f9fc !important;
height:100%;
}
/* 全体右 */
.compare-box-separate .compare-right{
background:#fff6f2 !important;
height:100%;
}
/* タイトル左 */
.compare-box-separate .compare-left-head{
background:#6fc7e1 !important;
}
/* タイトル右 */
.compare-box-separate .compare-right-head{
background:#ffa883 !important;
}
/* 箇条書き(記号) 行頭番号 左 */
.compare-box-separate .compare-left .list li:before {
background:#6fc7e1 !important;
}
/* 箇条書き(番号) 行頭番号 左 */
.compare-box-separate .list-number li:before {
background:#6fc7e1 !important;
}
/* 箇条書き(記号) 行頭番号 右 */
.compare-box-separate .compare-right .list li:before {
background:#ffa883 !important;
}
/* 箇条書き(番号) 行頭番号 右 */
.compare-box-separate .compare-right .list-number li:before {
background:#ffa883 !important;
}

/************************************
** 横長テーブル
************************************/
.p-sticky-table{
  white-space: nowrap;
  line-height:1.6;
}
.p-sticky-table table{
  border:none;
  border: 1px solid #dedede;
  border-bottom: none;
  border-collapse: collapse;
  word-break: break-all;
  table-layout: fixed;
  display:block;
  overflow:scroll;
  max-height: 80vh;
}
.p-sticky-table thead th:first-child {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}
.p-sticky-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:center;
}
.p-sticky-table tbody th:first-child{
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  border:none;
  white-space: normal;
  min-width: 130px;
}
.p-sticky-table th, .p-sticky-table td {
  min-width: 50px;
  text-align: left;
  font-size: 16px !important;
  position: relative;
  padding: 13px !important;
  color: #333;
  border: none !important;
  z-index: 0;
  vertical-align:middle !important;
  background:#fff;
}
.p-sticky-table th{
  background:#f0f9ff !important;
  letter-spacing: 1px;
  font-weight: 500 !important;
  color: #555 !important;
}
.p-sticky-table tr{
  border-bottom:none !important;
}
.p-sticky-table img{
  margin: 10px auto;
  display: block;
  padding: 0;
  max-width: 80% !important;
}
.p-sticky-table table th::before, .p-sticky-table table td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  z-index: -1;
}
/* スマホ */
@media screen and (max-width: 560px) {
  .p-sticky-table table {
    max-height: 60vh;
    }
  .p-sticky-table thead th:first-child, .p-sticky-table tbody th:first-child {
        min-width: 25vw;
    }
   .p-sticky-table th, .p-sticky-table td {
        font-size: 12px !important;
        padding: 7px !important;
    }
}
/* 中央寄せ */
.pst-center td {
  text-align: center;
}

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

/************************************
** 割合棒グラフ
************************************/
.percentage-bar-wrap{
  margin: 0 auto 4rem;/* 余白 */
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
}
.percentage-bar-wrap > div:first-child{
  border-radius:4px 0 0 4px;
}
.percentage-bar-wrap > div:last-child{
  border-radius:0 4px 4px 0;
  margin-right: 0;
}
.percentage-bar{
  height: 30px;/* 棒高さ */
  margin-right: 2px;/* 棒余白 */
}
.percentage-bar-num{
  text-align:center;
  color:#fff;/* ラベル文字色 */
  line-height: 30px;
  font-weight: 600;/* ラベル文字太さ */
  font-size:11px;/* ラベル文字サイズ */
}
.percentage-bar-item{
  color:#777;/* コンテンツ文字色 */
  text-align:center;
  font-weight: 600;/* コンテンツ文字太さ */
  font-size:13px;/* コンテンツ文字サイズ */
  margin-top:5px;
  letter-spacing: 1px;
}
/*スマホ*/
@media screen and (max-width: 480px) {
  .percentage-bar-item{
      font-size:10px;/* コンテンツ文字サイズ */
    }
}
/* 青(デフォルト) */
.bar-blue > div:nth-of-type(1){background:#00b0eb;}
.bar-blue > div:nth-of-type(2){background:#14c4ff;}
.bar-blue > div:nth-of-type(3){background:#3bceff;}
.bar-blue > div:nth-of-type(4){background:#62d8ff;}
.bar-blue > div:nth-of-type(5){background:#7ddbfa;}
.bar-blue > div:nth-of-type(6){background:#00b0eb;}
.bar-blue > div:nth-of-type(7){background:#14c4ff;}
.bar-blue > div:nth-of-type(8){background:#3bceff;}
.bar-blue > div:nth-of-type(9){background:#62d8ff;}
.bar-blue > div:nth-of-type(10){background:#7ddbfa;}
/* ピンク */
.bar-pink > div:nth-of-type(1){background:#eb5555;}
.bar-pink > div:nth-of-type(2){background:#ef7878;}
.bar-pink > div:nth-of-type(3){background:#f39b9b;}
.bar-pink > div:nth-of-type(4){background:#f5adad;}
.bar-pink > div:nth-of-type(5){background:#f7bebe;}
.bar-pink > div:nth-of-type(6){background:#eb5555;}
.bar-pink > div:nth-of-type(7){background:#ef7878;}
.bar-pink > div:nth-of-type(8){background:#f39b9b;}
.bar-pink > div:nth-of-type(9){background:#f5adad;}
.bar-pink > div:nth-of-type(10){background:#f7bebe;}
/* 黄色 */
.bar-yellow > div:nth-of-type(1){background:#e3b047;}
.bar-yellow > div:nth-of-type(2){background:#fdc44f;}
.bar-yellow > div:nth-of-type(3){background:#fdc960;}
.bar-yellow > div:nth-of-type(4){background:#fdcf72;}
.bar-yellow > div:nth-of-type(5){background:#fdd583;}
.bar-yellow > div:nth-of-type(6){background:#e3b047;}
.bar-yellow > div:nth-of-type(7){background:#fdc44f;}
.bar-yellow > div:nth-of-type(8){background:#fdc960;}
.bar-yellow > div:nth-of-type(9){background:#fdcf72;}
.bar-yellow > div:nth-of-type(10){background:#fdd583;}
/* 緑 */
.bar-green > div:nth-of-type(1){background:#28ad98;}
.bar-green > div:nth-of-type(2){background:#2fcdb4;}
.bar-green > div:nth-of-type(3){background:#4dd6c0;}
.bar-green > div:nth-of-type(4){background:#6ddecc;}
.bar-green > div:nth-of-type(5){background:#7de1d1;}
.bar-green > div:nth-of-type(6){background:#28ad98;}
.bar-green > div:nth-of-type(7){background:#2fcdb4;}
.bar-green > div:nth-of-type(8){background:#4dd6c0;}
.bar-green > div:nth-of-type(9){background:#6ddecc;}
.bar-green > div:nth-of-type(10){background:#7de1d1;}
/* 対比 */
.bar-contrast > div:nth-of-type(1){background:#00bfff;}
.bar-contrast > div:nth-of-type(2){background:#ef7878;}

/************************************
** ボックスナビ
************************************/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/4);/* 4列 */
margin:0;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
  .p-nav ul li{
    -ms-flex-preferred-size: calc(100%/2);/* 2列 */
    flex-basis: calc(100%/2);/* 2列 */
  }
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}

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

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

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

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