/* ///////////////////////////////////////////////////////////////////
トップイメージ
/////////////////////////////////////////////////////////////////// */

#top-images{
    background-position: center;
    background-size: cover;
    height: auto;
    padding: 3% 2%;
    width: 96%;
}

#top-images h2{
    margin: 0 auto;
    text-align: center;
    font-size: 1.8vw;
    color: #4a4a4a;
    padding: 2% 0 ;
    background: rgb(255,255,255,0.8);
    width: 80%;
    border-radius: 30px 30px;
}

#top-images h2::first-letter{
    font-size: 150%;
    color: #ed6d3d;
}

#top-images.bg-1{
     background-image: url(../images/bg-img1.webp);
}

#top-images.bg-2{
     background-image: url(../images/bg-img2.webp);
}

#top-images.bg-3{
     background-image: url(../images/bg-img3.webp);
}

#top-images.bg-4{
     background-image: url(../images/bg-img4.webp);
}

/* ///////////////////////////////////////////////////////////////////
アーティクル
/////////////////////////////////////////////////////////////////// */
article{
    margin: 0 0 3%
}

article .body{
    width: 90%;
    max-width: 1280px;
    margin: 1em auto;
}

article .main{
    width: 75%;
    vertical-align: top
}

article .space{
    width: 5%
}

article .side{
    margin: 3% 0 0;
    width: 20%;
}

article .side ul{
    padding-left: 2em;
    text-align: center;
}

article .side a li{
    display: block;
    font-size:16px;
    padding: 10px 0 10px 15%;
    border-top:solid 1px #8f4b00ff;
    font-weight: bold;
    color: #8f4b00ff;
    transition: all 0.4s;
    position: relative;
    font-family: "UD Digi Kyokasho NK-B";
    text-align: left;
}

article .side a li::after{
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: bold;
    position: absolute;
    right: 5%;
    top:20px
}

article .side:last-child{
    border-bottom: solid 1px #8f4b00ff
}

article .side p{
    margin: 1px ;
    font-size:14px;
    line-height: 1;
    padding-left: 5px;
    display: block;
    font-family: "游ゴシックP";
}

article .side a:hover{
    text-decoration: none
}

article .side a li:hover{
    color: #fff
}
article .side .orange li:hover{
    background: #ff8900ff
}
article .side .bule li:hover{
    background: #0089ceff
}
article .side .green li:hover{
    background: #009c00ff
}
article .side .pink li:hover{
    background: #ff6ee6ff
}
article .side .navy li:hover{
    background: #5667e6ff
}
article .side .yellow li:hover{
    background: #ffda00ff
}
article .side .mos li:hover{
    background: #1c6e47ff
}
article .side .tomato li:hover{
    background: #ff716eff
}

/* ///////////////////////////////////////////////////////////////////
サービス内容
/////////////////////////////////////////////////////////////////// */

#service{
    width: 100%;
}

#service h2{
    padding-left: 10px;
    line-height: 2;
    font-family: "UD Digi Kyokasho NK-B";
    font-size: 1.8em;
    position: relative;
    border-bottom: solid 3px #aaa;
    margin: 0 auto 1em 
}

#service h2 img{
    width: 30px;
    vertical-align: -6px;
    margin-right: 10px;
    height: 30px
}

#service h2 span{
    font-size: 1.5em;
    vertical-align: middle
}

#service h2::after{
    position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px ;
  bottom: -3px;
    left: 0;
  width: 30%;
}

#service .wrap{
    margin: 0 auto;
    padding-bottom: 3em
}

#service .wrap ul{
   width: 100%;
    margin: 0 auto
}

#service .img{
    width: 40%;
    max-width: 450px;
    vertical-align:middle;
}

#service .img img{
    width: 90%;
}

#service .text{
    vertical-align:middle;
    text-align: left;
    font-weight: bold;
    width: 59%;
}

#service .text ol{
    list-style-type: decimal-leading-zero;
}

#service .text ol li{
    width: 100%;
    margin: 10px 0;
    display:list-item
}


#service .wrap-1 h2 span{
    color: #ff7300ff;
    vertical-align: middle
}

#service .wrap-1 h2::after{
  border-bottom: solid 3px #ff7300ff;
}


#service .wrap-2 h2 span{
    color: #1fb456ff;
    vertical-align: middle
}

#service .wrap-2 h2::after{
  border-bottom: solid 3px #1fb456ff;
}

#service .wrap-2 table{
    width: 90%;
    margin: 2em auto 0
}

#service .wrap-2 table td{
    width: 30%
}

#service .wrap-2 .space{
    width: 5%
}

#service .wrap-2 .link-park{
    font-size: 1.4em;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    padding: 1em 0;
    text-align: center;
}

#service .wrap-2 .link-park.green{
    background: #1fbf41ff
}

#service .wrap-2 .link-park.orange{
    background: #ff9f41ff
}

#service .wrap-2 .link-park.blue{
    background: #1186e8ff
}

#service .wrap-2 .link-park span{
    display: block;
    font-size: 14px;
    margin-top: 10px
}

#service .wrap-2 .link-park span::after{
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: bold;
    padding-left: 10px;
}

#service .wrap-2 .link-park:hover{
    transition-duration: 0.3s;
    transform: translateY(-3px);
    opacity: 0.6;
}

#service .wrap-2 a:hover{
    text-decoration: none;
}

#service .wrap-3 h2 span{
    color: #006bffff;
    vertical-align: middle
}

#service .wrap-3 h2::after{
  border-bottom: solid 3px #006bffff;
}

#service .wrap-4 h2 span{
    color: #ff00efff
}

#service .wrap-4 h2::after{
  border-bottom: solid 3px #ff00efff;
}


#service .wrap-5 h2 span{
    color: #007922ff
}

#service .wrap-5 h2::after{
  border-bottom: solid 3px #007922ff;
}

#service .wrap-6 h2 span{
    color: #d34d00
}

#service .wrap-6 h2::after{
  border-bottom: solid 3px #d34d00;
}

/* ///////////////////////////////////////////////////////////////////
料金案内
/////////////////////////////////////////////////////////////////// */

#price .wrap-1{
    text-align: center;
    font-weight: bold;
    font-size:1.6em;
}

#price .wrap-1 span{
    font-size:1.2em;
    color: #ff4200ff
}

#price .wrap-1 p{
    font-size: 16px;
    font-weight: normal;
    margin: 5px 0 16px
}

#price h2{
    border-left: solid 15px orange;
    padding-left: 10px;
    line-height: 2;
    font-family: "UD Digi Kyokasho NK-B";
    margin-top: 1.5em 
}

#price .wrap-3 table{
    width: 70%;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: center
}

#price .wrap-3 table th{
    font-size:1.2em;
    border-bottom: solid 1px #000;
    line-height: 1.8;
    background-color: #ededed
}

#price .wrap-3 table td{
    font-size:1.3em;
    font-weight: bold;
    line-height: 2.5;
    border-bottom: solid 1px #000
}

#price .wrap-3 table .leftline{
    border-left: solid 1px #000
}

#price .wrap-other ul{
    width: 60%;
    display: block;
    margin: 0 auto;
    text-align: center
}

#price .wrap-other li{
    text-align: center;
    width: 45%;
    font-size: 18px;
    line-height: 2.5;
    font-weight: bold
}

#price .wrap-other .arrow{
    width: 10%
}

#price .wrap-other .arrow img{
    width: 100%
}

#price .wrap-other .line{
    border-bottom: dotted 2px #000
}

/* ///////////////////////////////////////////////////////////////////
アクセスマップ
/////////////////////////////////////////////////////////////////// */

#acces p{
    margin: 0 0 10px;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 2px
}

#acces iframe{
    width: 100%;
    height: 600px;
}

#acces ul{
    width: 100%
}

#acces li{
    font-family: "UD Digi Kyokasho NK-B";
    font-size: 18px;
    width: 30%;
    margin-bottom: 1em
}

#acces li a::after{
    font-family: "Font Awesome 5 Free";
    content: "\f0c6";
    font-weight: bold;
    padding-left: 10px;
}

#acces .inlink{
    text-align: center;
    margin: 2% 0 5%;
}

#acces .inlink a{
    width: 40%;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    border: solid 1px #ed6d3d;
    margin: 0 2%;
    padding: 1% 0;
    color: #ed6d3d;
}

#acces .inlink a::after{
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    font-weight: bold;
    padding-left: 10px;
}

#acces .inlink a:hover{
    text-decoration: none;
    background: #ed6d3d;
    color: #fff;
}

#acces h2{
    border-left: solid 10px #ed6d3d;
    padding-left: 14px;
    font-size: 1.4em
}

.a-station{
    display: inline-block;
    vertical-align: top;
    width: 49%;
    margin: 0 0 5%;
}

.a-station h3{
    display: inline-block;
    background: #ed6d3d;
    margin: 0;
    color: #fff;
    padding: 2px 2%;
    font-size: 18px;
}

.a-station table{
    width: 95%;
    border-spacing: inherit;
    text-align: center;
}

.a-station th{
    border-bottom: solid 1px #aaa;
    color: #ed6d3d;
    padding: 1% 1% 0;
    font-size: 16px;
}

.a-station .name{
    font-size: 16px;
    font-weight: bold;
    padding: 2px 2%;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.a-station .name::after{
    content: "";
    border-top:solid 2px #aaa ;
    width: 15px;
    position: absolute;
    right: 0;
    top: 13px;
}

.a-station .time{
    width: 60%;
    padding: 0 0 0 10%;
    text-align: left;
    vertical-align: middle;
}

.a-near h3{
    display: inline-block;
    background: #ed6d3d;
    margin: 0;
    color: #fff;
    padding: 2px 2%;
    font-size: 18px;
}

.a-near table{
    border-spacing: inherit;
    width: 80%;
    margin: 1% 0 3%;
}

.a-near th{
    border-bottom: solid 1px #aaa;
    color: #ed6d3d;
    padding: 1% 1% 0;
    font-size: 16px;
}

.a-near td{
    padding: 1%;
}

.a-near td.name{
    width: 30%;
    font-weight: bold;
    font-size: 16px;
}

.a-near td.address{
    width: 50%;
}

.a-near td.time{
    width: 50%;
}

/* ///////////////////////////////////////////////////////////////////
Q＆A
/////////////////////////////////////////////////////////////////// */

#q-a .content{
    border-radius: 50px;
    text-align: center;
    font-weight: bold;
    line-height: 2;
    font-size: 18px;
    width: 80%;
    margin: 0 auto 1em;
    padding: 1em;
    background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

#q-a table{
    width: 80%;
    margin: 1em auto 2em;
    text-align: left;
    font-weight: bold;
    font-size: 18px
}

#q-a table .img{
    width: 15%
}

#q-a table .img img{
    width: 80%
}

#q-a table .q{
    color: orangered;
    font-size:1.2em
}

/* ///////////////////////////////////////////////////////////////////
施設概要
/////////////////////////////////////////////////////////////////// */

#fact h2{
    border-left: solid 10px orange;
    padding-left: 14px;
    font-size: 1.8em;
    font-family: "UD Digi Kyokasho NK-B";
}

#fact table{
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size:1.2em;
    border-collapse: collapse;
}

#fact table tr:nth-child(even){
    background: #ff960020
}

#fact table th{
    width: 25%
}

#fact table td{
    padding: 10px 0
}

#fact table tr{
    border-bottom: solid 1px #aaa
}

#fact table tr:first-child{
    border-top: solid 1px #aaa
}

#fact table img{
    width: 70%
}

#fact table iframe{
    width: 80%;
    height: 300px
}

#fact table ul{
    width: 95%;
    margin: 0 auto;
    padding-left: 5%;
    list-style: none
}

#fact table li{
    text-align: left;
    line-height: 2;
    display:list-item;
    font-size: 16px
}

#fact table li::before{
    content: "・"
}

#fact table li span{
    display: block;
    line-height: 1;
    font-size: 14px;
}

/* ///////////////////////////////////////////////////////////////////
求人案内
/////////////////////////////////////////////////////////////////// */

#kyujin .content{
    text-align: center;
    font-size: 18px;
    font-weight: bold
}

#kyujin .content span{
    display: block;
    position: relative;
    font-size:1.6em;
    margin: 0 auto 0.7em;
    color: red;
    font-family: "UD Digi Kyokasho NK-B";
    display: block;
    width: 400px;
    
}

#kyujin .content .left-line{
    position: absolute;
    left: 8px;
    top:-35px
}

#kyujin h2{
    padding-left: 10px;
    line-height: 2;
    font-family: "UD Digi Kyokasho NK-B";
    margin-top: 1.5em    
}

#kyujin table{
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
    
}

#kyujin th{
    width: 25%;
    padding: 15px 0;
    text-align: center
}

#kyujin td{
    padding-left: 10px
}

#kyujin th,#kyujin td{
    border: solid 1px 
}

#kyujin table li{
    display: block;
    line-height: 2;
    font-size:18px;
}

#kyujin table li::before{
    content: "・"
}

#kyujin .wrap-1 h2{
    border-left:solid 15px #ff6600ff
}

#kyujin .wrap-1 th{
    background-color: #ffe49eff
}

#kyujin .wrap-2 h2{
    border-left:solid 15px #0098ffff
}

#kyujin .wrap-2 th{
    background-color: #b1ffffff
}

/* ///////////////////////////////////////////////////////////////////
ご利用の流れ
/////////////////////////////////////////////////////////////////// */

.flow-1{
    margin: 0 auto;
    width: 80%;
    border-spacing: 0px 30px;
}

.flow-1 .step{
    width: 20%;
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
    color: #ff8c00;
    font-size:1.4em;
    vertical-align: top
}

.flow-1 .content {
    vertical-align: top;
}

.flow-1 .content p{
    margin: 0;
    letter-spacing: 2px;
    font-weight: bold;
    color: #ff8c00;
    font-size:1.4em;
}

.link{
    width: 80%;
    margin: 0 auto;
}

.link li{
    width: 50%;
    vertical-align: middle
}

.link img{
    width: 50%;
    margin:0 auto;
    display: block
}

.link .tel{
    border-bottom: solid 1px;
    padding: 10px 0;
    margin-bottom: 10px
}

.link a:hover img{
    transition-duration: 0.3s;
    transform: translateY(-3px);
    opacity: 0.6;
}

/* ///////////////////////////////////////////////////////////////////
リンク集
/////////////////////////////////////////////////////////////////// */

#link .content{
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 5%
}

#link .content p{
    font-size: 1.4em;
    font-weight: bold;
    font-family: "UD Digi Kyokasho NK-B";
    margin: 0 0 10px;
    color: orangered
}

#link .link-target{
    width: 80%;
    margin: 5% auto;
    list-style-type:disc
}

#link .link-target li{
    display:list-item;
    font-size: 18px;
    font-weight: bold;
    line-height: 2.5
}

#link link-target li a::after{
    font-family: "Font Awesome 5 Free";
    content: "\f0c6";
    font-weight: bold;
    padding-left: 10px;
}



/* ///////////////////////////////////////////////////////////////////
フォトギャラリー
/////////////////////////////////////////////////////////////////// */

#photo-top table{
    width: 70%;
    margin: 0 auto;
    border-bottom: solid 1px #aaa;
    max-width: 780px;
    padding: 2%;
}

#photo-top table td{
    width: 50%;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

#photo-top table img{
    width: 280px;
    max-width: 80%;
    margin: 0 ;
    height: 160px;
    object-fit: cover;
    display: block;
}

#photo-top table img:hover{
    transition-duration: 0.3s;
    opacity: 0.6;
}

#photo-top table td p{
    font-size: 14px;
    margin: 0 0 1%;
    text-align: left;
    position: absolute;
    top: 10%;
}

#photo-top td.text h3{
    font-size: 18px;
}

#photo-top td.text .detail{
    position: absolute;
    bottom: 5%;
    display: block;
    text-align: right;
    width: 100%;
}

#photo-top td.text .detail a::after{
    font-family: "Font Awesome 5 Free";
    content: "\f101";
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
    padding: 0 1%;
}

#photo ul{
    width: 100%;
    margin: 0 auto;
    text-align: center
}

#photo li{
    width: 100%
}

#photo .top-img img{
    width: 100%
}

#photo .other-img img{
    width: 90%;
    height: 130px;
    margin: 10px auto;
    display: block
}

#photo .other-img table{
    width: 100%;
}

#photo .other-img td{
    width:25%;
    height: 100px;
    max-width: 100px;
}

#photo .other-img img:hover{
    transition-duration: 0.3s;
    transform: translateY(-3px);
    opacity: 0.6;
}

#photo h3{
    margin: 1% 0 3%;
}

/* ///////////////////////////////////////////////////////////////////
フォトギャラリー - 一枚ページ
/////////////////////////////////////////////////////////////////// */

.photo_js{
    display: table;
    color: #000;
}

.photo_js ul{
    display: table-cell;
    width: 45%;
    text-align: center;
}

.photo_js ul .top-img{
    width: 100%;
}

.photo_js ul .top-img img{
    width: 100%;
}

.photo_js ul .other{
    width: 33%;
}
.photo_js ul .other img{
    width: 95%;
}

.photo_js ul .other img:hover{
    transition-duration: 0.3s;
    opacity: 0.6;
}

.photo_js .text{
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

.photo_js .text p{
    width: 90%;
    margin: 3% auto;
    line-height: 2;
    font-family: "メイリオ";
}

.photo-link{
    display: block;
    width: 90%;
    margin: 0 auto;
    font-weight: bold;
}

.photo-link a{
    padding: 1%;
    border-bottom: solid 1px;
}

.photo-link a::before{
    font-family: "Font Awesome 5 Free";
    content: "\f100";
    font-weight: bold;
    vertical-align: middle;
    padding: 0 1%;
}

.photo-link a:hover{
    text-decoration: none;
    transition-duration: 0.2s;
}

/* ///////////////////////////////////////////////////////////////////
公園案内
/////////////////////////////////////////////////////////////////// */
#park h2{
    border-left: solid 10px orange;
    padding-left: 14px;
    font-size: 1.8em;
    font-family: "UD Digi Kyokasho NK-B";
}

#park .p-main{
    display: block;
}

#park .p-main img{
    display: block;
    width: 100%;
    margin: 0 auto 3%;
}

#park ul{
    width: 100%;
    text-align: center;
}

#park ul li{
    width: 33%;
    margin: 0 0 1%;
}

#park ul li img{
    width: 90%;
}

#park img:hover{
    transition-duration: 0.3s;
    transform: translateY(-3px);
    opacity: 0.6;
}

/* ///////////////////////////////////////////////////////////////////
プライバシーポリシー
/////////////////////////////////////////////////////////////////// */

#policy .content{
    padding: 1em;
    background: #f0f8ff
}

#policy h2{
    border-left: solid 10px orange;
    padding-left: 14px;
    font-size: 1.8em;
    font-family: "UD Digi Kyokasho NK-B"; 
    margin-top: 5%
}

/* ///////////////////////////////////////////////////////////////////
お問い合わせ
/////////////////////////////////////////////////////////////////// */

#contact .content{
    width: 80%;
    margin: 0 auto 5%
}

#contact .content li{
    width: 50%;
    position: relative
}

#contact .content li img{
    width: 90%;
    margin: 0 auto;
}

#contact .content li font{
    position: absolute;
    top: -50%;
    left: 15%;
    font-weight: bold
}

#contact .content li a:hover img{
    transition-duration: 0.3s;
    transform: translateY(-3px);
    opacity: 0.6;
}

#contact .content p{
    margin: 15px auto;
    line-height: 2;
    letter-spacing: 2px
}

#contact .form-group{
    width: 100%;
    font-size: 0;
    border-collapse: collapse;
}

#contact .form-group td{
    border: solid 2px #aaa;
    letter-spacing: 1.2px
}

#contact .form-content ul{
    margin-left: 5%;
    margin: 3% 5%
}

#contact .name{
    font-size:14px;
    font-weight: bold;
    color: #000;
    margin: 0;
    line-height: 2.5;
    width: 30%;
    padding: 0 1em
}

#contact .name font{
    position: relative;
    width: 100%;
    display: inline-block
}

#contact .form-group .name span{
    position: absolute;
    background: #ff6c00ff;
    padding: 3px;
    line-height: 1.5;
    letter-spacing: 3px;
    right: 2%;
    top:10%;
    color: #fff;
    border-radius: 8px
}

#contact #form-control{
    line-height: 2.5;
    margin: 2% 5%;
    padding: 0 5%;
    border:solid 1px #c8c8c8c8;
    border-radius: 10px
}

#contact #form-control.form-2{
    width: 50%
}

#contact #form-control.form-3{
    width: 60%
}

#contact #form-control.form-4{
    width: 80%
}

.contact-btn{
    display: block;
    width: 35%;
    padding: 10px 0;
    box-shadow: 1px 1px 3px gray;
    border: none;
    background: linear-gradient(to top ,#e3e3e3,#FFF);
    cursor: pointer;
    margin: 3% auto;
}

.contact-btn:hover{
   background: linear-gradient(to bottom ,#e3e3e3,#f7f7f7); 
    box-shadow: none;
    border: none
}

.alert-success {
    font-size: 200%;
    color: #fff;
    text-align: center;
    font-weight: bold;
    background: red;
    padding: 5% 0;
    margin-bottom: 1em;
    font-family: "游ゴシック";
    display: none;
}

.alert-danger {
    font-size: 200%;
    color: #fff;
    text-align: center;
    font-weight: bold;
    background: blue;
    padding: 5% 0;
    margin-bottom: 1em;
    font-family: "游ゴシック";
    display: none;
}

/* ///////////////////////////////////////////////////////////////////
サンクスページ
/////////////////////////////////////////////////////////////////// */

.thanks{
    text-align: center;
    margin: 0 0 5%;
}

.thanks div{
    font-size: 2.5rem;
    font-weight: bold;
    background-color: red;
    color: #fff;
    padding: 1% 0;
}

.thanks p{
    font-weight: 500;
    font-size: 1.2rem;
}