@charset "utf-8";

/* ##########################################################################
Top
########################################################################## */

/* top-mv
---------------------------------------------- */

#top-mv {
	width: 100%;
	height: 110vh;
	position: relative;
	overflow: hidden;
}

.top-mv-img {
	width: 100%;
	position: absolute;
	z-index: 1;
	animation-name: topmvimg;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
	transform: scale(1.0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

@keyframes topmvimg {
	from {
		opacity: 0;
		transform: scale(1.0);
	}
	to {
		opacity: 1;
		transform: scale(1.1);
	}
}

@media screen and (max-width: 1200px){
	#top-mv {
		height: 90vh;
	}
}

@media screen and (max-width: 960px){
	#top-mv {
		height: 100vh;
	}
}

@media screen and (max-width: 767px){
	#top-mv {
		height: 110vh;
	}
}

/*========= 鳥の動き ===============*/

.bird {
	width: 130px;
	position: absolute;
	offset-rotate: auto;
	offset-distance: 0%;
	opacity: 0;
	transform: scale(1.0);
	z-index: 10;
}

@keyframes flyAlong {
  0% {
    offset-distance: 0%;
    opacity: 0;
	transform: scale(1.0);
  }
  100% {
    offset-distance: 100%;
    opacity: 1;
	transform: scale(1.2);
  }
}

@media screen and (max-width: 1200px){
	.bird {
		width: 120px;
	}
}

@media screen and (max-width: 960px){
	.bird {
		width: 120px;
	}
}

@media screen and (max-width: 767px){
	.bird {
		width: 100px;
	}
}

/*========= キャッチコピー ===============*/

.catchphrase {
	position: absolute;
	z-index: 20;
    top: 35%;
    left: 37%;
    transform: translate(-35%, -37%);
    -webkit-transform: translate(-35%, -37%);
    -ms-transform: translate(-35%, -37%);
}

.catchphrase p {
	color: #ffffff;
	font-size: 46px;
	letter-spacing: 0.03em;
	text-shadow: 0px 0px 10px #632727;
}

@media screen and (max-width: 1200px){
	.catchphrase p {
		font-size: 42px;
	}
}

@media screen and (max-width: 960px){
	.catchphrase {
		top: 30%;
		left: 37%;
		transform: translate(-30%, -37%);
		-webkit-transform: translate(-30%, -37%);
		-ms-transform: translate(-30%, -37%);
	}
	.catchphrase p {
		font-size: 36px;
	}
}

@media screen and (max-width: 767px){
	.catchphrase p {
		font-size: 32px;
	}
}

/* top-news
---------------------------------------------- */

.top-news{
	width: 100%;
	min-height: 160px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 30;
}

.top-news-inner{
	width: 60%;
	padding: 30px 0;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40% 60%, rgba(255, 255, 255, 0));
}

.top-news-box{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}

.top-news-box h3{
	color: #77502d;
	font-size: 40px;
	line-height: 1.1;
}

.top-news-box h3 span{
	display: block;
	font-size: 16px;
	margin-bottom: 10px;
}

.top-news-left{
	width: 20%;
	margin-right: 5%;
}

.top-news-right{
	width: 50%;
}

.top-news-right dl{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	font-size: 14px;
}

.top-news-right dt{
	width: 30%;
	padding-bottom: 20px;
}

.top-news-right dd{
	width: 70%;
	padding-bottom: 20px;
}

.top-news-right dt:nth-of-type(3){
	padding-bottom: 0px;
}

.top-news-right dd:nth-of-type(3){
	padding-bottom: 0px;
}

.top-news-link{
	width: 100%;
	min-width: 160px;
}

@media screen and (max-width: 1200px){
	.top-news-inner{
		width: 80%;
	}
}

@media screen and (max-width: 960px){
	.top-news-inner{
		width: 100%;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 30% 70%, rgba(255, 255, 255, 0));
	}
	.top-news-box h3{
		font-size: 30px;
	}
	.top-news-box h3 span{
		font-size: 12px;
	}
	.top-news-left{
		width: 30%;
		margin-right: 2%;
	}
	.top-news-right{
		width: 50%;
	}
	.top-news-right dl{
		font-size: 12px;
	}
	.top-news-right dt{
		width: 100%;
		padding-bottom: 5px;
	}
	.top-news-right dd{
		width: 100%;
		padding-bottom: 10px;
	}
	.top-news-link{
		min-width: 100px;
		font-size: 12px;
	}
}

/* top-shine-bg
---------------------------------------------- */

.top-shine-bg{
	width: 100%;
	height: auto;
	position: relative;
}
.top-shine-bg:before{
	display:block;
	content:'';
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	z-index: 1;
	background-image: url("../images/top-shine-bg.webp");
	background-repeat: repeat-y;
	background-size: 100%;
	mix-blend-mode: hard-light;
}

@media screen and (max-width: 767px){
	.top-shine-bg:before{
		background-image: url("../images/top-shine-bg-sp.webp");
	}
}

/* top-msg
---------------------------------------------- */

#top-msg {
	display: grid;
	place-items: center;
	position: relative;
	z-index: 2;
}

#top-msg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../images/top-msg-kage.webp") no-repeat center center / cover;
	z-index: 5;
	pointer-events: none;
}

.top-msg-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* 横12列に分割 */
	grid-template-rows: repeat(10, 1fr);    /* 縦10行に分割 */
	position: relative;
	width: 100%;
	max-width: 1280px;
	padding: 2rem 1rem;
}

/* グリッド確認用 */
/* .top-msg-grid > div {
	outline: 1px dashed rgba(0,0,0,0.5);
}  */

.top-msg-illust {
	pointer-events: none;
	z-index: 3;
}

/* 各イラストの位置をグリッドで指定 */
.illust01 {
	grid-column: 10 / 12;  /* 横方向に10列目から12列目まで使用 */
	grid-row: 1 / 3;	/* 縦方向に1行目から3行目まで使用 */
	display: flex;
	align-items:flex-end;
}   /* 鳥 */
.illust02 {
	grid-column: 1 / 4;
	grid-row: 4 / 6;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}   /* ペン */
.illust03 {
	grid-column: 10 / 12;
	grid-row: 5 / 7;
	display: flex;
	justify-content: flex-end;
	align-items: center;
} /* ドラゴン */
.illust04 {
	grid-column: 4 / 8;
	grid-row: 7 / 10;
	display: flex;
	align-items: center;
}   /* ネックレス */

.illust01 img {
	max-width: 206px;
}   /* 鳥 */
.illust02 img {
	max-width: 274px;
}  /* ペン */
.illust03 img {
	max-width: 177px;
}  /* ドラゴン */
.illust04 img {
	max-width: 318px;
}   /* ネックレス */

/* 中央の古紙＋テキストエリア */
.top-msg-koshi {
	grid-column: 3 / 11;  /* 横方向に3列目から11列目まで使用 */
	grid-row: 2 / 9;      /* 縦方向に2行目から9行目まで使用 */
	background: url("../images/top-msg-koshi.webp") no-repeat center center / contain;
	padding: 2rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.top-msg-koshi h2 {
	color: #77502d;
	font-size: 1.8rem;
	margin-bottom: 2.0rem;
	line-height: 1.4;
}

.top-msg-koshi p {
	color: #77502d;
  	font-size: 1.1rem;
  	line-height: 1.8;
}

@media screen and (max-width: 1200px){
	.top-msg-koshi h2 {
		font-size: 1.6rem;
		margin-bottom: 1.8rem;
	}
	.top-msg-koshi p {
		font-size: 1.0rem;
		line-height: 1.6;
	}
}

@media screen and (max-width: 960px){
	.illust01 img {
		max-width: 144px;
	}   /* 鳥 */
	.illust02 img {
		max-width: 192px;
	}  /* ペン */
	.illust03 img {
		max-width: 124px;
	}  /* ドラゴン */
	.illust04 img {
		max-width: 222px;
	}   /* ネックレス */
	.top-msg-koshi h2 {
		font-size: 1.3rem;
		margin-bottom: 1.0rem;
	}
	.top-msg-koshi p {
		font-size: 0.8rem;
		line-height: 1.4;
	}
}

@media screen and (max-width: 767px){
	#top-msg {
		background-image: url("../images/top-msg-koshi-sp.webp");
		background-repeat: no-repeat;
		background-position: 60% center;
		background-size: 180%;
	}
	#top-msg::before {
		background: url("../images/top-msg-kage-sp.webp") no-repeat center center / cover;
	}
	.top-msg-grid {
		max-width: 767px;
		aspect-ratio: 1 / 2; /* 横:縦の比率を固定 */
		padding: 1rem 1rem;
	}
	.illust01 {
		grid-column: 9 / 13;
		grid-row: 1 / 3;
		align-items:center;
	}   /* 鳥 */
	.illust02 {
		grid-column: 1 / 4;
		grid-row: 2 / 4;
	}   /* ペン */
	.illust03 {
		grid-column: 10 / 13;
		grid-row: 8 / 10;
		align-items: center;
	} /* ドラゴン */
	.illust04 {
		grid-column: 2 / 8;
		grid-row: 9 / 10;
	}   /* ネックレス */
	.illust01 img {
		max-width: 124px;
	}   /* 鳥 */
	.illust02 img {
		max-width: 164px;
	}  /* ペン */
	.illust03 img {
		max-width: 74px;
	}  /* ドラゴン */
	.illust04 img {
		max-width: 190px;
	}   /* ネックレス */
	.top-msg-koshi {
		grid-column: 1 / 13;
		grid-row: 2 / 10;
		background: none;
		padding: 2rem 0rem;
	}
	.top-msg-koshi h2 {
		font-size: 1.2rem;
		line-height: 1.4;
		margin-bottom: 1.4rem;
	}
	.top-msg-koshi p {
		font-size: 0.8rem;
		line-height: 1.6;
	}
}

/* top-service
---------------------------------------------- */

#top-service{
	width: 100%;
	margin-top: -240px;
}

.top-service-bg-l{
	background-image: url("../images/top-service-bg-left.webp");
	background-repeat: no-repeat;
	background-size:contain;
	background-position: left top;
}

.top-service-bg-r{
	background-image: url("../images/top-service-bg-right.webp");
	background-repeat: no-repeat;
	background-size:contain;
	background-position: right top;
}

.top-service-inner{
	width: 100%;
	padding: 240px 160px 150px;
	position: relative;
	z-index: 2;
}

.top-service-inner h3{
	text-align: center;
	color: #77502d;
	letter-spacing: 0.03em;
	margin-bottom: 40px;
}

.top-service-inner h3 span:first-child{
	display: block;
	font-size: 40px;
}

.top-service-inner h3 span:nth-child(2){
	display: block;
	font-size: 18px;
}

.top-service-box {
	width: 60%;
	margin: 0 auto 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.top-service-box:nth-of-type(2) {
	flex-direction: row-reverse;
}

.top-service-box:nth-of-type(3) {
	margin: 0 auto 80px;
}

.top-service-txt {
	width: 45%;
	color: #77502d;
}

.top-service-img {
	width: 45%;
}

.top-service-txt h4{
	font-size: 18px;
	margin-bottom: 10px;
}

.top-service-link {
	width: 50%;
	margin: 0 auto;
}

.top-service-link a{
	width: 100%;
	box-shadow: 4px 4px 14px #888;
}

@media print, screen and (max-width: 1200px){
	.top-service-box {
		width: 70%;
	}
}

@media print, screen and (max-width: 960px){
	#top-service{
		width: 100%;
		margin-top: 0px;
	}
	.top-service-inner{
		padding: 0px 160px 150px;
	}
	.top-service-box {
		width: 80%;
	}
	.top-service-txt p{
		font-size: 14px;
	}
}

@media print, screen and (max-width: 767px){
	.top-service-bg-l{
		background-image: url("../images/top-service-bg-left.webp");
		background-repeat: no-repeat;
		background-size:168px;
		background-position: left -50px top 0px;
	}
	.top-service-bg-r{
		background-image: url("../images/top-service-bg-right.webp");
		background-repeat: no-repeat;
		background-size:168px;
		background-position: right -50px top 0px;
	}
	.top-service-inner{
		padding: 40px 30px 50px;
	}
	.top-service-inner h3 span:first-child{
		display: block;
		font-size: 30px;
	}
	.top-service-inner h3 span:nth-child(2){
		display: block;
		font-size: 16px;
	}
	.top-service-box {
		width: 100%;
	}
	.top-service-txt {
		width: 70%;
		margin-right: 0%;
		margin: 0 auto;
		order: 2;
		text-align: center;
	}
	.top-service-img {
		width: 60%;
		margin: 0 auto 20px;
		order: 1;
	}
	.top-service-txt h4{
		font-size: 16px;
		margin-bottom: 5px;
	}
	.top-service-txt p{
		font-size: 12px;
	}
	.top-service-link {
		width: 100%;
		font-size: 12px;
	}
}

/* top-company
---------------------------------------------- */

#top-company{
	width: 100%;
	position: relative;
	margin-top: 80px;
}

.top-company-grid{
	width: 100%;
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, 1fr); /* 横10列に分割 */
	grid-template-rows: repeat(10, 1fr);    /* 縦10行に分割 */
}

/* グリッド確認用 */
/* .top-company-grid > div {
	outline: 1px dashed rgba(0,0,0,0.5);
} */

.top-company-tree{
	grid-column: 1 / 7;  /* 横方向に1列目から6列目まで使用 */
	grid-row: 1 / 10;	/* 縦方向に1行目から10行目まで使用 */
	pointer-events: none;
	z-index: 1;
	display: flex;
	align-items:flex-start;
	mix-blend-mode: darken;
}
.top-company-tree img{
	margin-left: -150px;
}

.top-company-inner{
	grid-column: 5 / 11;
	grid-row: 1 / 10;
	z-index: 2;
	padding-left: 50px;
}

.top-company-title{
	width: 100%;
	position: relative;
	padding-top: 20px;
}

.top-company-bird{
	width: 120px;
	position: absolute;
	top: 0;
	left: 240px;
	z-index: 3;
}

.top-company-inner h3{
	color: #77502d;
	letter-spacing: 0.03em;
	margin-bottom: 20px;
}
.top-company-inner h3 span:first-child{
	display: block;
	font-size: 40px;
}
.top-company-inner h3 span:nth-child(2){
	display: block;
	font-size: 18px;
	text-align: left;
}

.top-company-inner p{
	color: #77502d;
	font-size: 16px;
	letter-spacing: 0.03em;
	margin-bottom: 60px;
}

.top-company-btn{
	width: 360px;
	margin-left: 70px;
}

.top-company-link {
	margin-bottom: 40px;
}

.top-company-link a{
	width: 100%;
	box-shadow: 4px 4px 14px #888;
}

@media screen and (max-width: 1200px){
	#top-company{
		margin-top: 80px;
	}
	.top-company-bird{
		right: 24%;
	}
}

@media screen and (max-width: 960px){
	.top-company-tree{
		grid-column: 1 / 6;
		display: flex;
		align-items:center;
	}
	.top-company-tree img{
		transform: scale(1.2);
		margin-left: -50px;
	}
	.top-company-inner{
		padding-left: 0px;
	}
	.top-company-bird{
		width: 90px;
	}
	.top-company-btn{
		width: 320px;
	}
}

@media screen and (max-width: 767px){
	.top-company-grid{
		width: 100%;
		position: relative;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		grid-template-rows: repeat(10, 1fr);
		aspect-ratio: 2 / 3;
	}
	.top-company-tree{
		grid-column: 1 / 10;
		grid-row: 1 / 10;
		display: flex;
		align-items:flex-end;
		padding-bottom: 40px;
	}
	.top-company-tree img{
		margin-left: -120px;
	}
	.top-company-inner{
		grid-column: 2 / 10;
		grid-row: 1 / 10;
		padding: 0 20px;
	}
	.top-company-bird{
		top: 0;
		left: 180px;
		z-index: 3;
	}
	.top-company-btn{
		width: 240px;
		margin: 0 auto;
	}
	.top-company-inner h3 span:first-child{
		font-size: 30px;
	}
	.top-company-inner h3 span:nth-child(2){
		font-size: 16px;
	}
	.top-company-inner p{
		font-size: 12px;
	}
	.top-company-link {
		margin-bottom: 30px;
		font-size: 12px;
	}
}

/* top-contact
---------------------------------------------- */

#top-contact{
	width: 100%;
	margin-top: 50px;
}

.top-contact-inner{
	width: 100%;
	position: relative;
	z-index: 2;
	text-align: center;
}

.top-contact-inner a{
	display: inline-block;
	text-align: center;
}

.top-contact-inner a:hover .top-contact-bird{
	transform: rotate(15deg);
}

.top-contact-inner a.fadeInTrigger{
    opacity: 0;
}

.top-contact-inner a.fadeIn{
	animation-name:fadeInContact;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeInContact{
  from {
    opacity: 0;
	transform: scale(0.0);
  }

  to {
    opacity: 1;
	transform: scale(1.0);
  }
}

.top-contact-circle{
	width: 600px;
	height: 600px;
	position: relative;
	background-image: url("../images/contact-circle.webp");
	background-size: cover;
	transform: scale(1.0);
	transition: all .3s;
}

.top-contact-inner a:hover .top-contact-circle{
	transform: scale(1.03);
}

.top-contact-txt{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
  	transform: translate(-50%, -50%);
}

.top-contact-txt h3{
	font-size: 54px;
	color: #77502d;
	letter-spacing: 0.2em;
	line-height: 1em;
	margin-bottom: 10px;
}

.top-contact-inner a:hover .top-contact-txt h3{
	color: #62a738;
}

.top-contact-txt h3 span{
	display: block;
}

.top-contact-txt h3 span:nth-of-type(2){
	font-size: 20px;
	letter-spacing: 0em;
}

.top-contact-txt p{
	color: #77502d;
	font-weight: bold;
}

.top-contact-inner a:hover .top-contact-txt p{
	color: #62a738;
}

.top-contact-bird{
	width: 100px;
	position: absolute;
	top: 160px;
	left: 132px;
	z-index: 3;
}

.top-contact-board{
	width: 220px;
	height: 115px;
	position: absolute;
	z-index: 4;
	right: 12px;
	bottom: 80px;
	background-image: url("../images/contact-board.webp");
	background-size: cover;
}

.top-contact-works{
	width: 100%;
	color: #77502d;
	font-weight: bold;
	position: absolute;
	bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.top-contact-inner a:hover .top-contact-works {
	text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 10);
}

@media screen and (max-width: 767px){
	.top-contact-circle{
		width: 340px;
		height: 340px;
	}
	.top-contact-inner a:hover .top-contact-circle{
		transform: scale(1.05);
	}
	.top-contact-txt h3{
		font-size: 36px;
	}
	.top-contact-txt h3 span:nth-of-type(2){
		font-size: 14px;
	}
	.top-contact-txt p{
		font-size: 10px;
	}
	.top-contact-bird{
		width: 50px;
		top: 84px;
		left: 64px;
	}
	.top-contact-board{
		width: 132px;
		height: 69px;
		right: 0px;
		bottom: 36px;
	}
	.top-contact-works{
		font-size: 10px;
		bottom: 7px;
	}
}