@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
body {font-family: "WebFont", -apple-system, BlinkMacSystemFont, sans-serif !important;}
.card-thumb img {aspect-ratio: auto !important;}
.e-card-snippet {display:none !important}

table.idol01 {width:100%;border:none;background:#fff;}
table.idol01 th {border:none;background:#fff;font-weight:normal;font-size:14px;background:#f791ee;color:#fff}
table.idol01 td {border:none;background:#fff;text-align:center;border-bottom:2px solid #f791ee;}
table.idol01 td img {vertical-align: middle;box-shadow: 0 6px 10px 0 rgba(0,0,0,.2);}
table.idol01 td .idol02 {font-size:24px;font-weight:bold;color:#0000ff}

.btn-animation {display: inline-block;width: 200px;text-align: center;background-color: #fd568c;border: 2px solid #fd568c;font-size: 16px;color: #fd568c;text-decoration: none;font-weight: bold;padding: 10px 24px;border-radius: 4px;position: relative;}
.btn-animation span {position: relative;z-index: 1;}
.btn-animation::before,.btn-animation::after {content: "";display: block;background-color: #FFF;width: 50%;height: 100%;position: absolute;top: 0;transition: .2s;}
.btn-animation::before {left: 0;}
.btn-animation::after {right: 0;}
.btn-animation:hover:before,.btn-animation:hover:after {width: 0;background-color: #FFF;}
.btn-animation:hover {color: #FFF;}

.idol-side {width:50%;float:left;text-align:center;min-height: 260px;}
.idol-side img {margin:1px auto;box-shadow: 0 6px 10px 0 rgba(0,0,0,.2);}
.api-web {margin:50px 20px 20px;text-align:right}

.idol-top {text-align:center;}
.idol-top a {width: 18%;display:inline-block}
.idol-top a img {width:95%;margin:0 auto}
 
.idol-top2 {width: 18%;float:left;margin:0 1%;min-height: 220px;}
.idol-top2 img {max-height:200px;box-shadow: 0 6px 10px 0 rgba(0,0,0,.2);width:95%;margin:0 auto}

.sns {color:#fff;background:#2c6ebd;padding-left:10px;font-size:18px;line-height:50px;margin:10px 0}

.main-under {width: 49%;float:left;display: inline-block;}
.main-under01 {width: 98%;margin:10px auto;font-size:12px;}
.main-under01 img {width:100%}

figure img {box-shadow: 0 6px 10px 0 rgba(0,0,0,.2);}
.entry-content img {box-shadow: 0 6px 10px 0 rgba(0,0,0,.2);}

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

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

/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
.idol-top a {width:30%;}
.idol-top2 {width:30%;float:left;margin:0 1%;}
.idol-top2 img {max-height:auto;}
}

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

table.idol01 th {display:block;}
table.idol01 td {display:block;border-bottom:none !important;}
.idol-top a {width:48%;}
.idol-top2 {width:48%;float:left;margin:0 1%;}
.idol-top2 img {max-height:auto;}
.main-under {width: 100%;float:none}
}

.entry-content div {margin-bottom:0 !important}