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

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

.waku00 {
  padding: 1em; /* 段落余白 */
  border-top: 5px solid #F6A5A4; /*上の枠線 #f582ae*/
  border-bottom: 5px solid #F6A5A4; /*下の枠線*/
}
.waku011, .waku012, .waku013, .waku014 {
  padding: 0.5em; /* 段落余白 */
/*  border-top: 5px solid #F6A5A4; 上の枠線 #f582ae*/
  border-bottom: 5px solid #F6A5A4; /* 下の枠線*/
  margin-bottom: 10px;
}

.waku011 {
  background-image: url("http://e-ja.jp/wp-content/uploads/2021/03/gold.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 10%;
/*  background:url("http://e-ja.jp/wp-content/uploads/2021/02/No1.png") no-repeat 0 10%;
  background-size: contain;*/
 /* line-height: 54px;  行の高さ */
 /* padding:0 0 0 80px;  文字周りの余白（上 右 下 左px） */
 /* margin: 100px 0 5px;  画像周りの余白（上 左右 下px） */
}

.waku012 {
  background-image: url("http://e-ja.jp/wp-content/uploads/2021/03/silver.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 10%;
/*  background:url("http://e-ja.jp/wp-content/uploads/2021/02/No2.png") no-repeat 0 30%;
  background-size: contain;*/
 /* line-height: 60px;  行の高さ */
 /* padding:0 0 0 80px;  文字周りの余白（上 右 下 左px） */
 /* margin:30px 0 20px;  画像周りの余白（上 左右 下px） */
}

.waku013 {
  background-image: url("http://e-ja.jp/wp-content/uploads/2021/03/copper.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 10%;
/*  background:url("http://e-ja.jp/wp-content/uploads/2021/02/No3.png") no-repeat 0 30%;
  background-size: contain;*/
 /* line-height: 54px;  行の高さ */
 /* padding:0 0 0 80px;  文字周りの余白（上 右 下 左px） */
 /* margin:30px 0 20px;  画像周りの余白（上 左右 下px） */
}

.waku014 {
  background-image: url("http://e-ja.jp/wp-content/uploads/2021/03/pink.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 10%;
/*  background:url("http://e-ja.jp/wp-content/uploads/2021/02/No3.png") no-repeat 0 30%;
  background-size: contain;*/
 /* line-height: 54px;  行の高さ */
 /* padding:0 0 0 80px;  文字周りの余白（上 右 下 左px） */
 /* margin:30px 0 20px;  画像周りの余白（上 左右 下px） */
}

.waku02 {
  padding: 1em; /*段落余白*/
  border: 5px solid #F6A5A4; /*枠線*/
  border-radius: 10px; /*角丸*/
  width: 100%;
}

.waku03 {
  padding: 1em; /*段落余白*/
  border-top: 1px solid #F6A5A4; /*上の枠線*/
  border-left: 10px solid #F6A5A4; /*左の枠線*/
  border-right: 1px solid #F6A5A4; /*右の枠線*/
  border-bottom: 1px solid #F6A5A4; /*下の枠線*/
  display: inline-block; /*枠ピッタリに*/
  width: 100%;
}

/* マウスオーバー時に画像を半透明に光らせる */
/* https://okane7.com/wordpress-mouseover-move/ */
a:hover img{
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: “alpha( opacity=50 )”;
}
/* マウスオーバー時に動かす */
/*a:hover{ position:relative;top:3px ;left:3px; }*/

/* 星評価のCSSデザイン（星5個版） */
/* https://kinocolog.com/css_star_rating/ */
.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    font-size: 20px; /* フォントサイズ 自由に設定化 */
}
.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}
.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

/* ボタンデザイン */
/* https://jajaaan.co.jp/css/button/ */
/* https://affikoro.com/html-button/ */

a.btn--green {
  color: #fff;
  background-color: #00dc00;
  border-bottom: 5px solid #00d200;
  padding: 0.5em;
  width: 90%;
  font-weight: bold;
  border-radius:30px;
  margin-bottom: 10px;
}
a.btn--green:hover {
  margin-top: 3px;
  color: #fff;
  background: #1de215;
  border-bottom: 2px solid #1dd815;
}
a.btn--blue {
  color: #fff;
  background-color: #25c8ff;
  border-bottom: 5px solid #25beff;
  padding: 0.5em;
  width: 90%;
  font-weight: bold;
  border-radius:30px;
  margin-bottom: 10px;
}
a.btn--blue:hover {
  margin-top: 3px;
  color: #fff;
  background: #2fccff;
  border-bottom: 2px solid #2fc2ff;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

html {
font-size:62.5%;/*pxだと10px;*/
 
}
h1 {
  font-size: 2.6rem;/*26px*/
}
h2 {
  font-size: 2.4rem;/*24px*/
}
h3 {
  font-size: 2rem;/*20px*/
}
h4 {
  font-size: 1.8rem;/*18px*/
}
p{
  font-size: 1.8rem;/*18px*/
}
a.btn--green, a.btn--blue {
  font-size: 2.2rem;
}

@media screen and (max-width: 640px) {/* 640px以下でスマホ画面時*/
h1 {
  font-size: 2.4rem;/*24px*/
}
h2 {
  font-size: 2rem;/*20px*/
}
h3 {
  font-size: 1.8rem;/*18px*/
}
p{
  font-size: 1.6rem;/*16px*/
}
a.btn--green, a.btn--blue {
  font-size: 1.6rem;
  width: 95%;
  padding: 0.8em;
}

.floating-banner {
    position: fixed; /* 追従 */
    z-index: 99999; /* 他の要素の下に隠れないように */
    bottom: 0; /* 画面の最下部にぴったりくっつくように指定 */
}

.floating-banner:hover {
    opacity: .8; /* ホバーで少し透過 */
}


@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
    .floating-banner  {
        right: 0; /* 左右の隙間が空かないように */
    }
}

.footer-in {
	margin-bottom: 60px;
}

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

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

  #navi .navi-in > .menu-mobile li {
    margin: 0 1em 0 1em; /* 追加　文字周りの余白（上 右 下 左） */
  }
}

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