@charset "UTF-8";
/* Scss Document */
/* ==========================================================================
 Foundation
============================================================================*/
/* =============================================== */
/** 変数設定 */
/* ----------------------------------------------- */
/* =============================================== */
/** reset全体設定 */
/* ----------------------------------------------- */
a:hover {
  opacity: 0.8;
  text-decoration: underline; }

.underline {
  text-decoration: underline; }

.f_16, .contact input[type="text"], .contact input[type="email"], .contact textarea, .contact input[type="textarea"], .contact input[type="number"], .contact input[type="date"], .contact input[type="file"] {
  font-size: 1.0rem; }

.pc {
  display: inherit !important; }
  @media screen and (max-width: 600px) {
    .pc {
      display: none !important; } }

.sp {
  display: none !important; }
  @media screen and (max-width: 600px) {
    .sp {
      display: inherit !important; } }

.btn {
  border-radius: 9999px;
  border-color: #191919;
  background-color: #191919 !important;
  font-family: var(--wp--preset--font-family--beiruti);
  padding-top: 0.6rem !important;
  padding-right: 1.6rem !important;
  padding-bottom: 0.6rem !important;
  padding-left: 1.6rem !important;
  box-shadow: 0px 4px 4px 0 rgba(51, 51, 51, 0.25); }
  .btn a {
    color: #F8F7F5 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em; }

/* メールフォーム
----------------------------------------------- */
.any, .require {
  width: 2em;
  text-indent: 0;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  background-color: #f36929;
  color: #fff;
  border-radius: 4px;
  float: right; }

.any {
  background-color: #2635A4; }

.notes {
  font-size: 0.9em;
  text-indent: -1em;
  padding-left: 1em; }

.contact {
  background-color: rgba(242, 225, 202, 0.2);
  padding: 40px; }

.contact h5 {
  text-align: left;
  padding: 20px 6px 6px 2em;
  text-indent: -2em;
  font-weight: normal;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.1em; }

.contact dl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  text-align: left; }
  @media screen and (max-width: 600px) {
    .contact dl {
      grid-template-columns: 1fr; } }

.contact dt {
  padding-left: 0.5em; }

.contact dd {
  margin-bottom: 20px; }
  .contact dd.your-address p {
    clear: both;
    float: left; }
    .contact dd.your-address p > * {
      margin-right: 10px; }

.contact input[type="text"], .contact input[type="email"], .contact textarea, .contact input[type="textarea"], .contact input[type="number"], .contact input[type="date"] {
  width: 100%;
  margin-bottom: 0.4rem;
  background: #fff;
  border: solid 1px #d1d1d1;
  padding: 12px;
  border-radius: 4px;
  box-sizing: border-box; }

.contact ::placeholder {
  color: #ccc; }

.contact .wpcf7 input[name="your-zip"] {
  /* 郵便番号 */
  width: 10em; }

.contact .wpcf7 input[name="your-address-level1"] {
  /* 都道府県 */
  width: 10em; }

.contact .wpcf7 input[name="your-address-level2"] {
  /* 市区町村 */
  width: 12em; }

.contact .wpcf7 input[name="your-donation"] {
  /* ご奉賛金額 */
  width: calc( 100% - 2em ); }

.contact select {
  margin-bottom: 0.4rem;
  background: #fff;
  border: solid 1px #d1d1d1;
  padding: 12px;
  border-radius: 4px;
  box-sizing: border-box; }

.contact input[type="file"] {
  margin-bottom: 0.4rem;
  background: #fff;
  padding: 12px;
  border-radius: 4px;
  box-sizing: border-box; }

.contact input[type="text"].box_1, .contact input[type="email"].box_1, .contact textarea.box_1, .contact input[type="textarea"].box_1,
.box_1 {
  width: 100px; }

.form {
  margin: 0px auto 20px auto;
  width: 100%;
  box-sizing: border-box; }

.form table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed; }

.form .title {
  text-align: left;
  vertical-align: middle;
  width: 200px;
  background: #999999; }
  @media screen and (max-width: 600px) {
    .form .title {
      width: auto; } }

.form table td {
  font-size: 1em;
  padding: 0.75em;
  border: 1px solid #ddd; }
  @media screen and (max-width: 600px) {
    .form table td {
      display: block; } }

.form .contents {
  text-align: left;
  vertical-align: middle;
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.7); }
  @media screen and (max-width: 600px) {
    .form .contents {
      margin-bottom: 0; } }

.contact fieldset {
  border: none; }

.contact fieldset legend {
  padding: 10px 0 0 0; }

.contact fieldset label {
  font-weight: bold; }

.contact .check {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 20px auto;
  padding: 19px;
  text-align: left;
  border: #DDD 1px solid;
  font-size: 1em;
  background: rgba(255, 255, 255, 0.7); }

/* TOPページ用
----------------------------------------------- */
#topimg {
  position: relative; }
  #topimg--bg {
    position: relative;
    z-index: -1;
    opacity: 0;
    animation-delay: 3s;
    animation-duration: 6s;
    animation-name: opacity01;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    height: calc(100vh - 110px); }
  #topimg--logo {
    position: absolute;
    top: calc(50% - 100px );
    left: calc(50% - 350px);
    width: 700px;
    height: 200px;
    opacity: 0;
    animation-delay: 0s;
    animation-duration: 3s;
    animation-name: opacitylogo;
    animation-iteration-count: 1;
    animation-fill-mode: forwards; }
    @media screen and (max-width: 600px) {
      #topimg--logo {
        width: 100%;
        height: auto;
        top: calc(50% - 100px );
        left: 0;
        text-align: center; } }
    #topimg--logo svg path {
      fill: #af8d63;
      stroke: #af8d63;
      animation-name: opacitylogo-c;
      animation-delay: 0s;
      animation-duration: 3s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards; }

@keyframes opacity01 {
  from {
    opacity: 0;
    transform: translateY(-4px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes opacitylogo {
  from {
    opacity: 0;
    transform: translateY(-4px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes opacitylogo-c {
  from {
    opacity: 1;
    transform: translateY(-4px);
    fill: #af8d63;
    stroke: #af8d63; }
  to {
    opacity: 1;
    transform: translateY(0);
    fill: #fff;
    stroke: #fff; } }