@charset "UTF-8";

body {
  margin: 0;
  padding: 0.25rem;
  background-color: whitesmoke;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

#container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 3.5rem 0.25rem;
  background-color: white;

  box-sizing: border-box;

  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center; /* 横方向を中央 */

  position: relative; /* 必要なら */

  /* 背景画像を4枚指定 */
  background-image: url("../img/frame_ul.jpeg"), url("../img/frame_ur.jpeg"),
    url("../img/frame_dl.jpeg"), url("../img/frame_dr.jpeg");

  /* 各画像の位置 */
  background-position: left top, /* frame_ul */ right top,
    /* frame_ur */ left bottom, /* frame_dl */ right bottom; /* frame_dr */

  background-repeat: no-repeat; /* 繰り返さない */
}

.paragraph {
  margin-bottom: 1.5rem;
  text-align: left;

  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

.paragraph:not(:first-of-type) {
  padding: 0 1.25rem;
}

h1 {
  font-size: 1.5rem;
  margin: 2rem 0;
}

h1>a{
  color:black
}

#sig_wrp {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: auto auto;
  align-items: center;
  margin: 0 2rem;
}

/* Instagram：左70%・中央寄せ */
#instgrm {
  grid-column: 1 / 2;
  grid-row: 1 / 1;
  justify-self: center;
  font-size: 2rem;
  color: black;
}

/* Zebra：右30%・右寄せ */
#zebra {
  grid-column: 2 / 2;
  grid-row: 1 / 1;
  justify-self: end;  
}

/* 署名：zebraの下 */
#signature {
  width:  100%;
  margin-top: 0.5em;
  padding-right: 2rem;
  text-align: right;

}

a {
  color: #0066cc;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid #0066cc;
}

@media screen and (max-width: 950px) {
  body {
    font-size: 16px;
  } 
}