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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.entry-title {
  padding: 0.6em 0;
}
.hero {
  padding: 20px;
  background: #fff url(/wp-content/uploads/2026/01/hero.png) right top no-repeat;
  background-size: cover;
  border-radius: 10px;
  width: 100%;
}
.hero h1 {
  color: #444;
  margin: 0px;
  padding: 0px;
  background: transparent;
  font-size:22px;
}
.hero p {
  color: #444;
  margin: 10px 0 0 0 ;
  padding: 0px;
  font-size: 15px;
}
.hero h1, .hero p {
  background-color: rgba(255, 255, 255, 0.8) !important;
  padding: 5px 10px !important;
  border-radius: 3px;
}
.hero .buttons {
  display: flex;
  justify-content: center;
  align-items:flex-start;
  gap: 20px;
}
.hero .buttons a {
  flex: 1;
  display: block;
  width: 100%;
  padding: 8px 12px 8px 12px;
  margin: 10px 0px 0px 0px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #630000 0%, #430000 100%); ;
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);
}
.hero .buttons a:nth-child(2) {
  background: linear-gradient(to bottom, #333333 0%, #171717 100%); ;
}
.menu {
  padding: 10px;
  background: linear-gradient(#F8F8F8, #FDFAF5);
  border-radius: 10px;
}
.menu h2 {
  border: none;
  border-left: 5px #b11226 solid;
  border-radius: 0;
  background : transparent;
  padding: 0px 7px; 
  margin: 5px;
  color: #444;
  height: 26px;
}
ul.menu-panel {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items:flex-start;
}
ul.menu-panel li {
  display: block;
  flex: 1;
  height: 360px;
  position: relative;
}
ul.menu-panel img {
  border-radius: 10px;
}
ul.menu-panel h3 {
  border: none;
  margin: 5px 0;
  padding:0;
  font-size: 20px;
}
ul.menu-panel p {
  font-size: 15px;
  margin: 0;
  padding: 0;
}
ul.menu-panel p {
  font-size: 15px;
  margin: 0;
  padding: 0;
}
ul.menu-panel a {
  display: block;
  width: 100%;
  padding: 8px 12px 8px 12px;
  margin: 0px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #630000 0%, #430000 100%); ;
  color: #FFF;
  text-decoration: none;
  text-align: left;
  position: absolute;
  bottom:0;
  left:0;
  font-size: 14px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);
}
ul.menu-panel a .arrow {
  display: block;
  background: url(/wp-content/uploads/2026/01/arrow-24-64.png) right center no-repeat;
  background-size: 16px;
}

.popular-entry-card {
  display: flex;
  max-width: 1200px !important; 
}
.popular-entry-card .popular-entry-card-thumb {
  flex: 1;
  width: 400px;
  max-width: 400px;
}
.popular-entry-card .popular-entry-card-content {
  flex: 2;
  font-size: 18px;
}
.widget-entry-cards.card-large-image .a-wrap {
  max-width: 800px;
}

#header-container .navi, #navi .navi-in>.menu-header .sub-menu {
  background: linear-gradient(to bottom, #3f5068 0%, #2a384a 100%); 
  font-weight: 700;
  border-radius: 0 0 10px 10px;
}

.point {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  white-space: normal !important;
  min-width: 200px;
  text-align: left !important;
}

.rank-table {
  font-size: 14px;
}

.rank-table td {
  font-size: 14px;
  text-align: center;
}

.rank-table .thumb-box {
  width: 60px; 
  height: 60px; 
  overflow: hidden; 
  ratio: 1.0;
}

.rank-table .thumb {
  max-width: 60px;
  width: 60px;
  height: 92px;
}

.rank-table tr td {
  position: relative;
}

.rank-table tr td .rank {
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 50%;
  background: #8c99ab;
  font-weight: 700;
  color:#171717;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: text-top;
  font-size: 12px;
}

.rank-table tr:nth-of-type(2) .rank {
  background: gold;
}

.rank-table tr:nth-of-type(3) .rank {
  background: silver;
}

.rank-table tr:nth-of-type(4) .rank {
  background: #a36b21;
}

.rank-table tr td:nth-of-type(1) {
  text-align: center;
}
.scroll-hint-icon {
  top: 200px;
}

.android {
  width: 100px;
  height: 18.5px;
  display: block;
  margin: 3px;
  max-width: none;
}

.ios {
  width: 100px;
  height: 18.5px;
  display: block;
  margin: 3px;
  max-width: none;
}

.maru {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,47C12.9,47,3,37.1,3,25S12.9,3,25,3s22,9.9,22,22S37.1,47,25,47z M25,5.6C14.3,5.6,5.6,14.3,5.6,25S14.3,44.4,25,44.4 S44.4,35.7,44.4,25S35.7,5.6,25,5.6z" fill="%2394f8a3"/></svg>') no-repeat center center;
  background-size: 48px;
  padding: 30px 10px;
}

.sankaku {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%2394a3f8' fill-rule='evenodd' d='M25 4L47 46H3ZM25 9.8L42.3 43H7.7Z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 48px;
  padding: 30px 10px;
}

.batsu {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M42.7,42.7L42.7,42.7c-0.5,0.5-1.3,0.5-1.8,0L7.3,9.1c-0.5-0.5-0.5-1.3,0-1.8l0,0c0.5-0.5,1.3-0.5,1.8,0l33.6,33.6 C43.2,41.4,43.2,42.2,42.7,42.7z" fill="%23f89494"/><path d="M7.3,42.7L7.3,42.7c-0.5-0.5-0.5-1.3,0-1.8L40.9,7.3c0.5-0.5,1.3-0.5,1.8,0v0c0.5,0.5,0.5,1.3,0,1.8L9.1,42.7 C8.6,43.2,7.8,43.2,7.3,42.7z" fill="%23f89494"/></svg>') no-repeat center center;
  background-size: 48px;
  padding: 30px 10px;
}

.article h3 {
  font-size: 30px;
  border: none;
  border-bottom: 1px solid #444;
  margin: 0;
  margin-bottom: 1em;
  padding: 24px 0 0 0;
  color: #555;
}


.service-items .service-item {
  position: relative;
  padding: 0.5
}
.service-items .service-item .rank {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: #8c99ab;
  font-weight: 700;
  color:#171717;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: text-top;
  text-align: center;
  font-size: 12px;
}
.service-items .service-item:nth-of-type(1) .rank {
  background: gold;
}
.service-items .service-item:nth-of-type(2) .rank {
  background: silver;
}
.service-items .service-item:nth-of-type(3) .rank {
  background: #a36b21;
}
.service-item .prepaid {
  position: absolute;
  left: 25px;
  top: 0;
  border-radius: 3px;
  background: #d5e3f3;
  font-weight: 700;
  color:#171717;
  height: 20px;
  display: inline-block;
  vertical-align: text-top;
  text-align: center;
  font-size: 12px;
  padding: 0 5px;
}
.service-item .postpaid {
  position: absolute;
  left: 25px;
  top: 0;
  border-radius: 3px;
  background: #f3d5e7;
  font-weight: 700;
  color:#171717;
  height: 20px;
  display: inline-block;
  vertical-align: text-top;
  text-align: center;
  font-size: 12px;
  padding: 0 5px;
}
.service-item .thumb {
  width: 150px; height: 159px;
  margin: 1em auto;
  vertical-align: baseline;
}
.service-item .thumb img {
  width: 100%; 
  height: 100%;
}
.service-item .point {
  font-size: x-large;
}
.service-item .description {
  margin-bottom: 1em;
}

.service-item .merit {
  background-color: #C7E1EF;
  padding: 10px;
}
.service-item .merit i {
  color: #00AA00;
  margin-right: 2px;
}
.service-item .demerit {
  background-color: #FFECD3;
  padding: 10px;
}
.service-item .demerit i {
  color: #AA0000;
  margin-right: 4px;
}
.service-item .detail {
  margin-top: -1em;
  font-size: 16px;
}
.service-item .detail ul,.service-item .detail li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.service-item .detail th, .service-item .detail td {
  padding: 10px;
}
.service-item .cta {
  text-align: center;
}
.service-item .cta a {
  display: block;
  box-shadow: 0 4px 0 0 #dc7424;
  background: #f5944a;
  color: #FFFF;
  width: 80%;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 20px;
  margin: 20px auto;
  border-radius: 10px;
}
.service-item .cta a::after {
  content: "[R18]";
  font-weight: normal;
  font-size: smaller;
}

.service-item .android, .service-item .ios {
  display: inline-block;
  margin: 0;
  margin-right: 5px;
}

.service-item .correct {
  margin-right: 3px;
}

.author-description p {
    line-height: 1.7em;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  ul.menu-panel {
    flex-direction: column;
    gap: 20px;
  }
  ul.menu-panel li {
    height: auto;
    flex: none;
  }
  ul.menu-panel img {
    width: 100%;
  }
  ul.menu-panel a {
    position: unset;
  }
  .hero {
    width: 100%;
    height: auto;
    background-size: cover;
  }

  #header-container .navi, #navi .navi-in>.menu-header .sub-menu {
    border-radius: 0;
  }  
}