@charset "UTF-8";

/* 05/20 update
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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
.woocommerce ul.products li.product .button {
padding: 10px 9px;
font-size: 14px;
color:#fff;
background:#c06080;
border-radius:10px;
}

/* header:color and height, eycon:position modify */
.search-menu-button.menu-button,
.navi-menu-button.menu-button
{background-color: #f6edf6;color: #111;height: 55px;padding-top: 8px;}

.logo-menu-button.menu-button{
background-color: #f6edf6;height: 55px;}

/* slide-in-menu:customize */
.navi-menu-content{background: rgba(246, 237, 246,0.8);}
.menu-drawer a{font-size: 16px;height: 2.5em;}
.menu-item{background: transparent;color: #111;}
.menu-item a{color: #111;padding-top:10px;}
li.menu-item a{border-bottom:1px dotted #666;}
li.menu-item a:hover{background: none !important;}
li.menu-item-home a:hover{color:#111 !important;}



h2{color:#fff;}
strong{color:#a04060;}
a:hover {color: #c1ab05;}
.entry-content a:hover { color: #a04060; }

.toc-list ol li, .toc-title label{margin:0;padding:0;}

.comment-btn{background:#fef9fb !important;border:none;border-radius:15px;}
input.submit{background:#fef9fb !important;}
.menu-item-object-page a:hover,  .menu-item-has-no-description a:hover{background:#fef9fb !important;}

.page_item a:hover{background:#fef9fb !important;color:#c1ab05 !important;}

.menu-top a:hover{background:#fef9fb !important;color:#c1ab05 !important;}

.entry-title {display: none;}
.logo-header{display: none;}


@media screen and (min-width: 768px){
#navi{display:none;}

img.sml{padding:0;margin:0 !important;border-radius:10px;}

h2.woocommerce-loop-product__title{height:80px !important;display: table-cell;vertical-align:middle !important;width:240px;}
/*横3列の場合、else widthの変更が必要*/
}

@media screen and (max-width: 767px){
h2{font-size:16px !important;}

img.sml{width:40%;padding:0;margin:0 !important;border-radius:10px;}

h2.woocommerce-loop-product__title{height:60px !important;display: table-cell;vertical-align:middle !important;width:180px;}
}

h2{padding: 10px !important;margin:5px 5px 25px 5px !important;}
h3{padding: 10px !important;margin:15px auto 10px auto !important;}

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

.imocontent_left, .imocontent_right{width:99%;background:#fff;margin-bottom:10px;margin-left:auto;margin-right:auto;margin-top:10px;}

.imotukuri{background: #f6edf6; margin: 5px; padding: 5px; border-radius: 15px;border:1px solid #a04060;}
}

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

.imocontent_left{float:left;width:48%;background:#fff;margin-bottom:10px;margin-left:10px;margin-right:auto;margin-top:10px;}

.imocontent_right{float:right;width:48%;background:#fff;margin-bottom:10px;margin-left:auto;margin-right:10px;margin-top:10px;}

.imotukuri{background: #f6edf6; margin: 20px; padding: 20px; border-radius: 15px;border:1px solid #a04060;}
}

/*slicknav (humbergermenu)*/

/*centering*/
.page .entry-title,
.single .entry-title, 
h1.archive-title
{text-align: center;}
span.fa-folder-open{display:none;}

/*color*/
h2{background:#a06060 !important;text-align:center !important;border-radius:15px !important;}

.article h3, .sidebar h3 {text-align:center !important;border-radius:15px !important;width:100%;margin-left:auto;margin-right:auto;border:none;}

.article h3{background:#f6edf6 !important;color:#a06060;}

.sidebar h3{background:#c06080 !important;color:#fff;}

table.wp-calendar-table th{background:#f0ffff;}

.menu-item{background: transparent/*#fbe8f0*/;color: #111;}

.menu-item a{color: #111;}

/*.menu-item a:hover{opacity:0.5;background:#f0ffff;}*/

input.has-spinner{background-color:#fef9fb !important;border-radius:10px;}

.wp-block-latest-posts__list a:hover{background:#fef9fb !important;}

.wp-block-archives-list a:hover{background:#fef9fb !important;}

.wp-block-latest-comments  a:hover{background:#fef9fb !important;}

.border-element, .next-post{border:1px dotted #a04060;border-radius:10px;padding:5px !important;margin:0 auto !important;}


@media screen and (max-width:767px) {
.ifrm-container{width:99%;height:200px;background:#f6edf6;
overflow:auto;-webkit-overflow-scrolling:touch;display: inline-block;
margin-bottom:0px;}
.ctrsmp{margin-left:auto;margin-right:auto;text-align:center !important;}
img.btmlft, img.btmrit{margin-left:auto;margin-right:auto;text-align:center !important;}
}

@media screen and (min-width:768px) {
.ifrm-container {width:80%;height:300px;overflow:auto;background:#f6edf6;
-webkit-overflow-scrolling:touch;display:inline-block;}
img.btmlft{float:left;}
img.btmrit{float:right;}
}

.ctr{margin-left:auto;margin-right:auto;text-align:center;}

@media screen and (max-width: 767px){
.ggmap{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.ggmap iframe, .ggmap object, .ggmap embed{position:absolute;top:0;left:0;width:100%;height:100%;}	
}

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

.table {font-size:16px;color:#111;
  display: flex;
  flex-direction: column;
}

.row {border-bottom:2px dotted #efefef !important;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.row2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px;
}

.row3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 130px;
}

.row4 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 130px;
}

.cell {
  width: 50%;
  padding: 10px;
}

.table .no1{width:18%;height:2.0em;}
.table .no2{width:82%;height:2.0em;}

.borderdotto{border-bottom:2px dotted #efefef !important;}
}


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

.table {font-size:13px;color:#111;}

.row, .row2, .row3, .row4{margin-bottom: 10px;}
.line_top{color:#a04060;}
}

.price span{font-weight:600 !important;color:#111;}

.rnd img{border-radius:10px;}

/* 完売マスクを画像領域のみに適用し、ボタンを避ける */

/* 1. 画像とタイトルをラップしている<a>タグに基準位置を設定 */
.woocommerce ul.products li.product.outofstock > a.woocommerce-LoopProduct-link {
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
}

/* 2. オーバーレイを<a>タグの擬似要素として追加 */
.woocommerce ul.products li.product.outofstock > a.woocommerce-LoopProduct-link:before {
    content: "" !important; /* オーバーレイ自体は空にする */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 55% !important; 
    
    background-color: rgba(0, 0, 0, 0) !important; /* (0%の透明度) */
    z-index: 11 !important; 
    pointer-events: none !important;
}

.woocommerce ul.products li.product.outofstock > a.woocommerce-LoopProduct-link:after {
    content: "完売" !important;
    position: absolute !important;
    
	/* ローズレッド (160, 64, 96) を透明度 80% で設定 */
    background-color: rgba(160, 64, 96, 0.8) !important; 
    
    /* 文字色を白に設定 */
    color: #fff !important;

	/* 影を下に 2px ずらし、4px ぼかす。色は不透明な黒 */
    text-shadow: 0 2px 4px rgba(20, 20, 20, 0.9) !important;

    font-size: 24px !important; 
    font-weight: bold !important;
    z-index: 12 !important; 
    
    /* テキストの上下左右にパディングを追加し、帯状にする */
	padding: 5px 20px 2px 20px !important;
    border-radius: 3px !important;
    
    /* 中央配置のための調整 */
    display: block !important; /* flexではなくblockにし、widthとmarginで中央寄せ */
    width: fit-content !important; /* テキストの幅に合わせる */
    top: 30% !important; /* 画像領域の中央に配置 */
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* transformで正確に中央へ */
    
    /* 元の height, width の指定を削除 */
    pointer-events: none !important;
}

/* 4. タイトルと価格がマスクの下に隠れないように z-index を調整 */
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title,
.woocommerce ul.products li.product.outofstock .price,
.woocommerce ul.products li.product.outofstock .price * {
    position: relative !important;
    z-index: 13 !important; /* マスクより高いz-indexを設定 */
}