@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
*,*::before,*::after{margin:0;padding:0;}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #fff;
    color: #000;
  }
}

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif !important;
letter-spacing:0.01rem;
}
.center{
text-align:center;
}
a,
a *{
    text-decoration:none !important;
    transition: all .3s ease;
}
a img:hover{
opacity:0.8;
}
@media only screen and (max-width: 481px) {

.sp{
display:block;
}
.pc{
display:none;
}

}
@media only screen and (min-width: 481px) {

.sp{
display:none;
}
.pc{
display:block;
}

@media only screen and (max-width: 1100px) {
html,body{
font-size:calc(100vw * calc(10 / 1100)) !important;
scroll-behavior: smooth;
}
}
@media only screen and (min-width: 1100px) {
html,body{
scroll-behavior: smooth;
}
}
}

/* ▼ 全フォーム要素の背景・文字色を明示 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
textarea,
select {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc;
  padding: 0.5em;
  box-sizing: border-box;
}

/* ▼ フォーカス時の視認性（お好みで） */
input:focus,
textarea:focus,
select:focus {
  background-color: #f9f9f9 !important;
  outline: 2px solid #999;
}

.custom-display-box {
  display: block; /* ← 念のため inline-block から block にしてもOK */
  margin: 20px auto; /* ← 上下20px、自動で左右中央寄せ */
  text-align: center;
  padding: 10px 20px;
  border: 2px solid #ccc;
  border-radius: 6px;
  background-color: #fdfdfd;
  font-size: 1.2em;
  font-weight: bold;
  width: fit-content; /* 中身の幅に合わせる（必要なら） */
}
.initial-selects {
  display: flex;
  justify-content: center;
  gap: 10px; /* 選択ボックス同士の間隔 */
  margin: 10px 0;
}

/* チェックボックスの見た目を強制上書き */
input[type="checkbox"],
.mwform-checkbox-field input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  accent-color: #000 !important;
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color-scheme: light !important;
}
/* ▼ ラジオボタンもチェックボックス同様にスタイル調整 */
input[type="radio"],
.mwform-radio-field input[type="radio"] {
  -webkit-appearance: radio !important;
  appearance: radio !important;
  accent-color: #000 !important;
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color-scheme: light !important;
}