@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 全体 */
:root {
  --main_color: #35428E;
  --sub_color: #ff7bac;
}

.article h2 {
  color: var(--main_color);
  background: none;
  position: relative;
  padding: 15px 0 15px 40px;
}
.article h2:before,.article h2:after {
  position: absolute;
  content: '';
  height: 100%;
  top: 0;
}
.article h2::before {
  width: 20px;
  left: 0;
  background: var(--main_color);
}
.article h2::after {
  width: 10px;
  left: 20px;
  background: var(--sub_color);
}
.article h3 {
  color: var(--main_color);
  border: none;
  padding: 0;
}

/* ヘッダー - ナビゲーションメニュー */
.navi-in > ul li {
  width: calc(100% /6);
}
#navi .navi-in .current-menu-item a, #navi .navi-in a:hover {
  color: #fff;
  background: var(--main_color);
}
/* ヘッダー - モバイルメニュー */
.slicknav_menu {
  background: #fff;
}
.slicknav_btn {
  background-color: #fff;
  border: solid 1px var(--main_color);
  margin: 5px 5px 0 0;
}
.slicknav_menu .slicknav_menutxt {
  color: var(--main_color);
  font-size: 18px;
  text-shadow: none;
}
.slicknav_menu .slicknav_icon-bar {
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: var(--main_color);
}
.slicknav_nav {
  font-size: 1.1em;
  margin-bottom: 10px;
}
.slicknav_nav li {
  border-bottom: solid 1px #ccc;
}
.slicknav_nav li.current-menu-item a {
  background: var(--main_color);
}
.slicknav_nav a {
  font-weight: 600;
  color: var(--main_color);
  margin: 0;
}
.slicknav_nav li.current-menu-item a, .slicknav_nav a:hover, .slicknav_nav .slicknav_row:hover {
  color: #fff;
  background: var(--main_color);
  border-radius: 0;
}
.slicknav_nav .sub-menu > li {
  border: none;
  border-top: solid 1px #ccc;
}
.slicknav_item.slicknav_row {
  display: flex;
  align-items: baseline;
}

/* フッター */
#footer {
  border-top: solid 1px var(--main_color);
}

/* フッター - ロゴ */
.footer-bottom {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.footer-bottom-logo, #custom_html-2, #custom_html-3 {
  width: calc(100% - 60px);
  max-width: 964px;
  margin: 0 auto 60px;
}
.footer-bottom-logo, .footer-bottom-content {
  position: static;
  float: none;
  text-align: center;
}
.footer-bottom-logo img {
  height: 189px;
}

/* フッター - ロゴ下ウィジェット */
h3.footer-bottom-widget-title {
  font-size: 21px;
  text-align: center;
  color: var(--main_color);
}

/* フッター - ロゴ下ウィジェット - 問い合わせ・協賛企業 */

.footer_contact a,.footer_sponsor span {
  background: #fff;
  border-image: linear-gradient(90deg, #0069ff 1%, #35428E 100%) 1 / 3px stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--main_color) !important;
  font-size: 21px;
  font-weight: bold;
  height: 100%;
}

/* フッター - ロゴ下ウィジェット - 問い合わせ */
#custom_html-2.footer-bottom-widget h3 {
  display: none;
}
.footer_contact {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100%;
}
.footer_contact a {
  width: 470px;
  height: 60px;
  text-decoration: none;
}
.footer_contact a:hover {
  background: linear-gradient(270deg, #689ade 0%, #c8d2ea 0%, #2270df 100%);
  color: #FFFFFF !important;
}

/* フッター - ロゴ下ウィジェット - 協賛企業 */
.footer_sponsor_wrap {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.footer_sponsor {
  flex:0 0 calc((100% - 60px)/3);
  aspect-ratio: 5 / 1;
}

.footer_sponsor a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.footer_sponsor span {

  height: 100%;
}

/* メインコンテンツ - ページ見出し */
body .article-header {
  display: none;
}
/* メインコンテンツ - セクション */
section.wp-block-group {
  padding: 80px 0;
  margin-bottom: 0 !important;
  position: relative;
}
section.wp-block-group::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 300px;
  height: 1px;
  background: var(--main_color);
  transform: translateX(-50%);
}
section.wp-block-group:first-child {
  padding-top: 0;
}
section.wp-block-group:last-child {
  padding-bottom: 0;
}
section.wp-block-group:last-child::after {
  display: none;
}

/* メインコンテンツ - 問合せフォームCF7 */
.wpcf7 {
  margin: 0 !important;
  padding: 0;
  border: 0;
}
.wpcf7 form {
  margin: 0;
}
table.table_wpcf7 {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}
table.table_wpcf7 p {
  font-size: 14px;
}
.table_wpcf7 tr:not(:last-of-type) {
  border-bottom: dashed 1px #aaa;
}
th.table_wpcf7_th, td.table_wpcf7_td {
  border: none;
  padding: 0.5em;
  vertical-align: middle;
  background: #fff !important;
}
th.table_wpcf7_th {
  width: 24%;
}
.required {
  color: #fff;
  background: #d00;
  padding: 3px 5px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
}
.table_wpcf7_td .wpcf7-form-control {
  border: 1px solid var(--main_color);
}
.wpcf7 .wpcf7-submit, .wpcf7 .wpcf7-previous {
  -webkit-transition: all .3s;
  display: block;
  position: relative;
  width: 225px;
  height: 48px;
  margin: 30px auto 0;
  border: none !important;
  background: #f00;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  font-weight: bold;
  border-radius: 7px;
}
.wpcf7 .wpcf7-submit:hover, .wpcf7 .wpcf7-previous:hover {
  background: #444;
}

/* HP */
body.home {
  overflow-x: hidden;
}

/* HP アピールエリア */
.appeal {
  background-position: bottom;
  background-size: 113%;
}
.appeal-content {
  max-width: unset;
  background-color: transparent;
  margin: 0 auto;
  text-shadow: rgba(255, 255, 255, 1) 0px 4px 5px;
  color: var(--main_color);
  font-weight: bold;
  position: relative;
}
.appeal-message {
  font-size: 1.2em;
}
.appeal-message_sub {
  font-size: 27px;
}
.appeal-message_main {
  font-size: 44px;
}

/* HP イントロ */
.wp-block-group.hp_intro_about {
  margin-bottom: 80px;
}
/* HP ~とは */
section.wp-block-group.hp_about {
  padding-bottom: 0;
}
section.wp-block-group.hp_about::before {
  position: absolute;
  content: '';
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  background: #eaecf3;
  transform: translateX(-50%);
  z-index: -1;
}
section.wp-block-group.hp_about::after {
  display: none;
}
.hp_about_img {
  position: relative;
  width: 100vw;
  aspect-ratio: 2016 / 1062;
  max-height: 500px;
  left: calc(50% - 50vw);
  background: url(https://kitaku-commumore.org/wp/wp-content/uploads/2025/11/d9d109_1ba7f871b3004fdea8e804fc9bc98f22mv2.jpg) center / cover #ddd;
}

/* HP 代表 */
.hp_representative_img {
  position: relative;
  min-height: 300px;
  background: url(https://kitaku-commumore.org/wp/wp-content/uploads/2025/11/hp_nakamura.jpg) center / cover #ddd;
}

/* 活動報告P */
.activity {
  gap: 30px;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
    margin-bottom: 0px;
}
.activity_img {
  flex: 0 0 150px;
}
.activity_txt {
  flex: 1 auto;
}

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

/* アピールエリア */
.appeal {
  background-size: cover;
}
}

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

/* HP アピールエリア */
.appeal-message_sub {
  font-size: 18px;
}
.appeal-message_main {
  font-size: 25px;
}

/* フッター - ロゴ下ウィジェット - 協賛企業 */
.footer_sponsor {
  flex: 0 0 calc((100% - 30px)/2);
}
}

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

/* HP アピールエリア */
.appeal .appeal-in {
  min-height: 350px;
}
.appeal-message_sub {
  font-size: 15px;
}
.appeal-message_main {
  font-size: 18px;
}
	
/* フッター - ロゴ下ウィジェット - 協賛企業 */
.footer_sponsor {
  flex: 0 0 100%;
}
	
/* 活動報告P */
.activity {
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 20px;
}
.wp-block-image.activity_img {
  margin: 0;
}
.activity_txt {
  flex: 1 100%;
}
}