@charset "utf-8";
.bk-color, footer #fback span::before{ animation: bk-color 120.0s ease-in infinite forwards;}
@media screen and (max-width: 800px) {header .header-inner nav ul li#gnav-Contact > .a{ animation: bk-color 120.0s ease-in infinite forwards;}}
@keyframes bk-color{
0% { background:#fff600;}
12% { background:#fff600;}
17% { background:#9a17ff;}
29% { background:#9a17ff;}
34% { background:#1aa3b4;}
46% { background:#1aa3b4;}
51% { background:#ffa200;}
63% { background:#ffa200;}
68% { background:#35a650;}
80% { background:#35a650;}
85% { background:#ff5757;}
95% { background:#ff5757;}
100% { background:#fff600;}
}
.txt-color{ animation: txt-color 120.0s ease-in infinite forwards;}
@keyframes txt-color{
0% { color:#dac516;}
12% { color:#dac516;}
17% { color:#9101ff;}
29% { color:#9101ff;}
34% { color:#01a4b8;}
46% { color:#01a4b8;}
51% { color:#ffa200;}
63% { color:#ffa200;}
68% { color:#299744;}
80% { color:#299744;}
85% { color:#ff5757;}
95% { color:#ff5757;}
100% { color:#dac516;}
}
/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html {-webkit-text-size-adjust: 100%; /* 2 */-ms-text-size-adjust: 100%; }
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;	list-style:none; vertical-align:middle;	background:transparent; }
body { line-height:1; z-index: 1;}
img {border-style: none;} 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
nav ul, ul, li { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
*{box-sizing: border-box;}
table{border-collapse: collapse ;}
td{ position: relative;}
/*===================
 LINK
=====================*/
a, a *, a:hover, a:hover * { -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
a { text-decoration: none; color: #3367d6;}
a:hover{ text-decoration: none; color: #3367d6;}
/*===================
 FONT
=====================*/
*{ color:#111; letter-spacing: 1.0px; font-family:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; font-weight:300;}
.en, 
.en span{font-family: 'Josefin Sans', sans-serif;}
h1 { font-weight:400; font-size:20px; line-height:1.3em;}
h2,h3,h4,h5,h6 { font-weight:400; font-size:16px; line-height:1.3em;}
p,li,dt,dl,span,td { font-size:16px; line-height:1.6em;}
b, .b{font-weight: bold;}
img{ max-width: 100%; width: 100%; height: auto;}
.word-keep{ word-break: keep-all;}
/*===================
 共通
=====================*/
.block{ display: block;}
.inline-block{ display: inline-block;}
.flex{ display: flex;}
.flex-row{ display: flex; flex-direction: row; align-items: center;}
.flex-column{ display: flex; flex-direction: column;}
.flex-space-between{ justify-content: space-between !important;}
.center{ text-align: center !important; justify-content: center !important;}
/*=====================================
	CONTENTS
=======================================*/
html, body { width: 100%; max-width:100%; overflow-x:hidden; overflow-y:visible; position: relative;}
footer, section, .section, main{ width: 100%; display: block; position: relative; z-index: 2;}
.wrap{ width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 9;}
.wrap-block{ width: 100%; display: block; position: relative; z-index: 9;}
.inner{ width: 96%; max-width: 1100px; display: block; position: relative; z-index: 10;}
.inner-column{ width: 96%; max-width: 1100px; display: flex; flex-direction: column; position: relative; z-index: 10;}
.inner-row{ width: 96%; max-width: 1100px; display: flex; flex-direction: row; align-items: flex-start; position: relative; z-index: 10;}
/*==============================================
  cursor
================================================*/
@media screen and (max-width: 800px) {
#cursor, #cursor *{ display: none;}
}
#cursor{ opacity: 1; z-index: 10000001000000; position: fixed; pointer-events: none;}
#cursor div{ width:10px; height:10px; position: absolute; left: 0%; top: 0%; pointer-events: none;  border-radius: 100%; margin: -5px 0 0 -5px; background: #000;}
#cursor div::after{ width:10px; height:10px; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin: 30px 0 0 30px; pointer-events: none; content: ""; -webkit-transition:0.0s ease-in; -moz-transition: 0.2s ease-in; -o-transition:0.2s ease-in; transition: 0.2s ease-in; opacity: 0; mix-blend-mode: hard-light; }
#cursor div.act::after{ opacity: 1; width:60px; height:60px; margin: 0;}
#cursor div.act, 
#cursor div.actF{ background: none}
#cursor.act{ display: block; border-radius: 100%; margin: -30px 0 0 -30px; mix-blend-mode: hard-light;}
#cursor div.act .l1{ border: solid 1px #444; width: 60px; height: 60px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursorAct 1.2s ease-in infinite forwards; }
@keyframes cursorAct{
0%{transform:scale(1,1); opacity: 1;}
100%{transform:scale(1.4,1.4); opacity: 0;}
}
/* hover:円形 */
#cursor div.actF{ width: 140px !important; height: 140px !important; background: none;}
#cursor.actF{ display: block; border-radius: 100%; margin: -70px 0 0 -70px; mix-blend-mode: difference;}
#cursor div.actF::after{ opacity: 0.8; width: 140px; height: 140px; margin: 0; margin: -65px 0 0 -65px; mix-blend-mode: hard-light;}
#cursor div.actF .l1{ border: solid 1px #fff; width: 140px; height: 140px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursoractF 1.2s ease-in infinite forwards; }
@keyframes cursoractF{
0%{transform:scale(1,1); opacity: 1;}
100%{transform:scale(0.4,0.4); opacity: 0;}
}

/*=====================================
	CONTENTS
=======================================*/
#info{ padding: 40px 0;} 
#info h2{ display: flex; justify-content: center; margin-bottom: -25px; position: relative; z-index: 10;}
#info h2 span{ padding: 4px 40px; background: #444; font-size: 24px; color: #fff; border-radius: 12px;}
/**/
#info .inner{ display: block; padding:40px 40px 20px; border: solid 3px #444; border-radius: 6px; margin-bottom: 60px; position: relative; z-index: 1;}
/**/
#info .oubo-info .item{ width: 100%; display: flex; flex-direction: column; padding: 20px 0; border-bottom: solid 1px #aaa;}
#info .oubo-info .item:last-child{ border-bottom: none;}
#info .oubo-info .item p{ display: flex; align-items: center;}
#info .oubo-info .item p a{ text-decoration: underline; color:#00AAD5;}
#info .oubo-info .item p a:hover{ text-decoration: none; color:#000;}
#info .oubo-info .item p img{ width: 140px; margin: 0 40px 0 10vw;}
#info .oubo-info .item p span{ flex: 1; margin-right: 60px; font-size: 20px;}
#info .oubo-info .item p.snsLinks{ padding: 0 5%;}
#info .oubo-info .item p.snsLinks a{ display: flex; justify-content: center; align-items: center; background: #00AAD5; color: #fff; border-radius: 4px; margin: 10px 30px; width: 44%; height:40px; border: solid 2px #00AAD5; text-decoration: none;}
#info .oubo-info .item p.snsLinks a:hover{ color:#00AAD5; background: #fff;}
@media screen and (max-width: 900px) {
#info .oubo-info .item p img{ width: 120px; margin: 0 30px 0 4vw;}
#info .oubo-info .item p span{ margin-right: 20px; font-size: 18px;}
#info .oubo-info .item p.snsLinks{ padding: 0;}
}
@media screen and (max-width: 600px) {
#info .inner{ padding:20px 20px 10px;}
#info h2 span{ font-size: 5.4vw;}
#info .oubo-info .item p img{ width: 100px; margin: 0 20px ;}
#info .oubo-info .item p span{ font-size: 16px;}
#info .oubo-info .item p.snsLinks{ flex-direction: column; }
#info .oubo-info .item p.snsLinks a{ width: 100%; margin: 5px 0;}
}



/**/
#info .cp-info{}
#info .cp-info *{ font-size: 16px; line-height: 1.6em;}
#info .cp-info > div{ display: flex; flex-direction: row; margin: 10px 0; padding: 10px 0; align-items: flex-start;}
#info .cp-info > div > *{ }
#info .cp-info > div h3 { width: 150px; margin-right: 20px; display: block; justify-content: flex-start; align-content: flex-start; align-items: flex-start; font-size:14px; font-weight: bold; padding: 4px 0px; background: #ddd; border-radius: 4px; text-align: center; line-height: 1.2em;}
#info .cp-info > div p{flex: 1;}
#info .cp-info > div ol{ flex: 1; margin-left:8px;}
#info .cp-info > div ol li{ display: list-item; margin-left: 1.2em; list-style: decimal !important; margin-bottom: 10px;}
#info .cp-info > div ul{flex: 1;}
#info .cp-info > div ul li{ margin-bottom: 10px; display: list-item; line-height: 1.2em;}
#info .cp-info > div ul.dotlist{ margin-left: 20px;}
#info .cp-info > div ul.dotlist li{ display: list-item; list-style:disc !important;}
#info .cp-info > div div{flex: 1;}
#info .cp-info > div div *{ font-size: 94%;}
#info .cp-info > div div > *{ margin-bottom: 20px;}
@media screen and (max-width: 750px) {
#info .cp-info > div{ flex-direction: column; border-bottom: dotted 1px #ccc; margin: 6px 0; padding: 6px 0;}
#info .cp-info > div:last-child{ border-bottom: none;}
#info .cp-info > div h3 { margin-bottom: 6px;}
}


/*=====================================
	end
=======================================*/
#end { padding: 20px;}
#end .inner-row { letter-spacing: 0; color: #777; justify-content: center; flex-wrap: wrap; text-align: center;}
#end * { font-size: 10px;}
#end .inner-row br{ display: none;}
#end .inner-row a{text-decoration: underline; letter-spacing: 1px; color:#00AAD5; margin: 0 10px;}
#end .inner-row a:hover{ color: #111;}
@media screen and (max-width: 650px) {
#end .inner-row span{ width: 100%; margin-top: 10px; display: block;}

}




/*===================
 pageTop
=====================*/
.pageTop{opacity:0; filter: alpha(opacity=0); -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; bottom: -70px;}
.fix-hd .pageTop{opacity:1; filter: alpha(opacity=100); bottom: 10px; }

.pageTop *{-webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.pageTop a span::before{-webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;}

.pageTop{ width: 80px; height: 80px; position: fixed; right: 10px; z-index: 10000000000000000000011111;}
.pageTop a{ width: 80px; line-height: 70px; padding-top: 10px; text-align: center; display: block; border-radius: 100%; box-shadow: 0 0 0 1px #000 inset; position: relative; color: #000;}
.pageTop a span{ color: #000; text-decoration: none;}
.pageTop a span::before{ width: 30px; position: absolute; left: 50%; top: 12px; margin-left: -15px; text-align: center; display: block; content: "▲"; color: #000;}
.pageTop a:hover{box-shadow: 0 0 0 6px #eee inset;}
.pageTop a:hover span::before{ top: 8px;}

@media screen and (max-width: 500px) {
.pageTop{ right: 10px; }
.fix-hd .pageTop{ bottom: 20px; }
.pageTop{ width: 60px; height: 60px;}
.pageTop a{ width: 60px; line-height: 50px;}
.pageTop a span::before{ top: 6px;}
.pageTop a:hover span::before{ top: 0px;}
}