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

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

/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

.article h2{
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #FFF7F8;/*背景色*/
  border-left: solid 5px #ffa3a3;/*左線（実線 太さ 色）*/
}


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

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

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

/************************************
****　ヘッダーロゴ
************************************/
@media screen and (max-width: 1023px){
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:1em;/*ロゴ画像が左に詰まってしまう場合は、ここの数字を0.1刻みで大きくしてみてください*/
margin-top:1em;
margin-bottom:1em;
max-height:50px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}
.logo {/*ロゴ画像を中央に配置したい方は、以下3行を削除*/
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー　モバイル表示
************************************/
@media (max-width:1023px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}
/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #ffffff;
	color: #ff8f9e;
}

.logo-menu-button.menu-button{
	background-color: #ffffff;
}

/************************************
****　もしも　かんたんリンク
************************************/
/* 枠 */
div.easyLink-box{
margin: 0 auto !important;
padding: 1em 1.5em !important;
background-color: #fafafa!important;
border:none!important;
border-radius: 4px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
line-height: 1.5;
max-width:90%!important;
}
@media screen and (max-width: 703px){
div.easyLink-box {
text-align:center;
max-height:none!important;
padding: 10px!important;
}}
@media screen and (max-width: 620px){
div.easyLink-box{
display:block!important;	
}
}
@media screen and (max-width: 480px){
div.easyLink-box{
max-width:100%!important;
}
}
/* 商品名 */
div.easyLink-box div.easyLink-info p.easyLink-info-name{
text-align:center;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
color: #565656!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a:hover {
color:#337AB7!important; 
}
@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
}
}
/* 画像 */
@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-img {
margin-top: 1em;
}
div.easyLink-box div.easyLink-img p.easyLink-img-box {
align-items: start!important;
}}
@media screen and (min-width:481px) and (max-width: 620px){
div.easyLink-box div.easyLink-img{   
display:inline-block!important;
}
}
div.easyLink-box div.easyLink-img a.easyLink-arrow-left img, 
div.easyLink-box div.easyLink-img a.easyLink-arrow-right img {/*左右矢印の影非表示*/
box-shadow:none;
}
/* ボタン */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
border-radius: 20px!important;	
line-height:40px!important;
width:75%!important;
font-size:.8em!important;
}
@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .5em!important;
justify-content: center!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
margin: .5em 0 0 0 !important;
}
}
@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .2em!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin-top: .5em!important;
margin-bottom: 0!important;
}}
@media screen and (max-width: 620px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
width:85%!important;
}}
p.easyLink-info-maker{/*メーカーを非表示にしたい場合*/
display:none;
}
p.easyLink-info-model{/*モデルを非表示にしたい場合*/
display:none;
}

/************************************
****　SNSシェアボタン
************************************/
.sns-share{
margin: 0 0 24px ;
}
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
letter-spacing:.3em;
border-radius:20px;
border: 0;
padding: 0;
background-color:#3f5569;/*SHARE 背景色の変更はこちら*/
color:#fff;
display: inline-block;
width: 40%;
}
.sns-share-message, .sns-follow-message, span.related-entry-main-heading.main-caption, .comment-title {
margin:20px 0 10px 0;
}
.sns-share.ss-high-and-low-lc a .button-caption.button-caption{
display:none;
}
.sns-share-buttons {
padding-right:10%;
padding-left:10%;	
}
.sns-share-buttons a {		
transition:0.5s;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 13%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 25px;
}
@media (max-width:480px){
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
width: 55%;
}
.sns-share-buttons {
padding-right:5%;
padding-left:5%;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 15%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 20px;
}
}