:root {
  --font-body: "Shin Serif", "Yu Mincho", serif;
  --color-text: #77717c;
  --color-rose: #a34874;
  --color-link: #ad85c8;
  --color-border: #e8e3e8;
}
.ttl_ptn_1 {
  color: var(--color-ttl, var(--color-rose));
  font-family: var(--font-body);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.3em;
  letter-spacing: .06em;
  text-align: var(--align-ttl, center);
  @media (max-width: 1400px) { font-size: 42px; }
  @media (max-width: 1200px) { font-size: 38px; }
  @media (max-width: 1000px) { font-size: 34px; }
  @media (max-width: 850px) { font-size: 30px; }
  @media (max-width: 800px) { font-size: 28px; }
  @media (max-width: 733px) { font-size: 24px; }
  @media (max-width: 650px) { font-size: 26px; }
  &.type_2 {
    font-size: 34px;
    @media (max-width: 1400px) { font-size: 30px; }
    @media (max-width: 1200px) { font-size: 26px; }
    @media (max-width: 1000px) { font-size: 22px; }
    @media (max-width: 850px) { font-size: 20px; }
    @media (max-width: 733px) { font-size: 18px; }
    @media (max-width: 650px) { font-size: 24px; }
  }
}
.txt_ptn_1 {
  margin-top: 10px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.8em;
  text-align: var(--align-txt, center);
  @media (max-width: 1200px) { font-size: 20px; }
  @media (max-width: 1000px) { font-size: 18px; }
  @media (max-width: 850px) { font-size: 16px; }
  @media (max-width: 733px) { font-size: 13px; }
  @media (max-width: 650px) { font-size: 15px; }
  .line { @media (max-width: 650px) { display: block; } }
}
.ttl_ptn_2 {
  .link { color: inherit; &:hover { text-decoration: underline; text-underline-offset: 5px; } &:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } }
  color: var(--color-rose);
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5em;
  @media (max-width: 1400px) { font-size: 28px; }
  @media (max-width: 1200px) { font-size: 24px; }
  @media (max-width: 1000px) { font-size: 20px; }
  @media (max-width: 850px) { font-size: 18px; }
  @media (max-width: 733px) { font-size: 16px; }
  @media (max-width: 650px) { font-size: 22px; }
  .line { @media (max-width: 650px) { display: block; } }
  &.type_2 {
    font-size: 26px;
    line-height: 1.3em;
    @media (max-width: 1000px) { font-size: 22px; }
    @media (max-width: 850px) { font-size: 18px; }
    @media (max-width: 733px) { font-size: 14px; }
    @media (max-width: 650px) { font-size: 22px; }
  }
}
.btn_ptn_1 {
  padding: 14px 34px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: url('../images/watercolor-grain.svg'), radial-gradient(ellipse at 25% 25%, #c9b7e3aa, transparent 65%), linear-gradient(115deg, #ae94d3, #bf94d1);
  color: var(--color-btn, #fff);
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.5em;
  letter-spacing: .05em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 0 3px 14px #b999c026;
  cursor: pointer;
  transition: filter .2s;
  @media (max-width: 1000px) { padding: 12px 28px; font-size: 20px; }
  @media (max-width: 733px) { padding: 6px 22px; min-height: 36px; gap: 20px; font-size: 14px; }
  @media (max-width: 650px) { padding: 12px 26px; min-height: 48px; font-size: 16px; }
  &::after { content: ''; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
  &:hover { filter: brightness(1.06); }
  &:focus-visible { outline: 2px solid #8a365b; outline-offset: 4px; }
  &.type_2 { background: transparent; color: var(--color-btn, var(--color-link)); border-color: #d6bfe6; box-shadow: none; }
  &:is(summary) { width: fit-content; display: flex; list-style: none; }
}
.link_ptn_1 {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6em;
  text-underline-offset: 5px;
  list-style: none;
  cursor: pointer;
  @media (max-width: 1000px) { font-size: 18px; }
  @media (max-width: 733px) { font-size: 13px; gap: 12px; }
  @media (max-width: 650px) { font-size: 16px; }
  &::after { content: ''; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
  &:hover { color: #8a365b; }
  &:focus-visible { outline: 2px solid #8a365b; outline-offset: 4px; }
  &:is(summary) { width: fit-content; display: flex; }
}
.logo_ptn_1 {
  max-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #a34874;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: .12em;
  text-decoration: none;
  white-space: nowrap;
  @media (max-width: 1000px) { font-size: 26px; }
  @media (max-width: 733px) { max-width: 112px; font-size: 19px; }
  @media (max-width: 650px) { max-width: 144px; font-size: 23px; }
  .deco { margin-top: 3px; width: 100%; display: block; }
}
.art_ptn_1 {
  aspect-ratio: var(--art-ratio);
  background-image: var(--art-image, none);
  background-size: var(--art-size, contain);
  background-position: var(--art-pos, center);
  background-repeat: no-repeat;
  pointer-events: none;
  &:is(img) {
    height: auto;
    display: block;
    background-image: none;
    object-fit: var(--art-fit, contain);
  }
}
.rule_ptn_1 {
  margin: 8px auto 0;
  max-width: 270px;
  width: 100%;
  height: auto;
  display: block;
  @media (max-width: 733px) { margin-top: 5px; max-width: 142px; }
}