@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{
	--main-back: #E9ECF5;
	--shadow: 6px 6px 9px rgba(163, 177, 198, 0.5),
				-6px -6px 9px rgba(247, 250, 255, 0.5);
	--inset-shadow: inset 6px 6px 9px rgba(163, 177, 198, 0.5),
				inset -6px -6px 9px rgba(247, 250, 255, 0.5);
	--mini-shadow: 3px 3px 5px rgba(163, 177, 198, 0.5),
				-3px -3px 5px rgba(247, 250, 255, 0.5);
	--inset-mini-shadow: inset 3px 3px 5px rgba(163, 177, 198, 0.5),
				inset -3px -3px 5px rgba(247, 250, 255, 0.5);
	--f-text:#998671;/*文字の色*/
  	--f-line:#e29399;/*線の色*/
  	--f-bg1:#e29399;/*タイトル行の背景色*/
  	--f-bg2:#fef4f4;/*ストライプの背景色*/
}


.main{
	background: var(--main-back);
}

.author-info{
	display: none;
}

#breadcrumb{
	display: none;
}

.entry-content a:hover{
	color: #F76B98;
	transition: 0.5s;
}

/***********ヘッダー**********/
.header-container-in.hlt-top-menu .logo-header img {
    max-height: 32px;
}

#navi-in{
	font-family: serif;
}

.item-label{
	border-left:2px solid #A9A9A9;
}

/**********サイドバー**********/
.sidebar {
    border-radius: 1rem;
    background: var(--main-back);
	box-shadow: var(--shadow);
}

.sidebar h3{
	background: var(--main-back);
	border-bottom:solid 3px #fafafa;
}

/***********投稿カード**********/
.ect-vertical-card {
justify-content:space-between;
}

.ect-3-columns .entry-card-wrap {
width:calc((100% - 2rem) / 3);
}

.entry-card-wrap{
	padding: 1rem !important;
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	background: var(--main-back);
	box-shadow: var(--shadow);
	transition: 1s;
}
.entry-card-wrap:hover{
	box-shadow: none;
	background: var(--main-back);
	transition: 1s;
}

/**********ページネーション**********/
.pagination-next-link.key-btn{
	border-radius: 1rem;
	background: var(--main-back);
	box-shadow: var(--shadow);
	border: none;
}

.page-numbers.current{
	border-radius: 60px;
	background: var(--main-back);
	box-shadow: var(--inset-mini-shadow);
	border: none;
	margin-left: 10px;
}

.page-numbers{
	border-radius: 60px;
	background: var(--main-back);
	box-shadow: var(--mini-shadow);
	border: none;
	margin-left: 10px;
}

/**********投稿ページ**********/
.um-locked-content{
	display: none;
}

/**********アイキャッチとタイトル**********/
.entry-header {
    display: flex;
    flex-direction: column;
}
.entry-header .eye-catch-wrap {
    order: -1;
}

.archive-title{
	display: none;
}

.post-date,.post-update{
	display: none;
}

.st-comment-datetime{
	display: none;
}

.toc{
	border-radius: 1rem;
	background: var(--main-back);
	box-shadow: var(--shadow);
	border: none;
}

.toc-title{
	font-weight: bold;
	border-bottom: #F76B98 solid 3px;
}

/**********テーブルデザイン**********/
.fem-table table{
color:var(--f-text);
border:2px solid var(--f-line);
background-color:white;
}

.fem-table table th{
text-align:center;
border:1px dotted white;	
}

.fem-table thead{
border-bottom:1px solid var(--f-line);
}

.fem-table table td{
border:1px dotted var(--f-line);	
}

.fem-table thead{
color:white;
}

.fem-table th{
background-color:var(--f-bg1);
}

.fem-table tr:nth-child(even){
background-color:var(--f-bg2);
}

/**********記事内見出しデザイン**********/
.article h2 {
  position: relative;
  padding: 0.25em 0;
  background: var(--main-back);
}
.article h2:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

.article h3 {
	border-left: 7px solid #F76B98;
}

.article .eye-catch-wrap .eye-catch img{
	border-radius: 1em;
	box-shadow: var(--shadow);
}

/*************コメントエリア**********/

/* =========================
   診断コンテンツ
========================= */
.qsm-quiz-container.qmn_quiz_container.mlw_qmn_quiz.quiz_theme_default{
	border-radius: 1rem;
	background: var(--main-back);
	box-shadow: var(--shadow);
	border: none;
	padding:2rem;
}

.qsm-btn.qsm-next.qmn_btn.mlw_qmn_quiz_link.mlw_next.mlw_custom_start{
	margin:0 auto;
}

.qsm-error-message:first-of-type {
    display: none;
}

.qmn_error:after {
	display: none !important;
}

/*************肌タイプ診断結果スタイル**********/
.qsm-ls-skin-card {
  margin: 40px auto;
  padding: 32px 28px;
  color: #444;
  line-height: 1.8;
}

.qsm-ls-skin-title {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: #666;
}

.qsm-ls-skin-type-result {
  text-align: center;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: 700;
  color: #d58fa2;
}

.qsm-ls-skin-text {
  font-size: 15px;
  margin-bottom: 28px;
  text-align: center;
  color: #555;
}

.qsm-ls-skin-section {
  padding: 18px 20px;
  border-radius: 14px;
  margin-bottom: 16px;
}

.qsm-ls-skin-section h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.qsm-ls-skin-section p {
  margin: 0;
  font-size: 14px;
}

/* NGケア */
.qsm-ls-skin-section.ng {
  background: #fdf2f4;
  border-left: 5px solid #e59aa9;
}

.qsm-ls-skin-section.ng h4 {
  color: #c85c73;
  border: none;
}

/* ケアのポイント */
.qsm-ls-skin-section.ok {
  background: #f2f7f6;
  border-left: 5px solid #7fb8aa;
}

.qsm-ls-skin-section.ok h4 {
  color: #4f9b8a;
  border: none;
}

.qsm-ls-skin-section.recommend {
  margin-top: 12px;
  font-size: 13px;
  color: #4f9b8a;
}


/*************アカウントページ**********/
.um-profile-nav{
	border-radius: 10px;
	background: #A8E6CF !important;
}

.um .um-profile-nav-item.active a{
	background: #F2C4D6 !important;
}

.um .um-profile-nav-item a:hover{
	background: #FAD1D8 !important;
}

.um-dropdown-b ul{
	border-radius: 10px;
}

.um-form{
	border-radius: 10px;
	background: var(--main-back);
	box-shadow: var(--shadow);
	padding: 50px 20px;
}

.lis-shop-icon{
	font-size: 30px;
	position: fixed;
	bottom: 20px;
	right: 20px;
}

.um-field-profile_noindex,.um-field-export_data{
	display: none;
}

/*カレンダー*/
.picker__holder .picker__frame .picker__wrap .picker__box{
	background-color: #EF7A85;
}
.picker__box .picker__header{
	background-color: #EF7A85;
}
.picker__table thead tr th{
	background-color: #FF90B3;
}
.picker__table tbody tr{
	background-color: #FFC2E2;
}
.picker__box .picker__footer{
	background-color: #EF7A85;
}

/* =========================
   投稿スライダー用スタイル
========================= */

.ps-wrapper {
	padding: 14px;
	width: 100%;
	overflow: hidden;
}

.ps-container {
	overflow: hidden;
	height: 270px;
	padding: 10px;
	touch-action: pan-y;
}

.swiper-wrapper {
	display: flex;
	align-items: stretch;
}

.ps-slide {
	max-width: 320px;
	flex-shrink: 0;
	box-shadow: var(--shadow);
	padding: 10px;
	border-radius: 10px;
}
.ps-item {
	display: block;
	text-decoration: none;
	color: inherit;
	text-align: left;
}

.ps-thumb {
	width: 100%;
	overflow: hidden;
	margin-bottom: 8px;
}

.ps-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
	display: block;
}

.ps-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	padding-right: 6px;
}

.swiper-button-prev.swiper-button-disabled{
	display: none;
}

.swiper-button-prev,.swiper-button-next {
	color: #62A4D0;
}


/* =========================
   投稿一覧表示スタイル
========================= */
.ls-list-view-post-title {
  font-size: 1.5em;
  margin-bottom: 1em;
  font-weight: bold;
}

.ls-list-view-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.ls-list-view-item {
  width: calc(33.333% - 20px);
  box-sizing: border-box;
  border-radius: 1rem;
  background: var(--main-back);
  box-shadow: var(--shadow);
  transition: 1s;
}

.ls-list-view-item.hidden {
  display: none;
}

.ls-list-view-item:hover {
  box-shadow: none;
  transition: 1s;
}

.ls-list-view-link {
  padding: 20px;
  display: block;
  text-decoration: none;
}

.ls-list-view-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.ls-list-view-post-title {
  font-weight: bold;
  margin-top: 0.5em;
  font-size: 1em;
  color: var(--cocoon-text-color);
}

/* スマホ・タブレット対応 */
@media screen and (max-width: 900px) {
  .ls-list-view-item {
    width: calc(50% - 20px);
  }
}
@media screen and (max-width: 600px) {
  .ls-list-view-item {
    width: 100%;
  }
}

/* =========================
   SNSシェアボタンスタイル
========================= */

.sns-share-buttons .mastodon-share-button-sq,.sns-share-buttons .bluesky-share-button-sq,.sns-share-buttons .misskey-share-button-sq, .sns-share-buttons .hatebu-share-button-sq, .sns-share-buttons .pocket-share-button-sq, .sns-share-buttons .pinterest-share-button-sq, .sns-share-buttons .linkedin-share-button-sq{
	display: none;
}

/* =========================
   広告スタイル
========================= */
.easyLink-box.easyLink-size-s{
	border-radius: 1rem;
	background: var(--main-back);
	box-shadow: var(--shadow);
	border: none;
        margin: 0 auto;
}

/************************************
** レスポンシブデザイン用のメディアクエリ	
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.ect-3-columns .entry-card-wrap {
	width:calc((100% - 2rem) / 2);
}
	
.site-logo-image{
	height: 25px;
}

/*************サイドメニュー**********/
.navi-menu-content.menu-content{
	border-radius: 0 1rem 1rem 0;
	background: var(--main-back);
	box-shadow: 6px 6px 9px;
	width: 15em;
	height: 500px;
	margin: 20% auto;
	padding-top: 1rem;
}
	
.navi-menu-close-button.menu-close-button{
	display: none;
}

.menu-drawer li a{
	border-bottom: 1.5px solid #DCDCDC;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
.ect-3-columns .entry-card-wrap {
	width: 100%;
}
.entry-card-wrap{
	padding: 0.5rem !important;
}

.ps-container {
	height: 220px;
}

.ps-wrapper {
	padding: 0;
}

.ps-slide {
	max-width: 180px;
}

.qsm-quiz-container.qmn_quiz_container.mlw_qmn_quiz.quiz_theme_default{
	padding: 1rem;
}

.qsm-ls-skin-card {
  margin: 0px auto;
  padding: 10px 10px;
  color: #444;
  line-height: 1.8;
}

}

/*480px以下*/
@media screen and (max-width: 480px){

}