@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

:root {
    --text-color: #DFDDDA;
    --accent-color: #FF7A00;
    --bg-color: #002D49;
    --container: 1200px;
}
/* ベース設定 */
html {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 100%;
    line-height: 1.75;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex; /* 画面中央に配置する設定 */
    align-items: center; /* 垂直方向の中央 */
    justify-content: center; /* 水平方向の中央 */
}

/* コンテンツ全体の枠 */
.container {
    width: 90%;
    max-width: 600px;
    text-align: center; 
    padding: 40px 0;
}

/* ロゴ画像 */
.logo img {
    width: 180px;
    height: auto;
    margin-left: 24px;
    margin-bottom: 40px;
}

/* タイトル */
.page-title {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 32px;
    letter-spacing: 0.05em;
}

/* 本文エリア */
.message {
    font-size: 0.875rem;
    margin-bottom: 60px; 
}

    .message p {
        margin: 0 0 1.5em 0;
    }

/* インスタグラムアイコン */
.social-link img {
    width: 50px; /* アイコンのサイズ */
    height: auto;
    transition: opacity 0.3s; /* ホバー時のふわっとした動き */
}

.social-link a:hover img {
    opacity: 0.7; /* カーソルを乗せた時に少し薄くする */
}


/* インスタ下のテキスト */
.social-text {
    margin-bottom: 15px;
    font-size: 0.75rem;
    letter-spacing: 0.05em; 
    opacity: 0.8;
}

.footer {
    position: absolute; /* 画面の絶対位置に固定 */
    bottom: 20px; /* 下から20pxの位置 */
    width: 100%;
    text-align: center;
    font-size: 0.75rem; /* 小さく */
    opacity: 0.5; /* 薄く */
}



/* --- レスポンシブ調整 --- */
/* PCでのみ改行を有効にする設定 */
.u-desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    .u-desktop {
        display: inline;
    }
}