@charset "utf-8";

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f7f3ee;
    overflow:auto;
    font-family:sans-serif;
}

/*======================
HEADER
======================*/

.header{
    position:relative;
    height:100px;
    padding:0 40px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#f7f3ee;
}

.logo{
    position:absolute;

    left:50%;
    transform:translateX(-50%);

    font-size:20px;
    letter-spacing:3px;
    color:#4a3b2f;
    font-weight:bold;
}

.logo img{
    height:80px;
}

.icons{
    display:flex;
    gap:30px;
    margin-left:auto;
}

.icons a{
    text-decoration:none;
    color:#4a3b2f;
    font-size:22px;
    transition:.3s;
}

.icons a:hover{
    opacity:.6;
}

/*======================
LAYOUT
======================*/

.dashboard{
    height:calc(100vh - 100px);
    display:flex;
    gap:20px;
    padding:5px 20px 20px;
}

/* 左右 */

.side{
    width:22%;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* 中央 */

.center{
    flex:1;
    position:relative; 
    border-radius:18px;
    overflow:hidden;
    background:#fff;
}

.center img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* カード */

.card{
    flex:1;
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:none;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

/*======================
HOVER
======================*/

.overlay{
    position:absolute;
    inset:0;
    background:rgba(70,50,30,.45);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:.35s;
}

.overlay span{
    color:#fff;
    letter-spacing:3px;
    font-size:18px;
}

.card:hover img{
    transform:scale(1.08);
}

.card:hover .overlay{
    opacity:1;
}

/* =========================
   COLLECTION
========================= */

.collection{
	
    position:absolute;
    top:30px;
    left:50%;
    transform:translateX(-50%);

    padding:15px 40px;

    /* 半透明の白 */
    background:rgba(255,255,255,.65);

    /* ぼかし（ガラス感） */
    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    /*border-radius:16px;*/

    /* うっすら枠線で高級感 */
    border:1px solid rgba(255,255,255,.8);

}

.collection-title,
.collection-nav a,
.nav-divider{

    color:#777;

}

.collection-nav a{
    transition:.3s;
}

.collection-nav a:hover{
    color:#444;
}

.collection-title{
    margin-bottom:20px;
    font-size:10px;
    letter-spacing:.5em;
    color:#999;
    /*text-shadow:0 2px 8px rgba(0,0,0,.5);*/	
	text-align:center;
}

.collection-nav{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}

.collection-nav a{
    position:relative;
    color:#555;
    text-decoration:none;
    font-size:20px;
    letter-spacing:.08em;
    /*text-shadow:0 2px 8px rgba(0,0,0,.5);*/
    transition:.3s;
}

.collection-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:1px;
    background:#fff;
    transition:.3s;
}

.collection-nav a:hover::after{
    width:100%;
}

.nav-divider{
    margin:12px 0;
    font-size:10px;
}

/* =====================
   PC ICONS
===================== */

.pc-icons{
    display:flex;
    gap:30px;
    margin-left:auto;
}

/* SPは非表示 */
.sp-icons{
    display:none;
}

@media screen and (max-width:768px){
	
body{
    padding-bottom:0;
}

/* ===== HEADER ===== */
.header{
    height:auto;
    padding:15px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ロゴ（中央） */
.logo{
    position:static;
    transform:none;
    order:1;
}

.logo img{
    height:60px;
}

/* アイコン（下に“自然配置”） */
.icons{
    order:2;
    margin-top:10px;
    margin-left:0;
    display:flex;
    justify-content:center;
    gap:25px;
    width:100%;
}

/* 念のためPCの影響を消す */
.header .icons{
    align-self:center;
}

/* ===== LAYOUT ===== */
.dashboard{
    height:auto;
    min-height:100vh;
    flex-direction:column;
    padding:0px 15px 0px;
    gap:15px;
}

.side{
    width:100%;
    flex-direction:row;
    gap:10px;
}

.center{
    order:-1;
    height:320px;
}

.collection{
    position:static;
    transform:none;
    margin:15px auto;
    width:100%;
}
	
/* PCアイコン非表示 */
.pc-icons{
    display:none;
}

/* SPアイコンは普通にページ下へ */
.sp-icons{
    display:flex;
    justify-content:center;
    gap:50px;

    margin:0 0 20px 0;
}
	
.sp-icons a{
    font-size:50px; 
}

}