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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
** サイト全体をふわっと表示させる
************************************/
body {
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }

/************************************
** フォント
************************************/
	.c-text11 { font-size: 1.1rem; }
	.c-text12 { font-size: 1.2rem; }
	.c-text13 { font-size: 1.3rem; }
	.c-text14 { font-size: 1.4rem; }
	.c-text15 { font-size: 1.5rem; }
	.c-text16 { font-size: 1.6rem; }
	.c-text16r { font-size: 1.6rem; }
　　.c-text18 { font-size: 1.8rem; }
	.c-text20 { font-size: 2.0rem; padding-bottom: 0; margin-bottom: 0; }
	.c-text22 { font-size: 2.2rem; }
	.c-text24 { font-size: 2.4rem; }
	.c-text26 { font-size: 2.6rem; }

@media screen and (max-width: 480px) {
	.c-text16 { font-size: 1.2rem; padding-bottom: 0; margin-bottom: 0; }
	.c-text26 { font-size: 1.8rem; }
	.c-text16r { font-size: 1rem; }
}
/************************************
** 余白
************************************/
.u-ptb50 { 
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}
@media screen and (max-width: 480px) {
	.u-ptb50 { 
		padding-top: 20px !important;
		padding-bottom: 20px !important;
}
}
/*	Colors
===================================================== */

	/* cRed:Red, cGrey:Grey  */

		.u-cRed-light	{ color: #FFCCCC; }
		.u-cRed 				{ color: #FF0000; }
		.u-cRed-dark 		{ color: #990000; }
		
		.u-cGrey-light 	{ color: #F5F5F5; }
		.u-cGrey			 	{ color: #666666; }
		.u-cGrey-dark	 	{ color: #333333; }


		/* background color */
		
		.u-bgcWhite			{ background-color: #FFFFFF; }
		
		.u-bgcRed-light 	{ background-color: #FFCCCC; }
		.u-bgcRed 			{ background-color: #FF0000; }
		.u-bgcRed-dark 		{ background-color: #990000; }
		
		.u-bgcGrey-light 	{ background-color: #F5F5F5; }	
		.u-bgcGrey 			{ background-color: #666666; }
		.u-bgcGrey-dark 	{ background-color: #333333; }

/************************************
** ボタン装飾
************************************/
.wp-block-button__link {
	background-color: #132a4f !important;
	box-shadow: 0 5px 5px -5px rgba(0,0,0,0.5);
}
.wp-block-button__link:hover {
	background-color: #7e292d !important;
	color: #FFFFFF !important;
}	

@media screen and (max-width: 834px){
.wp-block-button {
font-size: 80%;
}
.is-layout-flex {
	gap:10px 10px !important;
}
}

/************************************
ヘッダーモバイルボタン
************************************/
/*サイドバーメニューを左から右に表示*/
.navi-menu-content {
	left: auto;
	right: 0;
	transform: translateX(105%);
	min-width: 90%
}
/*文字の色を変える（背景白）*/
.navi-menu-button.menu-button {
	color: #fff;
	background-color: #132a4f;
}
/*スライドメニュー背景色、文字色、フォントサイズ変更 */
.menu-content {
	background-color: #132a4f;
}
.menu-content li a {
	color: #ffffff;
}
.mobile-menu-buttons .menu-caption {
	font-size: 12px;
}

/************************************
**モバイルスライドインメニュー
************************************/
.navi-menu-content{
	background-color: rgba(7,32,61,0.80);
	transform: translateX(101%);
	min-width: 90%
}
span.fas.fa-times::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 16px;
	vertical-align: middle;
	content: "\f00d";/*color:#90C31F;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
	/*background-color: #fff;*/
	border-bottom: 1px dotted #fff;
	font-size:1.2em;
	text-align:left;
	color:#fff;
	margin-bottom:1em;
	padding-left: 7px;
	line-height:3em;
	content: "Contents";
	display: inline-block;
	width: 100%;
}
.menu-drawer li {
	padding: 2px;
	border-top:1px dotted #001319; 
}
.menu-drawer li a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content : "\f105";
	margin:0 .5em 0 0;
}
.menu-drawer a{
	/*font-size:1.3em;
	background-color:#ffffff;*/
	/*color:#545454;*/
	margin: .3em 0;
}
.menu-drawer .sub-menu {
	padding:0;
}
.menu-drawer .sub-menu li a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content : "\f105";
	margin:0 .5em 0 1em;
}
/* サイドバーの×ボタン */
.menu-close-button {
  margin-right: 8%;
  text-align: right;
}

/*ロゴの位置変更*/
/*834px以下*/
@media screen and (max-width: 834px){
.logo-menu-button img {
    text-align: left !important;
	margin: 0 0 0 10px !important;
}
}

/************************************************
 トップへ戻るボタン カスタマイズ
*************************************************/

#go-to-top {
	right: -20px ; /*右からの位置*/
	bottom: 20px; /*下からの位置*/
}
.go-to-top-button {
	width: 60%;
	height: auto;
}

/************************************
フッター設定
************************************/
#footer {
	padding-bottom: 50px;
}

/************************************
見出し設定
************************************/
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/************************************
** ■見出しカスタマイズ（h1-6）
************************************/
/*見出し初期化
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ 
  padding: 0;
  margin: 0;
  font-size: medium;
  border-collapse: separate;
  border-spacing: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
  position:relative;
}*/
/*フロントページの見出し2*/
.home.page h2 {
	border: none;
	background-color: none;
	background-image:url(https://seiryo-h.net/wp/wp-content/uploads/2023/01/h2_home.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	color: #000000;
	text-align: center;
}
@media screen and (max-width: 834px){
	.home.page h2 {
		padding-top: 5%;
		padding-bottom: 5%;
	}
}
/*下層ページの見出し1*/
.article h1 { 
  letter-spacing: 1px; /*文字間隔*/
  margin: -8px -8px 50px -8px;
  padding: 9px 10px 9px 10px;
  border-bottom: 3px solid #7e292d; /*アンダーラインの太さとカラー*/
  line-height: 35px; /*高さ*/
	/*background-image:url(https://seiryo-h.net/wp/wp-content/uploads/2023/02/h1_bg.png);*/
	background-position: right 10px  center;
	background-repeat: no-repeat;
    }
@media screen and (max-width: 834px) {
	.article h1 {
		background-size: 35%;
        background-position: right 5px bottom 7px;
		margin-bottom: 30px;
	}
}
/*下層ページの見出し2*/
.article h2 {
	border-bottom: 2px solid #132a4f;
	background-color: #fff;
	background-image:url(https://seiryo-h.net/wp/wp-content/uploads/2023/01/h2_common-2.jpg);
	/*background-position: bottom right;*/
	background-repeat: repeat;
	color: #000000;
}
@media screen and (max-width: 834px) {
	.article h2 {
        background-position: bottom right -200px;
		/*background-size: 30%;*/
		margin-bottom: 30px;
	}
}
/************************************
** フロントページ装飾
************************************/
/*コンテンツバナー部分の背景*/
.haikei {
	/*background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/01/bg_home.jpg");-*/
	background-color: #e6e6eb;
	margin: 0 calc((100% - 100vw) / 2);
	padding: 45px 29px 1em;
	margin-bottom: 30px;
}
.haikei > p,
.haikei > div,
.haikei > h3 {
	margin-left: auto;
	margin-right: auto;
	max-width: 1142px;
}
@media screen and (max-width: 1202px) {  
  .haikei > h2 {
    padding: 25px calc((100vw - 100%) / 2) 15px;
  }
}
@media screen and (max-width: 768px) {  
  .haikei {
    padding: 50px 10px 1em;
  }
  .haikei .column-wrap {
    text-align: center;
  }
}
@media screen and (max-width: 480px) {  
  .haikei > h2 {
    padding: 10px calc((100vw - 100%) / 2) 8px;
  }
}
/************************************
フロントページの4つのボタンのタブレットの大きさ調整
************************************/
@media screen and (min-width:481px) and (max-width: 781px){
	.wp-container-3,
	.wp-container-7 {
		width: 500px;
		margin-left: auto;
		margin-right: auto;
}
}

/************************************
** アピールエリア
************************************/
/*フロント固定ページのみアピールエリアを非表示*/
.home.page #appeal {
	display: none;
}
@media screen and (max-width: 480px) {
/*#appeal {
	height: 100px;
}*/
}
/*各ページの画像設定*/
.page-id-16 .appeal {/*最新情報*/
background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/02/appeal-2.jpg");
}
.page-id-76 .appeal { /*同窓会概要*/
 background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/01/appeal-4.jpg");
}
.page-id-79 .appeal { /*学校概要*/
 background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/01/appeal-7.jpg");
}
.page-id-90 .appeal { /*校訓・教育方針*/
 background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/01/appeal-3.jpg");
}
.page-id-93 .appeal { /*沿革*/
 background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/01/appeal-1.jpg");
}
.page-id-95 .appeal { /*卒業生データ*/
 background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/01/appeal-5.jpg");
}
.page-id-82 .appeal { /*在校生*/
 background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/01/appeal-6.jpg");
}
.page-id-86 .appeal { /*進路状況*/
background-image: url("https://seiryo-h.net/wp/wp-content/uploads/2023/01/appeal-8.jpg");
}

/************************************
** Google Maps埋め込み時に左の吹き出し（ポップ）を消す
************************************/
#map {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
#map iframe {
  width: 100%;
  height: 760px;
  margin-top: -170px;
}

/************************************
** 表のカスタマイズ
************************************/
/*th左寄せ*/
th {
    text-align: left;
    color: #132a4f
}

/************************************
** 同窓会概要
************************************/
.gaiyo {
    background-image: url(https://seiryo-h.net/wp/wp-content/uploads/2023/01/bg_gaiyo.jpg);
	background-position: bottom -400px center;
	background-repeat: no-repeat;
	padding: 8% 15%;
	color: #fff;
	height: 800px;
}
/*480px以下*/
@media screen and (max-width: 480px){
.gaiyo {
 	background-position: top 10% center;
	background-repeat: no-repeat;
	padding: 10%;
	height: 600px;
}
}
/************************************
** 会長あいさつ　名前のフォント
************************************/
.mincho {
    font-family: 'Yuji Syuku', serif;
}
.mincho p {
    margin-bottom: 3%;
    padding-bottom: 0;
}
@media screen and (max-width: 480px) {
.mincho p {
    margin-bottom: 8%;
}
}