@charset "UTF-8";
/* CSS Document */
p,h1,h2,h3,h4,ul,li,body,#all{
margin:0;
padding:0;
}
img{
	vertical-align: bottom;
	border:none;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
h1,h2,h3,h4 {
  font-weight: normal;
}
body{
	font-family:"MO GCenturyOld Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3",
"HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" ,"sans-serif";
	color:#333;
	width: 100%;
	 overflow-x : hidden;
    -webkit-overflow-scrolling: touch;
	display:block;
}
/*#all{
	position:relative;
	overflow-x: hidden;
}
#all::-webkit-scrollbar {
      display: none;
      -webkit-appearance: none;
}*/
#all{
	overflow: hidden;
}
header{
	width:1000px;
	margin:0 auto;
	max-width:1000px;
}
.inner .logo{
	margin-bottom:73px;
}
ul{
	list-style-type:none;
	line-height:3em;
}
li a{
	text-decoration:none;
	color:#333;
}
 li :hover{
	opacity:0.3;
	cursor: pointer;
	-webkit-transition: all 0s ease 0.1s;
	transition: all 0s ease 0.1s;	
}
.logo :hover img{
	opacity:0.3;
	cursor: pointer;
	-webkit-transition: all 0s ease 0.1s;
	transition: all 0s ease 0.1s;	
}
header .inner{
	z-index:100;
	margin-top:50px;
	width:196px;
	float:left;
	position:relative;
}
.wrapper{
	-webkit-width:calc(100vw - 0%);
	width:calc(100vw - 0%);
}
.topimg img{
	margin-top:50px;
	width:100%;
	max-width:850px;
	min-width:510px;
	max-height:510px;
	min-height:510px;
	object-fit:cover;
}
.white{
	position:relative;
	bottom:50px;
	z-index:200;
	width:100%;
}
.white .active{
	width:40%;
	height:88px;
	background-color:#FFFFFF;
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
	-webkit-transform: skewY(6deg) translateY(0);
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(6deg) translateY(0);
	position:absolute;
	top:50px;
}
.whitewrap{
	width:100%;
	height:80px;
	overflow:hidden;
	position:relative;
	top:-50px;
	margin-left:196px;
}
/*動くナビ*/
 .g-nav{
	width: 100%;
	color: #fff;
	background-color: rgba( 255, 255, 255, 0.7 );
	position: relative;
	z-index:600;
	left:0%;/*navの白帯がなんかセンターになった*/
}
.g-nav-menu li{
	display: block;
	line-height:3em;
}
.fixed{
	position: fixed;
}
.fixed  ul{
	width:100%;
	text-align: center;
}
.fixed .g-nav-menu li{
	line-height: 3em;
	display:inline-block;
	margin-top:20px;
	margin-right:50px;
	font-size:.9em;
	position:relative;
	z-index:600;
}
/*動くナビlast*/
main{
	width:1000px;
	margin:0 auto;
	height:auto;
}
main h1{
	font-size:1.6em;
}
section .ttl{
	text-align: center;
	margin:100px 0 20px 0;
}
#sec1,#sec2,#sec3,#sec4,#sec5,#sec6,#sec7{
	position:relative;
	z-index:10;
	padding-top: 40px;
    margin-top: -40px;
}

#sec1 h1{
	width:75px;
	margin:0 auto;
	border-bottom:solid #333 1px;
}
 #sec1 .works{
	width:1000px;
	margin:0 auto;
}
#sec1 .sub{
	margin-top:6px;
}
#sec1 .box img{
	float:left;
}
#sec1 .box img{
	width:250px;
	height:165px;
	/*float:left;*/
	margin:0px 14px 0 0;
	object-fit: cover;
}
#sec1{
	width:100%;
	position: relative;
	z-index:1;
}
#sec1 .box1{
	margin-left:14%;
	position: relative;
}
#sec1 .box2{
	margin-left:0%;
}
#sec1 .box3{
	margin-left:10%;
}
#sec1 .box4{
	margin-left:20%;
}
#sec1 .box5{
	margin-left:15%;
}
#sec1 .box6{
	margin-left:5%;
}
#sec1 .box7{
	margin-left:20%;
}
#sec1 .box8{
	margin-left:14%;
}
#sec1 .box{
	width:250px;
	float:left;
	margin:14px 14px 0 0;
}
.band1{
	background-color:#F2F2F2;
	width:140%;
	height:149px;
	position:relative;
	z-index:0;
	bottom:300px;
	margin-left:-100%;
}
.cap1{
	width:250px;
	height:165px;
	text-align:center;
	position:absolute;
}
.cap1 .mask{
	opacity:0;	/* マスクを表示しない */
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,.7);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.cap1 .mask:hover {
	opacity:1;
}
.mask p{
	padding-top:40px;
	color:#333;
	line-height:1.5em;
}
#sec2 h1{
	width:75px;
	margin:0 auto;
	border-bottom:solid #333 1px;
}
#sec2 .sub{
	margin:70px auto 0 auto;
	font-size:1.2em;
}
#sec2 .sub2{
	font-size:.9em;
}
#sec2 .txt{
	margin-top:60px;
}
#sec2 .txt p{
	margin:50px auto;
}
.band2{
	background-color:#F2F2F2;
	width:100vw;
	height:15px;
	position:relative;
	z-index:0;
	bottom:550px;
	margin-left:750px;
}

#sec3 h1{
	width:150px;
	margin:0 auto;
	border-bottom:solid #333 1px;
}
#sec3 .sub{
	margin-top:6px;
}
#sec3 .txt{
	margin:60px auto;
	font-size:.9em;
}
#sec3 .box{
	width:600px;
	margin:90px auto;
	
}
#sec3 .box .icon{
	float:left;
	margin-right:0px;
	margin-bottom:50px;
}
#sec3 .icon img{
	width:150px;
	height:110px;
}
#sec3 .icon:nth-child(4n){
	margin-right:0px;
}
#sec3 .icon p{
	width:118px;
	margin-top:10px;
	font-size:.9em;
	color:#808080;
	line-height:1.3em;
}
.band3{
	background-color:#F2F2F2;
	width:100vw;
	height:8px;
	position:relative;
	z-index:0;
	bottom:180px;
	margin-left:850px;
}

#sec4 h1{
	width:200px;
	margin:0 auto 6px auto;
	border-bottom:solid #333 1px;
	line-height:1.3em;
}
#sec4 h1 .ttl2{
	font-size:.5em;
	margin-bottom:5px;
}
#sec4 .txt{
	margin:60px auto;
	font-size:.9em;
}
#sec4 .box{
	width:569px;
	margin:90px auto;
	
}
#sec4 .box .icon{
	float:left;
	margin-right:32px;
	margin-bottom:70px;
}
#sec4 .icon img{
	width:118px;
	height:110px;
}
#sec4 .icon:nth-child(4n){
	margin-right:0px;
}
#sec4 .icon p{
	width:118px;
	margin-top:10px;
	font-size:.9em;
	color:#808080;
	line-height:1.4em;
}
#sec4 .txt2{
	margin:-50px auto 0 auto;
	font-size:.9em;
}
/*#sec4 video{
	width:620px;
	height:auto;
	margin-top:100px;
}*/

/*#sec4 video復活の際消してください↓-----------------------*/
#sec4 .box{
	margin-bottom:-50px;
}
/*#sec4 video復活の際消してください↑-----------------------*/
.band4{
	background-color:#F2F2F2;
	width:143%;
	height:47px;
	position:relative;
	z-index:0;
	bottom:1500px;
	margin-left:-100%;
}
#sec5 h1{
	width:240px;
	margin:0 auto;
	border-bottom:solid #333 1px;
}
#sec5 .sub{
	margin-top:6px;
}
#sec5 .pjt{
	width:880px;
	margin:60px auto 0 auto;
}
#sec5 .txt{
	width:441px;
	float:left;
	font-size:.9em;
	line-height:2.7em;
	margin-left:0;
}
#sec5 .txt img{
	margin:60px auto;
}
#sec5 .image{
	width:412px;
	float:right;
}
#sec5 .image img{
	height:280px;
	object-fit: cover;
	margin-bottom:30px;
}
#sec5 .image img:hover{
	opacity:0.5;
	cursor: pointer;
	-webkit-transition: all .3s ease 0.1s;
	transition: all .3s ease 0.1s;
}
#sec5 .image .link{
	width:120px;
	height:28px;
	border:solid #333 1px;
	position:relative;
	left:330px;
}
#sec5 .image .link:hover{
	opacity:0.3;
	cursor: pointer;
	transition: all 0s ease 0.1s;
	-webkit-transition: all 0s ease 0.1s;
}
#sec5 .image .link p{
	margin-right:25px;
	font-size:.9em;
	text-decoration:none;
	line-height:0px;
	margin-top:14px;
}
#sec5 .image a{
	text-decoration:none;
	color:#333;
}
#sec5 .image .link .tri{
	width: 10px;
	height: 10px;
	border: 1px solid;
	border-color: #333 #333 transparent transparent;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-left:90px;
	position:absolute;
	bottom:9px;
}
.band5{
	background-color:#F2F2F2;
	width:100vw;
	height:12px;
	position:relative;
	z-index:0;
	bottom:450px;
	margin-left:850px;
}


#seclink{
	margin:120px auto 100px;
}
#seclink h3 {
	text-align:center;
}
#seclink h3 p{
	font-size:0.8em;
}

#seclink .link-ma{
	margin:50px auto 50px;
	text-align: center;
}
#seclink .link-ma p strong{
	font-size:1.2em;
	line-height:3em;
}
#seclink p{
	margin-right:30px;
	text-align: left;
	display: inline-block;

}
#seclink .link-ma img{
	margin-bottom:32px;
}
#seclink .link-ma img:hover{
	opacity:0.3;
	cursor: pointer;
	transition: all 0s ease 0.1s;
	-webkit-transition: all 0s ease 0.1s;
}



#sec6 h1{
	width:90px;
	margin:0 auto;
	border-bottom:solid #333 1px;
}
#sec6 .sub{
	margin-top:6px;
}
#sec6 img{
	margin-top:60px;
	width:200px;
	height:auto;
	position: relative;
}
#sec6 .prof-l{
	text-align:left;
	line-height:2.5em;
	float:left;
}
#sec6 .name{
	margin-left:250px;
	position:absolute;
	top:370px;
}
#sec6 .name .mainname{
	font-size:2em;
	line-height:1.3em;
}
#sec6 h2{
	font-size:1.3em;
	margin:60px auto;
	line-height:1.7em;
}
#sec6 h3{
	margin:60px 0 20px 0px;
}
#sec6 .txt{
	font-size:.9em;
}
#sec6 .txt2{
	font-size:.9em;
	margin-top:40px;
}
#sec6 .prof-r{
	text-align:left;
	line-height:2.5em;
	float:right;
	margin-top:170px;
}
#sec6 a{
	text-decoration: none;
	color:#333;
	font-weight: bold;
}
#sec6 a:hover{
	color:#FF6D70;
}
#sec6 a:active{
  color:#979797;
}
.band6wrap{
	position:relative;
}
.band6-l{
	background-color:#F2F2F2;
	width:120%;
	height:90px;
	position:absolute;
	z-index:0;
	bottom:900px;
	margin-left:-100%;
}
.band6-r{
	background-color:#F2F2F2;
	width:100vw;
	height:300px;
	position:absolute;
	z-index:0;
	bottom:800px;
	margin-left:850px;
}
#sec7{
	margin-top:40px;
}
#sec7 h1{
	width:90px;
	margin:0 auto;
	border-bottom:solid #333 1px;
	text-align:center;
}
#sec7 .sub{
	margin-top:6px;
	text-align:center;
}
#sec7 .map{
    position:relative;
    width:100%;
    height:0;
    padding-top:70%;
	margin-top:60px;
}
#sec7 .map iframe{
	position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#sec7 .txt1,#sec7 .txt2{
	margin-top:60px;
	text-align:left;
	line-height:2.5em;
	font-size:.9em;
}
footer .copy{
	text-align:center;
	font-size:.8em;
	margin-top:100px;
	margin-bottom:30px;
}
.band7{
	position:relative;
	width:1000vw;
}
.band7 .wraper{
	width:1000vw;
	height:1350px;
	background-color:#F2F2F2;
	position:absolute;
	right:50%;
	bottom:-150px;
}
#page-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
	z-index:800;
}
 
#page-top a {
    display: block;
    width: 81px;
}
#page-top a:hover {
	opacity:0.3;
	-webkit-transition: all .1s ease 0.1s;
	transition: all .1s ease 0.1s;
}
.inner2{
	display:none
}
.respo-toplogo{
	display:none;
}
@media screen and (max-width:985px){
	header{
	margin-left:3%;
	}
.topimg img{
	width:100%;
	max-height:auto;
	min-height:auto;
}
.white{
	position:relative;
	bottom:50px;
	z-index:200;
	width:100%;
}
.white .active{
	width:50%;
	height:88px;
	background-color:#FFFFFF;
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(8deg) translateY(0);
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    -webkit-transform: skewY(8deg) translateY(0);
}
	main{
	width:78%;
	margin:0 auto;
	height:auto;
}
	#sec1 .works{
	width:763px;
	margin:0 auto;
}
	#sec1 .box{
	width:200px;
	height:130px;
}
	#sec1 .box img{
	width:200px;
	height:130px;

}
	#sec1 .box4{
	margin-left:15%;
}
	#sec1 .box6{
	margin-left:10%;
}
	#sec1 .box7{
	margin-left:5%;
}
	#sec1 .box8{
	margin-left:15%;
}
	.mask p{
	padding-top:30px;
	color:#333;
	font-size:.8em;
	line-height:1.5em;
}
	.cap1{
	width:200px;
	height:130px;
}
	#sec5 .pjt{
	width:750px;
}
	#sec5 .txt{
	width:350px;
	font-size:.7em;
}#sec5 .txt img{
	margin:40px auto;
	width:200px;
	height:auto;
}
	#sec5 .image{
	width:400px;
	float:right;
}
#sec5 .image img{
	height:214px;
	object-fit: cover;
	margin-bottom:20px;
}
	#sec5 .image .link{
	width:120px;
	height:28px;
	border:solid #333 1px;
	position:relative;
	left:250px;
}
	#sec6 .txt{
	font-size:.8em;
}
	#sec6 .prof-l{
	width:379px;
	margin-top:40px;
}
	#sec6 .prof-r{
	width:300px;
}
	#sec6 img{
	margin-top:60px;
	height:auto;
	position: relative;
}
	#sec6 .name{
	margin-left:230px;
	position:absolute;
	top:420px;
}
	#sec6 h2{
	font-size:1.2em;
	margin:60px auto;
	line-height:1.7em;
}
	
.band7{
	position:relative;
	width:1000vw;
}
.band7 .wraper{
	width:1000vw;
	height:1035px;
	background-color:#F2F2F2;
	position:absolute;
	right:50%;
	bottom:-150px;
}
#page-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
}
#page-top a {
    display: block;
    width: 70px;
}
}
@media screen and (max-width:969px){
#sec1 .works{
	width:756px;
	margin:0 auto;
}
#sec1 .box1{
	margin-left:5%;
	position: relative;
}
#sec1 .box2{
	margin-left:0%;
}
#sec1 .box3{
	margin-left:8%;
}
#sec1 .box4{
	margin-left:10%;
}
#sec1 .box5{
	margin-left:8%;
}
#sec1 .box6{
	margin-left:4%;
}
#sec1 .box7{
	margin-left:3%;
}
#sec1 .box8{
	margin-left:5%;
}
}
@media screen and (max-width:914px){
#sec1 .works{
	width:713px;
	margin:0 auto;
}
#sec1 .box1{
	margin-left:2%;
	position: relative;
}
#sec1 .box2{
	margin-left:0%;
}
#sec1 .box3{
	margin-left:6%;
}
#sec1 .box4{
	margin-left:4%;
}
#sec1 .box5{
	margin-left:3%;
}
}
@media screen and (max-width:884px){
header{
	margin-left:0;
	}
.topimg img{
	max-width:88%;
}
#sec1 .works{
	width:100%;
	margin:0 auto;
}
#page-top{
	display:none;	
	}
#page-top a{
	display:none;	
	}
.respo-toplogo{
	display:inline-block;
	position:static;
	width:100%;
	margin:0 auto;
}
.respo-toplogo img{
	position:fixed;
	z-index:900;
	top:12px;
}
.respo-toplogo img:hover{
	opacity:0.3;
	-webkit-transition: all .1s ease 0.1s;
	transition: all .1s ease 0.1s;
}
#sec1 .box1{
	margin-left:0%;
	position: relative;
}
#sec1 .box2{
	margin-left:0%;
}
#sec1 .box3{
	margin-left:0%;
}
#sec1 .box4{
	margin-left:0%;
}
#sec1 .box5{
	margin-left:0%;
}
#sec1 .box6{
	margin-left:0%;
}
#sec1 .box7{
	margin-left:0%;
}
#sec1 .box8{
	margin-left:0%;
}
#sec1 .works{
	margin:0 auto;
	}
#sec1 .works{
	text-align:center;
	}
#sec1 .box{
	float:none;
	display:inline-block;
	}
#sec1 .boxnth{
	margin-right:0;	
	}
	.fixed .g-nav-menu li{
	line-height: 3em;
	display:inline-block;
	margin-top:20px;
	margin-right:30px;
	font-size:.9em;
	position:relative;
		z-index:600;
	}
/*nav*/
header .inner{
	width:100%;
	float:none;
	position:static;
	}
	.inner .logo{
		text-align: center;
		margin-bottom:20px;
	}
	.inner .logo img{
		width:60px;
		height:auto;
	}
	li {
	/*float:left;*/
	margin:1.5%;
	}
	.topimg img{
	margin-top:0px;
	position:static;
	max-height:410px;
	min-height:410px;
}
	header{
	width:75%;
	margin:0 auto;
	max-width:100%;
	}
.white{
	position:relative;
	bottom:50px;
	z-index:200;
	width:100%;
}
.white .active{
	width:60%;
	height:88px;
	background-color:#FFFFFF;
	margin-left:0;
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    -webkit-transform: skewY(6deg) translateY(0);
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(6deg) translateY(0);
}
	.whitewrap{
	margin-left:0;
}
	header .logo{
		margin:70px auto 30px auto; 
		text-align:center;
	}
	header .logo img{
		width:60px;
		height:auto;
	}
/*ハンバーガーメニュー*/	
.fixed  ul{
	width:100%;
	text-align:left;
}	
header .inner1,.g-nav,.g-nav-menu{
		display:none;
	}
header .inner2{
		display:block;
	}
	
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  z-index: 800;
}
.global-nav {
  position: fixed;
  right: -320px; /* これで隠れる */
  top: 0;
  width: 200px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 40px;
  background-color: #fff;
  -webkit-transition: all .6s;
  transition: all .6s;
  z-index: 800;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 700;
}
.global-nav__list {
  margin: 0;
  margin-left:12px;
  padding: 0;
  list-style: none;
}
.global-nav__item {
  text-align: center;
  padding: 0 14px;
}
.global-nav__item a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
}
.global-nav__item a:hover {
  background-color: #eee;
}
.hamburger__line {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1px;
  background-color: #111;
  -webkit-transition: all .6s;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 20px;
}
.hamburger__line--3 {
  top: 26px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 700;
  background-color: #eee;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .6s;
  transition: all .6s;
  cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 20px;
}
/*ハンバーガーメニューlast*/

	#sec1{
		margin-top:-100px;
	}
	#sec2{
		margin-top:-150px;
	}
	#sec6 .prof-l{
	width:330px;
	margin-top:40px;
}
	#sec6 .prof-r{
	width:280px;
}
	#sec6 img{
	margin-top:60px;
	height:auto;
	position: relative;
}
	#sec6 .name{
	margin-left:220px;
	position:absolute;
	top:320px;
}
	#sec6 h2{
	font-size:1.2em;
	margin:60px auto;
	line-height:1.7em;
}
}
@media screen and (max-width:818px){
	#sec1 .box{
	width:150px;
	height:100px;
	margin:7px 7px 0 0;
}
	#sec1 .box img{
	width:150px;
	height:100px;
}
	.mask p{
	padding-top:20px;
	color:#333;
	font-size:.7em;
	line-height:1.5em;
}
	.cap1{
	width:150px;
	height:100px;
}
	#sec5 .image{
	width:300px;
	float:left;
}
	#sec5 .image img{
	width:300px;
	height:214px;
	object-fit: cover;
	margin-bottom:20px;
}
	#sec5 .image .link{
	width:120px;
	height:28px;
	border:solid #333 1px;
	position:relative;
	left:180px;
}
	.white .active{
	width:60%;
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    -webkit-transform: skewY(8deg) translateY(0);	
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(8deg) translateY(0);
}
	.band3{
	bottom:570px;
	margin-left:80%;
}
	.band5{
	bottom:600px;
	margin-left:75%;
	height:7px;
}
}
	@media screen and (max-width:782px){
	#sec6 .prof-l{
	width:250px;
	margin-top:40px;
}
	#sec6 .prof-r{
	width:220px;
}
	#sec6 img{
	margin-top:60px;
	height:auto;
	position: relative;
}
	#sec6 .name{
	margin-left:220px;
	position:absolute;
	top:320px;
}
	#sec6 h2{
	font-size:.9em;
	margin:60px auto;
	line-height:1.7em;
}	
	#sec6 .txt{
	font-size:.8em;
	line-height:1.8em;
}
	.band7 .wraper{
	height:930px;
}
}
	@media screen and (max-width:735px){
	#sec1,#sec2,#sec3,#sec4,#sec5,#sec6,#sec7{
	position:relative;
	z-index:10;
	padding-top: 30px;
    margin-top: -30px;
}
	main h1{
	font-size:1.5em;
}
	#sec2{
		margin-top:-150px;
	}
	#sec2 .sub{
	margin:40px auto 0 auto;
	font-size:1.2em;
}
	#sec2 .sub2{
	font-size:.8em;
}
	#sec2 .txt{
	margin-top:40px;
	font-size:.85em;
}
	#sec3 .txt{
	margin:40px auto;
	}
	#sec3 .icon img{
	width:90px;
	height:auto;
}
	#sec3 .box .icon{
	margin-right:25px;
	margin-bottom:50px;
}
	#sec3 .box{
	width:437px;
	}
	#sec3 .icon:nth-child(4n){
	margin-right:0px;
}
	#sec3 .icon p{
	width:90px;
	font-size:.7em;
}
	#sec4 .txt{
	margin:40px auto;
	}
	#sec4 .icon img{
	width:90px;
	height:auto;
}
	#sec4 .box .icon{
	margin-right:25px;
	margin-bottom:50px;
}
	#sec4 .box{
	width:437px;
	}
	#sec4 .icon:nth-child(4n){
	margin-right:0px;
}
	#sec4 .icon p{
	width:90px;
	font-size:.7em;
}
	#sec4 .txt2{
	font-size:.8em;
}
	#sec4 video{
	width:432px;
	height:auto;
	margin-top:90px;
}
	#sec5 .pjt{
	width:412px;
}
	#sec5 .txt{
	float:none;
	margin:0 auto;
}
	#sec5 .image{
	float:none;
	margin:40px auto 0 auto;
}
	#sec6 img{
	margin-top:40px;
	height:auto;
}
	#sec6 .name{
	top:290px;
}
	#sec7{
	margin-top:60px;
}
	.band7 .wraper{
	width:1000vw;
	height:900px;
	background-color:#F2F2F2;
	position:absolute;
	right:50%;
	bottom:-150px;
}
	#seclink p{
	margin-right:0;
	display: inline-block;
}
	#seclink .link-ma img{
	margin:30px auto 0px;
		}
}
	@media screen and (max-width:617px){
	header{
	width:90%;
		}
	.topimg img{
	max-width:95%;
	max-height:auto;
	min-height:auto;
}
	main{
	width:90%;
}
	.white .active{
	width:90%;
	height:88px;
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    -webkit-transform: skewY(9deg) translateY(0);
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(9deg) translateY(0);
}
	#sec1{
	margin-top:-120px;
		}
	#sec2 .txt{
	white-space:pre;
	margin-top:0px;
}
	#sec2 .txt p{
	margin:0px auto;
}
	#sec7 .txt1,#sec7 .txt2{
	margin-top:60px;
	text-align:left;
	line-height:2.5em;
	font-size:.85em;
	white-space:pre;
}
}
	@media screen and (max-width:578px){
	#sec6 h3{
	margin:60px 0 20px 0px;
	font-size:1em;
}
	#sec6 .name{
	position:relative;
	top:30px;
	margin-left:0;
}
	#sec6 .prof-l{
	text-align:left;
	line-height:1.8em;
	float:none;
	width:auto;
}
	#sec6 .prof-r{
	text-align:left;
	line-height:1.8em;
	float:none;
	margin-top:50px;
	width:auto;
}
}
	@media screen and (max-width:535px){
	.topimg img{
	width:100%;
	max-width:95%;
	min-width:auto;
	max-height:100px;
	min-height:100px;
}
	section .ttl{
	text-align: center;
	margin:30px 0 20px 0;
}
	main{
	margin-top:50px;
		}
	.topimg img{
	margin-top:10px;
	width:100%;
	max-height:310px;
	min-height:310px;
	object-fit: cover;
}
	.white .active{
	width:90%;
	height:88px;
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    -webkit-transform: skewY(7deg) translateY(0);
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(7deg) translateY(0);
}
	#sec1 .box{
	width:100px;
	height:70px;
	margin:7px 7px 0 0;
}
	#sec1 .box img{
	width:100px;
	height:70px;}
	
	.mask p{
	display:none;
	padding-top:20px;
	color:#333;
	font-size:.7em;
	line-height:1.5em;
}
	.cap1{
	width:100px;
	height:70px;
}
	#sec3 .txt{
	margin:40px auto;
	white-space:pre;
	}
	#sec3 .icon img{
	width:80px;
	height:auto;
}
	#sec3 .box .icon{
	margin-right:10px;
	margin-bottom:50px;
}
	#sec3 .box{
	width:350px;
	margin-top:70px;
	}
	#sec3 .icon p{
	width:80px;
	font-size:.7em;
	white-space:pre;
	line-height:1em;
}
	#sec3 .icon:nth-child(4n){
	margin-right:0px;
}
	.band4{
	background-color:#F2F2F2;
	width:143%;
	height:47px;
	position:relative;
	z-index:0;
	bottom:1080px;
	margin-left:-100%;
}
	#sec4{
	margin:-50px auto 0 auto;
		}
	#sec4 .txt{
	margin:40px auto;
	white-space:pre;
	}
	#sec4 .icon img{
	width:80px;
	height:auto;
}
	#sec4 .box .icon{
	margin-right:10px;
	margin-bottom:50px;
}
	#sec4 .box{
	width:350px;
	margin-top:70px;
	}
	#sec4 .icon p{
	width:80px;
	font-size:.7em;
	white-space:pre;
	line-height:1em;
}
	#sec4 .icon:nth-child(4n){
	margin-right:0px;
}
	#sec4 .txt2{
	margin:-50px auto 0 auto;
	font-size:.9em;
	white-space:pre;
}
	#sec4 video{
	width:350px;
	margin-top:70px;
}
	#sec6 img{
	margin-top:0px;
}
}
	@media screen and (max-width:482px){
	.white .active{
	width:90%;
	height:88px;
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    -webkit-transform: skewY(9deg) translateY(0);
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(9deg) translateY(0);
}
	#sec5{
	margin:0 auto;
	width:300px
		}
	#sec5 .pjt{
	width:auto;
}
	#sec5 .txt{
	float:none;
	margin:0 0;
	width:300px
}
	#sec5 .image{
	float:none;
	margin:40px 0 0 0;
	width:300px;
}
}
	@media screen and (max-width:414px){
	main h1{
	font-size:1.3em;
}
	.topimg img{
	margin-top:0px;
	width:100%;
	max-height:250px;
	min-height:250px;
	object-fit: cover;
}
	.white .active{
	width:100%;
	height:88px;
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    -webkit-transform: skewY(9deg) translateY(0);
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(9deg) translateY(0);
}
	#sec5 .txt p{
	margin:0 auto;
	white-space:pre;
}
}
	@media screen and (max-width:390px){
	#sec4 .txt{
	white-space:pre;
	}
	#sec6 .name .mainname{
		font-size:1.5em;
	}
	#sec7 .txt1{
	white-space:pre;
	}
	#page-top {
    position: fixed;
	z-index:800;
    bottom: 30px;
    right: 30px;
}
}
	@media screen and (max-width:375px){
	.topimg img{
	width:100%;
	max-width:95%;
	min-width:auto;
	max-height:auto;
	min-height:auto;
}
	.white{
	position:relative;
	bottom:45px;
	z-index:200;
	width:100%;
}
	.white .active{
	width:100%;
	height:88px;
	-webkit-transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    -webkit-transform: skewY(5deg) translateY(0);
	transition: transform 1s cubic-bezier/*(0.645, 0.045, 0.355, 1.000)*/ .8s;
    transform: skewY(5deg) translateY(0);
}
	#sec2 .sub2{
	margin-bottom:40px;
}
	#sec3 .txt{
	margin:40px auto;
	white-space:pre;
	}
	#sec3 .icon img{
	width:70px;
	height:auto;
}
	#sec3 .box .icon{
	margin-right:10px;
	margin-bottom:50px;
}
	#sec3 .box{
	width:310px;
	margin-top:70px;
	}
	#sec3 .icon p{
	width:70px;
	font-size:.7em;
	white-space:pre;
	line-height:1em;
}
	#sec3 .icon:nth-child(4n){
	margin-right:0px;
}
	#sec4 .txt{
	margin:40px auto;
	white-space:pre;
	}
	#sec4 .icon img{
	width:70px;
	height:auto;
}
	#sec4 .box .icon{
	margin-right:10px;
	margin-bottom:50px;
}
	#sec4 .box{
	width:310px;
	margin-top:70px;
	}
	#sec4 .icon p{
	width:70px;
	font-size:.7em;
	white-space:pre;
	line-height:1em;
}
	#sec4 .icon:nth-child(4n){
	margin-right:0px;
}
	.band4{
	background-color:#F2F2F2;
	width:143%;
	height:47px;
	position:relative;
	z-index:0;
	bottom:1060px;
	margin-left:-100%;
}
	#sec4 video{
	width:320px;
	margin-top:70px;
}
	/*#sec5 .image .link .tri{
	width: 10px;
	height: 10px;
	border: 1px solid;
	border-color: #333 #333 transparent transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-left:90px;
	position:relative;
	bottom:18px;
}
	#sec5 .image .link p{
	margin-top:4px;
}*/
	.band7 .wraper{
	height:865px;
}
}
	@media screen and (max-width:320px){
	.white{
	position:relative;
	bottom:42px;
	z-index:200;
	width:100%;
}
	.topimg img{
	margin-top:10px;
	width:100%;
	max-height:200px;
	min-height:200px;
	object-fit: cover;
}
	#sec1 .box{
	width:87px;
	height:65px;
	margin:5px 5px 0 0;
}
	#sec1 .box img{
	width:87px;
	height:65px;}
	
	.mask p{
	display:none;
	padding-top:20px;
	color:#333;
	font-size:.7em;
	line-height:1.5em;
}
	.cap1{
	width:87px;
	height:65px;
}
	#sec3 .txt{
	margin:40px auto;
	white-space:pre;
	}
	#sec3 .icon img{
	width:60px;
	height:auto;
}
	#sec3 .box .icon{
	margin-right:10px;
	margin-bottom:50px;
}
	#sec3 .box{
	width:310px;
	margin-top:70px;
	}
	#sec3 .icon p{
	width:60px;
	font-size:.7em;
	white-space:pre;
	line-height:1em;
}
	#sec3 .icon:nth-child(4n){
	margin-right:0px;
}
	#sec4 .txt{
	margin:40px auto;
	white-space:pre;
	}
	#sec4 .icon img{
	width:60px;
	height:auto;
}
	#sec4 .box .icon{
	margin-right:10px;
	margin-bottom:50px;
}
	#sec4 .box{
	width:310px;
	margin-top:70px;
	}
	#sec4 .icon p{
	width:60px;
	font-size:.7em;
	white-space:pre;
	line-height:1em;
}
	#sec4 .icon:nth-child(4n){
	margin-right:0px;
}
	#sec4 .txt2{
	font-size:.8em;
}
	#sec4 video{
	width:290px;
	height:auto;
	margin-top:50px;
}
	#sec1{
	margin-top:-50px;
		}
	#sec5 .txt{
	width:300px;
}
	#sec5 .txt p{
	white-space:pre;
}
	#sec5 .image{
	width:290px;
}
	#sec5 .image img{
	width:290px;
}
	#sec5 .image .link{
	width:120px;
	height:28px;
	border:solid #333 1px;
	position:relative;
	left:168px;
}
	#sec7 .txt1,#sec7 .txt2{
	font-size:.8em;
}
}