/*
Theme Name: Mayuka Portfolio
Author: Mayuka
Description: Figma design based original portfolio theme.
Version: 1.0.0
*/

:root{
  --navy:#183642;
  --ocean:#6FA6B5;
  --sand:#E7D8C5;
  --base:#F7F5EF;
  --accent:#E27D65;
  --text:#293238;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--base);color:var(--text);font-family:"Noto Sans JP",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.site-header{height:88px;background:var(--base);display:flex;align-items:center;justify-content:space-between;padding:0 8.33%;position:relative;z-index:10}
.logo-wrap{display:flex;align-items:center;gap:13px}
.logo-mark{width:55px;height:53px;border:1px solid var(--text);border-radius:50%;background:var(--ocean)}
.logo-text{font-size:16px}
.site-nav{display:flex;gap:28px;font-size:14px}
.menu-toggle{display:none;background:none;border:0;font-size:28px;color:var(--text);cursor:pointer}

/* =========================
   HERO
========================= */

.hero {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
  background: #6FA6B5;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 120px 10.2%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 0.87;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #293238;
}

.hero-copy {
  margin: 40px 0 28px;
  font-size: 33px;
  font-weight: 800;
  color: #293238;
}

.outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #293238;
  padding: 9px 18px;
  font-size: 18px;
  color: #293238;
  background: transparent;
  text-decoration: none;
}

.outline-btn span {
  font-size: 20px;
}


/* スマホ */

@media (max-width: 768px) {

  .hero {
    height: 100vh;
    min-height: 600px;
  }

  .hero-overlay {
    padding: 80px 28px 50px;
    justify-content: center;
  }

.hero-title {
  font-size: clamp(38px, 9vw, 58px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

  .hero-copy {
    font-size: 20px;
    margin: 28px 0 22px;
  }

  .outline-btn {
    font-size: 15px;
    padding: 9px 16px;
  }

}

.section{padding:100px 8.33%}
.section-title{text-align:center;margin:0;font-size:clamp(58px,9vw,133px);line-height:1;font-family:Montserrat,Arial,sans-serif}
.section-subtitle{text-align:center;margin:15px 0 70px;font-size:24px}
.work-list{max-width:1000px;margin:auto}
.work-card{padding:60px 0;border-bottom:1px solid #aaa;display:grid;grid-template-columns:1fr 160px;gap:30px;align-items:end}
.work-no{font-size:18px;margin-bottom:25px}
.work-image{height:270px;background:#dbe9ea}
.work-meta{margin-top:20px}
.work-meta strong{display:block;font-size:24px}
.about{background:var(--base);display:grid;grid-template-columns:480px 1fr;gap:80px;align-items:start}
.about-photo{height:600px;background:var(--ocean)}
.skills{background:var(--navy);color:var(--base)}
.skill-grid{max-width:720px;margin:70px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.skill-card{background:var(--base);color:var(--text);min-height:150px;padding:28px}
.contact{min-height:900px}
.contact-form{max-width:900px;margin:70px auto 0}
.contact-row{display:grid;grid-template-columns:140px 1fr;gap:30px;margin:28px 0}
.contact-row input,.contact-row textarea{width:100%;border:0;border-bottom:1px solid var(--text);background:transparent;padding:10px;font:inherit}
.contact-row textarea{min-height:180px;border:1px solid var(--text)}
.site-footer{height:168px;background:var(--navy);color:var(--base);display:flex;align-items:center;justify-content:space-between;padding:0 8.33%;font-size:14px}

@media (max-width:768px){
  .site-header{height:70px;padding:0 5%}
  .logo-mark{width:40px;height:40px}
  .logo-text{font-size:13px}
  .site-nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--base);padding:25px 5%;flex-direction:column;gap:20px;border-top:1px solid #ddd}
  .site-nav.is-open{display:flex}
  .menu-toggle{display:block}
  .hero{min-height:680px}
  .hero-overlay{padding:80px 7%}
  .hero-title{font-size:18vw}
  .hero-copy{font-size:22px;margin-top:35px}
  .section{padding:70px 7%}
  .section-title{font-size:20vw}
  .work-card{grid-template-columns:1fr;padding:45px 0}
  .work-image{height:210px}
  .about{grid-template-columns:1fr;gap:35px}
  .about-photo{height:420px}
  .skill-grid{grid-template-columns:1fr}
  .contact-row{grid-template-columns:1fr;gap:5px}
  .site-footer{height:auto;min-height:130px;padding:30px 7%;align-items:flex-start;flex-direction:column;gap:25px}
}

/* =========================
   INTRO
========================= */

.intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: #f7f5ef;
  z-index: 9999;
  overflow: hidden;
}

.intro-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.intro-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.intro-image.is-active {
  opacity: 1;
}

.intro-skip {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 2;
  border: 0;
  background: transparent;
  color: #293238;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 10px;
}

/* スマホ */
@media (max-width: 768px) {
  .intro-image {
    object-fit: cover;
  }

  .intro-skip {
    top: 20px;
    right: 20px;
    font-size: 14px;
  }
}