/* 背景全体 */
body {
  background:
    radial-gradient(circle, #00000022 1px, transparent 1px)
      calc(30px/2) calc(30px*0.866/2) / 30px calc(30px*0.866),
    radial-gradient(circle, #00000022 1px, transparent 1px)
      0 calc(30px*0.866) / 30px calc(30px*0.866);
  background-color: #fff;
}

/* ヘッダー */
.headerContainer{
   padding: 5vh 10vw; 
}

.headerContainer:hover{
   cursor: pointer;
}

.header{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ブログタイトル */
#headerTitle h1{
    font-size: 2.5em;
    color: black;
    text-align: center;
}

@media (max-width: 480px){
  #headerTitle h1{
      font-size: 20px;
      color: black;
      text-align: center;
  }
}

#headerTitle h1:hover{
    cursor: pointer;
}

/* Divider */
hr {
  border: none;            /* デフォルトの立体的な線を消す */
  border-top: 2px solid #ccc;  /* 上側だけ線をつける */
  margin: 20px 0;          /* 上下の余白 */
}

/* メインコンテナ */
.mainContainer{
  margin: 0vh 10vw;
  padding:5vh 5vw;
  background-color: rgb(229, 223, 223);
  max-width: 100%;
}

@media (max-width: 480px){
  .mainContainer{
    margin: 0vh 1vw;
    padding: 2vh 5vw;
    background-color: rgb(229, 223, 223);
    max-width: 100%;
    }
}

@media (max-width: 480px){
  .mainContainer p{
    font-size: 14px;
  }
}

/* 背景色が不要の場合のメインコンテナ */
.skeletonContainer{
  padding:5vh 3vw;
  max-width: 100%;
}

/* h2を左にインデント */
.paragraphContainer .afterh2{
  margin-left: 1vw;
}

/* h2,h3..要素の左に縦線(border)追加 */
.paragraphContainer h2,h3,h4,h5,h6{
  border-left: 4px solid #333;
  padding-left: 8px;
}

/* サムネイル */
.thumnailContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vh 3vw;
}

#thumnailTarget img{
  max-width: 100%;
  overflow: hidden;
}

/* スマホスクショ用 */
.mobileImgContainer{
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobileImgContainer img{
  max-width: 50vw !important; 
  height: auto;
}

/* ポストタイトル */
@media (max-width: 480px){
  #postTitle h1{
    font-size: 20px;
  }
}

/* 目次コンテナ */
/* 外枠 */
.indexContainer{
  border: 1px solid #ccc;
  margin: 2vh 3vw
}
/* ”目次”中央揃え */
.indexContainer h2{
  text-align: center;
}
@media (max-width: 480px){
  .indexContainer h2{
    font-size: 16px;
    margin: 0% !important;
  }
}
/* 目次リンク */
.indexContainer .indexLink{
  cursor: pointer;
  display: block;
  justify-content: flex-start;
  /* 下線のアニメーション */
  transition: box-shadow 0.2s ease,
              font-weight 0.2s ease;
}
/* リンクのホバー時に下線表示 */
.indexContainer .indexLink:hover{
  box-shadow: 0 1px 0px #ccc;
  font-weight: bold; 
}


/* パラグラフコンテナ */
.paragraphContainer{
  margin-bottom: 5vh;
  max-width: 100%;
  overflow: hidden;
}
/* モバイル用 本文フォントサイズ */
@media (max-width: 480px){
  .paragraphContainer h2{
    font-size: 18px;
  }
}
@media (max-width: 480px){
  .paragraphContainer h3{
    font-size: 16px;
  }
}
@media (max-width: 480px){
  .paragraphContainer li{
    font-size: 15px;
  }
}
@media (max-width: 480px){
  .paragraphContainer p{
    font-size: 14px;
  }
}
/* フッター */
.footerContainer{
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 3vh 3vw;
  gap: 2vw;
  color: grey;
}
@media (max-width: 480px){
.footerContainer{
  font-size: 12px;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 3vh 3vw;
  gap: 2vw;
  color: grey;
}
}

/* スクリプト */
.scriptContainer{
  color: white;
  background-color: black;
  border-radius: 8px;
  padding:3vh 3vw;
  margin: 1vh 0vw;
  max-width: 100%;       /* 親の横幅を超えない */
  overflow-x: auto;
  box-sizing: border-box; /* padding/borderも含めて計算 */
}

.scriptContainer .scriptHeader{
  display: flex;
  /* 左右に離して配置 */
  justify-content: space-between;
  align-items: center;
}

/* スクリプトコピーボタン */
.buttonContainer{
  cursor: pointer; 
  margin:1vh 1vw;
  padding:5px;  
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.buttonContainer button{
  all: unset;  /* すべてのスタイルをリセット */
  padding-left: 0.5vw;
}

.scriptHeaderLeft{
  display: flex;
  align-items: center;
}

.downloadContainer{
  cursor: pointer; 
  margin:1vh 1vw;
  padding:8px;  
  /* background-color: grey; */
  /* border-radius: 8px; */
  display: flex;
  align-items: center;
}

.scriptContainer hr {
  border: none;            /* デフォルトの立体的な線を消す */
  border-top: 1px solid grey;  /* 上側だけ線をつける */
  margin: 1vh 0;          /* 上下の余白 */
}

/* スクリプト本文 */
.scriptContainer .scriptBody{
  max-height: 30vh;
  overflow-y: auto;
}
.scriptContainer p {
  word-wrap: break-word;   /* 長い単語を折り返す */
  white-space: pre-wrap;   /* 改行や空白を保持しつつ折り返す */
}

.paragraphContainer img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2vh 0;
}

/* アプリ問い合わせページ用 */
#googleForm{
  display: flex;
  justify-content: center;
  align-items: center;
}