/*
Theme Name: Arkhe Child
Template: arkhe
Description: Arkhe の子テーマ
Version: 1.0
Author: あなたの名前
*/

/* Google Fonts 読み込み */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap');

/* 全体 */
body {
font-family: 'M PLUS Rounded 1c', 'Kosugi Maru', sans-serif;
font-size: 16px;
color: #333;
background: linear-gradient(180deg, #fffaf0 0%, #ffeedd 100%);
line-height: 1.8;
position: relative;
overflow-x: hidden;
}

header {
background-color: rgba(255, 250, 245, 0.85);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(6px);
}

h1, h2, h3 {
color: #ff7f50;
font-weight: 700;
text-align: center;
}

a, button, .c-btn {
background-color: #ffe3e3;
color: #444;
border-radius: 9999px;
padding: 6px 16px;
text-decoration: none;
transition: all 0.3s ease;
margin: 0 6px;
}

a:hover, button:hover, .c-btn:hover {
background-color: #ffc9c9;
color: #222;
transform: scale(1.05);
}

img, .c-postList__item, .wp-block-image img {
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
filter: brightness(1.05) contrast(0.95);
}

section {
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(4px);
padding: 2em 1em;
border-radius: 50px;
}

footer {
background-color: #fff0f5;
color: #666;
}

/* 🔸つばさ保育園ロゴの背景を消す */
.c-headLogo,
.c-headLogo__img {
  background: none !important;   /* 背景を完全に透明に */
  box-shadow: none !important;   /* 影がある場合は消す */
  border: none !important;       /* 枠線がある場合は消す */
}

/* もしArkheのグローバルヘッダーが丸背景をつけている場合 */
.site-branding,
.l-header__logo {
  background: none !important;
  border-radius: 0 !important;   /* 丸みを削除 */
  box-shadow: none !important;
}

.menu-item a {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: #ffe3e3;
border-radius: 50%;
text-align: center;
color: #444;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
margin: 0 10px;
}

.menu-item a:hover {
background-color: #ffc9c9;
transform: scale(1.05);
}

footer .wp-block-page-list a {
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
text-align: center;
width: 120px;
height: 120px;
}

.section-top,
.section-features,
.section-day,
.section-gallery,
.section-contact {
margin-bottom: 80px;
}

.section-features:hover,
.section-day:hover,
.section-gallery:hover,
.section-contact:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
}

h2 {
position: relative;
text-align: center;
font-size: 1.8rem;
font-weight: 700;
padding: 1em 0;
margin: 2em 0;
z-index: 1;
}

h2::before {
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 1.8em;
border-radius: 50px;
z-index: -1;
}

h2 {
position: relative;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 1em 0;
  margin: 2.5em 0;
  color: #444;
  background: #fffaf4;
  border-radius: 2em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.section-features h2 {
background: linear-gradient(90deg, #ffe6eb 0%, #ffd8de 100%);
color: #5c3a47;
}

.section-features h2::before,
.section-features h2::after {
content: "🌸";
font-size: 1.4em;
}

.section-features h2::after {
content: "🌸";
font-size: 1.4em;
}

.section-day h2 {
background: linear-gradient(90deg, #fff7cd 0%, #fff9e4 100%);
color: #665823;
}

.section-day h2::before {
content: "☀️";
font-size: 1.4em;
}

.section-day h2::after {
content: "☀️";
font-size: 1.4em;
}

.section-contact h2 {
background: linear-gradient(90deg, #e8fcea 0%, #d7f8d7 100%);
color: #38523c;
}

.section-contact h2::before {
content: "🌿";
font-size: 1.4em;
}

.section-contact h2::after {
content: "🌿";
font-size: 1.4em;
}

.section-title img {
width: 28px;
height: auto;
vertical-align: middle;
margin-right: 6px;
}

/* 背景に小さなイラストをふんわり散らす（固定） */
body {
background-image:
url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/turtle.png'),
url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/elephant.png'),
url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/rhino.png'),
url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/giraffe.png'),
url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/monkey.png'),
url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/penguin.png'),
url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/cat.png'),
linear-gradient(180deg, #fffdf8 0%, #fff7ec   100%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
background-position:
3% 17%,
105% 17%,
1% 60%,
100% 41.5%,
2% 75%,
100% 87%,
100% 98%;
background-size: 250px, 430px, 430px, 480px, 280px, 300px, 260px, cover !important;
background-attachment: scroll;
background-blend-mode: normal !important;
filter: brightness(1.1)opacity(0.7);
position: relative;
z-index: 0;
}

body::before,
body::after,
.animal-layer,
.sky-layer {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
inset: 0;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
z-index: 0;
}

.animal-turtle {
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/turtle.png');
background-position: 3% 17%;
background-size: 250px;
}

.animal-elephant {
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/elephant.png');
background-position: 105% 17%;
background-size: 430px;
}

.animal-rhino {
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/rhino.png');
background-position: 1% 60%;
background-size: 430px;
}

.animal-giraffe {
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/giraffe.png');
background-position: 100% 41.5%;
background-size: 480px;
}

.animal-monkey {
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/monkey.png');
background-position: 2% 75%;
background-size: 280px;
}

.animal-penguin {
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/penguin.png');
background-position: 100% 87%;
background-size: 300px;
}

.animal-cat {
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/cat.png');
background-position: 100% 98%;
background-size: 260px;
}

@keyframes moveTurtle {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(8px, -12px) scale(1.02); }
100% {transform: translate(0px, 0px) scale(1); }
}

@keyframes moveElephant {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(-10px, 8px) scale(1.01); }
100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes moveRhino {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(18px, 6px) scale(1.02); }
100% {transform: translate(0px, 0px) scale(1); }
}

@keyframes moveGiraffe {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(-10px, -8px) scale(1.02); }
100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes moveMonkey {
0% { transform: translate(0, 0); }
50% { transform: translate(14px, -12px) scale(1.05); }
100% {transform: translate(0px, 0px) scale(1); }
}

@keyframes movePenguin {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(-12px, -14px) scale(1.02); }
100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes moveCat {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(10px, -6px) scale(1.03); }
100% { transform: translate(0px, 0px) scale(1); }
}

.sun, .cloud {
position: fixed;
width: 120px;
height: auto;
pointer-events: none;
z-index: 0;
background-size: contain;
background-repeat: no-repeat;
}

.sun {
position: absolute;
top: 100px;
left: 10px;
width: 300px;
height: 300px;
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/sun.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border-radius: 50%;
}

.cloud {
position: absolute;
top: 100px;
right: 10px;
width: 180px;
height: 180px;
background-image: url('https://yuiko-design.com/wp-content/themes/arkhe-child/images/cloud.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.9;
}