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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
/* ---reset ---*/
.article ul, .article ol{
	padding: 0;
}
navi-in > ul li.menu-item {
	width: 100% !important;
}
/* --- headerfix表示 --- */
#header-container {
	position: fixed;
	width: 100%;
	z-index: 99999;
}
/*----------------------------
　g_navi
*----------------------------*/
/* // MENUボタン // */
#overlay-button {
	position: absolute;
	/* right: 2em;
	top: 1.5em; */
	padding: 26px 11px;
	z-index: 99999;
	cursor: pointer;
	user-select: none;
	right: 5em;
	top: 2em;
}
#overlay-button span {
	height: 4px;
	width: 35px;
	border-radius: 2px;
	background-color: white;
	position: relative;
	display: block;
	transition: all .2s ease-in-out;
}
#overlay-button span:before {
	top: -10px;
	visibility: visible;
}
#overlay-button span:after {
	top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
	height: 4px;
	width: 35px;
	border-radius: 2px;
	background-color: white;
	position: absolute;
	content: "";
	transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
	background: #fff;
}
input[type=checkbox] {
	display: none; 
}
input[type=checkbox]:checked ~ #nav_overlay {
	visibility: visible; 
}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
	background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
	transform: rotate(45deg) translate(7px, 7px);
}
input[type=checkbox]:checked ~ #overlay-button span:after {
	transform: rotate(-45deg) translate(7px, -7px);
}
/* -// MENU隠す＆ふわっと出るアニメーション // */
/* アニメーション前のメニューの状態 */
ul.menu-header{
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s linear;
}
/* アニメーション後のメニューの状態 */
ul.menu-header.is-active{
  pointer-events: auto;
  opacity: 1;
}
/* // 画面全体にMENU表示 // */
ul.menu-header{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #555;
}
/* --- 降りてくるアニメーション＆is-fixedついた後の設定 --- */
.is-fixed {
	width: 100%;
	position: fixed;
	z-index: 100;
	animation-name: fadein;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	margin-top: -20px;
}
@keyframes fadein {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	100% {
		opacity: 1;
		transform: translateY(20px);
	}
}
li.menu-item{
	width: 100% !important;
	height: auto;
	padding: .5em 1em;
	text-align: center;
	color: #fff;
	box-sizing: border-box;
}
/*----------------------------
　header_logo
*----------------------------*/
/* 元の設定をreset */
a.site-name.site-name-text-link {
	padding: 0;
}
.is-fixed .header-container-in.hlt-top-menu .logo-header {
	max-height: 100%;
}
/* デザイン */
.header-container-in.hlt-top-menu .logo-header img{
	/* padding: 1em; */
	max-height: 120px;
	filter: drop-shadow(0px 0px 6px #fffdf2);
	margin: 5px 10px;
}
/*----------------------------
　reset
*----------------------------*/
body:not(.page.home) #content,
.article p{
	margin-top: 0;
}
body:not(.page.home) #main {
	border-radius: 0;
}
/*----------------------------
　footer
*----------------------------*/
.copyright {
	font-family: "A1明朝",'Shippori Mincho',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	letter-spacing: 0.2em;
}
/*----------------------------
　SNS_follow
*----------------------------*/
.sns-follow {
	position: fixed;
	margin: 0;
	bottom: 5px;
	right: 0;
}
.sns-follow-buttons.sns-buttons {
	display: block;
}
.sns-buttons a {
	background: transparent;
}
/*----------------------------
　一括指定
*----------------------------*/
.dropshadow {
	filter: drop-shadow(0px 0px 6px #fffdf2);
}
.flex {
	display: flex;
}
.space-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.align_center {
	align-items: center;
}
.vertical {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.img_left {
	flex-direction: row-reverse;
}
/* fade up */
.fade_up {
	animation-name: fadeup;
	animation-duration: 2s;
}
@keyframes fadeup {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* PCのみ */
@media screen and (min-width: 1024px){
	header#header {
		margin: 5px 0 0 60px;
	}
	body:not(.page.home) #main {
		width: 800px;
		margin: auto;
		border-radius: 0;
	}
	.sns-follow {
		right: 60px;
	}
	/*----------------------------
	 　一括指定
	*----------------------------*/
	.pc_vertical {
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
	.pc_br {
		display: block;
	}
}
/*1023px以下 タブレット横*/
@media screen and (max-width: 1023px){
	/* 元の設定をリセットしてモバイルでもg_navi表示 */
	.navi-in > .menu-header {
		display: flex !important;
	} 
	/* ヘッダーのロゴサイズ調節 */
	.header-container-in.hlt-top-menu .logo-header img {
		max-height: 100px ;
	}
	/* ロゴの初期設定リセット */
	.site-name-text-link {padding: 0;}
	.logo {text-align: inherit;}
	/* MENUボタン */
	#overlay-button {
		right: 10px !important;
		top: 10px !important;
	}
	/* スクロール後のヘッダー */
	.is-fixed img.site-logo-image.header-site-logo-image {
		max-height: 70px;
	}
	.is-fixed {
		background: rgba(7,35,59,0.9) !important;
		border-bottom-left-radius: 80px 20px;
		border-bottom-right-radius: 80px 20px;
	}
	/* トップページ以外に反映させる */
	body:not(.page.home) #content {
		padding-top: 120px;
	}
	body:not(.page.home) .sns-buttons a {
		color: #07233b;
	}
	/*----------------------------
	 　一括指定
	*----------------------------*/
	.sp_br {
		display: block;
	}
}

/*834px以下　タブレット以下*/
@media screen and (max-width: 834px){
	.sp_vertical {
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
}

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