/*=====================================================*/
/*　TOPページ　*/
/*=====================================================*/
.mainvisual-kuyounomadogudhi {
    background-image: url(/memorial2019/wp-content/uploads/kuyouno-madoguchi-kaisyu/logo-haikei-kuyou-madoguchi.jpg);
    padding: 2em 0 2em;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
    margin: 0 calc(50% - 50vw) 50px;
    width: 100vw;
}
.mainvisual-kuyounomadogudhi .first-img {
    margin: 0 auto;
    display: block;
    opacity: 0;
    animation: fadeIn 1.5s ease-in-out forwards;
}

/* フェードインアニメーション定義 */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
/****************************************/
.kmk-fukidashi {
    position: relative;
    display: block;
    margin: 1.5em auto;
    padding: 15px;
    min-width: 120px;
    max-width: 880px;
    background: rgb(224, 233, 231);
    background: linear-gradient(0deg, rgba(224, 233, 231, 1) 0%, rgba(255, 255, 255, 1) 100%);
    text-align: center;
    margin-bottom: 70px; /* 三角形の高さ + 10pxの余白 */
}
.kmk-fukidashi:before {
    content: "";
    position: absolute;
    top: 100%; /* 吹き出しの下側に配置 */
    left: 50%;
    transform: translateX(-50%);
    border-left: 120px solid transparent; /* 左右に120pxずつ（合計240px） */
    border-right: 120px solid transparent;
    border-top: 60px solid #e0e9e7; /* 高さ60pxの三角形 */
}
@media only screen and (max-width: 768px) {
    .kmk-fukidashi {}
    .kmk-fukidashi:before {
        border-left: 60px solid transparent; /* 左右に120pxずつ（合計240px） */
        border-right: 60px solid transparent;
        border-top: 30px solid #e0e9e7; /* 高さ60pxの三角形 */
    }
}
.kmk-fukidashi h2 {
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    margin: 50px auto 10px;
    font-size: 2.56rem;
    color: #000;
    width: 100%;
    text-align: center;
    line-height: 100%;
    position: relative; /* 横線を配置するための相対位置を設定 */
    z-index: 1; /* h2のテキストを上に表示 */
    max-width: 550px;
}
/* h2の下に横線を追加して重ねる */
.kmk-fukidashi h2::after {
    content: "";
    display: block;
    width: 100%;
    height: 30px;
    background-color: #f7e192; /* 指定された色 */
    position: absolute;
    bottom: -10px; /* h2に少し重ねるためにマイナスに */
    left: 0;
    z-index: -1; /* 横線をh2のテキストの背面に表示 */
}
@media only screen and (max-width: 485px) {
    .kmk-fukidashi h2 {
        font-size: 1.25em;
    }
    .kmk-fukidashi h2::after {
        height: 25px;
    }
}
@media only screen and (max-width: 375px) {
    .kmk-fukidashi h2 {
        font-size: 1.00em;
    }
    .kmk-fukidashi h2::after {
        height: 15px;
    }
}
.kmk-fukidashi-answer {
    text-align: center;
    font-size: 170%;
}
.kmk-fukidashi-answer .red {
    color: red;
    font-size: 110%;
}
.kmk-fukidashi-answer .purple {
    color: purple;
    font-size: 110%;
}
@media only screen and (max-width: 768px) {
    .kmk-fukidashi-answer {
        text-align: center;
        font-size: 130%;
    }
}
@media only screen and (max-width: 458px) {
    .kmk-fukidashi-answer {
        text-align: center;
        font-size: 100%;
    }
}
/****************************************/
.kmk-anchor {
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    margin: 80px auto 10px;
    font-size: 2.56rem;
    color: #000;
    width: 100%;
    text-align: center;
    line-height: 100%;
    position: relative; /* 横線を配置するための相対位置を設定 */
    max-width: 550px;
}
@media only screen and (max-width: 485px) {
    .kmk-anchor {
        font-size: 1.25em;
    }
}
@media only screen and (max-width: 375px) {
    .kmk-anchor {
        font-size: 1.00em;
    }
}
/****************************************/
.kmk-anchor-list-area {
    max-width: 880px;
    margin: 0 auto;
}
.kmk-anchor-list-area > ul {
    display: flex;
    flex-wrap: nowrap; /* 折り返さず横並び */
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 20px;
}
.kmk-anchor-list-area > ul > li {
    flex: 1 1 0; /* 幅を等分しつつ、縮小を許可 */
}
.kmk-anchor-list-area > ul > li img {
    display: block;
    width: 100%; /* li にフィットさせる */
    height: auto;
    object-fit: cover;
}
/*******************************/
.kmk-p-area {
    max-width: 1200px;
    background-color: #f4e3c0; /* 背景色 */
    border-radius: 10px; /* 角丸 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* ドロップシャドウ */
    padding: 30px 50px 50px 50px;
    margin: 0 auto 50px; /* 外側の余白 */
}
.kmkp01 {
    margin: 50px auto 50px; /* 外側の余白 */
}
@media only screen and (max-width: 768px) {
    .kmk-p-area {
        padding: 5%; /* 内側の余白 */
    }
}
.kmk-p-area a {
    transition: right 0.5s ease-out;
}
@media only screen and (max-width: 458px) {
    .kmkp01 {
        margin: 20px auto 50px; /* 外側の余白 */
    }
}
.kmkp01 h2, .kmkp02 h2, .kmkp03 h2 {
    display: flex; /* フレックスボックスでレイアウトを設定 */
    justify-content: center; /* テキストとアイコンを左右中央揃え */
    align-items: center; /* 上下の中央揃え */
    font-size: 2rem;
    position: relative;
}
.kmkp01 h2::before, .kmkp02 h2::before, .kmkp03 h2::before {
    content: ""; /* 画像アイコンを表示するのでテキストはなし */
    display: inline-block;
    width: 94px; /* アイコンの幅 */
    height: 93px; /* アイコンの高さ */
    margin-right: 10px; /* アイコンとテキストの間に余白を追加 */
    background-image: url(../../../uploads/kuyouno-madoguchi-kaisyu/kym-case-1-t-img.png); /* アイコン画像のパス */
    background-size: contain; /* アイコンが枠内に収まるように調整 */
    background-repeat: no-repeat;
    background-position: center;
}
.kmkp02 h2::before {
    width: 104px; /* アイコンの幅 */
    height: 84px; /* アイコンの高さ */
    background-image: url('../../../uploads/kuyouno-madoguchi-kaisyu/kym-case-2-t-img.png'); /* アイコン画像のパス */
}
.kmkp03 h2::before {
    width: 81px; /* アイコンの幅 */
    height: 81px; /* アイコンの高さ */
    background-image: url('../../../uploads/kuyouno-madoguchi-kaisyu/kym-case-3-t-img.png'); /* アイコン画像のパス */
}
@media only screen and (max-width: 768px) {
    .kmkp01 h2, .kmkp02 h2, .kmkp03 h2 {
        font-size: 1.5rem;
    }
    .kmkp01 h2::before, .kmkp02 h2::before, .kmkp03 h2::before {
        width: 80px; /* アイコンの幅 */
        height: 80px; /* アイコンの高さ */
    }
}
@media only screen and (max-width: 458px) {
    .kmkp01 h2, .kmkp02 h2, .kmkp03 h2 {
        font-size: 1.3rem;
    }
    .kmkp01 h2::before, .kmkp02 h2::before, .kmkp03 h2::before {
        width: 55px; /* アイコンの幅 */
        height: 55px; /* アイコンの高さ */
    }
}
.kmk-data {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}
@media only screen and (max-width: 458px) {
    .kmk-data {
        margin-bottom: 15px;
    }
}
.kmk-data img {
    width: 55%;
}
.kmk-data div {
    width: 42%;
}
.kmk-data p, .kmk-data ul {
    margin-bottom: 20px;
}
@media only screen and (max-width: 458px) {
    .kmk-data p, .kmk-data ul {
        margin-bottom: 10px;
    }
}
.kmk-data ul {
    list-style-type: disc;
    list-style-position: inside;
}
.kmk-data ul li {
    margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
    .kmk-data {
        flex-direction: column;
        justify-content: flex-start
    }
    .kmk-data img {
        width: 100%;
        margin-bottom: 15px;
    }
    .kmk-data div {
        width: 100%;
    }
    .kmk-data ul li {
        margin-bottom: 5px;
    }
}
/*******************************/
.shop-page-area {
    padding: 2em 0 2em;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
    margin: 50px calc(50% - 50vw);
    width: 100vw;
    background: rgb(252, 247, 224);
    background: linear-gradient(90deg, rgba(252, 230, 224, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 60%, rgba(252, 230, 224, 1) 100%);
}
@media screen and (max-width: 485px) {
    .shop-page-area {
        padding: 1.45em;
    }
}
.shop-page-area h2::before {
    content: ""; /* 画像アイコンを表示するのでテキストはなし */
    display: block;
    width: 390px; /* アイコンの幅 */
    height: 55px; /* アイコンの高さ */
    margin: 0px auto 10px; /* アイコンとテキストの間に余白を追加 */
    background-image: url(/memorial2019/wp-content/themes/memorial2025_Ver_1/images/common/logo.svg); /* アイコン画像のパス */
    background-size: contain; /* アイコンが枠内に収まるように調整 */
    background-repeat: no-repeat;
    background-position: center;
}
.shop-page-area h2 {
    display: block;
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 2.56rem;
    color: #000;
    width: 100%;
    text-align: center;
    line-height: 100%;
}
.shop-page-area h2 span {
    color: #d1007a;
}
@media only screen and (max-width: 768px) {
    .shop-page-area h2 {
        font-size: 1.5em;
    }
    .shop-page-area h2::before {
        width: 50px;
        height: 39px;
        display: table-column;
    }
}
@media only screen and (max-width: 485px) {
    .shop-page-area h2 {
        font-size: 1em;
    }
    .shop-page-area h2::before {
        display: none
    }
}
.shop-page-area .w1360 {
    max-width: 1360px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.shop-page-area .w1360 a {
    color: #1200ff !important;
}
.shop-page-area .w1360 .shop-deta img {
    margin: 1rem auto;
}
@media only screen and (max-width: 1030px) {
    .shop-page-area .w1360 {
        max-width: 475px;
        flex-direction: row;
    }
}
@media only screen and (max-width: 475px) {
    .shop-page-area .w1360 {
        max-width: 95%;
        flex-direction: row;
    }
}
/*******************************/
.access-area {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1rem;
}