@charset "UTF-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%;}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

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

html{font-size:62.5%;}
body{font-size:16px; font-size:1.6rem; font-family:'Noto Sans JP',system-ui, "Hiragino Sans", "YuGothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Gothic",sans-serif; letter-spacing:0.1rem; line-height:1.6; text-align:center; background:#fff; -webkit-text-size-adjust:100%; color:#000; max-height: 100%; box-sizing:border-box; margin:0;}
.en{font-family: 'Oswald', sans-serif;}

img {width:100%; max-width:100%; height:auto;}
img[src$=".svg"] {width: 100%;}



/*Layout*/
a{color:#000; text-decoration:none; opacity: 1; transition: 0.5s; -webkit-transition:0.5s; text-decoration:none;}
a:hover{opacity: 0.6; transition: 0.5s; -webkit-transition:0.5s;}

#wrapper{font-size:16px; font-size:1.6rem;}
.box{position:relative; max-width:1090px; padding:0 20px;}
@media only screen and (min-width:1040px) {
.box{margin:0 auto; padding:0;}
}

/*fade in*/
.fadeUpTrigger,fadeDownTrigger,fadeLeftTrigger,fadeRightTrigger{opacity: 0;}
.fadeUp{animation-name:fadeUpAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{
from {opacity: 0; transform: translateY(100px);}
to {opacity: 1; transform: translateY(0);}
}

.fadeDown{animation-name:fadeDownAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeDownAnime{
from {opacity: 0; transform: translateY(-100px);}
to {opacity: 1; transform: translateY(0);}
}

.fadeLeft{animation-name:fadeLeftAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeLeftAnime{
from {opacity: 0; transform: translateX(-100px);}
to {opacity: 1; transform: translateX(0);}
}

.fadeRight{animation-name:fadeRightAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeRightAnime{
from {opacity: 0; transform: translateX(100px);}
to {opacity: 1; transform: translateX(0);}
}

/* HEADER */
header{position:relative; padding-bottom:16px; border-bottom:3px solid #00758e;}
#headerbox{margin:20px 0 0 0;}
h1{max-width:200px; margin-left:16px;}

#navi #menubox{position: absolute; height:40px; width:40px; right:16px; top:0px; background:#fff; z-index:99999;}
#navi .menu{position:relative; display:block; margin:10px auto; height: 25px; width: 25px; cursor:pointer;}
#navi .menu__line{background:#00758e; display: block; height: 2px; position: absolute; transition:transform .3s; width: 100%;}
#navi .menu__line--center{top: 9px;}
#navi .menu__line--bottom{bottom: 4px;}
#navi #menubox.active{right:40px; background:#fff;}
#navi #menubox.active .menu__line--top{ top: 8px; transform: rotate(45deg);}
#navi #menubox.active .menu__line--center{ transform:scaleX(0);}
#navi #menubox.active .menu__line--bottom{ bottom: 15px; transform: rotate(135deg);}
#navi #menubox.active .menu__line--top,#navi #menubox.active .menu__line--center,#navi #menubox.active .menu__line--bottom{background:#00758e;}


#navi nav{position: fixed; display: none; top:0; background:rgba(255,255,255, 0.9); width: 100%; height: 100%; z-index: 999; text-align:center;}
#navi nav ul{padding:60px 0 0;}
#navi nav #navbox{overflow-y:auto; height:100%; box-sizing: border-box; padding-bottom:16px;}
#navi nav li a{display:block; padding:8px 0 0 0; text-decoration:none; font-size:17px; font-size:1.7rem; letter-spacing:2px;}
#navi nav li a{color:#000; font-weight:500;}
#navi nav li a.active{color:#fff;}

#navi nav li.mailmag{margin-bottom:20px;}
#navi nav li.icon{height:20px; width:auto; display:inline-block; vertical-align:bottom; margin:0 15px;}
#navi nav li.icon img{height:30px; width:auto;}

#navi.fixed{position:fixed; width:60px; top: 0; right: 0; height:50px; z-index:1;}
#navi.fixed nav #navbox{overflow-y:initial; height:auto;}

@media only screen and (min-width:840px) {
header{padding-bottom:0;}
h1{padding-top:10px; max-width:280px;}
#headerbox{position:relative; margin:0 auto;}
#navi #menubox{display:none;}
#navi{max-width:1090px; padding:10px 20px;}
#navi nav{position:inherit; display:block; background:none; margin:0 auto; height:auto; z-index: 999; text-align:center;}
#navi nav #navbox{overflow-y:hidden; height:auto; padding-bottom:0;}
#navi nav ul{display:flex; align-items:baseline;; justify-content: space-between; padding:0 0 0;}
#navi nav ul li{flex-basis: auto; font-size:15px; font-size:1.5rem;}
#navi nav ul li a{font-size:16px; font-size:1.6rem; margin:0;}
#navi nav ul li.mailmag{position:absolute; top:0; right:20px; background:#000; color:#fff;}
#navi nav ul li.mailmag a{display:block; padding:8px 12px; color:#fff;}
#navi nav li.icon{margin:0;}
#navi nav li.icon img{height:20px; width:auto; margin-top:3px;}
}

@media only screen and (min-width:1090px) {
h1{margin-left:0;}
#headerbox{max-width:1090px; margin:0 auto; padding:10px 0;}
#navi{max-width:1090px; margin:10px auto 0 auto; padding:0}
}

#pankuzu{display:none;}
@media only screen and (min-width:640px) {
#pankuzu{display:block; max-width:1090px; margin:10px auto; padding:0 20px; text-align:left; font-size:12px; font-size:1.2rem;}
#pankuzu li{display:inline-block; padding-right:4px; font-weight:100;}
#pankuzu li:after{content:"»"; padding-left:4px;}
#pankuzu li:last-child:after{content:" ";}
}
@media only screen and (min-width:1090px) {
#pankuzu{padding:0;}
}

h2{margin-bottom:16px; text-align:left; color:#00758e; font-size:16px; font-size:1.8rem;}
h2 .icon{display:inline-block; padding-right:6px;  width:24px; height:24px; vertical-align:middle;}

h3{margin-bottom:16px; padding:0 8px; border-left:6px solid #000; font-size:21px; font-size:2.1rem; text-align:left; line-height:1;}



footer{margin:30px 0 20px 0; padding:20px 0 30px 0; border-top:2px solid #000; font-size:11px; font-size:1.1rem; font-weight:200;}

/*TOP PAGE*/
#pagetop {position:fixed; bottom:0; right:10px;}
#pagetop a {background:#00758e; text-decoration: none; color: #fff;  padding:11px; text-align: center; display: block; font-size:13px; font-size:1.3rem;}
#pagetop a img{max-width:20px;}
#pagetop a:hover {text-decoration: none; background: #00758e;}