@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, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1.8}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block}
ul, ol {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
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 #000;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:30px 0 50px;padding:0}
input, select {vertical-align:middle}

/*========================================
BASIC
=======================================*/
html{-webkit-text-size-adjust:100%}
body{color:#292929; font-size:16px;font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;line-height:1.6;background:url("../img/bg.jpg") repeat;}

html, body {height: 100%;}
img {line-height: 1;}
p {margin: 0 0 15px;word-wrap: break-word;}
.Hv {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
.Hv:hover {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
.HvOc {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;opacity:1 !important;}
.HvOc:hover {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s; opacity:0.5 !important;}


/*========================================
Loading
=======================================*/
#loader-bg {display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background:url("../img/bg.jpg") repeat; z-index: 1;}
#loader { display: none; position: fixed; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -100px; margin-left: -50px; text-align: center; color: #fff;z-index: 2;}


/*========================================
TEXT & TEXTAREA
=======================================*/
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea {width:94%;border:none;background:#FFF;margin:0 0 3%;padding:2%;}

/*========================================
RADIO
=======================================*/
.radio-input{display: none;}
.radio-input + label{padding-left: 20px; position:relative; margin-right: 20px;}
.radio-input + label::before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border: 1px solid #999; border-radius: 50%;}
.radio-input:checked + label{color: #009a9a;}
.radio-input:checked + label::after{ content: ""; display: block; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; background: #009a9a; border-radius: 50%;}
/*========================================
CHECKBOX
=======================================*/
.checkbox-input{display: none;}
.checkbox-parts{padding-left: 20px; position:relative; margin-right: 20px;}
.checkbox-parts::before{content: ""; display: block; position: absolute; top: 2px; left: 0; width: 15px; height: 15px; border: 1px solid #999; border-radius: 4px;}
.checkbox-input:checked + .checkbox-parts{color: #009a9a;}
.checkbox-input:checked + .checkbox-parts::after{content: ""; display: block; position: absolute; top: -3px; left: 5px; width: 7px; height: 14px; transform: rotate(40deg); border-bottom: 3px solid #009a9a; border-right: 3px solid #009a9a;}
.select-wrap {position: relative;}
.select-wrap:before {z-index: 1; position: absolute; right: 15px; top: 0; content: "\f123";font-family: "IonIcons"; line-height: 43px; color: #7F878C;pointer-events: none;}

/*========================================
SELECT
=======================================*/
select{ outline:none; text-indent: 0.01px; text-overflow: ''; background: none transparent; vertical-align: middle; font-size: inherit; appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 40px; padding: 8px 12px; border:1px solid #ddd; width:100%; border-radius:3px;}
select option{background-color: #fff; color: #333;}
select::-ms-expand {display: none;}
select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #828c9a;}
.select-wrap.select-primary:before{color:#fff;}
.select-wrap.select-primary > select{background:#0084B4; color:#fff; border-color:#0084B4;}
.select-wrap.select-primary > select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #fff;}
.select-wrap.select-inverse:before{color:#fff;}
.select-wrap.select-inverse > select{color:#fff; border-color: #fff;}
.select-wrap.select-inverse > select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #fff;}



/*========================================
 COMMON STYLE
=======================================*/
a{color:#292929;text-decoration:none;}
a:hover{color:#292929;}
.PCNone {display:none;}
.TABNone {display:inline;}
.SPNone {display:inline;}
.red, .fc-red {color:#FF0000;}
.txt-l {text-align: left;}
.txt-r {text-align: right;}
.txt-c {text-align: center;}
.midNote {margin-bottom: 30px;}
.fs-80 {font-size:80%;}
.fs-120 {font-size:120%;}
.fs-140 {font-size:140%;}
.fs-160 {font-size:160%;}
.fs-180 {font-size:180%;}
.fs-200 {font-size:200%;}
.bold, .Bold {font-weight: bold;}
/* responsive view */
.spView{display:none;}
/* other */
.clearfix:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden}
.clearfix{display: inline-block;} 
* html .clearfix{height: 1%;}
.clearfix{display:block;}
body.indexPage {height: 100%;}
/* section */
section{margin:0 0 15px;}
h1, h2 {font-weight: normal;letter-spacing: 1px;}
/*========================================
HEADER
=======================================*/
#top {position:relative; top: -100px;}
nav {width: 100%;padding:10px 0; /*background:rgba(255,255,255,.80);*/background: url(../img/bg.jpg) repeat;font-size: 14px; font-family: 'Roboto', sans-serif; position:fixed; top:0; z-index:1000;overflow: hidden;}
nav.notFixed {position: relative;background:url("../img/bg.jpg") repeat;}
nav .cnt {min-width: 950px; max-width: 96%;margin:0 auto;}
nav .cnt .logo {float:left;display:inline-block; /*width:99px;*/ width: 80px; line-height: 1;}
nav .cnt .logoTypo {float:left;display:inline-block; width:80px;line-height: 1;}
nav .cnt .logo img, nav .cnt .logoTypo img { width:100%; height:auto;}
nav .cnt ul{float:right;display:inline-block; margin-top:30px;}
nav .cnt ul li { float:left;color:#fff; text-align:left; margin-right:20px; letter-spacing:1px;}
nav .cnt ul li:last-child{margin-right: 0;}
nav a {color: #030000; text-decoration:none;-webkit-transition: 0.3s ease; transition: 0.3s ease;}
nav a:hover {color: #4496aa;-webkit-transition: 0.3s ease; transition: 0.3s ease;}
.eyecatch{width: 100%;line-height: 0;margin-top: -100px;}

/* nav_upper */
.nav_upper {position: fixed;top: -600px;left: 0;}
.nav_upper .cnt ul {float: right;display: inline-block;margin-top:20px;}
body.is-fixed .nav_upper{position: fixed;top: 0;left: 0;width: 100%;z-index:200;display: block;animation-name: slideDown;animation-timing-function: ease-in;animation-iteration-count: 1;animation-delay: 0s;transform-origin: 50% 50% 0;animation-duration: .1s;}
@keyframes slideDown {
  0% {top: -56px;}
  100% {top: 0;}
}


/*========================================
FOOTER
=======================================*/
#backToTop{ position: fixed; bottom: 10px; right: 20px; width: 80px; height: 80px; cursor: pointer}
#backToTop img {width: 100%; height: auto;}
footer{width: 100%; font-size:12px;overflow: hidden;font-family: 'Roboto', sans-serif;}
footer .Cnt{min-width: 990px; max-width: 96%;margin:2% auto 1%; overflow:hidden;}
footer .copyright {width: 100%; text-align: center;letter-spacing: 1px;}
footer .copyright a {}
footer .copyright a:hover {text-decoration:underline;}



/*========================================
CONTENTS
=======================================*/
#wrapper{width: 100%;margin: 0 auto;}

/* Intro */
#Intro {position: relative;width: 100%;height: 100%;}
#Intro h1 {position: absolute;top: 50%;left: 50%;z-index: 2;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;white-space: nowrap;width: 311px; height:45px; line-height: 1;}
a.scrollDown {padding-top: 60px;}
a.scrollDown span {position: absolute;bottom: 10%;;left: 50%;width: 46px;height: 46px;margin-left: -23px;border: 1px solid #000;border-radius: 100%;box-sizing: border-box;}
a.scrollDown span::after {position: absolute;top: 50%;left: 50%;content: '';width: 16px;height: 16px;margin: -12px 0 0 -8px;border-left: 1px solid #000;border-bottom: 1px solid #000;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);box-sizing: border-box;}
a.scrollDown span::before {position: absolute;top: 0;left: 0;z-index: -1;content: '';width: 44px;height: 44px;box-shadow: 0 0 0 0 rgba(255,255,255,.1);border-radius: 100%;opacity: 0;-webkit-animation: sdb 3s infinite;animation: sdb 3s infinite;box-sizing: border-box;}
@-webkit-keyframes sdb {
  0% {opacity: 0;}
  30% {opacity: 1;}
  60% {box-shadow: 0 0 0 60px rgba(255,255,255,.1);opacity: 0;}
  100% {opacity: 0;}
}
@keyframes sdb {
  0% {opacity: 0;}
  30% {opacity: 1;}
  60% {box-shadow: 0 0 0 60px rgba(255,255,255,.1);opacity: 0;}
  100% {opacity: 0;}
}

/* Works */
#Works {padding: 100px 0; width: 100%;}
#Works.Sec{padding: 150px 0 80px; width: 100%;}
#Works .Cnt {min-width: 990px; max-width:98%;margin: 0 auto;}
#Works .Cnt h2 {text-align: center; font-size: 26px; color:#292929;margin-bottom: 60px;}
#Works .Cnt h2 span {border-bottom: 1px solid #292929; padding-bottom: 6px;font-family: 'Roboto', sans-serif;}
#Works .Cnt ul {overflow: hidden;}
#Works .Cnt ul li{width: 23%;float: left;margin: 0 1% 2%;position: relative;}
#Works .Cnt ul li .target {opacity: 1 !important;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
#Works .Cnt ul li .target:hover {opacity: 1 !important;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}

#Works .Cnt ul li .title {position: absolute;top:2%; left: 2%;font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.2;z-index: 2;}
#Works .Cnt ul li .title .detTitle {font-size: 80%;display: block;}
#Works .Cnt ul li .title .role {font-size: 70%;display: block;}
#Works .Cnt ul li .title.white {color: #fff;}
#Works .Cnt ul li .title.black {color: #000;}

#Works .Cnt ul li .target .title {font-weight: normal;font-family: 'Roboto', sans-serif; letter-spacing: 1px; opacity: 0.0 !important;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;text-shadow:1px 1px 2px rgba(0,0,0,.30);}
#Works .Cnt ul li .target:hover .title {opacity: 1 !important;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}

#Works .Cnt ul li .mask {position:absolute;z-index: 1;}
#Works .Cnt ul li .mask img {width: 100%; height: auto; line-height: 0;}
#Works .Cnt ul li .target .mask {opacity: 0.0 !important;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
#Works .Cnt ul li .target:hover .mask {opacity: 0.5 !important;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
#Works .Cnt ul li img {width: 100%; height: auto; line-height: 0;}

/* About */
#About {padding: 150px 0 0; width: 100%;}
#About .Cnt {min-width: 990px; max-width: 1000px;margin: 0 auto; line-height: 2}
#About .Cnt h1 {text-align: center; font-size: 26px; color:#292929;margin-bottom: 60px;}
#About .Cnt h1 span {border-bottom: 1px solid #292929; padding-bottom: 6px;font-family: 'Roboto', sans-serif;}

/* Member */
#Member {padding: 100px 0; width: 100%;}
#Member .Cnt {min-width: 990px; max-width: 1000px;margin: 0 auto; line-height: 2;overflow: hidden;}
#Member .Cnt h2 {text-align: center; font-size: 26px; color:#292929;margin-bottom: 60px;}
#Member .Cnt h2 span {border-bottom: 1px solid #292929; padding-bottom: 6px;font-family: 'Roboto', sans-serif;}
#Member .Cnt .Prof {float: right; width: 450px;}
#Member .Cnt .Prof h3 {}
#Member .Cnt .Prof h3 span{font-family: 'Roboto', sans-serif;padding-left: 15px;}
#Member .Cnt .Prof h4 {font-weight: normal; margin-bottom: 15px;font-size: 14px; font-family: 'Roboto', sans-serif;}
#Member .Cnt .Prof p {font-size: 15px;text-align: justify;}

/* Outline */
#Outline {padding: 100px 0 80px; width: 100%;}
#Outline .Cnt {min-width: 990px; max-width: 1000px;margin: 0 auto; line-height: 2}
#Outline .Cnt h2 {text-align: center; font-size: 26px; color:#292929;margin-bottom: 60px;}
#Outline .Cnt h2 span {border-bottom: 1px solid #292929; padding-bottom: 6px;font-family: 'Roboto', sans-serif;}
#Outline .Cnt dl {margin: 0 auto 10px; width: 600px;padding-bottom: 8px;overflow: hidden; border-bottom: 1px solid rgba(212,212,212,.50)}
#Outline .Cnt dt {float: left; width: 130px;}
#Outline .Cnt dd {float: right; width: 470px;}
.google-maps {position: relative;padding-bottom: 25%;height: 0;overflow: hidden;}
.google-maps iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}

/* Flow */
#Flow {padding: 150px 0 80px; width: 100%;}
#Flow .Cnt {min-width: 990px; max-width: 1000px;margin: 0 auto; line-height: 2}
#Flow .Cnt h1 {text-align: center; font-size: 26px; color:#292929;margin-bottom: 60px;}
#Flow .Cnt h1 span {border-bottom: 1px solid #292929; padding-bottom: 6px;font-family: 'Roboto', sans-serif;}
#Flow .Cnt h2 {text-align: center; background:#A6A6A6; color: #fff; border-radius: 16px; width: 360px; margin: 0 auto 10px;}
#Flow .Cnt .sub{text-align:center; font-family: 'Roboto', sans-serif;font-size: 14px; margin-bottom: 0px;color: #A6A6A6;}
#Flow .Cnt .midNote {margin-bottom: 6%; text-align: justify;}
#Flow .Cnt .Btn{margin: 0 auto; width: 400px; background: url(../img/bg.jpg) repeat; border: 2px solid #333;color: #333;line-height: 50px; display: block;-webkit-transition: 0.3s ease; transition: 0.3s ease;font-size: 16px;font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;text-align: center; border-radius: 3px;}
#Flow .Cnt .Btn:hover{cursor : pointer; background: url(../img/bg.jpg) repeat; border-color: #59b1eb;color: #59b1eb;-webkit-transition: 0.3s ease; transition: 0.3s ease;}

/* Detail */
#Detail {padding: 150px 0 80px; width: 100%;}
#Detail .Cnt {min-width: 950px; max-width: 1460px;padding: 0 20px; margin: 0 auto; line-height: 2}
#Detail .Cnt h1 {text-align: center; font-size: 28px; color:#292929;margin-bottom: 10px;line-height: 1.2;letter-spacing: 1px;font-weight: normal;font-family: 'Roboto', sans-serif;}
#Detail .Cnt h1 .btmBorder {border-bottom: 1px solid #292929; padding-bottom: 6px;font-family: 'Roboto', sans-serif;}
#Detail .Cnt h1 .detTitle {font-size: 80%}
#Detail .Cnt h2 {font-size: 78%;margin-bottom: 60px;text-align: center;font-family: 'Roboto', sans-serif;letter-spacing: 1px;}
.jpFont {font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;font-size: 90%}

#Detail .Cnt .txt {text-align: justify;padding: 0 18%;}
#Detail .Cnt .midNote {margin-bottom: 6%;}
#Detail .Cnt .mainVisual{margin-bottom: 10%;}
#Detail .Cnt .graphic {margin-bottom: 5%}
#Detail .Cnt .graphic.last {margin-bottom: 1%}
#Detail .Cnt .edit {text-align: left; font-size: 90%; margin-bottom: 6%;font-family: 'Roboto', sans-serif;letter-spacing: 1px;}
#Detail .Cnt .backBtn {text-align: center; color:#7A7A7A; font-size: 24px;-webkit-transition: 0.3s ease; transition: 0.3s ease;font-family: 'Roboto', sans-serif;}
#Detail .Cnt .backBtn:hover {color: #4496aa;-webkit-transition: 0.3s ease; transition: 0.3s ease;letter-spacing: 1px;}

/* Contact */
#Contact {padding: 150px 0 80px; width: 100%;}
#Contact .Cnt {min-width: 990px; max-width: 1000px;margin: 0 auto; line-height: 2}
#Contact .Cnt h1 {text-align: center; font-size: 26px; color:#292929;margin-bottom: 60px;}
#Contact .Cnt h1 span {border-bottom: 1px solid #292929; padding-bottom: 6px;font-family: 'Roboto', sans-serif;}
form#mail_form{width : 960px; margin : 50px auto; padding : 10px 0;font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
form#mail_form dl{width : 90%; margin : 0 auto; overflow : hidden;}
form#mail_form dl dt{clear : both; width : 30%; float : left; border-top : 1px solid #cccccc; padding : 15px 0; text-align : right; overflow : hidden;}
form#mail_form dl dd{width : 65%; float : right; border-top : 1px solid #cccccc; padding : 15px 0 15px 5%;}
form#mail_form dl dt:first-child,
form#mail_form dl dt:first-child+dd{border : none;}
form#mail_form dl dt span{display : block; font-size : 85%; color : #3377ff;}
form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{display : inline-block; float : left; color : #ffffff; line-height : 1; padding: 5px 7px; font-size: 12px; margin-top: 5px; border-radius : 3px;}
form#mail_form dl dt span.required{background:#ED696B}
form#mail_form dl dt span.optional{background:#646464;}
form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match{display : block; color : #ff0000; margin-top : 3px;}
span.loading{width : 50px; height : 50px; border-radius : 50%; border-top : 5px solid rgba( 255, 255, 255, 0.2 ); border-right : 5px solid rgba( 255, 255, 255, 0.2 ); border-bottom : 5px solid rgba( 255, 255, 255, 0.2 ); border-left : 5px solid #ffffff; -webkit-transform : translateZ( 0 ); -ms-transform : translateZ( 0 ); transform : translateZ( 0 ); -webkit-animation : load-circle 1.0s linear infinite; animation : load-circle 1.0s linear infinite; position : absolute; top : 50%; left : 50%; margin-top : -25px; margin-left : -25px;}
@-webkit-keyframes load-circle{
0%{-webkit-transform : rotate( 0deg ); 	transform : rotate( 0deg );}
100%{	-webkit-transform : rotate( 360deg ); 	transform : rotate( 360deg );}
}
@keyframes load-circle{
0%{-webkit-transform : rotate( 0deg ); 	transform : rotate( 0deg );}
100%{-webkit-transform : rotate( 360deg ); 	transform : rotate( 360deg );}
}

form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"]{max-width : 96%; height : 2em; padding : 2px 2%; background : #fff; -webkit-appearance : none; font-size : 100%; font-family : inherit; margin-top : 5px;}
form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus{box-shadow : 0px 0px 5px #55ccff; border : 1px solid #55ccff; background : #ffffff;}
form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"]{margin-right : 10px; margin-top : 7px;}
form#mail_form ul li:first-child input[type="radio"],
form#mail_form ul li:first-child input[type="checkbox"]{margin-top : 0px;}
form#mail_form select{font-size : 100%; font-family : inherit; margin-top : 10px;}
form#mail_form textarea{display : block; width : 95%; max-width : 95%; height : 200px; padding : 2px 2%; resize : vertical; border :none; background : #fff; -webkit-appearance : none; font-size : 100%; font-family : inherit;}
form#mail_form ul{list-style-type : none;}
form#mail_form ul li label:hover{cursor : pointer;}
form#mail_form input#company{width : 95%;}
form#mail_form input#name_1,
form#mail_form input#name_2,
form#mail_form input#read_1,
form#mail_form input#read_2,
form#mail_form input#postal,
form#mail_form input#phone,
form#mail_form input#schedule{width : 95%;}
form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm{width : 95%;}
form#mail_form input#postal+a{display : inline-block; padding : 9px 15px; vertical-align : middle; line-height : 1; background : #5bc0de; border : 1px solid #46b8da; border-radius : 3px; color : #ffffff; font-family : inherit; text-decoration : none; position : relative; top : -1px;}
form#mail_form input#postal+a:hover{cursor : pointer; background : #31b0d5; border : 1px solid #269abc;}
form#mail_form input#address{width : 90%;}
form#mail_form p#form_submit{width : 90%; margin : 0 auto 20px; padding : 15px 0; border-top : 1px solid #cccccc;}
form#mail_form input[type="button"]{margin: 0 auto; width: 400px; background: url(../img/bg.jpg) repeat; border: 2px solid #333;color: #333;line-height: 50px; display: block;-webkit-transition: 0.3s ease; transition: 0.3s ease;font-size: 16px;font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;border-radius: 3px;}
form#mail_form input[type="button"]:hover{cursor : pointer; background: url(../img/bg.jpg) repeat; border-color: #59b1eb;color: #59b1eb;-webkit-transition: 0.3s ease; transition: 0.3s ease;}
form#mail_form input#form_submit_button{}

@media only screen and (min-width:728px) and (max-width:989px) {
nav .cnt {min-width: 96%; max-width: 96%;margin:0 auto;}
#Works .Cnt {min-width: 96%; max-width: 96%;margin:0 auto;}
footer .Cnt {min-width: 96%; max-width: 96%;margin:0 auto;}
#About .Cnt {min-width: 96%; max-width: 96%;margin:0 auto;}
#Member .Cnt {min-width: 96%; max-width: 96%;margin:0 auto;}
#Outline .Cnt {min-width: 96%; max-width: 96%;margin:0 auto;}
#Detail .Cnt {min-width: 96%; max-width: 96%;margin:0 auto;padding: 0;}
#Flow .Cnt {min-width: 96%; max-width: 96%;margin:0 auto;}
#Contact .Cnt {min-width: 96%; max-width: 96%;margin:0 auto;}
form#mail_form {min-width: 96%; max-width: 96%;margin:0 auto;}
}



@media screen and (max-width: 727px) { /* SmartPhone Display - width:727px under - */
/*========================================
BASIC SP
=======================================*/
/* common style */
img{width:100%;height:auto;}
	
/* section */
section{width: 92%; margin: 0 auto 20px;font-size: 12px;}
.Normal {margin-bottom: 30px;padding: 4%;}
.secondLine { border-top:1px solid #C4C4C4; padding-top: 15px;}
p {margin: 0 0 23px;text-align: justify;}
table {width: 100% !important; table-layout: auto !important;}

/* responsd View*/
.pcView{display:none !important;}
.spView{display:block;}
.TABNone{display:inline;}


/*=======================================
COMMON SP
=======================================*/
/* #wrapper */
#wrapper{width: 100%;margin: 0 auto;}

/*========================================
HEADER SP
=======================================*/
header {width:100%;}
header .inline {background:#fff; padding:5px 2%;width:96%; position:fixed; z-index:500; top:0; height:40px;}
header .inline .Logo {float:left; width:50px;margin-top: 3px;}
header .inline .Logo img {width:100%; height:auto;}
header .inline .menu { float:right; width:20%;}
nav {background-color: rgba(255,255,255,0.95);width: 100%;padding:15px 0;color: #ffffff;font-size: 16px; overflow:hidden; position:fixed; top:51px; height: 100%}
aside{display: none;box-sizing: border-box;width: 100%;height: 100%;padding: 60px 15px 15px;line-height: 42px;text-align: center;position: absolute;top: 0;left: 100%;z-index: 2;}
nav li { text-align:left;padding-left: 5%;}
nav a li.Check { color:#F95153;}
#menuButton {display: block;width: 42px;height:42px;position: fixed;top: 4px;right: 10px;z-index: 3;}
#menuButton span {display: block;background:#747474;width: 24px;height: 2px;position: absolute;left: 9px;transition: all 0.4s;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;}
#menuButton span:first-child {top: 12px;}
#menuButton span:nth-child(2) {margin-top: -1px;top: 50%;}
#menuButton span:last-child {bottom: 12px;}
#menuButton.active span:first-child {-webkit-transform: translateY(8px) rotate(45deg);-moz-transform: translateY(8px) rotate(45deg);-ms-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
#menuButton.active span:nth-child(2) {opacity: 0;}
#menuButton.active span:last-child {-webkit-transform: translateY(-8px) rotate(-45deg);-moz-transform: translateY(-8px) rotate(-45deg);-ms-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) rotate(-45deg);}


/*========================================
FOOTER SP
=======================================*/
#backToTop{position: fixed; bottom: 5px; right: 10px;width: 60px; height: 60px;}
footer{ width:100%;font-size:10px;}
footer .Cnt{min-width:98%; max-width:98%; width:98%; margin:3% auto;}
footer .Cnt ul, footer .copyright {min-width:98%; max-width:98%;width:98%; text-align: center;}
footer .copyright p {text-align: center; margin: 0}


/*========================================
BASIC SP
=======================================*/
/* Intro */
#Intro {position: relative;width: 100%;height: 100%;}
#Intro h1 {position: absolute;top: 50%;left: 50%;z-index: 2;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;white-space: nowrap;width: 240px; height:auto; line-height: 1;}
a.scrollDown span {bottom: 4%;}
.eyecatch {margin-top: 0;}
/* Works */
#Works {padding: 70px 0;}
#Works.Sec{padding: 70px 0;}
#Works .Cnt {min-width: 100%; max-width: 100%;margin: 0 auto;}
#Works .Cnt h2 {text-align: center; font-size: 22px; border-bottom: 5px; padding-bottom: 10px; margin-bottom: 20px;}
#Works .Cnt ul {overflow: hidden;}
#Works .Cnt ul li{width: 50%;float: left;margin: 0 0;line-height: 0}
#Works .Cnt ul li .title {top:4%; left: 4%;font-size: 14px;}
#Works .Cnt ul li .title .detTitle {font-size: 80%;}
#Works .Cnt ul li .title .role {font-size: 70%;}

/* About */
#About {padding: 70px 0 0; width: 100%;}
#About .Cnt {min-width: 96%; max-width: 96%;margin: 0 auto; line-height: 2}
#About .Cnt h1 {font-size: 22px;margin-bottom: 20px;}
#About .Cnt h1 span {padding-bottom: 6px;}

/* Member */
#Member {padding: 40px 0;}
#Member .Cnt {min-width: 96%; max-width: 96%;margin: 0 auto; line-height: 2;}
#Member .Cnt h2 {font-size: 22px;margin-bottom: 20px;}
#Member .Cnt h2 span {padding-bottom: 6px;}
#Member .Cnt .Prof {float: none; width: 100%;}
#Member .Cnt .Prof h3 {font-size: 14px;line-height: 1.2;}
#Member .Cnt .Prof h3 span{padding-left: 15px;}
#Member .Cnt .Prof h4 {margin-bottom: 15px;font-size: 13px;}
#Member .Cnt .Prof p {font-size: 11px;text-align: justify;}

/* Outline */
#Outline {padding: 40px 0 0; width: 100%;}
#Outline .Cnt {min-width: 96%; max-width: 96%;margin: 0 auto; line-height: 2}
#Outline .Cnt h2 {font-size: 22px;margin-bottom: 20px;}
#Outline .Cnt h2 span {padding-bottom: 6px;}
#Outline .Cnt dl {margin: 0 auto 10px; width: 100%;adding-bottom: 8px;}
#Outline .Cnt dt {width: 30%;}
#Outline .Cnt dd {width: 70%;}
.google-maps {padding-bottom: 60%;}

/* Flow */
#Flow {padding: 70px 0;}
#Flow .Cnt {min-width: 96%; max-width: 96%;margin: 0 auto; line-height: 2;}
#Flow .Cnt h1 {font-size: 22px;margin-bottom: 20px;}
#Flow .Cnt h1 span {border-bottom: 1px solid #292929; padding-bottom: 6px;font-family: 'Roboto', sans-serif;}
#Flow .Cnt h2 {text-align: center; color: #fff; border-radius: 16px; width: 90%; margin: 0 auto 10px;}
#Flow .Cnt .sub{font-size: 13px;}
#Flow .Cnt .midNote {margin-bottom: 10%; text-align: justify;}
#Flow .Cnt .Btn{margin: 0 auto; width: 96%;line-height: 50px; display: block;-webkit-transition: 0.3s ease; transition: 0.3s ease;font-size: 14px;font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;text-align: center; border-radius: 3px;}
#Flow .Cnt .Btn:hover{cursor : pointer; background-color: #fff; border-color: #59b1eb;color: #59b1eb;-webkit-transition: 0.3s ease; transition: 0.3s ease;}

/* Detail */
#Detail {padding: 70px 0;}
#Detail .Cnt {min-width: 100%; max-width: 100%;margin: 0 auto;padding: 0;}
#Detail .Cnt h1 {font-size: 22px;margin-bottom: 20px;}
#Detail .Cnt h1 .detTitle {font-size: 80%;}
#Detail .Cnt h2 {font-size: 78%;margin-bottom: 60px;text-align: center;font-family: 'Roboto', sans-serif;letter-spacing: 1px;}
.jpFont {font-size: 90%}

#Detail .Cnt .txt {text-align: justify;padding: 0 18%;}
#Detail .Cnt .midNote {margin-bottom: 6%;}
#Detail .Cnt .mainVisual{margin-bottom: 10%;}
#Detail .Cnt .graphic {margin-bottom: 5%}
#Detail .Cnt .graphic.last {margin-bottom: 1%}
#Detail .Cnt .edit {padding: 0 4%;text-align: left;margin-bottom: 10%}
#Detail .Cnt .backBtn {text-align: center; color:#7A7A7A; font-size: 16px;}

/* Contact */
input[type="submit"] {-webkit-appearance: none; border-radius: 0;}
* {-webkit-appearance: none;}
#Contact {padding: 70px 0;}
#Contact .Cnt {min-width: 96%; max-width: 96%;margin: 0 auto;}
#Contact .Cnt h1 {font-size: 22px;margin-bottom: 20px;}
form#mail_form{width : 100%; margin : 0 auto; padding : 10px 0;}
form#mail_form dl{width : 90%; margin : 0 auto; overflow : hidden;}
form#mail_form dl dt{clear : both; width : 30%; float : left; border-top : 1px solid #cccccc; padding : 15px 0; text-align : right; overflow : hidden;}
form#mail_form dl dd{width : 65%; float : right; border-top : 1px solid #cccccc; padding : 15px 0 15px 5%;}
form#mail_form dl dt:first-child,
form#mail_form dl dt:first-child+dd{border : none;}
form#mail_form dl dt span{display : block; font-size : 85%; color : #3377ff;}
form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{display : inline-block; float : left; color : #ffffff; line-height : 1;}
form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match{display : block; color : #ff0000; margin-top : 3px;}
span.loading{width : 50px; height : 50px; border-radius : 50%; border-top : 5px solid rgba( 255, 255, 255, 0.2 ); border-right : 5px solid rgba( 255, 255, 255, 0.2 ); border-bottom : 5px solid rgba( 255, 255, 255, 0.2 ); border-left : 5px solid #ffffff; -webkit-transform : translateZ( 0 ); -ms-transform : translateZ( 0 ); transform : translateZ( 0 ); -webkit-animation : load-circle 1.0s linear infinite; animation : load-circle 1.0s linear infinite; position : absolute; top : 50%; left : 50%; margin-top : -25px; margin-left : -25px;}


form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"]{max-width : 95%; height : 2em; padding : 2px 2%; }
form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus{box-shadow : 0px 0px 5px #55ccff; border : 1px solid #55ccff; background : #ffffff;}
form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"]{margin-right : 10px; margin-top : 7px;}
form#mail_form ul li:first-child input[type="radio"],
form#mail_form ul li:first-child input[type="checkbox"]{margin-top : 0px;}
form#mail_form select{font-size : 100%; font-family : inherit; margin-top : 10px;}
form#mail_form textarea{display : block; height : 200px; padding : 2px 2%; -webkit-appearance : none; font-size : 100%; font-family : inherit;}
form#mail_form ul{list-style-type : none;}
form#mail_form ul li label:hover{cursor : pointer;}
form#mail_form input#postal+a{display : inline-block; padding : 9px 15px; vertical-align : middle; line-height : 1; background : #5bc0de; border : 1px solid #46b8da; border-radius : 3px; color : #ffffff; font-family : inherit; text-decoration : none; position : relative; top : -1px;}
form#mail_form input#postal+a:hover{cursor : pointer; background : #31b0d5; border : 1px solid #269abc;}
form#mail_form input#address{width : 90%;}
form#mail_form p#form_submit{width : 90%; margin : 0 auto 20px; padding : 15px 0; border-top : 1px solid #cccccc;}
form#mail_form input[type="button"]{margin: 0 auto; width: 99.5%;font-size: 14px;}




/*========================================
CONTACT
=======================================*/
#contactForm-wrap #form_submit_button{width: 100%; margin: 0 auto; color: #fff; font-size: 16px; text-align: center; line-height: 1.4; border: 1px solid #cdcece;display: block;cursor: pointer;padding: 10px 0;height: 42px;}
.BtnBackTop{width:292px;margin:50px auto 30px;}
form#mail_form{width : 95%;}
form#mail_form dl{overflow : visible;}
form#mail_form dl dt{width : auto; float : none; text-align : left;font-weight : bold;line-height: 2.5;height: 33px;padding: 10px 0 0;}
form#mail_form dl dd{width : auto;float : none;border-top : none;padding : 0px 0 13px 0px;}
form#mail_form dl dt span{font-weight : normal;}
form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{margin-right : 1em;margin-bottom : 2em;}
form#mail_form input#form_submit_button{margin-left : 0;}




/*-------------------- max-width:727px --------------------*/}