/*1.しっぽり明朝体を読み込むように変更*/
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");

/*リセットCSS*/
* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
}
/*星空の設定(画像を使うならこっちを使う。)*/
.main-img{
	position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('./photos/starrysky2.png') no-repeat center center;
  background-size: cover;
  object-fit: cover;
  z-index: -1;
}
/*星空の背景設定(cssとjavascriptの両方で描写設定)*/
/* 星空の背景のスタイル */
body {
  position: relative;
  width: 100%; /* 星空の横幅 */
  min-height: 100vh; /* 星空の縦幅 */
  background-image: linear-gradient(0deg,#080e13, #0c3e5a ); /* 星空の背景色（グラデーションをかけている。必要に応じて明るくしたり、暗くしたりすればOK。） */
  overflow-x: hidden; /* 星が枠外にはみ出すのを防ぐ */
  z-index: -100;
}

/* 星のスタイル */
.star {
  position: absolute;
  display: block;
  background-color: #fff; /* 星の色 */
  border-radius: 50%;
  box-shadow: 0 0 4px 2px rgba(#fff, 0.2); /* 星の影 */
  opacity: 0;
  animation: twinkle 5s infinite;
}

/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}
/*ここまで星空の背景設定*/

/*コンテンツ余白設定*/
.container {
  margin: 0 8%;
}
/* ここからh2見出し設定（フォントの大きさを相対指定、フォント名を反映。） */
h2 {
  font-weight: 800;
  font-size: 1.5rem;
  color: #ffffff;
  font-family: "Shippori Mincho B1", serif;
}
	
/* セクション見出し：上下に細線＋星（テキスト幅より少し長い線） */
.section-title{
  position: relative;
  margin: 70px auto 50px;         /* 中央寄せ */
  padding: 28px 0;                /* 線分のための上下余白 */
  color: #ffffff;
  text-align: center;
  font-weight: 800;
  letter-spacing: .08em;
  display: block;
  width: max-content;      /* または fit-content */

  /* 調整用（必要に応じて数値を変えてください） */
  --line-color: #cacaca;          /* 線色 */
  --line-thickness: 1px;        /* 線太さ */
  --overhang: clamp(10px, 3vw, 36px); /* 片側のはみ出し量＝「要素より少し長く」 */
  --star-size: 23px;              /* 星サイズ */
  --star-offset: 36px;            /* 端から星までの距離 */
}

.section-title::before,
.section-title::after{
  content: "";
  position: absolute;
  left: calc(-1 * var(--overhang));   /* 片側へはみ出し */
  right: calc(-1 * var(--overhang));  /* 片側へはみ出し */
  height: max(var(--star-size), 24px);
  pointer-events: none;

  background-repeat: no-repeat, no-repeat;
  /* 1枚目＝星、2枚目＝横線 */
  background-image: url(./img/star7.png),
                    linear-gradient(var(--line-color), var(--line-color));
  background-size: var(--star-size) var(--star-size),
                   100% var(--line-thickness);
}

/* 上線（左に星）。★ ずらしを適用 */
.section-title::before{
  top: 0;
  --top-shift: -48px;
  transform: translateX(var(--top-shift));
  background-position:
    var(--star-offset) 50%,
    left center;
}

/* 下線（右に星）。★ ずらしを適用 */
.section-title::after{
  bottom: 0;
  --bottom-shift: 48px;
  transform: translateX(var(--bottom-shift));
  background-position:
    calc(100% - var(--star-offset)) 50%,
    left center;
}

/*ここまでh2見出し設定*/
/*h3タグの設定*/
.text h3{
	font-weight: 900;
	font-size: 1.4rem;
	color: #000000;
	text-align: center;
	font-family: "Shippori Mincho B1", serif;
	margin: 2rem;
}


.text h4 {
	font-size: 1.2rem;
	font-weight: 900;
	font-family: "Shippori Mincho B1", serif;
	margin: 3rem 5%	;
	position: relative;
	padding-left: 1.5rem;
	border-bottom: double;
	border-color:#163473;
	border-width: 100%;
}
.text h4::before{
	content: "★";
	position: absolute;
  	color: #E8E8E8;
  	font-size: 1.2rem;
  	left: 0;
}


.text p{
	color: #000000;
	text-align: left;
	margin: 3rem 5%;
  font-family: "Noto Serif", sans-serif;
}

/*ここからテキストボックスの中身(修正した部分)*/
.text{
  margin: 2rem 0;
  /* 調整用変数 */
  --line: #163473;       /* 枠線色 */
  --thick: 1.5px;        /* 枠線太さ */
  --inset: 10px;         /* 内側オフセット */
  --gap-tl: 44px;        /* 左上の欠け幅（左上の星座サイズに合わせる） */
  --gap-br: 45px;        /* 右下の欠け幅（右下の星座サイズに合わせる） */

  position: relative;
  padding: 1.25rem;
  box-sizing: border-box;

  /* ← 先に背景色を設定しておく */
  background-color: #ffffffaa;
  background-clip: padding-box;

  /* 枠線は background-image/position/size で個別指定（colorを上書きしない） */
  background-image:
    linear-gradient(var(--line), var(--line)),  /* 上辺 */
    linear-gradient(var(--line), var(--line)),  /* 右辺 */
    linear-gradient(var(--line), var(--line)),  /* 下辺 */
    linear-gradient(var(--line), var(--line));  /* 左辺 */

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  background-position:
    left calc(var(--inset) + var(--gap-tl)) top var(--inset),  /* 上：左を欠けさせる */
    right var(--inset) top var(--inset),                      /* 右：下を欠けさせる */
    left var(--inset) bottom var(--inset),                    /* 下：右を欠けさせる */
    left var(--inset) top calc(var(--inset) + var(--gap-tl)); /* 左：上を欠けさせる */

  background-size:
    calc(100% - var(--gap-tl) - var(--inset)*2) var(--thick),   /* 上 */
    var(--thick) calc(100% - var(--gap-br) - var(--inset)*2),   /* 右 */
    calc(100% - var(--gap-br) - var(--inset)*2) var(--thick),   /* 下 */
    var(--thick) calc(100% - var(--gap-tl) - var(--inset)*2);   /* 左 */
}

/* 星座画像（従来どおり） */
.text::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:44px; height:44px;
  background:url('img/星座画像1.png') no-repeat center / contain;
  pointer-events:none;
}
.text::after{
  content:"";
  position:absolute;
  right:0; bottom:0;
  width:45px; height:45px;
  background:url('img/星座画像2.png') no-repeat center / contain;
  pointer-events:none;
}

/*箱の部分*/
  .box_link{
    padding: 10px 5%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
    border-radius: 5px;
    justify-content: center;
  }
  .item_link{
    display: flex;
    font-size: 1.2rem;
    font-family: "Shippori Mincho B1", serif;
    position: relative;
    color: #000;
    border-radius: 20px;
    justify-content: center;
    text-decoration: none;
    border:#163473 solid 1px;
    text-align: center;
    background-color: #ffffffaa;
    transition: 0.3s;
  }
    .item_link:hover{
    color:#ffffffaa;
    background-color: #163473;
  }