@charset "UTF-8";

* {
    box-sizing: border-box; /* パディングとボーダーを含めて幅と高さを計算する */
}

html{
    margin: 0 ; /* 画面の端にくっつかないようにする */
    padding: 0; /* 画面の端にくっつかないようにする */
}

body {
    display: flex; /* flexboxを使う */
    min-height: 100svh; /* 画面の高さに合わせる */
    margin: 0;  /* 画面の端にくっつかないようにする */
    padding: clamp(15px, 2.5vh, 35px);  /* 画面の端にくっつかないようにする */

    background-image: url("./img/top-bgi.webp"); /* 背景画像を設定 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center; /* 画像の位置を中央にする */
    background-size: cover; /* 画像を画面サイズに合わせて拡大縮小する */
    background-attachment: fixed; /* 画像を固定する */

    color: #636f6f;
}

.page-container {
    width: min(90%, 1100px);
    margin: auto; /* 上下左右の空き部分を均等にする */
}

/* ヘッダー */
.header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;
    margin-bottom: 10px;
}

.header-title {
    width: 100%;
    margin: 0;
    text-align: center;

    font-family: "Limelight", sans-serif;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 400;

    text-shadow: 8px 8px 3px rgba(32, 31, 31, 0.1);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    color: inherit;
    text-decoration: none;
    
}
.header-logo-picture {
    display: block;
}

.header-logo {
    display: block;
    width: 70px;
    height: auto;
    margin-top: 10px;
    margin-right: 160px;
}

/* ナビゲーション */
.nav-list {
    display: flex;
    align-items: center;
    gap: 35px;

    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    list-style: none;

    font-family: "Alata", sans-serif;
    font-size: 25px;
}

.nav-link {
    color: #636f6f;
    text-decoration: none;

    transition:
        color 0.3s,
        opacity 0.3s;
}

.nav-link:visited {
    color: #636f6f;
}

.nav-link:hover {
    color: #087f83;
    opacity: 0.7;
}

.nav-link-current,
.nav-link-current:visited {
    color: #087f83;
}

.nav-link-current:hover {
    color: #636f6f;
    opacity: 0.7;
}

/* メインコンテンツ */
/* グリッド内に「メイン画像」「コンセプト文」「ニュースボックス」を重ねて表示 */
.top-content {
    display: grid;
    grid-template-columns: 1fr 40%;
    grid-template-rows: auto auto;

    position: relative;
}

.main-img {
    display: block;

    grid-column: 1 / -1;
    grid-row: 1;

    width: 100%;
    height: auto;
}

.main-concept {
    grid-column: 1;
    grid-row: 2;

    margin: 10px 0 0;
    padding-right: 30px;

    font-family: "Comfortaa", sans-serif;
    font-size: 20px;
    color: #636f6f;
    font-weight: 300;
    line-height: 1.5;
}

/* ニュース */
.newtopics {
    grid-column: 2;
    grid-row: 1 / 3;

    align-self: end;
    z-index: 2;

    min-height: 220px;
    padding: 28px 35px;

    background-image: url("./img/newsbox.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.newtopics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 35px;
}

.newtopics-title {
    margin: 0;

    font-family: "Alata", sans-serif;
    font-size: 20px;
    font-weight: 400;

    transform: translate(-10px, -15px); /* 文字を動かしたい場合、「左」「上」の場合はマイナス要素を付ける */
}

.newlink {
    color: #636f6f;
    text-decoration: none;

    font-family: "Alata", sans-serif;
    font-size:15px;

    transform: translate(30px, -20px);
}

.newlink:hover {
    color: #087f83;
    opacity: 0.6; 
    transition: 0.3s ease; 
}

/* view allの部分 */
.newtopics-link {
    color: #636f6f;
    text-decoration: none;

    font-family: "Alata", sans-serif;
    font-size:15px;

    transform: translate(30px, -20px);
}

.newtopics-link::after {
    content: "";
    display: block;

    margin-top: 4px;
    border-bottom: 2px dashed #636f6f;
}

.newtopics-link:visited {
    color: #636f6f;
}

.newtopics-link:hover {
    color: #087f83;
    opacity: 0.6; 
    transition: 0.3s ease; 
}

.newtopics-list {
    display: flex;
    flex-direction: column;
    gap: 20px;

    margin: 0;
    padding: 0;
    list-style: none;

    transform: translate(0, -20px); /* 文字を動かしたい場合、「左」「上」の場合はマイナス要素を付ける */
}

.newtopics-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    column-gap: 20px;

    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
}

.newtopics-item time {
    padding-right: 20px;
    border-right: 2px solid #636f6f;

    font-family: "Alata", sans-serif;
    font-weight: 700;
}

/* レスポンシブデザイン */
/* ========================================
   スマートフォン表示
======================================== */

@media screen and (max-width: 768px) {

    body {
        min-height: 100vh;

        background-image: url("./img/phone-top.webp");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-attachment: scroll;
    }

    /*
     * header・main・top-contentの箱をレイアウト上だけ解除し、
     * 中の要素をpage-containerで並べ替えられるようにする
     */
    .header,
    .main,
    .top-content {
        display: contents;
    }

    .page-container {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: min(86%, 480px);
        margin: 0 auto;
        padding: 70px 0 25px;
    }

    /* =====================================
       1．ロゴとSea Ranch
    ===================================== */

    .header-title {
        order: 1;

        width: 100%;
        margin: 0;

        font-size: clamp(38px, 10.7vw, 47px);
        line-height: 1;
        text-align: center;
    }

    .header-brand {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 35px;

        width: 100%;
    }

      .header-logo-picture {
        order: -1;
    }

    .header-logo {
        width: 170px;
        height: auto;
        margin: 0;
    }

    /* =====================================
       2．コンセプト文
    ===================================== */

    .main-concept {
        order: 2;

        width: 100%;
        margin: 32px 0 0;
        padding: 0;

        font-size: clamp(13px, 3.4vw, 15px);
        line-height: 1.35;
        text-align: center;
    }

    /* =====================================
       3．ニュース
    ===================================== */

    .newtopics {
        order: 3;

        width: 100%;
        min-height: auto;
        margin: 35px 0 0;
        padding: 0;

        background-image: none;
    }

    .newtopics-header {
        display: block;

        margin: 0 0 18px;
        text-align: center;
    }

    /*
     * PC版の「what’s new」を非表示にして
     * スマホ版では「news」と表示
     */
    .newtopics-title {
        margin: 0;

        font-size: 0;
        line-height: 1;

        transform: none;
    }

    .newtopics-title::before {
        content: "news";

        font-family: "Alata", sans-serif;
        font-size: clamp(24px, 6.2vw, 27px);
        font-weight: 400;
        color: #636f6f;
    }

    .newtopics-link {
        display: none;
    }

    .newtopics-list {
        gap: 14px;

        width: 100%;
        margin: 0;
        padding: 20px 30px;

        background-color: rgba(255, 255, 255, 0.48);

        transform: none;
    }

    .newtopics-item {
        display: grid;
        grid-template-columns: 95px minmax(0, 1fr);
        align-items: center;
        column-gap: 15px;

        font-size: clamp(10px, 2.7vw, 12px);
    }

    .newtopics-item time {
        padding-right: 12px;
        border-right: 2px solid #636f6f;

        font-size: clamp(10px, 2.7vw, 12px);
        white-space: nowrap;
    }

    .newtopics-text {
        min-width: 0;
    }

    /* =====================================
       4．ナビゲーション
    ===================================== */

    .nav {
        order: 4;

        width: 100%;
        margin-top: 33px;
    }

    .nav-list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        width: 100%;
        margin: 0;
        padding: 0;

        font-size: 18px;
    }

    .nav-list li {
        flex-shrink: 0;
    }

    /* =====================================
       5．メイン画像
    ===================================== */

    .main-img {
        order: 5;

        display: block;
        width: 100%;
        height: auto;
        margin-top: 30px;
    }

    /* =====================================
       6．コピーライト
    ===================================== */

    .footer {
        order: 6;

        width: 100%;
        margin-top: 70px;

        text-align: center;
    }

    .footer small {
        font-family: "Alata", sans-serif;
        font-size: 11px;
        color: #636f6f;
    }
}