@charset "UTF-8";

/* =========================================================
   Anna's Chalk Art  -  SP only site
   デザイン基準幅：375px（1rem = 10px）
   450px を超えると 450px 幅で固定し、中央寄せ表示になります。
   ========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, form {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

a { text-decoration: none; color: inherit; }

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] { display: none !important; }

/* ---------- Base ---------- */
:root {
  --c-text:     #000;
  --c-orange:   #f5a623;
  --c-orange-d: #e0940f;
  --c-coral:    #f75652;
  --c-gray:     #f8f8f8;
  --c-line:     #ccc;

  /* 本文：游ゴシック Medium
     Windows は "Yu Gothic Medium" を直接指定、Mac は 游ゴシック体 + weight 500 で Medium になります */
  --font-body: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic,
               "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
  /* タイトル：游ゴシック Bold */
  --font-ttl:  "游ゴシック体", YuGothic, "Yu Gothic", "游ゴシック",
               "Hiragino Sans", "ヒラギノ角ゴシック",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, sans-serif;

  /* 幅の基準（37.5rem = サイト全幅） */
  --w-inner: 35rem;      /* テキスト・フォーム・料金表 */
  --w-narrow: 33.75rem;  /* 写真・ボタン */
}

html {
  font-size: calc(100vw / 37.5);   /* 1rem = 10px @375px */
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 450px) {
  html {
    font-size: 12px;               /* 37.5rem = 450px で固定 */
    background: #eceff1;
  }
}

body {
  width: 37.5rem;
  margin-inline: auto;
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2;
  overflow-x: hidden;
}

@media (min-width: 450px) {
  body { box-shadow: 0 0 3rem rgba(0, 0, 0, .1); }
}

/* =========================================================
   Fixed desktop side images
   ========================================================= */
.pc-side-bg {
  display: none;
}

@media (min-width: 768px) {
  .pc-side-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    display: block;
    width: calc((100vw - 450px) / 2);
    min-width: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
  }

  .pc-side-bg--left {
    left: 0;
    background-image: url("../images/mv2-no-text.webp");
  }

  .pc-side-bg--right {
    right: 0;
    background-image: url("../images/mv3-no-text.webp");
  }

  body > .mv,
  body > main,
  body > .footer {
    position: relative;
    z-index: 1;
  }
}


/* =========================================================
   MV（ズームイン＆クロスフェード）
   ========================================================= */
.mv {
  position: relative;
  width: 100%;
  aspect-ratio: 750 / 1350;
  overflow: hidden;
  background: #6fb0e0;
}

.mv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 1.3s ease-in-out;
}

/* JS が動かない環境では1枚目を表示 */
.mv:not(.is-ready) .mv__slide:first-child,
.mv__slide.is-active { opacity: 1; }

.mv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
}

.mv__slide.is-zoom img {
  animation: mvZoom 7.3s linear forwards;
}

@keyframes mvZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/* 動きを減らす設定の端末では静止表示 */
@media (prefers-reduced-motion: reduce) {
  .mv__slide { transition: none; }
  .mv__slide.is-zoom img { animation: none; }
}


/* =========================================================
   セクション共通
   ========================================================= */
.sec {
  padding: 3.8rem 0 3.6rem;
}

.sec--white { background: #fff; }
.sec--gray  { background: var(--c-gray); }

.inner {
  width: var(--w-inner);
  margin-inline: auto;
}

/* ---------- 見出し ---------- */
.sec-head {
  margin-bottom: 2.9rem;
  text-align: center;
}

.sec-head__deco {
  width: 6rem;
  margin: 0 auto .4rem;
}

.sec-head__ttl {
  font-family: var(--font-ttl);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.35;
  letter-spacing: .02em;
}

/* ---------- 本文 ---------- */
.txt {
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
	font-weight: 700;
}

.txt--mt   { margin-top: 3.2rem; }   /* 1行あけ相当 */
.txt--mt-s { margin-top: .8rem;  }
.txt--left { text-align: left; }


/* =========================================================
   ボタン
   ========================================================= */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w-narrow);
  height: 4.8rem;
  margin: 1.7rem auto 0;
  border: none;
  border-radius: 999px;
  background: var(--c-orange);
  color: #fff;
  font-family: var(--font-ttl);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
  appearance: none;
  transition: background-color .2s, opacity .2s;
}

.btn:hover,
.btn:focus-visible { background: var(--c-orange-d); }

.btn:active { opacity: .8; }

.btn:disabled {
  opacity: .5;
  cursor: default;
}

.btn--submit { margin-top: 2.7rem; }


/* =========================================================
   Profile
   ========================================================= */
.profile__photo {
  width: 10.5rem;
  height: 10.5rem;
  margin: 0 auto 3.4rem;
  border-radius: 50%;
  object-fit: cover;
}


/* =========================================================
   Works
   ========================================================= */
.works {
  display: grid;
  gap: 1.9rem;
  width: var(--w-narrow);
  margin-inline: auto;
}

.works img { width: 100%; }


/* =========================================================
   Order - 料金表
   ========================================================= */
.price {
  margin-top: 3.2rem;
}

.price__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 4.2rem;
  padding: .3rem 7%;
  border-bottom: 1px solid var(--c-line);
  line-height: 1.6;
  font-weight: 700;              /* 本文（.txt）と同じ太さ */
}

/* 「ワンちゃんアート B5〜A4」が2行に折り返さない幅を確保 */
.price__name {
  flex: 0 0 67%;
  white-space: nowrap;
}
.price__val  { flex: 1 1 auto; }

/* ワンちゃんアートの注記（太さは同じ・サイズだけ少し小さめ） */
.price__note {
  flex: 0 0 100%;
  margin-top: .2rem;
  font-size: 1.35rem;
  line-height: 1.5;
}

.price + .txt { margin-top: 2.2rem; }


/* =========================================================
   Contact - フォーム
   ========================================================= */
.form {
  margin-top: 3.1rem;
}

.form__group + .form__group {
  margin-top: 2.4rem;
}

.form__label {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--font-ttl);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
}

.form__input {
  display: block;
  width: 100%;
  height: 3.8rem;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: .9rem;
  background: #fff;
  font-size: 1.6rem;
  line-height: 1.6;
  appearance: none;
  transition: border-color .2s;
}

.form__input--area {
  height: 12.8rem;
  padding: 1rem 1.4rem;
  line-height: 1.7;
  resize: none;
}

.form__input:focus {
  outline: none;
  border-color: var(--c-orange);
}

.form__input.is-error { border-color: var(--c-coral); }

.form__error {
  margin-top: .5rem;
  color: var(--c-coral);
  font-size: 1.3rem;
  line-height: 1.5;
}

.form__result {
  margin-top: 1.8rem;
  font-size: 1.4rem;
  line-height: 1.7;
  text-align: center;
  white-space: pre-line;
}

.form__result.is-ng { color: var(--c-coral); }


/* =========================================================
   Footer
   ========================================================= */
.footer {
  padding: 4.3rem 0 4.7rem;
  background: #fff;
  text-align: center;
}

.footer__copy {
  font-size: 1.35rem;
  line-height: 1.5;
  letter-spacing: .02em;
}

/* =========================================================
   WordPress fallback templates
   ========================================================= */
.wp-content {
  min-height: 70vh;
  padding: 4rem 2.5rem;
  background: #fff;
}

.wp-entry + .wp-entry {
  margin-top: 4rem;
}

.wp-entry__title {
  margin-bottom: 2rem;
  font-family: var(--font-ttl);
  font-size: 2.4rem;
  line-height: 1.4;
}

.wp-entry__content > * + * {
  margin-top: 1.6rem;
}

.wp-entry__content a {
  color: var(--c-orange-d);
  text-decoration: underline;
}

.wp-entry__content img {
  height: auto;
}

.wp-comments {
  margin-top: 4rem;
}