@charset "UTF-8";
/* CSS Document */

@charset "UTF-8";

/* =========================
   root variables
========================= */
:root{
  --font-size-12: clamp(0.625rem, calc(0.625rem + 0.00977vw), 0.75rem);
  --font-size-14: clamp(0.75rem, calc(0.75rem + 0.1786vw), 0.875rem);
  --font-size-15: clamp(0.8125rem, calc(0.8125rem + 0.1786vw), 0.9375rem);
  --font-size-18: clamp(0.875rem, calc(0.875rem + 0.2976vw), 1.125rem);
  --font-size-20: clamp(1.0625rem, calc(1.0625rem + 0.01465vw), 1.25rem);
  --font-size-22: clamp(1rem, calc(1rem + 0.4464vw), 1.375rem);
  --font-size-24: clamp(1.125rem, calc(1.125rem + 0.0293vw), 1.5rem);
  --font-size-26: clamp(1.1875rem, calc(1.1875rem + 0.0342vw), 1.625rem);
  --font-size-28: clamp(1.25rem, calc(1.25rem + 0.5357vw), 1.75rem);
  --font-size-30: clamp(1.3125rem, calc(1.3125rem + 0.5357vw), 1.875rem);
  --font-size-32: clamp(1.375rem, calc(1.375rem + 0.0488vw), 2rem);
  --font-size-34: clamp(1.5rem, calc(1.5rem + 0.0488vw), 2.125rem);
  --font-size-36: clamp(1.5rem, calc(1.5rem + 0.6696vw), 2.25rem);
  --font-size-40: clamp(1.75rem, calc(1.75rem + 0.1074vw), 2.5rem);
  --font-size-42: clamp(1.875rem, calc(1.875rem + 0.0586vw), 2.625rem);
  --font-size-46: clamp(2.125rem, calc(2.125rem + 0.0586vw), 2.875rem);
  --font-size-48: clamp(2rem, calc(2rem + 0.8929vw), 3rem);
  --font-size-52: clamp(2.25rem, calc(2.25rem + 0.0781vw), 3.25rem);
  --font-size-56: clamp(2.375rem, calc(2.375rem + 0.0879vw), 3.5rem);
  --font-size-64: clamp(2.625rem, calc(2.625rem + 0.1074vw), 4rem);
  --font-size-72: clamp(2.875rem, calc(2.875rem + 0.1270vw), 4.5rem);
  --font-size-100: clamp(3.25rem, calc(3.25rem + 0.2344vw), 6.25rem);
}

/* =========================
   base
========================= */
html,
body{
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body{
  font-size: var(--font-size-16);
  line-height: 1.75;
  color: #111;
  background: #fff;
}
#contents{
  width: 100%;
  overflow: hidden;
  margin: 0;
}
.inner{
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}
img{
  max-width: 100%;
  height: auto;
  display: block;
}
a{
  color: inherit;
  text-decoration: none;
}
ul,
ol{
  list-style: none;
  padding: 0;
  margin: 0;
}
dl,
dt,
dd{
  margin: 0;
}
section{
  padding-block: clamp(2.6rem, 6vw, 4rem);
}
html{
  scroll-behavior: smooth;
}

/* ===== device hide ===== */
@media screen and (min-width: 769px){
  .pchd{ display: none; }
}
@media screen and (max-width: 768px){
  .sphd{ display: none; }
}
@media (max-width: 32.5em){
  .inner{
    width: 90%;
    max-width: none;
    padding-inline: 0;
  }
}

/* =========================
   header 共通
========================= */
#header{
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: clamp(5.6rem, 8vw, 7.5rem);
  padding: clamp(0.3rem, 1vw, 0.5rem) clamp(1rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 3px #000;
  background: #ededed;
}

/* =========================
   header logo
========================= */
#header .logo{
  display: flex;
  align-items: center;
}
#header .logo > * + *{
  margin-left: clamp(1.8rem, 3vw, 2.5rem);
}
#header .logo dt img{
  max-height: clamp(5.2rem, 6.8vw, 7rem);
  height: auto;
  width: auto;
  display: block;
}
#header .logo dd img{
  max-height: clamp(3.2rem, 4.6vw, 4.5rem);
  height: auto;
  width: auto;
  display: block;
}
#header .logo dd a{
  display: inline-block;
  transition: transform 0.2s ease;
}
#header .logo dd a:hover{
  transform: scale(1.08);
}

/* =========================
   header contact
========================= */
#header .contact{
  display: flex;
  align-items: center;
  margin-right: clamp(2.4rem, 4vw, 4.5rem);
  margin-left: 1rem;
  padding: 0;
}
#header .contact > * + *{
  margin-left: clamp(0.6rem, 1.4vw, 1rem);
}
#header .contact img{
  max-height: clamp(3.6rem, 4.8vw, 4.6rem);
  height: auto;
  width: auto;
  display: block;
}
#header .contact li:last-child img{
  max-height: clamp(3rem, 4vw, 3.8rem);
}

/* hover shake */
@keyframes shake-x{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-0.3rem); }
  40%{ transform: translateX(0.3rem); }
  60%{ transform: translateX(-0.2rem); }
  80%{ transform: translateX(0.2rem); }
  100%{ transform: translateX(0); }
}
.contact li a{
  display: inline-block;
}
.contact li a:hover{
  animation: shake-x 0.35s ease-in-out;
}

/* =========================
   header SP
========================= */
@media (max-width: 48em){
  #header{
    min-height: 5.6rem;
    padding: 0.2rem 1rem;
  }
  #header .contact{
    display: none;
  }
  #header .logo{
    width: 80%;
  }
  #header .logo > * + *{
    margin-left: 1.4rem;
  }
  #header .logo dt img{
    height: 5rem;
  }
  #header .logo dd img{
    height: 2.8rem;
    margin-top: 0.4rem;
  }
  .fat-nav__toggle{
    width: 2.8rem;
    height: 2.8rem;
    top: calc((5.6rem - 2.8rem) / 2);
  }
}

/* =========================
   コンテンツ共通
========================= */
#contents .topImage{
  background-image: url("../images/topImage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  height: 12rem;
  margin: 0;
  margin-top: -2rem;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.3em;
}
#contents .topImage h1{
  font-size: var(--font-size-48);
  font-weight: 700;
  text-align: center;
  margin-top: 4rem;
}
#contents .back{
  width: 30%;
  display: block;
  margin: 0 auto 4rem;
  padding: 1rem 3rem;
  text-align: center;
  border: solid 1px #ccc;
  border-radius: 40px;
}
@media (max-width: 32.5em){
  #contents .topImage{
    height: 6rem;
    margin-bottom: 3rem;
  }
  #contents .topImage h1{
    font-size: 28px;
  }
  #contents .back{
    width: 90%;
  }
}

/* =========================================================
  ボタンアクション（共通）
  ※ .buttons の重複定義を統合
========================================================= */
.buttons{
  list-style: none;
  margin: clamp(1rem, 2.6vw, 1.6rem) auto 0;
  padding: 0;
  width: min(90%, 68rem);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
}
.buttons li{
  flex: 1;
}
.buttons li + li{
  margin-left: clamp(0.9rem, 2.2vw, 1.3rem);
}
.buttons > *{
  margin-top: 0.6rem;
}
.buttons > * + *{
  margin-left: 1rem;
}
.buttons img{
  width: 100%;
  height: auto;
  display: block;
}

/* hoverでちょい沈む／activeでしっかり沈む（最終版に統一） */
.buttons a{
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 0.45rem 0 rgba(0,0,0,.25);
}
.buttons a:hover{
  transform: translateY(0.15rem);
  box-shadow: 0 0.3rem 0 rgba(0,0,0,.25);
}
.buttons a:active{
  transform: translateY(0.45rem);
  box-shadow: 0 0 0 rgba(0,0,0,.25);
}

/* =========================================================
  contactbox CTA
========================================================= */
.contactbox{
  background: #f2b705;
  padding-block: clamp(3.2rem, 5vw, 4rem);
  text-align: center;
}
.contactbox p.strong{
  font-size: var(--font-size-48);
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding-inline: clamp(1rem, 2.4vw, 1.4rem);
  text-align: center;
  margin-bottom: 2rem;
}
.contactbox p.strong::before,
.contactbox p.strong::after{
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.4rem, 5vw, 3rem);
  border-top: 0.32rem solid rgba(242, 140, 40, .9);
  transform: translateY(-50%) rotate(-10deg);
}
.contactbox p.strong::before{
  left: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(40deg);
}
.contactbox p.strong::after{
  right: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(-40deg);
}
@media (max-width: 32.5em){
  .contactbox p.strong{
    font-size: 28px;
  }
  .contactbox .buttons{
    flex-direction: column;
    align-items: center;
  }
  .contactbox .buttons > * + *{
    margin-left: 0;
  }
  .buttons li {
  margin-bottom: 1.5rem;
  }
}

/* =========================================================
  footer
========================================================= */
#footer{
  background: #fff;
  border-top: 3px solid #f26925;
  padding-block: clamp(1.6rem, 4vw, 2.4rem);
  padding-inline: clamp(0.9rem, 2vw, 1.4rem);
}
#footer .toprow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* =========================
   footer logo
========================= */
#footer .logo{
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
#footer .logo > * + *{
  margin-left: clamp(1.5rem, 2.5vw, 2.2rem);
}
#footer .logo dt img{
  width: clamp(7.2rem, 10vw, 9.375rem);
  height: auto;
  display: block;
}
#footer .logo dd img{
  height: clamp(2.2rem, 4.2vw, 4rem);
  width: auto;
  display: block;
}
#footer .logo dd a{
  display: inline-block;
  transition: transform 0.2s ease;
}
#footer .logo dd a:hover{
  transform: scale(1.08);
}

/* =========================
   footer company
========================= */
#footer .company{
  width: 40%;
}
#footer .companyinfo{
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  font-size: var(--font-size-14);
  line-height: 1.7;
  color: #000;
}
#footer .companyinfo .label{
  font-weight: 700;
  margin: 0 0 0.6rem 0;
  font-size: var(--font-size-18);
}
#footer .companyinfo .skyers{
  margin: 0 0 0.6rem 0;
}
#footer .companyinfo .skyers img{
  width: clamp(10rem, 16vw, 13rem);
  height: auto;
  display: block;
}
#footer .companyinfo .addr,
#footer .companyinfo .url{
  margin: 0.2rem 0 0 0;
  font-size: var(--font-size-16);
}
#footer .companyinfo a{
  color: #000;
  text-decoration: none;
}

/* =========================
   footer right block
========================= */
#footer .rightblock{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}
#footer .contact{
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  width: 79%;
}
#footer .contact > * + *{
  margin-left: clamp(0.45rem, 1vw, 0.8rem);
}
#footer .contact img{
  height: auto;
  width: auto;
  display: block;
}
#footer .contact li:nth-child(1) img,
#footer .contact li:nth-child(2) img{
  width: clamp(9.5rem, 18vw, 15.5rem);
}
#footer .contact li:nth-child(3) img{
  width: clamp(10.5rem, 22vw, 18.4375rem);
}
#footer .footer_navi{
  width: 79%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 2rem;
}
#footer .footer_navi li{
  margin-right: 2rem;
  margin-bottom: 2rem;
  font-size: var(--font-size-16);
}
#footer .footer_navi li span{
  color: #f26925;
}
#footer .copyright{
  font-size: var(--font-size-16);
  color: #b2b2b2;
  text-align: center;
}

/* =========================================================
  page-top + footerbtn
========================================================= */
#page-top{
  position: fixed;
  right: 0.5rem !important;
  bottom: clamp(5.2rem, 12vw, 6.4rem);
  z-index: 2000;
  width: clamp(8rem, 20vw, 9.375rem);
  transition: transform .35s ease, opacity .35s ease;
}
#page-top.is-hidden{
  transform: translateX(120%);
  opacity: 0;
  pointer-events: none;
}
#page-top.is-show{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
#page-top img{
  display: block;
  width: 100%;
  height: auto;
}

@keyframes wiggle-rotate{
  0%{ transform: rotate(0deg); }
  15%{ transform: rotate(-15deg); }
  30%{ transform: rotate(15deg); }
  45%{ transform: rotate(-10deg); }
  60%{ transform: rotate(10deg); }
  75%{ transform: rotate(-5deg); }
  90%{ transform: rotate(5deg); }
  100%{ transform: rotate(0deg); }
}
#page-top a{
  display: block;
  transform-origin: center bottom;
}
#page-top a:hover{
  animation: wiggle-rotate 0.6s ease-in-out 2;
}

@media (min-width: 769px){
  #footerbtn{
    display: none;
  }
}
@media (max-width: 48em){
  #footer{
    padding-bottom: 6rem;
  }
  #footer .copyright{
    font-size: 13px;
  }
  #footerbtn{
    position: fixed;
    left: 0;
    right: 0;
    bottom: -7rem;
    z-index: 999;
    border-top: 2px solid #000;
    padding: 0.8rem 0.9rem;
    transition: bottom .25s ease;
    background: #ededed;
  }
  #footerbtn ul{
    display: flex;
  }
  #footerbtn li{
    flex: 1;
  }
  #footerbtn li + li{
    margin-left: 0.7rem;
  }
  #footerbtn img{
    width: 100%;
    height: clamp(2.6rem, 7vw, 3rem);
    object-fit: contain;
  }
  #footer .logo > * + *{
    margin-left: 2rem;
  }
}
@media (max-width: 32.5em){
  #footer .toprow{
    display: block;
  }
  #footer .company{
    width: 100%;
  }
  #footer .companyinfo{
    margin-bottom: 2rem;
  }
  #footer .rightblock{
    width: 100%;
  }
  #footer .footer_navi{
    display: none;
  }
  #footer .contact{
    flex-direction: column;
    width: 100%;
  }
  #footer .contact li{
    width: 80%;
    margin: 0 auto 2rem;
  }
  #footer .contact li:nth-child(1) img,
  #footer .contact li:nth-child(2) img,
  #footer .contact li:nth-child(3) img{
    width: 100%;
    height: auto;
  }
}

/*
=============================================================
スクロールアニメーション
=============================================================
*/
.fadein{
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;
}
.fadein.fadein-left{ transform: translate(-30px, 0); }
.fadein.fadein-right{ transform: translate(30px, 0); }
.fadein.fadein-up{ transform: translate(0, -30px); }
.fadein.fadein-bottom{ transform: translate(0, 30px); }
.fadein.scrollin{
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* =========================================================
スクロールアニメ用
========================================================= */
.fade-item{
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.fade-item.is-in{
  opacity: 1;
  transform: translateY(0);
}