@charset "UTF-8";
/** マイアカウント */
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.news-letter {
  margin-bottom: 1em;
  text-align: center;
  font-size: 0.75em;
}

.my-account label {
  font-weight: normal !important;
  margin-bottom: unset !important;
}

.my-account-nav {
  display: flex;
  gap: 1rem;
}
.my-account-nav a {
  text-decoration: none;
  color: currentColor;
  border: 1px solid #ccc;
  flex: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  gap: 0.5rem;
}
.my-account-nav a:hover {
  background-color: var(--wp--preset--color--tertiary);
}
.my-account-nav .active {
  background-color: var(--wp--preset--color--tertiary);
}

/** ライセンス */
.licenses {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.licenses h2 {
  margin: 0;
  padding: 1rem;
}
.licenses h3 {
  margin: 0;
  font-size: 1em;
}
.licenses .product-license {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: var(--wp--preset--color--base);
}
.licenses .product-form {
  display: flex;
}
.licenses .product-form .product-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--wp--preset--color--tertiary);
}
.licenses .product-form .license-table {
  display: flex;
  text-align: center;
}
.licenses .product-form .license-table th {
  font-weight: normal;
}
.licenses .product-form.product-form-payment .license-data td {
  padding: 0.5em 0;
}
.licenses .product-form .add-license-button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  margin-left: auto;
  font-size: 0.9em;
}
.licenses .auto-update-checked {
  line-height: 1;
}
.licenses .auto-update-checked svg {
  background: #43b51e;
  border-radius: 50%;
  padding: 3px;
  display: inline-block;
  color: #fff;
}
.licenses .active-sites {
  gap: 1em;
  align-items: center;
}
.licenses .license-buttons {
  gap: 1em;
}
.licenses .license-form {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.licenses .license-form input[type=text] {
  width: inherit;
}
.licenses .license-form .key {
  align-items: center;
  gap: 0.5em;
}
.licenses .license-form .key input {
  padding: 0;
  border: none;
}
.licenses .license-form .key .copied {
  position: absolute;
  top: -2em;
  font-size: 0.5em;
  left: 0;
  right: 0;
  text-align: center;
}
.licenses .manage-license-title {
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.licenses .manage-license-title .mode-label {
  font-size: 0.75rem;
  background: var(--wp--preset--color--tertiary);
  color: currentColor;
  padding: 0.5rem 0.5rem;
  border-radius: 4px;
  line-height: 1;
}
.licenses button.icon {
  border: none;
  background: none;
  color: currentColor;
}
.licenses .add-license svg {
  width: 1.5em;
  height: 1.5em;
}
.licenses .delete-license {
  margin-left: auto;
}
.licenses .page-back-license {
  display: flex;
  color: inherit;
  text-decoration: none;
  align-items: center;
  gap: 1rem;
}
.licenses .license-data td button {
  display: block;
  margin: auto;
  line-height: 0;
}
.licenses .license-assets {
  border-top: 1px solid #ccc;
  display: flex;
  gap: 1em;
  padding: 1rem;
}
.licenses .license-assets a {
  line-height: 1;
}

/**
* ユーザー情報
*/
.user-info .user-name h2 {
  margin-top: 0;
}
.user-info button {
  margin-top: 1.5em;
}
.user-info .mailpoet-news-letter-wrapper {
  display: flex;
  gap: 0.5em;
}
.user-info .mailpoet-news-letter-wrapper input {
  position: relative;
  top: 2px;
}
.user-info .mailpoet-news-letter-wrapper label {
  flex: 1;
}

/**　ボタン共通 */
button.icon-button {
  border: none;
  background: none;
}

.icon-button svg {
  display: block;
  margin: auto;
  background-color: var(--wp--preset--color--base);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.1rem;
  cursor: pointer;
  color: var(--wp--preset--color--contrast);
  display: inline-block;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.icon-button svg:hover {
  background-color: var(--wp--preset--color--tertiary);
}

.primary-button {
  display: block;
  font-size: var(--wp--preset--font-size--1-rem);
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 6px;
  padding: calc(var(--wp--custom--padding) * 4);
  color: var(--wp--preset--color--base);
  background-color: var(--wp--preset--color--primary);
  width: 100%;
}
.primary-button:hover {
  background-color: var(--wp--preset--color--secondary);
}

.secondary-button {
  border: 1px solid #ccc;
  color: currentColor;
  background: none;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  display: flex;
  width: 100%;
}
.secondary-button:hover {
  background-color: var(--wp--preset--color--tertiary);
}

/** フォーム共通 */
*:disabled {
  background-color: var(--wp--preset--color--tertiary) !important;
}

/** 段落ステータス */
.p-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid #ddd;
  background: var(--wp--preset--color--tertiary);
  margin: 0;
}
.p-info span {
  line-height: 1;
}

/** success ページ */
.product-success {
  text-align: center;
}
.product-success svg {
  width: 4em;
  height: 4em;
}

/* テキスト装飾 */
.text-outline {
  -webkit-text-fill-color: var(--wp--preset--color--base);
  text-shadow: 1px 0 0 var(--wp--preset--color--contrast), -1px 0 0 var(--wp--preset--color--contrast), 0 1px 0 var(--wp--preset--color--contrast), 0 -1px 0 var(--wp--preset--color--contrast), 1px 1px 0 var(--wp--preset--color--contrast), -1px 1px 0 var(--wp--preset--color--contrast), 1px -1px 0 var(--wp--preset--color--contrast), -1px -1px 0 var(--wp--preset--color--contrast);
  letter-spacing: 0.1em;
}

.text-bold {
  font-weight: bold;
}

.show-cursor::after {
  content: "|";
  animation: blink 1.2s step-end infinite;
  margin-left: 0.25em;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
#canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

canvas {
  transition: all 0.3s ease-out;
  display: block;
  position: absolute;
  pointer-events: auto;
  transform-origin: center center;
}

.section-faq .wp-block-accordion-item {
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}

.wp-block-query .archives .wp-block-post {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease;
  background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
  display: flex;
  flex-direction: column;
}
.wp-block-query .archives .wp-block-post:hover {
  transform: scale(0.975);
}
.wp-block-query .archives .wp-block-post:hover img {
  transform: scale(1.1);
}
.wp-block-query .archives .wp-block-post .archive-icon-link {
  margin-top: auto;
  display: inline-flex;
  justify-content: flex-end;
}
.wp-block-query .archives .wp-block-post .archive-icon-link .archive-link {
  border: 1px solid #cccccc;
  border-radius: 6px;
  padding: 0.25rem;
  margin-right: 1em;
  margin-bottom: 1em;
}
.wp-block-query .archives .wp-block-post-terms {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: end;
  position: absolute;
  top: 1em;
  right: 1em;
  font-size: 0.75rem;
}
.wp-block-query .archives .wp-block-post-terms a {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5em;
  padding: 0 0.75em;
  background: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
  canvas {
    width: 300px !important;
    height: 300px !important;
    transform: translate(0%, -50%) !important;
  }
}
@media (width <= 600px) {
  .wp-block-site-title {
    display: none;
  }
  .plan-buttons {
    font-size: 0.7em;
  }
}
@keyframes aglogomorph {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 10%);
  }
}
.morph-section {
  position: relative;
}
.morph-section.is-active::before {
  opacity: 1;
}
.morph-section:not(footer)::before {
  transition: opacity 0.75s ease, width 0.75s ease;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23b0b0b0' fill-opacity='0.36'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0;
}

header.is-style-hakoniwa-blocks-template-part-fixed, header.is-style-hakoniwa-blocks-template-part-sticky {
  transition: box-shadow 300ms ease-in-out, background-color 300ms ease-in-out, backdrop-filter 300ms ease-in-out;
}

body.is-scrolled header.is-style-hakoniwa-blocks-template-part-fixed, body.is-scrolled header.is-style-hakoniwa-blocks-template-part-sticky {
  box-shadow: 0px 1px 5px 0px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  background-color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}
body.is-scrolled header.is-style-hakoniwa-blocks-template-part-fixed::before, body.is-scrolled header.is-style-hakoniwa-blocks-template-part-sticky::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
}

.wp-block-post-featured-image img:hover {
  transform: unset;
}