@charset "UTF-8";

html {
	font-size: 62.5%;
	}
body {
	font-size: 1.6rem;
	line-height: 1.8rem;
	font-family: "Kaisei Decol", serif;
	font-weight: bold;
}

img { width: 100%; height: 100%; }
h1,h2,h3 { font-family: "Spicy Rice", serif; font-weight: 400; font-style: normal; letter-spacing: 0.5rem; }

#wrapper { width: 100%; background-color: #001e43; }

header { width: 100%; height: 100vh; position: relative; }
header picture,img { width: 100%; height: 100vh; display: block; margin: 0 auto; object-fit: cover; }
header h1 { position: absolute; top: 150px; left: 180px; font-size: 6rem; }
header h1 a { color: #000; }

.flex-r { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }

#sita { width: 100%; height: auto; margin: 0 auto; background-color: #efefef; }
#sita-box { display: flex; flex-direction: column; }

#sita-box div.work { width: auto; padding: 80px 20px 140px; margin: 0 0 150px; background-color: #fff3b8; }
#sita-box div.work h2 { margin: 0 0 20px; }
#sita-box div.work img { width: 100%; height: auto; padding: 0 0 5px; }
.character-links { padding: 2em 1em; text-align: center; }
.character-links h2 { margin-bottom: 1em; }
.character-cards { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5em; }
.char-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  width: 180px;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.char-card:hover { transform: scale(1.55); }
.char-card img { width: 100%; }
.char-card p { margin: 0; padding: 0.5em; font-weight: bold; }
/* モーダル背景 */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
  animation: fadeIn 0.3s ease forwards;
}

/* モーダル内容 */
.modal-content {
	position: relative;
  background-color: #fff;
  margin: 5% auto;
  padding: 2em;
  border-radius: 10px;
  width: 90%;
  max-width: 480px;
  animation: slideUp 0.4s ease forwards;
}
/* 閉じるボタン */
.close { position: absolute; top: 10px; right: 16px; font-size: 28px; cursor: pointer; }
.close:hover { color: #f33; }
.slideshow {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.slideshow img {
  width: 100%;
  display: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.slideshow img.active { display: block; }
/* アニメーション */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
}


#sita-box div.abpr { width: 100%; text-align: center; position: relative; }
div.abpr .flex-r { margin: 0 0 150px; }
.and { width:200px; height:200px; border-radius:50%; border: #000 1px solid; display: flex; align-items: center; justify-content: center; position: absolute; top: 235%; left: 190%; transform: translate(235%, -190%); background-color: rgba(255,255,255,0.3); }
.and h2 { display: inline-block; line-height: 1rem; }
#sita-box div h2 { font-size: 1.7rem; text-align: center; }
#sita-box div h2:first-letter { font-size: 2.4rem; color: #0068b7; }
#sita-box div.abpr div.ap { width: 50%; height: auto; padding: 80px 0; }
.about { background-color: #b79fcb; }
.prof { background-color: #dbebc4; }
#sita-box div.abpr div.ap p { padding: 0 90px 0; }
.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
  0% { transform:translate(0, 0) rotate(-7deg); }
  50% { transform:translate(0, -7px) rotate(0deg); }
  100% { transform:translate(0, 0) rotate(7deg); }
}

#sita-box div.contact { width: 100%; padding: 80px 0 100px; background-color: #a4c1d7; position: relative; text-align: center; }
.contact p { padding: 10px 10px 0; }
footer { text-align: center; color: #fff; text-shadow: 0 0 5px #fffd4e; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -3px); }


.slide-container { width: 100%; margin: 50px auto; display: flex; align-items: center; overflow: hidden; }
.slide-wrapper { display: flex; animation: slide-flow 20s infinite linear 1s both; }
.slide { width: 300px; object-fit: cover; border: 1px solid #ddd; }
@keyframes slide-flow {
 0% { transform: translateX(0); }
 100% { transform: translateX(-100%); }
}


/* スクロールダウンの位置 */
.scroll { position: absolute; right: 50%; bottom: 14%; writing-mode: vertical-rl; }
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #000;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 2;
}
/* 線の背景色 */
.scroll::after {
  background-color: #ccc;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% { transform: scale(1, 0); transform-origin: 0 0; }
  50% { transform: scale(1, 1); transform-origin: 0 0; }
  51% { transform: scale(1, 1); transform-origin: 0 100%; }
  100% { transform: scale(1, 0); transform-origin: 0 100%; }
}
.scroll a { color: #000; }



/* メールフォーム */
form {
  max-width: 500px;
  margin: 0 auto;
  padding: 2em;
}
form label {
  display: block;
  margin-bottom: 1em;
  font-family: 'Kaisei Decol', serif;
}
input, textarea {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 10px;
}
button {
  background: #0068b7;
  color: white;
  padding: 0.7em 1.5em;
  border: none;
  border-radius: 15px;
  font-size: 1.2em;
}
contact-form .modal-content {
  animation: popUp 0.4s ease-out forwards;
  transform: scale(0.8); opacity: 0;
}

@keyframes popUp {
 to { transform: scale(1); opacity: 1; }
}

@media screen and (max-width: 1024px) {
	html { font-size: 75%; }
	body { font-size: 1.6rem; }
	header,#sita,footer { width: 100%; }
	header h1 { top: 100px; left: 30px; font-size: 4rem; }

	#sita-box { row-gap: 0; }
	#sita-box div { width: auto; padding: 10px 0 10px; }
	#sita-box div h2 { padding: 0 0 0 10px; }
	#sita-box div p { padding: 0 10px; }

	#sita-box div.work { width: auto; padding: 80px 0 140px; margin: 0 0 150px; }
	.work .flex-r { flex-wrap: wrap; justify-content: center; gap: 20px 20px; }
	#sita-box div.work div.chara { width: 250px; border: #000 1px solid; }

	.and { position: absolute; top: 50%; left: 210%; transform: translate(-50%, -210%); }

	#sita-box div.abpr div.ap { width: 90%; padding: 120px 0; }
	.abpr .flex-r { flex-direction: column; justify-content: initial; gap: 30px 0; }
	.about { width: 100%; margin: 0 auto 0 0; }
	.prof { width: 100%; margin: 0 0 0 auto; }
  #sita-box div.abpr div.ap p { padding: 0 40px 0; }

  #sita-box div.contact {  padding: 80px 0 100px; }
  .contact p { padding: 10px 10px 0; }
	
	.scroll { position: absolute; right: 50%; bottom: 18%; writing-mode: vertical-rl; }
  }

@media screen and (max-width: 480px) { 
  #sita-box div.work div.chara { width: 180px; }
	.work .flex-r { flex-wrap: wrap; justify-content: center; gap: 10px 10px; }
  .and { position: absolute; top: 50%; left: 210%; transform: translate(-50%, -210%); }
  }



  .sns-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 2rem 0;
}
.sns-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  padding: 15px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-decoration: none;
  font-family: 'Kaisei Decol', serif;
  transition: transform 0.2s;
}
.sns-card:hover {
  transform: scale(1.05);
}
/* 公式カラーを反映 */
.twitter i { color: #000; }
.insta i { color: #E4405F; }
.yt i { color: #FF0000; }