@charset "UTF-8";

/* 共通部分
----------------------------------*/
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}


/* header */
.Lg {
    position: absolute;
    top: 5%;
    left: 2%;
    z-index: 20;
}
.header_logo {
    width: 15vw;
}
.main-nav {
    position: absolute;
    top: 2%;
    right: 5%;
    display: flex;
    text-transform: uppercase;;
    width: 30vw;
    list-style: none;
}

.main-nav li {
    padding: 10% 10%;
    z-index: 20;
}
.main-nav a {
    color: #432;
    font-family: 'Annie Use Your Telescope';
    font-weight: bold;
    font-size: 2vw;
}
.main-nav a:hover {
    color: #0bd;
}
.page-header {
    position: relative;
    height: 40vw;
}

.blue-wave {
    position: absolute;
    top: -30%;
    opacity: 50%;
    z-index: 10;
}
.black-wave {
    position: absolute;
    display: flex;
    align-items: flex-end;
    bottom: 0;
    opacity: 50%;
    z-index: 10;
}
.black-wave img {
    bottom: 0;
    width: 100vw;
}


/* 背景画像 */
.big-bg {
    background-size: cover;
    background-position: center top;
    position: relative;
}

#home {
    background-image: url(../images/main-bg.jpg);
    min-height: 100vh;
    min-width: 100%;
}
#home .page-title {
    text-transform: none;
}

.cloud {
    background-image: url(../images/cloud.png);
    background-size: 8vw;
    background-position: center;
}

/* top-title */
.top-title {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,-50%);
    z-index: 20;
}
.top-maintitle {
    font-family: 'Annie Use Your Telescope';
    font-weight: normal;
    font-size: 12vw;
    color: white;
    text-shadow: 2px 2px 5px black;
    text-align: center;
}
.top-subtitle {
    font-family: 'Kaisei Decol';
    font-size: 1vw;
    color: white;
    text-shadow: 2px 2px 5px black;
    text-align: center;
    writing-mode: horizontal-tb;
    margin-top: -25%;
}


/* 追従ボタン */
#page_top{
    width: 90px;
    height: 90px;
    position: fixed;
    right: 0;
    bottom: -500;
    margin-right: 30px;
    background: #ef3f98;
    opacity: 0.6;
    border-radius: 50%;
    z-index: 99;
  }
  #page_top a{
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    text-decoration: none;
  }
  #page_top a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -40px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }
  #page_top a::after{
    content: 'PAGE TOP';
    font-size: 13px;
    color: #fff;
    position: absolute;
    top: 45px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }


/* heading */
.heading {
    margin-top: 2vw;
    padding: 5% 5%;
    color: white;
    font-family: 'Annie Use Your Telescope';
    font-weight: bold;
    font-size: 3vw;
    text-align: center;
    background-image: url(../images/grass.png);
    background-size: 10vw;
    background-position: center;
}

/***** about *****/
#about {
    position: relative;
}
#about p {
    text-align: center;
    padding: 5%;
}
.backpath_01 {
    position: absolute;
    top: 5%;
    right: 0;
    width: auto;
    height: 80%;
    z-index: -1;
}
.introduction {
    font-family: 'Kaisei Decol';
    color: #432;
    font-size: 1.5vw;
    margin-top: -3vw;
}



/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
     margin:0 auto;
}
 
 .slider img {
     width:100%;/*スライダー内の画像を横幅100%に*/
     height:auto;
}
 
 /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
 
 .slider .slick-slide {
     margin:0 10px;
 }
 
 /*矢印の設定*/
 
 /*戻る、次へ矢印の位置*/
 .slick-prev, 
 .slick-next {
     position: absolute;/*絶対配置にする*/
     top: 42%;
     cursor: pointer;/*マウスカーソルを指マークに*/
     outline: none;/*クリックをしたら出てくる枠線を消す*/
     border-top: 2px solid #666;/*矢印の色*/
     border-right: 2px solid #666;/*矢印の色*/
     height: 15px;
     width: 15px;
 }
 
 .slick-prev {/*戻る矢印の位置と形状*/
     left: -1.5%;
     transform: rotate(-135deg);
 }
 
 .slick-next {/*次へ矢印の位置と形状*/
     right: -1.5%;
     transform: rotate(45deg);
 }
 
 /*ドットナビゲーションの設定*/
 
 .slick-dots {
     text-align:center;
     margin:20px 0 0 0;
 }
 
 .slick-dots li {
     display:inline-block;
     margin:0 5px;
 }
 
 .slick-dots button {
     color: transparent;
     outline: none;
     width:8px;/*ドットボタンのサイズ*/
     height:8px;/*ドットボタンのサイズ*/
     display:block;
     border-radius:50%;
     background:#ccc;/*ドットボタンの色*/
 }
 
 .slick-dots .slick-active button{
     background:#333;/*ドットボタンの現在地表示の色*/
 }


 /* PARK */
 .park_01, .park_02, .park_03 {
    position: relative;
    filter: grayscale(50%);
 }
.park_01:hover, .park_02:hover, .park_03:hover {
    filter: grayscale(0%);
 }
 .park_01 {
    clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 80%);
 }
 .park_02 {
    clip-path: polygon(0% 26%, 100% 0%, 100% 90%, 0% 60%);
    margin-top: -29vw;
 }
 .park_03 {
    clip-path: polygon(0% 0%, 100% 30%, 100% 80%, 0% 80%);
    margin-top: -25vw;
 }
.park_01 img {
    width: 100%;
    z-index: 10;
 }
 .park_02 img {
    width: 100%;
    z-index: 10;
 }
 .park_03 img {
    width: 100%;
    z-index: 10;
 }
 .park_01 h3 {
    min-width: 50vw;
    color: white;
    font-size: 4vw;
    text-shadow: 2px 2px 5px #333;
    font-weight: normal;
    position: absolute;
    top: 30%;
    left: 5%;
    z-index: 20;
 }
 .park_02 h3 {
    color: white;
    font-size: 4vw;
    text-shadow: 2px 2px 5px #333;
    font-weight: normal;
    position: absolute;
    top: 40%;
    right: 5%;
    z-index: 20;
 }
 .park_03 h3 {
    color: white;
    font-size: 4vw;
    text-shadow: 2px 2px 5px #333;
    font-weight: normal;
    position: absolute;
    top: 40%;
    left: 5%;
    z-index: 20;
 }
 


 /* OTHER */
 #other {
    position: relative;
 }
 .backpath_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: auto;
 }
 .container {
    height: 70vh;
    display: flex;
    justify-content: center;
    margin: 0;
 }
 .sports, .parenting {
    text-align: center;
    position: relative;
    border-radius: 2rem;
    width: 30%;
    height: 50%;
    margin: 0 3%;
    filter: grayscale(40%);
 }
 .sports:hover, .parenting:hover {
    filter: grayscale(0%);
 }

 .sports_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 5px 5px 5px gray;
    z-index: 3;
 }
 .sports_title {
    position: absolute;
    top: 10%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%);
    font-size: 2vw;
    color: white;
    z-index: 5;
 }
 .parenting_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 5px 5px 5px gray;
    z-index: 3;
 }
 .parenting_title {
    position: absolute;
    top: 10%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%);
    font-size: 2vw;
    color: white;
    z-index: 5;
 }


 /* Footer */
 .page-footer {
    background-image: url(../images/footer_bg.JPG);
    background-size: cover;
    background-position: center top;
    position: relative;
    min-width: 100%;
    min-height: 100vh;
 }
 .footer_div {
    position: relative;
    min-height: 100vh;
 }
 .brown-wave {
    width: 100vw;
    position: absolute;
    bottom: 0;
    opacity: 85%;
    z-index: 10;
 }
 .footer_p {
    position: absolute;
    top: 40%;
    transform: translate(0,-50%);
    left: 5%;
    font-size: 1vw;
    line-height: 2;
    z-index: 20;
 }
 .footer_logo {
    width: 20%;
    height: auto;
    position: absolute;
    top: 40%;
    transform: translate(0,-50%);
    right: 5%;
    box-shadow: 5px 5px 5px gray;
    z-index: 20;
 }
 .footer_p a {
    color: #333;
    text-decoration: underline;
 }


 /***** Park *****/
 #Park {
    position: relative;
     height: 100vh;
 }
 .park-title {
     position: absolute;
     left: 50%;
     top: 50%;
     margin-right: -50%;
     transform: translate(-50%,-50%);
     z-index: 20;
 }
 .park-maintitle {
    font-family: 'kaisei Decol';
    font-weight: normal;
    font-size: 7vw;
    color: white;
    text-align: center;
    
 }
 .park-subtitle {
    font-family: 'Kaisei Decol';
    font-weight: normal;
    font-size: 3vw;
    line-height: 1.2;
    color: white;
    text-align: center;
 }
 .park-pic {
    position: absolute;
    width: 20vw;
    bottom: 5%;
    right: 5%;
    opacity: 85%;
}

/* 噴水 */
#fountain, #lawn, #play {
    background-color: #F9F2D8;
    margin: 5%;
    padding: 2%;
    border-radius: 35px;
}
.fountain-title, .lawn-title, .play-title {
    font-size: 3vw;
}


/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}


/*アコーディオンタイトル*/
.park-div {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    margin: 5% auto 0;
    cursor: pointer;
}
.park-div:hover {
    background-color: #faecb9;
}
.park-num {
    font-family: 'Kaisei Decol';
    position: absolute;
    font-size: 5.5vw;
    text-shadow: 2px 2px 1px white;
    top: -23%;
    left: 8%;
}
.park-img {
    width: 45%;
    border-radius: 35px;
}
.park-name {
    width: 40%;
    text-align: center;
    font-size: 3.5vw;
    font-weight: bold;
    transition: all .5s ease;
}



/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
	margin:0 3% 3% 3%;
    padding: 3%;
    font-weight: bold;
    line-height: 120%;
    font-size: 2vw;
}
.box h1 {
    font-family: 'Kaisei Decol';
    text-shadow: 2px 2px 1px white;
}
.box p {
    margin-top: 5%;
    color: #432;
}
.fountain-open {
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding: 2%;
    background-color: #66D6DD;
    border-radius: 35px;
}
.fountain-open:hover {
    background-color: #2cc4cf;
}
.fountain-open h1, .lawn-open h1, .play-open h1 {
    color: #432;
    font-size: 200%;
    position: absolute;
    left: 5%;
    bottom: -2%;
}
.lawn-open {
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding: 2%;
    background-color: #9ADD66;
    border-radius: 35px;
}
.lawn-open:hover {
    background-color: #7ad435
}
.play-open {
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding: 2%;
    background-color: #FFC34F;
    border-radius: 35px;
}
.play-open:hover {
    background-color: #e4ae42;
}
.park-img-open {
    width: 60%;
    border-radius: 35px;
}
.pin {
    width: auto;
    height: 30%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 16%;
}


/***** Sports *****/
#Sports {
    height: 100vh;
    position: relative;
}
.sports-title {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-right: -50%;
    transform: translate(-50%,-50%);
    z-index: 20;
}
.sports-maintitle {
   font-family: 'Kaisei Decol';
   font-weight: normal;
   font-size: 7vw;
   color: white;
   text-align: center;
}
.sports-subtitle {
    font-family: 'Kaisei Decol';
    font-weight: normal;
    font-size: 3vw;
    line-height: 1.2;
    color: white;
    text-align: center;
 }
.sports-pic {
    position: absolute;
    width: 20vw;
    bottom: 5%;
    left: 5%;
    opacity: 85%;
}

/* Asukayama */
#Asukayama {
    width: 100%;
    height: 150vw;
    background-color: #F9F2D8;
    clip-path: polygon(0% 5%, 100% 0%, 100% 60%, 0% 65%);
    position: relative;
}
.Asukayama-img {
    margin-top: -2vw;
    width: 100%;
    clip-path: polygon(0% 30%, 100% 20%, 100% 80%, 0% 90%);
    z-index: 10;
}
#Asukayama h1 {
    font-family: 'Kaisei Decol';
    position: absolute;
    top: 5vw;
    right: 3vw;
    font-size: 8vw;
    color: #432;
    text-shadow: 2px 2px 1px white;
    z-index: 20;
}
#Asukayama h2 {
    position: absolute;
    top: 8.5vw;
    left: 3vw;
    font-size: 4vw;
    z-index: 20;
}
.Asukayama-circle {
    position: absolute;
    top: 51vw;
    left: 5vw;
    width: 10vw;
    height: 10vw;
    background-color: #7472E2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Asukayama-circle:hover {
    background-color: #5c5ae0;
}
.Asukayama-circle img {
    width: 5.5vw;
}
.Asukayama-p {
    margin-left: 5vw;
    font-size: 3vw;
    font-weight: bold;
    color: #432;
    line-height: 4vw;
}
.Asukayama-access {
    margin-top: 3vw;
    margin-left: 5vw;
    font-size: 2vw;
    font-weight: bold;
    color: #432;
}

/* Seinen */
#Seinen {
    width: 100%;
    height: 140vw;
    margin-top: -50vw;
    background-color: #F9F2D8;
    clip-path: polygon(10% 5%, 100% 0%, 100% 60%, 10% 65%);
    position: relative;
}
.Seinen-img {
    width: 90%;
    margin-left: 10%;
    margin-top: 0;
    clip-path: polygon(0% 0, 100% 0, 100% 60%, 0% 70%);
    z-index: 10;
}
#Seinen h1 {
    font-family: 'Kaisei Decol';
    position: absolute;
    top: 2vw;
    right: 3vw;
    font-size: 8vw;
    color: #432;
    text-shadow: 2px 2px 1px white;
    z-index: 20;
}
#Seinen h2 {
    position: absolute;
    top: 38.5vw;
    right: 3vw;
    font-size: 4vw;
    z-index: 20;
}
.Seinen-circle {
    position: absolute;
    top: 35vw;
    left: 15vw;
    width: 10vw;
    height: 10vw;
    background-color: #769FEE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Seinen-circle:hover {
    background-color: #487de9;
}
.Seinen-circle img {
    width: 5.5vw;
}
.Seinen-p {
    margin-top: -10vw;
    margin-left: 15vw;
    font-size: 3vw;
    font-weight: bold;
    color: #432;
    line-height: 4vw;
}
.Seinen-access {
    margin-top: 3vw;
    margin-left: 15vw;
    font-size: 2vw;
    font-weight: bold;
    color: #432;
}

/* gym */
#gym {
    width: 100%;
    height: 100vw;
    margin-top: -40vw;
    background-color: #F9F2D8;
    clip-path: polygon(0% 5%, 90% 0%, 90% 87%, 0% 92%);
    position: relative;
}
.gym-img {
    width: 90%;
    margin-top: -5vw;
    clip-path: polygon(0% 0, 100% 0, 100% 60%, 0% 70%);
    z-index: 10;
}
#gym h1 {
    font-family: 'Kaisei Decol';
    position: absolute;
    top: 28vw;
    left: 5vw;
    font-size: 8vw;
    color: #432;
    text-shadow: 2px 2px 1px white;
    z-index: 20;
}
#gym h2 {
    position: absolute;
    top: 42vw;
    left: 5vw;
    font-size: 4vw;
    z-index: 20;
}
.gym-circle {
    position: absolute;
    top: 30vw;
    right: 15vw;
    width: 10vw;
    height: 10vw;
    background-color: #D89B6F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gym-circle:hover {
    background-color: #ce824d;
}
.gym-circle img {
    width: 5.5vw;
}
.gym-p {
    margin-top: -12vw;
    margin-left: 5vw;
    font-size: 3vw;
    font-weight: bold;
    color: #432;
    line-height: 4vw;
}
.gym-access {
    margin-top: 3vw;
    margin-left: 5vw;
    font-size: 2vw;
    font-weight: bold;
    color: #432;
}



/***** Parenting *****/
#Parenting {
    height: 100vh;
    position: relative;
}
.blue-wave-parenting {
    position: absolute;
    top: -30%;
    opacity: 80%;
    z-index: 10;
}
.parenting-title {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-right: -50%;
    transform: translate(-50%,-50%);
    z-index: 20;
}
.parenting-maintitle {
   font-family: 'Kaisei Decol';
   font-weight: normal;
   font-size: 7vw;
   color: white;
   text-align: center;
}
.parenting-subtitle {
    font-family: 'Kaisei Decol';
    font-weight: normal;
    font-size: 3vw;
    line-height: 1.2;
    color: white;
    text-align: center;
 }
.parenting-pic {
    position: absolute;
    width: 20vw;
    bottom: 5%;
    left: 5%;
    opacity: 85%;
}

/* Pokoapoko */
#Pokoapoko {
    width: 95%;
    margin: 10% auto;
    background-color: #F9F2D8;
    border-radius: 35%;
    text-align: center;
    position: relative;
}
#Pokoapoko h1 {
    font-family: 'Kaisei Decol';
    position: absolute;
    top: 0;
    left: 5vw;
    font-size: 8vw;
    color: #432;
    z-index: 20;
}
#Pokoapoko h2 {
    font-family: 'Kaisei Decol';
    padding-top: 3vw;
    font-size: 4vw;
    z-index: 20;
}
#Pokoapoko p {
    padding-top: 3vw;
    font-size: 2vw;
    font-weight: bold;
    color: #432;
    line-height: 3vw;
}
.pokoapoko-circle {
    position: absolute;
    top: 37vw;
    right: 20vw;
    width: 10vw;
    height: 10vw;
    background-color: #FB9CBE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pokoapoko-circle:hover {
    background-color: #f174a0;
}
.pokoapoko-circle img {
    width: 5.5vw;
}
.pokoapoko-img {
    margin: 3%;
    border-radius: 30%;
    width: 50%;
}

/* Shien */
#Shien {
    width: 90%;
    margin: 10% auto;
    padding-bottom: 3%;
    background-color: #F9F2D8;
    border-radius: 40%;
    text-align: center;
    position: relative;
}
#Shien h1 {
    font-family: 'Kaisei Decol';
    position: absolute;
    top: 0;
    left: 5vw;
    font-size: 8vw;
    color: #432;
    z-index: 20;
}
#Shien h2 {
    font-family: 'Kaisei Decol';
    padding-top: 3vw;
    font-size: 4vw;
    z-index: 20;
}
#Shien p {
    padding-top: 3vw;
    font-size: 2vw;
    font-weight: bold;
    color: #432;
    line-height: 3vw;
}
#Shien a {
    color: #432;
    text-decoration: underline;
}

/* Support */
#Support {
    width: 90%;
    margin: 10% auto;
    padding-bottom: 3%;
    background-color: #F9F2D8;
    border-radius: 40%;
    text-align: center;
    position: relative;
}
#Support h1 {
    font-family: 'Kaisei Decol';
    position: absolute;
    top: 0;
    left: 5vw;
    font-size: 8vw;
    color: #432;
    z-index: 20;
}
#Support h2 {
    font-family: 'Kaisei Decol';
    padding-top: 3vw;
    font-size: 4vw;
    z-index: 20;
}
#Support p {
    padding-top: 3vw;
    font-size: 2vw;
    font-weight: bold;
    color: #432;
    line-height: 3vw;
}
#Support a {
    color: #432;
    text-decoration: underline;
}



@media (max-width: 450px) {
    .header_logo {
        width: 30vw;
    }
    .main-nav {
        width: 50vw;
    }
    .main-nav a {
        font-size: 4vw;
    }
    .cloud {
        background-size: 12vw;
    }
    .top-maintitle {
        font-size: 25vw;
    }
    .top-subtitle {
        font-size: 5vw;
        margin-top: -10vw;
    }
    .footer_p {
        font-size: 2.5vw;
    }
}