@charset "utf-8";

/* #logo ----------------------------------------------------------------------

四角　49　127
半丸　63 126
丸　123 123
三角　123 123

-----------------------------------------------------------------------------*/

/*初期*/
body.loading header nav{ opacity:0;}
body.loading.top .icon1{ left: 1212px; top: 1259px; transform: rotateX(180deg) rotateY(251deg) scale(1.1);}
body.loading.top .icon2{ left:-1076px; top:-1272px;  transform: rotateX(-180deg) rotateY(-251deg) scale(1.1);}
body.loading.top .icon3{ left:801px; top:-1022px;  transform: rotateX(180deg) rotateY(251deg) scale(1.1);}
body.loading.top .icon4{ left:-1027px; top:769px;  transform: rotateX(-180deg) rotateY(251deg) scale(1.1);}
body.loading.top .icon5{ left:71px; top:-1050px;  transform: rotateX(180deg) rotateY(-251deg) scale(1.1);}
body.loading.top .icon6{ left:1113px; top:508px;  transform: rotateX(-180deg) rotateY(251deg) scale(1.1);}
body.loading.top .icon7{ left:1251px; top:806px;  transform: rotateX(180deg) rotateY(251deg) scale(1.1);}
body.loading.top .icon8{ left:3px; top:734px;  transform: rotateX(-180deg) rotateY(-251deg) scale(1.1);}

/*ローディング*/
body.loading #loadBg{ width:100%; height:100%; background:#fff; position:fixed; z-index:999999; opacity:1;}
body.loading #logo{ z-index:1000000;}
body #loadBg{ width:100%; height:100%; background:#fff; position:fixed; z-index:0; opacity:0;}

/*ロゴ*/
body #wraper{ background:#FFFFFF; display:block;
transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 1s cubic-bezier(.165, .84, .44, 1);
}
body #logo{  width:400px; height:500px; display:block; 
position:fixed; 
top: 50%; left:50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);

-webkit-transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
-moz-transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
-o-transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
z-index:1;
}
body #logo .circle{ width:398px; height:398px; position:absolute; left:1px; top:1px;}
body #logo #type{ width:361px; height:auto; position:absolute; left:20px; bottom:6px;}
body #logo h1{ width:400px; height:0; position:absolute; left:0; bottom:0; overflow:hidden;
transition: height 0.6s cubic-bezier(.165, .84, .44, 1) ;
-webkit-transition: height 0.6s cubic-bezier(.165, .84, .44, 1) ;
-moz-transition: height 0.6s cubic-bezier(.165, .84, .44, 1) ;
-o-transition: height 0.6s cubic-bezier(.165, .84, .44, 1) ;
}

body #logo #readWrap{}
body #logo .readBox { position:absolute; width:100px; height:372px;}
body #logo .readBox img{ width:29px; height:auto; position:absolute;}
body #logo .readBox { position:absolute;
	transition: all 1s cubic-bezier(.165, .84, .44, 1);
-webkit-transition: all 1s cubic-bezier(.165, .84, .44, 1);
-moz-transition: all 1s cubic-bezier(.165, .84, .44, 1);
-o-transition: all 1s cubic-bezier(.165, .84, .44, 1);
}

body #logo .readBox#read1{ top:24px; right:-220px; opacity:0;}
body #logo .readBox#read2{ top:24px; left:-220px; opacity:0;}

body #logo.view .readBox{
transition: all 2s cubic-bezier(.165, .84, .44, 1) 1s ;
-webkit-transition: all 2s cubic-bezier(.165, .84, .44, 1) 1s;
-moz-transition: all 2s cubic-bezier(.165, .84, .44, 1) 1s;
-o-transition: all 2s cubic-bezier(.165, .84, .44, 1) 1s;
}
body #logo.view .readBox#read1{ top:14px; right:-220px; opacity:1;}
body #logo.view .readBox#read2{ top:14px; left:-220px; opacity:1;}

body #logo #readWrap #rText1{ right:0; top:0; opacity:1;}
body #logo #readWrap #rText2{left:0; top:0; opacity:1;}
body #logo #readWrap #rText3{right:0; top:0; opacity:1;}
body #logo #readWrap #rText4{left:0; top:0; opacity:1;}


@media screen and (max-width:1100px){
body #logo .readBox { position:absolute; width:70px; height:372px;}
body #logo .readBox img{ width:20px; height:auto; position:absolute;}
body #logo.view .readBox#read1{ top:14px; right:-130px; opacity:1; top: 54px;}
body #logo.view .readBox#read2{ top:14px; left:-130px; opacity:1; top: 54px;}
}

@media screen and (max-width:767px){
	body #logo{ 
		top: 40%; left:40%;
		-webkit-transform:scale(0.4) translateY(-100%) translateX(-100%);
		-ms-transform:scale(0.4) translateY(-100%) translateX(-100%);
		transform:scale(0.4) translateY(-100%) translateX(-100%);
	}
	
	body #logo .readBox { position:absolute; width:80px; height:300px;}
	body #logo .readBox img{ width:24px; height:auto; position:absolute;}
	
	body #logo.view .readBox#read1{ top:30px; right:-120px; opacity:1;}
	body #logo.view .readBox#read2{ top:30px; left:-120px; opacity:1;}
}

/*logo パーツ*/
.box.yoko{ width:127px; height:49px;}
.box.tate{ width:49px; height:127px;}
.halfC.yoko{ width:126px; height:63px;}
.halfC.tate{ width:63px; height:126px;}
.maru{ width:123px; height:123px;}
.triangle{ width:123px; height:123px;}

.iconsWrap svg{ position:absolute;
mix-blend-mode: multiply;
	transition: all 3s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 3s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 3s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 3s cubic-bezier(.165, .84, .44, 1);
	
	-moz-perspective: 2000;
    -webkit-perspective: 2000;
    -ms-perspective: 2000;
    perspective: 2000;
	
	-webkit-transform: rotateX(0deg) rotateY(0deg) scale(1);
    -ms-transform: rotateX(0deg) rotateY(0deg) scale(1);
    transform: rotateX(0deg) rotateY(0deg) scale(1);
}
.iconsWrap .icon1{ left: 212px; top: 259px;}
.iconsWrap .icon2{ left:76px; top:72px;}
.iconsWrap .icon3{ left:201px; top:22px;}
.iconsWrap .icon4{ left:27px; top:169px;}
.iconsWrap .icon5{ left:171px; top:50px;}
.iconsWrap .icon6{ left:113px; top:208px;}
.iconsWrap .icon7{ left:251px; top:116px;}
.iconsWrap .icon8{ left:73px; top:234px;}

/*パーツのカラー*/
.colerB{ fill:#0087c7;}
.colerY{ fill:#fbce00;}
.colerP{ fill:#f5c7d5;}
.colerG{ fill:#83c9be;}

.set1 .colerB,
.set2 .colerY,
.set3 .colerP,
.set4 .colerG{fill:#0087c7;}

.set4 .colerB,
.set1 .colerY,
.set2 .colerP,
.set3 .colerG{fill:#fbce00;}

.set3 .colerB,
.set4 .colerY,
.set1 .colerP,
.set2 .colerG{fill:#f5c7d5;}

.set2 .colerB,
.set3 .colerY,
.set4 .colerP,
.set1 .colerG{fill:#83c9be;}

/*出現*/
body.top .iconsWrap svg{
	transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	
	-moz-perspective: 2000;
    -webkit-perspective: 2000;
    -ms-perspective: 2000;
    perspective: 2000;
	
	-webkit-transform: rotateX(0deg) rotateY(0deg) scale(1);
    -ms-transform: rotateX(0deg) rotateY(0deg) scale(1);
    transform: rotateX(0deg) rotateY(0deg) scale(1);
}

body.circle #logo h1{height:73px;
transition: height 0.6s cubic-bezier(.165, .84, .44, 1) 2s;
-webkit-transition: height 0.6s cubic-bezier(.165, .84, .44, 1) 2s;
-moz-transition: height 0.6s cubic-bezier(.165, .84, .44, 1) 2s;
-o-transition: height 0.6s cubic-bezier(.165, .84, .44, 1) 2s;
}

body.loading.top #logo #logoCircle{ opacity:0;
transition: opacity 0.6s cubic-bezier(.165, .84, .44, 1);
-webkit-transition: opacity 0.6s cubic-bezier(.165, .84, .44, 1);
-moz-transition: opacity 0.6s cubic-bezier(.165, .84, .44, 1);
-o-transition: opacity 0.6s cubic-bezier(.165, .84, .44, 1) ;
}
body #logo #logoCircle{ opacity:1;}

body.circle #logo #logoCircle path {
  fill: none;
  stroke: #000;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 2s ease forwards 1s;
  animation: dash 2s ease forwards 1s;
  
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}


@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@media screen and (max-width:767px){
	body.circle #logo #logoCircle path{
		opacity:1;
	}
}

/*消える*/
body.ready #logo #logoCircle path {
  fill: none;
  opacity:1;
  stroke: #000;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 0;
  -webkit-animation: dashOff 0.5s linear forwards;
  animation: dashOff 0.5s linear forwards;
}

@media screen and (max-width:767px){
	body.ready #logo #logoCircle path{ opacity:0;}
}

body #logo #logoCircle path {
  fill: none;
  opacity:1;
  stroke: #000;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 0;
  -webkit-animation: dashOff 0.5s linear forwards;
  animation: dashOff 0.5s linear forwards;
}

@media screen and (max-width:767px){
	body #logo #logoCircle path{ opacity:0;}
}


@-webkit-keyframes dashOff {
  to {
 stroke-dashoffset: 2000;
  }
}

@keyframes dashOff {
  to {
  stroke-dashoffset: 2000;
  }
}


/*ie*/
body #wraper #logo.ie #logoCircle{ display:none;}
body #wraper.ie .iconsWrap svg{ position:absolute;mix-blend-mode: normal;}



body.loading.top #wraper #logo.ie .circle{ opacity:0;}
body.loading.top #wraper #logo.ie #iconBox{ opacity:1;}

body.top #wraper #logo.ie .circle,
body.last #wraper #logo.ie .circle{ background:url(../img/logo_mark.png) no-repeat 1px 1px; width:400px; height:400px; opacity:1; }

body.last #wraper #logo.ie #iconBox svg,
body.top #wraper #logo.ie #iconBox svg{ opacity:0; -ms-filter: "alpha( opacity=0 )"; filter: alpha( opacity=0 );}

body #wraper #logo.ie .circle,
body #wraper #logo.ie #iconBox svg{
	transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 1s cubic-bezier(.165, .84, .44, 1);
}

body.top.loading #wraper #logo.ie .circle{
	transition: all 0s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 0s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 0s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 0s cubic-bezier(.165, .84, .44, 1);
}

body.top #wraper #logo.ie .circle,
body.last #wraper #logo.ie .circle{
	transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 1s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 1s cubic-bezier(.165, .84, .44, 1);
}



/*---------------------------------------------------------

パーツ

---------------------------------------------------------*/


body.last .iconsWrap svg{
	-webkit-transform:cale(1) rotateX(30deg) rotateY(30deg);
    -ms-transform:cale(1) rotateX(30deg) rotateY(30deg);
    transform:cale(1) rotateX(30deg) rotateY(30deg);
}


/*---------------------------------------------------------

ヘッダー

---------------------------------------------------------*/
header{ }
header nav{ width:120px; padding-bottom:32px; position:fixed; right:40px; z-index:10000;
top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%) ; transform: translateY(-50%) ;
opacity:1;
transition: all 2s cubic-bezier(.165, .84, .44, 1) 2s;
	-webkit-transition: all 2s cubic-bezier(.165, .84, .44, 1) 2s;
	-moz-transition: all 2s cubic-bezier(.165, .84, .44, 1) 2s;
	-o-transition: all 2s cubic-bezier(.165, .84, .44, 1) 2s;
}

header nav li{ margin-bottom:20px; width:120px; height:25px; position:relative; display:block; }
header nav li a{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; text-align:left;}
header nav li a:before{ content:""; width:0px; height:2px; position:absolute; left:0; bottom:-2px; background:#000000;
	transition: all 0.2s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 0.2s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 0.2s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 0.2s cubic-bezier(.165, .84, .44, 1);
}


body.top header nav li:nth-child(1) a:before,
body header nav li:nth-child(1):hover a:before{width:42px;}
body.about header nav li:nth-child(2) a:before,
body header nav li:nth-child(2):hover a:before{width:75px;}
body.business header nav li:nth-child(3) a:before,
body header nav li:nth-child(3):hover a:before{width:102px;}
body.company header nav li:nth-child(4) a:before,
body header nav li:nth-child(4):hover a:before{width:115px;}
body.photo header nav li:nth-child(5) a:before,
body header nav li:nth-child(5):hover a:before{width:77px;}
body.thanks header nav li:nth-child(6) a:before,
body header nav li:nth-child(6):hover a:before{width:105px;}


header nav li svg,
header nav li img{ height:15px; width:auto; position:absolute; left:0; top:5px;}

header nav li:nth-child(6){ height:20px;}
header nav li:nth-child(6) svg, header nav li:nth-child(6) img{ height:10px;}

header nav .snswrap a{ float:left;}
.snswrap{ text-align:center;}
.snswrap a{ width:32px; height:32px; display:inline-block; margin-right:10px;}
.snswrap a:last-child{ margin-right:0;}
.snswrap a svg{width:32px; height:32px; }
.snswrap a.iconFb:hover svg path{ fill:#4267b2;}
.snswrap a.iconIg:hover svg path{ fill:#FD278A;}


header nav .snswrap a{ width:32px; height:32px; display:inline-block; float:left; margin-right:10px;}
header nav .snswrap a svg{width:32px; height:32px; }
header nav .snswrap a.iconFb:hover svg path{ fill:#4267b2;}
header nav .snswrap a.iconIg:hover svg path{ fill:#FD278A;}

@media screen and (max-width:1100px){
	header{ display:none;}
}



/*---------------------------------------------------------

SECTION

---------------------------------------------------------*/
section{ position:relative; box-sizing:border-box; z-index:2;}
section .wrap{ width:1000px; min-height:100vh; box-sizing:border-box; display:block; margin:0 auto; padding:100px 0;}
section .wrap h2{ display:block; text-align:center; margin-bottom:40px; }
section .wrap h2 span{ text-align:center; display:block; padding-top:10px;}
section .wrap h3{ font-size:24px; font-weight:bold; text-align:center; margin-bottom:20px; }
section .wrap h3 span{ font-size:1rem; display:block; padding-top:10px;}
section .inner{ display:block; margin:0 auto;}

section .tgtBase>*{
	opacity:0;
	padding-top:5px;
	display:block;
	transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 2s cubic-bezier(.165, .84, .44, 1);
}
section .tgtBase .go{opacity:1;
	padding-top:0px;
	transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 2s cubic-bezier(.165, .84, .44, 1);
}

section .inner p{ text-align:left;}

@media screen and (max-width:1100px){
	
	section .wrap{ width:auto; min-height:inherit; min-height:auto; box-sizing:border-box; display:block; margin:0 50px; padding:100px 0;}
	section#top,section#last{ min-height:100vh;}
	section .tgtBase >*{opacity:1;
	padding-top:0px;
	transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-webkit-transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-moz-transition: all 2s cubic-bezier(.165, .84, .44, 1);
	-o-transition: all 2s cubic-bezier(.165, .84, .44, 1);
}
}


@media screen and (max-width:767px){
	
	section .wrap{ width:90%; display:block; margin:0 auto; padding:10% 0;}
	section .wrap h2{ margin-bottom:20px;}
	section .wrap h2 svg{ height:20px; width:auto;}
	section .wrap h2 img{ height:20px; width:auto;}
	section .wrap h3{margin-bottom:5%; line-height:1.6em;     font-size: 20px;}
	section .tgtBase>*{	opacity:1;}
}


/*column*/
.column2{ width:450px; display:block; }
.column3{ width:280px; display:block; margin-right:80px; }
.column3:nth-child(3n){margin-right:0px; }

@media screen and (max-width:767px){
.column2{ width:auto; display:block; }
.column3{ width:auto; display:block; margin:0; }
}

/*タイトル付リスト2*/
dl.dlTable { width:100%; border-bottom: 1px solid #ccc; }
dl.dlTable dt,dd {	padding: 5px; box-sizing:border-box;}
dl.dlTable dt {clear: left; float: left; width: 50%; font-weight:700;}
dl.dlTable dd {margin-left: 50%;}

/*about*/
section#about h2{ margin-bottom:60px;}
section#about h3{ margin-bottom:60px;}
section#about h3 span{ font-size:50px; margin:0 0.2em; display:inline-block;}
section#about h3 span:nth-child(1){ color:#0087c7;}
section#about h3 span:nth-child(2){color:#fbce00;}
section#about h3 span:nth-child(3){color:#f5c7d5;}
section#about h3 span:nth-child(4){color:#83c9be;}



section#about .inner{ width:760px; text-align:center;}


section#about .inner p{ line-height:2.5em; font-size:1.1rem; margin-bottom:1em; text-align:center;}
@media screen and (max-width:1200px){
	section#about .inner{ width:auto;}
}

@media screen and (max-width:767px){
	section#about .inner{ width:auto; text-align:center;}
	section#about .inner p{ font-size: 0.9rem; line-height:2em;}
}

/*BUSINESS*/
section#business .inner{ width:1000px; text-align:center;}
section#business .column2 { width:450px;}
section#business .column2 a{ display:block; padding-bottom:30px; box-sizing:border-box; position:relative; }
section#business .column2 a .btn.more{ position:absolute; bottom:0; left:50%;
-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%) ; transform: translateX(-50%) ;}
section#business .column2 .imgWrap{ width:450px; height:226px; text-align:center; margin-bottom:30px; }
section#business .column2 .imgWrap img{ width:100%; height:auto;     }
section#business span.comingsoon{font-weight: 700;     font-size: 13px; color:#999999;}

@media screen and (max-width:1100px){
section#business .inner{ width:auto;}
section#business .column2{ width:45%; display:block; }
section#business .column2 .imgWrap{ width:100%; height:auto;}
}

@media screen and (max-width:767px){
	section#business .inner{ width:auto; text-align:center;}
	section#business .column2 { width:auto; float:none!important; margin-bottom:10%;}
	section#business .column2:last-child{ margin-bottom:0;}
	section#business .column2 .imgWrap{ width:100%; height:auto; margin-bottom:10px;}
}
/*member*/
section#member .inner{ width:1000px; text-align:center;}
section#member .column3 .imgWrap{ width:280px; height:280px; border-radius:50%; overflow:hidden; margin-bottom:30px; }
section#member .column3 .imgWrap img{ width:100%; height:auto;}
section#member .column3 p.position{ text-align:center; margin-bottom:10px; font-size:0.8rem;}
section#member dl.dlTable.favorite dt{ padding:0; width:70%; text-align:left;}
section#member dl.dlTable.favorite dd{ margin-bottom:10px; text-indent:-9999px; overflow:hidden; height:20px; margin-left:30%;}
section#member #hiraoka dl.dlTable.favorite dd,
section#member #hiraoka .imgWrap{ background:#0087c7;}
section#member #nada dl.dlTable.favorite dd,
section#member #nada .imgWrap{ background:#fbce00;}
section#member #mizuki dl.dlTable.favorite dd,
section#member #mizuki .imgWrap{ background:#83c9be;}

section#member .column3 dl.dlTable{ margin-bottom:30px;}

@media screen and (max-width:767px){
	section#member .inner{ width:auto;}
	section#member .column3{ margin:0 auto 10%; width:80%; float:none;}
	section#member .column3 .imgWrap{ width:100%; height:auto; border-radius:50%; overflow:hidden; margin:0 auto 5%; }
	section#member .column3 .imgWrap img{ width:100%; height:auto;}
	section#member .column3:last-child{ margin-bottom:0;}
}

/*company*/
section#company .inner { background:url(../img/base.svg); width:1024px; height:510px; background-size:cover; padding:60px; box-sizing:border-box;}
section#company #map{ width:600px; height:auto; float:left;}
section#company #map #mapBox{ width:600px; height:360px; margin-bottom:20px; background:#999; }
section#company .profileArea{ width:240px; height:360px; display:block; float:right; position:relative;}
section#company .profileArea dl.dlTable{ border:none; margin-bottom:50px;}
section#company .profileArea dl.dlTable dt{ width:4em; margin-bottom:0.5em;}
section#company .profileArea dl.dlTable dd{ margin-left:5em; margin-bottom:0.5em;}
section#company .profileArea .adress{ width:240px; border:1px solid #000; text-align:center; box-sizing:border-box; display:block; padding:15px 0; position:absolute; bottom:0; left:0;}
section#company .profileArea .adress img{ width:150px; height:auto;}

section#company #concept{ width:100%; height:22em; display:block; position:relative; text-align:center;}
section#company #concept .concept-inner{
	-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;  writing-mode: vertical-rl;
	position:absolute; left:50%; text-align:left; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform:translateX(-50%);
}
section#company #concept h3{ text-align:left; margin-left:2em;}		 
section#company #concept p{ line-height:2.5em; margin-left:2em; font-size: 1rem;}

@media screen and (max-width:1100px){
	section#company .inner { background:none; width:auto; height:auto; padding:0; box-sizing:border-box;}
	section#company #map{  width :400px ; width : -webkit-calc(100% - 260px) ;   width : calc(100% - 260px) ; position:relative; }
	section#company #map #mapBox{ width:100%; height:100%; padding-top:300px; margin-bottom:5%; background:#999; position:relative; left:0; top:0; }
}

@media screen and (max-width:767px){
	section#company .inner { background:none; width:100%; height:auto; padding:0; box-sizing:border-box;}
	section#company #map{ width:100%; height:auto; padding-top:100%; float:none; position:relative;}
	section#company #map #mapBox{ width:100%; height:100%; padding-top:0; margin-bottom:5%; background:#999; position:absolute; left:0; top:0; }
	section#company .profileArea{ width:100%; height:auto;}
	section#company .profileArea .adress{ width:100%; text-align:center; position:relative;}
	section#company .profileArea .adress img{ width:80%; height:auto;}
	
	section#company #concept{ width:100%; height:auto; display:block; position:relative; text-align:center; margin-bottom:2em;}
	section#company #concept .concept-inner{
		-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	-moz-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
		position:relative; left:auto; text-align:left; -webkit-transform:none; -ms-transform:none; transform:none;
	}
	section#company #concept h3{ text-align:center; margin-left:0;}		 
	section#company #concept p{ line-height:2em; margin-left:0; font-size: 0.94rem; text-align:left; margin-bottom:0.5em;}
	
}

/*photo*/
section#photo .inner { width:1000px; height:auto;}
section#photo .inner ul li{width:200px; height:200px; float:left; margin-right:66px;}
section#photo .inner ul li:nth-child(4n){ margin-right:0; margin-bottom:66px;}
section#photo .inner ul li img{ width:100%; height:auto;}
@media screen and (max-width:1100px){
	section#photo .inner{ width:auto;}
	section#photo .inner ul li{ width:24%; height:auto; margin-right:1.333%; margin-bottom:1.333%;}
	section#photo .inner ul li:nth-child(4n){ margin-right:0; margin-bottom:1.333%;}
}

@media screen and (max-width:767px){
	section#photo .inner { width:auto; height:auto;}
	section#photo .inner ul li{width:47%; height:auto; float:left; margin-right:6%; margin-bottom:6%;}
	section#photo .inner ul li:nth-child(2n){ margin-right:0; margin-bottom:6%;}
}

/*thanks*/
section#thanks .inner{ width:550px; position:absolute; left:50%; top:50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%) ;}
section#thanks ul li{ display:block; margin-bottom:20px; font-size:1.1rem; position:relative;}
section#thanks ul li .part{  padding:0.2em 0; display:inline-block; font-size:0.8rem; width:140px; text-align:left; margin-right:1em; font-weight:bold;}
section#thanks ul li .name{ width:8em; display:inline-block; }
section#thanks ul li .yagou{ font-size:0.8rem; display:inline-block; margin-left:1em;}
section#thanks ul li a.btn.more{ width:60px; display:inline-block; position:absolute; right:0; top:0; padding:0;}
section#thanks ul li a.btn.more:hover {background: #000; color: #FFFFFF;}

@media screen and (max-width:1100px){
	section#thanks .inner{ width:90%; position:relative; left:auto; top:auto; -webkit-transform: none; -ms-transform: none; transform:none;}
}

@media screen and (max-width:767px){
section#thanks .inner{ width:auto; position:relative; left:auto; top:auto; -webkit-transform: none; -ms-transform:none; transform:none ;}
section#thanks .wrap h2 img{ height:15px; width:auto;}

section#thanks ul li{ display:block; margin-bottom:20px; font-size:1rem; position:relative;}
section#thanks ul li .name{ width:auto; display:inline-block; }
section#thanks ul li .part{font-size:0.7rem; width:100%; margin-right:0; }
section#thanks ul li .yagou{ font-size:0.7rem;}
section#thanks ul li a.btn.more{ width:40px; top:1.7em; }
}

/*last*/
section#last {}
section#last #copyright{ position:absolute; left:50%; bottom:50px;  -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%) ; transform: translateX(-50%) ;}
section#last #copyright img{ height:15px; width:auto;}
.mask {  -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath);}
.mask2 { -webkit-clip-path: url(#svgPath2); clip-path: url(#svgPath2);}
@media screen and (max-width:767px){
	section#last #copyright img{ height:12px; width:auto;}
}

/*---------------------------------------------------------

2週目

---------------------------------------------------------*/
body #wraper.num1nd{ background:#D0B958; }
body #wraper.num2nd{ background:#ffda19; }
body #wraper.num3nd{ background:#19a8ff; }
body #wraper.num4nd{ background:#002FFF; }
body #wraper.num5nd{ background:#ff3434; }
body #wraper.num6nd{ background:#ff344f; }
body #wraper.num7nd{ background:#3471ff; }
body #wraper.num8nd{ background:#b0d886; }
body #wraper.num9nd{ background:#86d8a4; }
body #wraper.num10nd{ background:#b0d886; }
body #wraper.num11nd{ background:#86d8a4; }
body #wraper.num12nd{ background:#d2b6ff; }
body #wraper.num13nd{ background:#ffb6e5; }
body #wraper.num14nd{ background:#cbd0d8; }
body #wraper.num15nd{ background:#8fd4d1; }
body #wraper.num16nd{ background:#d8d391; }
body #wraper.num17nd{ background:#ffabbd; }
body #wraper.num18nd{ background:#afe673; }
body #wraper.num19nd{ background:#00FFCC; }
body #wraper.num20nd{ background:#616161; }