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

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

/*----------------------------
 * 共通
 *----------------------------*/
main,
header,
footer
{
	font-family: "Noto Sans JP";
}

body
{
	padding-bottom: 60px;
}

header
{
	box-shadow: 0px 10px 12px -6px rgba(0, 0, 0, 0.3);
}

/* hrefが指定されなくてもカーソルをポインタにする */
a
{
	cursor: pointer;
}

/* 画像が画面幅からはみ出さないようにする */
img {
	max-width: 100%;
	height: auto;
}

input:hover,
textarea:hover,
select:hover
{
	cursor: pointer;
	background-color: #C2DBFE !important;
}

/*WPのformのsubmitボタンの配置を変更するために既存のCSSを初期化*/
input[type="submit"]{
	width: initial!important;
}

/*会員登録、編集画面の入力フォームのpaddingを
 * 統一させるため、bootstrap既存のCSSを編集*/
.form-select{
	padding: 11px!important;
}

/*入力フォームの「必須」マーク*/
.sss-required:after{
	content: "必須";
	background-color: #C00;
	border-radius: 5px;
	padding: 1px 5px;
	font-size: 0.8em;
	color: #fff;
	margin-left: 3px;
}

/*入力フォームのガイド*/
.sss-input-guide{
	font-size: 0.8em;
	margin-left: 3px;
}

/*ページネーション*/

.pagination
{
	list-style: none;
	display: flex;
	justify-content: center;
	padding: 5px;
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.pagination li
{
	margin: 5px;
	padding: 0;
	border:1px #000 solid;
	color:#000053;
	background-color: #fff;
}

.pagination a
{
	display: block;
	text-decoration: none;
	color: #333;
	padding: 10px;
	cursor: pointer;
	cursor: hand;
}

.pagination a:hover
{
	color: #333;
	background-color: #fff;
	text-decoration: underline;
}

.pagination .active
{
	pointer-events: none;
	border: solid 1px #00f;
}

.pagination .disable
{
	border:1px #ccc solid;
	pointer-events: none;
}

.pagination .disable a
{
	color: #ccc;
}

.pagination .pageNumbers
{
	border: none;
	pointer-events: none;
	background: transparent;
}

/*ここまでページネーション*/

/*ここまでトップページの記事一覧*/

/*日記食品ランキングの順位の数字、王冠アイコン*/
.sss-crown-gold{
  	background:linear-gradient(-45deg, #ec3, #ffc, #fe5, #ffc, #ec3);
  	-webkit-background-clip: text;
  	color: transparent;
	position: relative;
	font-size: 1.7em;
}
.sss-crown-gold::after{
	content: "1";
	color: #000;
    font-size: 0.5em;
    position: absolute;
    top: 68%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
}

.sss-crown-silver{
	background: linear-gradient(-45deg, #ccc, #fff, #ddd, #fff, #ccc);
  	-webkit-background-clip: text;
  	color: transparent;
	position: relative;
	font-size: 1.7em;
}
.sss-crown-silver::after{
	content: "2";
	color: #000;
    font-size: 0.5em;
    position: absolute;
    top: 68%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
}

.sss-crown-bronze{
	background: linear-gradient(-45deg, #a51, #ec8, #b62, #ec8, #a51);
  	-webkit-background-clip: text;
  	color: transparent;
	position: relative;
	font-size: 1.7em;
}
.sss-crown-bronze::after{
	content: "3";
	color: #000;
    font-size: 0.5em;
    position: absolute;
    top: 68%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
}

/*日記食品トップランキングの食品名*/
.sss-top-ranking-food-name{
	font-weight: bold;
}

/*日記食品ランキング4位～の食品名*/
.sss-ranking-food-name{
	font-size: 0.8em;
}

/************************************
** 以下WordPress関連
************************************/

/*既存フッターの非表示*/
.footer-container{
	display:none;
}

/*トップページ用のヘッダーロゴ、会員情報枠のCSS*/
.home.page .sss-header-logo,
.home.page .sss-header-profile-container{
	background-color: #ffffff;
}
.sss-header-logo {
	padding-top: 5px;
	padding-bottom: 5px;
}
/*ロゴと会員情報枠の間を埋める*/
.home.page .sss-header-profile-container.pt-1{
	padding-top: 0!important;
}

/*会員登録・編集画面の「登録」「更新」ボタンの文字色*/
.swpm-registration-submit,
.swpm-edit-profile-submit,
.swpm-pw-reset-submit{
	color: #000000;
}

/*WPのページの最上部にスクロールするボタンを非表示*/
.page_top_btn{
	display: none!important;
}

/*WP側のヘッダーの隙間を埋める*/
.logo-text{
	display:none;
}

/*会員登録画面の「無料会員」表示を非表示*/
.swpm-registration-membership-level-row{
	display: none;
}

/*WPのヘッダー「izumisyu members」の非表示*/
.site-name-text{
	display: none;
}

/*WPのページのタイトル*/
.entry-title{
	display: none;
}

/*投稿ページアイキャッチ画像の非表示*/
.eye-catch{
	display: none;
}

/*アーカイブページの既存位置のタイトルを非表示*/
.archive-title{
	display: none;
}

/*会員画面の購入ボタンが非表示の際の文字色*/
.swpm-partial-protection-text{
	color: 	#0dcaf0!important;
}

#navi.navi.cf a:hover
{
	background-color: transparent;
	text-decoration: underline;
}

.header-container
{
	background-color: transparent;
}

.home.page .entry-title,
.home.page .post-update
{
  display: none;
}

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

.home.page .tagline
{
	display: none;
}

/*
.site-logo-image
{
	display: none;
}
*/

/* キャッチフレーズ */
.tagline
{
	margin: 0px;
	font-size: 18px;
	font-weight: 750;

	color: transparent;
	background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
	-webkit-background-clip: text;
}

.tagline::before,
.tagline::after
{
	content: " - ";
}

/*
 * ロゴ非表示(ホームのみ)
 */
.home.page .logo-header
{
  display: none;
}

/*
 * メイン
 */
/*.home.page .main*/
.main
{
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/*
 * ベース背景
 */
/*
.main,
.body,
#sidebar
{
	background-color: #fff;
}
*/

/************************************
** 以下アプリ用スタイル
************************************/

/* アンカーを強調する（○○は"こちら"のような利用を想定） */
a.sss-anchor-highlight
{
	background-color: #0D6EFD;
	color: #fff;
	margin: 0 4px;
	padding: 0 4px;
	text-decoration: none;
	border-radius: 100vh;
}
a.sss-anchor-highlight::before
{
	font-family: "Font Awesome 6 Free";
	content: '\f0a4';
	margin-right: 4px;
}
a.sss-anchor-highlight:hover
{
	background-color: #fff;
	color: #0D6EFD !important;
	border: 2px #0D6EFD solid;
	padding: 0 2px;
}

/* 致命的なフレーズ用 */
.sss-fatal
{
	color: red;
}

/* 動画 */
.sss-video-introduction
{
	width: 100%;
	height: auto;
}

.sss-video-healthcheck
{
	width: 100%;
	max-width: 720px;
	height: auto;
}

.sss-fatal
{
	color: #F00;
}


/*----------------------------
 * メニュー開閉ボタン
 *----------------------------*/
.sss-menu-button {
	position: fixed;
	bottom: 10px;
	left: 10px;
	z-index: 1050;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
}

/*----------------------------
* メニュー本体
*----------------------------*/
.sss-menu {
	position: fixed;
	bottom: 0px;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
}

.sss-menu-items {
	padding: .5em 1em;
	color: #fff;
	box-sizing: border-box;
	position: fixed;
	bottom: 60px;
	left: 0;
	box-shadow: 4px 0px #333;
}

.sss-menu-item {
	margin: 8px;
	font-size: 1.2em;
}

/*ワードプレス側のカーソル*/
.sss-cursor-foodAnq--foodDiary{
	cursor:pointer
}

/* コンテンツのバナー */
.sss-contents-banner
{
	cursor: pointer;
	position: relative;
	display: inline-block;
	border: solid 1px #000;
}
.sss-contents-banner::after
{
	content: "";
	border: solid 1px #fff;
	position: absolute;
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
}
.sss-contents-banner:hover
{
	transform: translateY(-1px);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

/*----------------------------
* アニメーション部分
*----------------------------*/

/* アニメーション前のメニューの状態 */
.sss-menu {
	pointer-events: none;
	opacity: 0;
	transform-origin: center;
	transition: all .3s ease;
}
.sss-menu-items {
	transform: translateX(-100%);
	transition: all .3s ease;
}

/* アニメーション後のメニューの状態 */
.sss-menu.is-active {
	pointer-events: auto;
	opacity: 1;
}
.sss-menu-items.is-active {
	pointer-events: auto;
	opacity: 1;
	transform: scale(1.0);
}

/*トップコンテンツ*/

.sss-contents-container{
	border: 1px solid #ced4da;
	border-radius: 4px;
	padding: 13px;
}

.sss-contents-container,
/*.sss-carousel-container,*/
.sss-phrase-container,
.sss-food-diary-contents,
.sss-service-guide-contents
{
	background: linear-gradient(135deg, rgba(238, 119, 136, 0.2 ), rgba(238, 187, 85, 0.2 ));
}

/* 未使用？ */
.sss-contents-title{
	font-size: 18px;
}

/*トップページ記事一覧*/

.sss-top-article-container
{
	position: relative;
	height: auto;
}

.sss-top-article-list
{
	list-style: none;
	height: auto;
	padding-top: 10px;
	padding-right: 10px;
	padding-left:10px;
	padding-bottom: 130px;
	position: relative;
}

.sss-top-article-list li
{
	border: 1px #ccc solid;
	border-radius: 4px;
	height: 280px;
	line-height:1.7em;
	background-color: #fff;
	position: relative;
	padding: 5px;
}

.sss-top-article-membership
{
	position: absolute;
	width: 155px;
	bottom: 20px;
	right: -36px;
	transform: rotate(-45deg);
	text-align: center;
}

.sss-top-article-date
{
	position: absolute;
	bottom: 0;
	color: #999;
	font-size: 0.5em;
}

.sss-top-article-movie
{
	background-image: url('../../uploads/2022/03/sss-movie-s.png');
	background-position: right 4px top 4px;
	background-repeat: no-repeat;
}

.sss-top-article-thumbnail
{
	width: 100%;
}

/*記事のクリック範囲を広げる*/

.sss-top-article
{
	overflow: hidden;
	position:relative;
}

.sss-top-article:hover
{
	background-color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.sss-top-article-title
{
	display: block;
	height: 100%;
	text-decoration: none;
	margin-bottom: 5px;
}

.sss-top-article-title::after
{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: auto;
  	content: "";
	width: 100%;
	height: 100%;
	text-decoration: none;
	z-index: 1;
}

.sss-top-article-title:hover
{
	text-decoration: underline;
}

.sss-top-article-title:link, .sss-top-article-title:visited, .sss-top-article-title:active
{
  	color: #333;
}

.sss-top-article-notice
{
	font-size: 0.75em;
	color: #00f;
	line-height: 1.2em;
}

/* ここまで記事のクリック範囲 */


/* ボタン */
.sss-button,
.submit
{
	padding: 0.25em 0.5em !important;
	text-decoration: none;
	color: #FFF;
	border-radius: 8px;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.8);
	border-style: solid !important;
	border-width: 1px !important;
	text-shadow: none;
	white-space: nowrap;
	cursor: pointer;
}

/* インライン用ボタン(操作説明等で利用するダミーのprimaryボタン) */
.sss-button-inline
{
	padding: 0.2em 0.4em !important;
	font-size: 0.9em;
	cursor: text !important;
	line-height: 2.2em;
}

.sss-button-inline:hover
{
	color: #FFF !important;
	text-shadow: none !important;
	cursor: text !important;
}

/* BootStrapベースのグラデーション */
.sss-primary,
.submit
{
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#0D6EFD), to(#0066ff));
	background: linear-gradient(#8FBCFE 5%, #0D6EFD 15% 85%, #013583 95%);
	border-color: #0D6EFD!important;
}

.sss-secondary
{
	color: #fff;
	background: linear-gradient(#A9AFB6 5%, #6C757D 15% 85%, #363A3F 95%);
	border-color: #6C757D;
}

.sss-success
{
	color: #fff;
	background: linear-gradient(#25C77A 5%, #198754 15% 85%, #0D4228 95%);
	border-color: #198754;
}

.sss-danger
{
	color: #fff;
	background: linear-gradient(#F0A8AF 5%, #DC3445 15% 85%, #74141E 95%);
	border-color: #DC3445;
}

.sss-warning
{
	color: #000;
	background: linear-gradient(#FFFF88 5%, #FFC107 15% 85%, #826200 95%);
	border-color: #FFC107;
}

.sss-info
{
	color: #000;
	background: linear-gradient(#82E3F9 5%, #0DCAF0 15% 85%, #066377 95%);
	border-color: #0DCAF0;
}

.sss-light
{
	color: #000;
	background: linear-gradient(#FFFFFF 5%, #F8F9FA 15% 85%, #677C92 95%);
	border-color: #F8F9FA;
}

.sss-dark
{
	color: #fff;
	background: linear-gradient(#31373E 5%, #212529 15% 85%, #181C1F 95%);
	border-color: #212529;
}

.sss-azalea-pink
{
	background-color:#FF3399;
}

.sss-primary:hover,
.sss-secondary:hover,
.sss-success:hover,
.sss-danger:hover,
.sss-dark:hover,
.sss-azalea-pink:hover
{
	color: #000;
	text-shadow:
		 1px 1px 0px #FFF, -1px -1px 0px #FFF,
		-1px 1px 0px #FFF,  1px -1px 0px #FFF,
		 0px 1px 0px #FFF,  0px -1px 0px #FFF,
		-1px 0px 0px #FFF,  1px  0px 0px #FFF;
}
.sss-warning:hover,
.sss-info:hover,
.sss-light:hover
{
	color: #FFF;
	text-shadow:
		 1px 1px 0px #000, -1px -1px 0px #000,
		-1px 1px 0px #000,  1px -1px 0px #000,
		 0px 1px 0px #000,  0px -1px 0px #000,
		-1px 0px 0px #000,  1px  0px 0px #000;
}


/* ビュー用のスタイル */
.sss-standard-view
{
	min-height: 100vh;
	position: relative;
	padding-bottom: 60px;
	box-sizing: border-box;
}

.sss-wide-view
{
	min-height: 100vh;
	position: relative;
	box-sizing: border-box;
}

/* ヘッダ */
.sss-header
{
	height: 50px;
}

.sss-header-logo
{
	background-color: #fff;
}

/*
 * 背景画像(ホームのみ)
 */
/*body.home.page*/
body
{
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(../../uploads/2022/04/bg3.png);
	background-attachment: fixed;
	color: black;
}

/*
 * 画像に白い光沢を付ける
 */
.sss-top-logo
{
	filter:
		drop-shadow(0 0px 4px rgba(255, 255, 255, 1))
		drop-shadow(0 0px 4px rgba(255, 255, 255, 1))
		;
}

/* TOPカルーセルのキャッチコピー */
.sss-top-carousel-catchcopy
{
	/* 文字色やサイズはSmartSliderで指定したものしか効かないのでここでは指定していない */
	filter:
		drop-shadow(-1px -1px 0px #fff)
		drop-shadow(-1px 1px 0px #fff)
		drop-shadow(1px -1px 0px #fff)
		drop-shadow(1px 1px 0px #fff);
}

.sss-bg-base
{
	background-color: #fff !important;
}

/*
 * ベース文字
 */
.sss-text-base
{
	color: #000 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

.sss-text-base a:hover
{
	text-decoration: underline !important;
}

/*
 * ボーダーカラー
 */
.article h5,
.sss-food-diary-daily-headline
{
	border-bottom: solid 1px #33e;
}

#sidebar
{
	border-left: solid 1px #33e;
}

.entry-title,
.article h1,
.article h3,
.sidebar h3
{
	padding: 8px;
	box-shadow: 1px 1px #33e;
}
/*
 * ナビゲーションバー
 */
.home.page #navi,
.home.page .navi-in > ul
{
	background: transparent;
}

/*
 * タイトル(HOME以外)
 * グローバルナビ(HOME以外)
 */
.sss-bg-main,
.sss-bg-main a,
.navi-in > ul,
.navi-in > .menu-header .sub-menu,
.navi-in > .menu-header .sub-menu a,
.entry-title,
.article h1,
.article h3,
.sidebar h3,
.sss-footer,
.sss-menu-items,
.sss-h1,
.sss-other
{
	/*background-color: #e83743;*/
	/*background-color: #e45;*/
	/*background-color: #e78;*/
	color: white;
	text-shadow: 1px 1px 2px #000;
	background: linear-gradient(135deg, #e78, #eb5);
	background-image: linear-gradient(135deg, #e78, #eb5);
}

.sss-other
{
	text-align: center;
	padding: 0.5rem;

	text-shadow: 1px 1px 2px #000;
	font-size: 1.2em;

	border-radius: 100vh;
}

/* ヘッダ・タイトルコンテナ */
.sss-header-title-container{
	position: relative;
}

/* ヘッダ・タイトル */
.sss-header-title{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	line-height: 1.2em;
	font-size: 1.2em;
	color: #fff;
}

/* ヘッダ・プロフィールコンテナ */
.sss-header-profile-container
{
	font-size: 0.8em;
	background-color: #fff;
}

/* ヘッダ・プロフィール */
.sss-header-profile
{
	position: relative;
}

/* ヘッダ・プロフィールアイコン */
.sss-header-profile-icon
{
	position: absolute;
	top: 0px;
	right: 4px;
}

/* ヘッダ・プロフィール項目 */
.sss-profile-item
{
	white-space: nowrap;
}

/* フッタ */
.sss-footer
{
	font-size: 0.8em;
	border-top: 2px solid #f9a;
	border-image: linear-gradient(135deg, #fab, #fea);
	border-image-slice: 1;
	width: 100%;
	height: 60px;
	position: fixed;
	bottom: 0;
}

.sss-footer-button
{
	height: 40px!important;
	margin-top: 8px!important;
	margin-right: 8px!important;
}

.sss-sys-logo
{
	width: 100%;
}

.article h1,
.sidebar h3
{
	font-size: 16pt;
	font-weight: bold;
}

#navi.navi.cf a {
	color: white;
	font-weight: 550;
	z-index: 2147483647;
}

#navi.navi.cf a:hover {
	background-color: transparent;
	text-decoration: underline;
}

/*
 * サブメニュー
 */
.home.page #navi .navi-in > .menu-header .sub-menu{
	background: transparent;
}

.home.page #navi .navi-in > .menu-header .sub-menu a{
	background-color: transparent;
}

/*
 * ホームのコンテンツ
 */
.sss-home-contents {
	background-color: transparent;
	text-align: center;
}

.sss-home-content {
	background-color: transparent;
	padding: 20px;
	text-align: center;
}

.sss-menu-text
{
	font-size: 0.5em;
	margin-bottom: 4px;
}

/******************************************************/
/******************************************************/
/******************************************************/
/******************************************************/

/* アニメーション */
.animation {
	position: relative;
	height: 320px;
	display: flex;
	justify-content: center;
	text-align: center;
	vertical-align: middle;
}

/* アニメーション・画像 */
.animation-image {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 320px;
	background-image: url('../../uploads/2022/04/sss-logo-w0.png');
	background-repeat: no-repeat;
	background-position: center;
}


/* アニメーション（文字） */
.animation-text {
	position: absolute;
	top: 40px;
	font-size: 36px;
	line-height: 64px;
	letter-spacing: -4px;
}

.animation-text span {
	display: inline-block;
}

/* 健康で */
.animation-text span:nth-of-type(1) {animation-delay: 3.0s;}
.animation-text span:nth-of-type(2) {animation-delay: 3.1s;}
.animation-text span:nth-of-type(3) {animation-delay: 3.3s;}

/* 長生きできれば */
.animation-text span:nth-of-type(4) {animation-delay: 4.2s;}
.animation-text span:nth-of-type(5) {animation-delay: 4.3s;}
.animation-text span:nth-of-type(6) {animation-delay: 4.4s;}
.animation-text span:nth-of-type(7) {animation-delay: 4.5s;}
.animation-text span:nth-of-type(8) {animation-delay: 4.6s;}
.animation-text span:nth-of-type(9) {animation-delay: 4.7s;}
.animation-text span:nth-of-type(10) {animation-delay: 4.8s;}

/* 思うツボ */
.animation-text span:nth-of-type(11) {animation-delay: 5.7s;}
.animation-text span:nth-of-type(12) {animation-delay: 5.8s;}
.animation-text span:nth-of-type(13) {animation-delay: 5.9s;}
.animation-text span:nth-of-type(14) {animation-delay: 6.0s;}


.animation-text span {
	color: #ffd900;
	opacity: 0;
	transform: translate(0, 0) scale(10);
	animation: sideSlide .4s forwards;
}

.animation-image {
	/*transform: translate(-100px, 0) scale(100);*/
	transform: translate3d(0, 0, 0);
	animation: rotate 7s forwards;

}

/******************************
 * Simple Membership
 ******************************/
.swpm-login-widget-form input[type="text"],
.swpm-login-widget-form input[type="password"]
{
	width: 100%;
}

/********************************************************************************/

/*ナビメニュー固定*/
/*
.naviFixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}
*/

/* ここから画像アップローダ */
.uploader-uploading-container
{
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url('../../uploads/2022/04/uploading.png');
}

.uploader-uploading
{
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 32px);
	color: #f2f2f2;
	text-shadow:
		 0px  2px 3px #e78,
		 2px  2px 3px #e87,
		 2px  0px 3px #e96,
		 2px -2px 3px #ea5,
		 0px -2px 3px #eb5,
		-2px -2px 3px #ea5,
		-2px  0px 3px #e96,
		-2px  2px 3px #e87;
}

.sss-uploader {
	text-align: left;
	position: relative;
	width: 240px;
	height: 240px;
}

.sss-master-image,
.uploader-uploading-container {
	width: 240px;
	height: 240px;
	object-fit: contain;
	border-style: solid;
	border-width: 1px;
	border-color: #dfdfdf;
	background-color: transparent;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

.sss-button-upload-image {
	position: absolute;
	left: calc(50% - 66px);
	bottom: 25px;
}

.sss-button-delete-image {
	position: absolute;
	right: 5px;
	top: 5px;
}

.sss-file-input {
	display: none;
	visibility: hidden;
}
/* ここまで画像アップローダ */

/*******/
/* 吹き出し本体 */
/* 吹き出し本体 - 枠線付きの吹き出し */
.sss-phrase-container {
	overflow: hidden;
	flex-wrap: nowrap;
	justify-content: left;
	/*box-shadow: 4px 4px 4px rgba(0, 0, 4, 0.3) inset;*/
	padding-left: 20px;
	padding-top: 20px;
	padding-right: 10px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	display: flex;
	align-items: flex-end;
}

.sss-phrase-left-character {
	float: left;
}

.sss-phrase-left {
	position: relative;
	display: inline-block;
	margin: 1.5em 0 1.5em 15px;
	padding: 8px;
	max-width: calc(100% - 180px);
	color: #000;
	background: #FFF;
	border: solid 3px #333;
	border-radius: 10px;
	box-sizing: border-box;
	overflow-wrap: break-word;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
	bottom: 20px;
}

.sss-phrase-left:before {
	content: "";
	position: absolute;
	bottom: 7px;
	left: -24px;
	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
	z-index: 2;
}

.sss-phrase-left:after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: -30px;
	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #333;
	z-index: 1;
}

.sss-phrase-left p {
	margin: 0;
	padding: 0;
}

/* 見出し1 */
.sss-h1
{
	text-align: center;
	padding: 0.5rem;

	text-shadow: 1px 1px 2px #000;
	font-size: 1.2em;

	border-radius: 100vh;
	border-style: solid;
	border-width: 1px;
	border-color: #dfdfdf;
}

.sss-h2
{
	padding: 0.3rem;
	background-color: #fff0d0;
	border-bottom: solid 2px #e78;
	border-left: solid 8px #e78;
	margin-bottom: 4px;
	font-size: 1.15em;
}
.sss-h3
{
	border-bottom: solid 1px #33e;
	margin-bottom: 4px;
	font-size: 24px;
}

/* 無料会員登録ボタン */
.sss-entry
{
	width: 140px;
	font-size: 14pt;
	text-align: center;
	position: relative;
	display: inline-block;
	padding: 0.25em 0.4em;
	text-decoration: none;
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#e93), to(#ffaa00));
	background: linear-gradient(#fc6 5%, #e93 15% 85%, #960 95%);
	border-radius: 8px;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.8);
	border: solid 1px #fc6;
}

/* ログインボタン */
.sss-login
{
	width: 140px;
	font-size: 14pt;
	text-align: center;
	position: relative;
	display: inline-block;
	padding: 0.25em 0.4em;
	text-decoration: none;
	color: #FFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#9e3), to(#aaff00));
	background:linear-gradient(#cf6 5%, #9e3 15% 85%, #690 95%);
	border-radius: 8px;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.8);
	border: solid 1px #cf6;
}

/* ボタン押下時 */
.sss-entry:active,
.sss-login:active {
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.sss-login:hover,
.sss-entry:hover{
	color: #000;
	text-shadow:
		 1px 1px 0px #FFF, -1px -1px 0px #FFF,
		-1px 1px 0px #FFF,  1px -1px 0px #FFF,
		 0px 1px 0px #FFF,  0px -1px 0px #FFF,
		-1px 0px 0px #FFF,  1px  0px 0px #FFF;
}

.sss-top-message-container
{
	display: block;
	margin-left: auto;
	margin-right: auto
}

.sss-top-message
{
	font-size: 20px;
}

/* 日付と時刻 */
.sss-date::before
{
	font-family: "Font Awesome 6 Free";
	content: '\f133';
	margin-right: 4px;
}

.sss-time::before
{
	font-family: "Font Awesome 6 Free";
	content: '\f017';
	margin-right: 4px;
}

/* 戻るボタン */
.sss-back::before
{
	font-family: "Font Awesome 6 Free";
	content: '\f359';
	margin-right: 4px;
}

/* 食事日記 */
.sss-food-diary-contents,
.sss-service-guide-contents
{
	border: 1px solid #ced4da;
	border-radius: 4px;
	padding: 4px 4px 16px 4px;
}
.sss-food-diary-unit
{
	clear: both;
	padding: 4px 8px;
}

.sss-food-diary-headline
{
	margin-left: 16px;
	margin-bottom: 4px;
}

.sss-food-diary-content
{
	margin-left: 32px;
	min-height: 122px;
	background-color: rgba(255,255,255,0.7);
	border-radius: 4px;
	padding: 8px;
}

.food-diary-thumbnail
{
	width: 120px;
	height: 120px;
	object-fit: contain;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 4px;
	/*margin-right: 8px;*/
}

.sss-diary-separator
{
	color: #ced4da;
}

.sss-food-diary-comment
{
	word-break: break-all;
}

.sss-float-left
{
	float: left;
	margin-right: 8px;
}

.sss-clear-both
{
	clear: both;
}

/* スマホでもカラムを横に並べる */
.sss-horizontal-fixed
{
	flex-wrap:nowrap;
}

/**日記一覧のカレンダーとソートの設定*/
.sss-diary-mylist-chart-wrapper
{
	width: 100%;
	height: 400px;
}

.sss-diary-date-search-box {
	margin: 0;
	display: flex;
	width: 100%;
}

/* Flatpickrの背景色を白くする */
.sss-flatpickr-date[readonly],
.sss-flatpickr-time[readonly],
.sss-flatpickr-month[readonly] {
    background-color: #fff !important;
    opacity: 1 !important;
}

@media (max-width: 599px)
{
	.sss-horizontal-fixed .wp-block-column:not(:first-child)
	{
		margin-left: 5px;
	}
}

.sss-text-right {
	text-align: right;
}

/* 料理ボックスコンテナ */
.sss-food-box-container
{
	display: flex;
}

.sss-food-box-col-no-sticky
{
	flex: 1 0 auto;
	display: flex;
}

.sss-food-box-col-sticky
{
	display: flex;
	position: -webkit-sticky;
	position: sticky;
	top: 160px;
	height: 300px;
}


/* 料理ボックス */
.sss-food-box
{
	width: 100%;
	height: 100%;
}

.sss-food-box-search-result,
.sss-food-box-selected,
.sss-food-box-unselected,
.sss-food-box-favorite
{
	border: 1px solid #ced4da;
	border-radius: 4px;
	line-height: 26px;
	height: 160px;
	overflow-y: scroll;
	position: relative;
	padding: 4px 8px;
	background-color: #fff;
}

.sss-food-box-selected
{
	height: 100%;
}

/* 選択されていない料理（リスト内） */
.sss-food
{
	font-size: 0.75em;
	border-width: 1px;
	border-style: solid;
	background: linear-gradient(#F0F7FF 5%, #DAE9FE 20% 80%, #0360DC 95%);
	border-color: #eee;
	border-radius: 8px;
	margin: 2px 1px;
	padding: 1px 4px;
	/* やりたくないが、折り返しを許可しないと左右に並べた料理ボックスが一定の幅以下にならず重なってしまう。 */
	/*white-space: nowrap;*/
	cursor: pointer;
}

.sss-food:hover{
	color: #FFF;
	text-shadow:
		 1px 1px 0px #000, -1px -1px 0px #000,
		-1px 1px 0px #000,  1px -1px 0px #000,
		 0px 1px 0px #000,  0px -1px 0px #000,
		-1px 0px 0px #000,  1px  0px 0px #000;
}

/* 選択された料理（右ボックス内で色を変えて表示） */
.sss-food-box-selected .sss-food-selected
{
	border-color: #eee;
	color: #000;
	background: linear-gradient(#fff 5%, #fed 20% 80%, #f98 95%);
}

.sss-food-box-selected .sss-food-selected:hover{
	color: #FFF;
	text-shadow:
		 1px 1px 0px #000, -1px -1px 0px #000,
		-1px 1px 0px #000,  1px -1px 0px #000,
		 0px 1px 0px #000,  0px -1px 0px #000,
		-1px 0px 0px #000,  1px  0px 0px #000;
}


/* 選択された料理（リスト内で暗転させて表示） */
.sss-food-selected
{
	border-color: #eee;
	color: #fff;
	background: linear-gradient(#02306C 5%, #0360DC 20% 80%, #C2DBFE 95%);
}

.sss-food-selected:hover{
	color: #000;
	text-shadow:
		 1px 1px 0px #FFF, -1px -1px 0px #FFF,
		-1px 1px 0px #FFF,  1px -1px 0px #FFF,
		 0px 1px 0px #FFF,  0px -1px 0px #FFF,
		-1px 0px 0px #FFF,  1px  0px 0px #FFF;
}

.sss-food-mismatched
{
	display: none;
}

/* 一般装飾 */
.sss-g-user-name
{
	color: #393 !important;
}
.sss-food-diary-date
{
}

.sss-g-nutrient
{
	margin: 0px 0px;
	padding: 0px 4px;
	/*
	text-decoration: underline solid #9ef 10px;
	text-underline-offset: -10px;
	background: linear-gradient(#fff 70%, #9ef 80% 90%, #fff 100%);
	*/
}
.sss-g-nutrient-protein
{
	color: #fff;
	background: #f48;
}
.sss-g-nutrient-vitamin,
.sss-g-nutrient-vitamin-a
{
	color: #fff;
	background: #5f0;
}
.sss-g-nutrient-vitamin-d
{
	color: #fff;
	background: #0af;
}
.sss-g-nutrient-calcium
{
	color: #fff;
	background: #33f;
}
.sss-g-nutrient-dairy
{
	color: #fff;
	background: #b3f;
}
.sss-g-nutrient-sugar
{
	color: #fff;
	background: #fa0;
}
.sss-emphasize
{
	font-size: 1.5em;
	font-weight: bold;
}
.sss-g-food
{
	background: linear-gradient(transparent 50%, #fdc 50% 80%, transparent 80%);
	/*white-space: nowrap;*/
}
.sss-g-food:hover{
	background: linear-gradient(transparent 50%, #cce0ff 50% 80%, transparent 80%);

}
.sss-g-symptom
{
	font-weight: bold;
	margin: 0px 0px;
	padding: 0px 0px;
	color: #30f;
	/*
	text-decoration: underline solid #f9c 10px;
	text-underline-offset: -10px;
	background: linear-gradient(#fff 70%, #99f 80% 90%, #fff 100%);
	*/
}
.sss-g-food-category
{
	padding: 0px 4px;
	border-radius: 100vh;
	color: white;
	text-shadow: 1px 1px 2px #000;
	background-color: #5eb;
	text-decoration: none;
}
.sss-g-health-index
{
	color: white;
	border-radius: 15px;
	padding: 1px 8px;
	box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 1px 1px inset;
	-webkit-box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 1px 1px inset;
	-moz-box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 1px 1px inset;
	text-shadow:
		 0px -1px 1px rgba(0, 0, 0, 0.1),
		 1px -1px 1px rgba(0, 0, 0, 0.2),
		 1px  0px 1px rgba(0, 0, 0, 0.5),
		 1px  1px 1px rgba(0, 0, 0, 0.8),
		 0px  1px 1px rgba(0, 0, 0, 0.9),
		-1px  1px 1px rgba(0, 0, 0, 0.8),
		-1px  0px 1px rgba(0, 0, 0, 0.5),
		-1px -1px 1px rgba(0, 0, 0, 0.2);
}

.sss-g-health-index::after
{
	font-family: "Font Awesome 6 Free";
	font-weight: normal;
	margin-left: 4px;
	color: black;
	text-shadow: none;
}

.sss-g-health-index-grade1::after{content: '\f59a';}
.sss-g-health-index-grade2::after{content: '\f582';}
.sss-g-health-index-grade3::after{content: '\f118';}
.sss-g-health-index-grade4::after{content: '\f11a';}
.sss-g-health-index-grade5::after{content: '\f57a';}
.sss-g-health-index-grade6::after{content: '\f5c8';}

.cat-link-4,
.cat-label-4,
.sss-g-free
{
	background: linear-gradient(-45deg, #a51, #ec8, #b62, #ec8, #a51);
	padding: 4px 8px 2px 8px;
	color: #fff;
	font-size: 0.8em;
	text-shadow:
		 0px -1px 1px #840,
		 1px -1px 1px #840,
		 1px  0px 1px #840,
		 1px  1px 1px #840,
		 0px  1px 1px #840,
		-1px  1px 1px #840,
		-1px  0px 1px #840,
		-1px -1px 1px #840;
	border: 1px solid #a51;
}

.cat-link-5,
.cat-label-5,
.sss-g-silver
{
	background: linear-gradient(-45deg, #ccc, #fff, #ddd, #fff, #ccc);
	padding: 4px 8px 2px 8px;
	color: #fff;
	font-size: 0.8em;
	text-shadow:
		 0px -1px 1px #888,
		 1px -1px 1px #888,
		 1px  0px 1px #888,
		 1px  1px 1px #888,
		 0px  1px 1px #888,
		-1px  1px 1px #888,
		-1px  0px 1px #888,
		-1px -1px 1px #888;
	border: 1px solid #ccc;
}

.cat-link-6,
.cat-label-6,
.sss-g-gold
{
	background: linear-gradient(-45deg, #ec3, #ffc, #fe5, #ffc, #ec3);
	padding: 4px 8px 2px 8px;
	color: #fff;
	font-size: 0.8em;
	text-shadow:
		 0px -1px 1px #b80,
		 1px -1px 1px #b80,
		 1px  0px 1px #b80,
		 1px  1px 1px #b80,
		 0px  1px 1px #b80,
		-1px  1px 1px #b80,
		-1px  0px 1px #b80,
		-1px -1px 1px #b80;
	border: 1px solid #ec3;
}

.cat-link-7,
.cat-label-7,
.sss-g-platinum
{
	background: linear-gradient(-45deg, #000, #666, #222, #888, #111);
	padding: 4px 8px 2px 8px;
	color: #000;
	font-size: 0.8em;
	text-shadow:
		 0px -1px 1px #fff,
		 1px -1px 1px #fff,
		 1px  0px 1px #fff,
		 1px  1px 1px #fff,
		 0px  1px 1px #fff,
		-1px  1px 1px #fff,
		-1px  0px 1px #fff,
		-1px -1px 1px #fff;
	border: 1px solid #000;
}

.sss-g-staff
{
	background: linear-gradient(-45deg, #aff, #aaf, #faf, #faa, #ffa, #afa, #aff, #aaf);
	padding: 4px 8px 2px 8px;
	color: #fff;
	font-size: 0.8em;
	text-shadow:
		 0px -1px 1px #ff0,
		 1px -1px 1px #6f6,
		 1px  0px 1px #0ff,
		 1px  1px 1px #66f,
		 0px  1px 1px #f0f,
		-1px  1px 1px #f66,
		-1px  0px 1px #ff0,
		-1px -1px 1px #6f6;
	border: 1px solid #ccc;
}

.sss-g-price
{
	font-size: 1.2em;
	color: blue;
	font-weight: bold;
}

/* 未使用？ */
.sss-food-diary-ranking
{
	font-weight: bold;
}

.sss-hover:hover
{
	cursor: pointer;
	background-color: #C2DBFE;
}

.sss-hover-no-pointer:hover
{
	background-color: #C2DBFE;
}

/* アコーディオンにカーソルを合わせた際にわかりやすくする。 */
.sss-accordion-button {

}

/*日記テーブル用 */
.sss-diary-table {
	border-top: 1px solid;
	border-bottom: 1px solid;
	width: 100%;
}
/*アコーディオン全体 */
.sss-accordion-wrapper {
	border-collapse: collapse;
	border-color: rgba(0, 0, 0, 0.1);
	background-color:rgba(0,0,0,0);
}
#diaryTable_wrapper table tbody tr{
	background-color:rgba(0,0,0,0);
}
#enqueteTable thead tr,
#enqueteTable tbody tr{
	background-color:rgba(0,0,0,0);

}
#enqueteTable tbody tr td.sorting_1{
	background-color:rgba(200,200,200, 0.5);
}
/*アコーディオン1行 */
.sss-accordion-element {
	border-collapse: collapse;
	height: 100%;
	width: 100%;
	padding :1% 5%;
}
/*アコーディオン1行に表示する情報 */
.sss-accordion-info {
	position:relative;
}

.sss-accordion-left-element {
	padding-left:10px;
	text-align:left;

}
.sss-accordion-right-element{
	text-align:right;
	white-space: nowrap;

}

.sss-accordion-middle-element{
	text-align:right;
}
.sss-accordion-middle-element:before{
	font-family: "Font Awesome 6 Free";
    content: '\f254';
    margin-right: 4px;
}

/*上記のafter(キャレットの実装) */
.sss-accordion-info::before {
	position:absolute;
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-solid);
	content: '\f105';
	top:30%;
}
/*キャレットの回転 */
.sss-accordion-info.open::before {
	transform:rotate(90deg);
}

/*アコーディオンの詳細 */
.sss-accordion-content {
	max-height: 300p;
	padding: 8px;
}

/*レビューボタンのポジション */
.sss-accordion-review-button {
	float: right;
}


.sss-datatables {
	width: 100%;
	table-layout:fixed;
	/* border-collapse: collapse !important; */
}

/*データテーブル検索ボックスの設定*/
#diaryTable_filter input,
#enqueteTable_filter input,
#enqueteTable_length select
{
	display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	background-color: white;
}

.sss-health-graph{
	position: relative;
	width:80%;
	height:50vh
}

.acd-check{
    display: none;
}
.acd-label{
    background: #333;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
}
.acd-content{
    border: 1px solid #333;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
    height: 40px;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

.comment-title,
.comment-reply-title
{
	font-size: 16px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1145px以上1199px以下*/
/*ワードプレス側の表示でレイアウト崩れが起きないための処置*/
@media screen and (min-width: 1145px) and (max-width: 1199px) {
	/*トップページの内部コンテンツの位置を調整*/
	.home.page .main {
	    background-color: transparent;
		margin-left: 30px;
	    margin-right: 0;
	    width: 88%;
	}

	/*サイドバーがないワードプレス画面の幅*/
	.no-sidebar .wrap{
		width: 950px;
	}
}
/* end of @media screen and (min-width: 1145px) and (max-width: 1199px) */

/*1023px以下*/
@media screen and (max-width: 1023px){
	/*トップページ記事一覧*/
	.sss-top-article-list li
	{
		height: 280px;
	}
}
/* end of @media screen and (max-width: 1023px) */

/*991.98px以下*/
@media screen and (max-width: 991.98px){
	.sss-accordion-wrapper{
		border-top: 1px #ccc dotted;
	}
}
/* end of @media screen and (max-width: 991.98px) */

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

/*767.33px以下(トップページ記事一覧用に追加)
小数点以下にも対応することで、レイアウト崩れをなくす。*/
@media screen and (max-width: 767.33px){
	/*トップページ記事一覧*/
	.row > .sss-article-col
	{
	    padding-right: 10px;
		padding-left: 0px;
	}

	.sss-top-article-list
	{
		height: auto;
		padding-bottom: 100px;
	}

	.sss-top-article-list li
	{
		height: 320px;
		margin-bottom: 5px;
	}

	.pagination
	{
		list-style: none;
		display: flex;
		justify-content: center;
		padding: 5px;
		white-space: nowrap;
		font-size: 12px;
	}
	/*ここまでトップページ記事一覧*/

	.sss-health-index-title
	{
		display: none;
	}
}
/* end of @media screen and (max-width: 767.33px) */

/*510px以下(トップページ記事一覧用に追加)*/
@media screen and (max-width: 510px){
	.pagination a
	{
		padding: 7px;
	}

	.sss-phrase-left {
		max-width: calc(100% - 100px);
	}
}
/* end of @media screen and (max-width: 510px) */

/*480px以下*/
@media screen and (max-width: 480px){
	/*トップページ記事一覧*/

	.sss-top-article-list
	{
		height: auto;
		padding-bottom: 150px;
		padding-right: 15px;
		position: relative;

	}

	.sss-top-article-list li
	{
		height: 270px;
		margin-bottom: 5px;
	}

	.pagination
	{
		list-style: none;
		display: flex;
		justify-content: center;
		padding: 5px;
		position: absolute;
		bottom: 30px;
		right: 10px;
	}

	.pagination a
	{
		padding: 7px;
	}

	.pagination .pageNumbers
	{
		border: none;
		position: absolute;
		bottom: 15;
		right: 30;
		margin-top: 40px;
	}
	/*ここまでトップページ記事一覧*/
	
	/* 日記アコーディオンのレイアウト崩れ防止 */
	.sss-accordion-pre
	{
		font-size: 0.7em;
	}
	.sss-accordion-main
	{
		font-size: 0.8em;
	}
}
/* end of @media screen and (max-width: 480px) */

/*389px以下(トップページ記事一覧用に追加)*/
@media screen and (max-width: 389px){
	.sss-top-article-list li
	{
		height: 260px;
		margin-bottom: 5px;
	}

	.pagination a
	{
		padding-right: 3px;
		padding-left: 3px;
	}

	.sss-g-health-index
	{
		margin-left: 8px;
	}

	.sss-accordion-mediaquery-element{
		display:none;
	}
}
/* end of @media screen and (max-width: 389px) */