:root{
  --bg:#f2f2f2;
  --white:#fff;
  --pink:#d75b83;
  --pink-light:#f8e3eb;
  --text:#383438;
  --muted:#91878c;
}
*{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
.site-header{
  background:var(--white);
  border-bottom:1px solid #f4e1e7;
}
.header-inner{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.logo{
  display:block;
  width:420px;
  max-width:100%;
}
.logo img{
  display:block;
  width:100%;
  height:auto;
}
.site-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  background:#fff;
  border-bottom:2px solid var(--pink-light);
}
.site-nav a{
  display:block;
  padding:15px 23px;
  color:#575057;
  text-decoration:none;
  font-size:14px;
  font-weight:bold;
}
.site-nav a:hover{
  background:var(--pink-light);
  color:var(--pink);
}
.site-main{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}
.content-section{
  margin-bottom:20px;
  padding:20px;
  background:var(--white);
}
.content-section h2{
  margin:0 0 24px;
  padding:0 0 0 12px;
  border-left:4px solid var(--pink);
  font-size:21px;
  line-height:1.5;
}
.content-section h2 span{
  margin-left:10px;
  font-size:11px;
  font-weight:normal;
  letter-spacing:.12em;
  color:var(--muted);
}
.dto-sw2,
.dto-dw4{
  display:block;
  width:100%;
  max-width:100%;
}
.portal-section{
  background:var(--bg);
  padding:20px 0;
}
.portal-frame{
  display:block;
  width:100%;
  height:1600px;
  border:0;
  background:var(--bg);
}
.site-footer{
  padding:35px 15px;
  text-align:center;
  background:#fff;
  border-top:1px solid #f0dce3;
}
.site-footer p{
  margin:0 0 8px;
  color:var(--pink);
  font-size:14px;
  letter-spacing:.15em;
}
.site-footer small{
  color:var(--muted);
  font-size:12px;
}
@media(max-width:767px){
  .header-inner{
    padding:0 10px;
  }
  .logo{
    width:300px;
  }
  .site-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .site-nav a{
    padding:12px 5px;
    text-align:center;
    font-size:12px;
    border-bottom:1px solid #f4e5ea;
  }
  .site-main{
    padding:10px;
  }
  .content-section{
    margin-bottom:12px;
    padding:12px;
  }
  .content-section h2{
    margin-bottom:18px;
    font-size:18px;
  }
  .content-section h2 span{
    font-size:10px;
  }
  .portal-section{
    padding:12px 0;
  }
  .portal-frame{
    height:1400px;
  }
}

/* ロゴ周辺の余白を縮小 */
.site-header{
  overflow:hidden;
}
.header-inner{
  height:190px;
}
.logo{
  width:420px;
  flex-shrink:0;
}
@media(max-width:767px){
  .header-inner{
    height:140px;
  }
  .logo{
    width:300px;
  }
}

/* 写メ日記への直接リンク */
.diary-more{
  display:block;
  width:max-content;
  max-width:100%;
  margin:-12px 0 18px auto;
  color:#2878b8;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
}
.diary-more:hover{
  text-decoration:underline;
}
@media(max-width:767px){
  .diary-more{
    margin:-6px 0 16px auto;
    font-size:12px;
  }
}