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

:root {
	--color_red: #E50111;
}

.main {
	background-color: transparent!important;
}

.card-thumb img {
	border-radius: 10px;
	aspect-ratio: 4/3;
}

a:hover {
	color: var(--color_red) !important;
}

.top-category-section li h3:hover  {
	color: var(--color_red) !important;
}

.sns-share.ss-high-and-low-cl a .button-caption.button-caption, .sns-share.ss-high-and-low-lc a .button-caption.button-caption {
	display: none;
}

.related-entry-card-snippet {
	line-height: 2;
}

/************************************
** um_arigatonet-box
************************************/

.um_arigatonet-box {
  background: #FFF7D1;
  padding: 30px 20px;
  display: flex;
  border-radius: 10px;
}

.um_arigatonet-box_title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.um_arigatonet-box_title h2 {
  margin-right: 10px;
}

.um_arigatonet-box_title span {
  color: #E50012;
  font-weight: bold;
  letter-spacing: .075em;
}

.um_arigatonet-box_caption {
  margin-right: 20px;
}

.um_arigatonet-box_caption p {
	font-size: 14px !important ;
  line-height: 2;
  letter-spacing: .075em;
}


.um_arigatonet-box_figure img {
  width:100%;
  height: auto;
}
.um_arigatonet-box_btnWrap {
	margin-top: 20px;
}

.um_arigatonet-box_btn {
	font-size: 14px ;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: .8rem 2.6rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #212529;
  border-radius: 0.5rem;
	color: #fff;
  background-color: var(--color_red);
  border-bottom: 5px solid #A6000D;
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

.um_arigatonet-box_btn:hover {
	margin-top: 3px;
  color: #fff !important;
  background: var(--color_red);
  border-bottom: 2px solid #A6000D;
}

@media screen and (max-width: 834px){
  .um_arigatonet-box {
    display: block;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
  }

  .um_arigatonet-box img {
  display: none;
  }


  .um_arigatonet-box_title {
    display: block;
  }

  .um_arigatonet-box_title h2 {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .um_arigatonet-box_caption {
    margin-right: 0;
    margin-bottom: 20px;
  }

}

/************************************
** slide in menu
************************************/

.menu-item-ttl {
	background: var(--color_red);
	width: 100%;
	display: block;
	padding: .4em 12px;
	border-radius: 5px;

}

.menu-drawer li:first-child a {
	padding: 0 0 6px;
	color: #fff;
	font-weight: bold;
	letter-spacing: .2rem;
	pointer-events: none;

}

.menu-drawer li:not(:first-child) a {
	font-size: 14px;
	padding-left: 24px;
	position: relative;
	border-bottom: solid 1px #f7f7f7;
}

.menu-drawer li:not(:first-child) a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(229,1,17,1)'%3E%3Cpath d='M22 8V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V7H21C21.5523 7 22 7.44772 22 8ZM12.4142 5H2V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
	display: block;
	width: 16px;
	height: 16px;
	transform: translateY(-50%)
}

.widget_categories ul li a .post-count {
	color: #adadad;
}

.item-label-inner {
	position:relative;
}

.item-label-inner::before {
	position: absolute;
	content:attr(data-en);
	top:-20px;
	left:50%;
	transform:translatex(-50%);
	font-size:16px;
}

/************************************
** swiper
************************************/

.custom-top-slider {
  padding: 0 10px;
}

.custom-top-slider .swiper-slide {
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  text-align: center;
}

.swiper-slide {
	border-radius: 0!important;
}

.swiper-slide img {
	border-radius: 10px;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
}

.slide-title {
  margin-top: 10px;
  font-size: 14px;
}

.swiper-outer {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-bottom: 80px;
	margin-bottom: -120px;
}

.swiper-wrapper {
	padding-left: 2.2vw;
}

.swiper-slide {
	background-color: transparent!important;
}

.swiper-slide a {
	text-decoration: none;
	color: #333;
}

.swiper-caption .slide-title {
	text-align: left;
	font-size: 16px;
	margin-bottom: 14px;
	padding-bottom: 7px;
	line-height: 1.4;
	letter-spacing: .2em;
	max-height: 4.2em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: 64px;
}

.slide-date-category,
.slide-date-time {
	font-size: 11px;
}

.slide-date-category svg,
.slide-date-time svg {
	width: 14px;
}

.slide-date-category svg {
	fill: var(--color_red);
	margin-right: 6px;
}

.slide-date-category {
	display: flex;
	align-items: flex-start;
}

.slide-date-category .slide-title {
	margin-top: 0;
}

.slide-date-category .cat-name {
	display: inline-flex;
	justify-content: center;
	color: var(--color_red);
	padding: .2em .75em;
	background: #ffc9cc;
	border-radius: 4px;
	margin-top: 16px;
}

.slide-date-time span{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	line-height: 1;
	color: #adadad;
}

.slide-date-time svg {
	fill: #adadad;
	margin-right: 6px;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
	content: ""!important;
}

.swiper-button-next, .swiper-button-prev {
	width: calc(var(--swiper-navigation-size)/ 25 * 27)!important;
	z-index: 3!important;
}

.swiper-button-prev,
.swiper-button-next {
  height: 50px;
  width: 50px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
}

.swiper-button-prev::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(229,1,17,1)'%3E%3Cpath d='M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20ZM12 11H16V13H12V16L8 12L12 8V11Z'%3E%3C/path%3E%3C/svg%3E");

}

.swiper-button-next::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(229,1,17,1)'%3E%3Cpath d='M12 11V8L16 12L12 16V13H8V11H12ZM12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20Z'%3E%3C/path%3E%3C/svg%3E");
}

.swiper-pagination-bullet-active {
	background: var(--color_red) !important;
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

.swiper-pagination {
	z-index: 3!important;
}

.swiper-slide{
	transform: scale(0.8) !important;
	transition: transform .3s;
}

.swiper-slide.swiper-slide-active {
	transform: scale(1) !important;
}

.swiper-slide.swiper-slide-next {
	margin-right: -2.8vw !important;
}

.swiper-slide.swiper-slide-prev {
	margin-left: -2.8vw !important;
}

/************************************
** header
************************************/

.fixed-header {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.0)!important;
}

.header-container{
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
	margin-bottom: 16px;
}

.logo-image {
	padding: 10px 0!important;
	margin: 0 auto;
}

.header-container-in.hlt-top-menu.hlt-tm-small .logo-header {
	max-height: none!important;
}

#menu-item-21 a {
  background: var(--color_red);
	color: #fff;
	border-radius: 10px;
	border-bottom: 5px solid #A6000D;
	transition: all 0.3s ease-in-out;
}

#menu-item-21 a:hover {
  transition: all 0.3s ease-in-out;
	color: #fff !important;
	text-decoration: underline;
}

.navi-in > ul .caption-wrap > div {
	font-size: 14px!important;
	margin-top: -2px;
}

#menu-item-21 .item-label svg {
	width: 18px;
	margin-right: 6px;
}

.item-label-title a{
	position: relative;
}

.item-label-title a::before{
	position: absolute;
	content:attr(title);
	bottom: -2px;
	left:50%;
	transform:translatex(-50%);
	font-size:10px;
	width: 100%;
	color: #adadad;
}

.page .sns-follow {
	display: none;
}

/************************************
** footer
************************************/

.footer-icons ul {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	padding:32px 0 0;
}

.footer-icons ul li svg {
	width: 30px;
	margin: 8px;
	fill: var(--color_red);
}

/************************************
** side bar
************************************/

.sidebar h2, .sidebar h3 {
	background-color: transparent!important;
	font-weight: normal!important;
	font-size: 16px!important;
	margin: 0!important;
}

.widget-entry-card{
	font-size: 12.8px!important;
}

.widget-entry-cards:not(.large-thumb-on) .card-title {
	padding-top: 8px!important;
	-webkit-line-clamp: 3!important;
}

h3.widget-sidebar-title {
	margin-bottom: 14px !important;
	padding: 12px 8px 6px;
	position: relative;
	letter-spacing: .2rem;
}

h3.widget-sidebar-title::before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100px;
	height: 2px;
	background: var(--color_red);
	z-index: 1;
}

h3.widget-sidebar-title::after {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #f7f7f7;
}

.widget_categories ul li a {
	font-size: 14px;
	padding-left: 24px;
	position: relative;
}

.widget_categories ul li a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(229,1,17,1)'%3E%3Cpath d='M22 8V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V7H21C21.5523 7 22 7.44772 22 8ZM12.4142 5H2V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
	display: block;
	width: 16px;
	height: 16px;
	transform: translateY(-50%)
}

.widget_categories ul li a .post-count {
	color: #adadad;
}

.wp-block-search__button {
	width: 80px !important;
	background: var(--color_red) !important;
}

/************************************
** category
************************************/

.archive-title {
	align-items: center;
	padding-bottom: 20px;
	margin-bottom: 40px;
	position: relative !important;
}

.archive-title::before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100px;
	height: 4px;
	background: var(--color_red);
	z-index: 1;
}

.archive-title::after {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #f7f7f7;
}

.archive-title span {
	display: none!important;
}

.entry-card-thumb {
	width: 260px!important;
}

.entry-card-content {
	margin-left: 280px!important;
}

.cat-label {
	display: none!important;
}

@media screen and (max-width: 834px) {
	.entry-title, .archive-title {
		padding-top: 48px;
	}

	.entry-card-thumb {
		width: 38%!important;
	}

	.entry-card-content {
		margin-left: 20px!important;
	}
}

/************************************
** front
************************************/

.top-category-section {
	margin: 120px 0;
}

.top-category-section figure {
	position: relative;
	padding-bottom: 8px;
}

.top-category-section figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
}

.top-category-section figure .category {
	position: absolute;
	display: flex;
	text-transform: uppercase;
	right: 10px;
	top: 10px;
	z-index: 1;
	font-size: 12px;
	background: var(--color_red);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
}

.top-category-section figure .category:hover {
	color: #fff !important;
	text-decoration: underline;
}

.top-category-section figure .category svg {
	width: 18px;
	height: auto;
	margin-right: 4px;
}

.top-category-posts li {
	position: relative;
}

.top-category-section a {
	text-decoration: none;
}

.top-category-section li > a {
	display: block;
	position: relative;
	width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.top-category-section h3,
.top-category-section span  {
	color: #333;
	text-decoration: none;
}

.top-category-section .meta {
	font-size: 11px;
	display: flex;
	justify-content: end;
}

.top-category-section .meta .date {
	display: flex;
	align-items: center;
	color: #adadad;
	line-height: 1;
}

.top-category-section .meta .date svg {
	fill: #adadad;
	width: 14px;
	margin-right: 6px;
}

.top-category-section h3 {
	font-weight: normal;
	font-size: 16px;
	line-height: 1.4;
	max-height: 4.2em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: 64px;
}

.top-category-posts {
	list-style-type: none;
	padding-left: 0;
}

.top-category-posts {
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
}

.top-category-posts li {
	width: 33.33333333%;
}

.top-category-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	margin-bottom: 40px;
	position: relative;
}

.top-category-header::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100px;
  height: 4px;
  background: var(--color_red);
  z-index: 1;
}

.top-category-header::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #f7f7f7;
}

.top-category-header h2 {
	font-weight: normal;
}

.top-category-header .sub-title {
	font-size: 80%;
	letter-spacing: 2px;
	color: #b7b7b7;
	font-weight: normal;
	font-style: italic;
	margin-left: 20px;
}

.top-category-header a {
	display: flex;
	align-items: center;
	color: #333;
	font-size: 16px;
	transition: color 0.3s;
}

.top-category-header a svg {
	width: 22px;
	height: auto;
	margin-left: 6px;
	color: var(--color_red);
}

.top-category-header a:hover {
  color: var(--color_red);
}

.top-category-btn {
	display: flex;
	justify-content: center;
}

.top-category-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #333;
	transition: color 0.3s;
}

.top-category-btn a:hover {
	color: var(--color_red);
}

.top-category-btn a svg {
	width: 22px;
	height: auto;
	margin-left: 6px;
	color: var(--color_red);
}

@media screen and (max-width: 834px) {

	.top-category-header {
		display: block;
	}

	.top-category-posts {
		display: block;
		gap: 0;
	}

	.top-category-posts li {
		width: 100%;
	}

	.top-category-section li:not(:last-child) {
		margin-bottom: 40px;
	}

	.top-category-header .sub-title {
		margin-left: 6px;
		font-size: 14px;
	}

	.top-category-header a {
		font-size: 12px;
	}

}

/************************************
** 人気記事ランキング表示のカスタマイズ
************************************/

.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{
	border-radius: 50%;
	top: -4px;
	left: -4px;
	width: 14px;
	height: 14px;
	font-family: 'Lato', sans-serif;
	font-size: 12px;
}

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {
	background: #d0d0d1;
	line-height: 14px;
}

.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{
	padding: 0.2em 0 0 0.8em !important;
	letter-spacing: 0.8px;
}

.sidebar a.popular-entry-card-link.a-wrap{
	margin-bottom: 8px;
}

/************************************
**　投稿パーツ
************************************/

.article-footer .sns-follow,
.article-footer .footer-meta  {
	display: none;
}

/* 見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	background-color: transparent; /* 背景色を透明に */
	border: none; /* 枠線なし */
	border-radius: 0; /* 角の丸みなし */
}

.article h2 {
	padding: 0.3em 0;
	border-bottom: solid 8px var(--color_red);
	color: #333;
	background-color: transparent !important;
}

.article h3{
	position: relative;
	padding: 0.3em 0;
	border-bottom: solid 3px #eee;
	color: #333;
}

.article h3:after{
	position: absolute;
	content: '';
	display: block;
	border-bottom: solid 3px var(--color_red);
	bottom: -3px;
	width: 30%;
}

.article h4{
	--baloon-color:#333;
	position: relative;
	border-bottom: 3px solid var(--baloon-color);
	padding:.3em 0;
	color:#333;/*文字色（黒）*/
}

.article h4:before, .article h4:after {
	position: absolute;
	content: '';
	left: 1em;
	width: 0;
	height: 0;
	border-width: 14px 12px 0;
	border-style: solid;
}

.article h4:before {
	bottom: -14px;
	border-color:var(--baloon-color) transparent transparent;
}

.article h4:after {
	bottom: -10px;
	border-color: #fff transparent transparent;
}

.article h5 {
	background:none;
	color: #333;
	position: relative;
	padding: .3em 1em 1em 40px;
  }

.article h5::before,
.article h5::after{
	position: absolute;
	content: '';
}

.article h5::before {
	top: .6em;
	left: .2em;
	z-index: 2;
	width: 22px;
	height: 22px;
	background: #607d8b;
	opacity: .5;
}
.article h5::after{
	top: 1.1em;
	left: .8em;
	width: 15px;
	height: 15px;
	background: #607d8b;
	opacity: .5;
}

.cat-link {
	background: var(--color_red) !important;
	border-radius: 5px;
}

.cat-link:hover {
	color: #fff !important;
	text-decoration: underline;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
	.widget h2 {
		font-size: 18px!important;
	}

	.swiper-outer {
		padding-top: 40px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	.mobile-header-menu-buttons {
		padding: 20px 0!important;
	}

	.header div.header-in {
		display: none!important;
	}

	.menu-close-button {
		padding-top: 15px;
		padding-left: 25px;
		padding-bottom: 30px;
		text-align: left;
		font-size: 1.3em;
	}

	.swiper-outer {
		padding-top: 90px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	.swiper-outer {
		padding-top: 90px;
	}
}


/************************************
** 記事ページ
************************************/

.wp-block-button__link {
	position: relative;
	border: none;
	color:  red;
	border-bottom: 2px solid var(--color_red);
	background-color: transparent;
	font-size: 14px;
	font-weight: bold;
}

.wp-block-button__link::before {
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	background: var(--color_red);
	rotate: 40deg;
	position: absolute;
	right: -1px;
	bottom: 2px;
}