/* =======================================================================
   index.html
========================================================================== */

/* ========== ヘッダー部分 ========== */
.header {
	width: 100vw;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.header-main {
	width: 90%;
	aspect-ratio: 1.194 /1;
	background: url(../../img/jinja/header-bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

.header-text {
	width: 50%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.header-text-title {
	width: 70%;
	margin-top: 10%;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}

.header-text-title img {
	width: 20%;
	max-width: 75px;
	min-width: 30px;
}

.header-text-sentence {
	margin-top: 7%;
	width: 85%;
	font-size: clamp(1.0rem, 1vw + 1rem, 2.0rem);
	color: #fff;
}
a:hover, a:active, a:focus {
	text-decoration: none;
 }
/* .header-text-scroll a {
	scroll-behavior: smooth;
} */

.header-text-scroll img {
	width: 80%;
	margin-top: 7%;
	animation-name: scroll-animation;
    animation-duration: 5s; /* アニメーションの持続時間を設定 */
	animation-iteration-count: infinite; /* 無限ループ */
}

@keyframes scroll-animation {
	0% {
		transform: translate(0, 0);
	  }
	  60% {
		transform: translate(0, 100px);
	  }
	  0%, 72%, 100% {
	  }
	  30% {
	  }
}

.header-side {
	width: 10%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.header-logo {
	margin-top: 10px;
	width: 60%;
	min-width: 65px;
}

.header-logo img {
	width: 100%;
}

.header-logo-sp {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 5;
}

.header-logo-sp img {
	width: 100px;
}

.header-side-deco {
	padding-bottom: 50%;
	width: 10%;
	margin: auto 0 0 0;
}

.header-side-deco img {
	width: 100%;
}

.dot-decoration {
	width: 90%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.dot-decoration img {
	width: 170px;
}

.mizuhiki-decoration {
	width: 99vw;
	aspect-ratio: 6 /1;
	background: url(../../img/jinja/decoration-mizuhiki.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.cover {
	width: 80%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.contents-about {
	width: 100%;
}

.contents-about img {
	width: 300px;
}

.contents-about h2 {
	margin: 1em 0;
	font-size: clamp(2rem, 1vw + 1.75rem, 2.8rem);
}

.contents-about span {
	font-size: clamp(1.6rem, 1vw + 1rem, 1.8rem);
	display: inline-block;
	margin-top: .5em;
}

.contents-pastwork {
	width: 100%;
	margin: 0 auto;
}

.pastwork-title {
	width: 100%;
	text-align: center;
}

.pastwork-title img {
	width: 80%;
	max-width: 350px;
}

.pastwork-block {
	margin-top: 3%;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.pastwork-block a {
	min-width: 80px;
}

/* .pastwork-block-icon {
    width: 22%;
    aspect-ratio: 1 / 1;
    background-size: 20%, contain;
	background-repeat: no-repeat, no-repeat;
	background-position: 75% 20%;
	transition: 0.5s;
}

.pastwork-icon-design {
	background-image: url(../../img/jinja/arrow-right.png),url(../../img/jinja/pastwork-icon-design01.png) ;
}

.pastwork-icon-web {
	background-image: url(../../img/jinja/arrow-right.png),url(../../img/jinja/pastwork-icon-web01.png) ;
}

.pastwork-icon-service {
	background-image: url(../../img/jinja/arrow-right.png),url(../../img/jinja/pastwork-icon-service01.png) ;
}

.pastwork-icon-system {
	background-image: url(../../img/jinja/arrow-right.png),url(../../img/jinja/pastwork-icon-system01.png) ;
}

.pastwork-block-icon:hover {
	background-size: 20%,contain;
	background-repeat: no-repeat,no-repeat;
	background-position: 95% 20%;
}

.pastwork-icon-design:hover {
	background-image: url(../../img/jinja/arrow-right-hover.png),url(../../img/jinja/pastwork-icon-design02.png) ;
}

.pastwork-icon-web:hover {
	background-image: url(../../img/jinja/arrow-right-hover.png),url(../../img/jinja/pastwork-icon-web02.png) ;
}

.pastwork-icon-service:hover {
	background-image: url(../../img/jinja/arrow-right-hover.png),url(../../img/jinja/pastwork-icon-service02.png) ;
}

.pastwork-icon-system:hover {
	background-image: url(../../img/jinja/arrow-right-hover.png),url(../../img/jinja/pastwork-icon-system02.png) ;
} */


.pastwork-block-icon {
    width: 22%;
	max-width: 250px;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: 50% 90%, 26% 15%;
	background-size: 55%,50%;
    position: relative;
    overflow: hidden;
	transition: .5s;
	border-radius: 15px;
}
.pastwork-block-icon::before {  /* ホバー背景の設定 */
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    background-repeat: no-repeat;
    transition: width 0.3s ease;
    z-index: 2;
}
.pastwork-block-icon::after {  /* ホバー背景以外の画像設定 */
    content: "";
    position: absolute;
	visibility: hidden;
	opacity: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
	background-position: 90% 15%, 50% 90%, 26% 15%;
	background-size: 20%,55%,50%;
    z-index: 2;
	transition: .5s;
}
.pastwork-block:hover .pastwork-block-icon::before {  /* ホバー時に背景を出す */
    width: 100%;
}
.pastwork-block:hover .pastwork-block-icon::after {  /* ホバー時に背景以外の要素を出す */
	visibility: visible;
	opacity: 1;
}

.pastwork-block:hover .pastwork-block-img {  /* 画像hover時に同列のopacityを解除 */
	opacity: 1;
}

/* 個別のクラスに対する背景画像の設定 */
.pastwork-icon-design {
	background-image:url(../../img/jinja/pastwork-icon-design_illust.png),url(../../img/jinja/pastwork-icon-design_text.png),url(../../img/jinja/pastwork-icon-bg.png);
	background-size: 65%,50%;
}
.pastwork-icon-design::before {
    background-image:url(../../img/jinja/pastwork-icon-bg_hover.png);
}
.pastwork-icon-design::after {
	background-image:url(../../img/jinja/arrow-right-hover.png),url(../../img/jinja/pastwork-icon-design_illust_hover.png),url(../../img/jinja/pastwork-icon-design_text_hover.png);
	background-size: 20%,65%,50%;
}

.pastwork-icon-web {
	background-image:url(../../img/jinja/pastwork-icon-web_illust.png),url(../../img/jinja/pastwork-icon-web_text.png),url(../../img/jinja/pastwork-icon-bg.png);
}
.pastwork-icon-web::before {
    background-image:url(../../img/jinja/pastwork-icon-bg_hover.png);
}
.pastwork-icon-web::after {
	background-image:url(../../img/jinja/arrow-right-hover.png),url(../../img/jinja/pastwork-icon-web_illust_hover.png),url(../../img/jinja/pastwork-icon-web_text_hover.png);
}

.pastwork-icon-service {
	background-image:url(../../img/jinja/pastwork-icon-service_illust.png),url(../../img/jinja/pastwork-icon-service_text.png),url(../../img/jinja/pastwork-icon-bg.png);
}
.pastwork-icon-service::before {
    background-image:url(../../img/jinja/pastwork-icon-bg_hover.png);
}
.pastwork-icon-service::after {
	background-image:url(../../img/jinja/arrow-right-hover.png),url(../../img/jinja/pastwork-icon-service_illust_hover.png),url(../../img/jinja/pastwork-icon-service_text_hover.png);
}

.pastwork-icon-system {
	background-image:url(../../img/jinja/pastwork-icon-system_illust.png),url(../../img/jinja/pastwork-icon-system_text.png),url(../../img/jinja/pastwork-icon-bg.png);
}
.pastwork-icon-system::before {
    background-image:url(../../img/jinja/pastwork-icon-bg_hover.png);
}
.pastwork-icon-system::after {
	background-image:url(../../img/jinja/arrow-right-hover.png),url(../../img/jinja/pastwork-icon-system_illust_hover.png),url(../../img/jinja/pastwork-icon-system_text_hover.png);
}

.pastwork-block-img {
	width: 18%;
	aspect-ratio: 1 /1;
	transition: 0.5s;
	/* opacity: 0.5; */
	opacity: 1; /* 240220本番反映用 */
}

.pastwork-block-img:hover {
    transform: scale(1.1);
    opacity: 1;
}

.pastwork-block-img img {
	width: 100%;
}

.contents-news {
	margin: 10% auto;
	width: 100%;
}

.news-title {
	width: 100%;
	margin-bottom: 4%;
}
.news-title img {
	width: 13%;
	min-width: 110px;
}

.news_contents {
	width: 100%;
	display: flex;
	justify-content: space-around;
}

.news_contents_topics {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 4%;
}

.news_contents_topic {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    font-size: clamp(1.2rem, 1vw + 1rem, 2.0rem);
    padding: 1em 1em 1em;
    border-radius: 0 9999px 9999px 0;
    position: relative;
    overflow: hidden;
}

.news_contents_topic::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; /* 初期状態では左側に隠れていない */
    width: 0; /* 幅を0にして非表示にする */
    height: 100%;
    background-color: #FF6161;
    transition: width 0.5s ease; /* widthをアニメーション化 */
	z-index: -1;
}

.news_contents_topic:hover::before {
    width: 100%; /* ホバー時に幅を100%にして表示する */
	background-position: left;
	background-size: auto;
}

.news_contents_topic:hover {
    background-color: transparent; /* hover時の背景色を透明にする */
	color: #fff;
}

.news_contents_topic_day {
	white-space: nowrap;
}

.news_contents_topic_day span {
	margin-right: 2em;
}



@media (max-width:1024px) {
	.header-main {
		width: 100%;
		position: relative;
		z-index: 1;
	}
	/* .header-main::after {
		content: ""; 
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.3);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	} */
	.header-text img,.header-text span {
		position: relative;
		z-index: 3;
	}
	.header-text-scroll {
		display: none;
	}
	.pastwork-block-img {
		opacity: 1;
	}
}





@media (max-width:695px) {
	.header-text  {
		width: 100%;
		position: relative;
	}
	.header-text-title {
		margin-top: 20px;
		width: 30px;
	}
	.header-text-title img {
		margin: 0 10px;
	}
	.header-text-sentence {
		position: relative;
		width: 50%;
		left: -20%;
		font-size: 1.2rem;
	}

	@keyframes scroll-animation {
		0% {
			transform: translate(0, 0);
		  }
		  60% {
			transform: translate(0, 30px);
		  }
		  0%, 72%, 100% {
		  }
		  30% {
		  }
	}

	.pastwork-block {
		justify-content: space-between;
	}
	.contents-about img {
		width: 250px;
	}

	.cover {
		width: 90%;
	}

	.news_contents_topic {
		flex-direction: column;
	}
	.news_contents_topic_day span {
		font-weight: bold;
	}
}

@media (max-width:415px) {
	.header-main {
		height: 400px;
		background-size: cover;
	}

}