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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');

body {
    font-family: 'Sawarabi Mincho', sans-serif;
	background-color: #FFF !important;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
.header {
    height: 740px;
    padding-top: 300px;
    font-family: serif;
    /* font-size: 20rem; */
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.header {
    height: 60vh;
    padding-top: 20vh;
    font-family: serif;
    /* font-size: 20rem; */
}
}

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



.site-name-text {
    font-size: 58px;
}

.navi {
    background-color: var(--cocoon-white-color);
    background: linear-gradient(to right, #039BE5, #29B6F6);
    opacity: 0.7;
}
.sub-menu .item-label {
    color: #000;
}

.site-name-text {
  text-align: center;
  margin-top: 50px;
  animation-name: fade;
  animation-duration: 7s;
}
.tagline {
  animation-name: fade;
  animation-duration: 7s;
}
@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.navi {
    width: 100vw;
    background-color: var(--cocoon-white-color);
    background: #000;
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
	z-index:1;
}
/*著者情報を消す*/
.page .author-info {
display: none;
}
/*著者情報を消す*/
.post .author-info,
.date-tags{
display: none;
}
@media screen and (min-width: 768px){

	.navi {
	z-index:1;
}
	}

.page-id-36 .header,
	.page-id-38 .header,
	.page-id-40 .header,
	.page-id-42 .header,
	.page-id-267 .header,
	.page-id-162 .header {
    height: 300px;
    padding-top: 100px;
    font-family: serif;
    /* font-size: 20px; */
}

@media screen and (max-width: 480px){
#header .site-name-text {
    font-size: 36px;
}
		input[type=submit] {
    -webkit-appearance: none;
    border: 1px solid var(--cocoon-thin-color);
    background-color: #039BE5 !important;
    color: #FFFFFF !important;
    border-radius: 25px !important;
    max-width: 400px;
    margin: 40px auto 0;
    text-align: center;
    display: block;
    font-size: 20px;
}
}
@media screen and (min-width: 768px){
.calen_wrap{
	display:table;
	width:300px;
		margin: 30px auto;
}
	.calen_inner{
	display:table-cell;
	width:100px;
		padding-right:20px;
}
	.tagline {
    text-align: center;
    font-size: 24px;
    margin: -0.6em 1em;
}
	
	.entry-content {
		text-align:center;
		font-size: 1.3rem;
		    margin-top: 50px;
	}
	.wpcf7 {    text-align: left;
    width: 50%;
    margin: 0 auto;
}

	figure img {
		margin:20px auto;
	}
	
	.wp-block-preformatted {
    overflow-x: hidden; 
		font-family: 'Sawarabi Mincho', sans-serif;
	}
	.popup-gallery img {
		height:150px;
		width:auto;
	}
	.home .navi {
  animation: fadein-top 5s ease-out forwards;
}

@keyframes fadein-top {
  0% {
    /*opacity: 0;*/
    transform: translateY(-100px); /* 開始時はマイナス指定 */
  }
  100% {
    /*opacity: 1;*/
    transform: translateY(0); /* 終了時の位置をデフォルトに */
  }
}
@media screen and (max-width: 767px){
.calen_wrap{
	display:block;
	width:100%;
}
	.calen_inner{
	display:block;
	width:100%;
}
		.tagline {
    text-align: center;
    font-size: 16px;
    margin: -1.6em 1em;
}
	#header .site-name-text {
    font-size: 32px;
}
	.logo-text {
    padding: 0px 0 50px;
    font-size: 1em;
}
pre {
    overflow: hidden !important;
    padding: 10px;
}
	.popup-gallery {
    margin: 0 auto;
    text-align: center;
}
	.popup-gallery img {
    height: 99px;
    width: auto;
}
		input[type=submit] {
    -webkit-appearance: none;
    border: 1px solid var(--cocoon-thin-color);
    background-color: #039BE5 !important;
    color: #FFFFFF !important;
    border-radius: 25px !important;
    max-width: 400px;
    margin: 40px auto 0;
    text-align: center;
    display: block;
    font-size: 20px;
}
	}

/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 2s;
	transform: translateY(120px);
}

/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#navi a:hover {
	color:#000;}
	

/*追従*/
	.js-fixed-area {
position: fixed;
    top: 54px;
    right: 0;
    padding: 6px;
		    z-index: 1;
    
}
.js-fixed-elm {
	background: #039BE5 !important;
    color: #fff;
    padding: 8px;
	opacity: 0.8;
}
	.js-fixed-elm a {
        /*background: #555;*/
    color: #fff;
}
.js-fixed-elm.is-fixed {
  color:#FFF;
}
	
		.animation_rside {
  animation: fadein-rside 6s ease-out forwards;
}

@keyframes fadein-rside {
  0% {
    /*opacity: 0;*/
    transform: translateX(1000px); /* 開始時はマイナス指定 */
  }
  100% {
    /*opacity: 1;*/
    transform: translateX(0); /* 終了時の位置をデフォルトに */
  }
}

	/*追従*/
		/*スタート*/
	.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}
		/*スタート*/
	.navi {
    background: linear-gradient(to right, #039BE5, #039BE5);
		opacity: 0.9;
}
	#footer {
    color: white;
    background: #039BE5;
}
	#footer #navi-footer a {
    color: white;
    background: #039BE5;
}
	#go-to-top .go-to-top-button {
    width: 56px;
    height: 56px;
    background-color: #039BE5;
    border-radius: 50%;
		opacity: 0.8;
}
.footer-bottom-logo img {
    height: 70px;
    width: auto;
}
	.entry-content p {margin-bottom:0 !important;}
	.eye-catch {margin: 20px auto 0; }
	
	.article-footer {
		    margin-top: 13vw;
    font-size: 13px;
	}
	
		input[type=submit] {
    -webkit-appearance: none;
    border: 1px solid var(--cocoon-thin-color);
    background-color: #039BE5 !important;
    color: #FFFFFF !important;
    border-radius: 25px !important;
    max-width: 400px;
    margin: 40px auto 0;
    text-align: center;
    display: block;
    font-size: 20px;
}