/*
Theme Name:football-club-web-site
Author: TakumiOnodera
Description: This is my original theme.
Version: 1.0
*/

@charset "utf-8";







/* PC版 表示 */
@media(min-width: 600px){

/* -------------------------------------base-------------------------------------- */

body{
  background-color:#b3dbea;
  margin:0px 0px 0px 0px;
}

li{
  list-style:none;
  text-decoration:none;
  margin:0px 0px 0px 0px;
}

ul{
  margin:0px 0px 0px 0px;
}

/* pc版のデザイン */
.pc-contents{
  display:inline-block;
}

/* モバイル版のデザイン */
.mobile-contents{
  display:none;
}

/* -------------------------------------header-------------------------------------- */

/* ヘッダー 要素全体 */
header{
  width:100%;
}

/* PC用メニュー */
.header-pc-contents{
  margin:0px 0px 30px 0px;
}

/* モバイル用 メニュー */
.header-mobile-contents{
  display:none;
}

/* ヘッダー(上) */
.header-top{
  background-color:#6699cc;
  display:inline-block;
  width:100%;
  text-align:center;
}
.header-top a{
  text-decoration:none;
}

/* ヘッダー サイト名 */
.header-top-site-title{
  width:100%;
  color:#ffffff;
  font-family: "Cherry Bomb One", system-ui;
  font-weight:500;
  font-size: 50px;
  text-align:center;
  margin:5px 0px 0px 0px;
}
.header-top-site-title a{
  text-decoration:none;
}

/* ヘッダー サブサイト名 */
.header-top-site-subtitle{
  width:auto;
  display:inline-block;
  text-align:center;
  color:#6699cc;
  background-color:#ffffff;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size: 16px;
  text-align:center;
  margin:0px 0px 20px 0px;
  padding:3px 15px 6px 15px;
  border-radius:1rem;
}
.header-top-site-subtitle a{
  text-decoration:none;
}

/* ヘッダー(下) */
.header-bottom{
  background-color:#ffffff;
  height:40px;
  font-weight:900;
  margin:0px 0px 0px 0px;
}

/* ヘッダー(下) メニュー */
.gnavi__wrap{
  text-align:center;
}

/* ヘッダー(下) メニュー 要素全体 */
.header-gnavi-lists{
  margin:0px 0px 0px 0px;
}

/* ヘッダー(下) メニュー 要素 */
.header-gnavi-list{
  width:auto;
  height:20px;
  display:inline-block;
}
.header-gnavi-list a{
  text-decoration:none;
  color:#ffffff;
}
.header-gnavi-list :hover{
  color:#ffbd59;
}

/* ヘッダー(下) メニュー */
.header-gnavi-list-menu{
  width:auto;
  line-height:40px;
  padding:0px 0px 0px 0px;
  font-family: "Gabarito", sans-serif;
  font-weight:900;
  font-size: 24px;
  text-align:center;
  color:#6699cc;
  margin:0px 5px 0px 5px;
}
.header-gnavi-list-menu a{
  text-decoration:none;
  color:#ffffff;
}
.header-gnavi-list-menu :hover{
  color:#ffbd59;
}

/* -------------------------------------category-------------------------------------- */

/* フロントページ 要素全体 */
.front-page{
  background-color:#b3dbea;
  text-align:center;
}

/* 記事一覧ページ 要素全体 */
.blog-page{
  background-color:#b3dbea;
  text-align:center;
}

/* お問い合わせページ 要素全体 */
.contact-page{
  background-color:#b3dbea;
  text-align:center;
}

/* カテゴリ 背景白 要素全体 */
.category-box-contents{
  background-color:#ffffff;
  width:80%;
  margin:30px 0% 30px 0%;
  padding:30px 0px 30px 0px;
  text-align:center;
  border-radius:20px;
  display:inline-block;
}

/* カテゴリ タイトル */
.category-contents-title{
  text-align:center;
  font-family: "Gabarito", sans-serif;
  font-size: 70px;
  font-weight:900;
  color:#6699cc;
  padding:0px 0px 0px 0px;
  margin:0px 0px 20px 0px;
}

/* カテゴリ サブタイトル */
.category-contents-subtitle{
  text-align:center;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-weight:600;
  font-size: 20px;
  line-height:20px;
  color:#ffffff;
  background-color:#6699cc;
  display:inline-block;
  text-align:center;
  margin:0px 0% 0px 0%;
  padding:6px 10px 8px 10px;
}

/* カテゴリ 本文 */
.category-contents-text{
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 20px;
  line-height:34px;
  font-weight:600;
  color:#000000;
  width:90%;
  margin:20px 5% 20px 5%;
  text-align:center;
}

/* カテゴリ プロフィール画像 */
.category-contents-profile-img{
  display:inline-block;
  width:300px;
  height:auto;
  margin:0% 0% 20px 0%;
  border-radius:50%;
  text-align:center;
  background-color:#b3dbea;
}
.category-contents-profile-img img{
  border-radius:50%;
  width:100%;
}

/* カテゴリ 肩書 */
.category-contents-profile-position{
  text-align:center;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-weight:600;
  font-size: 18px;
  line-height:18px;
  margin:10px 0px 10px 0px;
  color:#000000;
}

/* カテゴリ 名前 */
.category-contents-profile-name{
  text-align:center;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size: 34px;
  line-height:34px;
  margin:10px 0px 10px 0px;
  color:#000000;
}

/* カテゴリ SNSリンク */
.category-contents-profile-sns{
  text-align:center;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 18px;
  font-weight:400;
  margin:10px 0px 10px 0px;
  color:#000000;
}
.category-contents-profile-sns a{
  text-decoration:none;
  color:#000000;
}
.category-contents-profile-sns :hover{
  background-color:#b3dbea;
}

/* カテゴリ プロフィール ボタン */
.category-contents-profile-btn{
  display:inline-block;
  color:#ffffff;
  background-color:#6699cc;
  padding:5px 10px 5px 10px;
  margin:20px 5% 20px 5%;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size:18px;
  border-radius:30px;
}
.category-contents-profile-btn a{
  text-decoration:none;
  color:#ffffff;
}
.category-contents-profile-btn :hover{
  filter: brightness(0.4);
}

/* カテゴリ スライダー 画像（TOPページ） */
.skip-lazy img{
  border-radius:0.6rem !important;
}

/* スワイパー 表示エリア */
.category-swiper{
  width:100%;
  overflow: hidden;
  margin:30px 0px 20px 0px;
}

/* スワイパー 要素全体 */
.swiper-wrapper{
  transition-timing-function: linear !important;
}

/* スワイパー 要素 */
.swiper-slide{
  display:inline-block;
  width:100%;
  margin:0px 0px 0px 20px;
}
.swiper-slide img {
  width:100%;
  border-radius:1.2rem;
}
.swiper-slide :hover{
  filter: brightness(0.4);
}

/* カテゴリ お問い合わせ 入力エリア */
input[type="text"],
input[type="email"],
textarea{
  background-color:#eeeeee;
  color: #000000;
  width: 90%;
  margin:10px 0px 20px 0px;
  padding:3px;
  text-align:center;
}

/* カテゴリ お問い合わせ 送信ボタン */
input[type="submit"] {
  display:inline-block;
  color:#ffffff;
  background-color:#6699cc;
  text-decoration:none;
  margin:0px 0px 0px 0px;
  padding:0px 10px 0px 10px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight:500;
  font-size:18px;
  vertical-align:top;
  border-radius:10px;
  line-height:30px;
}
span.wpcf7-spinner {
  display: none;
}

/* -------------------------------------article-------------------------------------- */

/* 記事 トップ タイトル */
.article-top-title{
  text-align:center;
  font-family: "Gabarito", sans-serif;
  font-size: 70px;
  font-weight:900;
  color:#6699cc;
  padding:0px 0px 0px 0px;
  margin:0px 0px 30px 0px;
}

/* 記事 要素全体 */
.single-contents{
  width:100%;
  background-color:#b3dbea;
  padding:0px 0px 0px 0px;
  text-align:center;
}

/* 記事 要素全体 */
.article-contents{
  margin:0px 25% 0px 25%;
  width:50%;
  text-align:center;
  background-color:#ffffff;
  border-radius:40px;
  padding:30px 40px 30px 40px;
}

/* 記事 公開時間とタグ要素全体 */
.article-info{
  width:100%;
  text-align:left;
  margin:0px 0px 0px 0px;
  vertical-align:middle;
}

/* 記事 公開時間 */
.article-time{
  text-align:left;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  font-weight:900;
  display:inline-block;
  padding:0px 0px 0px 0px;
  color:#000000;
  line-height:22px;
  vertical-align:middle;
}

/* 記事 カテゴリ */
.article-category{
  text-align:left;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 14px !important;
  background-color:#000000;
  display:inline-block;
  margin:0px 5px 0px 0px;
  padding:0px 5px 0px 5px;
  line-height:22px;
  vertical-align:middle;
  font-weight:900;
}
.article-category a{
  color:#ffffff;
  font-weight:900;
  text-decoration:none;
  display:inline-block;
}
.article-category :hover{
  filter: brightness(0.4);
}

/* 記事 タイトル 要素 */
.article-title{
  display:block;
  text-align:left;
  vertical-align:middle;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  line-height:34px;
  font-weight:900;
  font-size:26px;
  margin:10px 0px 0px 0px;
}

/* 記事 サムネイル */
.article-thumbnail{
  width:100%;
}
.article-thumbnail img{
  width:100%;
  height:auto;
  vertical-align:middle;
  margin:20px 0px 0px 0px;
  border-radius:30px;
}

/* 記事 本文 */
.article-text{
  text-align:left;
  margin:10px 0px 10px 0px;
}

/* 本文 */
p{
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 18px;
  font-weight:500;
  margin:24px 0px 0px 0px;
  line-height:28px;
}

/* 記事 見出し(h2) */
.article-subtitle{
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size:20px;
  font-weight:500;
  text-align:center;
  background-color:#6699cc;
  color:#ffffff;
  padding:3px 8px 5px 8px;
  display:inline-block;
  margin:20px 0px 0px 0px;
  width:100%;
  border-radius:0.5rem;
}

/* 記事 見出し(h3) */
.article-subsubtitle{
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 20px;
  font-weight:600;
  line-height:24px;
  text-align:center;
  color:#6699cc;
  padding:5px 2px 5px 2px;
  display:inline-block;
  margin:20px 0px 0px 0px;
  width:fit-content;
  border-radius:0rem;
}

/* 記事 ボタン 要素全体 */
.article-btn-lists{
  width:100%;
  text-align:center;
}

/* 記事 ホームに戻る ボタン */
.article-back-btn{
  line-height:35px;
  display:inline-block;
  color:#ffffff;
  background-color:#6699cc;
  text-decoration:none;
  margin:16px 0px 16px 10px;
  padding:0px 10px 0px 10px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size:16px;
  vertical-align:top;
  border-radius:30px;
}
.article-back-btn a{
  text-decoration:none;
  color:#ffffff;
}
.article-back-btn :hover{
  filter: brightness(0.4);
}

/* 記事 YouTubeリンク要素 */
.youtube-link{
  width:100%;
  aspect-ratio: 16 / 9;
  margin:30px 0px 30px 0px;
}
.youtube-link iframe{
  width:100%;
  height:100%;
}

/* 記事 Instagaram リンク要素 */
.instagram-link{
  margin:20px 0px 10px 0px;
}
.instagram-link iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 記事 画像 */
.wp-block-image{
  width:100%;
}
.wp-block-image img{
  margin:20px 0px 0px 0px;
  border-radius:30px;
}
.wp-block-image a:hover{
  filter: brightness(0.4);
}

/* -------------------------------------footer-------------------------------------- */

/* フッター */
.footer-contents{
  background-color:#000000;
  margin:30px 0px 0px 0px;
}

/* フッター 要素全体 */
.footer-menu-lists{
  display:inline-block;
  text-align:center;
  width:100%;
}

/* フッター 要素 */
.footer-menu-list{
  display:inline-block;
  text-align:center;
  color:#ffffff;
  font-family: "Gabarito", sans-serif;
  font-weight:900;
  font-size: 25px;
  background-color:#000000;
  text-align:center;
  margin:10px 5px 0px 5px;
}
.footer-menu-list a{
  text-decoration:none;
  color:#ffffff;
}
.footer-menu-list :hover{
  color:#ffbd59;
}

/* フッター コピーライト */
.footer-copyright{
  width:100%;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 20px;
  font-weight:900;
  text-align:center;
  display:inline-block;
  color:#ffffff;
  background-color:#000000;
  padding:20px 0px 20px 0px;
}

/* フッター コピーライト 文字 */
.footer-copyright-text{
  display:inline-block;
}
.footer-copyright-text a{
  text-decoration:none;
  color:#ffffff;
}
.footer-copyright-text :hover{
  filter: brightness(0.6);
}


/* PC版 表示 終了 */
}




















/* モバイル版 表示 */
@media(max-width: 600px){

/* -------------------------------------base-------------------------------------- */

body{
  background-color:#b3dbea;
  margin:0px 0px 0px 0px;
}

li{
  list-style:none;
}

/* モバイル版のデザインを非表示 */
.pc-contents{
  display:none;
}

/* モバイル版のデザインを非表示 */
.mobile-contents{
  display:inline-block;
}

/* -------------------------------------header-------------------------------------- */

/* ヘッダー 要素全体 */
header{
  width:100%;
  position:fixed;
  z-index:999;
}

/* PC用メニュー */
.header-pc-contents{
  display:none;
}

/* モバイル用 メニュー */
.header-mobile-contents{
  background-color:#000000;
  width:100%;
  height:70px;
}
.header-mobile-contents a{
  text-decoration:none;
}

/* モバイル用 メニュー */
.header-mobile-contents{
  background-color:#6699cc;
  width:100%;
  height:70px;
}
.header-mobile-contents a{
  text-decoration:none;
}

/* モバイル用 メニュー タイトル */
.header-mobile-title{
  width:100%;
  color:#ffffff;
  font-family: "Cherry Bomb One", system-ui;
  font-weight:900;
  font-size: 30px;
  margin:0px 0px -6px 15px;
}
.header-mobile-title a{
  text-decoration:none;
}

/* モバイル用 メニュー サブタイトル */
.header-mobile-subtitle{
  width:auto;
  display:inline-block;
  text-align:center;
  color:#6699cc;
  background-color:#ffffff;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size: 10px;
  text-align:center;
  margin:0px 0px 0px 15px;
  padding:0px 5px 0px 5px;
  line-height:20px;
  border-radius:0.5rem;
}
.header-mobile-subtitle a{
  text-decoration:none;
}

/* スマホ用メニューボタン https://www.asobou.co.jp/blog/web/css-menu */
.menu-btn{
  position:fixed;
  top: 0px;
  right: 0px;
  display: flex;
  height: 70px;
  width: 70px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #8869a5;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}

/* スマホ用メニューボタン 動き */
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
#menu-btn-check {
  display: none;
}
#menu-btn-check:checked ~ .menu-content {
  left: 0;/*メニューを画面内へ*/
}

/* スマホ用メニュー デザイン */
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #8869a5;
  transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
  padding: 70px 10px 0;
}
.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}

/* モバイル用 メニュー */
details {
}

/* モバイル用 メニュー カテゴリ */
summary{
  cursor: pointer;
  list-style: none;
  position: relative;
  font-size: 20px;
  line-height:20px;
  font-weight:900;
  color:#ffffff;
  padding:5px 0px 5px 0px;
  font-family: "Gabarito", sans-serif;
}

/* モバイル用 メニュー Safari対応 デフォルトの三角形アイコン非表示 */
details summary::-webkit-details-marker {
  display: none;
}

/* モバイル用 メニュー サブカテゴリ */
.header-mobile-menu-list{
  font-size: 10px;
  font-weight:400;
  color:#ffffff;
  line-height:14px;
  padding:0px 0px 0px 15px;
  font-family: "M+PLUS Rounded 1c", sans-serif;
}

/* モバイル用 メニュー アイコンの三角矢印 位置調整 */
.icon {
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transform-origin: center 43%;
  transition: transform 0.5s;
}

/* モバイル用 メニュー アイコンの三角矢印 デザイン */
.icon::before,
.icon::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 3px;
  background-color: #ffffff;
}
.icon::before {
  left: 0;
  transform: rotate(45deg);
}
.icon::after {
  right: 0;
  transform: rotate(-45deg);
}

/* モバイル用 メニュー アイコンクリック時の動き */
details[open] .icon {
  transform: rotate(180deg);
}

/* -------------------------------------category-------------------------------------- */

/* フロントページ 要素全体 */
.front-page{
  background-color:#b3dbea;
  text-align:center;
  margin:0px 0px 0px 0px;
  padding:80px 0px 0px 0px;
}

/* 記事一覧ページ 要素全体 */
.blog-page{
  background-color:#b3dbea;
  text-align:center;
  margin:0px 0px 0px 0px;
  padding:20px 0px 0px 0px;
}

/* お問い合わせページ 要素全体 */
.contact-page{
  background-color:#b3dbea;
  text-align:center;
  margin:0px 0px 0px 0px;
  padding:20px 0px 0px 0px;
}

/* カテゴリ 背景白 要素全体 */
.category-box-contents{
  background-color:#ffffff;
  width:90%;
  margin:20px 5% 20px 5%;
  padding:10px 0px 10px 0px;
  text-align:center;
  border-radius:20px;
  display:inline-block;
}

/* カテゴリ タイトル */
.category-contents-title{
  text-align:center;
  font-family: "Gabarito", sans-serif;
  font-size: 45px;
  font-weight:900;
  color:#6699cc;
  padding:0px 0px 0px 0px;
  margin:10px 0px 10px 0px;
}

/* カテゴリ サブタイトル */
.category-contents-subtitle{
  text-align:center;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-weight:600;
  font-size: 16px;
  line-height:20px;
  color:#ffffff;
  background-color:#6699cc;
  display:inline-block;
  text-align:center;
  width:90%;
  margin:10px 5% 10px 5%;
  padding:4px 10px 6px 10px;
}

/* カテゴリ 本文 */
.category-contents-text{
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  line-height:24px;
  font-weight:600;
  color:#000000;
  width:90%;
  margin:10px 5% 10px 5%;
  text-align:center;
}

/* カテゴリ プロフィール画像 */
.category-contents-profile-img{
  display:inline-block;
  width:80%;
  height:auto;
  margin:10px 10% 10px 10%;
  border-radius:50%;
  text-align:center;
  background-color:#b3dbea;
}
.category-contents-profile-img img{
  border-radius:50%;
  width:100%;
}

/* カテゴリ 肩書 */
.category-contents-profile-position{
  text-align:center;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-weight:500;
  font-size: 14px;
  line-height:14px;
  margin:7px 0px 7px 0px;
  color:#000000;
}

/* カテゴリ 名前 */
.category-contents-profile-name{
  text-align:center;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size: 24px;
  line-height:24px;
  margin:7px 0px 7px 0px;
  color:#000000;
}

/* カテゴリ SNSリンク */
.category-contents-profile-sns{
  text-align:center;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 14px;
  font-weight:400;
  margin:7px 0px 20px 0px;
  color:#000000;
}
.category-contents-profile-sns a{
  text-decoration:none;
  color:#000000;
}
.category-contents-profile-sns :hover{
  background-color:#b3dbea;
}

/* カテゴリ プロフィール ボタン */
.category-contents-profile-btn{
  display:inline-block;
  color:#ffffff;
  background-color:#6699cc;
  padding:4px 8px 4px 8px;
  margin:10px 5% 10px 5%;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size:16px;
  border-radius:30px;
}
.category-contents-profile-btn a{
  text-decoration:none;
  color:#ffffff;
}
.category-contents-profile-btn :hover{
  filter: brightness(0.4);
}

/* カテゴリ スライダー 画像（TOPページ） */
.skip-lazy img{
  border-radius:0.6rem !important;
}

/* スワイパー 表示エリア */
.category-swiper{
  width:100%;
  overflow: hidden;
  margin:20px 0px 20px 0px;
}

/* スワイパー 要素全体 */
.swiper-wrapper{
  transition-timing-function: linear !important;
}

/* スワイパー 要素 */
.swiper-slide{
  display:inline-block;
  width:100%;
  margin:0px 0px 0px 20px;
}
.swiper-slide img {
  width:100%;
  border-radius:1.2rem;
}
.swiper-slide :hover{
  filter: brightness(0.4);
}


/* カテゴリ お問い合わせ 入力エリア */
input[type="text"],
input[type="email"],
textarea{
  background-color:#eeeeee;
  color: #000000;
  width: 90%;
  margin:10px 0px 20px 0px;
  padding:3px;
  text-align:center;
}

/* カテゴリ お問い合わせ 送信ボタン */
input[type="submit"] {
  display:inline-block;
  color:#ffffff;
  background-color:#6699cc;
  text-decoration:none;
  margin:0px 0px 0px 0px;
  padding:0px 10px 0px 10px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight:500;
  font-size:18px;
  vertical-align:top;
  border-radius:10px;
  line-height:30px;
}
span.wpcf7-spinner {
  display: none;
}

/* -------------------------------------article-------------------------------------- */

/* 記事 トップ タイトル */
.article-top-title{
  text-align:center;
  font-family: "Gabarito", sans-serif;
  font-size: 50px;
  font-weight:900;
  color:#6699cc;
  padding:80px 0px 0px 0px;
  margin:0px 0px 10px 0px;
}

/* 記事 要素全体 */
.single-contents{
  width:100%;
  background-color:#b3dbea;
  padding:0px 0px 0px 0px;
  text-align:center;
}

/* 記事 要素全体 */
.article-contents{
  margin:0px 5% 30px 5%;
  width:90%;
  text-align:center;
  background-color:#ffffff;
  border-radius:20px;
  padding:30px 5% 30px 5%;
}

/* 記事 公開時間とタグ要素全体 */
.article-info{
  width:100%;
  text-align:left;
  margin:0px 0px 0px 0px;
  vertical-align:middle;
}

/* 記事 公開時間 */
.article-time{
  text-align:left;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  font-weight:900;
  display:inline-block;
  padding:0px 0px 0px 0px;
  color:#000000;
  line-height:22px;
  vertical-align:middle;
}

/* 記事 カテゴリ */
.article-category{
  text-align:left;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 14px !important;
  background-color:#000000;
  display:inline-block;
  margin:0px 5px 0px 0px;
  padding:0px 5px 0px 5px;
  line-height:22px;
  vertical-align:middle;
  font-weight:900;
}
.article-category a{
  color:#ffffff;
  font-weight:900;
  text-decoration:none;
  display:inline-block;
}
.article-category :hover{
  filter: brightness(0.4);
}

/* 記事 タイトル 要素 */
.article-title{
  display:block;
  text-align:left;
  vertical-align:middle;
  font-family: "M+PLUS Rounded 1c", sans-serif;
  line-height:28px;
  font-weight:900;
  font-size:20px;
  margin:10px 0px 0px 0px;
}

/* 記事 サムネイル */
.article-thumbnail{
  width:100%;
}
.article-thumbnail img{
  width:100%;
  height:auto;
  vertical-align:middle;
  margin:20px 0px 0px 0px;
  border-radius:15px;
}

/* 記事 本文 */
.article-text{
  text-align:left;
  margin:10px 0px 10px 0px;
}

/* 本文 */
p{
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  font-weight:500;
  margin:22px 0px 0px 0px;
  line-height:22px;
}

/* 記事 見出し(h2) */
.article-subtitle{
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  font-weight:500;
  text-align:center;
  background-color:#6699cc;
  color:#ffffff;
  padding:3px 8px 5px 8px;
  display:inline-block;
  margin:22px 0px 0px 0px;
  width:100%;
  border-radius:0.5rem;
}

/* 記事 見出し(h3) */
.article-subsubtitle{
  font-family: "M+PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  font-weight:600;
  text-align:center;
  color:#6699cc;
  padding:5px 2px 5px 2px;
  display:inline-block;
  margin:22px 0px 0px 0px;
  width:fit-content;
  border-radius:0rem;
}

/* 記事 ボタン 要素全体 */
.article-btn-lists{
  width:100%;
  text-align:center;
}

/* 記事 ホームに戻る ボタン */
.article-back-btn{
  line-height:35px;
  display:inline-block;
  color:#ffffff;
  background-color:#6699cc;
  text-decoration:none;
  margin:16px 0px 16px 10px;
  padding:0px 10px 0px 10px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size:14px;
  vertical-align:top;
  border-radius:30px;
}
.article-back-btn a{
  text-decoration:none;
  color:#ffffff;
}
.article-back-btn :hover{
  filter: brightness(0.4);
}

/* 記事 YouTubeリンク要素 */
.youtube-link{
  width:100%;
  aspect-ratio: 16 / 9;
  margin:30px 0px 30px 0px;
}
.youtube-link iframe{
  width:100%;
  height:100%;
}

/* 記事 Instagaram リンク要素 */
.instagram-link{
  margin:20px 0px 10px 0px;
}
.instagram-link iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 記事 画像 */
.wp-block-image{
  width:100%;
}
.wp-block-image img{
  margin:20px 0px 0px 0px;
  border-radius:15px;
}
.wp-block-image a:hover{
  filter: brightness(0.4);
}

/* -------------------------------------footer-------------------------------------- */

footer{
  margin:20px 0px 0px 0px;
}

/* フッター */
.footer-contents{
  background-color:#000000;
  margin:0px 0px 0px 0px;
  padding:15px 0px 0px 0px;
}

/* フッター 要素全体 */
.footer-menu-lists{
  display:inline-block;
  text-align:center;
  width:100%;
}

/* フッター 要素 */
.footer-menu-list{
  display:inline-block;
  text-align:center;
  color:#ffffff;
  font-family: "Gabarito", sans-serif;
  font-weight:900;
  font-size: 18px;
  background-color:#000000;
  text-align:center;
  margin:0px 5px 0px 5px;
}
.footer-menu-list a{
  text-decoration:none;
  color:#ffffff;
}
.footer-menu-list :hover{
  color:#ffbd59;
}

/* フッター コピーライト */
.footer-copyright{
  width:100%;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 12px;
  font-weight:900;
  text-align:center;
  display:inline-block;
  color:#ffffff;
  background-color:#000000;
  padding:20px 0px 20px 0px;
}

/* フッター コピーライト 文字 */
.footer-copyright-text{
  display:inline-block;
}
.footer-copyright-text a{
  text-decoration:none;
  color:#ffffff;
}
.footer-copyright-text :hover{
  filter: brightness(0.6);
}


/* mobile版 表示 終了 */
}