@charset "utf-8";
/*@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");*/

.red {
    color: #e60033;
}
.bold,.b {
    font-weight: bold;
}
.bb {
    font-weight: bold;
    font-size: 1.2em;
}
.strike {
    text-decoration: line-through;
}

/*--------------------
 吹き出しを作る
--------------------*/
.balloon {
padding: 0 10px;
margin: 2em 0;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 60px;
height: 60px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
}
.balloon-image-right {
float: right;
margin-left: 20px;
}
.balloon figure img {
width: 100%;
height: 100%;
border: 1px solid #f3f3f3;
border-radius: 50%;
margin: 0;
}
.balloon-image-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right {
background-color: #eee;
}
.balloon-text-left {
background-color: #eee;
}
.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.balloon p {
line-height: 170%;
padding: 5px;
margin: 0 0 20px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #eee;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #eee;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #eee;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #eee;
top: 15px;
right: -19px;
}

/* クチコミ
--------------------------------------- */

.smile {
    font-size: 47px;
    vertical-align: middle;
    margin-right: 10px;
    font-weight: normal;
}


.kuchikomi-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1em;
    margin: 5px 0 20px 0;
}

.kuchikomi {
    border: 3px solid;
    padding: 20px;
    margin: 15px 0;
}
.kuchikomi p {
    margin: 0;
    font-size: 15px;
}

.kuchikomi.good {
    border-color: #ffe4ec;
    background-color: #ffe4ec1a;
}

.kuchikomi-title.good {
    color: #f6779e;
}

.kuchikomi.bad {
    border-color: #c3e3ff;
    background-color: #c3e3ff17;
}

.kuchikomi-title.bad {
    color: #72bdff;
}

.fal::before {
    font-family: "Font Awesome 5 Free";
}

/* クチコミ3段階
--------------------------------------- */

.review{
	clear: both;
}
.kuchikomi2{
    display: flex;
    justify-content: space-between;
/*    margin-bottom: 20px;*/
}
.kuchikomi2.good b {color:#f06;}
.kuchikomi2.bad b {color:#333;}
.kuchikomi2.nomal b {color:#006;}
.kuchikomi2.nomal {
    background: #dbf4ff;
}
.kuchikomi2.nomal .kuchikomi2-text {
	border: 1px solid #06a5ec;
}
.kuchikomi2.nomal .kuchikomi2-text:after {
    border-right: 14px solid #06a5ec;
}
.kuchikomi2.bad {
    background: #eeeeee;
}
.kuchikomi2.bad .kuchikomi2-text {
	border: 1px solid #888888;
}
.kuchikomi2.bad .kuchikomi2-text:after {
    border-right: 14px solid #888888;
}
.kuchikomi2 img{
    height: 80px;
    width: 80px;
    display: block;
}
.kuchikomi2 .kuchikomi2-text {
    border: 1px solid #ff6191;
    background: #fff;
    margin-left: 30px;
    border-radius: 10px;
    padding: 15px 20px;
    width: 670px;
    position: relative;
}
.kuchikomi2 .kuchikomi2-text:before{
	content: "";
	position: absolute;
	top: 35%;
	left: -24px;
 	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
 	z-index: 2;
}

.kuchikomi2 .kuchikomi2-text:after{
	content: "";
	position: absolute;
	top: 35%;
	left: -28px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #ff6191;
 	z-index: 1;
}
.kuchikomi2 .kuchikomi2-text p.kuchikomi2-text_name {
    font-weight: bold;
}
.kuchikomi2 .kuchikomi2-text p{
    line-height: 1.7;
    margin-bottom: 0.5rem;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid #ddd;
}
.revsite {
	margin-left:10px; 
	font-size: 11px;
	color: #666;
	padding: 3px 5px;
	background: #eee;
	border-radius: 5px;
}
.kuchikomi2 .kuchikomi2-text p:last-child,
#detail .kuchikomi2 .kuchikomi2-text p{
	margin-bottom: 0;
	border: none;
}

.kuchikomi2 p.caution {
    font-size: 12px;
    text-align: right;
}

.kuchikomi2.good {
	background: #ffeef3;
}
@media (min-width:800px) {
    .kuchikomi2 p.caution {
        width: 100%;
    }
	.kuchikomi2 {
		flex-wrap: wrap;
		padding: 30px 30px;
	}
}

@media (max-width:800px) {
    .kuchikomi2 .kuchikomi2-text{
        padding: 50px 20px 20px;
        margin-left: 0;
        margin-top: 50px;
		width: 100%;
		box-sizing: border-box;
    }
    .kuchikomi2 {
        display: block;
        position: relative;
		padding: 1px 3% 3%;
    }
    .kuchikomi2 img {
        position: absolute;
        top: 10px;
        z-index: 1;
        left: 37%;
        margin-top: 0;
    }
	    .kuchikomi2 .kuchikomi2-text{
        padding: 50px 20px 20px;
        margin-left: 0;
        margin-top: 50px;
    }
    .kuchikomi2 .kuchikomi2-text:after {
        content: none;
    }
    .kuchikomi2 .kuchikomi2-text:before {
        content: none;
    }
	.review h3{
		font-size: 1.5rem;
		background: url(../img/list_icon.png) no-repeat 0px 0px;
		padding-left: 30px;
	}
}

/* 見出し・ページタイトル
---------------------------------------------------------------------- */

.article h2 {
  color: #fff;
  border: none;
}

.article h2::after {
    border: none;
}
.article h2::before {
    display: none;
}

.article h3,
.article h4,
.article h5,
.article h6 {
  color: #444;
}

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  text-align: left;
  margin: 2.4em 0 1em;
  font-weight: bold;
  box-shadow: none;
  line-height: 1.2em;
}

.article h2::before,
.article h3::before,
.article h4::before,
.article h5::before,
.article h6::before,
.article h2::after,
.article h3::after,
.article h4::after,
.article h5::after,
.article h6::after {
  display:none;
}

.article h4,
.article h5,
.article h6 {
  border-left: none;
  border-right: none;
}

.article h2 + h3,
.article h3 + h4 {
    margin-top: 0 !important;
}


.article h2 {
  font-size: 1.6em;
  padding: 25px 12px 25px 12px;
  background-color: #f3f4f5;
  border-radius: 2px;
  border:none;
}
.article h3 {
  font-size: 1.4em;
  border-left: 6px solid #777;
  border-right: none;
  border-top: none;
  border-bottom: 2px solid #ccc !important;
  padding: 12px 10px 10px;
  background-color: #f5f8fa;
}
.article h4 {
  font-size: 1.2em;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  border-left: none;
  padding: 8px 12px;
}
.article h5 {
    font-size: 1.2em;
    border-bottom: 2px solid #ccc;
    padding: 5px 12px;
}
.article h6 {
  font-size: 1.2em;
  border-bottom: 1px solid #ccc;
  padding: 5px 12px 5px 12px;
}




.article h2::before,
.article h3::before {
    width: 0;
}

/* ページのテーマカラーに合わせた見出し色
-------------------------------------------------- */

/*ブラック*/
.c-black .article h2 {
    background-color: #454C50;
    color: #ffffff;
}
.c-black .article h3,
.c-black .article h4,
.c-black .article h5,
.c-black .article h6 {
    border-color:#454c50;
}
.c-black p.見出し::before,
.c-black p.is-style-midashi::before {
    border-color: #454c50;
}


/*青*/
.c-blue .article h2 {
    background: #4eb7d9;
    color: #ffffff;
}
.c-blue .article h3 {
  border-left: 6px solid #4eb7d9;
}
.c-blue .article h3,
.c-blue .article h4,
.c-blue .article h5,
.c-blue .article h6 {
    border-color:#4eb7d9;
}
.c-blue .article h4 {
    background: #edfbff;
}
.c-blue p.見出し::before,
.c-blue p.is-style-midashi::before {
  border-color: #4eb7d9;
}


/*ピンク*/
.c-pink .article h2 {
    background: #F99292;
    color: #ffffff;
}
.c-pink .article h3 {
  border-left: 6px solid #F99292;
}
.c-pink .article h3,
.c-pink .article h4,
.c-pink .article h5,
.c-pink .article h6 {
    border-color:#F99292;
}
.c-pink .article h4 {
    background: #fff6f6;
}
.c-pink p.見出し::before,
.c-pink p.is-style-midashi::before {
  border-color: #F99292;
}


/*緑*/
.c-green .article h2 {
    background: #3abc98;
    color: #ffffff;
}
.c-green .article h3 {
  border-left: 6px solid #3abc98;
}
.c-green .article h3,
.c-green .article h4,
.c-green .article h5,
.c-green .article h6 {
    border-color:#3abc98;
}
.c-green .article h4 {
    background: #f0fffb;
}
.c-green p.見出し::before,
.c-green p.is-style-midashi::before {
  border-color: #3abc98;
}


/*黄色*/
.c-yellow .article h2 {
    background: #ffc027;
    color: #ffffff;
}
.c-yellow .article h3 {
  border-left: 6px solid #ffc027;
}
.c-yellow .article h3,
.c-yellow .article h4,
.c-yellow .article h5,
.c-yellow .article h6 {
    border-color:#ffc027;
}
.c-yellow .article h4 {
    background: #fffaee;
}
.c-yellow p.見出し::before,
.c-yellow p.is-style-midashi::before {
  border-color: #ffc027;
}


/*ネイビー*/
.c-sick .article h2 {
    background: #235180;
    color: #ffffff;
}
.c-sick .article h3 {
  border-left: 6px solid #235180;
}
.c-sick .article h3,
.c-sick .article h4,
.c-sick .article h5,
.c-sick .article h6 {
    border-color:#235180;
}
.c-sick .article h4 {
    background: #f7f9fb;
}
.c-sick p.見出し::before,
.c-sick p.is-style-midashi::before {
  border-color: #235180;
}

/* ページタイトル共通
-------------------------------------------------- */

.page-title {
    font-weight: bold;
    position: relative;
}

.inner-text2 p {
    margin: 0;
}

/* アンダーライン付き
---------------------------------------- */
.lp-underline-center {
    text-align: center;
    font-weight: bold;
    position: relative;
    padding-bottom: 5px;
}

.lp-underline-center .inner-text2 {
    font-size: 2em;
}

.lp-underline-center::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 5px solid;
  width: 50px;
  margin: 0 auto;
    border-radius: 5px;
}




/*ブラック*/
.inner.c-black {
  color: #555;
}

/*ブルー*/
.inner.c-blue {
  color: #3498db;
}

/*レッド*/
.inner.c-redd {
  color: #f2183c;
}

/*ピンク*/
.inner.c-pink {
  color: #ff6a91;
}

/*グリーン*/
.inner.c-green {
  color: #64bf38;
}

/*イエロー*/
.inner.c-yellow {
  color: #a7a348;
}



/* ストライプ＋上下線
-----------------------------*/
.lp-stripe {
  padding: 10px;
}

/*ブラック*/
.lp-stripe.c-black {
  color: #333;
  border-top: solid 2px #333;
  border-bottom: solid 2px #333;
  background: -webkit-repeating-linear-gradient(-45deg, #f3f4f5, #f3f4f5 3px,#f5f8fa 3px, #f5f8fa 7px);
  background: repeating-linear-gradient(-45deg, #f3f4f5, #f3f4f5 3px,#f5f8fa 3px, #f5f8fa 7px);
}

/*ブルー*/
.lp-stripe.c-blue {
  color: #3498db;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

/*レッド*/
.lp-stripe.c-redd {
  color: #f2183c;
  border-top: solid 2px #f2183c;
  border-bottom: solid 2px #f2183c;
  background: -webkit-repeating-linear-gradient(-45deg, #fff1f3, #fff1f3 3px,#fff8f9 3px, #fff8f9 7px);
  background: repeating-linear-gradient(-45deg, #fff1f3, #fff1f3 3px,#fff8f9 3px, #fff8f9 7px);
}

/*ピンク*/
.lp-stripe.c-pink {
  color: #ff6a91;
  border-top: solid 2px #ff6a91;
  border-bottom: solid 2px #ff6a91;
  background: -webkit-repeating-linear-gradient(-45deg, #fff1f3, #fff1f3 3px,#fff8f9 3px, #fff8f9 7px);
  background: repeating-linear-gradient(-45deg, #fff1f3, #fff1f3 3px,#fff8f9 3px, #fff8f9 7px);
}

/*グリーン*/
.lp-stripe.c-green {
  color: #64bf38;
  border-top: solid 2px #64bf38;
  border-bottom: solid 2px #64bf38;
  background: -webkit-repeating-linear-gradient(-45deg, #eeffe6, #eeffe6 3px,#f6fff2 3px, #f6fff2 7px);
  background: repeating-linear-gradient(-45deg, #eeffe6, #eeffe6 3px,#f6fff2 3px, #f6fff2 7px);
}

/*イエロー*/
.lp-stripe.c-yellow {
  color: #a7a348;
  border-top: solid 2px #a7a348;
  border-bottom: solid 2px #a7a348;
  background: -webkit-repeating-linear-gradient(-45deg, #fff1f3, #fff1f3 3px,#fff8f9 3px, #fff8f9 7px);
  background: repeating-linear-gradient(-45deg, #fffdc9, #fffdc9 3px,#fffff7 3px, #fffff7 7px);
}


/* 両端に線を伸ばす
-----------------------------*/

.lp-bothline {
  color: #444;
  font-size: 24px;
  display: flex;
  align-items: center;
}
.lp-bothline::before, .lp-bothline::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background: #444;
  display: block;
}
.lp-bothline::before {
  margin-right: .4em;
}
.lp-bothline::after {
  margin-left: .4em;
}

.lp-bothline .inner-text1 {
  display: none;
}

/* 吹き出し
---------------------------------------- */

.lp-hukidashi {
  position: relative;
  display: block;
  text-align: center;
  padding: 15px;
  max-width: 100%;
  font-weight: bold;
  background: #FFF;
  border: solid 3px #333;
  box-sizing: border-box;
  border-radius: 3px;
}

.lp-hukidashi::before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.lp-hukidashi::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}



/* 斜線アンダーライン
-----------------------------*/

.lp-underline .inner-text2 {
    padding-bottom: 10px;
}

.lp-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
}


/* キャッチコピー付きタイトルボックス
---------------------------------------- */

.campaign-box {
  padding: 6px;
}

.inner {
  background-color: #fff;
  padding: 15px 10px 15px 10px;
  font-weight: bold;
  text-align: center;
}

.inner-text1 {
padding-bottom: 3px;
}

.inner-text2 {
    font-size: 1.6em;
}

/*ブラック*/
.inner.c-black {
  color: #555;
}

/*ブルー*/
.inner.c-blue {
  color: #3498db;
}

/*レッド*/
.inner.c-redd {
  color: #f2183c;
}

/*ピンク*/
.inner.c-pink {
  color: #ff6a91;
}

/*グリーン*/
.inner.c-green {
  color: #64bf38;
}

/*イエロー*/
.inner.c-yellow {
  color: #a7a348;
}



@media screen and (max-width: 768px){

.inner-text2 {
  font-size: 16px;
}

}


/* 斜線部共通色
--------------------------- */

/*ブラック*/
.campaign-box.c-black,
.lp-underline.c-black::after {
  background: -webkit-repeating-linear-gradient(45deg, #666, #666 5px, #ffffff 5px, #ffffff 10px);
  background: repeating-linear-gradient(45deg, #555, #555 5px, #ffffff 5px, #ffffff 10px);

}

/*ブルー*/
.campaign-box.c-blue,
.lp-underline.c-blue::after {
  background: -webkit-repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);
  background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #c5e3f7 5px, #c5e3f7 10px);

}

/*レッド*/
.campaign-box.c-redd,
.lp-underline.c-redd::after {
  background: -webkit-repeating-linear-gradient(45deg, #f2183c, #f2183c 5px, #ffffff 5px, #ffffff 10px);
  background: repeating-linear-gradient(45deg, #f2183c, #f2183c 5px, #ffe5e9 5px, #ffe5e9 10px);

}

/*ピンク*/
.campaign-box.c-pink,
.lp-underline.c-pink::after {
  background: -webkit-repeating-linear-gradient(45deg, #ff6a91, #ff6a91 5px, #ffe6ec 5px, #ffe6ec 10px);
  background: repeating-linear-gradient(45deg, #ff6a91, #ff6a91 5px, #ffe6ec 5px, #ffe6ec 10px);
}

/*グリーン*/
.campaign-box.c-green,
.lp-underline.c-green::after {
  background: -webkit-repeating-linear-gradient(45deg, #54af28, #54af28 5px, #dfffcf 5px, #dfffcf 10px);
  background: repeating-linear-gradient(45deg, #54af28, #54af28 5px, #dfffcf 5px, #dfffcf 10px);

}

/*イエロー*/
.campaign-box.c-yellow,
.lp-underline.c-yellow::after {
  background: -webkit-repeating-linear-gradient(45deg, #98954d, #98954d 5px, #f5f3c0 5px, #f5f3c0 10px);
  background: repeating-linear-gradient(45deg, #98954d, #98954d 5px, #f5f3c0 5px, #f5f3c0 10px);

}


/* ボタン
 * -------------------------------------------- */
.micro-top {
    font-size: 0.8em;
    margin-bottom: -1.2em;
    margin-top: 1em;
}
.button-block {
    float: none;
    margin: 1em 0;
}
.button-block.aligncenter {
    text-align: center;
}
.btn {
	color: #fff;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    line-height: normal;
    padding: 8px 1em;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    border: 2px solid transparent;
    position: relative;
    transition: all 0.8s ease;
    opacity: 1;
}

.column-wrap .btn {
    width: 100%;
}

a.btn {
    color:#fff;
}

a.afflink-button.btn {
    padding: 15px 20px;
    width: 75%;
    opacity: 1;
}

.button-block {
    /* padding: 1.4em 0; */
}



@media screen and (max-width: 600px){
	.btn {
		padding: 0;
	}
	a.afflink-button.btn {
	    width: 75%;
	}
}

.btn:hover{
    /*border-bottom: 3px solid !important;*/
}

/*レッド*/
.btn-red {
    background-color: #e60033;
    border-bottom: 3px solid #b94d4d !important;
}

/*グリーン*/
.btn-light-green {
  border-bottom: 3px solid #7f8f88 !important;
}

/*イエロー*/
.btn-amber {
  border-bottom: 3px solid rgb(222, 201, 99) !important;
}

/*オレンジ*/
.btn-orange {
  border-bottom: 3px solid rgb(222, 143, 50) !important;
}

/*ディープオレンジ*/
.btn-deep-orange {
  border-bottom: 3px solid #b94d4d !important;
}

/*ピンク*/
.btn-pink {
  border-bottom: 3px solid rgb(178, 90, 159) !important;
}

/*ブルー*/
.btn-blue {
    border-bottom: 3px solid rgb(68, 132, 168) !important;
}

/*シアン*/
.btn-cyan {
    border-bottom: 3px solid rgb(90, 168, 212) !important;
}

/*グレー*/
.btn-gray {
    background-color: #eeeeee;
    color: #555 !important;
    border-bottom: 3px solid #ddd !important;
}


.btn-red, .ranking-item-link a, .btn-wrap.btn-wrap-red > a {
    background: #e60033 !important;
}

.btn-pink, .btn-wrap.btn-wrap-pink > a {
    background: #e95295 !important;
}

.btn-purple, .btn-wrap.btn-wrap-purple > a {
    background: #884898 !important;
}

.btn-deep, .btn-wrap.btn-wrap-deep > a {
    background: #55295b !important;
}

.btn-indigo, .btn-wrap.btn-wrap-indigo > a {
    background: #1e50a2 !important;
}

.btn-blue, .ranking-item-detail a, .btn-wrap.btn-wrap-blue > a {
    background: #0095d9 !important;
}

.btn-light-blue, .btn-wrap.btn-wrap-light-blue > a {
    background: #2ca9e1 !important;
}

.btn-cyan, .btn-wrap.btn-wrap-cyan > a {
    background: #00a3af !important;
}

.btn-teal, .btn-wrap.btn-wrap-teal > a {
    background: #007b43 !important;
}

.btn-green, .btn-wrap.btn-wrap-green > a {
    background: #3eb370 !important;
}

.btn-light-green, .btn-wrap.btn-wrap-light-green > a {
    background: #8bc34a !important;
}

.btn-lime, .btn-wrap.btn-wrap-lime > a {
    background: #c3d825 !important;
}

.btn-yellow, .btn-wrap.btn-wrap-yellow > a {
    background: #ffd900 !important;
}

.btn-amber, .btn-wrap.btn-wrap-amber > a {
    background: #ffc107 !important;
}

.btn-orange, .btn-wrap.btn-wrap-orange > a {
    background: #f39800 !important;
}

.btn-deep-orange, .btn-wrap.btn-wrap-deep-orange > a {
    background: #ea5506 !important;
}

.btn-brown, .btn-wrap.btn-wrap-brown > a {
    background: #954e2a !important;
}

.btn-grey, .btn-wrap.btn-wrap-grey > a {
    background-color: #eeeeee;
    color: #555 !important;
    border-bottom: 3px solid #ddd !important;
}

.btn-blue-grey, .btn-wrap.btn-wrap-blue-grey > a {
    background: #607d8b !important;
}

.btn-black, .btn-wrap.btn-wrap-black > a {
    background: #333 !important;
}

/* ボタンの動き
-------------------------------------------- */

/*ボタンをバウンドさせる*/

.bound {
  -webkit-animation: 'bound' 4s ease-in 0s infinite;
}
@-webkit-keyframes 'bound' {
  0%{ -webkit-transform: scale(1, 1); }
  48%{ -webkit-transform: scale(1, 1); }
  50%{ -webkit-transform: scale(1.1, 0.9); }
  53%{ -webkit-transform: scale(0.9, 1.1) translate(0, -3px); }
  57.5%{ -webkit-transform: scale(1, 1) translate(0, -1px); }
  59%{ -webkit-transform: scale(1, 1) translate(0, 0px); }
  100% { -webkit-transform: scale(1, 1); }
}


/*ボタンを光らせる*/

.flash a {
  overflow: hidden;
}
.flash a:after {
  -moz-animation: flash 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: flash 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: flash 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: flash 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: flash 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}

.flash + .flash a:after {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

@keyframes flash {
  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}

@-webkit-keyframes flash {
  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; }
}

/* テキスト付きアフィリエイトリンクボタン
-------------------------------------------- */
.affilink-button2 {
    padding: 40px 0;
    text-align: center;
}

.affilink-button2 span {
    margin: 0 10px 0 0;
}

.affilink-button2 a {
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
}

.affilink-button2 a:hover {
    opacity: 0.9;
    transition: 0.8s;
}

.affilink-button2 a::before {
    content: ">>";
    padding-right: 5px;
    font-family: "fontawesome";
}


/*スマホ*/
@media screen and (max-width: 768px){
  .affilink-button2 span {
    display: block;
    margin: 0 0 20px 0;
  }
}

/*公式サイト以外の取り扱いなし*/
.n_service {
    border: 1px solid #ee4257 !important;
    background: #fdf2f2;
}
.n_service p {
    font-size: 0.9em !important;
    margin: 1em !important;
}


/* キャプションタブボックス
--------------------------- */
.caption-box-content {
	padding: 0.4em 0.8em;
}
.tab-caption-box.w90 {
    width: 90%;
    margin: 1.2em auto;
}

@media screen and (max-width: 600px){
.tab-caption-box.w90 {
    width: 100%;
}
}

.none .tab-caption-box-label {
    padding: 0;
    font-size: 1em;
    font-weight:bold;
    background-color: #ffff !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

.none .tab-caption-box-content {
    margin-top: -3px;
    border: 3px solid #ffff !important;
    padding: 0.4em 0;
    border-radius: 8px;
    border-top-left-radius: 0;
}


.c-blue .caption-box {
  border: 2px solid #4eb7d9;
}
.c-blue .caption-box-label {
  background-color: #4eb7d9;
  color: #fff;
}

.c-sick .caption-box {
  border: 2px solid #235180;
}
.c-sick .caption-box-label {
  background-color: #235180;
  color: #fff;
}

.c-black .caption-box {
  border: 2px solid #454c50;
}
.c-black .caption-box-label {
  background-color: #454c50;
  color: #fff;
}

.c-pink .caption-box {
  border: 2px solid #f99292;
}
.c-pink .caption-box-label {
  background-color: #f99292;
  color: #fff;
}

.c-green .caption-box {
  border: 2px solid #3abc98;
}
.c-green .caption-box-label {
  background-color: #3abc98;
  color: #fff;
}

.c-yellow .caption-box {
  border: 2px solid #ffcb4f;
}
.c-yellow .caption-box-label {
  background-color: #ffcb4f;
  color: #fff;
}

/*Cocoon*/

.cb-red.caption-box {
  border-color: #e60033 !important;
}
.cb-red .caption-box-label {
  background-color: #e60033 !important;
  color: #fff;
}

.cb-pink.caption-box {
  border-color: #e95295 !important;
}
.cb-pink .caption-box-label {
  background-color: #e95295 !important;
  color: #fff;
}

.cb-purple.caption-box {
  border-color: #884898 !important;
}
.cb-purple .caption-box-label {
  background-color: #884898 !important;
  color: #fff;
}

.cb-blue.caption-box {
  border-color: #0095d9 !important;
}
.cb-blue .caption-box-label {
  background-color: #0095d9 !important;
  color: #fff;
}

.cb-green.caption-box {
  border-color: #3eb370 !important;
}
.cb-green .caption-box-label {
  background-color: #3eb370 !important;
  color: #fff;
}

.cb-orange.caption-box {
  border-color: #f39800 !important;
}
.cb-orange .caption-box-label {
  background-color: #f39800 !important;
  color: #fff;
}

.cb-yellow.caption-box {
  border-color: #ffd900 !important;
}
.cb-yellow .caption-box-label {
  background-color: #ffd900 !important;
  color: #fff;
}

.cb-brown.caption-box {
  border-color: #954e2a !important;
}
.cb-brown .caption-box-label {
  background-color: #954e2a !important;
  color: #fff;
}

.cb-grey.caption-box {
  border-color: #949495 !important;
}
.cb-grey .caption-box-label {
  background-color: #949495 !important;
  color: #fff;
}

.cb-black.caption-box {
  border-color: #333 !important;
}
.cb-black .caption-box-label {
  background-color: #333 !important;
  color: #fff;
}

.cb-deep.caption-box {
  border-color: #55295b !important;
}
.cb-deep .caption-box-label {
  background-color: #55295b !important;
  color: #fff;
}

.cb-indigo.caption-box {
  border-color: #1e50a2 !important;
}
.cb-indigo .caption-box-label {
  background-color: #1e50a2 !important;
  color: #fff;
}

.cb-light-blue.caption-box {
  border-color: #2ca9e1 !important;
}
.cb-light-blue .caption-box-label {
  background-color: #2ca9e1 !important;
  color: #fff;
}

.cb-cyan.caption-box {
  border-color: #00a3af !important;
}
.cb-cyan .caption-box-label {
  background-color: #00a3af !important;
  color: #fff;
}

.cb-teal.caption-box {
  border-color: #007b43 !important;
}
.cb-teal .caption-box-label {
  background-color: #007b43 !important;
  color: #fff;
}

.cb-light-green.caption-box {
  border-color: #8bc34a !important;
}
.cb-light-green .caption-box-label {
  background-color: #8bc34a !important;
  color: #fff;
}

.cb-lime.caption-box {
  border-color: #c3d825 !important;
}
.cb-lime .caption-box-label {
  background-color: #c3d825 !important;
  color: #fff;
}

.cb-amber.caption-box {
  border-color: #ffc107 !important;
}
.cb-amber .caption-box-label {
  background-color: #ffc107 !important;
  color: #fff;
}

.cb-deep-orange.caption-box {
  border-color: #ea5506 !important;
}
.cb-deep-orange .caption-box-label {
  background-color: #ea5506 !important;
  color: #fff;
}

.cb-white.caption-box {
  border-color: #fff !important;
}
.cb-white .caption-box-label {
  background-color: #fff !important;
  color: #fff;
}


/* タブ付きボックス
--------------------------- */

.labs .block-box-label {
    display: inline-block;
    position: absolute;
    top: -37%;
    left: -2px;
    border-radius: 4px 4px 0 0;
    padding: 0.2em 0.8em 0em !important;
    font-size: 0.95em;
}

.caption-box.block-box.labs {
    position: relative;
    margin-top: calc(2.5em + 1.7em);
    border-radius: 0 4px 4px 4px;
}

.block-box.labs p {
    margin: 0.6em 0 !important;
}

/*ブラック*/
.caption-box.block-box.labs.blackBox {
    border: 2px solid #444;
}
.blackBox .caption-box-label {
    background-color: #444 !important;
    color: #fff;
}

/*グレー*/
.caption-box.block-box.labs.grayBox {
    border: 2px solid #ccc;
}
.grayBox .caption-box-label {
    background-color: #ccc !important;
    color: #fff;
}

/*ブルー*/
.caption-box.block-box.labs.blueBox {
    border: 2px solid #4eb7d9;
}
.blueBox .caption-box-label {
    background-color: #4eb7d9 !important;
    color: #fff;
}

/*ネイビー*/
.caption-box.block-box.labs.navyBox {
    border: 2px solid #235180;
}
.navyBox .caption-box-label {
    background-color: #235180 !important;
    color: #fff;
}

/*グリーン*/
.caption-box.block-box.labs.greenBox {
    border: 2px solid #3abc98;
}
.greenBox .caption-box-label {
    background-color: #3abc98 !important;
    color: #fff;
}

/*イエロー*/
.caption-box.block-box.labs.yellowBox {
    border: 2px solid #ffcb4f;
}
.yellowBox .caption-box-label {
    background-color: #ffcb4f !important;
    color: #fff;
}

/*オレンジ*/
.caption-box.block-box.labs.orangeBox {
    border: 2px solid #f7921b;
}
.orangeBox .caption-box-label {
    background-color: #f7921b !important;
    color: #fff;
}

/*レッド*/
.caption-box.block-box.labs.redBox {
    border: 2px solid #f2183c;
}
.redBox .caption-box-label {
    background-color: #f2183c !important;
    color: #fff;
}

/*ピンク*/
.caption-box.block-box.labs.pinkBox {
    border: 2px solid #f99292;
}
.pinkBox .caption-box-label {
    background-color: #f99292 !important;
    color: #fff;
}

.block-box ol, .block-box ul {
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 30px;
}

/* シンプルタブボックス
----------------------------------- */


/* BOX */
.title-box {
	position: relative;
	border-radius: 5px;
	padding: 1em;
	margin: 2.5em 0 2em;
}
/* スマホ以外481px以上 */
@media screen and (min-width: 481px) {
	.title-box {
		margin: 2.5em 0;
	}
}
/* gray */
.title-gray {
	color: #666;
	background: #fff;
}
.box-gray {
	border: #dfe3e5 2px solid;
}
/* pink */
.title-pink {
	color: #f278a4;
	background: #fff;
}
.box-pink {
	border: #ffcbde 2px solid;
}
/* blue */
.title-blue {
	color: #0095d9;
	background: #fff;
}
.box-blue {
	border: #98d0e9 2px solid;
}
/* yellow */
.title-yellow {
	color: #f39800;
	background: #fff;
}
.box-yellow {
	border: #ffc107 2px solid;
}
/* green */
.title-green {
	color: #4CAF50;
	background: #fff;
}
.box-green {
	border: #9dd9a0 1px solid;
}

.title-box p {
    margin: 0.3em 0;
}


/* タイトル付きボックス
----------------------------------- */
.t_box {
    padding: 0 2%;
    margin: 7% 1% 2%;
    /*border-left: 4px solid #dddddd;*/
    border-bottom: 3px solid #dddddd;
    font-size: 1em;
    line-height: 1em;
    font-weight: bold;
    border-radius: 3px;
}
.t_box.intitle {
    padding-top: 0;
    padding-bottom: 0.7em;
}
.t_box.intitle .box_title span {
    position: relative;
    top: -0.85em;
    padding: 0.3em 0.7em;
    background: #6d6d6d;
    color: #ffffff;
    font-weight: bold;
    border-radius: 1em;
    display: inline-block;
    vertical-align: bottom;
    font-size: 0.9em;
}
.t_box.intitle .box_title span i {
	padding-right: 5px;
	font-size: 1.1em;
}
/* color */
.t_box.blue_box .box_title span {
    background: #82c8e2;
}
.t_box.blue_box {
    background: #d4f3ff;
    border-color: #82c8e2;
    color: #465d65;
}
.t_box.red_box .box_title span {
    background: #e77373;
}
.t_box.red_box {
    background: #F5DADC;
    border-color: #e77373;
    color: #654646;
}
.t_box.yellow_box .box_title span {
    background: #ded647;
}
.t_box.yellow_box {
    background: #fff8d4;
    border-color: #ded647;
    color: #636546;
}
.t_box.green_box .box_title span {
    background: #79e37c;
}
.t_box.green_box {
    background: #d8f7c3;
    border-color: #79e37c;
    color: #42613a;
}
.t_box.pink_box .box_title span {
    background: #f7b2b2;
}
.t_box.pink_box {
    background: #ffeeee;
    border-color: #f7b2b2;
    color: #775454;
}
.t_box.glay_box .box_title span {
    background: #9c9c9c;
}
.t_box.glay_box {
    background: #ececec;
    border-color: #c5c5c5;
    color: #555555;
}

/************************************
** アイコンつきリスト
************************************/
/* ボックス全体 */
.iconbox{
  margin: 0 auto 2em; /* 余白 */
  background: #fef9ed; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:860px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #fdc44f; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}
/* 段落の余白リセット */
.iconbox p {
  margin: 0;/* 文字の余白リセット */
  padding: 0; /* 文字の内側余白リセット*/
}
/* ボックス 中 */
.iconbox .iconbox-wrap{
  display:-webkit-box; /* 配置 */
    display:-ms-flexbox; /* 配置 */
  display:flex; /* 配置 */
  padding:0 2em; /* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
   width: 97%;/*横幅 */
   margin: 0 3% 0 0 !important;/* 余白 */
   line-height:1.8;/* 行間 */
  -ms-flex-item-align: center;/* 中央寄せ */
   align-self: center;/* 中央寄せ */
}
/* コンテンツ段落 */
.iconbox .iconbox-wrap .box-content p{
  margin-bottom:1em;/*余白 */
}
/* アイコン&吹き出し */
.iconballoon{
  -ms-flex-item-align: end; /* 下部に配置 */
  align-self: flex-end; /* 下部に配置 */
}
/* アイコン */
.iconballoon .icon{
  text-align:center;/* 位置を中央へ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width: 120px; /* 横幅 */
  margin:0; /* 余白 */
}
/* アイコン画像 (amp)*/
.iconballoon amp-img{
  max-width: 120px !important; /* 横幅 */
  margin:0; /* 余白 */
}
/* 吹き出し文字 */
.iconballoon .balloon p{
  line-height:1.4; /* 行間 */
}
/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類　色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}
/*スマホ*/
@media screen and (max-width: 480px){
.iconbox{
  margin: 0 0.4em 2em;
}
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 14px; /* 文字サイズ */
}
/* ボックス 中 */
.iconbox .iconbox-wrap {
    padding: 0.5em 1em 0.5em 1.5em;/* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
  font-size:12px;/*文字サイズ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width:80px;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* アイコン画像(amp) */
.iconballoon amp-img{
  max-width:80px !important;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* 吹き出し */
.iconballoon .balloon{
  width:80px;/* 横幅 */
  font-size:10px;/* 文字サイズ */
  padding: 1em 0;/* 余白 */
  border: 1px solid #999;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after {
    border-top-width: 12px;
    border-bottom-width: 10px;
    border-left-width: 11px;
    border-right-width: 11px;
    margin-left: -11px;
    border-top-color: #FFFFFF;
}
}
/************************************
** 箇条書き(点)
************************************/
/* 箇条書き */
.iconbox .list {
  list-style: none;/* 行頭記号削除  */
  padding: 0 !important;/* 余白リセット */
  margin: 0 !important;/* 余白リセット */
  border:none;/* 線リセット */
}
/* 箇条書き 行 */
.iconbox .list li { 
  position: relative;/* 行頭記号の配置  */
  margin: 0 0 0.5em 0 !important;/* 余白  */
  padding: 0 0 0.5em 1.4em !important;/* 余白 */
  line-height:1.8;/* 行間 */
}
/* 箇条書き 行頭記号 */
.iconbox .list li:before {
  background-color: #ffa952; /* 記号色 */
  position: absolute; /* 行頭記号の配置 */
  content: ''; /* 空文字 */
  top:13px; /* 上からの距離 */
  left: 0; /* 左からの距離 */
  width: 7px; /* 横幅 */
  height: 7px; /* 縦幅 */
  border-radius: 4px; /*角丸 */
}
/* 箇条書き 行頭記号リセット */
.iconbox .list-number li:after{
  content:'';
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号*/
   .iconbox .list li:before{
     top:8px;/* 上からの距離 */
   }
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.iconbox .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.iconbox .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;/* 行間 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 14px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:4px;/* 上からの距離 */
   width: 22px;/* 横幅 */
   height: 22px;/* 縦幅 */
   line-height: 22px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .iconbox .list-number li{
     padding: 0 0 0.5em 2em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .iconbox .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 18px;/* 横幅 */
    height: 18px;/* 縦幅 */
    line-height: 18px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}

/************************************
** アイコンフキダシボックス(ピンク)
************************************/
/* ボックス全体 */
.iconbox-pink{
  background: #fdf1f1 !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-pink .box-head-pink{
  background: #f7bcbc !important; /* 背景色 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
  background: #f7bcbc !important; /* 背景色 */
}
/************************************
** アイコンフキダシボックス(ブルー)
************************************/
/* ボックス全体 */
.iconbox-blue{
  background: #f2fbff !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-blue .box-head-blue{
  background: #00bfff !important; /* 背景色 */
}
/************************************
** アイコンフキダシボックス(グリーン)
************************************/
/* ボックス全体 */
.iconbox-green{
  background: #eafaf7 !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-green .box-head-green{
  background: #2fcdb4 !important; /* 背景色 */
}