@charset "utf-8";
/* BIOTOPIA財団 スタイル設定-2026 */

@media screen and (max-width: 576px) { /* スマホ設定 */
}

.sp { /*PCでは非表示*/
  display: none;
}
@media screen and (max-width: 480px) {
  .sp { /*スマホでは表示*/
    display: block;
  }
  .pc { /*スマホでは非表示*/
    display: none;
  }
}

/*管理画面設定*/
#wpadminbar .ab-empty-item, #wpadminbar a.ab-item, #wpadminbar>#wp-toolbar span.ab-label, #wpadminbar>#wp-toolbar span.noticon {
    color: #ffffff !important;
}


.menu__top {
  color: #fff !important;
  margin-top: 3rem;
}

/*グローバルメニュー*/
.nav-special.fullscreen-nav .site-navigation {
  margin-top: 30% !important;
}

.nav-special .nav > li {
    width: auto;
    margin: .8rem 2rem;
}

.nav-special.fullscreen-nav .nav > li a, .nav-special.fullscreen-nav .nav .dropdown-menu > li > a {
  color: rgba(255, 255, 255, .8) !important;
  border: 1px solid #888888;
  border-radius: 12px;
  padding: .5rem;
  font-size: 1.5rem;
}


/*ヒーロー背景グラデーション*/
@keyframes hero-gradient-animation {
    0% {
        --x-0: 67.26051486061864%;
        --s-start-0: 31.874033610026085%;
        --s-end-0: 64.3566555447049%;
        --y-0: 84.26106770833333%;
        --c-0: hsla(194, 100%, 88%, 0.84);
        --x-1: 30.54657095909366%;
        --c-1: hsla(98, 100%, 89%, 0.84);
        --s-start-1: 19.728690253363787%;
        --s-end-1: 40.788006252712776%;
        --y-1: 33.049587673611114%;
        --c-2: hsla(142, 100%, 88%, 0.84);
        --y-2: 20.17578125%;
        --x-2: 19.432096630055636%;
        --s-start-2: 31.874033610026085%;
        --s-end-2: 64.3566555447049%;
        --s-start-3: 31.874033610026085%;
        --s-end-3: 64.3566555447049%;
        --y-3: 70.16872829861111%;
        --x-3: 70.06053792268442%;
        --c-3: hsla(173, 100%, 78%, 0.84);
    }

    100% {
        --x-0: 28.739946380697052%;
        --s-start-0: 21.161999172634655%;
        --s-end-0: 45.13318803575309%;
        --y-0: 59.07660590277778%;
        --c-0: hsla(194, 100%, 88%, 0.83);
        --x-1: 72.53682723629969%;
        --c-1: hsla(98, 100%, 89%, 0.83);
        --s-start-1: 21.161999172634655%;
        --s-end-1: 45.13318803575309%;
        --y-1: 26.591796875%;
        --c-2: hsla(142, 100%, 88%, 0.84);
        --y-2: 69.08311631944444%;
        --x-2: 68.63703191213352%;
        --s-start-2: 21.161999172634655%;
        --s-end-2: 45.13318803575309%;
        --s-start-3: 21.161999172634655%;
        --s-end-3: 45.13318803575309%;
        --y-3: 26.949327256944443%;
        --x-3: 24.347487676208598%;
        --c-3: hsla(173, 100%, 78%, 0.83);
    }
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 67.26051486061864%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31.874033610026085%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 64.3566555447049%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 84.26106770833333%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(194, 100%, 88%, 0.84)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 30.54657095909366%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(98, 100%, 89%, 0.84)
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 19.728690253363787%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40.788006252712776%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 33.049587673611114%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(142, 100%, 88%, 0.84)
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20.17578125%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 19.432096630055636%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31.874033610026085%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 64.3566555447049%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31.874033610026085%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 64.3566555447049%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 70.16872829861111%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 70.06053792268442%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(173, 100%, 78%, 0.84)
}

.top__hero__bg-gr{
    --x-0: 67.26051486061864%;
    --y-0: 84.26106770833333%;
    --c-0: hsla(194, 100%, 88%, 0.84);
    --x-1: 30.54657095909366%;
    --c-1: hsla(98, 100%, 89%, 0.84);
    --y-1: 33.049587673611114%;
    --c-2: hsla(142, 100%, 88%, 0.84);
    --y-2: 20.17578125%;
    --x-2: 19.432096630055636%;
    --y-3: 70.16872829861111%;
    --x-3: 70.06053792268442%;
    --c-3: hsla(173, 100%, 78%, 0.84);
    ;
    background-color: hsla(204, 0%, 100%, 1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 785 785' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: overlay, normal, normal, normal, screen;
    will-change: transform, opacity;
    contain: paint
}


/*フォーム画面スタイリング*/
.donation__form__wrap .smf-item__controls {
  display: flex;
  flex-direction: row;
}
.smf-form .smf-text-control__control { /*フォーム枠*/
  border: 1px solid #dddddd;
  width: 18rem;
}

.smf-form [data-invalid="1"] {
  border-color: #ff2d2d;
}

.fm__wrap-top { /* トップだけ罫線を追加 */
  border-top: 1px solid #dddddd !important;
}

.essential .smf-item__description { /*必須マーク*/
  background-color: #ff1616;
  padding: .1rem .5rem;
  display: inline-block;
  border-radius: 4px;
  color: #fff;
  font-size: .8rem;
}

.smf-error-messages { /*エラーメッセージ*/
  background-color: #fff089;
  padding: .2rem .5rem;
  border-radius: 4px;
  font-size: .9rem;
}

.form__content-label__user-name,
.form__content-label__user-company { /*ラベルの調整*/
  width: 3rem;
}
@media screen and (max-width: 480px) {
  .form__content-label__user-name,
  .form__content-label__user-company {
    text-align: left;
  }
}

.form__content-label__address { /*ラベルの調整*/
  width: 8rem;
}

.fm__user-name__input { /*テキストフィールドの調整*/
  width: 10rem !important;
}

.fm__mail-address__input { /*テキストフィールドの調整*/
  width: 20rem !important;
}
@media screen and (max-width: 480px) {
  .fm__mail-address__input {
    width: 18rem !important;
  }
}



@media screen and (max-width: 480px) {
  .is-layout-flex { /*スマホで縦並びに変更*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

.smf-complete-content {
  display: flex;
  flex-direction: column;
}

.form__thanks__text {
  margin-bottom: 2rem;
}


/*2026-0128*/