@charset 'utf-8';

:root {
 scroll-padding-top: 40px;

 --ivory: #f6f1e4;
 --ivory-d: #F1EDDF;
 --ivory-l: #faf7ed;
 --pink: #CC7275;
 --black: #000;
 --gray: #eee;

 --fs-xsmall: clamp(11px, 2.8vw, 12px);
 --fs-small: clamp(14px, 3vw, 15px);
 --fs-middle: clamp(15px, 4vw, 16px);
 --fs-large: clamp(20px, 3vw, 28px);
 --fs-xlarge: clamp(28px, 4vw, 32px);
 --fs-xxlarge: clamp(36px, 4.5vw, 36px);
}

.jost {
 font-family: "Jost", sans-serif;
 font-optical-sizing: auto;
 font-weight: 700;
 font-style: normal;
}

html {
 scroll-behavior: smooth;
}

body {
 background-color: var(--pink);
}

body * {
 font-family: "Zen Kaku Gothic New", sans-serif;
 /* font-family: "Noto Sans JP", sans-serif; */
 color: var(--black);
 font-style: normal;
 font-size: var(--fs-middle);
 font-weight: 500;
 line-height: 2;
 font-feature-settings: "palt";
 letter-spacing: 0.08em;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
 font-weight: 700;
}

p {
 margin-block: 1.5em;
}

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

.btn-base {
 position: relative;
 display: block;
 width: 100%;
 height: fit-content;
 margin-block: 5%;
 margin-inline: auto;
 padding: 1em 2em;
 background-color: var(--pink);
 color: var(--ivory-l);
 font-weight: 700;
 border-radius: 2em;
 text-decoration: none;
 transition: .3s;
}

.btn-base::before {
 position: absolute;
 content: "";
 -webkit-mask-image: url('../img/icon/arrow-next.svg');
 -webkit-mask-size: contain;
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-position: center;
 mask-image: url('../img/icon/arrow-next.svg');
 mask-size: contain;
 mask-repeat: no-repeat;
 mask-position: center;
 background-color: var(--ivory-l);
 inset: 0;
 left: auto;
 right: 1em;
 margin: auto;
 width: 2em;
 height: 2em;
 border: 2px solid red;
}

.btn-base:hover {
 transform: translateY(-.2em);
}

/* ======== */

aside {
 margin-block-start: .8em;
 font-size: var(--fs-small);
}

.main-wrapper {
 display: flex;
 align-items: flex-start;
 justify-content: flex-start;
}

body:has(.main-wrapper.active) {
 overflow-y: hidden;
}

.g-nav {
 position: fixed;
 inset: 0;
 top: 80px;
 left: 100%;
 background-color: var(--ivory-l);
 z-index: 1000;
 transition: .8s;
}

.g-nav.active {
 top: 80px;
 left: 50%;
 margin: auto;
}

.g-nav-inner {
 display: grid;
 grid-template-columns: 1fr;
 gap: 2em;
 padding: 2em 1em;
}

.g-nav-item a {
 display: block;
 width: fit-content;
 margin-inline: auto 0;
 opacity: 0;
 transform: translateY(8px);
 transition:
  opacity .4s ease,
  transform .4s ease;
}

.g-nav-item a.active {
 opacity: 1;
 transform: translateY(0);
}

/* ======== */

.header {
 position: fixed;
 inset: 0;
 bottom: auto;
 height: 80px;
 z-index: 100;
}

.header-inner {
 display: grid;
 grid-template-columns: 1fr 80px;
 background: var(--ivory);
}

.header .logowrap {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 padding: 0 2%;
}

.header .logowrap .tohome {
 width: 80%;
 max-width: 320px;
}

.logo-comm {
 display: inline-block;
 font-size: var(--fs-xsmall);
 line-height: 1.2;
 font-weight: 700;
}

.header .logo-comm {
 margin-block: .5em 0;
 padding-inline: .2em;
 color: var(--pink);
}

.footer-inner {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: 2em;
 padding: 5em 1em;
}

.footer-inner>* {
 display: block;
 width: fit-content;
}

.footer-inner .logowrap {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.footer-inner .btnwrap {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 align-items: center;
 gap: 1em;
 text-align: center;
 width: 100%;
}

.footer-inner .btn {
 background-color: var(--ivory-d);
 border-radius: 1em;
 text-decoration: none;
 padding: 1em;
 height: fit-content;
 aspect-ratio: 1.5 / 1;
 display: flex;
 justify-content: center;
 align-items: center;
 outline: 1px solid var(--black);
}

.footer-inner .btn:hover {}

.footer-inner .copyright {
 margin-block: 2em 0;
 font-size: var(--fs-xsmall);
}

.footer-inner .copyright time {
 font-size: var(--fs-xsmall);
 pointer-events: none;
}

#menu-tgl {
 display: grid;
 place-content: center;
 aspect-ratio: 1 / 1;
 border: 1px dashed var(--pink);
 cursor: pointer;
}

#icon-menu {
 width: 2em;
}

.main {
 width: 100vw;
 margin-block: 80px 0;
 background-color: var(--ivory);
}

.mv {
 display: flex;
 flex-direction: column;
 justify-content: center;
 aspect-ratio: 1 / 1;
 background-color: var(--pink);
 white-space: nowrap;
}

.mv-comm.txtSplit {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: .5em;
 line-height: 1;
 white-space: pre;
 transform: translateY(-10px);
 margin-block: .8em;
 margin-inline: 1em auto;
}

.mv-comm.txtSplit span {
 display: inline-block;
 width: 1em;
 font-size: calc(100vw / 10);
 font-weight: 700;
 line-height: 1;
 letter-spacing: 0;
 color: var(--ivory-d);
 opacity: 0;
}

.mv-comm.txtSplit span.active {
 opacity: 1;
}

.sec {
 padding-block: 5em 0;
 margin-block: 10% 0;
 position: relative;
}

.sec::before {
 position: absolute;
 content: "";
 width: calc(100% / 3);
 height: 1px;
 inset: 0;
 bottom: auto;
 margin: auto;
 border-top: 1px dashed var(--pink);
}

.sec-head {
 position: relative;
}

.sec-head-h2 {
 position: relative;
 font-size: var(--fs-xxlarge);
 text-align: center;
 z-index: 1;
}

.sec-body {
 padding: 0 10%;
}

.service .sec-body {
 padding: 0;
}

.sec-item {
 margin-block: 5em;
}

.sec-body-h3 {
 line-height: 1.8;
 word-break: auto-phrase;
}

.greet .sec-body-h3 {
 margin-block: 0 1em;
 font-size: var(--fs-xlarge);
}

.service p {
 margin: 0;
}

.service-nav-wrap {
 width: calc(100% - 5%);
 margin-inline: auto;
 outline: 1px solid var(--pink);
}

.service-nav-head {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: repeat(4, 3em);
}

.service-nav-menu {
 position: relative;
 display: flex;
 justify-content: start;
 align-items: center;
 padding-inline: 3em 0;
 background-color: var(--gray);
 color: var(--black);
 font-size: var(--fs-middle);
 outline: 1px dashed var(--pink);
 transition: .2s;
 cursor: pointer;
}

.service-nav-menu::before {
 position: absolute;
 content: "";
 inset: 0;
 right: auto;
 left: 1em;
 margin: auto;
 width: 1em;
 height: 1px;
 background-color: var(--black);
}

.service-nav-menu.active {
 background-color: var(--pink);
 color: var(--ivory-d);
}

.service-nav-menu.active::before {
 background-color: var(--ivory);
}

.service-nav-body {
 padding: 3em 2em .5em;
 background-color: var(--ivory-l);
}

.service-nav-item {
 display: none;
 text-align: center;
}

.service-nav-item.active {
 display: block;
}

.service-nav-item .sec-body-h3,
.service-nav-item .sec-body-h3 span {
 font-size: var(--fs-xlarge);
 font-weight: 700;
 letter-spacing: 0;
 line-height: 1.5;
}

.service-nav-item .sec-body-h3 {
 margin-block: 0 1.5em;
}

.service-nav-item .sec-body-h3 span {
 padding-inline: .5em;
}

.service-nav-desc {
 margin-block: 1em;
 padding-block: 2em;
 text-align: left;
 border-top: 1px dashed #666;
}

.service-nav-desc p {
 margin-block: .8em;
 font-size: var(--fs-small);
}

.service-nav-desc hgroup {
 margin-block: .8em;
}

.service-nav-desc hgroup h4 {
 font-size: var(--fs-large);
}

.service-nav-desc hgroup p {
 margin: 0;
 color: var(--pink);
 font-weight: 700;
}

.workwrap-outer {
 position: relative;
}

.workwrap {
 padding: 25% 0 0;
}

.workitem {
 background-color: var(--ivory-l);
}

.workitem .sec-body-h3 {
 margin-block: .4em;
}

.work-topage {
 color: var(--pink);
 font-size: var(--fs-small);
}

.workitem {
 border: 1px solid var(--pink);
 padding: 0 0 2%;
}

.workitem-img {
 border-bottom: 1px solid var(--pink);
}

.workitem-title {
 padding: 2% 5%;
}

.workitem-detail {
 padding: 2% 5%;
 margin-block: 2% 0;
}

.workitem-detail summary {
 background-color: var(--pink);
 display: inline-block;
 padding-inline: 1em;
 color: var(--ivory-l);
 font-size: var(--fs-small);
 cursor: pointer;
}

.workitem-detail-item {
 margin-block: 5%;
}

.workitem-detail dt,
.workitem-detail dd {
 font-size: var(--fs-small);
}

.workitem-detail dt {
 position: relative;
 display: inline-block;
 padding-inline: .5em;
 font-weight: 700;
}

.workitem-detail dt::before,
.workitem-detail dt::after {
 position: absolute;
 inset: 0;
 margin: auto;
}

.workitem-detail dt::before {
 content: "[";
 right: auto;
}

.workitem-detail dt::after {
 content: "]";
 left: auto;
}

.work .swiper-button-prev,
.work .swiper-button-next {
 position: absolute;
 aspect-ratio: 1 / 1;
 top: 24px !important;
 left: auto !important;
 width: 4em;
 height: 4em;
 background-color: var(--ivory-l);
 color: var(--pink) !important;
 border-radius: 50%;
 border: 1px solid var(--pink);
}

.work .swiper-button-prev {
 right: 4.5em !important;
}

.work .swiper-button-next {
 right: 0 !important;
}

.work .swiper-button-prev::before,
.work .swiper-button-next::before {
 position: absolute;
 width: 1em;
 height: 1em;
 background-repeat: no-repeat;
 background-position: center;
 content: "";
}

.work .swiper-button-prev::before {
 background-image: url('../img/icon/arrow-back.svg');
}

.work .swiper-button-next::before {
 background-image: url('../img/icon/arrow-next.svg');
}

.work .swiper-button-next svg,
.work .swiper-button-prev svg {
 display: none;
}

.work .swiper-pagination-bullets {
 inset: 0 !important;
 bottom: auto !important;
 right: auto !important;
 width: 60% !important;
 text-align: left !important;
}

.work .swiper-pagination-bullet {
 margin: 0 .65em !important;
 width: .65em;
 height: .65em;
}

.work .swiper-pagination-bullet-active {
 background-color: var(--pink) !important;
 border-radius: 0;
}

.work .swiper-scrollbar {
 inset: 0 !important;
 bottom: auto !important;
 top: 5em !important;
 width: 100% !important;
 height: .25em !important;
}

.work .swiper-scrollbar-drag {
 background-color: var(--pink) !important;
}

.work .printitem {
 border: 1px solid var(--pink);
}

.blog {}

.blog .post-item-wrap {
 display: grid;
 grid-template-columns: 1fr;
 align-items: start;
 gap: 2em;
}

.blog .post-item {
 display: grid;
 grid-template-columns: 1fr;
 align-items: center;
 border: 1px solid var(--pink);
 border-radius: 1em;
 overflow: hidden;
}

.blog .post-item p {
 margin: 0;
}

.blog .post-item a {
 display: block;
 width: 100%;
 height: auto;
}

.blog .post-thumb img {
 height: 100%;
 object-fit: cover;
}

.blog .post-descwrap {
 display: grid;
 gap: .8em;
 padding: 1em;
}

.blog .post-descwrap-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.blog .post-category a,
.blog .post-date {
 font-size: var(--fs-xsmall);
}

.blog .post-category {
 background-color: var(--pink);
}

.blog .post-category a {
 padding: 0 1em;
 color: var(--ivory);
 text-decoration: none;
}

.blog .post-date {
 color: var(--pink);
}

.blog .post-excerpt {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 text-overflow: ellipsis;
}

.blog .post-excerpt p {
 font-size: var(--fs-small);
}

.blog .post-pagination {
 display: flex;
 justify-content: center;
 width: fit-content;
 margin-block: 10%;
 margin-inline: auto;
}

.blog .post-pagination>*:first-child {
 border-radius: 50% 0 0 50%;
 border-right: 1px solid var(--pink);
}

.blog .post-pagination>*:last-child {
 border-radius: 0 50% 50% 0;
}

.blog .post-pagination>*.current {
 background-color: var(--pink);
 color: var(--ivory);
}

.blog .post-pagination>* {
 outline: 1px solid var(--pink);
 display: grid;
 place-content: center;
 aspect-ratio: 1 / 1;
 width: 3em;
 text-align: center;
 color: var(--pink);
 background-color: var(--ivory);
 text-decoration: none;
}

.blog .archive-desc {
 width: 80%;
 margin-inline: auto;
 text-align: center;
}

.blog .archive-desc p {
 margin: 0;
}

/* ====投稿記事ページ==== */
.blog-single {
 background-color: var(--ivory);
 padding-block: 5%;
}

.blog-single img {
 width: 100%;
 height: auto;
}

.blog-single .post-item,
.blog-single .post-nav,
.blog-single .btn-wrap {
 width: 80%;
 margin-inline: auto;
}

.blog-single .post-item {
 border: none;
 border-radius: 0;
}

.blog-single .post-descwrap {
 padding: 5% 0;
}

.blog-single .post-descwrap-head {
 justify-content: start;
 gap: 1em;
}

.blog-single .post-title {
 font-size: var(--fs-large);
 line-height: 1.8;
}

.blog-single .post-content p {
 margin-block: 1.5em;
}

.blog-single .post-nav {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 2em;
 align-items: start;
 margin-block: 10%;
}

.blog-single .post-nav a {
 color: var(--pink);
}

.blog .btn-wrap {
 margin-block: 10%;
}

.overview-inner {}

.overview-list-item {
 padding-block: 5%;
 padding-inline: .5em;
 border-top: 1px dashed var(--pink);
}

.overview-list-head {
 font-weight: 700;
}

.overview-list-desc-cnt {
 margin-block: .8em 0;
 font-size: var(--fs-small);
}

@media (min-width: 576px) {}

@media (min-width: 768px) {
 .mv {
  aspect-ratio: 1.5 / 1;
 }

 .blog .post-item-wrap {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
 }

 .overview-list-item {
  display: grid;
  grid-template-columns: 10em 1fr;
 }

 .overview-list-desc-cnt {
  margin-block: 0;
  font-size: var(--fs-middle);
 }

 .footer-inner {
  padding-block: 8%;
 }

 .footer-inner .btnwrap {
  width: 50%;
 }
}

@media (min-width: 992px) {
 .mv-comm.txtSplit span {
  font-size: calc(100vw / 12);
 }

 .service .sec-body {
  padding: 0 10%;
 }

 .blog .post-item-wrap {
  grid-template-columns: repeat(3, 1fr);
 }
}

@media (min-width: 1025px) {
 .mv-comm.txtSplit span {
  font-size: calc(100vw / 18);
 }

 /* 大枠の幅 */
 .header,
 .g-nav {
  width: 30vw;
 }

 .mv,
 .main,
 .footer {
  width: 70vw;
 }

 .header {
  height: fit-content;
  left: auto;
  right: 0;
  z-index: 1001;
 }

 .header .logowrap {}

 .header .logowrap .tohome {
  max-width: 100%;
  width: 100%;
 }

 .header .logo-comm {
  margin-block: .5em 0;
  text-align: right;
 }

 .header-inner {
  grid-template-columns: 1fr;
  height: auto;
  background-color: transparent;
 }

 #menu-tgl {
  display: none;
 }

 .header .logowrap {
  padding: 10% 5%;
 }

 .g-nav {
  inset: 0;
  left: auto;
  place-content: center;
 }

 .g-nav-inner {
  padding: 2em;
 }

 .g-nav-item {
  width: fit-content;
  margin-left: auto;
 }

 .g-nav-item a {
  opacity: 1;
  margin-inline: 0;
  transform: none;
  text-decoration: none;
  transition: .4s;
 }

 .g-nav-item a:hover {
  color: var(--pink);
 }

 .mv {
  position: relative;
  z-index: 1000;
 }

 .main {
  margin-block: 0;
 }

 .footer {}
}