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

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

/***********************************
 * 
 *  全ページ 共通
 * 
 ***********************************/

/* PCヘッダーメニュー（トップページ以外） */
.skin-grayish:not(.front-top-page) .header-container { /* 背景色 */
	background-color: #ffa500;
	color: #fff;
}
ul.menu-pc li a {
	color: #fff;
}
ul.menu-pc li a:hover {
	scale: 1.2;
	color: #fff;
}
.skin-grayish .navi-in .search-menu-icon span::before { /* 右上 検索ボタン */
	color: #fff;
}


/* モバイルヘッダー */
@media screen and (max-width: 1023px){
	.skin-grayish .mobile-header-menu-buttons.mobile-menu-buttons { /* モバイルヘッダーメニュー */
		background-color: #ffa500;
	}
	.skin-grayish .mobile-menu-buttons .menu-button { /* モバイルヘッダーメニュー 文字色 */
		color: #fff;
	}
	.navi-menu-close-button { /* モバイルスライドメニュー ×ボタン */
		color: #ffa500;
	}
	.skin-grayish .search-submit { /* モバイルスライドメニュー 検索ボタン */
		color: #ffa500;
	}
}


/* フッター */
.footer-bottom-logo {
	display: none;
}
.widget-footer-right-title { /* フッター：右 */
	margin-top: 0 !important;
}

.skin-grayish .copyright { /* コピーライト */
	letter-spacing: 1.5px;
}

/* モバイルフッターボタン　非表示 */
.mobile-footer-menu-buttons {
	display: none !important;
}


/* h2 */
.article h2 {
	margin-top: 3em;
}

/* h4 */
.article h4 {
	margin-bottom: 0.5em;
}


/* サイドバー：検索ボタン */
.wp-block-search__button {
	background-color: #ffa500;
	border: 1px solid #ffa500;
}
.wp-block-search__button:hover {
	background: #32373c;
}

/* ボックスメニュー */
.box-menu .box-menu-icon {
	color: #ffa500;
}



/* 固定ページの投稿日・更新日・投稿者を非表示 */
.page .date-tags,
.page .author-info {
    display: none;
}

/***********************************
 * 
 *  トップページ
 * 
 ***********************************/

/* ヘッダー画像：トップページ */
.skin-grayish .header-in .logo-header img {
	max-width: 100%;
	max-height: 60vh;
}
@media screen and (max-width: 480px){
	.skin-grayish .header-in .logo-header img {
		max-width: 100%;
		max-height: 100vh;
	}
}

/* ヘッダー画像・文字 */
.skin-grayish .header-in .site-name-text:hover {
	text-decoration: none;
	color: #535252;
	scale: 1.0;
}
.tagline {
	background: #eee;
	font-size: 15px;
	font-weight: 600;
	opacity: 0.8;
	border-radius: 15px;
}

/* スクロールアニメーション */
.skin-grayish.front-top-page .skinadd-topmv-scroll { /* "scroll"文字 */
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	bottom: 15px;
}
.skin-grayish.front-top-page .skinadd-topmv-scroll::before { /* 下矢印 */
	border-width: 0px 0px 4px 4px;
	border-color: #ffa500;
}



@media screen and (max-width: 960px){
	
	/* モバイル：ヘッダーロゴ */
	.skin-grayish.front-top-page .header .header-in { 
		margin-top: 43vh;
	}
	
}

/* ヘッダーメニュー */
.skin-grayish #navi-in {
	background-color: #ffa500;
	opacity: 1.0;
}





/***********************************
 * 
** 　こうだ★ランド：タイトル・詳細の丸
 *
 ***********************************/

.land-detail   {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    margin-top: 30px;
}
.land-circle {
    margin-right: 20px;
    border: 2px solid #ffa500;
	background: #ffd27f;
	opacity: 0.8;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 90px;
    flex: 0 0 90px;
    height: 90px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.land-circle-s {
    color: #000;
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 1.2;
    text-align: center;
}
.land-day-text-s,
.land-play-text-s {
	font-size: 1.2rem;
}
.land-text-s {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

/* スマホ： */
@media screen and (max-width: 480px){
	.land-circle {
    	-ms-flex: 0 0 60px;
    	flex: 0 0 60px;
   		height: 60px;
	}
	.land-circle-s {
    	font-size: 15px;
    	font-size: 1.3rem;
    	letter-spacing: .12em;
    	line-height: 1.2;
	}
}

/***********************************
 * 
** 　こうだ★ランド：協賛
 *
 ***********************************/

ul.land-sponsor,
ul.land-shop { /* 出店情報にもスタイル反映 */
	display: flex;
  	flex-wrap: wrap;
  	padding: 0;
  	margin: 2em 0;
  	list-style-type: none;
}
ul.land-sponsor li,
ul.land-shop li { /* 出店情報にもスタイル反映 */
  	padding: 10px;
	margin: 0;
  	margin-right: 1%;
  	margin-bottom: 2px;
  	border: 1px solid #ccc;
  	box-sizing: border-box;
	background: #fafafa;
	text-align: center;
}
ul.land-sponsor1 li {
	width: 100%;
	padding-right: 0;
    font-size: 1.1rem;
}
ul.land-sponsor0 li { /* 臨時追記のため、sponsor0 */
    font-size: 1.3rem;
}
ul.land-sponsor2 li {
	width: calc( 99% / 2 );
	font-size: 0.9rem;
}
ul.land-sponsor3 li {
	width: calc( 98% / 3 );
	font-size: 0.85rem;
}
ul.land-sponsor4 li {
	width: calc( 97% / 4 );
	font-size: 0.75rem;
}
ul.land-sponsor1 li,
ul.land-sponsor2 li:nth-child(2n),
ul.land-sponsor3 li:nth-child(3n),
ul.land-sponsor4 li:nth-child(4n) { /* 各右端のmargin消去 */
	margin-right: 0;
}
ul.land-sponsor li a {
	display: block;
	text-decoration: none;
	height: 100%;
	width: 100%;
}
ul.land-sponsor li a:hover {
	color: #ffa500;
}

/* スマホ */
@media screen and (max-width: 480px){
	
	/* PC：2カラム→1カラムへ */
	ul.land-sponsor2 li {
		width: 100%; 
		margin-right: 0;
		padding: 5px;		
	}
	/* PC：3・4カラム→2カラムへ */
	ul.land-sponsor3 li,
	ul.land-sponsor4 li {
		width: calc( 99% / 2 ); 
		padding: 3px;			/* paddingは小さく */
	}
	ul.land-sponsor3 li:nth-child(3n),
	ul.land-sponsor4 li:nth-child(4n) { /* PCでの右端marginを一旦リセット（3・4カラム時の） */
		margin-right: 1%;
	}
	ul.land-sponsor3 li:nth-child(2n),
	ul.land-sponsor4 li:nth-child(2n) { /* 2カラム用に */
		margin-right: 0;
	}
}



/***********************************
 * 
** 　こうだ★ランド：出店情報
 *
 ***********************************/

/* 出店情報：スポンサー情報のcss流用する形で */
ul.land-shop li {
	width: calc( 99% / 2 );
	font-size: 0.9rem;
	padding: 5px;
}
ul.land-shop li:nth-child(2n) {
	margin-right: 0;
}
/* スマホ */
@media screen and (max-width: 480px){
	ul.land-shop li {
		width: 100%;
		margin-right: 0;
	}
}


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

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

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