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



/*all------------*/

* {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 20px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.wrap-main {
	max-width: 390px;
	margin: 0 auto;
	
}

.wrap-sub {
	max-width: 350px;
	margin: 0 auto;
}

@media screen and (min-width : 600px){
	.wrap-main {
		max-width: 455px;
	}
	
	.wrap-sub {
		max-width: 485px;
		padding: 0 20px
	}
}

/*body----------------*/




/*header----------------*/

header {
	position: fixed;
	z-index: 100;
	width: 100%;
	padding: 12px 0;
}

/*main----------------*/

.concept {
	background-color: #FDFBEA;
	height: 750px;
	color: #646464;
	font-family: ヒラギノ明朝 ProN W3;
}

.concept h2 {
	text-align: center;
	font-size: 20px;
	margin-bottom: 28px;
	position: relative;
	top: 281px;
}

.concept h3 {
	text-align: center;
	font-size: 12px;
	line-height: 24px;
	position: relative;
	top: 265px;
}

@media screen and (min-width : 600px ){
	.concept {
		max-width: 525px;
		margin: 0 auto;
	}
}

/*MV----------------*/

#MV {
	padding: 0;
	height: 100vh;
	max-height: 775px;
	background: #555;
	background-size: cover;
	background-position: center center;
	position: relative;	
}

#MV p {
	position: absolute;
	z-index: 100;	
}

.title-text {
	top: 40%;
	left: 40px;
}

.name-text {
	top: 50%;
	right: 0;
}

.splide .splide__pagination {
	position: relative;
	top: -300px;
	left: 150px;
}

.splide {
	position: absolute;
	z-index: 1;
}

.splide__slide img {
	height: auto;
	width: 100%;
	height: 775px;
}

#MV .Title {
	padding-top: 282px;
	position: relative;
	left: 40px;
}

#MV .name-text {
	margin-top: -20px;
	position: absolute;
	right: 0;
}

@media screen and (min-width : 600px ){
	#MV {
		max-width: 525px;
		margin: 0 auto;
	}
}

.works { 
	font-family: FOT-DNP 秀英明朝 Pr6 M;
	color: #FFF;
	background-image: url("images/works-bg.png");
	background-size: 100%;
	margin: 0 auto;
	background-repeat: no-repeat;
	height: 100%;
	border-radius: 10px;
}

.works-button a {
	display: flex; /*「all view」と「線」を横並びに */
	align-items: center; /* 上下中央揃え */
	justify-content: flex-end; /* 右端へ */
	column-gap: 18px; /* 間を18px空ける */
	font-size: 12px;
	text-decoration: none;
	color: #FFF4E2;
	position: relative;
	top: -70px;
}

.works-text-line {
	background-color: #000;
	height: 1px;
	position: relative;
	top: -74px;
	width: auto;
	margin-left: auto;
}

.works-button-line {/* ２本の線をまとめた要素 */
	width: 84px;
	height: 5px;
	display: flex;/* flexbox用のプロパティを使うために一旦使用 */
	flex-direction: column;/* 横並び→縦並びに変更 */
	justify-content: space-between;/* 上下へ両端揃え */
	align-items: flex-end;/* 右揃え */
}

.works-button-line-top, .works-button-line-bottom {
	background-color: #FFF4E2;
	height: 1px;
}

.works-button-line-top {
	width: 84px;
}

.works-button-line-bottom {
	width: 40px;
}

.works-button-line-top, .works-button-line-bottom {
	transition: 0.3s all ease;/* 0.3秒かけてアニメーション */
}

.works-button:hover .works-button-line-top {/* .works-buttonにhoverしたとき、線のサイズを変更 */
	width: 40px;
}

.works-button:hover .works-button-line-bottom {
	width: 84px;
}

.works h2 {
	font-size: 30px;
	margin-bottom: 18px;
	position: relative;
	top: -50px;
	left: 40px;
	color: #5D5D5D;
}



.works p {
	margin-left: 6px;
	color: #9D9D9D;
}

.works p::before {
	content: "●";
	margin-right: 6px;
}

.works h3 {
	font-size: 18px;
	margin-bottom: 30px;
	background-color: #5D5D5D;
	width: 40;
	height: 2px;
	position: relative;
}

.works h4 {
	font-size: 12px;
	margin-bottom: 30px;
}

.works-img {
	width: 252px;
	height: 331px;
	overflow: hidden;/* 拡大時にはみ出た部分を非表示 */
}

.works-img img {
	transition: all 0.2s ease;/* アニメーションの速度を変更（全ての要素、0.2秒かけて変化、イーズ（スムーズにアニメーション）） */
}

.works-img img:hover {
	transform: scale(1.1);/*　ホバー時に1.1倍のサイズに*/
}

.jam, .curry, .ramune {
	width: 80%; /* 親要素の80%のサイズを指定 */
	margin-inline: auto; /* インライン方向（左右）にautoを指定。要素を左右中央へ。margin-left:auto; margin-right:autoと同じ */
}

.jam .works-img {
	margin-left: auto;/* 要素を右端へ移動 */
}

.ramune .works-img {
	margin-left: auto;
}

.ramune h4 {
	margin-bottom: 156px;
}

@media screen and (min-width : 600px ){
	.works {
		max-width: 525px;
		margin: 0 auto;
	}
}


/*about----------------*/

.About {
	background-color: #FDFBEA;
	height: 1200px;
}

.About-text img{
	margin: 0 auto;
	position: relative;
	top: 100px;
	
}

.About-text-line {
	background-color: #000;
	height: 1px;
	position: relative;
	top: 160px;
	width: 350px;
	margin: 0 auto;
}

.About-line {
	background-color: #000;
	height: 1px;
	position: relative;
	top: 150px;
	width: 350px;
	margin: 0 auto;
}

.About-img {
	margin-right: -10px;
	padding-top: 50px;
}

.About-img img {
	position: relative;
	top: 150px;
	margin: 0 auto;
	width: 350px;
	height: 450px;
	overflow: hidden;
}

.About-img img {
	transition: all 0.2s ease;
}

.About-img :hover {
	transform: scale(1.03);
}

.profile-text img{
	position: relative;
	left: 275px;
	top: 155px;
}

.my-hobby img {
	margin: 0 auto;
	position: relative;
	top: 200px;
	right: 17px;
}

@media screen and (min-width : 600px ){
	.About {
		max-width: 525px;
		margin: 0 auto;
	}
}

/*footer----------------*/

.footer {
	background-color: #000000;
	height: 150px;
}

.Contact-here img {
	margin: 0 auto;
	position: relative;
	top: 300px;
}

.Contact-here img {
	transition: all 0.2s ease;
}

.Contact-here :hover {
	
}

.contact-button img {
	margin: 0 auto;
	position: relative;
	top: 360px;
}


.footer {
	padding-bottom: 100px;
	margin: 0 auto;
}

.footer-text {
	color: #FFFFFF;
	text-align: center;
	font-size: 10px;
	position: relative;
	top: 180px;
}

@media screen and (min-width : 600px ){
	.footer {
		max-width: 525px;
		margin: 0 auto;
	}
}

/*body----------------*/