/*
Author: CafeLPE
Author URI:
Version:0.1
*/

/*
 * コメントの書き方 (LPE 2023-9-25スタイル)
 * 1 作動するタイミング、画面。
 * 2 期待される効果。
 * 3 想定している呼び出し方。
 */

/*
.my-social-instagram {
	border-radius : 45%;
  	padding       : 6px 21px;
	color         : #7f4600;
	background    : #ffff99;  
  	box-shadow    : 4px 4px 4px #666666;
	text-align    : center;
}

.my-social-instagram a {
	text-decoration: none;
	font-weight: bold;
	animation     : rainbow2 1.5s infinite;
}

.my-social-twitter {
	border-radius : 45%;
  	padding       : 6px 21px;
	color         : #7f4600;
	background    : #ffff99;  
  	box-shadow    : 4px 4px 4px #666666;
	text-align    : center;
}
.my-social-twitter a {
	text-decoration: none;
	font-weight: bold;
	animation     : rainbow2 2.5s infinite;
}*/

.whitecat-text-border {
	height: 100%;
}

.whitecat-text-border .wp-block-media-text__content {
	height: 100%;
	padding: 20px; /* 商品説明枠の空欄 */
}

	.whitecat-text-border .wp-block-media-text__content .wp-block-preformatted {
	padding: 20px; /* 商品説明文字の空欄 */
	border-radius: 24px 20px 24px 20px;
	width: 100%;
	height: 100%;
	opacity: 0.92;
	margin: auto !important;
	display: block;
}

.whitecat-text-border .wp-block-media-text__media {
	padding: 9px;
	z-index: 20;
}

.whitecat-text-border .wp-block-media-text {
	width: 100%;
	height: 100%;
}

.whitecat-text-noneborder .wp-block-media-text__media {
	padding: 9px;
	z-index: 20;
}

.whitecat-text-noneborder .wp-block-media-text__content {
	padding: 9px;
	margin: 0;
	display: block;
	z-index: 20;
}

.whitecat-text-noneborder2 .wp-block-media-text__media {
	padding: 9px;
}

.whitecat-text-noneborder2 .wp-block-media-text__content {
	padding: 9px;
	margin: 0;
	display: block;
	z-index: 20;
}

.whitecat-text-noneborder {
	/* 画像　画像　画像　文字の、２・３の間をうめるため、、画像１２を下げる */
	transform: translate(0, 29px);
}

.whitecat-text-noneborder2 {
	/* 画像　画像　画像　文字の、２・３の間をうめるため、、画像１２を上げる */
	transform: translate(0, -29px);
}
/*
 * 文字がゆれるコード(廃止)
.poyon1 .coffee {
 	animation: poyoyon1 0.6s ease-in-out forwards;
}

.poyon2 .coffee {
 	animation: poyoyon2 0.6s ease-in-out forwards;
}

.poyon3 .coffee {
 	animation: poyoyon3 0.6s ease-in-out forwards;
}
*
@keyframes poyoyon1 {
  0%  {
    transform: translate(0, 0);
  }
  25%  {
    transform: translate(-3px, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(+3px, 0);
  }
  100%  {
    transform: translate(0, 0);
  }
}

@keyframes poyoyon2 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(+3px, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  75%  {
    transform: translate(-3px, 0);
  }
  100%  {
    transform: translate(0, 0);
  }
}

@keyframes poyoyon3 {
  0%  {
    transform: translate(0, 0);
  }
  33%  {
    transform: translate(-3px, 0);
  }
  66% {
    transform: translate(+3px, 0);
  }
  100%  {
    transform: translate(0, 0);
  }
}
*/

/*
 * 1 作動するタイミング、画面。
 *   トップページの画像
 *   whitecat-whthcocoon.js
 * 2 期待される効果。
 *   画像が下から上がってくる
 * 3 想定している呼び出し方。
 *   画像を、opactiy: 0でレイアウトし、fadeUpAnimeクラスを付けると、下から表示される
 */

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(150px);
	}

	to {
		opacity: 1;	
		transform: translateY(0);
	}
}

/* 余白をけずりたい (効かなくなったので廃止) 
.footer-in {
	line-height: 0px;
	font-size: 0;
	padding: 0;
	padding-bottom: 10px;
}
.footer-site-logo-image {
	width: 50px;
	height: 50px;
}*/

.header .site-logo-image {
	overflow-y: visible !important;
	max-height: 100px !important; /* 60px important を上書き */
	height: 100px !important;
	width: auto !
}
/*
.header-container {
	position: relative;
	z-index: 20;
}
/*
.header-site-logo-image {
	position: relative;
	top: 25px;
	overflow: visible;
	opacity: 0.8;
}*/

.pict-center {
	text-align: center;
	align-self: center;
	width: 100%;
	height: 100%;
	padding: 15px;
}

.wp-block-media-text img {
	opacity: 0;
}

.is-animated img {
	opacity: 0.3;
	animation: popup 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

.is-animated-late img {
	opacity: 0.3;
	animation-delay: 1s;
	animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes popup {
	0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1.0);
	}
	80%, 100% {
		opacity: 1;
	}
}

/* プライス関連 

.wp-block-media-text__content > .coffee {
	position: relative;
}
*/

/* トップページリンク */

/* 全般 */

.coffee {
/*	color         : #7f4600;*/
	color: #505050;
	font-size: 90%;
	background: white;
}

/* トップページリンク */

.coffee a {
	text-decoration: underline;
 	cursor        : pointer;
	display       : inline-block;
  	padding       : 4px 7px 4px 7px;
	color         : #0044aa;

/*
	margin        : 15px;
 	animation     : rainbow 3s infinite;

	-webkit-transition: all 0.3s;
    transition: all 0.3s;*/
}

.coffee a:before {
    font-family: FontAwesome;
	color: orangered;
    content: " \f1c5"; /* https://web-manabu.com/fontawesome4-7-list/ */
}

.coffee a:hover {
	transform : scale(105%);
	/*
 	border        : 1px solid chocolate;
 	box-shadow    : 1px 1px 1px chocolate;
	border-radius : 20%;*/
	color:        orange;
}

/* トップページ商品名 */

.coffee .bold-blue {
	width         :  100%;
	border-radius : 30% 10% 10% 10%;
	padding       : 7px 20px 7px 20px;
	color         : chocolate;
	background    : #eeeeee;
  	box-shadow    : 3px 3px 3px #666666;
	font-size     : 120%;
	text-align: center;
}

/* トップページ 値段ほか
 * 中央より右寄せ、これに先立つテキストは、
 * かぶらないように、それ相応に短くする 
 * 右寄せにするため、ひとつ上に、Fixed以外のPositionを
 * 割り当てて、基点として設定する */

.wp-block-media-text__content {
	position: relative;
}

.coffee .blue {
	color: #808000;
	width         : 100%;
	position      : absolute;
	right : 30%;
	margin-right: 20px;
	text-align: right;
	font-size     : 95%;
}

@media screen and (max-width: 900px) {
	.coffee .blue {
		right : 5%;
	}
}

@media screen and (max-width: 600px) {
	.coffee .blue {
		right : 12%;
	}
}

/* トップページ 売り切れ表示 */

.coffee .red {
	color: #402000;
	width         : min(60%, 300px);
	position      : relative;
	left : min(10%, 20px);
	padding       : 10px 5px;
	font-size     : 120%;
}

/* トップページ 詳細文書 */

.coffee .green {
	color: #707070;
	width         : min(60%, 300px);
	position      : relative;
	left : min(10%, 20px);
	padding       : 10px 5px;
	font-size     : 95%;
}

/* コーヒー詳細ページ */

.coffee2 {
	background: none;
	border: none;

	width: clamp(300px, 75%, 500px) !important;
	display: inline-block;
	position: relative;
	transform: translate(-50%);
	left: 50%;
	color         : #402000;
	font-size: 85%;
}

/* コーヒー詳細ページ　最初の1行 */
.coffee2 .bold-blue {
    position: relative;
	font-weight: normal;
	display: inline-block;
	left : 50%;
	transform     : translate(-50%);
	color : #402000;
	text-align: center;
}

/* コーヒー詳細ページタイトル */
.coffee2 .bold-green {
	width         : min(68%, 500px);
    position: relative;
	font-weight: normal;
	display: inline-block;
	font-size     : 130%;
	left : 50%;
	transform     : translate(-50%);
	padding       : 6px 2px;
	color         : chocolate;
	background    : #eeeeff;
	border-radius: 19px 5px 18px 5px;
  	box-shadow  : 3px 3px 3px #666666;
	font-family: 'use-uchiyama' !important;
    text-align : center;
}

@media screen and (max-width: 1055px) {
	.coffee2 .bold-green {
		font-size   : 105%;
	}
}

/* コーヒー詳細ページ日本語タイトル */

.coffee2 .bold-red {
	width         : min(60%, 450px);
    position: relative;
	text-align: center;
	font-weight: normal;
	display: inline-block;
	left : 50%;
	font-size: 105%;
	padding-top: 8px;
	transform     : translate(-50%);
	color         : chocolate;
	margin-bottom : 10px;
}

/* コーヒー詳細ページ　説明文 */

.coffee2 .red {
	width: clamp(200px, 85%, 500px) !important;
	display: inline-block;
	position: relative;
	transform: translate(-50%);
	left: 50%;
	text-align: center;
	/*	color         : #7f4600;*/
	color         : #70a000;
	font-size: 100%;
}

.coffee2 .blue {
	width: clamp(200px, 85%, 500px) !important;
	display: inline-block;
	position: relative;
	transform: translate(-50%);
	left: 50%;
	text-align    : center;
	color         : #907030;
	font-size: 100%;
}

@keyframes rainbow {
	0% {
		color: red;
	}
	33% {
	  	color: blue;
	}
	66% {
	  	color: green;
	}
	100% {
	  	color: red;
	}
}

@keyframes rainbow2 {
	0% {
		color: red;
	}
	33% {
		color: blue;
	}
	66% {
		color: green;
	}
	100% {
		color: red;
	}
}
/*
.whitecat-map input {
	display: none; // label でコントロールするので input は非表示に
}

.whitecat-map {
	display: none; 
}

#whitecat-map-window {
	width: 400px;
	height: 400px;
	background-color: #00707070;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#whitecat-map-window img {
	width: 333px;
}

input#whitecat-map-check {
	display: none;
}

input#whitecat-map-check:checked + .whitecat-map {
	display: block;
	z-index: 9999;
	//background-color: #50000070;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.whitecat-map .close {
	cursor:pointer;
	position: absolute;
	top: 4px;
	right: 4px;
}

*/

.contact_button {
  font-size: 100%;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  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;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.contact_button {
  font-weight: normal;

  color: #fff;
  border-radius: 0;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(40%, #ff3cac),
    to(#562b7c)
  );
  background-image: -webkit-linear-gradient(left, #ff3cac 40%, #562b7c 100%);
  background-image: linear-gradient(90deg, #ff3cac 40%, #562b7c 100%);
}

.contact_button:after {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;

  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ff3cac),
    color-stop(#562b7c),
    to(#2b86c5)
  );

  background-image: -webkit-linear-gradient(left, #ff3cac, #562b7c, #2b86c5);

  background-image: linear-gradient(90deg, #ff3cac, #562b7c, #2b86c5);
}

.contact_button:hover {
  color: #fff;
}

.contact_button:hover:after {
  opacity: 0;
}
/*
 * h2 {
	width: 80% !important;
	margin: auto;
	text-align: center;
}*/

/*
 * 1 作動するタイミング、画面。
 *   トップページのタイトル
 * 2 期待される効果。
 *   ロゴと２重になるので、タイトルを省略する
 * 3 想定している呼び出し方。
 *   ロゴの文字がセンターになるタイミングの画面サイズ
 */
@media screen and (max-width: 834px) {
	.main-title {
		display: none;
	}
}

.top-header-text {
	font-size: 100% !important;
	text-align: center;
	margin: 0px;	
	padding: 0;
	border: none;
	background: none;
	color: chocolate;
}

.top-header-text .blue {
	color: chocolate !important;
}

.top-header-image {
	width: min(70%, 350px);
	margin: auto;
}

.top-header-timetable {
	padding: 10px 2.2vw 10px 2.2vw;
	font-size: 85% !important;
	max-width: min(80%, 430px);
	margin: auto;
	color: #505050;
	background: #F0F0F0;
 	border: 1px solid #E0E0E0;
	border-radius: 15px;
}

.top-header-timetable2 {
	padding: 10px 20px 10px 20px;
	font-size: 85% !important;
	font-style: above;
	max-width: min(75%, 380px);
	margin: auto;
	background-color: white;
	color: #A05050;
	border-radius: 6px;
}

.top-newyear a {
	text-decoration: green underline dotted;
	transition: all 0.3s ease-in-out;
}

.top-newyear a:hover {
	font-size: 110%;
}

.access-supplement{
	/*　border: none;*/
	padding: 10px 2.5vw 10px 2.5vw;
	font-size: 100% !important;
	max-width: min(80%, 430px);
	margin: auto;
}

.top-header-timetable-overhanging {
	border: none;
	padding: 0px 2.5vw 0px 2.5vw;
	text-align:center;
	/*transform:translate(0,-15px);*/
	transition: all 0.3s ease-in-out;
/*	max-width: min(70%, 430px);*/
	margin: 1px;
	color: #505050;
}
.top-header-timetable-overhanging img{
/*	transform:translate(0,-15px);*/
	transition: all 0.3s ease-in-out;
	margin: 0px;
	padding: 0px;
	height: 40px;
	transform: scale(65%);
}
.top-header-timetable-overhanging img:hover{
/*	transform:scale(0.9,1.1) translate(0,-15px);*/
/*	transform:translate(0,-15px);*/
	opacity: 0.7;
}

.menu-header {
    width: 100%;
    margin: auto;
	padding: 0;
	margin: 0;
}

.menu-header li {
	padding: 0;
	margin: 0;
	flex-grow: 1;
	width: 100%;
	max-width: 20%;
}

.whitecat-sns-icon {
	width: 110px;
	padding: 15px;
}

.whitecat-sns-icon a {
	  transition: all 0.3s ease-in-out;
}

.whitecat-sns-icon a:hover {
  opacity: 0.7;
}

.menu-image img {
	-webkit-transition: all 0.3s ease;
    transition: all 0.3s 0s ease;
}

.menu-image img:hover {
	transform: scale(1.22);
}
/*
.menu-image-mobile img {
	-webkit-transition: all 0.3s ease;
    transition: all 0.3s 0s ease;
}

.menu-image-mobile img:hover {
	transform: scale(1.1);
}*/

.article h3 {
	padding: 9px !important;
	background: #ffffcc;
}

.contact-width {
	width: clamp(105px, 70%, 800px);
	margin: auto;
}

.post-width {
	width: clamp(200px, 85%, 800px);
	margin: auto;
}

.post-width2 {
	width: clamp(120px, 85%, 700px);
	margin: auto;
	padding-left: 30px;
	padding-right: 30px;
	background: white;
	font-family: "Yu Gothic", "YuGothic", "Meiryo" !important;
}

.post-white {
	background: white;
	border-radius: 34px 0 0 0 ;
	border: 1px solid yellowgreen;
}

.post-width2-title {
	width: clamp(120px, 85%, 700px);
	border: none;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
	background: white;
	font-family: "Yu Gothic", "YuGothic", "Meiryo" !important;
}

.post-width60 {
	width: clamp(180px, 60%, 700px);
	border: none;
	margin: auto;
	border-radius: 5px 5px 5px 5px;
	border: 1px solid yellowgreen;
}


.lpe-width {
	width: clamp(300px, 85%, 820px);
	height: auto;
	margin: auto;
}

.lpe-width  img {
	width: clamp(300px, 85%, 600px);
	height: auto;
	margin: auto;
}

article.post-252 .entry-content>p {
	width: clamp(300px, 85%, 390px);
	margin: auto;
	padding-top: 10px;
	padding-bottom: 40px;
	color: #00a0ff !important;
}

article.post-252 .wpcf7-submit {
	padding: 8px;
	border-radius: 24px 20px 24px 20px;
  	box-shadow: 4px 4px 4px #e0a0ff;
	font-size: 110%;
	width: clamp(50px, 30%, 150px) !important;
	background: lightcyan !important;
	color: #00a0ff !important;

	-webkit-transition: all 0.3s ease;
    transition: all 0.3s 0s ease;
}

article.post-252 .wpcf7-submit:hover {
	transform     : translate(-3px, -3px) scale(1.1, 1.1);
/*	color: lightcyan !important;*/
}

article.post-252 .wpcf7-form p:last-of-type {
	text-align: right !important;
}

.page-id-13 .entry-title {
	display: none; 
}

.about-lpe {
	font-family: 'use-LemonTuesday' !important;
	font-size: 190% !important;
	color: #40d0c0 !important;
}

.about-menu {
	font-family: 'use-uchiyama' !important;
	font-size: 150% !important;
	color: chocolate;
}

.coffee .bold-green {
	color: #40d0c0 !important;
	font-size: 110% !important;
}

.coffee img {
	margin-left: 30px !important;
	margin-top: 20px !important;
}


/* 
 * 担当　Y.Syntarou
 * 日付　2023/4/24
 * ステータス　実験
 * 目的　SNSリンクを少し小さくする、空白はそのまま
 */
.wp-block-social-links {
	margin-top: 25px;
	margin-bottom: 20px;
	max-width: 400px;
	margin: auto;
}

.wp-block-social-links li {
	transform: scale(0.90);
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 5px;
	padding-right: 5px;
}

.wp-block-social-links li:hover {
	transform: scale(0.95);
}

.main-title {
	text-align: center;
	font-size: 285%;
	color: #40e0d0;
	font-family: 'use-LemonTuesday' !important;
	margin-bottom: 0 !important;
}

.main-title-japanese {
	text-align: center;
	color: #40e0d0;
	color: #50c0e0;
	font-size: 130%;
	text-shadow: 2px 2px lightgreen; 
}

.mobile-menu-buttons .home-menu-button {
	display: none;
}

.mobile-menu-buttons .sidebar-menu-button {
	display: none;
}

/* PCのメニューの IMGタグ 
.navi img {
	margin-top: 10px;
	width: 40px;
	height: auto;
}*/

/* モバイルのメニューの IMGタグ */
.navi-menu-content .menu-drawer li:nth-child(4) img {
	transform: translate(3px, 4px);
	height: 37px;
}
.navi-menu-content .menu-drawer li:nth-child(5) img {
	transform: translate(3px, 4px);
	height: 31px;
}


.navi-footer{
	display: none;
}

body.home nav.navi-footer{
	display: block;
}

nav.navi-footer a img {
	transform: translate(0, -25px);
}

.navi-footer a:hover {
	background: none;
}

/* トップページのSNSシェアボタン変更 */

.sns-share-message {
	display: none;
	width: clamp(100px, 40%, 300px) !important;
	margin: auto;
	font-weight: bold;
	color: #40e0d0;
	background-color: #faf8ef;
  	border-top: 2px black solid;
  	border-bottom: 2px black solid;
	margin-bottom : 30px;
	padding: 3px;
}

.sns-share-buttons {
	display: auto;
	transform: scale(0.9);
	width: clamp(350px, 60%, 600px);/*この近辺は次回調整*/
	margin: auto;
	padding: 0;
}

/*body.home .sns-share-buttons {
	display: block;
}
 // トップページのSNSシェアボタン変更 */

body.home .sns-share-message {
	display: block;
}

.sns-share-buttons .copy-button {
	background-color: #40d0c0;
}

.wp-block-media-text__media  {
	position: relative;
}

.wp-block-media-text__media  img {
	width: 90%;
	margin-left: 5%;
}
.wp-block-media-text__content  img {
	width: 90%;
	margin-left: 5%;
}

.wp-block-media-text__media::after  {
	position: absolute;
    bottom: 20px;
    left: auto;
    display: block; 
	width: calc(100% - 30px);
	font-size: 140%;
    text-align: center;
	color: white;
	font-weight: bold;
    content: attr(alt);
    font-weight: bold;
	/* 夏
   -webkit-text-stroke: 1px #40e0d0;
    text-stroke: 1px #40e0d0;
	*/
	/* 冬 */
    -webkit-text-stroke: 1px #d0e020;
    text-stroke: 1px #d0e020;
	text-shadow: 0.1em 0.1em 0.5em #262;
	/* text-shadow: 0.2em 0.2em 0.5em #131, -0.2em 0.2em 0.5em  #262, 0 0.2em 0.5em #262; */
}

.wp-block-media-text__content::after {
	position: absolute;
    bottom: 20px;
    left: auto;
    display: block;
    width: calc(100% - 30px);
	font-size: 140%;
    text-align: center;
	color: white;
	font-weight: bold;
    content: attr(alt);
    font-weight: bold;
	/* 夏
   -webkit-text-stroke: 1px #40e0d0;
    text-stroke: 1px #40e0d0;
	*/
	/* 冬 */
    -webkit-text-stroke: 1px #d0e020;
    text-stroke: 1px #d0e020;
	text-shadow: 0.1em 0.1em 0.5em #262;
	/*text-shadow: 0.2em 0.2em 0.5em #131, -0.2em 0.2em 0.5em  #262, 0 0.2em 0.5em #262;袋文字*/
}

.wp-block-media-text img {
	border-radius: 10px;
}

.powericon img {
	width: 70px;
	height: auto;
	border-radius: 15px;
}

.width70 {
	width: max(70%, 550px);
	margin: auto;
}
/*
ul.lcp_catlist li {
list-style:none;
border-bottom: 1px solid #CCCCCC;
padding-top: 10px;
padding-bottom: 50px;
}

ul.lcp_catlist li img {
 float: left;
 margin-right: 30px;
}*/
.post-content ul.lcp_catlist li { background-image: none; padding-left: 0;clear:both;} 
.lcp_thumbnail{ float:left; margin:0px 10px 5px 0px; height: 100px; width:100px;}
.lcp_catlist li:after {content:'.';height:20px;visibility:hidden;display:block;clear:both; } 
.lcp_title { float: right;font-size: 20px; }
ul.lcp_catlist {
  list-style: none;
	width:500px;
	left:150px !important;
	right:auto;
}

.page-id-2222 .article-header {
	display: none;
}
/*トップ文章が変な場所で改行にならないよう、一定幅以下の時のみ改行追加*/
@media screen and (min-width: 400px){
.br-sp {display: none; }
}

.top-special{
	width: min(90%, 500px);
	font-size: 110%;
	text-align: center;
	margin: auto;
	padding: 3px;
	border: none;
	color: chocolate;
	background: white;
 	border: 1px solid #E0E0E0;
	border-radius: 15px;
}

.top-special a{
	transition: all 0.5s;
	font-size: 110%;
	color: orange;
	text-decoration: none;
 	text-shadow: 1px 1px 1px orange;
}

.top-special a:hover {
	color: #80FFEE;
	font-size: 120%;
	/*transform: scale(2.0);*/
	color: chocolate;
}

.lunch_explain{
	text-align: center;
}