/* ==================================================
   Googleフォント
   ================================================== */

html,
body {
   font-family: "Dela Gothic One", sans-serif;
   font-weight: 400;
   font-style: normal;
}

body {
   padding-top: 154px;
}

/* ==================================================
   header
   ================================================== */

header {
   max-width:
      1280px
}

/* ==================================================
   モーダル
   ================================================== */

.modal-open {
   transform: translate(-50%, -50%);
   width: calc(100% - 2%);
   text-align: center;
}

.modal {
   background-color: rgb(0 0 0 / 60%);
   opacity: 0;
   transition: opacity 0.5s, scale 0s 0.5s;
   scale: 0;
   z-index: 2000;
}

.modal:target {
   opacity: 1;
   transition: opacity 0.5s;
   scale: 1;
}

.modal:target .modal-wrapper {
   transition: scale 0.5s;
   scale: 1;
}

.modal-wrapper {
   position: relative;
   width: 80%;
   max-width: 780px;
   max-height: 70%;
   margin: auto;
   transition: scale 0.5s;
   scale: 0;
}

/* ==================================================
   customユーティリティ
   ================================================== */

/* animation */

.bg-animation {
   transition: background-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.1s ease;
}

/* white */

input:checked+label.color-white-checked {
   color: #fff !important;
}

/* wine */

.color-wine {
   color: #b03060 !important;
}

.border-wine {
   border: 1px solid #b03060 !important;
}

/* pink */

.color-pink {
   color: #ff5fa2 !important;
}

.border-pink {
   border: 1px solid #ff5fa2 !important;
}

.bg-pink {
   background-color: #ff5fa2 !important;
}

input:checked+label.bg-pink-checked {
   background-color: #ff5fa2 !important;
}

/* pink-soft */

.border-pink-soft {
   border: 1px solid #f5a3c7 !important;
}

/* pink-pink-light */

input:not(:checked)+label.bg-pink-light-hover:hover {
   background-color: #ffbdd9 !important;
}

/* pink-sub */

.bg-pink-sub {
   background-color: #ffd6e7 !important;
}

/* ==================================================
   ハンバーガーメニュー
   ================================================== */

.hamburger-morph {
   width: 48px;
   height: 48px;
   background: transparent;
   cursor: pointer;
}

.hamburger-morph__icon {
   width: 100%;
   height: 100%;
}

.hamburger-morph__line {
   fill: none;
   stroke: #000;
   stroke-width: 6;
   transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-morph.active .hamburger-morph__line {
   stroke: #ffffff;
}

.hamburger-morph__line:nth-child(1) {
   stroke-dasharray: 60 207;
}

.hamburger-morph__line:nth-child(2) {
   stroke-dasharray: 60 60;
}

.hamburger-morph__line:nth-child(3) {
   stroke-dasharray: 60 207;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(1) {
   stroke-dasharray: 90 207;
   stroke-dashoffset: -134;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(2) {
   stroke-dasharray: 1 60;
   stroke-dashoffset: -30;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(3) {
   stroke-dasharray: 90 207;
   stroke-dashoffset: -134;
}

.nav-morph {
   background: rgba(29, 29, 31, 0.98);
   clip-path: circle(0% at calc(100% - 44px) 44px);
   transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-morph.active {
   clip-path: circle(150% at calc(100% - 44px) 44px);
}