/*!
Theme Name: refractjp25
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: refractjp25
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

refractjp25 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html,body{
    height:100%;
}

#bg-waves{
    position:fixed; inset:0;
    z-index: 0;
    display:block;
    background-image: radial-gradient(#3d374c 0%, #757191 20%, #fff 60%, #fff 100%);
    pointer-events: none;
    height: 100vh;
    width: 100vw;
}

#content {
    position:  fixed;
    width:   100%;
    height: 100%;
}

#content > section {
    position: absolute;
    display: flex;
    flex-flow:  column nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#content > section > div > div,
#content > section > div > ul {
    display: inline-block;
    background-color: rgba(244, 244, 244, 0.3);
    margin: 4px 0;
}

#content h1, #content h2, #content h3, #content a, #content span, #content label, #content input {
    display: inline;
    font-size: 1rem;
    font-family: "Share Tech Mono", monospace;
    font-weight: 400;
    font-style: normal;
    color: #333;
    text-decoration: none;
}

#content ul {
    padding: 0;
    margin: 0;
}

#content ul li {
    display: inline;
    padding: 0;
    list-style-type: "- ";
}

#content ul li:after {
    content: " | ";
}

#content ul li:last-child:after {
    content: "";
}

#content a, #content span.sound, #content span#open-contact {
    padding-bottom: 3px;
    background-image: linear-gradient(#fff, #fff);
    color: #333;
    background-repeat: no-repeat;
    background-position: bottom right; /* 下線の初期位置 */
    background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
    transition: color .3s ease-in-out, background-size 0.3s;
}

#content a:hover, #content span.sound:hover, #content span#open-contact:hover {
    color: #fff;
    background-position: bottom left;
    background-size: 100% 1px;
}

.sound { cursor: pointer; user-select: none; }

.vol-label { margin-left: .5rem; opacity: .8; }
.vol-num {
    width: 2.6ch;                        /* 0〜10 が収まる幅 */
    background: transparent;
    border: none;
    outline: none;
    color: currentColor;
    text-align: right;
    font: inherit;
}
/* 数値入力の上下ボタンを消す */
.vol-num::-webkit-outer-spin-button,
.vol-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vol-num { -moz-appearance: textfield; }

/* モーダルの層をキャンバスより前面に */
.c-modal { position: fixed; inset: 0; z-index: 10; }
.c-modal[hidden] { display: none; }

.c-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
}

.c-modal__dialog {
    position: relative;
    max-width: min(640px, 92vw);
    margin: 8vh auto 0;
    background: #3d374c;
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
    padding: 20px 20px 16px;
}

.c-modal__close {
    position: absolute; top: 10px; right: 10px;
    width: 36px; height: 36px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.08); color: #fff;
    cursor: pointer;
}
.c-modal__title { margin: 0 0 12px; }

.wpcf7 form { display: grid; gap: 10px; }
.wpcf7 input, .wpcf7 textarea {
    width: 100%;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 10px 12px;
}
.wpcf7 .wpcf7-submit { cursor: pointer; }
.c-modal__done { margin-top: 12px; opacity: .9; }

.c-modal { --modal-dur: 1s; }

.c-modal[hidden] { display: none; }

.c-modal__overlay {
    opacity: 0;
    transition: opacity var(--modal-dur) ease;
}
.c-modal[data-state="opening"] .c-modal__overlay,
.c-modal[data-state="open"]     .c-modal__overlay { opacity: 1; }
.c-modal[data-state="closing"]  .c-modal__overlay { opacity: 0; }

.c-modal__dialog {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition:
            opacity   var(--modal-dur) ease,
            transform var(--modal-dur) cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.c-modal[data-state="opening"] .c-modal__dialog,
.c-modal[data-state="open"]     .c-modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.c-modal[data-state="closing"]  .c-modal__dialog {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .c-modal { --modal-dur: 0s; }
    .c-modal__overlay,
    .c-modal__dialog { transition-duration: 0s; }
}

/* === CF7 in modal: 幅はみ出し対策 === */

/* 中の要素は border-box で幅計算（padding/borderを含めて 100%） */
.c-modal__dialog .wpcf7,
.c-modal__dialog .wpcf7 * { box-sizing: border-box; }

/* 1カラム固定 & Grid の最小幅によるはみ出し防止 */
.c-modal__dialog .wpcf7 form {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
.c-modal__dialog .wpcf7 form > * { min-width: 0; }

/* 入力系（selectも含める）を確実に内側へ収める */
.c-modal__dialog .wpcf7 input,
.c-modal__dialog .wpcf7 textarea,
.c-modal__dialog .wpcf7 select {
    width: 100%;
    max-width: 100%;
    display: block;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 10px 12px;
}

/* CF7のラッパ span をブロック化（まれに横並び崩れを防ぐ） */
.c-modal__dialog .wpcf7 .wpcf7-form-control-wrap { display: block; }

/* 送信ボタンの幅は内容分だけ */
.c-modal__dialog .wpcf7 .wpcf7-submit {
    width: auto;
    justify-self: start;  /* Grid左寄せ（中央にしたければ center） */
    cursor: pointer;
}