@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@font-face {
　　　　font-family: 'noto-sans-jp';
　　　　src: url(./fonts/Noto_Sans_JP/NotoSansJP-Regular.woff)format("woff");
　　　　font-weight: normal;
　　　　font-display: swap;
}

@font-face {
　　　font-family: 'noto-sans-jp';
　　　src: url(./fonts/Noto_Sans_JP/NotoSansJP-Bold.woff)format("woff");
　　　font-weight: bold;
　　　font-display: swap;
}
.kiwi_footer_logo {
  text-align: center;
}
.kiwi_footer_logo img {
  margin: 0 20px 0 20px;
}
.kiwi_about_text {
  font-family: 'noto-sans-jp';
  font-size: 19pt;
  text-align: center;
  font-weight: bold;
}
.page-id-324 h1.entry-title {
  display: none;
}

.sent .general {
  display: none;
}
.sentout_message{
  display: none;
}
.sent .sentout_message{
  display: block;
}

.footer-left {
    width: 10%;
}
.footer-center {
    width: 80%;
}
.footer-right {
    width: 10%;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/************************************
** TOPページ
************************************/

.appeal {
  background-image: url('https://kiwigames.jp/wp-content/uploads/2025/02/P1090356.jpg');	/* スマホ画面での画像 */
  background-attachment: fixed;
  min-height: calc(100vh - 84px); /* スマホ画面での高さ */
  min-width: 100%;
  background-size: cover;
  position: relative;
}
@media screen and (min-width: 768px){
  .appeal {
    background-image: url('https://kiwigames.jp/wp-content/uploads/2025/02/P1090356.jpg');	/* パソコン画面での画像 */
    min-height: calc(100vh - 90px);	/* パソコン画面での高さ */
  }
}
.appeal::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background-color: rgba(69, 69, 69, .5);*/  /* 画像の明るさ設定 */
}
.appeal-in {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.appeal-content {
  background-color: transparent;
  width: 100%;
  padding: 2em 1em;
}
.appeal-title {
  color: #FFF; /* タイトルの色 */
  font-size: 5em; /* タイトルのフォントサイズ（スマホ） */
  text-shadow: 0 4px 4px #333; /* タイトルの影 */
}
@media screen and (min-width: 768px){
  .appeal-title {
    font-size: 10em; /* タイトルのフォントサイズ（パソコン） */
  }
}
.appeal-message p {
  color: #FFF; /* サブタイトルの色 */
  font-size: 1em; /* サブタイトルのフォントサイズ（スマホ） */
  margin-top: -1em; /* タイトルとサブタイトルの行間（不要なら削除） */
}
@media screen and (min-width: 768px){
  .appeal-message p {
    font-size: 1.2em; /* サブタイトルのフォントサイズ（パソコン） */
    margin-top: -4em; /* タイトルとサブタイトルの余白（不要なら削除） */
  }
}
/* スクロールボタン */
.appeal-button {
  color: #FFF; /* スクロールボタンの色 */
  background-color: transparent!important;
  margin-top: 5em; /* サブタイトルとボタンの余白（不要なら削除） */
  transition: .5s;
}
.appeal-button:hover {
  color: #CBCBCB; /* スクロールボタンの上にカーソルを載せたときの色 */
  transition: .5s;
}
.appeal-button:before {
  font-family: "Font Awesome 5 Free";
  content: "\f103"; /* スクロールボタンのマーク */
  display: block;
  animation: updown 1s infinite alternate ease-in-out;
}
@keyframes updown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(15px);
  }
}