@charset "utf-8";

/*---------------------------------
　　　　共用
---------------------------------*/
* {margin:0;padding:0;list-style:none;vertical-align:middle;font-size:1em;}
body {background:;}

a {text-decoration:none;}
a:hover {color:red;text-decoration:none;}
a > img:hover {opacity:.8;}
img {vertical-align:middle;}

.wrap {margin:auto;}

.upper {color:black;}
.middle {background:;}
.lower {background:rgba(0,155,78,.5);color:#333;}

header {display:flex;flex-wrap:wrap;background:url("images/header.png") no-repeat left center/contain;height:5em;}
.title {position:relative;width:30%;height:5em;display:block;background:url("images/title4.png") no-repeat center/contain;transition-duration:.5s;z-index:10001;}
.slogan {width:70%;text-align:right;}
.slogan img {display:inline-block;margin:.2em 3em auto auto;height:2em;}
.slogan span {font-size:1em;}
.slogan span:nth-of-type(1) {color:#F03;}
.slogan span:nth-of-type(2) {color:#F90;}
.slogan span:nth-of-type(3) {color:#3C3;}
.slogan span:nth-of-type(4) {color:#F03;}
.slogan span:nth-of-type(5) {color:#F90;}
.slogan span:nth-of-type(6) {color:#3C3;}
.slogan span:nth-of-type(7) {color:#F03;}
.slogan span:nth-of-type(8) {color:#F90;}
.slogan span:nth-of-type(9) {color:#3C3;}

.nav_toggle {display:none;}
.nav_wrap {margin:.5em auto;margin-right:0;padding:.3em;max-width:46em;background:#4A4AFF;border-radius:1em;position:relative;z-index:998;}
nav {text-align:center;font-weight:bold;}
nav ul {display:flex;}
nav li {padding:0 .5em;}
nav a {color:white;text-decoration:none;transition:.5s;font-size:.9em;}
nav a:hover {color:red;}
.here {background:#D0FFD0;color:#444;font-weight:bold;}

nav span:nth-child(1) {color:#F03;}
nav span:nth-child(2) {color:#F90;}
nav span:nth-child(3) {color:#3C3;}
nav span:nth-child(4) {color:#F03;}
nav span:nth-child(5) {color:#F90;}
nav span:nth-child(6) {color:#3C3;}

.photo {display:flex;box-shadow:.5em .5em .5em rgba(0,0,0,.4);margin-bottom:.5em;position:relative;background:rgba(0,155,78,.5);}
.bx-wrapper {border:0 solid #188037!important;margin-bottom:0px!important;width:100%!important;}
.bx-wrapper img {width:100%;height:auto;}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {bottom:10px!important;}
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {opacity:.05;}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-next:hover {opacity:1;}
.bx-wrapper .bx-pager.bx-default-pager a {width:15px!important;height:15px!important;background:#FC6!important;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {background:#CF6!important;}
.bx-wrapper .bx-prev {left:0!important;background:url('images/controls.png') no-repeat 0 -32px!important;}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {background-position: 0 0!important;}
.bx-wrapper .bx-next {right:0!important;background:url('images/controls.png') no-repeat -43px -32px!important;}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {background-position:-43px 0!important;}
.bx-wrapper .bx-controls-auto .bx-start {background:url('images/controls.png') -86px -11px no-repeat!important;}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {background-position:-86px 0!important;}
.bx-wrapper .bx-controls-auto .bx-stop {background:url('images/controls.png') -86px -44px no-repeat!important;}

.content_wrap {display:flex;flex-wrap:wrap;}
.content_main {width:100%;overflow: hidden;}

.content_sub {text-align:center;width:100%;}
.content_sub img {width:100%;}

.content_inner {background:white;margin:8em auto;padding:1em;border-top:solid .1em #FF9F40;border-bottom:solid .1em #FF9F40;max-width:1200px;}
.bg8 {background:url("images/content-0hatano3.png") no-repeat center/cover;}
.bg9 {background:url("images/content-0hatano2.png") no-repeat center/cover;}
.bg0 {background:url("images/content-0v3.png") no-repeat center/cover;}
.bg1 {background:url("images/main-minori.png") no-repeat center/contain;}
.bg2 {background:url("images/main-tozan.png") no-repeat center/contain;}
.bg3 {background:url("images/main-hotaru.png") no-repeat center/contain;}
.bg4 {background:url("images/main-hoshi.png") no-repeat center/contain;}
.bg5 {background:url("images/content-5.png") no-repeat center/cover;}
.bg6 {background:url("images/content-6.png") no-repeat center/cover;}
.bg-imo {background:url("images/main-imo.png") no-repeat center/cover;}

.bg00 {background:url("images/content-0hatano.png") no-repeat center/cover;}
.bg01 {background:url("images/content-0minori.png") no-repeat center/cover;}
.bg02 {background:url("images/content-0tozan.png") no-repeat center/cover;}
.bg03 {background:url("images/content-0hotaru.png") no-repeat center/cover;}
.bg04 {background:url("images/content-0hoshi.png") no-repeat center/cover;}

h1 {font-size:2em;background:linear-gradient(transparent 60%, #FAE438 60%);}

h2 {position:relative;overflow:hidden;margin-top:2em;padding-bottom:5px;font-size:1.8em;text-align:center;}
h2:nth-child(1) {margin-top:0;}
h2::before,
h2::after {content:"";position: absolute;bottom:0;}
h2:before {border-bottom:3px solid #325A8C;width:100%;}
h2:after {border-bottom:3px solid #D8D8D8;width:100%;}
h2:first-letter {color:orange;}

h3 {font-size:2.5em;color:#555;text-align:center;margin:.2em;}
h3 img {margin:auto;width:80%;}

.bg8 .text,
.bg1 .text,
.bg3 .text,
.bg5 .text,
.bg-imo .text {margin:0 0 0 auto;}

.bg00 .text,
.bg01 .text,
.bg02 .text,
.bg03 .text,
.bg04 .text {margin:0 0 0 auto;}

.text {width:46%;height:30em;margin:0 2%;}
.text p {font-size:1.5em;color:#333;}
.text a {font-size:1.5em;width:6em;text-align:center;color:#fff;text-decoration:none;margin:auto;margin-top:1em;display:block;padding:.2em;transition:.25s;border-radius:.5em;}
.text img {max-height:20em;display:inline-block;margin:auto;}
.text a:hover {color:black;text-decoration:underline solid black;-webkit-transform: scale(1.2);transform:scale(1.2);}
.text iframe {max-height:15em;display:block;margin:auto;}
.text ul {font-size:1.3em;color:#333;margin:auto;width:auto;padding:1em;}
.text li {}

.rule {font-size:.7em;}

 .pdf,.web {}
.pdf:before,.web:before {width:.9em;height:.9em;content:"";display:inline-block;}
.pdf:before {background:url("images/pdfr.png") no-repeat center/contain;}
.web:before {background:url("images/webb.png") no-repeat center/contain;}
.webw:before {background:url("images/webw.png") no-repeat center/contain;padding-left:.2em;}

.banner {display:flex;flex-wrap:wrap;justify-content:space-around;padding:0;}
.banner img {border-radius:.4em;}
.banner li {width:calc(90%/4);margin:.5em;border:solid 2px #048;border-radius:.5em;box-shadow:10px 10px 10px rgba(0,0,0,.4);position:relative;overflow:hidden;}
.banner li:hover img {opacity:.5;}
.banner div {width:100%;font-size:2em;color:white;background:rgba(0,0,0,.8);position:absolute;bottom:-50%;z-index:100;opacity:.5;transition:all .5s;}
.banner a:hover div {display:block;opacity:1;bottom:0;transition:all .5s;}

.trans01 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a:hover .trans01 {
  -webkit-transform: scale(.9);
  transform: scale(.9);
}

.link {display:flex;}
.link li {margin:.3em auto;padding:.3em;}
.link li:nth-child(even) {background:url("images/link.png") no-repeat center/contain;}
.link li:nth-child(odd) {background:url("images/link2.png") no-repeat center/contain;}
.link a {text-decoration:none;color:black;font-weight: bold;background:rgba(255,255,255, 0);}
.link a:hover {opacity:1;color:red;}

.link a {position:relative;padding-left:1.2em;}
.link a:before {width:1em;height:1em;content: "";position:absolute;left:0;top:.15em;}
.link a:hover:before {background:url("images/favicon3.png") center/contain;}

.content_under {display:flex;}
.content_under ul {margin:0 .5em;}
.content_under li {margin:.1em;}
.address_wrap {display:flex;width:calc(200%/3);}
.address {display:block;width:calc(100%/2);}

.kouminkan {display:block;background:url("images/hall.jpg") no-repeat left/cover;width:calc(100%/2);height:10em;}
.sitemap_wrap {width:calc(100%/3);}
.sitemap {display:flex;flex-wrap:wrap;}
.sitemap li {margin:.5em;}
footer {background:rgba(0,155,78,.5);text-align:center;color:#333;}

#page_top {position:fixed;bottom:30px;right:30px;}
#page_top a {display:block;text-decoration:none;color:transparent;background:url("images/to_top.png") no-repeat center/contain;text-align:center;border-radius:5%;outline:none;width:80px;height:20px;padding:24px 0;}
#page_top a:hover {background:url("images/to_top-g.png") no-repeat center/contain;color:black;}


/* 画面外にいる状態 */
.ani_scroll {opacity:0.1;transform:translate(0, 50px);transition:all 1s;}
/* 画面内に入った状態 */
.ani_scroll.scrollin {opacity:1;transform:translate(0, 0);}

/* 画面外にいる状態 */
.ani_scroll section {opacity:0.1;transform:translate(50px, 0);transition:all 2s;}
.ani_scroll section:nth-of-type(even) {opacity:0.1;transform:translate(-50px, 0);transition:all 2s;}
/* 画面内に入った状態 */
.ani_scroll.scrollin section {opacity:1;transform:translate(0, 0);}

.blinking {position:absolute;left:.5em;color:red;-webkit-animation:blink .5s ease-in-out infinite alternate;-moz-animation:blink .5s ease-in-out infinite alternate;animation:blink .5s ease-in-out infinite alternate;}
@-webkit-keyframes blink{0% {opacity:0;} 100% {opacity:1;}}
@-moz-keyframes blink{0% {opacity:0;} 100% {opacity:1;}}
@keyframes blink{0% {opacity:0;} 100% {opacity:1;}}

.slider2 li.new {position:relative; width:500px; height:400px;}
.slider2 li.new:before {content:""; position:absolute; top:0; left:0; width:0; height:0; border-top:70px solid #f00; border-right:70px solid transparent;}
.slider2 li.new:after {content:"NEW"; position:absolute; top:0; left:0; font-size:normal; color:#FFF; transform:rotate(-45deg) translate(-5px, 5px);
}
.slider2 li.new img {width:100%; height:100%; object-fit:cover;}

/*---------------------------------
　　　　ホームページ
---------------------------------*/
#headline {font-size:1.0em;}
#headline li {border-bottom:dotted 1px #048;margin-top:.3em;}
#headline span {display:block;font-size:.8em;width:5em;color:#999;}
.news_scroll {overflow-x:auto;width:90%;max-height:12em;border:solid 1px black;margin:auto;padding:1em 2em;}

#news {display:flex;flex-wrap:wrap;font-size:1.2em;justify-content:space-around;padding:1em;margin:auto;max-width:1200px;}
#news li {width:calc(100%/5);text-align:center;font-weight:bold;}
#news a {display:block;color:white;text-decoration:none;margin-top:.5em;padding-top:.5em;background:url("images/paper.png") no-repeat center/contain;}
#news a:hover {color:red;text-decoration:none;}

#news li:nth-child(1) {background:#A2FFA2;}
#news li:nth-child(2) {background:#59BF77;}
#news li:nth-child(3) {background:#FF3E3E;}
#news li:nth-child(4) {background:#002F7B;}
#news li:nth-child(5) {background:#96F;}

#news li:hover {opacity:.5;}

.tabs {margin-top:50px;padding-bottom:40px;background:white;box-shadow:0 0 10px rgba(0, 0, 0, 0.2);width:100%;margin:0 auto;}
.tab_item {width:calc(100%/2);height:50px;background:#999;line-height:50px;font-size:16px;text-align:center;color:white;display:block;float:left;font-weight:bold;transition:all 0.2s ease;
}
.tab_item:hover {opacity:.75;}
input[name="tab_item"] {display:none;}
.tab_content {display:none;clear:both;overflow:hidden;}
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {display:block;}
.tabs input:checked + .tab_item {background:white;color:black;font-size:1.2em;text-decoration:underline;}

.news img {width:5em;height:5em;}
.news td {border-bottom:dashed 2px #aaaaaa;}
.news td:nth-child(even) {width:100%;}
.name td:nth-child(odd) {display:block;width:80px;height:60px;line-height:30px;padding:10px 0;text-align:center;background:#9CF;}

.icon_tozan:before,
.icon_kakashi:before,
.icon_hotaru:before,
.icon_yozora:before,
.icon_imo:before {width:5em;height:5em;content:"";display:block;margin:auto;}
.icon_tozan:before {background:url("images/icon_tozan.png") no-repeat center/contain;}
.icon_kakashi:before {background:url("images/icon_kakashi.png") no-repeat center/contain;}
.icon_hotaru:before {background:url("images/icon_hotaru.png") no-repeat center/contain;}
.icon_yozora:before {background:url("images/icon_yozora2.png") no-repeat center/contain;}
.icon_imo:before {background:url("images/icon_imo.png") no-repeat center/contain;}

#news li:nth-child(1):hover {background:url("images/icon1.png") no-repeat center/cover;}
#news li:nth-child(2):hover {background:url("images/icon2.png") no-repeat center/cover;}
#news li:nth-child(3):hover {background:url("images/icon3.png") no-repeat center/cover;}
#news li:nth-child(4):hover {background:url("images/icon4.png") no-repeat center/cover;}
#news li:nth-child(5):hover {background:url("images/icon5.png") no-repeat center/cover;}

/*---------------------------------
　　　　紹介ページ
---------------------------------*/
.kihon {margin:0 auto;font-size:1.2em;}
.kihon th {text-align:center;background:pink;padding:.4em;}
.kihon td {text-align:left;background:#FFE3FF;padding:.4em;}

.schedul {margin:0 auto;font-size:1.2em;}
.schedul th {text-align:center;padding:.5em 1em;background:#0CC;}
.schedul td {text-align:center;padding:.5em 1em;}
.schedul tr:nth-child(odd) {background:#D2FFFF;}
.schedul tr:nth-child(even) {background:#BFD;}


#jump {display:flex;flex-wrap:wrap;font-size:1em;justify-content:center;padding:1em;margin:auto;max-width:1200px;}
#jump li {width:calc(100%/4);text-align:center;font-weight:bold;}
#jump a {display:block;color:white;text-decoration:none;background:orange;padding:1em;}
#jump a:hover {color:red;text-decoration:none;}

#jump li:hover {opacity:.5;}

/*---------------------------------
　　　　自治会ページ
---------------------------------*/
.child-image {width:90%;margin:auto;vertical-align:middle;}
.child-image img {width:100%;margin:auto;vertical-align:middle;}
.junbi:before {content:"2024年度版 準備中";position:absolute;left:0;right:0;z-index:5;color:#C00;text-align:center;}

.aki td {width:1em;padding:1em;}
.aki2 {text-align:center;}
.aki2 span {font-size:2em;}

.imo_schedul {width:70%;}
.imo_schedul div {display:flex;}

/*---------------------------------
　　　　モーダル
---------------------------------*/
.m-content {margin:0 auto;padding:0;height:30em;}
.m-content img {display:block;height:100%;max-height:30em;margin:auto;}
.modal {display: none;height: 100vh;position: fixed;top: 0;z-index:100;width: 100%;}
.modal__bg {background: rgba(0,0,0,0.8);height: 100vh;position: absolute;width: 100%;}
.modal__content {background: #fff;left: 50%;padding:1em;position: absolute;top: 50%;transform: translate(-50%,-50%);}
.js-modal img {height:80vh;margin:0 auto;display:block;}
a.js-modal-open {padding:0!important;}

.hide {display: none;}
/*---------------------------------
　　　　活動ページ
---------------------------------*/
.photo2 img {width:auto;height:100%;}
.photo2 .bx-wrapper .bx-pager {width:20px!important;top:5px!important;left:-5px!important;}
.photo2 .bx-wrapper .bx-pager .bx-pager-item {margin:5px!important;}

@media screen and (max-width:800px){
body{font-size:3vw;}
.apper {display:none!important;}
.hide {display:inline;}
.banner img {width:70%;height:auto;}
.title {width:60%;margin:auto;}
.upper div:first-child {text-align:center;font-size:.8em;}

.content_wrap {flex-wrap:wrap;}
.content_main {width:100%;}
.content_sub {width:90%;}

.content_inner {margin:10em .5em;padding-top:1em;border:none;border-top:dotted 4px #048;border-radius:0;box-shadow:10px 10px 10px rgba(0,0,0,0);}
.content_inner:frst-child {border:none;}
.content_inner:last-child {border-bottom:dotted 4px #048;}

.middle {background:white;}

.photo {display:block;flex-wrap:wrap;box-shadow:none;background:white;margin-top:5em;}

.bx-wrapper {border:none!important;margin-bottom:1em!important;width:100%!important;}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {bottom:-20px!important;}
.bx-wrapper .bx-pager.bx-default-pager a {width:40px!important;}

.slider_side {display:flex;max-width:100%;width:100%;justify-content:space-around;margin:4em 0 2em 0}
.slider_side li {width:calc(90%/3);}
.slider_side img {width:100%;height:100%;}


.nav_wrap {background:none;}
nav {display:none;position:fixed;top:0;width:100%;height:100%;background:#FF0;left:0;z-index:10000;padding-top:5em;}
nav ul {display:flex;flex-wrap:wrap;margin:0 auto;width:90%;}
nav ul li {margin:10px auto;text-align:center;border:1px solid #666;width:40%;padding:1em;}
nav ul li:last-child {border none;}
nav ul li a {display:block;font-size:120%;color:#333;}
nav ul li a:hover {background:#fff;}
nav span {display:none;}

.nav_toggle.open {position:fixed;top:2em;right:2em;}
.nav_toggle {display:block;width:4em;height:4.5em;position:absolute;top:2em;right:2em;z-index:10001;color:black;font-size:.6em;margin:auto;padding:.3em;cursor:pointer;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:ease-in-out 1s;transition:ease-in-out 1s;border:1px solid black;border-radius:.2em;font-weight:bold;}
.nav_toggle div {position:relative;font-size:1em;}
.nav_toggle p {margin:.2em auto;text-align:center;}
.nav_toggle p:nth-of-type(1) {display:block;}
.nav_toggle p:nth-of-type(2) {display:none;}
.nav_toggle.open p:nth-of-type(1) {display:none;}
.nav_toggle.open p:nth-of-type(2) {display:block;}
.nav_toggle span {display:block;height:.3em;background:black;position:absolute;width:90%;left:.2em;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;transition:.5s ease-in-out;}		
.nav_toggle span:nth-of-type(1) {top:2.2em;}
.nav_toggle span:nth-of-type(2) {top:3.4em;}
.nav_toggle span:nth-of-type(3) {top:4.6em;}
.nav_toggle.open span:nth-of-type(1) {top:3.4em;-webkit-transform:rotate(-225deg);-moz-transform:rotate(-225deg);transform:rotate(-225deg);}
.nav_toggle.open span:nth-of-type(2) {width:0;left:50%;}
.nav_toggle.open span:nth-of-type(3) {top:3.4em;-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);transform:rotate(225deg);}

.text {width:100%;height:auto;margin:0;}
.text p {background:rgba(255,255,255,.5);margin-top:0em;padding:.5em;}
.text table {background:rgba(255,255,255,.5);margin-top:1em;}
.text ul {background:rgba(255,255,255,.5);margin-top:1em;}
.text a {}
.text a {width:8em;}

.banner {display:flex;flex-wrap:wrap;justify-content:space-around;border-top:dotted 4px #048;padding-top:1em;}
.banner li {width:45%;}
.banner img {width:100%;}
.banner div {font-size:1em;}

.link {display:flex;flex-wrap:wrap;}
.link li {width:calc(80%/2);margin:.5em 1em;padding:.2em;}

.content_under {flex-wrap:wrap;flex-direction:column-reverse;font-size:110%;}
.content_under ul {width:100%;margin:0;}
.address_wrap,
.sitemap_wrap {width:90%;margin:.2em auto;}
.address_wrap {}
.kouminkan {display:block;width:80%;height:10em;}
.address li {margin:auto;padding-left:1em;}
.sitemap_wrap span {background:#325A8C;color:white;border-radius:.5em .5em 0 0;padding:.5em;font-weight:bold;}
.sitemap {background:#325A8C;}
.sitemap li {width:calc(90%/2);background:#6A6AFF;margin:.1em;border-left:solid 1em skyblue;}
.sitemap a {display:block;color:white;text-decoration:none;padding:.5em;padding-left:1em;}
.sitemap a:hover {opacity:.8;background:#1A1AFF;}

#news {justify-content:flex-start;}
#news li {width:calc(100%/2);}
#news a {}
#news li:nth-child(1) {width:calc(100%/1);}
#jump {justify-content:flex-start;}
#jump li {width:calc(100%/2)!important;}

h3 {color:;}
.bg0:nth-child(odd) {background:url("images/content-0v3.png") no-repeat right/cover;}
.bg0:nth-child(even) {background:url("images/content-0v3.png") no-repeat left/cover;}
.bg1 {background:url("images/main-minori.png") no-repeat left/cover;}
.bg2 {background:url("images/main-tozan.png") no-repeat right/cover;}
.bg3 {background:url("images/main-hotaru.png") no-repeat left/cover;}
.bg4 {background:url("images/main-hoshi.png") no-repeat right/cover;}
.bg5 {background:url("images/content-5.png") no-repeat center/cover;}
.bg6 {background:url("images/content-6.png") no-repeat center/cover;}
.bg-imo {background:url("images/main-imo.png") no-repeat left/cover;}

#page_top {bottom:20px;right:20px;}
#page_top a {width:50px;height:20px;}

.child-image {width:100%;position:relative;left:0;margin-top:5em;}
.text img {width:100%;height:auto;max-height:none;}
.text iframe {width:100%;}
.chibi img {width:3em;}
.aki {font-size:.8em;}
.imo_schedul div {display:block;}

.photo2 img {width:100%;height:auto;}
.photo2 .bx-wrapper .bx-pager {width:auto!important;top:auto!important;}
.photo2 .bx-wrapper .bx-pager .bx-pager-item {margin:5px!important;}
}

@media screen and (max-width:800px){
.m-content {height:auto;}
.m-content img {width:80%;height:auto;max-height:none;}
}