body {
    width: 1200px;
    margin: auto;
    border: solid 1px #999999;
}


/*全体を中央ぞろえ*/
body{
text-align:center;
}

/*h4を左ぞろえ*/
h4 {
  text-align: left;
}

/*フォントの種別変更*/
p {
font-family: 'UD デジタル 教科書体 NP-R', serif;
}



/*見出し装飾*/
h2 {
  position: relative;
  padding: 1.5rem 2.5rem;
  border: 4px solid #000;
}

h2:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  border: 4px dotted #000;
}


/*ヘッダ装飾*/
header{
text-align:center;
}
header img{
  border-radium:50%;
 }
header h1{
 color:#fff3b8;
 text-shadow:1px 2px 3px #696969;
 font-size:80px;
 }
header p{
 font-size:25px;
 padding:10px;
 background-color:#FEEEED;
 color:#864A2B;
}

/*リンクメニュー部*/
 nav{
 text-align:center;
 margin-bottom:30px;
 }
nav{
font-size: 22px; /* 固定サイズ */
}

 nav ul li{
 list-style:none;
 display:inline-block;
 wigth:18%;
 min-width:90px;
 }
 nav ul li a{
 text-decoration:none;
 color:#000000;
 }
 nav ul li a:hover{
 color:#E7DA66;
 }

/*ポートフォリオ部*/
.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.item {
  display: block;
  overflow: hidden;
}

.item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s;
}

.item:hover img {
  transform: scale(1.05);
}

.item {
  aspect-ratio: 1 / 1;
}
.item img {
  height: 100%;
  object-fit: cover;
}


/*画像の表示*/
.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: pointer;
}

/* モーダル */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
}

.modal img {
  max-width: 90vw;
  max-height: 90vh;
}


.template-box {
  background-color: #FEEEED; /* 桜色 */
  border: 1px solid #ccc;    /* 枠線 */
  padding: 15px;             /* 内側の余白 */
  border-radius: 15px;        /* 角を丸くする */
  user-select: all;          /* クリックで全選択できるようにする（PCのみ有効な場合あり） */
}