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

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

/*投稿日・更新日を消す場合*/
.page .date-tags {
  display: none;
}

/*ボタンを光らせる*/
.btn {
  overflow: hidden;
  border: none;
	margin-bottom: 5rem;
}
@media screen and (max-width: 834px) {
	.btn {
		margin-bottom: 3rem;
	}
}
.btn::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: btn 4s ease-in-out infinite;
}
@-webkit-keyframes btn {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.only-sp {
  display: none;
}
body,
.main,
.sidebar {
  background-color: #fcfdf7;
}
article {
  margin-bottom: 150px;
}
section {
  margin-bottom: 90px;
}
table tr td {
  background-color: #fff;
}
table th,
table td {
  border: 2px solid #d5f4e2;
}
table th {
  background-color: #e8f8eb;
  border-bottom: inherit;
}
.center {
  text-align: center;
}
.red {
  color: red;
}
.bb-point {
  background-color: #fff;
}
.article h2 {
  margin-bottom: 20px;
}

.article h3 {
  background-color:#fcfdf7;
  border-left: 6px solid #1a7961;
  color:#1a7961;
	margin-bottom: 10px;
}
.article ul.check {
  position: relative;
  background-color: #fff;
  border: 3px solid #f39800;
  border-radius: 20px;
  padding: 1em 1em 1em 40px;
}
.article ul.check li {
  list-style-type: none;
}
.article ul.check li::before {
  font-family: "FontAwesome";
  content: "\f14a";
  position: absolute;
  left: 1em;
  color: #f39800;
}
.article ul.check-only {
  position: relative;
}
.article ul.check-only li {
  list-style-type: none;
}
.article ul.check-only li::before {
  font-family: "FontAwesome";
  content: "\f14a";
  position: absolute;
  left: 1em;
  color: #f39800;
}
h2.oukan::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 8px;
  background-image: url(img/oukan.png);
  background-size: contain;
  vertical-align: bottom;
}
.h2-rank-wrap {
  position: relative;
}
.h2-rank-wrap h2 {
  padding-left: 120px;
}
.h2-rank-img {
  position: absolute;
  bottom: 0;
  left: 5px;
}
.sidebar h3 {
  color: #1a7961;
  border-color: #1a7961;
  background-color: #d5f4e2;
}
.widget_pages ul li a::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 8px;
  background-image: url(img/oukan.png);
  background-size: contain;
  vertical-align: bottom;
}
.widget_pages ul li a:hover {
  background-color: #fff3cd;
}
.speech-balloon h4 {
  border: none;
  margin: 0.5em 0 1em;
  color: #28b893;
}
.thumb {
  width: 100%;
}

.badge-wrap {
  display: flex;
  flex-wrap: wrap;
}
.badge {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: bold;
  color: #007b43;
  margin: 8px;
}
.badge-blue {
  background-color: #d5f4e2;
}
.table-scroll {
  overflow: auto;
  white-space: nowrap;
}
table.shop-about {
  text-align: center;
}
table.shop-about th {
  width: 33.34%;
}
table.ranking5 th {
  width: 16.667%;
}

#pension,
.add-bottom {
  max-width: 800px;
  margin: 0 auto;
}

.pr-link {
  font-size: 22px;
  font-weight: bold;
  background-color: #fff;
  text-align: center;
}
.pr-link p {
  display: inline-block;
  text-align: left;
}
/* ほけんのみらいlp  fv変更
--------------------------------*/
section.insra_mv_wrapper{
  margin-bottom: 20px;
}
.insra_mv img{
  max-width: 100%;
  height: auto;
}
/* mini Ranking */
.insra_ranking_ttl {
  display: none;
}
.insra_ranking {
  overflow-x: scroll;
  overflow-y: hidden;
  margin-bottom: 0;
}
.insra_ranking_wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 20px 5px 10px;
  width: 560px;
}
.insra_ranking_wrapper figure{
    text-align: center; 
}
.insra_ranking_wrapper figcaption{
    font-size: .9rem;
    opacity: 1; 
}
.insra_ranking_wrapper dl{
  display: inline-block;
  padding: 15px;
  margin-bottom: 0;
}
.insra_ranking_wrapper dl.insra_ranking_01{
  background: #e3f5ff;
  border: 3px solid #88cef7;
  border-radius: 10px;
}
.insra_ranking_wrapper dt{
  position: relative;
  font-weight: bold;
}
.insra_ranking_wrapper dt::before{
  content: "";
  position: absolute;
  top: -35px;
  left: 50%;
  width: 40px;
  height: 33px;
  transform: translateX(-50%);
  background: no-repeat bottom;
  background-size: cover;
}
.insra_ranking_wrapper .insra_ranking_01 dt::before{background-image: url(https://www.hoken-champ.com/wp-content/uploads/2024/06/bg_rank1.png);}
.insra_ranking_wrapper .insra_ranking_02 dt::before{background-image: url(https://www.hoken-champ.com/wp-content/uploads/2024/06/bg_rank2.png);}
.insra_ranking_wrapper .insra_ranking_03 dt::before{background-image: url(https://www.hoken-champ.com/wp-content/uploads/2024/06/bg_rank3.png);}

.insra_ranking_wrapper img{
  max-width: 200px;
  height: auto;
}
.insra_ranking_wrapper p{
  margin-bottom:0
}
.insra_ranking_wrapper dd{
  font-size: 0.7rem;
  margin-left:0;
}
.insra_ranking_wrapper dd em{
  color: var(--cocoon-red-color);
}
.insra_ranking_wrapper ul{
  padding: 10px;
  background: #e3f5ff;
  border-radius: 10px;
  margin: 10px 0;
}
.insra_ranking_wrapper .insra_ranking_01 ul{
  background: #fff;
  position: relative;
}
.insra_ranking_wrapper .insra_ranking_01 ul::before{
  content: "おすすめ";
  width: 80px;
  height: 20px;
  position: absolute;
  background: #0970e0;
  top:-10px;
  left:50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
}
.insra_ranking_wrapper ul li{
  min-height: 35px;
  border-bottom: 1px solid #707070;
  list-style: none;
  line-height: 1.6;
  text-align: center;
}
.insra_ranking_wrapper ul li:last-child{
  border-bottom: none;
}
.insra_ranking_wrapper .insra_ranking_02 li,
.insra_ranking_wrapper .insra_ranking_03 li{
  display: flex;
  justify-content: center;
  align-items: center;
}
.insra_ranking_wrapper a.detail_btn{
  display: block;
  position: relative;
  padding: 10px 15px 10px 10px;
  color: #fff;
  border-radius: 25px;
  font-size: 1.1em;
  box-shadow: 0px 3px 4px #0000004d;
  background: var(--cocoon-deep-orange-color);
  text-align: center;
  text-decoration: none;
  margin-bottom: 0;
}
.insra_ranking_wrapper a.detail_btn::after{
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top:50%;
  right:15px !important;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translateY(-50%);
}
.attention{
	font-size:10px;
	line-height:1.2;
	width: 560px;
}
.insra_ranking_wrapper em,
.insra_compare_tbl td em{
	font-weight:bold;
	font-style: normal;
	font-size:1.1em;
}
/* compare Table */
.article h2.insra_compare_ttl{
  position: relative;
  font-size: 1.4rem;
  background:none;
  color:#080808;
  text-align:center;
  margin-bottom: 0;
}
.insra_compare_ttl::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 30%;
  height: 1px;
  background-color: #707070;
  transform: translateX(-50%);
}
.insra_compare_wrapper{
  position: relative;
  z-index: 1; 
  margin: 0 auto;
}
.insra_compare_wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: calc(100% / 3);
    height: 100%;
    background: transparent;
    pointer-events: none;
    border: 3px solid #0970E0;
    box-sizing: border-box;
}
.insra_compare_wrapper p{
  font-size: .8rem;
}
table.insra_compare_tbl{
  font-size: 0.8rem;
  text-align: center;
}
.insra_compare_tbl tr:first-child {
  vertical-align: text-top;  
}
.insra_compare_tbl td{
  width: calc(100% / 3);
  padding: 5px;
  border: 1px solid #7c7c7c;
}
.insra_compare_tbl td:first-child {
  background: #fcfced;
}
.insra_compare_tbl td p{
  font-weight: bold;
  font-size:12px;
  margin-bottom: 0;
}
.insra_compare_tbl td em{
  color: var(--cocoon-red-color);
}
.insra_compare_tbl td.good{
  background: url(https://www.hoken-champ.com/wp-content/uploads/2024/06/bg_dubble_c.png) no-repeat 50% 50% #fcfced;
  height: 55px;
}
.insra_compare_tbl img{
  width: 100%;
}
.insra_compare_tbl img.ramking_num{
  width: 40px;
}
.insra_compare_tbl th{
  padding: 5px;
  background: #E3F5FF;
  color: #19448e;
  text-align: center;
  font-size: 14px;
  border: 1px solid #7c7c7c;
}
.insra_compare_tbl a.detail_btn{
  display: block;
  position: relative;
  padding: 10px 15px 10px 10px;
  color: #fff;
  border-radius: 25px;
  box-shadow: 0px 3px 4px #0000004d;
  margin: 10px;
  font-size: 1.2em;
  background: var(--cocoon-deep-orange-color);
  text-decoration: none;
}
.insra_compare_tbl a.detail_btn::after{
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top:50%;
  right:10px !important;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 560px){
  .insra_ranking_wrapper{
    width: 100%;
  }
	.attention{
    width: 100%;	
	}
  .insra_ranking{
    overflow-x: hidden;
  }
}
@media only screen and (min-width: 768px){
  .insra_compare_tbl td{
    height: 60px;
  }
  .insra_compare_tbl img{
    width: 200px;
  }
  section.insra_mv_wrapper{
    margin-top: -40px;
  }
  .insra_ranking_wrapper dd{
    font-size: 1rem;
  }
  .insra_ranking_wrapper ul li {
    min-height: 55px;
  }
  .insra_ranking_wrapper figcaption ,
  .insra_compare_tbl td p {
    font-size: 1.2rem;
  }
  table.insra_compare_tbl {
    font-size: 1rem;
  }
  .insra_ranking_wrapper .insra_ranking_01 ul::before {
    height: 26px;
    top: -15px;
  }
  .insra_ranking{
    margin-bottom: 30px;
  }
}/* ほけんのみらいlp  fv変更　ここまで
--------------------------------*/

/* 問い合わせフォーム */
/* 必須マーク */
.must {
  color: #fff;
  font-size: 0.8em;
  margin-right: 8px;
  padding: 3px 10px;
  background: #f92931;
  border-radius: 20px;
}

/* 任意マーク */
.free {
  color: #fff;
  font-size: 0.8em;
  margin-right: 8px;
  padding: 3px 10px;
  background: #424242;
  border-radius: 20px;
}

/* 項目名を太字にする */
form p {
  font-weight: 600;
  margin-bottom: 1.4em;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 10px 15px;
  margin-right: 10px;
  margin-top: 10px;
  border: 1px solid #d0d5d8;
  border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
  height: 200px;
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
  width: 40%;
  height: 60px;
  font-size: 20px;
  font-weight: 600;
  margin: 0 30%;
  border-radius: 5px;
}
input.wpcf7-submit:hover {
  opacity: 0.7;
}
/* 詳細遷移ボタンを見やすくする */
.btn-l{
  border-radius: 63px;
  box-shadow: 0px 3px 4px #0000004d;
  padding: 20px 0;
  margin: 0 20px 3rem;
}
@media screen and (max-width: 834px) {
  input.wpcf7-submit {
    width: 70%;
    height: 50px;
    margin: 0 15%;
  }
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
  color: red;
  font-weight: 600;
}

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

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
  .content {
    margin-top: 0;
  }
  /* 詳細遷移ボタンを見やすくする */
 .btn-l{
  font-size:16px;
}
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .only-pc {
    display: none;
  }
  .only-sp {
    display: block;
  }
  main.main {
    padding: 0 15px;
  }
  article {
    margin-bottom: 50px;
  }
  section {
    margin-bottom: 30px;
  }
  img.h2-rank-img {
    height: 85px;
  }
  .h2-rank-wrap h2 {
    padding-left: 100px;
  }
  table th {
    font-size: 14px;
    padding: 10px 5px;
  }

  /* メインビジュアル画像を画面いっぱいに */
  .article h1 img {
    min-width: 100vw;
    margin: 0 -10px;
  }
}

/* 吹き出しの調整 */
@media screen and (max-width: 480px) {
  .sbs-line:not(.not-nested-style) .speech-balloon::after {
      left: -5px;
	}
}