@charset "UTF-8";

body{	
	background-image:none;
}

h1,
h2,
h3,
h3::after,
h5,
h4{
	background: none;
	border: none;
	box-shadow: none;
}

body{font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;margin:0; padding: 0; font-size: 16px; color: #333;    line-height: 2;}
ul{margin:0; padding: 0;}
li{list-style-type: none;}

#contents{
	width:100%;
	margin:0 auto;
	text-align:left;
	min-height:inherit;
	padding-bottom: 10px;
	min-width: unset;
	color:#434343;
}

.flexBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.youtube {
    position: relative;
    width: 80%;
    padding: 45% 0 0 0;
    margin: 10px auto 5rem;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.center {
	text-align: center;
}

#mainPhotoBg {
	background: linear-gradient(#ffffff 83%, #f3f0e9 83%, #f3f0e9 85%, #ffffff 85%,#ffffff 86%,#f3f0e9 86%, #f3f0e9 89%, #ffffff 89%,#ffffff 90%,#f3f0e9 90%,#f3f0e9 96%,#ffffff 96%);
}

@keyframes slideIn01 {
  0% {
    opacity: 0;
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideIn02 {
  10% {
    opacity: 0;
    transform: translateX(1000px);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideIn03 {
  20% {
    opacity: 0;
    transform: translateY(500px);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn04 {
	
  30% {
    opacity: 0;
    transform: translateY(-800px);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn05 {
  50% {
    opacity: 0;
    transform: translateX(-1000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bgextendAnimeBase {
from {
opacity:0;
}

	to {
	opacity:1;  
	}
}

.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
		0% {
		opacity: 0;
		}
		100% {
		opacity: 1;
	}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666;/*伸びる背景色の設定*/
  top:-0.7rem;
  left:-1.2rem;
  padding: 0.8rem 1.2rem 0.7rem;

}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
	opacity: 0;
}

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;
	opacity:0;
}

.slidein {
	opacity: 0;
	transform : translateX(-500px);
	transition : all 2s;
	}

.slidein.scrollin {
	opacity: 1;
	transform : translateX(0);
	}

.slidein01 {
	opacity: 0;
	transform : translateX(-1000px);
	transition : all 2s;
	}

.slidein01.scrollin01 {
	opacity: 1;
	transform : translateX(0);
	}

.slidein02 {
	opacity: 0;
	transform : translateX(1000px);
	transition : all 2s;
	}

.slidein02.scrollin02 {
	opacity: 1;
	transform : translateX(0);
	}

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 2s;
}
 
.fadein.active {
  opacity : 1;
  transform : translate(0, 0);
}

#contents h2 {
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
	font-size: 36px;
	text-align: center;
}

#contents h2 span {
	position: relative;
	z-index: 2;
}

#contents h2::before {
	content: attr(data-en);
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%);
	color: #E9E5DE;
	font-size: 68px;
	z-index: -1;
}




@media screen and  (min-width: 320px) and (max-width: 768px) {
	#contents section p,#contents sectionli {
		margin: 0;
		font-size: 14px;
	}
	
	.inner {
		width:92%;
		margin: 0 auto;
		min-width: 92%;
	}
	
	.pc {
		display: none;
	}
		
	.youtube {
		width: 100%;
		padding: 56.25% 0 0 0;
		margin: 0 auto 2rem;
	}	
		
	#contents section {
		margin:0 auto 40px;
	}
	
	.relaBox {
		position: relative;
	}
	
	.mainPhoto {
		width:100%;
		position:relative;
		margin: 60px auto ;
		height: 400px;
	}

	.mainImege01 {
		animation: slideIn01 1.5s 1;
		position: relative;
		top: 0;
		left: 8%;
		width: 80%;
		z-index: 4;
	}

	.mainImege02 {
		animation: slideIn01 2.5s 1;
		position: absolute;
		top: 43%;
		left: 42%;
		width: 54%;
		z-index: 3;
	}

	.mainImege03 {
		position: absolute;
		bottom: 10%;
		left: -16px;
		animation: slideIn02 2s 1;
		width: 60%;
		z-index: 1;
	}
	
	.mainImege04 {
		position: absolute;
		right: 0%;
		bottom:-60px;
		animation: slideIn02 2.5s 1;
		width: 50%;
		z-index: 2;
	}
	
	img.mainImege05 {
		position: absolute;
		left: 30px;
		top: -43px;
		z-index: 3;
		width: 50%;
		animation: slideIn01 3s 1;
	}
	
	#about .text h3 {
		margin: 0;
		background: #fff;
		height: auto;
		width: auto;
		font-size: 22px;
		padding: 1rem 1rem 0.6rem;
		line-height: 1;
	}

	#about .text p {
		background: #fff;
    	line-height: 1.6rem;
		padding: 1rem;
	}
	
	#about .photo {
		text-align: right;
	}
	
	#point h3 {
		font-size: 18px;
		padding: 0;
		margin: 0 0 0.8rem;
	}
	
	#contents h2 {
		font-size: 26px;
		padding: 45px 0 20px;
	}
	
	#contents h2::before {
		top: 32px;
		font-size: 40px;
		white-space: nowrap;
	}

	#point .no01 .text,#point .no03 .text,#point .no05 .text {
		right:0;
		padding: 1.6rem 0;
	}
	
	#point .no02 .photo,#point .no04 .photo,#point .no06 .photo {
		text-align: right;
	}	

	#point .no02 .text,#point .no04 .text,#point .no06 .text {
		padding: 1.8rem 1.8rem 1.8rem 0;
	}
	
	#flow li {
		position: relative;
		margin: 0 auto 2.4rem;
    	width: 90%;
	}
	
	#flow li:after {
		content: "";
		position: absolute;
		bottom: -28%;
		left: 44%;
		border: 20px solid transparent;
		border-top: 20px solid #434343;
	}
	
	#flow li:last-child {
		margin-bottom: 2rem;
	}
	
	#flow li:last-child:after {
		border: none;
	}
	
	#color .center {
		margin-bottom: 2rem;
	}
	
	#color .center img {
		width: 60%;
	}
	
	#color .textmb {
		margin-bottom: 2rem;
	}
	
	#color ul {
		justify-content: space-between;
	}
	
	#color ul li {
		width: 30%;
		text-align: center;
		margin-bottom: 1rem;
	}
	
	#color ul li img {
		margin-bottom: 0.4rem;
	}
	
	#color ul li p {
		font-size: 10px;
	}
	
	#gallery p {
		background: #fff;
		display: inline-block;
		padding: 0.6rem 1.2rem;
		position: absolute;
		font-weight: bold;
	}
	
	.gallery01 .text {
		left:0;
		top:7%;
	}
	
	.gallery02 .text {
		right:0;
		top:7%;
	}
	
	.gallery03 .text {
		left:0;
		top:7%;
	}

	.gallery04 .text {
		right:0;
		top:5%;
	}
	
	#spec h3 {
		padding: 0;
		margin: 0 ;
		font-size: 100%;
	}
	
	#contents section#spec p {
		margin: 0 0 1.6rem ;
	}	
	
	#spec .bgImage {
		background: url(../image/bg01.jpg) no-repeat 100% 85%;
		background-size: 54%;
		margin-bottom: 2rem;
	}
	
	#spec h5 {
		font-size: 140%;
		text-align: center;
		margin: 0 auto 1rem;
		line-height: 1.4;
	}
	
	#spec .photoBox {
		margin-bottom: 2rem;
	}
	
	#contents #spec ul.btnList li {
		margin-bottom: 1.6rem;
	}
	
	#contents #spec ul.btnList a {
		background: #434343;
		display: block;
		padding: 0.8rem 1.8rem;
	}
	
	#spec .border01 {
		background-image: linear-gradient(to right, #333 10px, transparent 10px);
		background-size: 25px 1px;
		background-repeat: repeat-x;
		background-position: left bottom;
		padding-bottom: 1rem;
		margin-bottom: 2rem;
	}
	
	#contents section#spec {
		margin: 0 auto 0;
	}	
	
	.bgLine {
		height: 120px;
		background: linear-gradient(#ffffff 20%, #f3f0e9 20%, #f3f0e9 30%, #ffffff 30%,#ffffff 38%,#f3f0e9 38%, #f3f0e9 58%, #ffffff 58%,#ffffff 66%,#f3f0e9 66%,#f3f0e9 100%,#ffffff 100%);
		margin-bottom: 40px;
	}
	
	ul.btnList {
		width: 82%;
		margin: 0 auto;
	}
	
	
	
	
	
}



@media screen and (min-width: 768px) and (max-width: 769px)  {
	.mainPhoto {
		width: 100%;
		position: relative;
		margin: 0 auto;
		height: 800px;
	}

	#flow li {
		width: 80%;
		margin: 0 auto 3.4rem;
	}	
	
	#flow li:after {
		bottom: -19%;
	}	
	
	#spec .border01,#spec .border02 {
		display: block;
		width: 90%;
		margin: 0 auto 2rem;
	}
	
	
}


@media screen and  (min-width: 769px) {
	

	#contents section  p,#contents section  li {
		margin: 0;
		font-size: 18px;
	}

	.sp {
		display: none;
	}
	
	.inner {
		width:94%;
		margin: 0 auto;
	}
	
	.relaBox {
		position: relative;
	}

	#contents section {
		margin:0 auto 140px;
	}
	
	#contents section.mainPhoto {
		margin:0 auto 60px;
	}
	
	.mainPhoto {
	  width:1200px;
	  height: 800px;
	  position:relative;
		margin: 50px auto 0;
	}

	.mainImege01 {
		animation: slideIn01 1.5s 1;
		position: relative;
		top: -5%;
	}

	.mainImege02 {
		animation: slideIn01 2.5s 1;
		position: absolute;
		top: 50%;
		left: 10%;
	}

	.mainImege03 {
		position: absolute;
		bottom: 0;
		right: 0;
		animation: slideIn02 2s 1;
	}

	.mainImege04 {
		position: absolute;
		right: -8%;
		animation: slideIn02 2.5s 1;
	}
	
	.mainImege05 {
		position: absolute;
		right: 150px;
		top:-60px;
		animation: slideIn02 3s 1;
	}	

	#about .text h3 {
		margin: 0;
		position: absolute;
		background: #fff;
		height: auto;
		width: auto;
		bottom: 30%;
		font-size: 36px;
		padding: 1rem 1rem 0.6rem;
		line-height: 1;
	}

	#about .text p {
		position: absolute;
		background: #fff;
		bottom: 6%;
		line-height: 2rem;
		padding: 1rem;
	}
	
	#about .photo {
		text-align: right;
	}
	
	#point h3 {
		font-size: 34px;
		padding: 0;
		margin: 0 0 1.8rem;
	}
	
	#point .text {
		background: rgb(255 255 255 / 70%);
		position: absolute;
		box-sizing: border-box;
	}

	
	#point .no01 .text,#point .no03 .text,#point .no05 .text {
		right:0;
		padding: 1.8rem 0 1.8rem 1.8rem;
	}
	
	#point .no02 .photo,#point .no04 .photo,#point .no06 .photo {
		text-align: right;
	}	

	#point .no02 .text,#point .no04 .text,#point .no06 .text {
		padding: 1.8rem 1.8rem 1.8rem 0;
		left:0;
	}
	
	#point .no01 .text {
		top:10%;
	}
	
	#point .no02 .text {
		top:10%;
		width: 53%;
	}
	
	#point .no03 .text {
		bottom:10%;
		width: 58%;
	}	
	
	#point .no04 .text {
		top:14%;
		width: 45%;
	}	
	
	#point .no05 .text {
		bottom:10%;
		width: 44%;
	}
	
	#point .no06 .text {
		bottom:10%;
	}
	
	#point .no06 {
		margin-bottom: 4rem;
	}
	
	#flow {
		margin-bottom: 4rem;
	}
	
	#flow li {
		position: relative;
	}
	
	#flow li:after {
		content: "";
		position: absolute;
		top: 50%;
		right: -17%;
		transform: translateY(-50%);
		border: 18px solid transparent;
		border-left: 20px solid #434343;
	}	

	#flow li:last-child:after {
		border: none;
	}
	
	#color .center {
		margin-bottom: 4rem;
	}
	
	#color .textmb {
		margin-bottom: 2rem;
	}
	
	#color ul {
		justify-content: space-between;
	}
	
	#color ul li {
		width: 17%;
		text-align: center;
		margin-bottom: 2rem;
	}
	
	#gallery p {
		background: #fff;
		display: inline-block;
		padding: 0.6rem 1.2rem;
		position: absolute;
		font-weight: bold;
	}
	
	.gallery03 {
		z-index: 2;
	}
	
	.gallery04 {
		z-index: 1;
	}	
	
	.gallery01 .text {
		left:0;
		top:7%;
	}
	
	.gallery02 .text {
		right:0;
		top:7%;
	}
	
	.gallery03 .text {
		left:0;
		top:-7%;
	}

	.gallery04 .text {
		right:8%;
		top:5%;
	}

	.gallery02 .photo {
		text-align: right;
		margin: -5% 0 0 auto;
		display: block;
	}
	
	.gallery03 .photo {
		margin: -5% auto 0 0;
	}	
	
	.gallery04 .photo {
		text-align: right;
		margin: -18% 8% 0 auto;
		display: block;
	}
	
	.gallery01:after {
		content: "";
		width:96px;
		height: 96px;
		background:#F3F0E9;
		position: absolute;
		right:15%;
		top:20%;
	}
	
	.gallery02:after {
		content: "";
		width:195px;
		height:195px;
		background:#F3F0E9;
		position: absolute;
		right:-6%;
		top:-35%;
		z-index: -1;
	}
	
	.gallery03:after {
		content: "";
		width:250px;
		height:250px;
		background:#F3F0E9;
		position: absolute;
		left:-8%;
		bottom:-35%;
		z-index: -1;
	}
	
	.gallery04:after {
		content: "";
		width:142px;
		height:142px;
		background:#F3F0E9;
		position: absolute;
		left:30%;
		bottom:30%;
		z-index: -1;
	}
	
	#spec h3 {
		padding: 0;
		margin: 0 ;
	}
	
	#contents section#spec p {
		margin: 0 0 2rem ;
	}	
	
	#spec .bgImage {
		background: url("../image/bg01.jpg") no-repeat 100% 100%;
		background-size: 48%;
		margin-bottom: 120px;
	}
	
	#spec h5 {
		font-size: 240%;
		text-align: center;
		margin: 0 auto 2rem;
	}
	
	#spec .btnBox {
		width: 45%;
	}
	
	#contents #spec ul.btnList li {
		margin-bottom: 1.6rem;
	}
	
	#contents #spec ul.btnList a {
		background: #434343;
		display: block;
		padding: 1rem 2rem;
	}
	
	#spec .border01 {
		background-image: linear-gradient(to right, #333 10px, transparent 10px);
		background-size: 25px 1px;
		background-repeat: repeat-x;
		background-position: left bottom;
		padding-bottom: 4rem;
		margin-bottom: 4rem;
	}
	
	#contents section#spec {
		margin: 0 auto 45px;
	}	
	
	.bgLine {
		height: 120px;
		background: linear-gradient(#ffffff 20%, #f3f0e9 20%, #f3f0e9 30%, #ffffff 30%,#ffffff 38%,#f3f0e9 38%, #f3f0e9 58%, #ffffff 58%,#ffffff 66%,#f3f0e9 66%,#f3f0e9 100%,#ffffff 100%);
		margin-bottom: 40px;
	}
	
	ul.btnList {
		width: 82%;
		margin: 0 auto;
	}
	
	
	
	
	
}

@media screen and  (min-width: 1200px) {
	.inner {
		max-width: 1200px;
		width:100%;
		margin: 0 auto;
	}	
	
}



#pageTop {
	display: none;
	position: fixed;
	bottom: 35px;
	right: 20px;
	text-decoration:none;
	z-index:1000;
	text-align: center;
	padding: 6px 18px;
    background: #434343;
    font-weight: bold;
    font-size: 90%;
}

#pageTop a {
	color:#fff;
}

#pageTop a:hover {
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	#pageTop {
		bottom: 10px;
		right: 10px;
		padding: 6px 10px;
		font-size: 70%;
	}
}