@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal}
a { color: #000; text-decoration: none;}
a:hover {text-decoration: underline;}
@media only screen and (min-width: 769px){ a { transition: all .2s ease-out;} a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; touch-action: manipulation; width: 100%; height: 100%; font-family: 'Noto Serif JP', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 1.8rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.15em; font-feature-settings: "palt"; color: #000;}
#container { position: relative; width: 100%; overflow: hidden;}
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.4;}
#loading { z-index: 100000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #FFF url("../img/common/loading.svg") center center no-repeat;}


/*HEADER*/
/*******************************************************************/
#header { position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100px; padding: 16px 2.4vw; background: #FFF; box-shadow: 0 3px 6px rgba(0,0,0,.08); z-index: 200;}
#header + * { margin-top: 100px;}
#logo { width: 25%; max-width: 280px; margin-right: 16px;}
.menu li a { display: flex; align-items: center; white-space: nowrap;}
.menu li a img { width: 44px; margin-right: 4px;}
@media only screen and (min-width: 1025px){
#nav { flex: 1; display: flex; justify-content: center; align-items: center;}
#nav ul { display: flex; align-items: center;}
#nav li { margin: 0 1.2vw;}
#sns { width: 20%; display: flex; justify-content: flex-end; align-items: center;}
#sns li { margin-left: 12px;}
#open { display: none;}
}


/*FOOTER*/
/*******************************************************************/
#pagetop { position: absolute; top: -33px; right: calc(50% - 50vw + 40px);}
#footer { position: relative; margin-top: 80px; padding: 40px 2.4vw; background: #8EC055; color: #FFF;}
#footer a { color: #FFF;}
#footer p { text-align: center; margin-bottom: 24px;}
#footer p span { font-size: 1.2rem; letter-spacing: 0.05em;}
#footerlink { display: flex; justify-content: space-between; align-items: center;}
#footerlink li { display: inline-block; margin-right: 16px; font-size: 1.2rem;}
#footer address { font-size: 1.2rem; font-style: normal;}


/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 80px 5.6vw 0;}
article header { max-width: 1200px; margin: 0 auto 40px; text-align: center;}
article header h2 { font-size: 2.4rem;}
article header i { font-size: 4.8rem; text-indent: 0.2em;}
article header i + h2 { margin-top: 8px;}
article header .btn { position: absolute; top: 0; right: 0; margin: 0;}
section { max-width: 1200px; margin: 0 auto;}
section h3 { position: relative; margin-bottom: 32px; padding-left: 40px; font-size: 2.4rem;}
section h3::before { content: ''; position: absolute; top: 0.5em; left: 0; width: 32px; height: 1px; background: #231815;}
section * + h3 { margin-top: 56px;}
section p:not(:last-child) { margin-bottom: 32px;}
section p {font-family: 'Noto Sans JP', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: normal;}
section p a {color:blue; text-decoration: underline;}
figure { position: relative;}
figure img { width: 100%;}
table { width: 100%; border-collapse: collapse;}
th { padding: 16px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid #8EC055; white-space: nowrap;}
td { padding: 16px 24px; vertical-align: top; border-bottom: 1px solid #DDD;}
#contents { display: flex;}
#contents section { flex: 1;}
#contents aside { width: 22%; margin-left: 5.6vw;}
aside h4 { margin-bottom: 16px; padding-bottom: 16px; text-align: center; border-bottom: 1px solid #CCC;}
aside * + h4 { margin-top: 40px;}
aside li { margin-bottom: 24px;}
aside li a { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 88px; padding: 16px; border: 2px solid #8EC055; border-radius: 2px; color: #8EC055;}
aside li a::after { content: ''; transform: rotate(45deg); width: 8px; height: 8px; margin: 16px; border-top: 2px solid #8EC055; border-right: 2px solid #8EC055;}
aside li a img { max-width: 160px;}
aside li.wide { background-color: #8EC055;}
aside li.wide a { color: #fff;}
aside li.wide a::after { content: ''; transform: rotate(45deg); width: 8px; height: 8px; margin: 16px; border-top: 2px solid #fff; border-right: 2px solid #fff;}
aside li.ura {}
aside li.ura a { color: #b9865b; border: 2px solid #b9865b; border-radius: 2px; color: #b9865b;}
aside li.ura a::after { content: ''; transform: rotate(45deg); width: 8px; height: 8px; margin: 16px; border-top: 2px solid #b9865b; border-right: 2px solid #b9865b;}
.right { text-align: right;}
.center { text-align: center;}
.row { display: flex; margin: -20px;}
.row > * { flex: 1; margin: 20px;}
.reverse { flex-direction: row-reverse;}
.btn { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 32px;}
.btn a { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; background: #8EC055; border-radius: 2px; color: #FFF;}
.btn a::after { content: ''; transform: rotate(45deg); width: 8px; height: 8px; margin-left: 16px; border-top: 2px solid #FFF; border-right: 2px solid #FFF;}
.sp { display: none;}
.fit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.fadeInUp{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp;}
@-webkit-keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 20px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);} }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 20px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);} }
.animated { opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.delay1{-webkit-animation-delay:0.2s;animation-delay:0.2s}
.animated.delay2{-webkit-animation-delay:0.4s;animation-delay:0.4s}
.animated.delay3{-webkit-animation-delay:0.6s;animation-delay:0.6s}
.animated.delay4{-webkit-animation-delay:0.8s;animation-delay:0.8s}
.animated.delay5{-webkit-animation-delay:1s;animation-delay:1s}
.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}
.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}
.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}
.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}
.red { color:#FF0000;}
.caption{font-size:75%;}
.meta {margin-bottom: 35px; margin-top: 8px;}
.detail img {margin: 0 auto; display: block; max-width:100%;}
.detail p {font-family: 'Noto Sans JP', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: normal;}
.event { border-bottom:solid 1px #333;border-right:solid 1px #333; border-top:solid 1px #ccc;border-left:solid 1px #ccc;padding:10px; font-size: 2.8rem;}
#ss { padding: 0; margin: 0 auto 30px; max-width: 1000px; width:auto; }
#ss .swiper-pagination { top: 50%; left: auto; bottom: auto; right: 24px; transform: translateY(-50%); width: auto; z-index: 100;}
#ss .swiper-pagination-bullet { position: relative; display: block; margin: 24px 0; background: rgba(255,255,255,.3); opacity: 1;}
#ss .swiper-pagination-bullet-active { background: #8EC055;}
#ss .swiper-pagination-bullet .num { position: absolute; left: -24px; top: -2px; font-size: 1.2rem; font-weight: 400; line-height: 1; letter-spacing: 0; color: #FFF;}
video {width:100%; min-width: 240px; max-width: 360px;}

.vframe{ margin:30px auto; max-width: 1000px;}

.video {
 position: relative;
 height: 0;
 padding: 0 0 56.25%;
 overflow: hidden;
 }
 .video iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 max-width:1000px;
 }
.mT20 {margin-top: 20px;}

/*TOP*/
#mv { padding: 0; margin: 0 auto; max-width: 1600px; }
#mv .swiper-pagination { top: 50%; left: auto; bottom: auto; right: 24px; transform: translateY(-50%); width: auto; z-index: 100;}
#mv .swiper-pagination-bullet { position: relative; display: block; margin: 24px 0; background: rgba(255,255,255,.3); opacity: 1;}
#mv .swiper-pagination-bullet-active { background: #8EC055;}
#mv .swiper-pagination-bullet .num { position: absolute; left: -24px; top: -2px; font-size: 1.2rem; font-weight: 400; line-height: 1; letter-spacing: 0; color: #FFF;}
#banner ul { justify-content: center;}
#banner li { width: calc(100% - 40px);}
#news { margin-top: 80px; padding-bottom: 80px; background: #8EC055; color: #FFF;}
#news .swiper-slide a { position: relative; display: block;}
#news .swiper-slide .cat { position: absolute; top: 0; left: 0; width: auto; min-width: initial; font-size: 1.4rem;}
#news .swiper-slide figure { margin-bottom: 16px; padding-top: calc(525 / 700 * 100%); background: url("../img/common/noimage.jpg") center no-repeat; background-size: cover;}
#news .swiper-slide figure img { position: absolute; top: 0; left: 0;}
#news .swiper-slide p { color: #FFF;}
#news .swiper-slide a:hover {text-decoration: none;}
#news i a,#news h2 a{color: #fff;} 
.news dt { clear: left; float: left; width: 112px; margin-bottom: 24px; letter-spacing: 0;}
.news dd { padding-left: 112px; padding-bottom: 24px;}
.news dd a { display: flex; align-items: flex-start;}

.cat { display: block; width: 160px; min-width: 160px; margin-right: 16px; padding: 4px; text-align: center; background: #F3EEDA; font-size: 1.2rem; letter-spacing: 0.1em; white-space: nowrap;}
.topcontents h2::before { content: ''; position: absolute; top: -4vh; left: 50%; width: 50%; height: calc(100% - 2vh); background: #8EC055; z-index: -1;}
.topcontents .reverse h2::before { left: 0;}
@media screen and (min-width: 1025px) {
.topcontents { padding-left: 0; padding-right: 0;}
.topcontents section { align-items: flex-start; max-width: initial;}
.topcontents h2 { position: relative; order: 1; display: flex; align-items: center; width: 15vw; padding-top: 4vh; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: justify; text-justify: inter-ideograph; font-size: 3.2vw; line-height: 1;}
.contentmain { flex: none; width: 60vw;}
.contentmain p { margin: 4vw;}
.contentsub { flex: none; width: 25vw;}
.contentsub > * { margin-bottom: 40px;}
}
.toplink { max-width: 1200px; margin: 80px auto; padding: 0 5.6vw;}
.toplink ul { flex-wrap: wrap;}
.toplink li:not(.wide) { flex: none; display: flex; width: calc(100% / 3 - 40px);}
.toplink li.wide { flex: none; width: calc(100% - 40px); font-size: 2.4rem; background-color: #8EC055;background-image: url(/img/common/contents.png); background-repeat:no-repeat;background-position: right center;}
.toplink li.wide a { padding: 24px; color: #fff;}
.toplink li a { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}


/*PAGE*/
#title { position: relative;}
#title h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 400px; padding: 4vh 7vw; text-align: center; border: 2px solid #FFF; font-size: 2.4vw; line-height: 1.6; color: #FFF; text-shadow: 0 0 10px rgba(0,0,0,.5); z-index: 1;}


@media only screen and (max-width: 1400px){
#ss {max-width: 700px;}
}


@media only screen and (max-width: 1024px){
body { font-size: 1.6rem;}
#header { height: 60px;}
#header + * { margin-top: 60px;}
#logo { width: auto; max-width: 160px;}
#nav { position: fixed; top: 0; right: -100%; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 0 70px; background: #FFF; z-index: 500; transition: 1.6s cubic-bezier(.19,1,.22,1);}
#nav li { padding: 1.0vh 0; text-align: center; overflow: hidden; line-height: 1.2;}
#nav li a { opacity: 0; display: block; transform: translateY(100%); color: #8EC055; transition: 0.1s cubic-bezier(.19,1,.22,1); font-size: 1.8rem;}
#nav #sns li { display: inline-block; margin: 8px;}
#open { display: flex; align-items: center; margin-left: auto; cursor: pointer; z-index: 1000;}
#open div { position: relative; width: 18px; height: 14px; margin-right: 8px;}
#open div span { position: absolute; left: 0; display: block; width: 18px; height: 2px; background: #8EC055; transition: .2s linear;}
#open div span:nth-child(1) { top: 2px;}
#open div span:nth-child(2) { top: 7px;}
#open div span:nth-child(3) { top: 12px;}
.open #open div span:nth-child(1) { top: 7px; transform: rotate(45deg);}
.open #open div span:nth-child(2) { width: 0;}
.open #open div span:nth-child(3) { top: 7px; transform: rotate(-45deg);}
.open #nav { pointer-events: auto; right: 0;}
.open #nav li a { opacity: 1; transform: translateY(0); transition: 2.4s cubic-bezier(.19,1,.22,1);}
#nav li:nth-of-type(1) a { transition-delay: .24s!important;}
#nav li:nth-of-type(2) a { transition-delay: .32s!important;}
#nav li:nth-of-type(3) a { transition-delay: .40s!important;}
#nav li:nth-of-type(4) a { transition-delay: .48s!important;}
#nav li:nth-of-type(5) a { transition-delay: .56s!important;}
#nav li:nth-of-type(6) a { transition-delay: .64s!important;}
#nav li:nth-of-type(7) a { transition-delay: .72s!important;}
#nav li:nth-of-type(8) a { transition-delay: .80s!important;}
#nav li:nth-of-type(9) a { transition-delay: .88s!important;}
#nav li:nth-of-type(10) a { transition-delay: .96s!important;}
#footer p span { font-size: 1rem;}
#footerlink { display: block; text-align: center;}
#footerlink li { margin: 8px;}
#footerlink address { margin-top: 24px; font-size: 1rem;}

article { padding: 56px 5.6vw 0;}
article header { margin-bottom: 24px;}
article header i { font-size: 3.2rem;}
article header h2 { font-size: 1.8rem;}
article header .btn { position: relative; right: 0; margin-top: 24px;}
section h3 { font-size: 1.8rem;}
th { display: block; padding: 16px 0 0; border-bottom: none; white-space: normal;}
td { display: block; padding: 16px 0;}
#contents { display: block;}
#contents aside { width: auto; margin: 56px 0 0;}
aside li { margin-top: 16px!important;}
.row { display: block; margin: 0;}
.row > * { width: 100%!important; margin-left: auto!important; margin-right: auto!important;}
.row > *:not(:first-child) { margin-top: 32px;}
.btn li a { display: block;}
.sp { display: block;}
.pc { display: none;}

#mv .swiper-pagination { display: none;}
#ss .swiper-pagination { display: none;}
#banner { padding: 0;}
#banner li { margin: 0;}
#news { margin-top: 0; padding-bottom: 40px; padding-top: 30px;}
#news section { position: relative;}
#news p { font-size: 1.4rem;}
.slide-prev, .slide-next { position: absolute; top: calc(525 / 1500 * 100% - 35px); right: -5.6vw; width: 35px; height: 35px; background: url("../img/common/arr.svg") center no-repeat; cursor: pointer; z-index: 10;}
.slide-next { }
.slide-prev { right: auto; left: -5.6vw; transform: scaleX(-1)!important;}
.news dt { float: none; margin-bottom: 8px; }
.news dd { position: relative; padding-left: 0; padding-bottom: 32px;}
.news dd a { display: block;}
.cat { width: auto; min-width: initial; margin-right: 0; padding: 2px 16px;}
.news .cat { position: absolute; top: -32px; right: 0;}
.topcontents h2::before { top: -30%; left: auto; right: 0; width: 40%; height: 400%;}
.topcontents h2 { text-align: center; font-size: 3.2rem;}
.contentmain p { margin: 4vw 0;}
.contentsub > * { margin-bottom: 3%;}
.contentimg { display: flex; justify-content: space-between; margin-left: -5.6vw; margin-right: -5.6vw;}
.reverse .contentimg { flex-direction: row-reverse;}
.contentimg .mainimg { width: 74%;}
.contentimg .contentsub { width: 24%;}
.toplink li a {  flex-direction: row; justify-content: space-between; text-align: left;}
.toplink li.wide { font-size: 1.6rem; background-image: none;}

#title h1 { min-width: initial; padding: 16px 32px; font-size: 4vw; white-space: nowrap;}

#sns_sp { width: 100%;  padding: 20px; margin: 0 auto; text-align: center; background-color: #F1FFDD;}
#sns_sp img { margin:0 15px; width:40px;}

#spo_sp { width: 100%;  padding: 20px; margin: 0 auto; text-align: center; background-color: #F1FFDD; border-top:solid 1px #247000; border-bottom:solid 1px #247000; font-size: 24px;}
#spo_sp img { margin:0 15px; width:40px;}
}




@media print {
#container { width: 1024px;}
}