:root{
    --bg: #dcc2a5;
    --text: #392c23;
    --accent: #bc8762;
    --card-bg: #ffffffb8;/* カード背景色 */
    --top-card-bg: #fcaf78b8;/* 先頭カード背景色 */
    --max-width: 1100px;
    --banner: #b07a54; /* バナー色 */
    --stitch: #e07a2b; /* 点線 */
    /* タイル内画像の幅（フル幅タイル時）を調整 */
    --tile-image-width: 40%;
    --tile-image-max: 360px; /* 旧: 最大ピクセル幅（互換用） */
    --tile-image-max-height: 360px; /* 最大ピクセル高さ（new） */
}

html,body{height:100%;}
body{
    margin:0;
    font-family: "Noto Sans JP", "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;
    padding:2.5rem 1rem;
    box-sizing:border-box;
    display:flex;
    justify-content:center;
}

.wrap{
    width:100%;
    max-width:var(--max-width);
}

/* ヘッダ／タイトルバナー */
header{margin-bottom:1rem}

.title-banner{
    position:relative;
    background:var(--banner);
    color:var(--bg);
    padding:1rem;
    border-radius:8px;
    margin-bottom:1rem;
}

/* 内側の点線*/
.title-banner::after{
    content: "";
    position:absolute;
    top:6px; right:8px; bottom:6px; left:8px;
    border:4px dashed var(--stitch); 
    border-radius:3px;
    pointer-events:none;
}

.brand{
    display:flex;
    flex-direction:column;
}

.site-title{
    font-size:1.25rem;
    font-weight:700;
    color:var(--text);
    margin:0;
    letter-spacing:0.02em;
}

.site-sub{font-size:0.9rem; color:#382d25; margin:0}

/* タイル */
.tiles{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:1rem;
    align-items:start;
}

.tiles > .top-tile:first-child,
.tiles > .tile:nth-child(-n+3),
.tiles > .tile:nth-last-child(-n+2) {
    grid-column: 1 / -1;
}

.top-tile{
    background:var(--top-card-bg);
    padding:1rem;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(57,44,35,0.06);
    border-top:6px solid var(--accent);
    display:flex;
    flex-direction:column;
    min-height:120px;
}

.tile{
    background:var(--card-bg);
    padding:1rem;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(57,44,35,0.06);
    border-top:6px solid var(--accent);
    display:flex;
    flex-direction:column;
    min-height:120px;
}

.tile h2{
    margin:0 0 0.5rem 0;
    font-size:1.05rem;
    color:var(--text); /* セクションタイトルを本文色に変更 */
    line-height:1.2;
}

.tile p{margin:0; color:var(--text);}

/* 画像の既定（小タイルでは幅100%） */
.tile img{
    width:100%;
    height:auto;
    display:block;
    margin-top:0.5rem;
}

/* フル幅タイル（先頭・1〜3・最終）では画像を左に寄せてテキスト回り込み */
.tiles > .top-tile:first-child img,
.tiles > .tile:nth-child(-n+3) img,
.tiles > .tile:last-child img{
/* フル幅タイル（先頭・1〜3・最終）では画像を右寄せしてテキスト回り込み */
    float:right;
    /* width:var(--tile-image-width); */
    width: auto;
    max-width: var(--tile-image-max);  /* 互換用 */
    /* 高さ上限で制御したい場合は以下の `max-height` を利用します */
    max-height: var(--tile-image-max-height);
    height: auto;
    margin:0 0 1rem 1rem;
}

/* フル幅タイルは block にして float の回り込みを有効にする */
.tiles > .top-tile:first-child,
.tiles > .tile:nth-child(-n+3),
.tiles > .tile:last-child{
    display:block;
}

/* clearfix（念のため） */
.tiles > .top-tile:first-child::after,
.tiles > .tile:nth-child(-n+3)::after,
.tiles > .tile:last-child::after{
    content:"";
    display:table;
    clear:both;
}

/* 特定のフル幅タイルで、画像を右側に縦並び（スタック）して
   文章の高さに合わせて画像を分割表示するレイアウト */
.full-right-stack{
    display:flex;
    gap:1rem;
    align-items:stretch; /* 画像カラムをテキストの高さに揃える */
}
.full-right-stack .content{
    flex:1 1 auto;
}
.full-right-stack .img-stack{
    width:var(--tile-image-width);
    max-width:var(--tile-image-max);
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}
.full-right-stack .img-stack img{
    width:100%;
    /* 画像を縦に均等に伸ばす（親の高さに合わせる） */
    flex:1 1 0;
    object-fit:cover;
    display:block;
}

/* レスポンシブ：小さい画面では縦並びに戻す */
@media (max-width:640px){
    .full-right-stack{
        display:block;
    }
    .full-right-stack .img-stack{
        width:100%;
        max-width:none;
        display:block;
    }
    .full-right-stack .img-stack img{
        width:100%;
        height:auto;
        flex:initial;
        object-fit:contain;
    }
}

@media (max-width:1000px){
    .tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width:640px){
    body{padding:1.25rem}
    .site-title{font-size:1.05rem}
    .tiles{ grid-template-columns: 1fr; }

    /* 小さい画面では回り込みを解除して画像をフル幅に戻す */
    .tiles > .top-tile:first-child img,
    .tiles > .tile:nth-child(-n+3) img,
    .tiles > .tile:last-child img {
        float:none;
        width:100%;
        max-width:none;
        margin:0.5rem 0 0 0;
    }
}

footer{
    margin-top:1.25rem;
    font-size:0.85rem;
    color:rgba(57,44,35,0.7);
}