/* ホバーした時に透過させる（0.7 = 70%の不透明度） */
.btn-hover-effect:hover {
  opacity: 0.7;
  filter: alpha(opacity=70); /* 古いIE用（必要であれば） */
}

/* PC表示（デフォルト）ではクリックを無効にする */
.goods_detail_description_img01 a {
    pointer-events: none;
    cursor: default;
}

/* スマホ表示（画面幅が狭い時）だけクリックを有効にする */
@media screen and (max-width: 767px) {
    .goods_detail_description_img01 a {
        pointer-events: auto;
    }
}

h2.design-b {
    background-color: #F5D0A9;
    padding: 15px;
    text-align: center;        /* 中央寄せ */
    border-top: 2px solid #e2b385;
    border-bottom: 2px solid #e2b385;
    letter-spacing: 0.1em;     /* 文字の間隔を少し広げる */
    font-weight: bold;
    margin: 40px 0 20px;
}


/* 外枠のスタイル */
.frame-border-blue-title {
    position: relative;          /* タイトルの位置基準にするため */
    margin-top: 20px;            /* タイトルが突き出る分の余白 */
    padding: 30px 20px 20px;     /* 内側の余白 */
    border: 2px solid #007bff;   /* 青い太枠 */
    border-radius: 8px;          /* 角を少し丸く（不要なら削除） */
    background-color: #fff;      /* 背景色（突き抜ける文字の背景を隠すため） */
}

/* 突き抜けるタイトルのスタイル */
.frame-title {
    position: absolute;
    top: -1.2rem;                /* 上に突き抜けさせる（高さの半分程度） */
   left: 50%; transform: translateX(-50%);
    background-color: #fff;      /* 枠線を隠すために背景色を敷く */
    padding: 0 10px;             /* 文字の左右に少し隙間を作る */
    color: #007bff;              /* 文字色を枠と同じ青に */
    font-weight: bold;
    font-size: 1.2rem;
}

/* 新しいカラムレイアウト（背景グリーン版） */
.custom-info-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin: 40px 0;
    padding: 30px;           /* 余白を少し広めに */
    background-color: #c7e0cc; /* 指定のグリーン */
    border-radius: 12px;      /* 角丸に */
}

/* 文字エリア */
.custom-info-text {
    flex: 1; 
}

.custom-info-text h3 {
    margin: 0 0 15px;
    font-size: 1.5rem;
    color: #1a4d2e;           /* 文字色を濃い緑にして読みやすく */
    border-bottom: 2px solid #a8c9ae; /* 下線もグリーン系に */
    padding-bottom: 10px;
}

.custom-info-text p {
    margin: 0;
    line-height: 1.8;
    font-size: 1.1rem;
    color: #333;
    text-align: justify;
}

/* 画像エリア：幅200px固定 */
.custom-info-image {
    flex: 0 0 200px; 
}

.custom-info-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 3px solid #fff;   /* 画像に白枠をつけて浮き立たせる */
    border-radius: 6px;
}

/* スマホ表示 */
@media screen and (max-width: 768px) {
    .custom-info-box {
        display: block;
        padding: 20px;
    }
    .custom-info-image {
        width: 180px;
        margin: 20px auto 0;
    }
}

/* 電話リンク部分の調整 */
.goods_detail_description_img01 a {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.goods_detail_description_img01 a:hover {
    opacity: 0.7; /* ホバー時に少し薄くする */
}

/* リスト全体のコンテナ */
.points-list-v3 {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 各行のスタイル */
.point-row-v3 {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 20px;
}

/* 楕円アイコン（1.3倍に調整） */
.point-badge {
    flex: 0 0 140px;         /* 文字が大きくなる分、幅を少し広げました */
    height: 50px;            /* 文字が大きくなる分、高さを少し広げました */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: #fff !important;
    font-weight: bold;
    line-height: 1;
    /* デフォルトの1.3倍に指定 */
    font-size: 150% !important; 
}

/* 各項目の個別色 */
.badge-kokusan { background-color: #35b597 !important; } 
.badge-tegaru { background-color: #F39800 !important; }  
.badge-oishii { background-color: #e95464 !important; }  

/* 説明文エリア */
.point-content-v3 {
    flex: 1;
}

/* 太字の見出し（1.3倍に調整） */
.point-content-v3 b {
    color: #333;
    display: block;
    margin-bottom: 8px;
    line-height: 1.4;
    /* デフォルトの1.3倍に指定 */
    font-size: 130% !important; 
}

/* 説明文（サイトのデフォルトを継承） */
.point-content-v3 p {
    margin: 0;
    line-height: 1.8;
    color: #444;
}

/* スマホ表示 */
@media screen and (max-width: 768px) {
    .point-row-v3 {
        gap: 12px;
    }
    .point-badge {
        flex: 0 0 95px;
        height: 38px;
        font-size: 120% !important; /* スマホでは少しだけ控えめに調整 */
    }
}
.copy{
	padding-bottom:10px;
}


/* オーダーボタンのマウスオーバー */ 

.order_btn a:hover {
    opacity: 0.6 !important;
}


/* 画像拡大の際の、虫眼鏡 */ 

.imgzoom{
position: relative;
}

.imgzoom:after {
    content: '';
    background: url(/defaultShop/js/base2016_js/zoom_icon.png) top left no-repeat;
    width: 25px;
    height: 25px;
    background-size: 25px;
    display: block;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 5px;
    pointer-events: none;
}


.sub {
    color: #888;
    display: block;
    font-size: 15px;
    line-height: 1.3;
    padding: 5px 0 0 15px;
}


.wrapper .backgreen:after {

    background: #35b597 !important;
}

@media screen and (max-width: 767px) {
.wrapper .backgreen:after {

    background: #35b597 !important;
}

.mt100 {
    margin-top: 0px !important;
}

}




/* 共通CSS */ 


.copy{
	padding-bottom:10px;
}


/* オーダーボタンのマウスオーバー */ 

.order_btn a:hover {
    opacity: 0.6 !important;
}


/* 画像拡大の際の、虫眼鏡 */ 

.imgzoom{
position: relative;
}

.imgzoom:after {
    content: '';
    background: url(/defaultShop/js/base2016_js/zoom_icon.png) top left no-repeat;
    width: 25px;
    height: 25px;
    background-size: 25px;
    display: block;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 5px;
    pointer-events: none;
}