@charset "utf-8";

/* 変数を登録 */
:root{
--coloer_1:#333;
}

/* riset */

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

ul{list-style: none;}

a{text-decoration: none;}

img{
    vertical-align: bottom;
    max-width: 100%; /* フルードイメージの設定 */
}

/* style */

html{scroll-behavior: smooth;}

.container{display: flex;}

.main-visual{
            width: 50%;
            height: 100vh;
            position: sticky;
            top: 0;
            left: 0;

            >img{
                object-fit: cover;
                object-position: center bottom;
                width: 100%;
                height: 100%;
                }
            }

.contents{
        width: 50%;
        }

/* ヘッダー */
header{
        font-family: "Shippori Mincho B1", serif;
        padding: 100px 0;
        text-align: center;
        height: calc(100vh - 70px);
            >h1{
            color: var(--coloer_1);
            font-size: 38px;
            margin: 150px 0 50px;
        @media(width<=767px){margin: 0 0 50px;}
            }
        .sp{display: none;}
            >p{
                color: var(--coloer_1);
                font-size: 20px;
                }
    }

h1>span{color: #055aab;}

.tag-line>span{color: #055aab;}

/* ナビゲーション */
.local-nav{
           position: sticky;
            top: 0;
            right: 0;
            width: 100%;
            background-color: #023565;

            >ul{
                display: flex;
                justify-content: center;
                align-items: center;
                line-height: 70px;
                }
            }

.local-nav a{
            padding: 0 20px;
            color: rgb(227, 254, 254);
            transition: 0.3s;
            display: block;
            .sp{display: none;}
            &:hover{
                    background-color: #98baf9;
                    color: #055aab;
                    /* text-decoration:underline;
                    text-decoration-thickness: 3px;
                    text-decoration-color: antiquewhite;
                    text-underline-offset: 5px; */
                    }
            }

/* メインコピー */
.main-copy{
            font-family: "Shippori Mincho B1", serif;
            height: calc(100vh - 70px);
            margin-bottom: 20px;

            >h2{
                text-align: left;
                padding: 20px;
                max-width: 500px;
                margin:50px auto ;
                font-size: 28px;
                color: var(--coloer_1);

                >.df{
                    display: block;
                    /* margin-right: -300px; */
                    text-indent: 5em;
                    }
                >.blue{
                        color: #326ddb;
                        }
                }
            span>.blue{
                        color: #184eb4;
                        }

            >p{
                width: 100%;
                font-size: 18px;
                line-height: 2;
                margin: 10px auto;
                text-align: center;
                color: var(--coloer_1);
                }
            }

/* 街の紹介部分 */
.city{
        padding: 100px 20px;
    >h3{
        font-family: "Shippori Mincho B1", serif;
        text-align: center;
        font-size: 28px;
        margin-bottom: 10px;
        color: var(--coloer_1);
        .sp{display: none;}
        }

    .city-main-img{
        width: 100%;
        aspect-ratio: 16/9;
            >img{
                object-fit: cover;
                width: 100%;
                height: 100%;
                }
        }

    >p{
        line-height: 2;
        padding: 20px 30px;
        margin-bottom: 15px;
        color: var(--coloer_1);
        }

    .city-wrapper{
        display: flex;
        justify-content: space-between;
        margin-bottom: 60px;

            .city-photo{
                width: 49%;
                aspect-ratio: 5/3;
                    >img{
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                        }
                }
        }

    .map{
        width: 100%;
        aspect-ratio: 16/9;

            >iframe{
                width: 100%;
                height: 100%;
                }
        }
}

/* フッター */
footer{
        width: 100%;
        padding: 100px 20px;
        background-color: #023565;
        display: flex;
        justify-content: space-between;
            >p{
                color: #fff;
                font-size: 20px;
                }
    }

.sns{
    display: flex;
    gap: 0 20px;
        >li{
            width: 40px;
            }
    }

/* 950px以下の時 */

@media (width<=950px){
    .container{display: block;}

    .main-visual{position: static;
                width: 100%;
                height: 70vh;
}
.contents{width: 100%;}

header{height: 20vh;
        padding: 5px;
        >h1{font-size: 28px;
            margin-bottom: 10px;
            }
            .sp{display: block;}
        }

/* ナビゲーション */
.local-nav{
            height: 10vh;
            
            >ul{
                height: 10vh;
                line-height: 1;
                    /* >li{
                        width: 24%; */
                        }
                }


.local-nav a{
            font-size: 14px;
            display: block;

             .sp{display: block;}
            }
        }

/* メイン */

.city{
         padding: 40px 20px;
        }
.city-wrapper{margin-bottom: 20px;}

/* 600px以下の時 */

@media (width<=600px){

.local-nav>li{
                    width: 25%;}

.main-copy{
    >h2{
        margin:50px auto ;
        font-size: 26px;
        >.df{text-align: right;
            text-indent: 1em;
            }
        }
    p{padding: 10px;
        margin: 10px auto;
        text-align: left;
    }
}

.city{
    h3{
        .sp{display: block;}
    }
    }

}