@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body{line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block; }
ul{list-style:none;}
blockquote, q{quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none; }
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
img{vertical-align:top; font-size:0; line-height:0; }
ins{background-color:#ff9; color:#000; text-decoration:none; }
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del{text-decoration:line-through; }
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help; }
table{border-collapse:collapse; border-spacing:0; }
em{font-style:normal; }
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select{vertical-align:middle;}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{display:block;}
*,:before,:after{box-sizing:border-box;-webkit-text-size-adjust:100%;}

.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}

/* ==========================
  初期設定
========================== */
html{font-size:62.5%;}
body{font-size:15px; font-size:1.5rem; font-family:'Noto Sans JP',system-ui, "Hiragino Sans", "YuGothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Gothic",sans-serif; letter-spacing:0.05em; line-height:1.6; text-align:center; background:#fff; -webkit-text-size-adjust:100%; color:#000; max-height: 100%; box-sizing:content-box; margin:0;}
img {width:100%; max-width:100%; height:auto;}
a{color:#fff; text-decoration:none; opacity: 1; transition: 0.5s; -webkit-transition:0.5s; text-decoration:none;}
@font-face {font-family: 'imft'; src:  url('./fonts/imft.eot?34v8mo'); src:  url('./fonts/imft.eot?34v8mo#iefix') format('embedded-opentype'), url('./fonts/imft.ttf?34v8mo') format('truetype'), url('./fonts/imft.woff?34v8mo') format('woff'), url('./fonts/imft.svg?34v8mo#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block;}
[class^="icon-"], [class*=" icon-"],header nav .navifirst input ~ label::before,footer nav .navifooter input ~ label::before,h3:after{font-family: 'imft' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.icon-menu:before{content: "\e902";}
.active .icon-menu:before{content: "\e901";}
.icon-add:before{content: "\e900";}
.icon-close:before{content: "\e901";}

.box{position:relative; max-width:1100px; margin:0 auto;}

header{position:relative; width:100%; top:0; left:0; right:0; height:55px; background: #000; text-align:center; z-index:10;}

header a:hover{opacity: 0.7; transition: 0.5s; -webkit-transition:0.5s;}
header h1{position:relative; margin:0 auto; padding:10px 0 8px 0; width:15%; max-width:45px; z-index:999999; }
header h1 a{display:block;}

header #menubox{position:absolute; top:0; right:20px; padding:0; background:transparent; z-index:999999; font-size:3rem;}

header #navbox-pc{display:none;}

header nav{position:fixed; display:none; top:0; padding-top:60px; overflow-y:auto; background:rgba(0, 0, 0, 0.8); width:100%; height:100%; z-index:9999; font-size:15px; font-size:1.5rem; color:#fff; letter-spacing:0.1rem;}
header nav #navbox{padding:20px; max-height:initial;}
header nav li{position:relative;}
header nav li a.active{color:#fff;}
header nav .nav{margin:20% 0 0 0;}
header nav .nav a{display: block; z-index: 1; text-decoration:none; }
header nav .nav a{display:block; padding: 0.5em 0; color: #fff;}

header nav .navifirst {margin:10px 0 20px 0;}
header nav .navifirst ul a {display: block; padding:4px 10px; line-height:1.6;}
header nav .navifirst label,.navi-first-03 a{display: block; position: relative; margin: 0 0 2px 0; padding:0 0 12px 0; line-height: 1; border-bottom:1px solid rgba(199,199,199,1) !important; cursor: pointer; text-align: left; font-family: 'Montserrat', sans-serif; font-size:24px; font-size:2.4rem; font-weight:700;}
header nav .navifirst input {display: none;}
header nav .navifirst ul {margin:0 0 0 0; padding:10px 0; list-style: none; text-align:left;}
header nav .navifirst li {position:relative; overflow-y:hidden; max-height: 0; transition: all 0.5s; box-sizing:border-box; font-weight:300;}

header nav .navifirst input ~ label::before{position: absolute; content: '\e900 '; right: 0.5em; top: 0%; font-weight:300;}
header nav .navifirst input.first-1-btn:checked ~ label.first-01::before{content: '\e901 ';}
header nav #navi-first-01:checked ~ #link1 li:first-child{padding-top:10px;}
header nav #navi-first-01:checked ~ #link1 li:last-child{padding-bottom:100px;}
header nav #navi-first-01:checked ~ #link1 li{ max-height: 46px; opacity: 1;}
header nav .navifirst input.first-2-btn:checked ~ label.first-02::before{content: '\e901 ';}
header nav #navi-first-02:checked ~ #link2 li:first-child{padding-top:10px;}
header nav #navi-first-02:checked ~ #link2 li:last-child{padding-bottom:100px;}
header nav #navi-first-02:checked ~ #link2 li{ max-height: 46px; opacity: 1;}
header nav .navi-first-03{margin-bottom:24px;}
header nav .navifirst input.first-4-btn:checked ~ label.first-04::before{content: '\e901 ';}
header nav #navi-first-04:checked ~ #link4 li:first-child{padding-top:10px;}
header nav #navi-first-04:checked ~ #link4 li:last-child{padding-bottom:100px;}
header nav #navi-first-04:checked ~ #link4 li{ max-height: 46px; opacity: 1;}

header nav .navisecond .navi-second-01 a{display:block; margin-bottom:12px; padding:8px; background:#999; color:#000; font-weight:700; font-size:17px; font-size:1.7rem; border-radius:25px;}
header nav .navisecond .navi-second-01 .close a{border:1px solid #999; background:none; color:#fff;}

.navsns{display:flex; margin-top:32px; justify-content:center; gap:21px;}
.navsns img{height:20px; width:auto;}

@media only screen and (min-width:340px) {
header nav .navifirst {margin:30px 0;}
}

@media only screen and (min-width:740px) {
header #navbox-pc{position:absolute; top:20px; right:80px; display:block;}
header #navbox-pc .navsns{margin:0;}
header #navbox-pc li{height:20px; line-height:20px; font-family: 'Montserrat', sans-serif; font-size:17px; font-size:1.7rem;}
header h1{margin:0; padding:12px 0 0 20px; width:20%; max-width:235px;}
header nav{padding-top:30px;}
header nav .navifirst ul a {line-height:2.3;}
header #menubox{top:4px;}
header nav #navbox{display:flex; gap:30px; margin-top:70px; max-width:982px;}
header nav .navifirst{width:60%; margin:0;}
header nav .navisecond{width:35%; margin-top:20px;}
header nav .navifirst label,.navi-first-03 a{margin-top:20px; font-size:40px; font-size:4rem;}
header nav .navifirst li{font-size:16px; font-size:1.6rem;}
header nav .navifirst input ~ label::before{font-size:24px; font-size:2.4rem; font-weight:300; margin-top:8px;}
header nav .navi-first-03{margin-bottom:50px;}
}
@media only screen and (min-width:1200px) {
header .box{max-width:100%;}
header .box{display:flex;}
header h1{width:27%; max-width:100%; z-index:1;}
header h1 a{max-width:280px; margin:0 0 0 auto;}
header h1 a img{max-width:235px;}
}

footer{position:relative; background:#000; text-align: center; padding: 30px;}
footer .navsns{margin:20px auto;}
footer a:hover{opacity: 0.7; transition: 0.5s; -webkit-transition:0.5s;}

footer nav .navifooter{padding-top:30px;}
footer nav .navifooter label,.navi-footer-04 a{display: block; position: relative; margin: 20px 0 2px 0; padding:0 0 12px 0; line-height: 1; cursor: pointer; text-align: left; font-size:17px; font-size:1.7rem; font-weight:700; color:#fff;}
footer nav .navifooter input {display: none;}
footer nav .navifooter ul {margin:0 0 0 0; padding:0; list-style: none; text-align:left;}
footer nav .navifooter li {position:relative; overflow-y:hidden; max-height: 0; transition: all 0.5s; box-sizing:border-box; font-weight:300;}

footer nav .navifooter input ~ label::before{position: absolute; content: '\e900 '; right: 0.5em; top: 0%; font-weight:300;}
footer nav .navifooter input.footer-1-btn:checked ~ label.footer-01::before{content: '\e901 ';}
footer nav #navi-footer-01:checked ~ #link1 li:first-child{padding-top:10px;}
footer nav #navi-footer-01:checked ~ #link1 li:last-child{padding-bottom:40px;}
footer nav #navi-footer-01:checked ~ #link1 li{ max-height: 46px; opacity: 1;}
footer nav .navifooter input.footer-2-btn:checked ~ label.footer-02::before{content: '\e901 ';}
footer nav #navi-footer-02:checked ~ #link2 li:first-child{padding-top:10px;}
footer nav #navi-footer-02:checked ~ #link2 li:last-child{padding-bottom:40px;}
footer nav #navi-footer-02:checked ~ #link2 li{ max-height: 46px; opacity: 1;}
footer nav .navifooter input.footer-3-btn:checked ~ label.footer-03::before{content: '\e901 ';}
footer nav #navi-footer-03:checked ~ #link3 li:first-child{padding-top:10px;}
footer nav #navi-footer-03:checked ~ #link3 li:last-child{padding-bottom:40px;}
footer nav #navi-footer-03:checked ~ #link3 li{ max-height: 46px; opacity: 1;}
footer .navsns{padding:0 40px; justify-content:space-between;}

footer #copyright{margin-top:30px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-size: 1.3rem; color: #fff;}

@media only screen and (min-width:740px) {
footer{ z-index:3;}
footer nav .navifooter{display:flex; justify-content:center; gap:20px; padding-top:0; letter-spacing:0;}
footer nav .navifooter .navifooterbox{flex-grow: 1;}
footer nav .navifooter label,.navi-footer-04 a{font-size:15px; font-size:1.5rem;}
.navi-footer-04.last a{padding-top:8px;}
footer nav .navifooter li{overflow-y:initial; max-height:inherit; font-size:14px; font-size:1.4rem;}
footer nav .navifooter input ~ label::before{display:none;}
footer .navsns{padding:0; justify-content:center; gap:0 30px;}
}


/*TOP PAGE*/
#pagetop {position:fixed; width:40px; height:40px; bottom:20px; right:10px;}
#pagetop a {width:40px; height:40px;}

.fadeInLeftTr,.fadeInUpTr{opacity: 0;}
.fadeInLeft{animation-name:fadeInLeftAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
.fadeInUp{animation-name:fadeInUpAnime; animation-duration:2s;animation-fill-mode:forwards; opacity:0;}
@keyframes fadeInLeftAnime{
from {opacity: 0; transform: translateX(-30px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInUpAnime{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}

/*accordion navi*/
.accordion nav.acc{transition: .4s; transform: translatex(-1000px);}
.accordion.active nav.acc{transform: translatex(0);}
.accordion nav.acc ul{height:0; transition: all .3s;}
.accordion nav.acc ul li{line-height:1.2; margin-bottom:16px; font-size:clamp(1.4rem, 1.255rem + 0.73vw, 1.8rem); letter-spacing:0;}
.accordion.active nav.acc ul{margin:0 0 0 20px; height:auto; display:block;}
.accordion{position: relative; color: #000;}
.accordion::after{content: ""; position: absolute; top: 25px; right: 20px; width: 0; height: 0; border: 6px solid transparent; border-top-color: #000;}
.accordion.active::after{content: ""; position: absolute; top:20px; border: 6px solid transparent; border-bottom-color: #000;}
@media only screen and (min-width:740px) {
.accordion{color: #fff;}
.accordion::after{border-top-color: #fff;}
.accordion.active::after{border-bottom-color: #fff;}
}