* { 
    /* outline: 1px solid #FF0000;   Debud Code - 要素枠表示　*/
    box-sizing: border-box; /* width・heightプロパティをborder領域まで含む幅・高さに */
}

.outlined-text {
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;

    font-size: 2rem;
    color: #ffffff; /* 文字の中の色 (白抜き)*/
    -webkit-text-stroke: 2px #000000; /* 線の太さと色 */
    paint-order: stroke fill; /* 文字が太って潰れるのを防ぐ */

}

h1.outlined-text  {
    text-align: left;
}

.card-shelf { /* 絵ハガキ棚(ハガキ4枚スペース) (ul)*/
    display: flex;
    padding: 0; /* 子要素(絵ハガキ)間隔を棚に均等に割り付ける */


        /* justify-content: 子要素を均等配置する。このとき左右端の要素も親要素の端から均等に離して配置する */
    gap: 2%; /* 子要素(絵ハガキ)間隔 */
}

.card-shelf li { /* 絵ハガキ1枚分スペース */
    /* flex: 1;  checkboxタグを親boxの最下につけるため指定 */
    list-style: none; /* リスト要素頭の・(テン)表示を消去 */        
    flex-direction: column; /* 上から下に縦並び子要素(番号・絵・タイトル等)を配置 */

    width: 100%;
    height: 100%;

    border: 1px solid;
    padding: 0px 10px 0px 10px;
}

.painting-frame { /* 絵はがき額縁 */
    /* 額縁の外側サイズと余白 */
    display: inline-block;
    padding: 3px; /* 内側の台紙部分 */
    background: #DCE4EE; /* 台紙の色（アイボリー） #fdfbf7*/

    /* アンティーク風のな枠線と立体感 */
    border: 6px solid #3d2817; /* 深い木目調のブラウン */
    box-shadow: 
    0 0 0 2px #c5a059, /* ゴールドの内縁ライン */
    0 0 0 10px #26170b, /* 外側の濃い影フレーム */
    3px 6px 12px rgba(0, 0, 0, 0.5); /* 実際の影 */
}

.painting-frame img { /* 絵はがき本体(横置き) */
    /* display: block; */
    text-align: center; /* 横方向で中央詰め */
    vertical-align: middle; /* 縦方向で中央詰め */

    width: 100%; /* 画像サイズの縮拡 */
    height: 100%;

    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 絵画らしさを出すための微調整 */
}

.painting-frame-vertical { /* 絵はがき(縦置)*/
    /* 額縁の外側サイズと余白 */
    display: inline-block;
    text-align: center;  /* 横方向で中央詰め */ 

    padding: 3px; /* 内側の台紙部分 */
    background: #DCE4EE; /* 台紙の色（アイボリー） #fdfbf7*/

    /* アンティーク風のな枠線と立体感 */
    border: 6px solid #3d2817; /* 深い木目調のブラウン */
    box-shadow: 
    0 0 0 2px #c5a059, /* ゴールドの内縁ライン */
    0 0 0 10px #26170b, /* 外側の濃い影フレーム */
    3px 6px 12px rgba(0, 0, 0, 0.5); /* 実際の影 */
}

.painting-frame-vertical img { /* 絵本体(縦置)*/

    width: 44%; /* 画像サイズの要素内縮拡 */
    height: 44%;

    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 絵画らしさを出すための微調整 */
}

p.card-number { /* 商品番号 */
    /* flex-grow: 1; */
    text-align: center;
    margin-top: 1%;
    margin-bottom: 0px;
    
    font-size: 16px;
    color: #ffffff; /* 文字の中の色 (白抜き)*/
    -webkit-text-stroke: 2px #000000; /* 線の太さと色 */
    paint-order: stroke fill; /* 文字が太って潰れるのを防ぐ */
    
}

p.card-title { /* 題名の文字とスペース */
    flex-grow: 1; /* 親の余ったスペースを他の子要素に先んじて取得 */
    text-align: center;
    margin-top: 0%;
    margin-bottom: 0px;
            
    font-size: 16px;
    color: #ffffff; /* 文字の中の色 (白抜き)*/
    -webkit-text-stroke: 2px #000000; /* 線の太さと色 */
    paint-order: stroke fill; /* 文字が太って潰れるのを防ぐ */
    
}

p.checkbox { /* カードの選択(checkbox) */

    text-align: center;
    margin: 6px 0px 4px 0px;
    background-color: #000;
    color: #fff;
        
}

.separator { /* カード棚段間の仕切り shop/postcard/index.html適用 */
    margin-top: 10pt;
    padding-top: 20pt;
    background-image: url(../shop/postcard/images/reef.gif);
    background-repeat: repeat-x;
}

p.submit_btn {
    text-align: center;
}

p.submit_btn input { /* 購入決定ボタン */
    height: 80px;
    width: 50%;

    font-size: 105%;
    text-align: center;

    border: 2;              /* Removes the default border */
    margin-top: 40px;
    margin-bottom: 40px; 
    padding: 10px 20px;        /* Adds padding inside the button */
    cursor: pointer;          /* Changes the mouse cursor on hover */

    background: #FFF1AB;
    color: #fff;
    -webkit-text-stroke: 1px #000;

}

footer {        
    width: 100%;
    padding-top: 1%;
    padding-bottom: 35px;
    background-color: #253958;
    color: #FFFFFF;
    text-align: center; /* 文字をセンタリング */
    clear: both; /*左（left）と右（right）の両方の float（回り込み）指定を解除し、次の要素を下の行へ移動させる */
}

footer a {
    text-decoration: none;
    border: none;
}

footer .pr {
    display: block;
}

p.shopreturn button {
    height: 60px;
    width: 30%;
    border:2;
    font-size: 100%;
    background: #FFF1AB;
}

p .shopreturn copyright {
    text-align: center;
}