@charset "UTF-8";

/* 共通部分
------------------------------- */

/* 使用色
-------------------------------
キーカラー　薄桜 うすざくら　#fdeff2

うすい緑#cef5c4
鴇色 ときいろ#f4b3c2

文字からす色#180614
*/


html {
	font-size: 100%;
}
body{
	margin: 0;
	font-family: "CINZEL DECORATIVE", "Caveat", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
	max-width: 1080px;
	line-height: 1.7;
	background-color: #FFFFFF;
	color: #180614;
	letter-spacing: 0.1em;
	margin: auto;
}

img {
	height: 100%;
	width: 100%;
}

a {
	text-decoration: none;
	color: #180614;
}
.wrapper {
	max-width: 1080px;
	background-color: #fdeff2;
	text-align: center;
}

h1 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-style: normal;
	font-size: 12em;
}

h2 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-style: normal;
	font-size: 1.8em;
	padding: 0.2em 0.6em;/*文字周りの余白*/
	display: inline-block;/*おまじない*/
	line-height: 1.3;/*行高*/
	background: #cef5c4;/*背景色*/
	vertical-align: middle;
	border-radius: 1em 1em 1em 1em;/*左側の角を丸く*/
}

h3 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-style: normal;
	font-size: 1.5em;
	padding: 0.2em 0.6em;/*文字周りの余白*/
	display: inline-block;/*おまじない*/
	line-height: 1.3;/*行高*/
	background: #cef5c4;/*背景色*/
	vertical-align: middle;
	border-radius: 1em 1em 1em 1em;/*左側の角を丸く*/
}

h4 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-style: normal;
	font-size: 1.2em;
}

p {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-style: normal;
	font-size: 1em;
}


/* グリッド設定
------------------------------- */
.wrapper {
	display: grid;
	grid-template-columns:20px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 20px;
	grid-template-rows:auto;
}

.grid1 {
	grid-column-start:2;
	grid-row-start:1;
	grid-column-end:12;
	grid-row-end:2;
}
.grid2 {
	grid-column-start:2;
	grid-row-start:2;
	grid-column-end:12;
	grid-row-end:3;
}
.grid3 {
	grid-column-start:2;
	grid-row-start:3;
	grid-column-end:12;
	grid-row-end:4;
}
.grid4 {
	grid-column-start:2;
	grid-row-start:4;
	grid-column-end:12;
	grid-row-end:5;
}
.grid4L {
	grid-column-start:2;
	grid-row-start:5;
	grid-column-end:8;
	grid-row-end:6;
}
.grid4R {
	grid-column-start:7;
	grid-row-start:5;
	grid-column-end:12;
	grid-row-end:6;
	margin-top: 10px;
}
.grid5 {
	grid-column-start:2;
	grid-row-start:6;
	grid-column-end:12;
	grid-row-end:7;
}
.grid5L {
	grid-column-start:2;
	grid-row-start:7;
	grid-column-end:8;
	grid-row-end:8;
}
.grid5R {
	grid-column-start:7;
	grid-row-start:7;
	grid-column-end:12;
	grid-row-end:8;
}
.grid6 {
	grid-column-start:2;
	grid-row-start:8;
	grid-column-end:12;
	grid-row-end:9;
}
.grid7 {
	grid-column-start:2;
	grid-row-start:9;
	grid-column-end:12;
	grid-row-end:10;
}
.grid8 {
	grid-column-start:2;
	grid-row-start:10;
	grid-column-end:12;
	grid-row-end:11;
}
.grid9 {
	grid-column-start:2;
	grid-row-start:11;
	grid-column-end:12;
	grid-row-end:12;
}
.grid10 {
	grid-column-start:2;
	grid-row-start:12;
	grid-column-end:12;
	grid-row-end:13;
}
.grid11 {
	grid-column-start:2;
	grid-row-start:13;
	grid-column-end:12;
	grid-row-end:14;
}
.grid12 {
	grid-column-start:2;
	grid-row-start:14;
	grid-column-end:12;
	grid-row-end:15;
}
.grid13 {
	grid-column-start:2;
	grid-row-start:15;
	grid-column-end:12;
	grid-row-end:16;
}
.grid14 {
	grid-column-start:2;
	grid-row-start:16;
	grid-column-end:12;
	grid-row-end:17;
}




.grid {
	grid-column-start:2;
	grid-row-start:auto;
	grid-column-end:12;
	grid-row-end:auto;
}


/* トップタイトル部分
------------------------------- */
.title {
	margin:0  auto 20px auto;
	padding-top: 200px;
}

.Scroll {
	grid-column-start:1;
	grid-row-start:2;
	grid-column-end:2;
	grid-row-end:3;
}

.canvas1 {
	margin-top: 0px;
	max-width:600px
  }
  .canvas2 {
	margin-top:-440px;
	max-width:600px
  }
  .canvas3 {
	margin-top:-440px;
	max-width:600px
  }

.title h1 {
	font-family: "Cinzel Decorative", serif;
	font-weight: 400;
	text-align: center;
	margin: -300px auto auto 70px;
}

.title h4  {
	font-family: "Caveat", serif;
	font-weight: 400;
	font-size: 3em;
	text-align: center;
}

.Scroll  {
	margin: 30px auto 300px auto;
	height: 200px;
}
.Scroll p {
	font-family: "Caveat", serif;
	font-size: 2em;

}

.vertical {
	writing-mode: vertical-rl;
	text-align: left;
	margin-left: 30px;
}


/* 矢印とうごき
------------------------------- */

.arrow {
  width: 0;
  height: 100px;
  border: 1px solid #180614;
  position: relative;
  animation: scroll 1.5s infinite;
  -webkit-animation: scroll 1.5s infinite;
}

.arrow::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: -5px;
    width: 1px;
    height: 10px;

    /* triangle */
    border-top: 10px solid #180614;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }

@keyframes scroll {
  0% {
    height: 100px;
  }
  30% {
    height: 40px;
  }
  60% {
    height: 100px;
  }
}

@-webkit-keyframes scroll {
  0% {
    height: 100px;
  }
  30% {
    height: 40px;
  }
  60% {
    height: 100px;
  }
}


/*  コメント部分
------------------------------- */
.comment p {
	padding: 10px;
	text-align: left;
}
.commentw p {
	background-color: rgba(255, 255, 255, 0.8);
}
.comment img {
	width: 600px;
	height: 400px;
}


/* コンテンツ部分
------------------------------- */
.contents {
	margin: 0px 90px;
	padding: 0px auto;
}


.elements {
	margin: 10px auto 200px auto;
}
.elements img {
	max-width: 900px;
	margin-top: 30px;
}

.element {
	padding: 100px 0;
}
.element h2 {
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	margin: 30px 0;
}

.element p {
	text-align:left;
}



/* プロフィール部分
------------------------------- */
.profile {
	padding: 50px;
}

.profile p {
	text-align: left;
	margin: 20px 0;
}

/* コメント部分
------------------------------- */
.p1 p {
	text-align: left;

}

.p2 p {
	margin-top: 20px;
	background-color: #cef5c4;
	display: block;
	width: 15em;
	text-align: left;
}
/* コンタクト部分
------------------------------- */


.contact p {
	text-align: center;
}
.mail {
	max-width: 300px;
	margin: 120px auto;
   }
   a.btn_03 {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 100%;
	 height: 50px;
	 position: relative;
	 background: #ffea00;
	 border: 1px solid #ffea00;
	 border-radius: 30px;
	 box-sizing: border-box;
	 padding: 0 45px 0 25px;
	 color: red;
	 font-size: 16px;
	 letter-spacing: 0.1em;
	 line-height: 1.3;
	 text-align: left;
	 text-decoration: none;
	 transition-duration: 0.3s;
   }
   a.btn_03:before {
	 content: '';
	 width: 8px;
	 height: 8px;
	 border: 0;
	 border-top: 2px solid red;
	 border-right: 2px solid red;
	 transform: rotate(45deg);
	 position: absolute;
	 top: 50%;
	 right: 25px;
	 margin-top: -6px;
   }
   a.btn_03:hover {
	 background: #fff;
	 color: red;
   }
   a.btn_03:hover:before {
	 border-top: 2px solid red;
	 border-right: 2px solid red;
   }

/* フッター部分
------------------------------- */


.futter{
	padding: 10px;
	text-align: center;
	background-color: #F4B3C2;
	display: flex;
	justify-content: center;
}


.futter p {
	margin: 30px 20px;
}

.futter img {
width: 15%;
height: 100%;
}




/*  上へ戻るボタン
---------- */
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	bottom: 45px;
	background: #cef5c4;
	opacity: 0.7;
  }
  #page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
  }
  #page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f106';
	font-size: 25px;
	color: #180614;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 45px;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
  }







/* うごきの演出
------------------------------- */


/* 上からふわっ
------------------------------- */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-250px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* 下からふわっ
------------------------------- */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(200px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
	animation-name:fadeLeftAnime;
	animation-duration:2.0s;
	animation-fill-mode:forwards;
	opacity:0;
	}

	@keyframes fadeLeftAnime{
	  from {
		opacity: 0;
		transform: translateX(-200px);
	  }

	  to {
		opacity: 1;
		transform: translateX(0);
	  }
	}

	/* 右から */

	.fadeRight{
	animation-name:fadeRightAnime;
	animation-duration:2.0s;
	animation-fill-mode:forwards;
	opacity:0;
	}

	@keyframes fadeRightAnime{
	  from {
		opacity: 0;
		transform: translateX(200px);
	  }

	  to {
		opacity: 1;
		transform: translateX(0);
	  }
	}





/* 滑らかに変形して出現
------------------------------- */

.smooth{
	animation-name:smoothAnime;
	animation-duration:2.0s;
	animation-fill-mode:forwards;
  transform-origin:left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定
------------------------------- */

.fadeLeftTrigger {
    opacity: 0;
}
.fadeRightTrigger {
    opacity: 0;
}
.smoothTrigger {
    opacity: 0;
}










/* タブレット版
------------------------------- */
@media (max-width: 900px) {
	.wrapper {
		display: block;
	}
	body {
		max-width: 900px;
	}

	.title {
	margin:0 auto 20px auto;
	padding-top: 0;
}
	.title img {
	width: auto;
	height: 300px;
}
	.contents {
	margin: 50px auto;
}
	.elements {
	margin: 30px auto;

}

.elements  img {
	max-width: 100%;
}

	.element h1 {
	font-size: 25px;
	margin: 20px;
}
	.element p {
	font-size: 15px;
	margin: 20px;
}



/* プロフィール部分
------------------------------- */
.profile {
	padding: 0px;

}

.profile p {
	text-align: left;
	margin: 5px 0;
}


.contact p {
	text-align: center;
}












/* モバイル版
------------------------------- */
@media (max-width: 600px) {
	body {
		max-width: 600px;
	}

	.title {
	margin:0 auto 20px auto;
}
.canvas1 {
	margin-top: 0px;
	max-width:340px
  }
  .canvas2 {
	margin-top:-300px;
	max-width:340px
  }
  .canvas3 {
	margin-top:-300px;
	max-width:340px
  }


	.title h1 {
	font-size: 7em;
	margin: -200px auto 40px 70px;
}
	.title h4  {
	font-size: 36px;
}
	.Scroll  {
	margin: 100px auto 100px auto;
	height: 200px;
}
	
.elements h3{
	font-size: 1.2em;
}

	.profile {
	margin: 50px;
}

.element h2{
	font-size: 1.2em;
}



}


}







/* CSS終了
------------------------------- */