@charset "UTF-8";

/* =========================================================
   PLY, INC.  -  style.css
   breakpoints : ~767 SP / 768-1023 TAB / 1024- PC
   ========================================================= */

:root{
  --cyan:#00aac6;
  --blue:#3fa9dd;
  --ink:#3e3a39;
  --gray:#7d7a78;
  --bg:#f8f7f6;
  --white:#fff;
  --header-h:120px;
  --inner:1180px;
  --font-en:"Montserrat",sans-serif;
  --font-jp:"Noto Sans JP","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:100px;}
body{
  margin:0;
  font-family:var(--font-en),var(--font-jp);
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,iframe{max-width:100%;display:block;}
ul,ol,dl,dd{margin:0;padding:0;list-style:none;}
h1,h2,h3,p,figure{margin:0;}
a{color:inherit;text-decoration:none;}

.inner{width:min(100% - 48px,var(--inner));margin-inline:auto;}

/* ---------- common headings ---------- */
.h-lg{
  font-size:clamp(32px,5vw,64px);
  font-weight:600;
  line-height:1.45;
  text-align:center;
  letter-spacing:.02em;
}
.h-lg--light{color:#fff;}
.h-md{
  font-size:clamp(24px,3vw,40px);
  font-weight:600;
  line-height:1.5;
  margin-bottom:28px;
}
.sec-title{
  font-family:var(--font-en);
  font-size:clamp(40px,6vw,64px);
  font-weight:700;
  color:var(--cyan);
  text-align:center;
  letter-spacing:.02em;
  margin-bottom:48px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:16px 34px;border-radius:6px;
  font-size:14px;font-weight:700;letter-spacing:.08em;
  transition:.3s;
}
.btn .arw{font-size:1.2em;line-height:1;}
.btn--fill{background:var(--cyan);color:#fff;}
.btn--fill:hover{background:#0292aa;}
.btn--ghost{background:rgba(255,255,255,.9);color:var(--ink);}
.btn--ghost:hover{background:#fff;}
.btn--dark{background:#333;color:#fff;border:0;cursor:pointer;font-family:inherit;}
.btn--dark:hover{background:#000;}

/* ---------- TOP link ---------- */
.totop{text-align:right;font-size:13px;font-weight:700;letter-spacing:.1em;padding:32px 0 0;}
.totop span{display:inline-block;transform:scaleX(1.6);font-size:10px;}
.totop--light a{color:#fff;}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,60px);
  pointer-events:none;
}
.header > *{pointer-events:auto;}
.logo{width:92px;}
.logo svg{width:100%;height:auto;}

.gnav ul{display:flex;gap:clamp(16px,2.4vw,34px);}
.gnav a{
  font-family:var(--font-en);
  font-size:14px;font-weight:500;letter-spacing:.18em;
  color:var(--ink);
  transition:.3s;
}
.gnav a:hover{color:var(--cyan);}

.nav-toggle{display:none;}

/* 下層ページのヒーロー上では白抜き表示 */
.header--light .gnav a{color:#fff;}
.header--light .gnav a:hover{color:#8fe3f2;}
.header--light .logo svg [fill="#3e3a39"]{fill:#fff;}
.header--light .nav-toggle span{background:#fff;}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  padding-bottom:clamp(120px,13vw,190px);
  display:flex;align-items:center;
  overflow:hidden;
  background:#0d2233;
  color:#fff;
}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero__glare{
  position:absolute;top:-18%;left:-10%;
  width:min(70vw,900px);aspect-ratio:1;
  background:url("../images/wihteGlare.png") center/contain no-repeat;
  z-index:1;pointer-events:none;
}
.hero__inner{
  position:relative;z-index:2;
  width:min(100% - 48px,var(--inner));
  margin-inline:auto;
  padding-top:var(--header-h);
}
.hero__catch{
  font-family:var(--font-en);
  font-size:clamp(44px,8.6vw,124px);
  font-weight:700;line-height:1.08;
  letter-spacing:.01em;
  margin-bottom:clamp(28px,5vw,64px);
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hero__title{
  font-size:clamp(20px,2.2vw,28px);
  font-weight:700;letter-spacing:.1em;
  margin-bottom:18px;
}
.hero__lead{
  font-size:15px;font-weight:500;letter-spacing:.04em;
  margin-bottom:32px;
}
.hero__scroll{
  position:absolute;z-index:2;left:50%;bottom:clamp(130px,14vw,200px);translate:-50% 0;
  text-align:center;font-family:var(--font-en);
  font-size:12px;letter-spacing:.18em;
}
.hero__scroll i{
  display:block;width:12px;height:12px;margin:6px auto 0;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 6px}}

/* =========================================================
   QUALITY  (LOW / MID / HIGH)
   ========================================================= */
.quality{
  position:relative;
  background:linear-gradient(180deg,#7fccdd 0%,#3ba7bf 55%,#0e7f97 100%);
  padding-bottom:clamp(70px,9vw,140px);
}
.quality__strip{
  position:relative;z-index:2;
  display:block;width:100%;height:auto;
  margin-top:clamp(-40px,-3vw,-16px);
}
.quality__body{padding-top:clamp(64px,8vw,120px);color:#fff;}
.quality__text{
  max-width:790px;margin:clamp(32px,5vw,70px) auto 0;
  font-size:15px;font-weight:500;letter-spacing:.03em;
}

/* =========================================================
   SOLUTION  (6 circles)
   ========================================================= */
.solution{background:var(--bg);padding:clamp(70px,10vw,150px) 0;}
.circles{
  margin-top:clamp(40px,6vw,80px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,4vw,80px) clamp(16px,4vw,90px);
  justify-items:center;
}
.circle{
  position:relative;
  width:100%;max-width:300px;aspect-ratio:1;border-radius:50%;
  background:var(--blue);
  box-shadow:0 14px 26px rgba(0,0,0,.12);
  display:grid;place-items:center;
  transition:background .35s;
  cursor:default;
}
.circle span{
  grid-area:1/1;
  color:#fff;text-align:center;
  font-size:clamp(15px,2.1vw,30px);
  font-weight:600;line-height:1.6;letter-spacing:.02em;
  transition:opacity .35s;
  padding:0 .5em;
}
.circle__back{opacity:0;}
.circle:hover{background:var(--cyan);}
.circle:hover .circle__front{opacity:0;}
.circle:hover .circle__back{opacity:1;}

/* =========================================================
   SERVICE
   ========================================================= */
.service{background:var(--bg);padding:0 0 clamp(60px,8vw,120px);}
.split{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(24px,5vw,80px);
  align-items:center;
  padding:clamp(50px,7vw,110px) 0;
}
.split--rev .split__visual{order:2;}
.split__text p{font-size:15px;font-weight:500;letter-spacing:.02em;}

.cats{width:100%;height:auto;}
.team{width:100%;height:auto;}

/* =========================================================
   BANNER
   ========================================================= */
.banner{position:relative;overflow:hidden;color:#fff;background:#1e899f;}
.banner__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.banner::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(30,137,159,.5);
}
.banner__inner{
  position:relative;z-index:2;
  min-height:344px;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  padding:56px 0;
}
.banner h2{
  font-size:clamp(20px,2.4vw,30px);
  font-weight:600;line-height:1.7;letter-spacing:.06em;
}
.banner__en{
  margin-top:22px;
  font-family:var(--font-en);
  font-size:14px;letter-spacing:.1em;font-weight:500;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about{background:var(--bg);padding:clamp(70px,10vw,150px) 0;}
.card{
  background:#fff;border-radius:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  padding:clamp(36px,6vw,90px) clamp(24px,5vw,80px);
  margin-bottom:clamp(40px,6vw,90px);
}
.card__title{
  font-size:clamp(22px,2.6vw,32px);font-weight:700;
  text-align:center;margin-bottom:clamp(32px,4vw,60px);
}
.greet{display:grid;grid-template-columns:396px 1fr;gap:clamp(24px,4vw,48px);}
/* FACE.png は 2456x3680 の縦長。上下をトリミングして横長に見せる */
.greet__photo img{
  width:100%;height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 35%;
  border-radius:2px;
}
.greet__body p{font-size:15px;font-weight:500;}
.greet__name{text-align:right;margin-top:28px;}
.tag{
  display:inline-block;margin-top:30px;
  background:#77c5d8;color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.06em;
  padding:2px 10px;
}
.career{margin-top:12px;font-size:15px;font-weight:500;}
.career li::before{content:"-";margin-right:.6em;}

.profile div{
  display:grid;grid-template-columns:230px 1fr;
  gap:16px;
  padding:22px 0;
  border-bottom:1px solid var(--cyan);
}
.profile div:last-child{border-bottom:0;}
.profile dt{font-size:14px;color:var(--ink);}
.profile dd{font-size:15px;font-weight:500;}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  position:relative;overflow:hidden;
  background:#0d2233;color:#fff;
  padding:clamp(70px,10vw,140px) 0;
}
.contact__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.contact > .inner{position:relative;z-index:1;}
.contact .card{color:var(--ink);}
.contact .sec-title{color:#28c6e6;text-shadow:0 2px 20px rgba(0,0,0,.3);}
.contact__lead{
  font-size:clamp(20px,2.6vw,30px);font-weight:700;
  text-align:center;line-height:1.6;
}
.contact__note{text-align:center;font-size:14px;margin-top:16px;}

.form{max-width:640px;margin:clamp(36px,5vw,64px) auto 0;}
.form__row{margin-bottom:28px;}
.form__row label{display:block;font-size:14px;font-weight:700;margin-bottom:10px;}
.req{color:#e2504a;}
.form input[type=text],
.form input[type=email],
.form textarea{
  width:100%;
  background:#faf6f5;
  border:1px solid #e6dedd;border-radius:6px;
  padding:16px;
  font-family:inherit;font-size:15px;color:var(--ink);
  transition:.2s;
}
.form input:focus,.form textarea:focus{
  outline:none;border-color:var(--cyan);background:#fff;
}
.form textarea{resize:vertical;min-height:160px;}
.form__agree{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:36px 0 0;font-size:14px;
}
.form__agree input{width:16px;height:16px;accent-color:var(--cyan);}
.form__submit{text-align:center;margin:24px 0 0;}

/* =========================================================
   下層ページ（PRIVACY POLICY など）
   ========================================================= */
.page-hero{
  position:relative;overflow:hidden;
  min-height:clamp(260px,32vw,420px);
  display:flex;align-items:flex-end;
  padding:calc(var(--header-h) + 24px) 0 clamp(36px,5vw,64px);
  background:linear-gradient(115deg,#0d2233 0%,#1c5f77 55%,#2f8fa6 100%);
  color:#fff;
}
.page-hero .inner{position:relative;z-index:1;}
.page-hero h1{
  font-family:var(--font-en);
  font-size:clamp(34px,6.4vw,72px);
  font-weight:600;line-height:1.1;letter-spacing:.02em;
}

.legal{background:var(--bg);padding:clamp(56px,8vw,110px) 0 clamp(40px,6vw,70px);}
.legal__block{margin-bottom:clamp(40px,5vw,64px);}
.legal h2{
  font-size:clamp(16px,1.6vw,18px);font-weight:700;letter-spacing:.04em;
  margin-bottom:18px;
}
.legal p{font-size:15px;font-weight:500;letter-spacing:.02em;}
.legal p + .legal__ol,
.legal__ol + p{margin-top:24px;}

.legal__list li,
.legal__ol li{
  font-size:15px;font-weight:500;letter-spacing:.02em;
  padding-left:1.6em;position:relative;
  margin-bottom:10px;
}
.legal__list li::before{content:"・";position:absolute;left:.2em;}
.legal__ol{counter-reset:legal;}
.legal__ol li{counter-increment:legal;}
.legal__ol li::before{content:counter(legal) ".";position:absolute;left:.2em;}

.legal__sign{
  text-align:right;line-height:2;
  margin-top:clamp(40px,6vw,72px);
}

.breadcrumb{
  margin-top:clamp(48px,7vw,90px);
  padding-top:24px;border-top:1px solid #e6e3e1;
}
.breadcrumb ol{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.breadcrumb li{
  font-family:var(--font-en);
  font-size:12px;font-weight:600;letter-spacing:.14em;
}
.breadcrumb li + li::before{content:"›";margin-right:14px;color:var(--gray);}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb [aria-current]{color:#1e5a9f;}

/* ---------- スパム対策のダミー項目 ---------- */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- contact.php の結果ページ ---------- */
.result{
  background:var(--bg);
  padding:calc(var(--header-h) + clamp(40px,7vw,90px)) 0 clamp(80px,10vw,140px);
  min-height:70vh;
}
.result__card{max-width:760px;margin-inline:auto;text-align:center;}
.result__lead{font-size:16px;font-weight:700;line-height:1.9;margin-bottom:20px;}
.result__no{
  margin:28px 0;font-size:15px;
}
.result__no strong{
  font-family:var(--font-en);font-size:22px;letter-spacing:.08em;color:var(--cyan);
  margin-left:.4em;
}
.result__errors{
  margin:24px auto;max-width:520px;text-align:left;
  border:1px solid #f0d6d4;border-radius:6px;background:#fdf6f5;
  padding:20px 24px;
}
.result__errors li{font-size:15px;}
.result__errors li::before{content:"・";}
.result__btn{margin-top:44px;}
.result a{color:var(--cyan);text-decoration:underline;}
.result .btn{text-decoration:none;color:#fff;}

/* =========================================================
   ACCESS
   ========================================================= */
.access{background:#fff;padding:clamp(60px,8vw,110px) 0 0;}
.access .sec-title{margin-bottom:24px;}
.access__note{text-align:center;font-size:15px;font-weight:700;padding-bottom:clamp(32px,5vw,56px);}
.access__map iframe{width:100%;height:min(60vh,560px);border:0;}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--cyan);color:#fff;padding:clamp(50px,7vw,100px) 0 60px;}
.footer__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.footer__logo{
  font-family:var(--font-en);
  font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:.02em;
}
.footer__nav{display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap;}
.footer__nav a{font-family:var(--font-en);font-size:14px;font-weight:600;letter-spacing:.12em;}
.footer__nav a:hover{opacity:.7;}
.footer__privacy{text-align:center;margin-top:clamp(40px,6vw,80px);}
.footer__privacy a{font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.14em;}
.footer__copy{text-align:center;margin-top:18px;font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.1em;}

/* =========================================================
   TABLET   ~1023px
   ========================================================= */
@media (max-width:1023px){
  :root{--header-h:88px;}
  .greet{grid-template-columns:1fr;}
  .greet__photo{max-width:396px;margin-inline:auto;}
  .split{grid-template-columns:1fr;}
  .split--rev .split__visual{order:0;}
  .cats{max-width:560px;margin-inline:auto;}
  .team{max-width:640px;margin-inline:auto;}
  .profile div{grid-template-columns:150px 1fr;}
}

/* =========================================================
   SP   ~767px
   ========================================================= */
@media (max-width:767px){
  :root{--header-h:80px;}
  .inner{width:min(100% - 32px,var(--inner));}

  .logo{width:72px;}

  /* hamburger */
  .nav-toggle{
    display:block;position:relative;z-index:110;
    width:44px;height:44px;padding:0;
    background:none;border:0;cursor:pointer;
  }
  .nav-toggle span{
    display:block;width:24px;height:2px;margin:5px auto;
    background:var(--ink);transition:.3s;
  }
  .nav-toggle[aria-expanded="true"] span{background:#fff;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){translate:0 7px;rotate:45deg;}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){translate:0 -7px;rotate:-45deg;}

  .gnav{
    position:fixed;inset:0;z-index:105;
    background:rgba(0,170,198,.97);
    display:grid;place-items:center;
    opacity:0;visibility:hidden;transition:.3s;
  }
  .gnav.is-open{opacity:1;visibility:visible;}
  .gnav ul{flex-direction:column;gap:28px;text-align:center;}
  .gnav a{color:#fff;font-size:18px;letter-spacing:.2em;}

  .hero{min-height:88svh;}
  .hero__scroll{bottom:150px;}

  .quality__strip{margin-top:-10px;}

  .circles{grid-template-columns:repeat(3,1fr);gap:16px 10px;}
  .circle span{font-size:clamp(9px,2.5vw,13px);line-height:1.5;}

  .banner__inner{flex-direction:column;align-items:flex-start;}

  .profile div{grid-template-columns:1fr;gap:6px;padding:18px 0;}

  .footer__top{flex-direction:column;align-items:flex-start;}

  .page-hero{min-height:220px;align-items:center;}
}

/* =========================================================
   SCROLL FADE-IN
   ========================================================= */
.js-fade{opacity:0;translate:0 24px;transition:opacity .8s ease,translate .8s ease;}
.js-fade.is-shown{opacity:1;translate:0 0;}
@media (prefers-reduced-motion:reduce){
  .js-fade{opacity:1;translate:0 0;transition:none;}
  html{scroll-behavior:auto;}
}