@charset "utf-8";

/*--画面840px以上------*/

/*---------------------------------
ここからはテンプレート部分
リセットcss
marginとpaddingをとりあえず０に指定
widthにpadding,borderを含ませる
----------------------------------*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	font-size: 100%;
	font-weight: normal;
}

/*--------------------------------
とりあえず全要素をinline-blockに指定
head,head内title,script,にdisplyを指定すると表示されてしまうからdisplyをnone
---------------------------------*/
*:not(head):not(title):not(script) {
	display: inline-block;
}

html {
	display: block;
	width: 100%;
	height: auto;
}

body {
	width: 100%;
	height: auto;
	font-family: "M PLUS 1p", sans-serif;
	line-height: 1;
	position: relative;
	background-color: #f4f4f4;
	padding: 0;
}

/*--------
リンクの下線を基本なし
-------- */
a {
	text-decoration: none;
}

a:visited {
	color: inherit;
}

/*--ここ以降を好きに編集する事----------------------------------------*/

.hero img {
	width: 100vw;
	height: 20vh;
}

.main-nav {
	width: 100%;
	height: 7vh;
	text-align: center;
	margin-top: 1%;
}

.main-nav ul li a {
	font-size: 1.5vw;
	color: black;
	padding: 10px 25px;
	display: inline-block;
}

#footer {
	width: 100%;
	height: auto;
	font-size: 1vw;
	padding: 10px 0;
	margin-bottom: 20px;
	text-align: center;
	position: fixed;
	z-index: 1000;
	top: 96%;
	left: 0;
}

/* ギャラリーのコンテナ (CSS Columnsで段組みを設定) --- */
.gallery-container {
	width: 100%;
	/* 画面の端まで広げる */
	margin: 0;
	column-count: 8;
	column-gap: 0;
	/* 横の隙間はゼロ */
}

/* --- 画像アイテムの装飾 --- */
.gallery-item {
	width: 100%;
	height: auto;
	display: block;
	break-inside: avoid;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/* 画像は常に親要素の幅いっぱいに広がる */
.gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	/* 縦の配置を上端に揃え、インライン要素による隙間を解消 */
	/* vertical-align: top; */

	transition: opacity 0.3s ease;
	/* 隙間がないため、影を削除または最小化 */
	box-shadow: none;
}

/* ホバー時のエフェクト：透過度を上げる */
.gallery-item:hover img {
	opacity: 0.85;
}

/* --- モーダルのスタイル  --- */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 20%;
	top: 10%;
	width: 60%;
	height: 80%;
	padding-top: 10%;
	padding-bottom: 10%;
	padding-left: 10%;
	padding-right: 10%;
	background-color: white;
	border: black solid 2px;
	border-radius: 20px 20px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal.show {
	display: flex;
	opacity: 1;
}

.modal-content {
	max-width: 90%;
	max-height: 90%;
}
.modal-word{
	width: 100%;
	text-align: center;
	font-size: 1vw;
}

.close {
	position: absolute;
	top: 2%;
	right: 2%;
	width: 5%;
	z-index: 1001;
}

/* designerのモーダル */
.Designer_Modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 25%;
	top: 20%;
	width: 50%;
	height: 70%;
	background-color: rgba(255, 255, 255);
	border: black solid 2px;
	border-radius: 20px 20px;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease;
}

.Designer_Modal.show {
	display: flex;
	opacity: 1;
}

.Designer_Modal_close {
	position: absolute;
	top: 2%;
	right: 2%;
	width: 5%;
	z-index: 1001;
}

#logo {
	width: 25%;
	margin-left: 20%;
	border-radius: 20px 20px;
}

#designer_word_wrap {
	margin-top: 5%;
	margin-left: 5%;
}

#designer_word_title {
	width: 100%;
	font-size: 2.5vw;
}

#designer_word {
	width: 100%;
	font-size: 1.5vw;
	margin-top: 4%;
	line-height: 2vw;
}

#sns_wrap {
	width: 50%;
	height: 10%;
	margin-top: 8%;
}

.snslink {
	width: 20%;
	margin-right: 5%;
}

.snslogo {
	width: 100%;
}

/* rulesのモーダル */
.Rules_Modal {
	display: none;
	position: absolute;
	z-index: 1000;
	left: 15%;
	top: 20%;
	width: 70%;
	height: auto;
	background-color: rgba(255, 255, 255);
	border: black solid 2px;
	border-radius: 20px 20px;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease;
	margin-bottom: 10%;
	padding-bottom: 3%;
}

.Rules_Modal.show {
	display: flex;
	opacity: 1;
}

.Rules_Modal_close {
	position: absolute;
	top: 2%;
	right: 2%;
	width: 5%;
	z-index: 1001;
}

#rules_word_wrap {
	width: 90%;
	margin-top: 3%;
	
}

#rules_word_title {
	width: 100%;
	font-size: 1.8vw;
}

.rules_word {
	width: 95%;
	font-size: 1vw;
	line-height: 1.5vw;
	margin-left: 5%;
	margin-top: 1%;

}
.rulesicon {
	width: 5%;
}
.rules_word_title2 {
	width: 100%;
	margin-top: 5%;
	font-size: 1.4vw;
	font-weight: bold;
	line-height: 1.5vw;
}



/*------------------------------------------------------------------------------モバイル用メディアクエリ画面840px以下は適用---------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 760px) {
	/*---------リセットcss
marginとpaddingをとりあえず０に指定
widthにpadding,borderを含ませる
-----------*/
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-size: 100%;
		font-weight: normal;
	}
	/*--
とりあえず全要素をinline-blockに指定
head,head内title,script,にdisplyを指定すると表示されてしまうからdisplyをnone
---*/
	*:not(head):not(title):not(script) {
		display: inline-block;
	}

	html {
		display: block;
		width: 100%;
		height: auto;
	}

	body {
		width: 100%;
		height: auto;
		font-family: "M PLUS 1p", sans-serif;
		line-height: 1;
		position: relative;
	}

	/* --リンクの下線を基本なし-------- */
	a {
		text-decoration: none;
	}
	a:visited {
		color: inherit;
	}

	/*---ここ以降を好きに編集する事----------------------------------------*/

	.hero img {
	width: 100vw;
	height: 15vh;
}

.main-nav {
	width: 100%;
	height: 5vh;
	text-align: center;
}

.main-nav ul li a {
	font-size: 5.5vw;
	padding: 10px 15px;
	display: inline-block;
	
}

#footer {
	width: 100%;
	height: auto;
	font-size: 4vw;
	padding: 10px 0;
	margin-bottom: 20px;
	text-align: center;
	position: fixed;
	z-index: 1000;
	top: 96%;
	left: 0;
}

/* ギャラリーのコンテナ (CSS Columnsで段組みを設定) --- */
.gallery-container {
	width: 100%;
	/* 画面の端まで広げる */
padding-top: 5%;
	margin: 0;
	column-count: 4;
	column-gap: 0;
	/* 横の隙間はゼロ */
}

/* --- 画像アイテムの装飾 --- */
.gallery-item {
	width: 100%;
	height: auto;
	display: block;
	break-inside: avoid;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/* 画像は常に親要素の幅いっぱいに広がる */
.gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	/* 縦の配置を上端に揃え、インライン要素による隙間を解消 */
	/* vertical-align: top; */

	transition: opacity 0.3s ease;
	/* 隙間がないため、影を削除または最小化 */
	box-shadow: none;
}

/* ホバー時のエフェクト：透過度を上げる */
.gallery-item:hover img {
	opacity: 0.85;
}

/* --- モーダルのスタイル  --- */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 10%;
	top: 10vh;
	width: 80%;
	max-height: 70vh;
	padding-top: 10%;
	padding-bottom: 10%;
	padding-left: 10%;
	padding-right: 10%;
	background-color: white;
	border-radius: 20px 20px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal.show {
	display: flex;
	opacity: 1;
}

.modal-content {
	max-width: 90%;
	max-height: 70%;
}
.modal-word{
	width: 100%;
	text-align: center;
	font-size: 4vw;
}

.close {
	position: absolute;
	top: 2%;
	right: 2%;
	width: 15%;
	z-index: 1001;
}

/* designerのモーダル */
.Designer_Modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 10%;
	top: 20%;
	width: 80%;
	height: auto;
	background-color: rgba(255, 255, 255);
	border: black solid 2px;
	border-radius: 20px 20px;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	padding-top: 5%;
	padding-bottom: 5%;
	transition: opacity 0.3s ease;
}

.Designer_Modal.show {
	display: flex;
	opacity: 1;
}

.Designer_Modal_close {
	position: absolute;
	top: 2%;
	right: 2%;
	width: 15%;
	z-index: 1001;
}

#logo {
	width: 50%;
	margin-left: 0;
	border-radius: 20px 20px;
}

#designer_word_wrap {
	width: 60%;
	margin-top: 5%;
	margin-left: 16%;
	
}

#designer_word_title {
	width: 100%;
	font-size: 6vw;
}

#designer_word {
	width: 100%;
	font-size: 4vw;
	margin-top: 4%;
	line-height: 5vw;
}

#sns_wrap {
	width: 90%;
	margin-top: 8%;
}

.snslink {
	width: 40%;
	margin-left: 0;
}

.snslogo {
	width: 100%;
}

/* rulesのモーダル */
.Rules_Modal {
	display: none;
	position: absolute;
	z-index: 1000;
	left: 5%;
	top: 5%;
	width: 90%;
	height: auto;
	background-color: rgba(255, 255, 255);
	border: black solid 2px;
	border-radius: 20px 20px;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease;
	padding-bottom: 10%;
}

.Rules_Modal.show {
	display: flex;
	opacity: 1;
}

.Rules_Modal_close {
	position: absolute;
	top: 0;
	right: 2%;
	width: 15%;
	z-index: 1001;
}

#rules_word_wrap {
	width: 90%;
	margin-top: 3%;
	
}

#rules_word_title {
	width: 100%;
	font-size: 8vw;
	margin-top: 15%;
}

.rules_word {
	width: 95%;
	font-size: 4vw;
	line-height: 6vw;
	margin-left: 5%;
	margin-top: 1%;

}
.rulesicon {
	width: 5%;
}
.rules_word_title2 {
	width: 100%;
	margin-top: 18%;
	font-size: 5vw;
	font-weight: bold;
	line-height: 6.5vw;
}
	/*-メディアクエリ用の括弧 削除厳禁---*/
}

/* memo----- 
border-radius:1%/5%;
border-radius:水平/垂直;
border-radius:左上 右上 右下 左下 / 左上 右上 右下 左下;
border-radius:全部;




memoの閉じ*/