html{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    scroll-padding-top: 100px; 
    line-height: 3;
  }


/* 固定背景 */
.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/background.jpg') no-repeat center center / cover;
  opacity: 0.5;
  z-index: -1; /* 背景を最背面に */
}
/* 固定背景 */

/* 全体のレイアウト */
.container {
  height: 100vh; /* 画面全体の高さ */
  display: flex;
  flex-direction: column;
}
h1{
  font-size: 36px;
  font-weight: 100;
  margin: 0;
  padding: 0;
}

h2{
  font-weight: 100;
  position: relative;
  margin-bottom: 50px;
  background: rgba(255,255,255,0.8);
  padding-left: 10px;
}

h2::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #41A849;
}

p{
  border-radius: 24px;
  box-shadow: 2px 2px #2e2e2e;
  
}

section{
  padding: 30px;
}
.animate { opacity: 0; /* 最初は見えない */ 
  transform: translateY(20px); /* ちょっと下にずらす */ 
  transition: opacity 1s, transform 1s; } 
  
  .fade-in { opacity: 1; /* ふわっと表示 */ transform: translateY(0); }
/* 全体のレイアウト */

/* FV（固定）ここから */
.fv {
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: fixed;
  inset: 0;
  margin: 0 auto;
  background-color: rgba(255,255,255,0.8);
  width: 1000px;
  max-width: 100%;
  height: 150px; /* FVの高さ*/
  z-index: 10; /* スクロールエリアより前面に */
}
.fv-text{
  display: flex;
  align-items: center;
  justify-content: space-around;
  line-height: 1;
  margin-top: 10px; 
}

.fv-text p{
  box-shadow: none;
}
.toggle-menu-button{
  display: none;
}
.fv ul{
 display: flex;
 justify-content: space-around;
 margin-top: 50px;
}

/* FV（固定）ここまで */

/* スクロールエリア */
.scroll-area {
  margin-top: 150px; /* FVの高さと合わせる */
  height: calc(100vh - 150px); /* FVを除いた残りの高さ */
  overflow-y: auto; /* 縦スクロールを許可 */
  padding: 20px;
  scroll-behavior: smooth;
}

.inner{
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
}
/* スクロールエリア */

/* cta */
.xline{
  line-height: 1;
  border: 3px solid #41A849;
  border-radius: 24px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  gap: 10px;
  align-items: center;
  position: fixed;
  bottom: 10%;
  right: 20%;
  z-index: 30;
}
.x{
  width: 30px;
}

/* cta */



/* コンセプトセクション */
#concept .info{
  display: flex;
  align-items: center;
}
#concept img{
  width: 150px;
}
#concept p{
  background: rgba(255,255,255,0.8);
  padding: 10px;
}
.illust{
  display: flex;
}
/* コンセプトセクション */

/* コミットメントセクション */
#commitment img{
  width: 150px;
}
#commitment .info1{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
#commitment .info2{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-around;
}
#commitment p{
  background: rgba(255,255,255,0.8);
  padding: 10px;
}
/* コミットメントセクション */

/* プランセクション */
#plan .info{
  display: flex;
  justify-content: space-around;
}
#plan p{
  box-shadow: none;
}
#plan .box{
  background: rgba(255,255,255,0.8);
  border-radius: 24px;
  box-shadow: 2px 2px #2e2e2e;
}
.kihon,
.studio{
  width: 400px;
  max-width: 100%;
}
.option{
  margin: 20px auto;
  width: 900px;
  max-width: 100%;

}
table{
  text-align: center;
  padding: 20px;
  margin: auto; 
}
th,td{
  padding: 10px;
  text-align: center;
}
td{
  border: 1px solid #000;
}
th{
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}
/* プランセクション */
/* アバウトstudio */
#aboutstudio h3{
  text-align: center;
}
#aboutstudio .info{
  background: rgba(255,255,255,0.8);
  border-radius: 24px;
  box-shadow: 2px 2px #2e2e2e;
  padding: 10px;
}
#aboutstudio p{
  background: none;
  box-shadow: none;
}
#aboutstudio figure{
  background-color: #41a84a7e;
  width: 80%;
  border-radius: 24px;
  background-image: url(../img/引用符のアイコン.png);
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
  padding: 10px;
}
figcaption{
  text-align: end;
}
.md{
  display: flex;
  justify-content: space-around;
}
.md dt{
  font-weight: bold;
}

.m,.d{
  width: 400px;
  max-width: 100%;
  border: 3px double #41A849;
  margin-top: 10px;
}
/* アバウトstudio */

/* ポートフォリオセクション */
#portfolio img{
  width: 300px;
  height: 200px;
  box-shadow: 2px 2px #2e2e2e;
  padding: 10px;
  background-color: rgba(255,255,255,0.8);
}
#portfolio .info{
  display: flex;
  gap: 30px;
  overflow-x: auto;
}
#portfolio dl{
  text-align: center;
  background-color: rgba(255,255,255,0.8);
  padding: 10px;
}
/* ポートフォリオセクション */

/* アバウトミーセクション */
#aboutme .info1{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  gap: 30px;

}
#aboutme .info1 .illust{
  background-color: rgba(103, 9, 236, 0.7);
  border-radius: 50px;
  padding: 30px;
}
#aboutme .info2{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
#aboutme p{
  background: rgba(255,255,255,0.8);
  padding: 10px;
}
#aboutme .info1 img{
  width: 120px;
}
#aboutme .info2 img{
  width: 180px;
  max-width: 30%;
}
#aboutme .illust{
  display: flex;
}

.news{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: start;
  margin-top: 50px;
}

/* アバウトミーセクション */

/* アニメーション・スウィング */
.swing {
  display: inline-block; /* インライン要素は回転しないので指定 */
  animation: swing 4s infinite ease-in-out;
}
@keyframes swing {
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}
/* アニメーション・スウィング */

/* 点滅 */
.blinking{
	-webkit-animation:blink 2s ease-in-out infinite alternate;
    -moz-animation:blink 2s ease-in-out infinite alternate;
    animation:blink 2s ease-in-out infinite alternate;
}
.blinking2{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/* 点滅 */

footer{
  background-color: rgba(255,255,255,0.8);
}
footer ul{
  text-align: center;
  line-height: 3;
}
footer p{
  text-align: end;
}


@media (max-width: 800px){
  .fv{
    height: 80px;
  }
  .fv-text p{
    width: 100px;
  }
  .xline{
    bottom: 0;
    right: 0;
  }
  .scroll-area{
    margin-top: 80px;
  }
#concept .info{
  flex-direction: column;
}
#commitment .info1{
  flex-direction: column-reverse;
}
#commitment .info2{
  flex-direction: column;
}
#plan .info{
  flex-direction: column;
  gap: 50px;
  align-items: center;
}
.md{
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#aboutme .info1 .illust{
display: none;
}
#aboutme .info2{
flex-direction: column;
}
.news{
  flex-direction: column;
  align-items: center;
}
}