@charset "utf-8";

#main {
margin:0;
height:477px;
position:relative
}

#main > div {
width:1000px;
height:477px;
margin:0 auto;
background:url(../img/main_a_bg.png) left bottom no-repeat;
position:relative
}

#main div img {
max-height:477px;
max-width:835px;
min-height:477px;
min-width:835px;
position:absolute;
top:0;
right:0;
z-index:1
}

#main div a {
width:300px;
height:300px;
color:#fff;
display:block;
position:absolute;
top:111px;
left:0;
z-index:10000
}

#main div a h2 {
height:245px;
padding:20px;
font-size:1.9em;
line-height:1.5;
background:url(../img/main_title_bg.png) repeat
}

#main div a span {
height:38px;
padding:7px 0 0 60px;
font-size:1.3em;
line-height:1.5;
display:block;
background:-moz-linear-gradient(left,#b9cf28,#22a372);
background:-webkit-linear-gradient(left,#b9cf28,#22a372);
background:linear-gradient(to right,#b9cf28,#22a372);
position:relative
}

#main div a span .maru {
position:relative
}

#main div a span .maru::before {
position:absolute;
content:'';
width:26px;
height:26px;
background:#fff;
border-radius:50%;
top:-23px;
right:15px;
margin-top:-7px
}

#main div a span .maru::after {
position:absolute;
content:'';
width:10px;
height:10px;
border-top:solid 2px #22a271;
border-right:solid 2px #22a271;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
top:0;
right:24px;
margin-top:-23px
}

article {
min-width:1200px;
position:relative;
overflow:hidden
}

article .eventList {
z-index:1000
}

.sankakuBg_01 {
width:50%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:-10;
transition:1.5s;
opacity:0;
transform:translate(0,200px);
-webkit-transform:translate(0,200px)
}

.sankakuBg_01:after {
content:url("../img/sankakuBg_01.png")
}

.sankakuBg_01_UP {
opacity:1;
transform:translate(0,0);
-webkit-transform:translate(0,0)
}

.sankakuBg_02 {
position:absolute;
top:15%;
right:0;
z-index:-20;
transition:1.5s;
opacity:0;
transform:translate(0,200px);
-webkit-transform:translate(0,200px)
}

.sankakuBg_02:after {
content:url("../img/sankakuBg_02.png")
}

.sankakuBg_02_UP {
opacity:1;
transform:translate(0,0);
-webkit-transform:translate(0,0)
}

.sankakuBg_03 {
position:absolute;
top:40%;
left:0;
z-index:-20;
transition:1.5s;
opacity:0;
transform:translate(0,200px);
-webkit-transform:translate(0,200px)
}

.sankakuBg_03:after {
content:url("../img/sankakuBg_03.png")
}

.sankakuBg_03_UP {
opacity:1;
transform:translate(0,0);
-webkit-transform:translate(0,0)
}

#emergency {
width:995px;
max-width:100%;
margin:20px auto 0
}

#emergency h3 {
padding:10px 15px 8px;
font-size:1em;
font-weight:400;
line-height:1;
color:#fff;
display:inline-block;
background:#b7183e
}

#emergency .wrap {
padding:10px 10px 10px 50px;
font-size:1.2em;
line-height:1.5;
color:#b7183e;
border:solid 5px #b7183e;
background:url(../img/emergency_icon.jpg) top left no-repeat;
background-position:9px 9px
}

#emergency.information h3 {
background:#002C69
}

#emergency.information .wrap {
color:#002C69;
border:solid 5px #002C69;
background-image:none;
padding-left:20px
}

#photo_info {
width:1000px;
max-width:100%;
margin:20px auto 0;
display:flex;
flex-wrap:wrap
}

#photo_info figure {
width:24%;
height:220px;
margin:5px;
overflow:hidden;
position:relative;
display:inline-block
}

@media screen and (max-width:1000px) {
#photo_info figure {
width:32%;
height:200px
}
}

#photo_info figure img {
width:100%
}

#photo_info .sankaku {
border-style:solid;
border-width:0 0 17px 17px;
border-color:transparent transparent #22a271;
position:absolute;
right:0;
bottom:0
}

#photo_info figcaption {
width:100%;
height:100%;
font-size:1.1em;
font-weight:700;
line-height:1.5;
color:#fff;
position:absolute;
left:0;
bottom:0;
background:-moz-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5));
background:-webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5));
background:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5))
}

#photo_info figcaption span {
display:block;
position:absolute;
bottom:10px;
left:10px
}

.sectionBox {
width:100%;
min-width:1000px;
margin:50px auto 0;
overflow:hidden;
background-color:rgba(195,235,220,0.6)
}

.sectionBoxInner {
width:1000px;
margin:70px auto;
display:flex;
align-items:flex-end
}

#news {
flex-basis:700px;
position:relative
}

#news h3 {
margin-bottom:30px;
font-size:1em;
font-weight:400;
text-align:center
}

#news h3 img {
margin:0 auto 20px;
display:block
}

#news a.to_list {
position:absolute;
top:50px;
right:180px
}

#news ul {
width:700px;
display:flex;
flex-wrap:wrap;
align-content:stretch
}

#news ul li {
width:33%;
height:300px;
padding:0;
position:relative;
background:#fff
}

#news ul li a {
color:#131313;
display:block
}

#news ul li div {
width:100%;
height:154px;
margin:0;
overflow:hidden
}

#news ul li div img {
max-width:100%;
margin:0 auto;
display:block;
min-height:154px
}

#news ul li p {
height:125px;
padding:10px 20px;
font-size:1em;
letter-spacing:.05em;
line-height:1.5;
background:url(../img/news_line.gif) right center no-repeat
}

#news ul li:nth-child(3) p,#news ul li:nth-child(6) p {
background:none
}

#news ul li p span {
width:100%;
font-size:.8em;
text-align:center;
color:#727272;
position:absolute;
left:0;
bottom:9px
}

#info {
margin-top:30px;
width:275px;
position:relative
}

#info h3 {
margin-bottom:30px
}

#info h3 img {
margin:0 auto;
display:block
}

#info a.to_list {
position:absolute;
top:50px;
right:0
}

#info ul {
padding:7px 20px;
background:#fff
}

#info ul li {
padding:10px;
cursor:pointer;
border-top:solid 1px #e6e6e6
}

#info ul li:nth-child(1) {
border:none
}

#info ul li a p {
font-size:.85em;
line-height:1.5;
letter-spacing:.03em;
color:#131313
}

#info ul li a p span {
margin-bottom:7px;
font-size:.8em;
line-height:1;
color:#727272;
display:block
}

#info ul li a p span.category {
margin-bottom:0;
margin-top:8px
}

.remodal dl {
color:#131313
}

.remodal dl dt {
padding:0 0 10px;
text-align:center
}

.remodal dl dd {
text-align:left
}

#event {
width:100%;
min-width:1000px;
margin:0 auto;
padding:0 0 60px;
background:rgba(195,235,220,0.6)
}

#event > div {
width:1000px;
max-width:100%;
margin:0 auto;
position:relative
}

#event h3 {
margin-bottom:30px;
font-size:1em;
font-weight:400;
text-align:center
}

#event h3 img {
margin:0 auto 20px;
display:block
}

#event a.to_list {
position:absolute;
top:50px;
right:330px
}

#event ul {
width:1000px;
max-width:100%;
margin:0 auto;
flex-wrap:wrap;
column-count:3;
column-gap:0
}

#event ul li {
flex-basis:30%;
margin:0 10px 20px;
-webkit-column-break-inside:avoid;
page-break-inside:avoid;
break-inside:avoid;
background:#fff;
height:100%
}

#event ul li a {
color:#131313;
display:inline-block;
height:100%
}

#event ul li div {
width:100%;
height:214px;
overflow:hidden
}

#event ul li div img {
max-width:100%;
min-width:313px;
max-height:202px
}

#event ul li dl {
padding:18px 20px;
line-height:1.5;
height:100%
}

#event ul li dl dt {
padding-bottom:10px;
font-size:1em;
font-weight:700
}

#event ul li dl dd {
font-size:.9em
}

#awords {
width:100%;
min-width:1000px;
margin:0 auto;
padding:50px 0 30px;
background:url(../img/awords_bg.jpg) bottom center no-repeat;
background-size:100%
}

#awords h3 img {
max-width:100%;
margin:0 auto 30px;
display:block
}

#awords .awordsInner {
width:1000px;
height:448px;
margin:0 auto;
padding:35px 0 0;
position:relative;
background:url(../img/awords_leaf_bg.png) top center no-repeat
}

#awords p {
width:365px;
padding:0 0 35px 35px;
color:#22a271;
line-height:0;
position:absolute;
top:-80px;
right:0;
background:url(../img/awords_bg.gif) bottom left no-repeat
}

#awords p b {
padding:5px 10px;
font-size:.95em;
line-height:1.2;
text-align:center;
display:inline-block;
border:solid 2px #22a271
}

#awords p span {
padding:0;
font-size:5em;
letter-spacing:0
}

#awords ul.awords_photo {
margin:0 auto 80px;
width:1000px
}

#awords ul.awords_photo li img {
max-width:282px;
height:282px;
overflow:hidden;
border-radius:50%;
margin:0 auto
}

#awords .awords_details {
width:100%;
height:85px;
margin:0 auto
}

#awords dl dt {
padding:11px 0
}

#awords dl dt span {
width:100%;
margin:0 auto;
display:block;
font-size:1.2em;
text-align:center;
line-height:1;
color:#fff
}

#awords dl dd {
padding:6px 0;
text-align:center;
color:#22a271
}

a.to_list {
width:70px;
height:15px;
padding:6px 0 5px 10px;
font-size:.83em;
letter-spacing:0;
line-height:1;
color:#fff;
display:inline-block;
background:#22a271
}

.maru {
position:relative
}

.maru::before {
position:absolute;
content:'';
width:20px;
height:20px;
background:#fff;
border-radius:50%;
top:-9px;
right:3px;
margin-top:-7px
}

.maru::after {
position:absolute;
content:'';
width:6px;
height:6px;
border-top:solid 2px #22a271;
border-right:solid 2px #22a271;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
top:0;
right:10px;
margin-top:-10px
}

.sns ul {
padding:30px 0;
display:flex;
justify-content:center
}

.sns ul li {
margin:5px 10px;
border-radius:3px
}

.sns ul li a {
width:139px;
height:57px;
padding:10px 5px 0 65px;
line-height:1.5;
color:#fff;
display:block
}

.sns ul li a span {
display:block;
font-size:85%
}

.sns ul li:nth-child(1) {
background:url(../img/sns_f.png) top left no-repeat #3b5998
}

.sns ul li:nth-child(2) {
background:url(../img/sns_t.png) top left no-repeat #55acee
}

.sns ul li:nth-child(3) {
background:url(../img/sns_y.png) top left no-repeat red
}

.banner {
width:100%;
margin:0;
background:#131313
}

.banner ul {
width:1000px;
max-width:100%;
margin:0 auto;
padding:20px 100px;
display:flex;
justofy-content:center
}

.banner ul li {
width:209px;
margin:10px;
border:solid 1px #999
}

.banner ul img {
max-width:100%
}