:root {
    --bg-color: rgb(255, 230, 198);
    --text-color: #000;
}

@media (prefers-color-scheme: dark) {
    :root {
    --bg-color: rgb(255, 230, 198);
    --text-color:  #000;
    }
}

body {
    margin: 0;
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-style: normal;
    background-color: var(--bg-color);
    color: var(--text-color);
    width: 100%;
}

header, footer {
    padding: 1rem;
    background: #ccc;
    position: relative;
}
header{
    background-color: rgb(255, 230, 198);
    background: url(../image/header-deco.svg),linear-gradient(180deg, rgb(255,255,255), rgb(255, 230, 198));
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    z-index: -3;
}
h1{
 font-weight: 400;
 width: 100%;
 text-align: left;
 color: #385273;
 font-size: 22px;
}

h1 a{
    text-decoration: none;
    color: #385273;
}
.youchien{
    display: inline-block;
    font-size: 40px;
    vertical-align: 2vw;
}
nav{
    width: 100%;
    position: relative;
    z-index: 5;
}

nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    justify-content: center;
    align-items: center;
}

nav ul li a{
    text-decoration: none;
    color: white;
}
nav ul li{
    width: 120px;
    height: 120px;
    line-height: 120px;
}
nav ul li:first-child{
    background-image: url(../image/menu001.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

nav ul li:nth-child(2){
    background-image: url(../image/menu002.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

nav ul li:nth-child(3){
    background-image: url(../image/menu003.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

nav ul li:nth-child(4){
    background-image: url(../image/menu004.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

nav ul li:nth-child(5){
    background-image: url(../image/menu006.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logo{
    width: 7vw;
}

.img-tree,
.img-tulip{
    position: absolute;
}

.img-tulip{
    width: 150px;
    top: 13vw;
    left: 100px;
}

.img-tree{
    width: 270px;
    top: 5vw;
    right: 50px;
}
.img-kai{
    position: relative;
    width: 96%;
    left: 0;
}

/*------------------------------------------*/
footer{
    background-color: rgb(30, 76, 95);
    color:white;
}
.footer-logo{
    width: 10vw;
}
.footer-youshien{
    font-size: 20px;
}
address{
    font-style:normal;
    font-size: 12px;
}
.copy{
    text-align: center;
    font-size: 10px;
}
.footer-box{
    display: flex;
    width: 100%;
    align-items: end;
}
.inner-f-box{
    width: calc(100% / 3);
}
.church-matome{
    position: relative;
    text-align: end;
}
.church-matome a{
    text-decoration:none;
    color: #b1c4cf;
}
.church{
    font-size: 20px;
}
.footer-btn{
    width: 10rem;
    position: relative;
    left:calc(100% - 10rem);}
.footer-btn p{
    margin: 0;
}
.footer-img-animal img{
    width: 100%;
}
@media screen and (max-width: 960px) {
	/* 960px以下に適用されるCSS（タブレット用の下限は760px） */
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用の下限は375px;） */

    body{
        width: 100%;
    }
    main{
        width: 100vw;
        overflow-x: hidden;
    }
    header{
        width: 100vw;
    }
    .img-tree{
        width: 80px;
        right: 50px;
        top: 13vw;
    }
    .img-tulip{
        width: 80px;
        top: 11vw;
        left: auto;
        right: 130px;
    }
    h1{
        font-weight: 400;
        font-size: 12px;
    }
    .logo{
        width: 8vw;
    }
    .youchien{
        font-size: 28px;
        vertical-align: 1vw;
    }
    nav{
        width: 100%;
    }
    nav ul {
        gap: 0rem;
        width: 96%;
        position: relative;
        left: -10px;
    }
    nav ul li a{
        font-size: 11px;
    }
    .img-kai{
    left: -20px;
    }
    /*--------------------------*/
    .footer-box{
        display: block;
        width: 100%;
    }
    .inner-f-box{
        width:auto;
    }
    .footer-logo{
        width: 20vw;
    }
}