@charset "utf-8";
/* CSS Document */

.section-top {
	margin: 200px auto;
	position: relative;
	max-width: 1700px;
}
.section-top-wrapper {
		position: relative;
	display: flex;
}
.section-top-wrapper h2 {
	font-family: A-OTF Ryumin Pr6N KL,YuMincho, 'Noto Serif JP', "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-size: 4rem;
	color: #6a8079;
	margin: 15% 0 0 100px;
}
.section-top__top-image {
	width: 60%;
	height: auto;
	margin-left: auto;
}
.section-top__script {
	position: absolute;
	width: 600px;
	top: 60%;
	left: 20%;
}
@media(max-width: 1024px) {
	.section-top {
		margin: 50px 0;
		width: 100%;
	}
	.section-top-wrapper {
		position: relative;
	display: flex;
		flex-direction: column-reverse;
}
	.section-top-wrapper h2 {
  font-size: 3.2rem;
	color: #6a8079;
	margin: 0 0 0 60px;
}
	.section-top__top-image {
	width: 85%;
		max-width: 600px;
	height: auto;
	margin-left: auto;
}
	.section-top__script {
	display: none;
}
}
@media(max-width: 599px) {
	.section-top {
		margin: 30px 0;
	}
	.section-top-wrapper {
		position: relative;
	display: flex;
		flex-direction: column-reverse;
}
	.section-top-wrapper h2 {
  font-size: 2.4rem;
	color: #6a8079;
	margin: 0 0 0 24px;
}
	.section-top__top-image {
	width: 85%;
	height: auto;
	margin-left: auto;
}

}
.section-greeting {
  max-width: 1700px;
	position: relative;
  margin: 80px auto 0;
  padding: 95px 0 30px;
}
.section-greeting h4 {
  color: #897e9c;
  text-transform: uppercase;
  font-family: Baskerville URW,'Libre Baskerville';
  position: absolute;
  left: 100px;
  writing-mode: vertical-rl;
  line-height: 1;
}
.section-greeting h4::before { /*下線を引く*/
  content: "";
  width: 1px;
  height: 180px;
  background-color: #897e9c;
  display: block; /*疑似要素はdisplay:block; で指定しておく*/
  position: absolute;
  bottom: 0;
  left: 0; /*フォントの仕様で文字の下ぴったりの線は引けなかった*/
}
.section-greeting h2 {
  font-family: A-OTF Ryumin Pr6N KL,YuMincho, 'Noto Serif JP', "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-size: 3.2rem;
  position: absolute;
  top: 165px;
  left: 170px;
  color: #897e9c;
}
.section-greeting-wrapper {
	position: relative;
	display: flex;
}
.section-greeting__photo {
	z-index: 10;
}
.section-greeting__photo img {
	width: 150%;
	margin: 200px 0 0 100px;	
}
.section-greeting__comment {
	background: rgb(202, 219, 213, 0.8);
	    padding: 200px 100px 200px 400px;
    margin: 290px 0 0 -100px;
}
.section-greeting__name {
	font-size: 2.4rem;
	font-weight: 600;
}
@media(max-width: 1024px){
	.section-greeting {
	position: relative;
  margin: 120px auto 0;
  padding: 0px 0 0px;
}
	  .section-greeting h4 {
    position: absolute;
    left: 24px;
    font-size: 1.6rem;
  }
  .section-greeting h4::before { /*下線を引く*/
    height: 130px;
    bottom: 0;
    left: 0; /*フォントの仕様で文字の下ぴったりの線は引けなかった*/
  }
  .section-greeting h2 {
    font-size: 2.4rem;
    position: relative;
    top: 55px;
    left: 0;
    margin-left: 70px;
  }
	.section-greeting-wrapper {
	display: block;
}
	.section-greeting__photo img {
    width: 80%;
    max-width: 500px;
		margin: -20vh 0 0;
    position: absolute;
    z-index: 10;
}
	.section-greeting__comment {
	background: rgb(202, 219, 213, 0.8);
	    padding: 40vw 24px 100px;
    margin: 40vw auto 0;
}
	.section-greeting__name {
		font-size: 2rem;
	}
	.section-greeting p {
		font-size: 1.6rem;
		line-height: 2.8rem;
	}
}
@media(max-width: 599px){
	.section-greeting {
  max-width: 1700px;
	position: relative;
  margin: 120px auto 0;
  padding: 0px 0 0px;
}
	  .section-greeting h4 {
    position: absolute;
    left: 24px;
    font-size: 1.6rem;
  }
  .section-greeting h4::before { /*下線を引く*/
    height: 130px;
    bottom: 0;
    left: 0; /*フォントの仕様で文字の下ぴったりの線は引けなかった*/
  }
  .section-greeting h2 {
    font-size: 2.4rem;
    position: relative;
    top: 55px;
    left: 0;
    margin-left: 70px;
  }
	.section-greeting-wrapper {
	display: block;
}
	.section-greeting__photo img {
    width: 80%;
    margin: -21vh 0 0;
    position: absolute;
    z-index: 10;	
}
	.section-greeting__comment {
	background: rgb(202, 219, 213, 0.8);
	    padding: 50vw 24px 100px;
    margin: 33vh auto 0;
}
	.section-greeting__name {
		font-size: 2rem;
	}
	.section-greeting p {
		font-size: 1.6rem;
		line-height: 2.8rem;
	}
}
.section-gallery {
  max-width: 1700px;
	position: relative;
  margin: 50px auto;
  padding: 95px 0 30px;
}
.section-gallery h4 {
  color: #897e9c;
  text-transform: uppercase;
  font-family: Baskerville URW, 'Libre Baskerville';
  position: absolute;
  left: 100px;
  writing-mode: vertical-rl;
  line-height: 1;
}
.section-gallery h4::before { /*下線を引く*/
  content: "";
  width: 1px;
  height: 180px;
  background-color: #897e9c;
  display: block; /*疑似要素はdisplay:block; で指定しておく*/
  position: absolute;
  bottom: 0;
  left: 0; /*フォントの仕様で文字の下ぴったりの線は引けなかった*/
}
.section-gallery h2 {
  font-family: A-OTF Ryumin Pr6N KL,YuMincho, 'Noto Serif JP', "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-size: 3.2rem;
  position: absolute;
  top: 150px;
  left: 170px;
  color: #897e9c;
}
/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
columns: 4;/*段組みの数*/
padding:0 15px;/*ギャラリー左右に余白をつける*/
margin:150px 6.94%;
}
.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
list-style:none;
}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}
/*画像を出現させるアニメーションCSS*/

.flipLeft{
animation-name: flipLeft;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}

@keyframes flipLeft{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}
@media(max-width: 1024px){
	 .section-gallery h4 {
    position: absolute;
    left: 24px;
    font-size: 1.6rem;
  }
  .section-gallery h4::before { /*下線を引く*/
    height: 130px;
    bottom: 0;
    left: 0; /*フォントの仕様で文字の下ぴったりの線は引けなかった*/
  }
  .section-gallery h2 {
    font-size: 2.4rem;
    position: relative;
    top: 50px;
    left: 0;
    margin-left: 70px;
  }
	.gallery {
		columns: 3;
		margin:100px 24px 0;
	}
}
@media(max-width: 599px){
	 .section-gallery h4 {
    position: absolute;
		top: 98px;
    left: 24px;
    font-size: 1.6rem;
  }
  .section-gallery h4::before { /*下線を引く*/
    height: 130px;
    bottom: 0;
    left: 0; /*フォントの仕様で文字の下ぴったりの線は引けなかった*/
  }
  .section-gallery h2 {
    font-size: 2.4rem;
    position: relative;
    top: 50px;
    left: 0;
    margin-left: 70px;
  }
	.gallery {
		columns: 2;
		margin:80px 24px 0;
	}
	
}