@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

:root {
    --color-ponpam: #fac83e;
}
html{ scroll-behavior: smooth;}
/* 共通：初期状態 */
.fade-in,
.slide-in,
.slide-in-left,
.slide-in-right,
.zoom-in,
.fade-up,
.fade-in-delay,
.fade-in-scale,
.bounce-in,
.rotate-in,
.flip-in {
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
/* visible 共通 */
.visible {
  opacity: 1;
}
/* slide-in（下） */
.slide-in {
  transform: translateY(50px);
}
.slide-in.visible {
  transform: translateY(0);
}
/* slide-in-left */
.slide-in-left {
  transform: translateX(-50px);
}
.slide-in-left.visible {
  transform: translateX(0);
}
/* slide-in-right */
.slide-in-right {
  transform: translateX(50px);
}
.slide-in-right.visible {
  transform: translateX(0);
}
/* zoom-in */
.zoom-in {
  transform: scale(0.9);
}
.zoom-in.visible {
  transform: scale(1);
}
/* fade-up */
.fade-up {
  transform: translateY(50px);
}
.fade-up.visible {
  transform: translateY(0);
}
/* fade-in-delay */
.fade-in-delay {
  transition-delay: 0.5s;
}
/* fade-in-scale */
.fade-in-scale {
  transform: scale(0.9);
}
.fade-in-scale.visible {
  transform: scale(1);
}
/* bounce-in */
.bounce-in {
  transform: translateY(50px);
}
.bounce-in.visible {
  animation: bounceIn 0.5s ease forwards;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
/* rotate-in */
.rotate-in {
  transform: rotate(-90deg);
}
.rotate-in.visible {
  transform: rotate(0deg);
}
/* flip-in */
.flip-in {
  transform: rotateY(90deg);
  transform-style: preserve-3d;
}
.flip-in.visible {
  transform: rotateY(0);
}
.delay-300 {
  transition-delay: 0.3s;
}
.delay-600 {
  transition-delay: 0.6s;
}
.delay-900 {
  transition-delay: 0.9s;
}
.delay-1200 {
  transition-delay: 1.2s;
}
main{
padding-left: 1em;
padding-right: 1em;
}
.section-title {
display: flex;
align-items: center;
text-align: center;
font-size: 2rem;
margin-bottom: 1em;
}
.section-title::before,
.section-title::after {
content: '';
flex-grow: 1;
border-bottom: 1px solid var(--color-ponpam);
}
.section-title::before { margin-right: 1em; }
.section-title::after { margin-left: 1em; }

/* お知らせ */
.news-list ul { list-style: none; padding: 0; border-top: 1px solid #e0e0e0; max-width: 800px; margin: 0 auto; }
.news-list li { padding: 1em 0.5em; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; flex-wrap: wrap; }
.news-list time { color: #555; margin-right: 1.5em; font-size: 0.9em; }
.news-list a { text-decoration: none; color: #333; font-weight: bold; }
.news-list a:hover { text-decoration: underline; }
.news-cat-label { display: inline-block; padding: 0.2em 0.8em; font-size: 0.8em; border-radius: 4px; color: #fff; margin-right: 1.5em; line-height: 1.5; }
.news-cat-label--info { background-color: #007bff; }
.news-cat-label--equipment { background-color: #28a745; }

/* 3つの魅力 */
.feature-card-wrapper { display: flex; gap: 30px; flex-wrap: wrap; }
.feature-card { flex: 1; min-width: 280px; }
.feature-card .card-inner { background: #fff; border-radius: 16px; box-shadow: 0 5px 20px rgba(150, 170, 200, 0.15); padding: 4em 1.5em 2em; height: 100%; transition: all 0.3s ease-out; position: relative; }
.feature-card:hover .card-inner { transform: translateY(-8px) scale(1.02); box-shadow: 0 10px 30px rgba(150, 170, 200, 0.2); }
.feature-card .card-title { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background-color: #89c3eb; color: #fff; font-weight: bold; border-radius: 8px; padding: 0.8em 1.5em; width: auto; min-width: 120px; box-shadow: 0 4px 15px rgba(137, 195, 235, 0.5); border-bottom: none; margin: 0; text-align: center; }
.feature-card .card-body h4 { font-size: 1.2em; margin-bottom: 0.5em;}

/* スタジオ紹介 */
.studio-card-wrapper { display: flex; gap: 30px; flex-wrap: wrap; }
.studio-card { flex: 1; min-width: 300px; position: relative; background-size: cover; background-position: center center; border-radius: 12px; min-height: 400px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2em; overflow: hidden; transition: transform 0.4s ease; text-decoration: none; }
.studio-card:hover { transform: scale(1.03); }
.studio-card--session { background-image: url('https://ponpam-studio.com/wp-content/themes/swell_child/assets/images/session_room01.webp?2025000002'); }
.studio-card--piano { background-image: url('http://ponpam-studio.com/wp-content/uploads/2025/06/0002.webp'); }
.studio-card::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); transition: background-color 0.3s ease; }
.studio-card:hover::before { background-color: rgba(0,0,0,0.3); }
.studio-card-content { position: relative; z-index: 1; }
.studio-card-content h3 { font-size:32px; color: #fff; }
.button-white { background-color: #fff; color: #000; padding: 10px 20px; border-radius: 5px; margin-top: 1em; display: inline-block; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.2s ease; }
.button-white:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }

/* 管理わんこ */
.mascot-wrapper { display:flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.mascot-img-area { flex-shrink: 0; text-align: center; margin: 0 auto; }
.mascot-img { width: 200px; height: 200px; }
.mascot-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mascot-text-area { flex: 1; min-width: 300px; }
.balloon { display: flex; align-items: flex-start; gap: 15px; }
.balloon__icon { flex-shrink: 0; }
.balloon__icon img { width: 120px; height: 120px; border-radius: 50%; }
.balloon__body { background: #ecf2e6; padding: 1.5em; border-radius: 10px; position: relative;}
.balloon__body::before { content: ''; position: absolute; top: 25px; left: -10px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #ecf2e6; }
.balloon__name { font-weight: bold; }

/* アクセス */
.access-wrapper { display: flex; gap: 30px; flex-wrap: wrap; }
.access-info { flex: 1; min-width: 280px; }
.access-map { flex: 1; min-width: 280px; }
.access-map iframe { width: 100%; height: 300px; border:0; }
.access-info dl { display: grid; gap: 10px 15px; }
.studio-ponpam-message {
background-color: var(--color-ponpam);
background-image: url('https://ponpam-studio.com/wp-content/themes/swell_child/assets/images/sound_wave.webp');
background-size: cover;
background-position: center;
padding:1.5em;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
}
.access-info dt {
font-weight: 700;
}
@media not all and (max-width: 960px) {
.studio-ponpam-message {
max-width: 70%;
}
}
.studio-ponpam-message h2 {
font-size: 18px;
display: inline-block;
border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.studio-ponpam-message p + h2 {
padding-top: 2em;
}
.studio-ponpam-message p {
padding-top: 0.5em;
}
/* フッター */
.page-template-default .l-container > .l-content,
.page-template-front-page-php .l-container > .l-content,
.page-template-page-session-room-php .l-container > .l-content,
.page-template-page-piano-room-php .l-container > .l-content,
.page-template-page-faq-php .l-container > .l-content {
padding-bottom: 0 !important;
}
.ponpam-footer {
background-color: #333b42;
color: #d0d0d0;
font-size: 15px;
line-height: 1.8;
padding: 60px 0 0;
}
.ponpam-footer__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.ponpam-footer__contents {
display: flex;
justify-content: space-between;
gap: 40px;
padding-bottom: 20px;
}
.ponpam-footer__info {
width: 30%;
}
.ponpam-footer__logo a {
display: inline-block;
margin-bottom: 1.5em;
text-decoration: none;
}
.ponpam-footer__logo img {
max-width: 220px;
height: auto;
}
.ponpam-footer__info p {
margin: 0.5em 0;
}
.ponpam-footer__nav {
width: 65%;
display: flex;
gap: 30px;
}
.ponpam-footer__nav ul {
list-style: none;
padding: 0;
margin: 0;
width: 50%;
}
.ponpam-footer__nav li a {
color: #d0d0d0;
text-decoration: none;
transition: color 0.3s ease;
}
.ponpam-footer__nav li a:hover {
color: #89c3eb;
}
.ponpam-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.ponpam-footer__copyright {
font-size: 14px;
}
.ponpam-footer__sns {
display: flex;
gap: 15px;
}
.ponpam-footer__sns a {
color: #fff;
display: inline-block;
transition: all 0.3s ease;
}
.ponpam-footer__sns a:hover {
transform: scale(1.1) translateY(-2px);
color: #89c3eb;
}
.ponpam-footer__sns svg {
width: 24px;
height: 24px;
}
@media (max-width: 768px) {
.ponpam-footer__contents,
.ponpam-footer__bottom { flex-direction: column;}
.ponpam-footer__info, .ponpam-footer__nav { width: 100%; }
.ponpam-footer__nav { gap: 15px; }
.ponpam-footer__bottom { align-items: center; text-align: center; }
}

.ponpam-footer {
background-image: url('https://ponpam-studio.com/wp-content/themes/swell_child/assets/images/sound_wave_s.webp');
background-size: contain;
background-position: right;
background-repeat: no-repeat;
}

/* CTAボタン */
.ponpam-cta-button {
background-image: linear-gradient(to right, #60a5fa 0%, #3b82f6 51%, #60a5fa 100%);
background-size: 200% auto;
color: white;
padding: 1em;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
text-decoration: none;
border: none;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease;
display: block;
margin: auto;
min-width: 50%;
width: fit-content;
}
.ponpam-cta-button:hover {
background-position: right center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
.ponpam-cta-button span {
display: block;
font-size: initial;
font-weight: 100;
margin-top: 1em;
}