/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Slackey&display=swap');

body {
  background-color: white;
  color: #fff5f5;
  font-size: 20px;
  font-family: "Slackey","DotGothic16", sans-serif;
  background-image: url('sozaiimage/haikei.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.slackey-regular {
  font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.mainbox {
  width: 80%; /*  */
  max-width: 500px; /* 最大500ｐｘまで */
  margin: 0 auto; /* 中央寄せ */
  background-color: transparent;
  border-left: transparent solid 10px;
  border: transparent solid 1px; 
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 50px;
  text-align: left;
}

/* mobile */

@media (max-width: 500px) {
  .mainbox {
    width: 80%;
    height: auto;
    margin: 0 auto;
    background-color: transparent;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 30px;
    text-align: left;
  }
}

.form {
       position: relative;
       left: -5px;
       top: -152px
  }

/* iPadポートレイト */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
     .form {
       position: relative;
       left: -5px;
       top: -140px
  }
}
 
/* iPadランドスケープ */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
  .form {
       position: relative;
       left: -5px;
       top: -140px
  }
}

/* blog */

.memobox {
  width: 100%; 
  max-width: 500px; 
  margin: 0 auto; 
  background-color: transparent;
  border-left: transparent solid 10px;
  border: transparent solid 1px; 
  font-size: 15px;
  letter-spacing: 0.1em;
  text-align: left;
  font-family: "DotGothic16", sans-serif;
  padding: 30px;
}



h1 {
color: #db1435;
font-size:  50px;
margin: 0;
}
@media (max-width: 500px) {
  h1 {
    color: #db1435;
    font-size:  30px;
    margin: 0;  
  }
}

h2 {
  display: inline;
  color: #fff5f5;
  font-size: 30px;
}

h3 {
  color: #fff5f5;
  border-bottom: dashed 1px #fff5f5;
}

.link {
  color: #fff5f5;
  text-decoration: none;
  font-size: 30px;
  background:#000000;
  padding: 3px;
}
.link:visited{
    color: #fff5f5;
}
.link:hover{
   color:#db1435;
}

a {
text-decoration: none;
}


img {
  display: block;          /* 余白のズレ回避 */
  max-width: 100%;         /* 親の幅まで拡大/縮小 */
  height: auto;            /* 比率維持 */
}

.mainimage {
  display: inline-block;          /* 余白のズレ回避 */
  max-width: 100%;         /* 親の幅まで拡大/縮小 */
  height: auto;            /* 比率維持 */
}

.mainimage a{
   text-decoration: none;
   background: transparent;
}

.image-container img {
    display: inline-block;
    margin-right: 1px; /* 画像間の隙間を設定 */
}

.hoverlink {
	background-color: transparent;
	color: transparent;
	display: inline-block;
	padding: 0;
	margin: 0;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}
.hoverlink:hover {
	transform: translateY(-0.1875em);
}

/* ---------------------------------------TAB */

.tab-switch {
  --tab-color:#fff5f5;
  display: flex;
  flex-wrap: wrap;
  max-width: 980px;
  margin: auto;
  gap: 0px;
}

/* タブボタン */
.tab-switch label {
  padding: 0.2em 1em;
  background:#000000;
  cursor: pointer;
  order: -1; /* 上に表示 */
  text-align: center;
  flex: 1 1 auto; /* 均等幅 */
}

/* ラジオ非表示 */
.tab-switch input {
  display: none;
}

/* コンテンツ非表示 */
.tab-content {
  display: none;
  width: 100%;
  padding: 5px 0;
}

/* 選択されたタブ＋コンテンツ表示 */
.tab-switch label:has(:checked) {
  background: var(--tab-color);
  color: #db1435;
}
.tab-switch label:has(:checked) + .tab-content {
  display: block;
}

#about {
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  font-size: 18px;
  text-align: left;
  font-family: "DotGothic16", sans-serif;
  padding: 10px;
}

#link {  
  width: 100%;
  text-align: left;
  padding: 10px;
}

#update {
  width: 100%;
  text-align: center;
  padding: 5px;
}


/* ---------------------------------------sidemenu */

.menu-wrapper {
  position: relative;
}

.menu-icon {
  width: 40px;
  height: 30px;
  position: fixed; /* ← fixedにして常に左上固定 */
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 3;
  display: inline-block;
}

.menu-icon span {
  display: block;
  height: 4px;
  margin: 6px 0;
  background: #fff;
  border-radius: 2px;
  transition: 0.4s;
}

/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* オーバーレイ背景 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 1;
}

#menu-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体（左から出す） */
.menu {
  position: fixed;
  top: 0;
  left: -380px; /* ← 初期位置を左へ */
  width: 380px;
  height: 100%;
  background: transparent;
  transition: left 0.4s ease;
  z-index: 2;
}

#menu-toggle:checked ~ .menu {
  left: 0; /* ← 開いたときは左0へ */
}

.menu ul {
  list-style: none;
  padding: 60px 20px;
}

.menu li {
  margin: 20px 0;
}

.menu a {
  text-decoration: none;
  color: #fff5f5;
  font-size: 18px;
  transition: color 0.3s;
}

.menu a:hover {
  color: #007bff;
}


.box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dotted transparent;
}

.box div {
  width: auto;
  height: auto;
  border: 2px solid transparent;
  border-radius: 5px;
  background-color: transparent;
  margin: 20px;
  padding: 20px;
}

/* ---------------------------------------modal window */
/* これが無いとモーダルウィンドウ表示の際に余白が出る */

/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

}

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: scroll;  /* はみ出た部分はスクロールさせる */
  height: 530px;/* これが無いと「overflow:scroll」が利かない */
  width: 90%;/* これが無いと「overflow:scroll」が利かない */
  max-width: 1000px; 
  background:  rgba(0, 0, 0, 0.1);
  Overflow-x: hidden;
  Overflow-y: auto;
  text-align: center;
}

/* モーダル消すボタン */

.close-btn {
  position: fixed;
  bottom: 10px; 
  right: 10px;
  padding: 6px 40px;
  font-size: 50px;
  cursor: pointer;
  color: #fff5f5;
}

.close-btn:hover {
  color: #333;
}