/* ==============================
   ベース
============================== */
body {
  font-family: 'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  font-size: 15px;
  letter-spacing: .05em;
  color: #ffe4f2;
  background: radial-gradient(circle at top,#2b0055 0%,#0d001a 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: #ff99cc;
  text-decoration: none;
  transition: opacity .3s;
}
a:hover {
  color: #fff;
  text-shadow: 0 0 5px #ff80c0;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border: none;
}
.pc-only { display: block; }
.sp-only { display: none; }

/* ==============================
   レイアウト
============================== */
.wrapper { padding-top: 73px; }
.section {
  background: rgba(255,255,255,.05);
  border-radius: 15px;
  padding: 40px;
  margin: 60px auto;
}
.container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 40px;
  text-align:center;
  color:#ffe4f2;
}

/* ==============================
   見出し・フォント
============================== */
.header-logo,.mv-title,.title,h1,h2,h3,h4 {
  font-family: 'Playfair Display','Georgia',serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "kern" 1,"liga" 1;
  font-feature-settings: "kern" 1,"liga" 1;
}
p,li,.lead,.mv-text,.profile-body p {
  font-family: 'Noto Serif JP','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
  letter-spacing: .02em;
  line-height: 1.8;
}
.mv-title { font-size: clamp(32px,4.6vw,72px); }
.title {
  font-size: clamp(22px,2.4vw,36px);
  color: #ff99cc;
  border-bottom: 2px solid #ff80c0;
  display: inline-block;
  margin-bottom: 1em;
  text-align: center;
}

/* ==============================
   ヘッダー
============================== */
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background: rgba(40,0,70,.8);
  box-shadow: 0 2px 10px rgba(255,0,150,.2);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
}
.header-logo a {
  color: #ffb6e1;
  font-size: 20px;
  font-weight: bold;
}
.header-logo a:hover { color: #fff; }
.gnav-list {
  display: flex;
  list-style: none;
}
.gnav-item:not(:last-child){margin-right:20px;}
.gnav-item a {
  position: relative;
  font-size: 13px;
  font-weight: bold;
  padding: 5px 0;
  color: #ffb6e1;
  transition: .3s;
}
.gnav-item a:after {
  content:'';
  position:absolute;
  bottom:0; left:50%;
  width:0; height:3px;
  background:#ffb6e1;
  transition:.3s;
  transform:translateX(-50%);
}
.gnav-item a:hover:after{width:100%;}

/* ==============================
   メインビジュアル
============================== */
.mv {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 0;
  margin:0;
  height:auto;
}
.mv-container {
  padding:0 40px;
  max-width:1000px;
  margin:0;
}
.mv-subtitle {
  font-size:20px;
  font-weight:bold;
  margin-bottom:40px;
  color:#ffe4f2;
}
.mv-text { font-size:16px; color:#ffe4f2; }

/* ==============================
   Works
============================== */
.works-list {
  display:flex;
  flex-wrap:wrap;
  margin-bottom:-40px;
}
.works-item {
  width:31.7%;
  margin-right:1.6%;
  margin-bottom:40px;
  background:rgba(255,255,255,.05);
  border-radius:10px;
  transition:transform .3s,box-shadow .3s;
}
.works-item:nth-of-type(3n){margin-right:0;}
.works-item:hover {
  transform:scale(1.05);
  box-shadow:0 0 15px rgba(255,0,150,.5);
}
.works-img img {
  border:1px solid rgba(255,255,255,.2);
}
.works-name {
  font-size:12px;
  font-weight:bold;
  margin-top:8px;
  color:#ffb6e1;
}
.works-info { font-size:10px; margin-top:5px; }

/* ==============================
   About / Contact
============================== */
.center-profile {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.center-profile .profile-img {
  width:20%;
  max-width:200px;
  margin-bottom:20px;
}
.center-profile .profile-img img {
  width:100%;
  border-radius:50%;
}
.center-profile .profile-body { max-width:600px; }

/* ==============================
   ページトップ / フッター
============================== */
.page-top {
  font-weight:bold;
  padding:10px;
  text-align:center;
  background:#ff80c0;
  color:#1b0033;
  cursor:pointer;
}
.footer {
  background:rgba(40,0,70,.9);
  color:#ffb6e1;
  text-align:center;
  padding:20px;
}
.copyright {
  font-size:10px;
  color:#ffb6e1;
}

/* ==============================
   ボタン
============================== */
button {
  background:#ff80c0;
  color:#1b0033;
  font-size:16px;
  padding:10px 30px;
  border:none;
  border-radius:50px;
  cursor:pointer;
  transition:.3s;
}
button:hover { background:#ff4da6; }
.container_btn {
  width:100%;
  display:flex;
  margin:20px 0;
}
.left{justify-content:flex-start;}
.center{justify-content:center;}
.right{justify-content:flex-end;}

/* ==============================
   SP対応
============================== */
@media (max-width:767px){
  body{font-size:14px;}
  .pc-only{display:none;}
  .sp-only{display:block;}
  .title{font-size:26px;margin-bottom:20px;}
  .mv-title{font-size:30px;}
  .mv-subtitle{font-size:16px;margin-bottom:20px;}
  .mv-text{font-size:14px;}
  .works-item{flex:0 0 48%;margin-bottom:30px;}
  .footer{padding:20px;}
}