@charset "UTF-8";
.product-list__fav-items {
    position: absolute;
    top: 5px;
    right: 25px;
    width: 18px;
    text-align: right;
}
.prd-lst-sort, .prd-lst-pager-phone, .prd-lst-pager, .prd-lst-pos, .prd-lst-name, .prd-lst-exp, .prd-lst-exp-p, .prd-lst-price, .ttl-h2 {
    display: none !important;
}
.image-tk {
    border: none;
    outline: 2px solid #efefef;
    outline-offset: -4px;
    border: 1px solid #efefef;
}
.img-70 {
    width: 70%;
    margin: 0 auto;
}
.prd-lst-img {
    border: none!important;
    width: 100%;
    height: auto;
    display: block;
}
.prd-lst-unit-tk {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0!important;
    margin: 0!important;
}
@font-face {
    font-family: 'CochinWeb';
    src: local('Cochin'), local('Cochin-Regular'), url('https://malulani.tv/fonts/cochin/Cochin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
.title-m h2 {
    font-family: 'CochinWeb', serif;
    font-weight: 100;
    padding: 10px 0!important;
    font-size: 2rem!important;
}
.title-m h2 span {
    font-size: 1.6rem!important;
}
.cyakuga {
    outline: 2px solid #efefef;
    outline-offset: -4px;
    border: 1px solid #efefef;
}
.back-img {
    padding-top: 20px;
}
h3 {
    text-align: center;
    margin: 0!important;
}
.small-txt {
    font-size: 80%;
}
.wakuwaku {
    padding: 3px 0 7px;
    background-color: #fdfdff;
    border: 2px solid #efefef;
}
h2.product-title {
    font-size: 30px;
    font-weight: 600;
    /*color: #6f0900;
color: #9d8b27;*/
    color: #573302;
    margin: -7px 0 10px 0;
    padding: 0 0 10px 0!important;
    line-height: 1;
    border-bottom: #937c6f 1px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    letter-spacing: 3px;
    font-family: 'Noto Serif SC', serif;
}
.subtitle {
    font-family: 'Noto Serif SC', serif;
    width: 100%;
    display: flex;
    align-items: center;
    color: #937c6f;
    letter-spacing: 1px;
    line-height: 1;
    text-align: center;
}
.subtitle::before, .subtitle::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #937c6f;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
p {
    font-size: 15.5px
}

@media screen and (max-width: 1200px) {
h2.product-title {
    font-size: 29px;
}
}

@media screen and (max-width: 1050px) {
h2.product-title {
    font-size: 27px;
}
}

@media screen and (max-width: 992px) {
h2.product-title {
    font-size: 25px;
}
}

@media screen and (max-width: 880px) {
h2.product-title {
    font-size: 24px;
}
}

@media screen and (max-width: 768px) {
h2.product-title {
    font-size: 27px;
}
.subtitle {
    font-size: 15px;
}
p {
    font-size: 14.5px
}
}

@media screen and (max-width: 600px) {
h2.product-title {
    font-size: 25px;
}
}

@media screen and (max-width: 500px) {
h2.product-title {
    font-size: 24px;
}
}

@media screen and (max-width: 440px) {
	.title-m h2 span {
    font-size: 1.35rem!important;
}
h2.product-title {
    font-size: 23px;
}
.subtitle {
    font-size: 14px;
    letter-spacing: 0;
}
p {
    font-size: 14px
}
}

@media screen and (max-width: 400px) {
h2.product-title {
    font-size: 21px;
}
}
.ltt-0 {
    letter-spacing: 0!important;
}
.price-ri {
    font-size: 17px;
    color: #292929;
    border-bottom: 0.5px solid #ddd;
}
.price-ri span {
    font-size: 12px;
}

@media screen and (max-width: 550px) {
.price-ri {
    margin-top: 10px;
}
}
.button-container {
    margin-bottom: 50px!important;
}
.ishiishi {
    font-size: 110%;
    text-align: center;
    border-bottom: 0.5px solid #efefef;
}
.stone-dis a {
    color: #333;
    text-decoration: none;
}
/* ベース：画像リンクの“きらり” */
.wakuwaku .f-stone a {
    position: relative;
    overflow: hidden;
}
.wakuwaku .f-stone a::before {
    content: "";
    position: absolute;
    top: -140%;
    left: -160%;
    width: 45%;
    height: 220%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 45%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg);
    pointer-events: none;
}
@keyframes shine-swipe {
from {
left: -160%;
}
to {
left: 160%;
}
}

/* 1) 画像自体にホバー/フォーカス → その画像だけ“きらり” */
.wakuwaku .f-stone a:hover::before, .wakuwaku .f-stone a:focus-visible::before {
animation: shine-swipe 900ms ease-in;
}

/* 2) 同じペアの「テキストa」にホバー/フォーカス → 直前の画像だけ“きらり” */
.wakuwaku td.f-stone:has(+ td.stone-dis a:hover) a::before, .wakuwaku td.f-stone:has(+ td.stone-dis a:focus-visible) a::before {
animation: shine-swipe 900ms ease-in;
}

/* 省アニメ設定への配慮（任意） */
@media (prefers-reduced-motion: reduce) {
.wakuwaku .f-stone a:hover::before, .wakuwaku .f-stone a:focus-visible::before, .wakuwaku td.f-stone:has(+ td.stone-dis a:hover) a::before, .wakuwaku td.f-stone:has(+ td.stone-dis a:focus-visible) a::before {
animation: none;
}
}
.size-all {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 0 15px;
}
.size-all th {
    border: 1px solid #d6d6d6;
    padding: 14px 3px;
    text-align: center;
    font-weight: normal;
    font-size: 15px;
    line-height: 1.3;
    color: #5f514b;
    background: #fff;
}
.size-all th small {
    font-size: 12px;
    font-weight: normal;
}

/* スマホ：2列 */
@media (max-width:600px) {
.size-all tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.size-all th {
    display: block;
    font-size: 14px;
    padding: 12px 6px;
}
.size-all th small {
    font-size: 12px;
}
}
.fs14 {
    font-size: 13px;
}
.size_are66 {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
}
.size_are66 .imp {
    margin: 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #5f514b;
    font-weight: normal;
}
.sozai-inner {
    font-size: 14px;
    color: #555;
}

@media (max-width:600px) {
.size_are66 .imp {
    font-size: 14px;
}
.sozai-inner {
    display: inline;
    font-size: 13px;
}
}
.pr-ob, .pr-ob *, .pr-ob *::before, .pr-ob *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.pre-ob {
    font-family: 'Noto Serif JP', 'Georgia', serif;
    background-color: #fff;
    color: #4a3e3d;
    line-height: 1.8;
    display: flex;
    justify-content: center;
}
.pr-container {
    width: 100%;
    max-width: 900px;
    text-align: center;
    margin: 0 auto 60px;
}
.main-card {
    border: 1px solid #c8b9a6;
    padding: 10px 30px 30px;
    position: relative;
    background-color: #fff;
}
.badge-outer {
    position: absolute;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 65px;
    background-color: #fff;
    overflow: hidden;
}
.badge-circle-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: 130px;
    border: 1px solid #c8b9a6;
    border-radius: 50%;
    box-sizing: border-box;
}
.badge-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.badge-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 46px;
    line-height: 0.8;
    color: #4a3e3d;
    letter-spacing: 0.02em;
    display: block;
}
.badge-eg {
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-style: italic;
    color: #a89481;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-top: 4px;
    display: block;
}
.card-inner-title {
    font-size: 23px;
    letter-spacing: 0.2em;
    color: #4a3e3d;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: 400;
}
.card-flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "image-first stone-list" "description image-second";
    gap: 15px;
    text-align: left;
}
.image-first {
    grid-area: image-first;
}
.image-second {
    grid-area: image-second;
}
.right-column {
    display: contents;
}
.pr-stone-list {
    grid-area: stone-list;
    background-color: #fcfcfa;
    border: 1px solid #ede8de;
    padding: 35px;
    margin-bottom: 0;
}
.description-text {
    grid-area: description;
    background-color: #fcfcfa;
    border: 1px solid #ede8de;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.main-image {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.pr-stone-list {
    margin-bottom: 15px;
}
.stone-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #c8b9a6;
}
.pr-stone-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.stone-info {
    font-size: 13px;
}
.stone-name {
    font-size: 15px;
    font-weight: 600;
    color: #4a3e3d;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}
.stone-desc {
    color: #5c4e4c;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.4;
}
.description-text {
    font-size: 15px;
    color: #4a3e3d;
    font-weight: 300;
    line-height: 1.4;
}
.description-text p:first-child {
    margin-bottom: 10px;
}
.mt-80 {
    margin-top: 100px;
}
.mt-30 {
    margin-top: 30px;
}

@media (max-width: 768px) {
.pre-ob {
    padding: 40px 15px;
}
.main-card {
    padding: 15px 20px 30px 20px;
}
.badge-outer {
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 50px;
}
.badge-circle-line {
    position: absolute;
    width: 100px;
    height: 100px;
}
.badge-text {
    bottom: 0px;
}
.badge-num {
    font-size: 32px;
}
.badge-eg {
    font-size: 13px;
    margin-top: 2px;
}
.card-inner-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.card-flex {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.right-column {
    display: contents;
}
.image-first {
    order: 1;
}
.pr-stone-list {
    order: 2;
    background-color: #fcfcfa;
    border: 1px solid #ede8de;
    padding: 25px 20px 5px;
    margin-bottom: 0;
}
.image-second {
    order: 3;
}
.description-text {
    order: 4;
    background-color: #fcfcfa;
    border: 1px solid #ede8de;
    padding: 25px 20px;
}
.pr-stone-img {
    width: 38px;
    height: 38px;
}
}
.pr-header-area {
    margin-top: -25px!important;
    padding: 0 0 100px;
    text-align: center;
    background-color: #fff;
}
.pr-course-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 28px;
    color: #4a2d1d;
    font-family: "Times New Roman", "Yu Mincho", "游明朝", serif;
}
.pr-course-price {
    letter-spacing: 0.01em;
    line-height: 1;
}
.pr-course-en {
    font-size: 26px;
    align-self: flex-end;
}
.pr-course-line {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 1px;
    background-color: #c59b4c;
}
.pr-course-title .pr-course-line:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 4px;
    height: 4px;
    background-color: #c59b4c;
}
.pr-course-title .pr-course-line:last-child::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 4px;
    height: 4px;
    background-color: #c59b4c;
}
.set {
    margin: 50px auto;
    border: 2px solid #caac71;
    box-shadow: 2px 2px 2px #ccc;
}
.set .box-title {
    padding: 7px 10px 10px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    background-color: #caac71;
}
.set .contents {
    padding: 1.2em 1em 1em;
}
.set table {
    width: 100%;
    border-collapse: collapse;
}
.set td {
    padding: 5px 0;
    vertical-align: top;
}
.set .item_power {
    width: 25px;
    padding-right: 5px;
    white-space: nowrap;
}
.set small {
    display: block;
    margin-top: 3px;
    line-height: 1.6;
}
.set-btn-wrap {
    text-align: center;
}
.btn-flat-border {
    display: inline-block;
    width: 45%;
    margin: 20px 5px 10px;
    padding: 1em 0;
    font-size: 15px;
    line-height: 1;
    color: #caac71;
    text-align: center;
    text-decoration: none;
    border: 3px solid #caac71;
    border-radius: 2px;
    transition: .4s;
}
.btn-flat-border:hover {
    color: #fff;
    text-decoration: none;
    background-color: #caac71;
}
.btn-flat-border:visited {
    text-decoration: none;
}

@media screen and (max-width: 768px) {
.btn-flat-border {
    width: 80%;
}
}