<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Profile</title>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #222;
  background: #eee;
}

/* 全体 */
.profile-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background:
    linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)),
    url("images/bg-pc.jpg") left center / cover no-repeat fixed;
}

/* PC時の右側プロフィール欄 */
.profile-card {
  width: min(560px, 100%);
  margin-left: auto;
  min-height: 100vh;
  padding: 48px 42px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: -12px 0 40px rgba(0,0,0,.08);
}

/* 上部 */
.profile-head {
  text-align: center;
  margin-bottom: 36px;
}

.profile-title {
  font-family: Georgia, serif;
  font-size: 34px;
  letter-spacing: .08em;
  margin: 0 0 24px;
}

.icon {
  width: 116px;
  height: 116px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: #eee;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.name-en {
  font-size: 12px;
  letter-spacing: .45em;
  margin-bottom: 6px;
  color: #777;
}

.name-main {
  display: inline-block;
  padding: 6px 18px;
  background: #111;
  color: white;
  font-size: 22px;
  letter-spacing: .2em;
}

/* 区切り */
.section {
  border-top: 1px solid rgba(0,0,0,.18);
  padding: 24px 0;
}

.section-title {
  font-size: 13px;
  letter-spacing: .12em;
  margin-bottom: 18px;
  color: #555;
}

.section-body {
  text-align: center;
  font-size: 14px;
  line-height: 2;
}

/* リンクボタン */
.link-list {
  display: grid;
  gap: 14px;
}

.link-button {
  display: block;
  padding: 18px 22px;
  border-radius: 18px;
  text-decoration: none;
  color: #333;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: .2s;
}

.link-button:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.95);
}

.link-main {
  display: block;
  font-size: 22px;
  letter-spacing: .12em;
}

.link-sub {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #777;
}

/* スマホ */
@media (max-width: 720px) {
  .profile-page {
    background:
      linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)),
      url("images/bg-sp.jpg") center top / cover no-repeat fixed;
  }

  .profile-card {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    padding: 36px 24px;
    background: rgba(255,255,255,.82);
    box-shadow: none;
  }

  .profile-title {
    font-size: 30px;
  }

  .name-main {
    font-size: 20px;
  }
}
</style>
</head>

<body>
<div class="profile-page">
  <main class="profile-card">

    <header class="profile-head">
      <h1 class="profile-title">Profile</h1>

      <div class="icon">
        <img src="images/icon.jpg" alt="アイコン">
      </div>

      <div class="name-en">osawa huto</div>
      <div class="name-main">大澤　楓斗</div>
    </header>

    <section class="section">
      <div class="section-title">使用ソフト</div>
      <div class="section-body">
        CLIP STUDIO PAINT PRO<br>
        Adobe Illustrator 2020<br>
        Adobe Photoshop 2020
      </div>
    </section>

    <section class="section">
      <div class="section-title">趣味・好きなもの</div>
      <div class="section-body">
        映画・音楽鑑賞・ゲーム<br>
        猫が大好き
      </div>
    </section>

    <section class="section">
      <div class="section-title">自分の強み</div>
      <div class="section-body">
        強い感情を含む構図や、<br>
        物語性のあるイラストが得意です。
      </div>
    </section>

    <section class="section">
      <div class="section-title">メッセージ</div>
      <div class="section-body">
        こちらにプロフィール文や注意書きを入れます。<br>
        ご依頼・ご相談などお気軽にどうぞ。
      </div>
    </section>

    <section class="section">
      <div class="section-title">Link</div>

      <div class="link-list">
        <a class="link-button" href="#">
          <span class="link-main">Portfolio</span>
          <span class="link-sub">ポートフォリオ・お仕事情報</span>
        </a>

        <a class="link-button" href="#">
          <span class="link-main">pixiv</span>
          <span class="link-sub">作品置き場</span>
        </a>

        <a class="link-button" href="#">
          <span class="link-main">X / Twitter</span>
          <span class="link-sub">お知らせ・日常</span>
        </a>
      </div>
    </section>

  </main>
</div>
</body>
</html>