@charset "UTF-8";
/* CSS Document */

       .page-background {
            background-color: #f6ebd8; /* 背景色 */
            width: 100%;               /* 横幅を100%に設定 */
            padding-top: 50px;         /* PC用の上部パディングは維持 */
            padding-bottom: 20px;      /* 下部のパディングを適宜設定 (例) */
                                       /* 左右のパディングは削除して背景を広げる */
            box-sizing: border-box;    /* padding を含めて幅計算 */
        }
 
        .container {
            max-width: 960px;          /* コンテンツの最大幅 (例) */
            margin: 0 auto;            /* 中央寄せ */
            padding: 20px;             /* 内部パディングは維持 */
            display: flex;
            flex-direction: column;
        }

        .container-2 {
            max-width: 960px;          /* コンテンツの最大幅 (例) */
            margin: 0 auto;            /* 中央寄せ */
            padding: 10px 0px;             /* 内部パディングは維持 */
            /* align-items: center; /* .container-2 が flex コンテナでない場合、これは不要 */
        }

        /* Default visibility for PC/SP images (Mobile First approach) */
        h2 img.pc,
        h3 img.pc {
            display: none;
        }

        h2 img.sp,
        h3 img.sp {
            /* display: block; */
        }

        .container-2 h3 img { /* General style for images in H3 */
            margin-bottom: 10px;
            display: block;
            height: auto;
        }

        .text-area {
            margin-bottom: 20px;
        }

        .text-area h2 {
            margin: 0;
            padding: 0;
            font-size: 1em;
            line-height: 1;
            font-weight: normal;
        }

        .text-area p {
            margin-bottom: 15px;
			text-align: left;
        }
        
        p.main-intro-text {
            font-size: 1.1em; /* SP用のフォントサイズ */
            line-height: 1.6;
        }
        

        .image-container {
            width: 450px;
            margin-top: 20px;
        }

       .image-container img {
            display: block;
            max-width: 100%;
            height: auto;
        }
        
        .title-image { 
            display: block;
            /* width と max-width を削除して画像の元のサイズで表示 */
            height: auto;
            margin-bottom: 20px;
        }
        

.room {
    border-radius: 8px;
    max-width: 960px;      /* コンテンツの最大幅 (例) */
    margin-left: auto;     /* section.room の中央寄せ */
    margin-right: auto;    /* section.room の中央寄せ */
    margin-top: 20px;      /* 適宜調整 */
    margin-bottom: 20px;   /* 適宜調整 */
    /* padding はSP/PCで異なるためメディアクエリ内で設定されているものを尊重 */
}

/* ▼▼▼ 修正したCSS ▼▼▼ */
.room.entrance {
    position: relative; /* 子要素の絶対配置の基準とする */
    padding-bottom: 40px; /* 注釈テキストのための十分な下部パディングを確保 */
}

.tax-note-entrance {
    text-align: right; /* テキストを右寄せに */
    position: absolute;
    bottom: 10px;
    right: 15px;       /* .room.entrance の右端からの距離 */
    font-size: 0.85em;
    color: #555555;
    margin: 0;
    line-height: 1.2;
}
/* ▲▲▲ ここまで修正したCSS ▲▲▲ */

.product-jishin-list { 
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

main.content-grid3 { /* HTMLのmainタグに適用 */
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 960px;      /* コンテンツの最大幅 (例) */
    margin-left: auto;     /* 中央寄せ */
    margin-right: auto;    /* 中央寄せ */
    /* HTML内の<br>の代わりに上下マージンを設定することを推奨 */
    /* 例: margin-top: 20px; margin-bottom: 20px; */
    /* 今回はHTMLの<br>を尊重するため、上下マージンは最小限 */
}

.area-card3 { 
    padding: 10px;
}

.area-card33 {
    padding: 10px;
}

.area-header3 { 
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

.area-header33 { 
    display: flex;
    align-items: center;
}

.area-number3 { 
    background-color: #0aafff;
    color: #ffffff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 15px;
    flex-shrink: 0;
}

/* ★★★★★ 修正点1 ★★★★★ */
/* HTMLのh4タグがh5に変更されたため、セレクタを「h5」に修正 */
.item-info3 h5 { 
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
}

.item-description3 { 
    font-size: 0.95em;
    margin-bottom: 15px;
}

.measure-section3 { 
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
}

.measure-tag3 { 
    background-color: #ea5504;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
    margin-right: 12px;
    white-space: nowrap;
    font-size: 1em;
}

.measure-list3 { 
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    font-size: 1em;
    color: #ea5504;
    font-weight: bold;
}

.measure-list3 li { 
    margin-bottom: 5px;
}

.product-jishin-showcase3 { 
    text-align: center;
   /* margin-bottom: 20px;*/
    padding: 15px 0;
}

.product-jishin-showcase3 img { 
    max-width: 70%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ★★★ セレクタの具体性を高め、スタイルを確実に適用 ★★★ */
.product-jishin-showcase3 p.product-jishin-name3 { 
    font-weight: 500;
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5;   /* 行間を最小化 */
}

.product-jishin-showcase3 p.product-jishin-price3 { 
    font-size: 1em; /* ベースのフォントサイズ */
    font-weight: bold;
    margin-top: 10px;    /* 他のルールによるmargin-topを上書き */
    margin-bottom: 20px; /* 「くわしく見る」ボタンとの間隔 */
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;   /* 行間を最小化 */
}
/* ★★★ 修正ここまで ★★★ */

/* ★★★ 追加したスタイル ★★★ */
.product-jishin-price3 .price-value { /* こちらのセレクタも具体性を高めることを検討 (例: .product-jishin-showcase3 p.product-jishin-price3 .price-value) */
    font-size: 1.35em; /* 親要素(.product-jishin-price3)の1.5倍のサイズ */
    color: #FF6600;   /* オレンジ色 */
    /* font-weight: bold; は親から継承されるので、必要に応じてさらに太くする場合は指定 */
}
/* ★★★ 追加ここまで ★★★ */

.details-link3 {
    display: block;
    width: fit-content;
    margin: 10px auto;
    background-color: #ffffff;
    color: #000000;
    padding: 12px 45px 12px 25px;
    text-decoration: none;
    border: 2px solid #000000;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 17px;
    position: relative;
    box-shadow: 0px 4px 0px 0px #000000;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.2s ease-out;
    cursor: pointer;
    line-height: 1.4;
}

.details-link3::after {
    content: '▶';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    color: #000000;
}

.details-link3:hover {
    background-color: #f5f5f5;
    color: #000000;
    text-decoration: none;
    transform: translateY(1px);
    box-shadow: 0px 3px 0px 0px #000000;
}

.details-link3:active {
    background-color: #e9e9e9;
    transform: translateY(3px);
    box-shadow: 0px 1px 0px 0px #000000;
}

.box2 { 
    padding: 1.5em 1em;
    border: 2px solid #000000;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 4px 8px #000000;
}

.box2 p { 
	font-size: 1em;
    margin-bottom: 15px;
}

/* ★★★★★ 修正点2 ★★★★★ */
/* HTMLのh4タグがh5に変更されたため、セレクタを「h5」に修正 */
.box2 h5 { 
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
	color: #0aafff;
}

p.text3 { /* HTMLのpタグに適用 */
    font-size: 1.5em; /* p.text3 は以前 1.3em でしたが、ご提供のファイルでは 1.5em でした */
	text-align: center;
    font-weight: 600;
    max-width: 960px;      /* コンテンツの最大幅 (例) */
    margin-left: auto;     /* 中央寄せ */
    margin-right: auto;    /* 中央寄せ */
    margin-top: 20px;      /* 適宜調整 */
    margin-bottom: 20px;   /* 適宜調整 */
}

.area-title3 { 
    font-size: 1.5em;
	padding-top: 10px;
}

/* PC screen styles */
@media (min-width: 769px) {
    /* PC/SP image visibility for PC */
    h2 img.pc,
    h3 img.pc {
        display: block;
    }
    h2 img.sp,
    h3 img.sp {
        display: none;
    }

    .container {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center;    /* 中央揃えに変更 */
    }

    .text-area {
        text-align: left;
        margin-bottom: 20px;    /* 画像との間に余白を確保 */
        max-width: 100%;        /* 横幅をリセット */
    }
    
    .image-container {
        margin-top: 0;
        width: 450px;           /* 元の幅を維持 */
    }
    
    p.main-intro-text {
        font-size: 1.1em; /* PC用のフォントサイズ */
    }
    
    .text-area h2 img.pc.title-image {
        margin-left: 0;
        margin-right: 0;
    }

    .container-2 h3 img.pc.subtitle-image-inside-h2 { 
        /* width, max-width を削除 */
        display: block;
        margin-left: auto; /* 中央揃えに変更 */
        margin-right: auto;
    }
    
    main.content-grid3 { /* PCのcontent-grid3 */
        grid-template-columns: repeat(2, 1fr);
        /* max-width と margin: auto はグローバル設定を継承 */
    }
}

/* SP screen styles */
@media screen and (max-width: 768px) {
    .page-background {
        padding-top: 10px;     /* SP用の上部パディング */
        padding-bottom: 10px;  /* SP用の下部パディングを適宜設定 (例) */
                               /* 左右のパディングはグローバルで削除済みなので不要 */
    }

    h2 img.pc,
    h3 img.pc {
        display: none !important;
    }
    h2 img.sp,
    h3 img.sp {
        display: block !important;
    }

    .container { /* SPではmax-widthがグローバルで設定されている想定、paddingは維持 */
        padding: 20px; /* SPでの.containerの内部パディング */
    }
     /* .container-2, main.content-grid3, section.room, p.text3 も同様にSPではmax-width 100%で、
        左右の余白は親要素のpadding (今回は削除したので、自身のpadding)で制御することが多い。
        ここではmax-width: 960px がグローバルに効いているので、画面が狭い場合は自動的に100%幅になる。
        必要に応じて、これらの要素に padding: 0 15px; などを追加して左右の余白を確保します。
     */
    .container, .container-2, main.content-grid3, .room, p.text3 {
        padding-left: 15px;  /* SP時の左右の内部余白 */
        padding-right: 15px; /* SP時の左右の内部余白 */
    }


    .text-area {
        text-align: center;
    }
    
    .text-area h2 img.sp.title-image {
        margin-left: auto;
        margin-right: auto;
        /* max-width: 108%; を削除 */
        margin-bottom: 15px;
    }
    

    .image-container {
        width: 100%;
        margin-top: 20px;
    }

    .room { 
        padding-top: 15px;    /* SP時のroomの上下パディング */
        padding-bottom: 15px; /* SP時のroomの上下パディング */
        /* padding-left, padding-right は上記で設定 */
    }

    .product-jishin-list { 
        flex-direction: column;
        gap: 15px;
    }

    .container-2 h3 img.sp.subtitle-image-inside-h2 {
        /* width, max-width を削除 */
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .text3 { /* p.text3 のSP時フォントサイズ、ご提供ファイルでは1.2em */
        font-size: 1.2em;
    }
    
    .area-title3 { 
        font-size: 1.5em;
    }	
    
    /* .page-background のSP用paddingは先頭で設定済み */

    .details-link3 { 
        padding: 10px 38px 10px 20px;
        font-size: 15px;
        border-width: 1.5px;
        box-shadow: 0px 3px 0px 0px #000000;
        border-radius: 8px;
    }

    .details-link3::after { 
        right: 18px;
        font-size: 0.85em;
    }

    .details-link3:hover { 
        transform: translateY(1px);
        box-shadow: 0px 2px 0px 0px #000000;
    }

    .details-link3:active {
        background-color: #e9e9e9; /* ご提供のファイルに基づく */
        transform: translateY(3px); /* ご提供のファイルに基づく */
        box-shadow: 0px 1px 0px 0px #000000;
    }
    /*
      .room.entrance と .tax-note-entrance のルールはグローバルに移動したため、
      このメディアクエリ内からは削除されています。
    */
}