@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%; max-height: 100%;}

.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;}

ul.disc{margin-lefT:30px; list-style:disc; text-align:left;}

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;}