@charset "utf-8";
/* ==========================================
common
============================================= */
/* 色の設定と左右のアキを記述 */
:root {
    --primary_corporate: #666968;
    --primary_green: #00AE9D;
    --primary_white: #F2F2F2;
    --primary_corporate_identity: #F8FAF9;
    --primary_work_process: #EDF0EF;
    --primary_portfolio: #D9DFDF;
    --primary_company: #CBD0D0;
    --primary_dark_grey80: #818483;
    --primary_dark_grey50: #ADAFAE;
    --contentWidth: 88.8%;
    --contentPadding: 4.2%;
}

html {
    font-size: 62.5%;
}

body {
    font-family: YakuHanJP, 'Noto Serif JP',
        century,
        Arial,
        serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--primary_corporate, #666968);
    line-height: 1.8;
    background-color: var(--primary_corporate_identity);
}

img {
    max-width: 100%;
    height: auto;
}

.topic {
    font-family: "Outfit",
        serif;
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--primary_corporate, #666968);
    text-align: left;
    margin: 0 auto;
}

.topic__jp--text {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    color: var(--primary_corporate, #666968);
    text-align: left;
    margin: 8px auto;
}

.topic__group {
    padding: 60px 40px 64px;
}

.topic__illust {
    width: 100%;
    height: 81px;
    text-align: right;
}

.Portfolio {
    text-align: center;
}

.mainVisual__btn {
    display: block;
    margin: 0 auto;
    position: relative;
    transition: 0.4s;
    width: 280px;
    height: 74px;
}

.mainVisual__btn:hover {
    opacity: 0.5;
}

.nav__item {
    font-family: "Outfit",
        serif;
    position: relative;
    transition: 0.3s;
}

.footer {
    font-size: 1.5rem;
    padding: 16px 0;
    margin-bottom: 4px;
}

.nav__item:hover {
    opacity: 0.5;
}

/* common pc end */

@media screen and (max-width: 769px) {
    .topic {
        font-size: 2.8rem;
    }

    .topic__group {
        padding: 60px 0 60px 4.2%;
    }

    .mainVisual__btn {
        transition: none;
        padding: 0 68px;
        width: 100%;
        height: auto;
        margin-top: 16px;
    }
}

/* mainVisual sp end */

/* ==========================================
header
============================================= */
.header {
    width: 100%;
    height: 80px;
    padding: 0 2.77%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background-color: var(--primary_white);
}

/* .navの初期表示 */
.nav__container {
    position: relative;
}

.hamburger__menu {
  position: absolute;
  top: -19px;
  right: 0px;
  width: 50px;
  height: 19px;
  cursor: pointer;
  z-index: 30;
}

.hamburger__menu .line {
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var( --primary_corporate);
  transition: all 0.2s ease;
}

.hamburger__menu .line:nth-of-type(1) { top: 0; }
.hamburger__menu .line:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
.hamburger__menu .line:nth-of-type(3) { bottom: 0; }

.hamburger__menu.active > .line:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger__menu.active > .line:nth-of-type(2) {
  opacity: 0;
}

.hamburger__menu.active > .line:nth-of-type(3) {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) rotate(-45deg);
}

.hamburger__menu .menu__text,
.hamburger__menu .close__text {
  font-family: "Outfit",
     serif;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var( --primary_corporate);
  white-space: nowrap;
  transition: opacity 0.2s;
}

.hamburger__menu .close__text { opacity: 0; }
.hamburger__menu .active .menu__text { opacity: 0; }
.hamburger__menu .active .close__text { opacity: 1; }

.nav__menu {
  display: none;
}

.nav__menu.active {
  display: flex;
  flex-direction: column;
  background: rgba(240, 240, 240, 0.95);
  border: 1px solid #F2F2F2;
  padding: 16px;
  position: absolute;
  top: 0;
  max-width: 280px;
  width: 240px;
  border-radius: 8px 0 0 8px;
  animation: slideFromRight 0.35s ease forwards;
}

.nav__menu a {
  display: block;
  color: var( --primary_corporate);
  text-decoration: none;
  padding: 7px 14px;
  margin: 4px;
  font-size: 1.6rem;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav__menu a:hover {
  color: var( --primary_corporate);
  background: var( --primary_white);
}

.nav__menu a.show {
  opacity: 1;
  transform: translateX(0);
}

@keyframes slideFromRight {
  0% { right: -100%; opacity: 0; }
  100% { right: 0; opacity: 1; }
}

.header__logo {
    display: block;
    width: 109px;
    height: 50px;
}

.header__logo:hover {
    opacity: 0.5;
    transition: 0.4s;
}

/* header pc end */


@media screen and (max-width: 769px) {
    .header {
    padding: 0 4.26%;
}

}

/* header sp end */




/* ==========================================
mainVisual
============================================= */
.main {
    display: flex; 
}

.mainVisual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:50%;
    height: calc(100vh - 80px);
    background-color: var(--primary_white);
    text-align: center;
    margin-top: 80px;
    z-index: 10;
    position: fixed; /* 左側をスクロール中に固定する */
    flex: 1;
}

.mainVisual__animation {
    display: block;
    width: 100%;
    text-align: center;
}

.mainVisual__animation--img {
    width: 8vw;
    text-align: center;
}

.mainVisual__animation--img.wo {
    width: 3.6vw;
}

.mainVisual__animation--img.ni {
    width: 5.9vw;
}

.mainVisual__animation--img.bikkuri {
    width: 8.5vw;
}

.mainVisual__text {
    margin: 16px 0 40px;
}

.br__sp {
    display: none;
}

/* mainVisual pc end */

@media screen and (max-width: 769px) {
    .main {
        display: flex; 
        flex-direction: column;
    }

    .mainVisual {
        position: static;
        width:100%;
        padding: 20px 0 40px;
    }

    .mainVisual__text {
        margin: 8px 0 8px;
    }

    .br__sp {
        display: block;
    }
}

/* mainVisual sp end */


/* ==========================================
footer
============================================= */
.footer__topic {
    width: 100%;
    height: 570px;
    background-color: var(--primary_corporate);
}

.footer__topic--nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.footer__group--left {
    padding: 40px 0 40px 40px;
}

.footer__logo {
    width: 109px;
    height: 50px;
}

.footer__logo:hover {
    opacity: 0.5;
    transition: 0.3s;
}

.br__sp {
    display: none;
}

.footer__address,
.access__text,
.footer__nav__list,
.google__map--text {
    color: var(--primary_white);
    line-height: 1.62;
    letter-spacing: 0.06em;
}

.google__map--text {
    font-family: "Outfit",
        serif;
    width: 70%;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--primary_white);
}

.google__map--text:hover {
    opacity: 0.5;
    transition: 0.3s;
}

.google__map--btn {
    position: relative;
    margin-top: 8px;
}

.google__map--text::after {
    content: '';
    display: block;
    background-image: url(../img/google_map_icon.svg);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.footer__address {
    margin-top: 28px;
}

.footer__map {
    width: 180px;
    height: auto;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 28px;
}


.footer__map:hover {
    opacity: 0.5;
    transition: 0.4s;
}


.access__text {
    margin-top: 28px;
    line-height: 1.25;
}

.footer__group--right {
    padding: 28px 40px 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer__nav__list {
    text-align: right;
}

.privacy__copy {
    font-size: 1.3rem;
    color: var(--primary_white);
    line-height: 1.5;
    letter-spacing: -0.04em;
    text-align: right;
}
.copy__text {
    font-family: "Outfit",
        serif;
    letter-spacing: 0em;
}

/* footer pc */

@media screen and (max-width: 769px) {
    .footer__topic {
        height: auto;
    }

    .br__sp {
        display: block;
    }

    .footer__group--left {
        padding: 40px 0 16px 16px;
    }

    .footer__address {
        margin-top: 24px;
    }

    .footer__group--right {
        padding: 28px 16px 16px 0;
    }

    .google__map--text {
        display: flex;
        align-items: center;
        gap: 10px;
    }


}