/* 特集サイト用CSS */

/* 犯人はシリウス用 */
.hanninhasirius {
	background-color: #17214d; /* 全体の背景色 */
}
.hanninhasirius nav{
	color: white;
}
.hanninhasirius-section {
	background-color: white; /* 内側だけ色白に */
	max-width: 720px;
	margin: 0 auto;
	padding: 40px;
}
@media (max-width : 600px) {
	.hanninhasirius-section {
		padding: 30px;
	}
}

/* 特集サイト用CSS */

/* Day for Lily用 */
.DayforLily {
	background-color: #eee; /* 全体の背景色 */
}
.DayforLily-section {
	background-color: white; /* 内側だけ色白に */
	max-width: 720px;
	margin: 0 auto;
	padding: 40px;
}
@media (max-width : 600px) {
	.DayforLily-section {
		padding: 30px;
	}
}

/* top画像のスタイル */
.top-image img {
    width: 100%; /* 800pxに変更 */
    max-width: 800px;
    height: auto;
    object-fit: cover; /* 画像がエリアにフィット */
}

/* 特集商品部分のスタイル、mainのCSSに追加 */
.product-feature {
    padding: 60px 0px 0 0;
	max-width: 660px;
	margin: 0 auto;
}

/* Productページに内ボタン表示のリンク設定 */
.product-details-link {
	display: flex;
	justify-content: center; 
	align-items: stretch;
	margin: 30px 40px 40px 40px;
	padding: 0 0 80px 0;
	gap: 20px;
}
.product-details-link span {
	display: flex;
	flex: 1;
  	font-size: 0.9em;
    border: 1px solid #777; /* 四角の線を設定 */
	text-align: center;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	padding: 10px;
	margin: 0;
	line-height: 1.2em;
}
.product-details-link-block:hover {
	cursor: pointer;
	color: gray;
}
.preparation {
	background-color: #F0F0F0;
}
.preparation p {
	font-size: 0.9em;
	margin: 0;
	line-height: 1.2em;
}

@media (max-width : 600px) {
	.product-feature {
		padding: 0;
	}
	.product-details-link {
		flex-direction: column; /* 縦に並べる */
		align-items: center;
	}
	.product-details-link span {
		display: block;
		width: 95%;
		text-align: center;
	}
}

/*  Introduction  */
.Introduction {
	max-width: 720px;
	margin: 0 auto;
}

.Introduction h2 {
	text-align: left;
	font-size: 1.9em;
	border-bottom: 1px solid #777;
	padding-bottom: 15px;
	margin-bottom: 30px;
}

.Introduction p {
  font-size: 0.8em;
  color: #000000;
}

.two-column {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
          justify-content: space-between;
  margin: 0px 0px 20px 0px;
}

.two-column .column-gameflow {
  width: 48%;
  text-align: left;
}

.two-column .column-gameflow h2 {
	text-align: left;
	font-size: 1.1em;
	padding: 0;
	border-bottom: none;
	margin-bottom: 0px;
}

.two-column .column-gameflow img {
  width:100%;
  margin: 0px;
  border: solid 1px #d8d7d7; 
}

.description01 {
  margin: 0px auto;
  font-size: 1em;
  display: flex;
  justify-content: center; 
  align-items: center; 
  text-align: left;
}
.description01 p {
  color: gray;
}

.description02 {
	display: flex;
	justify-content: center; 
	align-items: center;
	margin: 40px auto;
	padding: 0 0 80px 0;
	flex-wrap: wrap;
}
.description02 img{
	width: auto;
	height: 100%;
	max-height: 12px;
    object-fit: cover; /* 画像がエリアにフィット */
}
.description02 a {
  	font-size: 0.9em;
    border: 1px solid #777; /* 四角の線を設定 */
	width: 25%;
	text-align: center;
	padding: 10px;
	margin: 10px;
}
.description-link:hover {
	cursor: pointer;
	color: gray;
}

/* 画面幅狭くなった時の処理 */
@media (max-width : 600px ){
	.Introduction h2 {
		margin-bottom: 10px;
	}

	.two-column {
		flex-direction: column; /* 縦に並べる */
	}
	.two-column .column-gameflow {
		width: 100%;
		text-align: left;
	}
	.two-column .column-gameflow h2 {
		margin: 0;
	}
	.two-column .column-gameflow p {
		margin: 0 0 20px 0;
	}
	.description01 p{
		margin: 40px auto;
	}
	.description02 {
		flex-direction: column; /* 縦に並べる */
		align-items: center;
	}
	.description02 a {
		display: block;
		width: 80%;
		text-align: center;
	}
}

/* Characters */
.Characters {
	max-width: 720px;
	margin: 0 auto;
}
.Characters h2 {
	text-align: left;
	font-size: 1.9em;
	border-bottom: 1px solid #777;
	padding-bottom: 15px;

	margin-bottom: 30px;
}

.charabanner-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5px;
} /* 切り替えボタン */
.charabanner img {
	max-width: 70px;
	width: 100%;
	height: 106%;
	display: block;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border 0.3s ease;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.detail-box {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  text-align: left;
} /* 初期設定 */
.character-detail {
	gap: 0px;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	justify-content: center;
	align-items: stretch; 
	max-width: 680px;
	margin: 10px auto 100px auto;
} /* Chara画像と説明の全体 */

.chara-column {
  flex: 1;
	margin: 0 auto;
} /* 画像と説明それぞれ入れる箱 */

.chara-column img {
  width: 150%;
  height: auto;
  margin-right: -200px;
} /* 左側画像 */

.chara-intro {
	padding: 50px 0 0 0;
}
.chara-column p {
	border-bottom: none;
	margin: 0;
}
.chara-column h2 {
	font-size: 1.5em;
	border-bottom: none;
	margin: 0;
	padding: 0;
}

.chara-skill {
  margin: 0px auto;
  text-align: left;
}
.chara-skill strong{
    line-height: 2.5; /* 説明文の行間 */	
}
.chara-skill p {
    line-height: 1.6; /* 説明文の行間 */
    font-size: 0.9em;
	text-align: left;
    margin: 20px 0;
	padding: 0px;
}

.chara-prologue{
	margin: 40px 0 0 0;
	padding: 5px 20px;
	text-align: left;
	position: relative;
}
.chara-prologue strong{
    line-height: 2.5; /* 説明文の行間 */	
}
.chara-prologue p{
	color: gray;
	font-size: 0.8em;
	line-height: 1.4; /* 行間を狭くする */
}
.chara-prologue:before,.chara-prologue:after{ 
  content:'';
  width: 20px;
  height: 20px;
  position: absolute;
  display: inline-block;
} /* 左上右下のカギ括弧 */
.chara-prologue:before{
  border-left: solid 1px gray;
  border-top: solid 1px gray;
  top:0;
  left: 0;
}
.chara-prologue:after{
  border-right: solid 1px gray;
  border-bottom: solid 1px gray;
  bottom:0;
  right: 0;
}

/* フェードイン用クラス */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* 画面幅狭くなった時の処理 */
@media (max-width : 600px ){
	.Characters {
		max-width: 520px;
	}
	.character-detail {
		flex-direction: column; /* 縦に並べる */
	}
	.chara-column img {
		width: 100%;
		height: auto;
		margin: 0;
	}
	.chara-intro {
		padding: 0;
	}
}


/* Movie */
.Movie {
	max-width: 720px;
	margin: 0 auto;
	margin-bottom: 150px;
}
.Movie h2 {
	text-align: left;
	font-size: 1.9em;
	border-bottom: 1px solid #777;
	padding-bottom: 15px;
	margin-bottom: 30px;
}

/* Prologue */
.prologue {
	max-width: 720px;
	margin: 100px auto;
	text-align: center;
	color: #000000;
}
.prologue p {
	color: gray;
	font-size: 0.9em;
	line-height: 1.6; /* 行間を広くする */
}
.prologue img {
    width: 100%; /* 800pxに変更 */
    max-width: 800px;
    height: auto;
    object-fit: cover; /* 画像がエリアにフィット */
}

/* epilogue */
.epilogue {
	max-width: 720px;
	text-align: center;
	color: #000000;
}
.epilogue h2 {
	text-align: left;
	font-size: 1.9em;
	border-bottom: 1px solid #777;
	padding-bottom: 15px;
	margin-bottom: 30px;
}
.epilogue h5 {
	color: gray;
	text-align: left;
	font-size: 0.9em;
	line-height: 1.6; /* 行間を広くする */
}
.epilogue p {
	max-width: 620px;
	margin: 50px auto;
	color: gray;
	text-align: left;
	font-size: 1.0em;
	line-height: 1.6; /* 行間を広くする */
}
.epilogue img {
    width: 100%; /* 800pxに変更 */
    max-width: 800px;
    height: auto;
    object-fit: cover; /* 画像がエリアにフィット */
}

/* credit */
.credit {
	max-width: 720px;
	margin: 0px auto;
	display: flex;
	justify-content: center; 
	align-items: center; 
	text-align: left;
}
.credit p{
  font-size: 0.8em;
  color: gray;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}