@charset "UTF-8";



/* ==========================
   ヘッダー共通
========================== */

/* ヘッダー全体 */
header{
    height:80px;

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

    padding: 15px 20px 15px 20px;

    background:#fcf1f6;

    border-bottom:1px solid #f5dce4;

    box-sizing:border-box;
}

/* ロゴエリア */
.logo-area{
    display:flex;
    align-items:center;
}

/* ロゴ画像 */
.logo-image{
    height:90px;
    width:auto;

    display:block;
}

/* ログアウトボタン */
.home-header-action{
    display:flex;
    align-items:center;
    gap:10px;
}

.logout-btn{
    text-decoration:none;

    background:#ffffff;
    color:#ff648c;

    padding:12px 24px;

    border:1px solid #ffb6c8;
    border-radius:12px;

    font-weight:bold;
}

.logout-btn:hover{
    background:#fff5f8;
}



/* ==========================
   ページヘッダー共通
========================== */

/* ページヘッダー */
.page-header{
    max-width:1400px;

    margin:40px auto 30px auto;

    padding:0 40px;

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

    box-sizing:border-box;
}

/* ページタイトル */
.page-title{
    margin:0;

    color:#f5989d;

    font-size:38px;
    font-weight:bold;

    line-height:1.2;
}

/* ページ説明文共通 */

.page-description{
    margin:0;

    color:#888;

    font-size:14px;

    line-height:1.8;
}


/* ==========================
    body
========================== */
body{
	margin:0 0 0 0;
	color:#555555;
	background-color:#FFFAFA;
	font-family:sans-serif
}

/* ==========================
   ページ本文共通
========================== */

.page-container{
    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

    box-sizing:border-box;
}

.back_home{
	display:block;
	margin:30px 0 0 0;
	width:50px;
	height:auto;
	cursor:pointer;
}

/* ==========================
   共通アクションボタン
========================== */

.page-action-btn{
    background-color: #ff4d79; 
    color: #ffffff;
    border: none;
    padding: 10px 30px;   /*上下  左右*/
    border-radius: 3px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.page-action-btn:hover{
    background-color: #e63960;    /* マウスを乗せたら少し濃いピンク */
}


/* フッター　*/
.footer{
    margin-top:60px;
    padding:30px 0;
    text-align:center;
    background:#fcf1f6;
    border-top:1px solid #f8dce4;
}

.footer-title{
    margin:0;
    color:#ff6f9d;
    font-size:20px;
    font-weight:bold;
    letter-spacing:1px;
}

.copyright{
    margin-top:10px;
    color:#aaaaaa;
    font-size:12px;
}

/*  フッターを一番下に押し下げる */
html, body {
    height: 100%;
}

.page-container {

    min-height: calc(100vh - 80px - 140px); 
    box-sizing: border-box;
}


/* ==========================
   モバイル対応
========================== */
@media (max-width:767px){
	
	/* 戻るボタン */
    .back_home{
        width:35px;
        margin:15px 0;
    }
    
    /* ヘッダー */
    header{
        height:60px;
        padding:10px 15px;
    }

    .logo-image{
        height:50px;
        width:auto;
    }

    .logout-btn{
        padding:6px 10px;
        font-size:12px;
        white-space:nowrap;
    }
    
    /* フッター */
    .footer{
        margin-top:20px;
        padding:15px 0;
    }

    .footer-title{
        font-size:16px;
    }

    .copyright{
        font-size:10px;
    }
}