@charset "utf-8";
/* CSS Document */
/********************************************************************************************************
 common
********************************************************************************************************/
 .typ {
  opacity: 0;
 }
 .typ span{
  opacity: 0;
 }

#logo {
 position:fixed;
	top:30px;
	left:2.5%;
	z-index: 70;
 width: 60px;
 overflow: hidden;
 -webkit-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
#logo a{
 display: block;
}
@media screen and (max-width: 768px) {
 #logo {
  top:20px;
  width: 30px;
  left: 3.5%;
 }
}
#logo .logoImage {
 display: block;
 width: 200px;
 overflow: hidden;
}
#logo.full,
#logo:hover{
 width: 200px;
}
@media screen and (max-width: 768px) {
 #logo .logoImage {
  width: 115px;
 }
 #logo.full,
 #logo:hover{
  width: 115px;
 }
}
#pp {
 position:fixed;
	bottom:30px;
	left:2.5%;
	z-index: 70;
 font-size: 75%;
 letter-spacing: 2px;
 width: 1em;
 overflow: hidden;
 -webkit-transition:width 0.3s ease-in-out;
 transition:width 0.3s ease-in-out;
}
@media screen and (max-width: 768px) {
 #pp {
  bottom: 20px;
  left: 4%;
 }
}
#pp a {
 position: relative;
 padding-left: 2em;
 width: 150px;
 display: block;
}
#pp a:before{
 content: "";
 display: block;
 box-sizing: border-box;
 border: 2px solid #000;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 position: absolute;
 left: 0;
 top:50%;
 transform: translateY(-50%);
 -webkit-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
#pp:hover,
#pp.font{
 width: 150px;
}

@media screen and (max-width: 768px) {
 #pp a:before{
  border-width: 1px;
 }
}
#pp a:hover {
 color: #000;
}
#pp a:hover:before{
 background: #000;
}
#pp.white a {
 color: #FFF;
}
#pp.white a:before {
 border-color: #FFF;
}
#pp.white a:hover:before{
 background: #FFF;
}




.section {
 padding: 3%;
 box-sizing: border-box;
 text-align: center;
}
@media screen and (max-width: 768px) {
 .section {
  padding:5em 3% 2em;
  box-sizing: border-box;
  text-align: center;
 }
}

.container {
 visibility: hidden;
 opacity: 0;
 -webkit-transition:all 0.5s ease-in-out;
 transition:all 0.5s ease-in-out;
 transition-delay: 0.5s;
}
.section.active .container {
 visibility: visible;
 opacity: 1;
}

.section h2.tit {
 position: absolute;
 top:30px;
 right: 0;
 padding-right: 1.5em;
 letter-spacing: 2px;
}
.section h2.tit:after {
 display: block;
 position: absolute;
 right: 0;
 content: "";
 width: 1em;
 height: 1px;
 background: #000;
 margin-top: -0.7em;
}
.section {
 /*visibility: hidden;*/
}
.section.active {}
@media screen and (max-width: 768px) {
 .section h2.tit {
  top:20px;
  font-size: 85.7%;
 }
 .section h2.tit:after {
  top:15px;
 }
}
.section.dark h2.tit:after {
 background: #FFF;
}

h2.mi {
 font-size: 250%;
 line-height: 1em;
 position: relative;
 padding-bottom: 0.5em;
 margin-bottom: 0.5em;
 letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
 h2.mi {
  font-size: 200%;
 }
}
h2.mi span.big{
 font-size: 150%;
 letter-spacing: 1px;
}
h2.mi span.big:after{
 display: block;
 content: "";
 width: 40px;
 height: 4px;
 background: #000;
 position: absolute;
 left: 0;
 bottom: 0;
}
h2.mi .typ { display: inline-block;}

.fuchi {
 color: #000;
 text-shadow:
  1px 1px 0 #FFF, -1px -1px 0 #FFF,
  -1px 1px 0 #FFF, 1px -1px 0 #FFF,
  0px 1px 0 #FFF,  0-1px 0 #FFF,
  -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.fuchi.wh {
 color: #FFF;
 text-shadow:
  1px 1px 0 #000, -1px -1px 0 #000,
  -1px 1px 0 #000, 1px -1px 0 #000,
  0px 1px 0 #000,  0-1px 0 #000,
  -1px 0 0 #000, 1px 0 0 #000;
}
/********************************************************************************************************
 section1
********************************************************************************************************/
#section1 {
 background: url(../images/bg_top.jpg) no-repeat center center;
 background-size: cover;
}
@media screen and (max-width: 768px) {
 #section1 {
  background: url(../images/bg_top_sp.jpg) no-repeat center center;
  background-size: cover;
 }
}
/********************************************************************************************************
 section2
********************************************************************************************************/
#section2 {
 color: #FFF;
}
@media screen and (min-width: 769px) {
 #section2 .container {
  position: relative;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
 }
}
.aboutUs h3{
 font-size: 375%;
 line-height: 1em;
 margin-bottom: 1em;
 font-weight: 700;
 min-height: 1em;
}
@media screen and (max-width: 768px) {
 .aboutUs h3{
  font-size: 8vw;
 }
}
.aboutUs .lead{
 font-size: 112.5%;
 margin-bottom: 3em;
 line-height: 1.7em;
}
@media screen and (max-width: 768px) {
 .aboutUs .lead{
  font-size: 85.7%;
 }
}
.aboutUs .sac{
 width: 80%;
 max-width: 1400px;
 margin: 0 auto;
 display: -webkit-flex;
 display: flex;
 flex-wrap:nowrap;
 -webkit-flex-wrap:nowrap;
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
 align-items:stretch;
 -webkit-box-align:stretch;
 -webkit-align-items:stretch;
}
@media screen and (max-width: 1200px) {
 .aboutUs .sac{
  width: 90%;
 }
}
@media screen and (max-width: 768px) {
 .aboutUs .sac{
  width: 80%;
  margin: 0 auto;
  display: block;
 }
}
.aboutUs .sac li {
 width: 31%;
 border: 1px solid #FFF;
 padding: 2.5%;
 box-sizing: border-box;
 text-align: left;
}
@media screen and (max-width: 768px) {
 .aboutUs .sac li {
  width: 100%;
  padding: 5%;
  margin-bottom: 2em;
 }
}
.aboutUs .sac li h4.en {
 font-size: 3.5vw;
 line-height: 1em;
 margin-bottom: 0.5em;
 padding-bottom: 0.3em;
 letter-spacing: 2px;
}
@media screen and (max-width: 768px) {
 .aboutUs .sac li h4.en {
  font-size: 9vw;
 }
}
.aboutUs .sac li h4 p {
 display: inline-block;
}
.aboutUs .sac li h4 .big{
 font-size: 200%;
 line-height: 0.8em;
 position: relative;
}
.aboutUs .sac li h4 .big:after{
 display: block;
 content: "";
 width: 40px;
 height: 4px;
 background: #FFF;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 bottom: -4px;
}

.aboutUs .sac li p.text {
 font-size: 87.5%;
 line-height: 1.8em;
}
.aboutUs .sac li:nth-child(2) p.text{
 animation-delay: 1.5s;
 transition-delay: 1.5s;
}
.aboutUs .sac li:nth-child(3) p.text{
 animation-delay: 2s;
 transition-delay: 2s;
}
/********************************************************************************************************
 section3
********************************************************************************************************/
#section3 {
 overflow: hidden;
}
ul.member {
 width: 80%;
 margin: 0 auto;
 max-width: 1100px;
}
@media screen and (max-width: 1200px) {
 ul.member {
  width: 85%;
  margin-left: 15%;
 }
}
@media screen and (max-width: 768px) {
 ul.member {
  width: 90%;
  margin-left: 10%;
 }
}
ul.member li{
 display: flex;
 flex-wrap:nowrap;
 -webkit-flex-wrap:nowrap;
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
 align-items:center; 
 -webkit-box-align:center;
 -webkit-align-items:center;
 width: 75%;
}
ul.member li.asami {
 flex-direction: row-reverse;
 -webkit-flex-direction: row-reverse; 
 -webkit-box-direction:reverse;
 margin-bottom: 2.5em;
}
ul.member li.mizuno {
 margin-left: 25%;
}
@media screen and (max-width: 1200px) {
 ul.member li{
  width: 100%;
 }
 ul.member li.mizuno{margin-left: 0%;}
}
@media screen and (max-width: 768px) {
 ul.member li{
  display: block;
  position: relative;
 }
}
ul.member li .pic {
 width: 40%;
}
@media screen and (max-width: 768px) {
 ul.member li .pic {
  width: 48%;
  position: absolute;
  top: -15%;
  right: -10%;
  max-width: 180px;
 }
}
ul.member li .textWrap {
 width: 58%;
 text-align: left;
}
@media screen and (max-width: 768px) {
 ul.member li .textWrap {
  width: 100%;
 }
}
ul.member li .textWrap .name_jp {
 font-size: 112.5%;
 margin-bottom: 1em;
 animation-delay: 1s;
 transition-delay: 1s;
}
ul.member li .textWrap .post {
 font-size: 112.5%;
 margin-bottom: 1em;
 animation-delay: 1.2s;
 transition-delay: 1.2s;
}
ul.member li .textWrap .text {
 font-size: 87.5%;
 line-height: 1.8em;
 animation-delay: 1.4s;
 transition-delay: 1.4s;
}
ul.member li:nth-child(2) .textWrap .name_jp {
 animation-delay: 1s;
 transition-delay: 1s;
}
ul.member li:nth-child(2) .textWrap .post {
 animation-delay: 1.2s;
 transition-delay: 1.2s;
}
ul.member li:nth-child(2) .textWrap .text {
 animation-delay: 1.4s;
 transition-delay: 1.4s;
}
/********************************************************************************************************
 section4
********************************************************************************************************/
.section.outline {
 padding-right: 0;
}
.outline h3 {
 font-size: 750%;
 line-height: 1em;
 color: #FFF;
 width: 67%;
 margin-left: 22%;
 margin-bottom: 0.4em;
 text-align: left;
}
@media screen and (max-width: 768px) {
 .outline h3 {
  font-size: 357%;
  width: 90%;
  margin-left: 10%;
 }
}
.outline h3 .fuchi {
 color: #00afcc;
}
.outline .itemList {
 width: 67%;
 margin-left: 22%;
 text-align: left;
 font-weight: 300;
}
@media screen and (max-width: 768px) {
 .outline .itemList {
  width: 90%;
  margin-left: 10%;
  font-size: 87.5%;
 }
}
.outline .itemList .row{
 display: -webkit-flex;
 display: flex;
 flex-wrap:nowrap;
 -webkit-flex-wrap:nowrap;
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
 align-items:stretch;
 -webkit-box-align:stretch;
 -webkit-align-items:stretch;
}
.outline .itemList .th{
 width: 13%;
 padding: 1em 0 1.2em;
 border-bottom: 1px solid #0078a3;
 line-height: 1.75;
 box-sizing: border-box;
}
.outline .itemList .td{
 width: 81%;
 padding: 1em 0 1.2em;
 border-bottom: 1px solid #0078a3;
 line-height: 1.75;
 box-sizing: border-box;
}
@media screen and (max-width: 768px) {
 .outline .itemList .th{
  width: 20%;
  padding: 0.8em 0 1em;
 }
 .outline .itemList .td{
  width: 74%;
  padding: 0.8em 1em 1em 0;
 }
}
/********************************************************************************************************
 section5
********************************************************************************************************/
#section5 {
 background: url(../images/bg_access.jpg) no-repeat center right;
 background-size: 80% auto;
}
@media screen and (max-width: 769px) {
 #section5 {
  background: url(../images/bg_access.jpg) no-repeat center center;
  background-size: cover;
 }
}
.access {
 width: 60%;
 position: absolute;
 right: 0;
 top:50%;
 transform: translateY(-50%);
}
.mapWrap {
 position: relative;
 width: 100%;
 padding-top: 50%;
 overflow: hidden;
 margin-bottom: 1em;
}

@media screen and (max-width: 768px) {
 .access {
  width: 90%;
  margin-left: 10%;
 }
}
#gmap {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
}
.access p.mapLink {
 font-size: 87.5%;
 text-align: left;
}
.access p.mapLink a {
 text-decoration: underline;
}
.copy {
 position: absolute;
 right: 2%;
 bottom:3.5%;
 font-size: 75%;
 letter-spacing: 1px;
}

@media screen and (max-width: 768px) {
 .copy {
  font-size: 65%;
 }
}

/********************************************************************************************************
 privacy policy
********************************************************************************************************/
#privacy {
 width: 80%;
 margin: 5em 5% 3em 15%;
 text-align: left;
}
#privacy h2.mi{
 margin-bottom: 1em;
}
#privacy dt{
 font-size: 112.5%;
 margin-bottom: 1.5em;
}
#privacy dd{
 font-size: 87.5%;
 line-height: 2em;
 padding-bottom: 3em;
 margin-bottom: 3em;
 position: relative;
}
#privacy dd p{
 margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
 #privacy {
  width: 90%;
  margin: 0 auto;
  padding-top: 6em;
 }
}
#privacy dd:after{
 display: block;
 content: "";
 width: 40px;
 height: 4px;
 background: #000;
 position: absolute;
 left: 0;
 bottom: 0;
}
#privacy dd:last-child:after{
 content: none;
}

/********************************************************************************************************
 opening
********************************************************************************************************/
#opening {
 background: #33c4e5;
 width: 100%;
 height: 100%;
 z-index: 101;
 position: fixed;
 top:0;
}
#opening #logo2{
 width: auto;
 position: absolute;
 opacity: 0;
 line-height: 1em;
 top:50%;
 left:50%;
 transform: translate(-50%,-50%);
}
#opening #logo2.on {
 -webkit-animation-name: logo2;
 animation-name: logo2;
 animation-delay: 0s;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 animation-duration:2s;
}
@-webkit-keyframes logo2 {
 0% { margin-top: 0; opacity: 0;}
 30% { margin-top: 0; opacity: 1;}
 80% { margin-top: 0; opacity: 1;}
 100% { margin-top: -10px;  opacity: 0;}
}
@keyframes logo2 {
 0% { margin-top: 0; opacity: 0;}
 30% { margin-top: 0; opacity: 1;}
 80% { margin-top: 0; opacity: 1;}
 100% { margin-top: -10px;  opacity: 0;}
}
/*#opening #logo2.on.hide {
 opacity: 0;
 margin-top: -20px;
 -webkit-transition: opacity 1s ease-in-out,margin 1s ease-in-out;
 transition: opacity 1s ease-in-out,margin 1s ease-in-out;
}*/
#opening #logo1{
 width: auto;
 position: absolute;
 opacity: 1;
 line-height: 1em;
 top:50%;
 left:50%;
 transform: translate(-50%,-50%);
 -webkit-transition: opacity 0.5s ease-in-out;
 transition: opacity 0.5s ease-in-out;
 transition-delay: 0.3s;
}
#opening #logo1.hide{
 opacity: 0;
}
#sacTxt {
}
.sacOver {
 background: #33c4e5;
 width: 100%;
 position: fixed;
 top:0;
 left: 0;
 }
.sacInner {
 display: block;
 width: 2000px;
 position: fixed;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
 background: url(../images/sacsac.png) no-repeat center center;
}
 
.gotoRight {
  opacity: 1;
}
.gotoRight.on {
 -webkit-animation-name: gotoRight;
 animation-name: gotoRight;
 animation-delay: 0.7s;
}
@-webkit-keyframes gotoRight {
 0% { transform: translateX(0);}
 100% { transform: translateX(100%);}
}
@keyframes gotoRight {
 0% {  transform: translateX(0);}
 100% { transform: translateX(100%);}
}
/*#sacTxt {
 position: relative;
 overflow: hidden;
}
.sacWrap {
 width: 100px;
 -webkit-transition:width 3s ease-in-out;
 transition:width 3s ease-in-out;

 position: relative;
 overflow: hidden;
 }
#sacTxt.on .sacWrap {
 width: 100%;
 }
.sacInner {
 width: 100%;
 height: 800px;
 background: url(../images/sacsac.png) no-repeat left bottom;
 background-size: auto auto;
}*/