@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/
/* ===== 基本ボタン統一 ===== */
/* =========================
   SANGO風ボタン統一
========================= */



/* SANGOの <a class="btn normal raised"> に寄せる */
body:not(.wp-admin) form :where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):not(.searchform__submit):not(.wp-block-search__button),
body:not(.wp-admin) #submit {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  padding: 0.4em 1.3em;
  border: none;
  border-radius: var(--wp--custom--rounded--medium, 10px);
  background-color: var(--wp--preset--color--sango-main, var(--wp--custom--preset--sango-main, #009ef3));
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 700;
  text-decoration: none;
  vertical-align: middle;
  box-shadow: var(--wp--custom--shadow--medium, 0 3px 12px rgba(0, 0, 0, 0.14));
  transition: var(--wp--custom--transition--default, 0.3s ease-in-out);
  cursor: pointer;
}

/* hover / focus */
body:not(.wp-admin) form :where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):not(.searchform__submit):not(.wp-block-search__button):hover,
body:not(.wp-admin) form :where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):not(.searchform__submit):not(.wp-block-search__button):focus,
body:not(.wp-admin) #submit:hover,
body:not(.wp-admin) #submit:focus {
  color: #fff;
  text-decoration: none;
  box-shadow: var(--wp--custom--shadow--medium-hover, 0 5px 18px rgba(0, 0, 0, 0.18));
  filter: brightness(1.03);
  outline: none;
}

/* 押した感 */
body:not(.wp-admin) form :where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):not(.searchform__submit):not(.wp-block-search__button):active,
body:not(.wp-admin) #submit:active {
  transform: translateY(1px);
  box-shadow: var(--wp--custom--shadow--medium, 0 3px 12px rgba(0, 0, 0, 0.14));
}

/* 無効状態 */
body:not(.wp-admin) form :where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):not(.searchform__submit):not(.wp-block-search__button):disabled,
body:not(.wp-admin) #submit:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

/* 小さい画面では少しだけ圧縮 */
@media (max-width: 680px) {
  body:not(.wp-admin) form :where(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
  ):not(.searchform__submit):not(.wp-block-search__button),
  body:not(.wp-admin) #submit {
    font-size: 16px;
    padding: 0.45em 1.15em;
  }
}