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

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

/**あとで消す
.mobile-header-menu-buttons {
	top: 28px!important;

}
あとで消すここまで*/

a:hover {
	text-decoration: underline;
	color: #000;
}

.mobile-menu-buttons .menu-caption,
.mobile-menu-buttons .menu-button:first-child,
.list-title,
.cat-label,
.entry-card .admin-pv,
h1.archive-title,
.pager-post-navi a figure,
.pager-post-navi a.prev-post .prev-post-title,
.pager-post-navi a.next-post .next-post-title,
.breadcrumb,
span.wpcf7-spinner,
a.cat-link.cat-link-1,
ul.content-contact label br,
.wpcf7 form .wpcf7-response-output,
#post-131 .article-footer.entry-footer,
#post-131 .entry-categories,
.list-more-button-wrap {
	display: none;
}

.mobile-header-menu-buttons{ 
	font-family: "Helvetica", "Helvetica Neue", "sans-serif", "neue-haas-grotesk-display", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", "sans-serif";
	font-weight: bold;
	font-style: normal;
	font-size: 21px;
	letter-spacing: -0.01em;
}

.entry-card-title,
.entry-title,
.article h1,
.cat-link,
.pagination a,
.copyright { 
	font-family: "Helvetica", "Helvetica Neue", "sans-serif", "neue-haas-grotesk-display", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", "sans-serif";
	font-weight: 200px;
	font-style: normal;
	letter-spacing: 0.0em;
}

.a-wrap:hover,
a.cat-link:hover {
	text-decoration: none;
	opacity: 0.6;
	background: #fbfaf9;
}


.fa {
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-color:#fff;
  -webkit-text-stroke-width:1px
}

body { text-align: center; }

/*フェードインアニメーションの指定*/
.entry-card,
.article {
    animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/*フェードインアニメーションの指定ここまで*/

.no-sidebar .content .main {
	background: none;
}

.article h2 {
	background: none;
}

#navi-menu-input:checked ~ #navi-menu-content {
	width: 300px;
}

#navi .navi-in a, #navi .navi-in a:hover,
.copyright {
	font-size: 12px;
}

.mobile-header-menu-buttons {
	box-shadow: none;
	background: rgba(251,250,249,0.7);
}

.mobile-menu-buttons .menu-content {
	background: #fbfaf9;
	text-align: right;
}

.mobile-header-menu-buttons {
	display: flex;
	bottom: auto;
	top: 0;
	justify-content: flex-end;
}

.mobile-menu-buttons .menu-button:nth-child(2) {
	font-weight: normal;
	padding-left: 16px;
	text-align: left;
}

.mobile-menu-buttons .menu-button:nth-child(3)  {
	width: 50px;
}

.menu-content .menu-drawer {
	padding-top: 60px;
}
.menu-content {
	transition: 1s ease-in-out;
}

.menu-drawer li {
	margin-bottom: 16px;
}

.menu-drawer a {
	font-size: 18px;
	text-align: left;
	padding: 0;
}

.menu-drawer a:hover {
	background: none;
   text-decoration: none;
   opacity: 0.6;
}

.menu-close-button {
	text-align: left;
}

.fa-times:before {
	content: "CLOSE";
   font-weight: normal;
   font-size: 12px;
   padding-left: 15px;
   font-family: "Helvetica Neue","Helvetica","Arial";
}

.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
	background: #fbfaf9;
}

.menu-drawer .sub-menu {
	padding-left: 16px;
}

.sub-menu li {
	margin-bottom: 2px;
}

.sub-menu li:first-child {
	margin-top: 12px;
}

.sub-menu a {
	font-size: 14px;
	padding: 4px 0;
}

.header-container-in.hlt-top-menu {
	display:none;
}

.fixed-header {
	box-shadow: none;
}

.header-container-in.hlt-top-menu {
	padding: 20px 4px;
}

.content {
	margin-top: 80px;
}

.main {
	padding: 0px 8px;
}

.article {
	max-width: 850px;
	margin: 0 auto;
}

.list-more-button {
	border-radius: 0;
	border: 2px solid #000;
}

.list-more-button:hover {
	background: #000;
	color: #fff;
	text-decoration: none;
}

.entry-title {
	margin-bottom: 2px;
}

.entry-categories-tags {
	text-align: left;
	margin-bottom: 0;
}

.cat-link {
	padding: 0px 4px 0px 0;
	position: relative;
	left: -5px;
	background: none;
	font-size: 15px;
	color: #333;
}

.cat-link:hover {
	color: #333;
	opacity: 1;
}

.cat-link .fa-folder:before {
	display: none;
}

/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}

/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*はみ出した部分を非表示 ※IE対策*/
}

/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}

.card-thumb img {
	aspect-ratio: 7/5;
   object-fit: cover;
}

.date-tags {
	margin: 0;
}

.eye-catch {
	margin: 0;
}

.entry-content {
	margin: 40px auto;
	letter-spacing: 0.08em;
}

.entry-card-title,
.entry-title,
.article h1 {
	font-size: 15px;
	font-weight: normal;
	text-align: left;
}

.entry-card-title, .entry-title, .article h1 {
	font-weight: 400;
}

.ect-3-columns .entry-card-wrap {
	padding: 0;
	margin: 0;
}
.ect-3-columns {
	justify-content: flex-start;
	flex-direction: row;
    gap: 0.5%;
}


.wp-block-image img {
	width: 100%;
	margin: 0 auto;
}

.pager-post-navi{
	flex-direction : row; 
}

.pager-post-navi a.prev-post,
.pager-post-navi a.next-post {
	flex-grow: 1;
	padding : 0; 
}

.pager-post-navi a:hover {
	text-decoration: none;
}

.fa-chevron-left:before {
	position: relative;
	left: -10px;
}

.fa-chevron-right:before {
	position: relative;
	right: -10px;
} 

.page .entry-title {
	max-width: 630px;
   margin: 0 auto;
   font-size: 18px;
   padding: 0px;
}

/* CONTACT ここから */

.content-contact {
	list-style: none;
	padding: 0;
	max-width: 630px;
	margin: 0 auto;
}

.content-contact li {
    border-bottom: solid #cbcbcb 1px;
	margin: 0;
	text-align: left;
}

.content-contact li p {
	margin: 0;
	padding: 0;
}

ul.content-contact label {
	display: flex;
   justify-content: flex-start;
   align-items: flex-start;
	padding: 18px 0px;
}

span.contact-label {
	flex-grow: 1;
   max-width: 110px;
   text-align: left;
}

span.wpcf7-form-control-wrap {
	padding-left: 8px;
	flex-grow: 2;
}

ul.content-contact li input,
ul.content-contact textarea {
	border: none;
	background: none;
	outline: none;
	padding: 0;
	cursor: pointer;
	font-size: 14px;
	font-family: "Noto Sans JP" ,sans-serif;
	letter-spacing: 0.2em;
}

ul.content-contact li input {
		height: 26px;
}

li.contact-submit {
	border: none;
	padding-top: 20px;
}

.wpcf7-not-valid-tip {
	color: #ca4040;
	font-size: 10px;
}

.button-submit {
	border: none;
   padding: 10px;
   width: 160px;
   background: #000;
	cursor: pointer;
}

input.wpcf7-form-control.has-spinner.wpcf7-submit {
	color: #fff;
}

/* CONTACT ここまで */

.go-to-top .go-to-top-button {
	background: none;
}

/*PAGINATION*/
.pagination-next {
	display: none;
}

.pagination a:hover {
	background: none;
}

.pagination .current {
	background: none;
	font-weight: bold;
}

.page-numbers {
	border: none;
}

.footer {
	margin-top: 200px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	a:hover {
		text-decoration: none;
	}
	
	span.navi-menu-icon.menu-icon {
		position: relative;
		top: 10px;
	}

	.ect-vertical-card.sp-entry-card-1-column .entry-card-wrap {
		padding: 0;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
		main.main, div.sidebar {
		padding: 0;
	}
	
	.content, .footer {
		margin-top: 100px;
	}
	
	.ect-3-columns {
		justify-content: space-around;
	}
	
	.page .entry-title {
		margin: 0 16px;
	}
	
	ul.content-contact {
		padding: 0;
		margin: 0;
	}
	
	.content-contact li {
	display: block;
	}
	
	ul.content-contact label {
		display: block;
		padding: 26px 0px 2px;
	}
	
	span.wpcf7-form-control-wrap {
		padding: 4px 0 0;
		display: block;
	}
	
	.entry-card-content, .related-entry-card-content {
		padding: 4px 0 50px;
	}
	
	.e-card-title {
		padding-left: 16px;
	}
	
	.entry-card-title,
	.entry-title, .article h1 {
		margin: 0;
		padding: 8px 16px 0;
	}
	
	.entry-categories-tags {
		padding: 0 16px;
	}
	
	.entry-content,
	.pager-post-navi {
		padding: 0 16px;
	}

}

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