/*
Theme Name: WING-AFFINGER5 Child
Template: affinger5
Descript
ion: ver20180831以上対応
Version: 20180831
*/
@font-face {
     font-family: 'font_woff';
     font-style: normal;
     font-weight: 400;
     src: url('https://www.shonan-organic.com/wp/wp/wp-content/themes/affinger5/vendor/slick/fonts/slick.woff') format('woff');
	
   
 }

p.normal img{
	margin:5px;
	padding:0 !important;	
	
}
p.normal{
	line-height:110%;
	padding:5px 0 10px!important;	
	text-align:center;
	font-size:90%;
	display:block;
	margin-top:0;

}

.st-cardlink-card a
{
	color:black !important;
	text-shadow:none !important;	
	font-size:90%;
	font-weight:normal;	
	background:no-repeat;		
}
h4{
	clear:none;
}

/*dl dt{color:blue;
	font-weight:bold;
    padding:5px 0 5px 0;
	margin-top:20px;}	*/

.example01{
	font-size:90%;
}
.txt_advice01{
	font-size:100%;
	display:block;
	
}

h4.menu_underh2,
p.st-widgets-title{
  line-height:36px;
	background-size:contain;
  background:url(https://www.shonan-organic.com/wp-content/uploads/2019/09/h2-02.jpg)  !important;
  color:#333333;
  display:block;
	text-align:center;
	margin:15px 0 0 0;
}


/*関連記事タイトル
---------------------------------------------------------------------------------------------------*/

span.point-in{
	color:#FFF !important;
	
}
div.kanren img{
border-radius: 0.3em;
}
div.kanren{
	
}
div.kanren:after{
	content: "";
	clear: both;
	display: block;
}



div.profile{
	width:100%;
 background-color:#faf7ea;
    color:#333333;
	display:block;
	text-align:center;
	background-size:cover;
	margin:0 auto 15px auto;
	-moz-border-radius:10%;
    -webkit-border-radius: 10%;
	border-radius:10%;
	
}

div.profile h2.inbox{
	background:none;
	font-weight:normal;
	font-size:90%;
	margin:0;
	padding:10px 0 10px 0;
	border-bottom:dotted 1px;
	border-top:none;
}
div.profile p{	
	margin:0;
	padding:10px;
}
div.profile p.tel{	
	color:#0071bc;
	font-size:120%;
}

 ul.qa{
  margin:0;
  padding:0;
  list-style:none;
  clear:both;
}

ul.qa li{
  margin:0 0 10px 0;
  padding:0 0 0 20px;
  background:url(../image/mark01.gif) no-repeat 10px 5px ;
  color:#333333;
  font-size:90%;
  font-weight:bold;
  line-height:1.5;
}

ul.qa li span{
  margin:3px 0 0 0;
  padding:0 0 0 15px;
  display:block;
  font-weight:normal;
}



/*サイドの料金表
---------------------------------------------------------------------------------------------------*/
dl.side-price {
 font-size:85%;
 
}
dl.side-price dt{
	list-style-type : none;
	margin:10px 0 0 0;
  color:#005c9e;
  border-bottom:1px #005c9e solid;
	font-weight:bold;
	
}
dl.side-price dd{
	margin:8px 0 8px 20px;
	padding:0 0 0 3px;
	color:#4d4d4d;
	border-bottom:1px  dotted;
}
dl.side-price dd span.price{
	text-align:right;
	display:block;
	float:right;
	
}
h5.price{
	text-align:center;
	margin:10px 0 5px 0;
}

/*h2
---------------------------------------------------------------------------------------------------*/



@media only screen and (min-width: 600px) and (max-width: 959px)
.post .entry-content h2:not(.st-css-no2), .post .entry-content .h2modoki {
}
.top {
	background:none !important;
	border:none;	
	text-align:center;
	border-left:none; !important;
	border-color:none;!important;
	
}

/* スライダー左右ボタンスタイル 
-------------------------------------*/
.slick-prev,
.slick-next {
	background-color:#937f23;
    z-index:10;
	 border-radius: 30%;
}
.slick-prev:hover,
.slick-next:hover{
	 background-color:#bea42e;
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.slick-list img{
	
    

}
.post-slide-image,
div.cat-itiran img,
.lazy-hidden{
	 border-radius: 5% ;
 
}


.button {
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
	background-color:#FFA933;
  color: #fff;
	 border-radius:40px; 
	width:250px;
	height:50px;
	margin:auto;
}
.button:hover {
  background-color: #FFEF33;
	 color: #fff;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.clearfix{
	margin-top:10px;
}
.graybox{
	clear:both;
}
/*topのカテゴリー一覧カードボックスの幅
---------------------------------------------------------------------------------------------------*/

div.st-cardstyle div.shortcode-kanren dl.clearfix{
	width:32% !important;
  margin:0 8px 5px 0;
}

/*ブログカードのカスタマイズ*/

.st-cardbox {
  box-shadow: none;
  background-color: #ffffff;
	
}
div.shortcode-kanren dl.clearfix dt:hover,
.st-cardbox:hover .st-card-img {
  transform: scale(1.08);
  transition: .3s;
}

.st-cardbox-label-text {
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  padding:10px;
  left: 0;
  top: -3px;
  width: auto;
  text-align: center;
  font-size: 80%;
  line-height: 1.2;
  font-weight:normal;
  background: #9097f9;
  color: #fff;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  box-shadow: none;
  z-index:9999;
}




div.shortcode-kanren dl.clearfix dt{
margin:5px auto;

}
div.shortcode-kanren dl.clearfix dt img{
border-radius: 0.3em;


}


dt.st-card-img {

	border-radius: 0.3em;
 height:auto ; 

}



h5.st-cardbox-t{
	font-size:95%!important; 
	text-align:left;
}

/*ブログカード　写真の下にタイトルを回り込み解除*/
div.st-cardstyle div.shortcode-kanren dl.clearfix dd
{	
	
	padding:0 !important;
	margin:0 !important;
	
}
/*普通のカード　他記事リンク用*/
.st-cardbox dl dd{	
	
	
	margin-left:10px !important;
	
}
.st-cardbox h5{	
	font-size:100%;
	padding-top:10px;
	
	
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 width:200px;
 color:#fff;	 
 border-radius:60px;
 margin:25px auto 0;
	line-height: 54px;
	background-color:#FFA933;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#ff7c33;
}

/* 青い箱をアイコン幅ぴったりにする */
.box-follow {
  background-color:#97c2ff;
  border-radius:20px;
  display: inline-block;
  margin-left: auto;
  margin-right: 0;
  padding: 5px 8px 10px; /* 高さを抑える */
  width: auto !important;
  text-align: center; /* テキストを中央に */
}

/* ボタン全体 */
.flowbtn8 {
  border-radius: 50%;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  text-decoration: none;
  transition: .5s;
  margin: 10px;
}

/* アイコン中央寄せ */
.flowbtn8 i {
  display: inline-block;
  width: 100%;
  text-align: center;
}

/* ホバーでふわっと浮く */
.flowbtn8:hover {
  transform: translateY(-5px);
}

/* Facebook */
.flowbtn8.fl_fb8 {
  border: solid 1px #fff;
  color: #fff;
}
.flowbtn8.fl_fb8:hover {
  color: #fff!important;
  border: solid 1px #55acee;
  background: #55acee;
}

/* LINE */
.flowbtn8.fl_ln8 {
  border: solid 1px #fff;
  color: #fff;
}
.flowbtn8.fl_ln8:hover {
  color: #fff!important;
  border: solid 1px #1dcd00;
  background: #1dcd00;
}

/* YouTube */
.flowbtn8.fl_yt8 {
  border: solid 1px #fff;
  color: #fff;
}
.flowbtn8.fl_yt8:hover {
  color: #fff!important;
  border: solid 1px #cd201f;
  background: #cd201f;
}

/* Instagram */
.flowbtn8.insta_btn8 {
  border: solid 1px #fff;
  color: #fff;
}
.flowbtn8.insta_btn8:hover {
  color: #fff!important;
  border: solid 1px #cd201f;
  background: #cb2766;
}

/* 並び */
.snsbtniti {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.snsbtniti li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 青い背景をサイドバー幅いっぱいにする */
.box-follow {
  background-color: #97c2ff;
  width: 100%;
  padding: 8px 0 12px;
  border-radius: 20px;
  display: block; /* ← これが決め手！ */
  text-align: center;
}

/* Follow me の文字をコンパクトに */
.box-follow span {
  font-size: 12px;
  margin-bottom: 6px;
  line-height: 1.2;
  display: block;
}

/* SNSアイコンの並びをコンパクトに */
.snsbtniti {
  display: inline-flex; /* ← 中身だけ小さくする */
  justify-content: center;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

/* li の余白を消す */
.snsbtniti li {
  margin: 0;
  padding: 0;
}

/* アイコン本体 */
.flowbtn8 {
  border-radius: 50%;
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 36px;
  margin: 4px;
  transition: .5s;
}

/*＝＝＝＝＝＝＝＝＝＝＝
    Top一覧カード化
＝＝＝＝＝＝＝＝＝＝＝＝カードを横並びにする「*/
div.st-cardstyle div.shortcode-kanren dl.clearfix{
	
	flex-wrap: wrap;
	float:left;
border:none;
	
}
.kc-kanren {
	display: flex;
	flex-wrap: wrap;	
}
/*取扱い商品ページ---------------------------------------------------------------------------------------------------*/
.kc_card {
	/*width: 100%;*/
  width: 30%;
  overflow: hidden;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: #fff;
	transition: all 0.25s ease-in;
}

.kc_card:hover {
	 -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
	  -webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 7px 7px -7px rgba(0, 0, 0, 0.3);
 }
 .kc_card .details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1em 1em 0 1em;
  font-size: 0.8em;
 }

.kc-card-image {
	position:relative;
		height:150px;
}

.kc-blockcat {
	background-color:#4682b4;
	color: #ffffff;
	font-size: 1.1em;
	margin-top: 0.6em;
	margin-left: 0.7em;
	padding: 0.4em 0.7em;
	border-radius: 0.3em;
	position: absolute;
}
.kc-kanren dt {
  width: 100% !important;
	float:none !important;
}

.kc-kanren dt img {
  width: 100% !important;
	
}

.kc-kanren dd {
	text-align:left !important;
	padding-left: 0 !important;
	
}

.kc-kanren dd h3 {
	margin: 1em 0 0 0!important;
	padding-left:0!important;
	font-weight:bold;
	background:none!important;
	border:none!important;
	width:100%;
}

.kc-readmore-container {
 margin: 0 auto;
	margin-top: 2.5em;
}

.kc-readmore {
	border: #696969 double;
	padding: 0.7em;
	font-size: 1.2em;
 text-decoration: none;
 color: #4682b4;
 font-family: FontAwesome;
 content: '\f061';
 -webkit-transition: all 0.3s ease;
 transition: all 0.3s ease;
 vertical-align: middle;
 font-weight: normal;
}

.kc-bloginfo-container {
	float: right;
	margin-right: 1.5em;
	margin-top: -0.4em;
	margin-bottom: -0.5em;
}

.kc-title-container {
	
	margin-top: 1.5em;
	
}
/* 取扱い商品の商品名 */
.kc-title {
	font-size:1em !important;
	
}

.kc-bloginfo-container p {
	font-size: 1.2em !important;
}




/* PC */
@media screen and (max-width: 1024px) { }

/* Tablet*/
@media screen and (max-width: 896px) {
	.kc-title {
		letter-spacing: 0.1em;
		line-height: 1.5em !important;
		font-size: 0.7em !important;
	}
}

/* SP */
@media screen and (max-width: 480px) {
	.kc_card {
	  width: 48%;
	}
	.kc-title {
		font-size: 0.8em !important;
		letter-spacing: 0.1em;
		line-height: 1.1em !important;
	}
		
	.kc-bloginfo-container p {
		font-size: 1.0em !important;
		margin-top: 1.0em !important;
	}
.button {
    width: 90%;
    font-size: 90%;
  }	
	
/*topのカテゴリー一覧カードボックスの幅
---------------------------------------------------------------------------------------------------*/

div.st-cardstyle div.shortcode-kanren dl.clearfix{
	width:48% !important;
  margin:0 5px 5px 0;
}
}





/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {
dl.side-price {
	font-size:90%;
	width:80%;
	margin:auto;
		
}
div.profile{
	width:400px;
	margin:auto;
	text-align:center;

}	
.wpcf7-submit{	
	background:FFA933  !important;
	color: #ffffff !important;
	width:100%;
}



	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {

	/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {


.pc { display: none !important; }
.sp { display: block !important; }

	h5.kanren-t{
		font-size:80%;
		line-height:1.1;
	}
	


/*-- ここまで --*/
}



/* 共通フォント（Google FontsでZen Maru Gothicを読み込んでね） */
body {
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* 3本柱ラッパー */
.three-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  margin: 0 0 40px 0;
  box-sizing: border-box;
}

/* 各ボックス（自然療法・セレクト品・ワークショップ） */
.mybox {
  width: calc(33.33% - 20px);
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family: 'Zen Maru Gothic', sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 背景色（Instagramと統一） */
.green  { background: #f1f8f4; color: #3a4a3f; }
.orange { background: #fef8f3; color: #5e4635; }
.blue   { background: #f5f9fc; color: #3e4a5a; }

/* 画像 */
.mybox figure {
  margin: 0 0 6px; /* ← 余白を少し詰めた */
}

.mybox figure img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
}



/* 見出し */
.aroma-box h3,
.mybox h3,
.top-message h3,
.aroma-which h3,
.aroma-organic h3 {
  font-size: 1.1em;
  margin-top: 0px;
  margin-bottom: 12px;
  background: none;
  text-align: center;
}

 


/* 説明文 */
.mybox p {
  font-size: 0.95em;
  margin-bottom: 1em;
  color: #333;
}

/* ボタン（共通） */
.btn {
  display: inline-block;
  margin-top: auto;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ボタン色分け */
.btn.green  { background: #cde3d4; color: #3a4a3f; }
.btn.orange { background: #f7e4d2; color: #5e4635; }
.btn.blue   { background: #dce9f4; color: #3e4a5a; }

.btn:hover {
  opacity: 0.8;
}

/* スマホ対応（横スクロール） */
@media screen and (max-width: 950px) {
  .three-columns {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    padding: 10px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .three-columns::-webkit-scrollbar {
    height: 6px;
  }

  .three-columns .mybox {
    min-width: 80%;
    max-width: 80%;
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 16px;
    text-align: center;
  }

  .three-columns figure {
    margin: 0 0 6px;
  }

  .three-columns img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  .three-columns h3 {
    font-size: 1.1em;
    margin-top: 0px;
    margin-bottom: 8px;
	background:none;
  }

  .three-columns p {
    font-size: 0.95em;
    margin-bottom: 12px;
  }

  .three-columns .btn {
    margin-top: 10px;
  }
}






.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 15px;
    border: 1px solid #e0e0e0;
    padding: 10px;
    width: 100%;
    max-width: 300px;
}

.product-card img {
    width: 100%;
    height: auto;
}

.product-card h3 {
    font-size: 18px;
    margin: 10px 0;
}

.product-card .price {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.news-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-item {
  padding: 10px 0;
  border-bottom: 1px dotted #999; /* ← 点線ライン！ */
}

.news-list ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.news-item {
  margin-bottom: 12px;
}

.news-date {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 4px;
}

.news-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}


.news-title:hover {
  text-decoration: underline;
  color: #007acc;
}

.news-heading {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .news-list {
    padding: 10px;
	list-style: none;
  padding-left: 0;
  margin-left: 0;
  }

  .news-list .news-item {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .news-list .news-date {
    display: inline-block;
    font-size: 12px;
    margin-right: 6px;
    color: #999;
  }

  .news-list .news-title {
    font-size: 14px;
  }
}



/* 施術ページデザイン */

.btn-green {
  background-color: #A8D8B9;
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  transition: background 0.3s ease;
}
.btn-green:hover {
  background-color: #90caa4;
}
.category-list {
 display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem; /* カード間の隙間 */;
  
}
.therapy {
  background: #f9f9f9;
  padding: 1em;
  border-radius: 1rem;
  text-align: center;
   flex: 1 1 calc(33.333% - 1.5rem); /* 3列にしたいとき */
  box-sizing: border-box;
}
.therapy img {
  width: 150px;         /* 表示サイズを固定（必要に応じて調整） */
  height: 100px;        /* 縦横同じでアイコンっぽく */
  object-fit: cover;    /* 画像をトリミングして中身が潰れないように */
  border-radius: 5%;   /* 丸くする場合（不要なら外してOK） */
  display: block;
  margin: 0 auto 0.5em; /* 中央寄せ＋下に少し余白 */
}
@media (max-width: 768px) {
  .therapy {
    max-width: 100%;
    flex: 1 1 100%;
  }
}
.history-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1em;
}
.menu-list table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}
.menu-list th, .menu-list td {
  border: 1px solid #ccc;
  padding: 0.6em;
  text-align: left;
}

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

 .therapy img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem; /* 角丸にしたいとき */
  display: block;
}}

/* よくある質問 */
/* カテゴリーボタン */
.faq-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.faq-btn {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 1rem;
  text-decoration: none;
  font-weight: bold;
  color: white;
}

.faq-btn.green { background: #5bb28a; }
.faq-btn.orange { background: #f4a64e; }
.faq-btn.blue { background: #5ba3d2; }

/* ブロック */
.faq-block {
  margin-bottom: 2rem;
}

.faq-title {
  font-size: 1.5em;
  margin-bottom: 1em;
  padding-left: 0.5em;
  border-left: 5px solid #ccc;
}

.faq-title.green { border-color: #5bb28a; }
.faq-title.orange { border-color: #f4a64e; }
.faq-title.blue { border-color: #5ba3d2; }

/* アコーディオン */





.accordion-toggle {
  background: #eee;
  border: none;
  width: 100%;
  text-align: left;
  padding: 1em;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.3s;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px; /* ボタンとコンテンツの間に余白を追加 */
}

.accordion-toggle.active {
  background: #ddd;
}

.accordion-content {
  display: none;
  padding: 1em;
  background: #f9f9f9;
  border-bottom: 1px solid #ccc;
  padding-top: 10px; /* コンテンツの上部に余白を追加 */
}
	
.faq-feedback {
  margin-top: 3rem;
  padding: 2rem;
  background: #f5f5f5;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
}

.faq-feedback p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #333;
}

.contact-btn {
  display: inline-block;
  padding: 0.8em 1.5em;
  background: #5ba3d2;
  color: white;
  text-decoration: none;
  border-radius: 999px;
  font-weight: bold;
  transition: background 0.3s;
}

.contact-btn:hover {
  background: #4b93c2;
}


 /* 料金表 */
.price-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
}

.price-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: 1em;
  background-color: #fff;
  border: 1px solid #ccc;
}

.price-table th,
.price-table td {
  border: 1px solid #ccc;
  padding: 0.8em;
  text-align: left;
}

.price-table th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
}

.price-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* スマホスクロール表示のための見た目 */
.price-table-wrap::-webkit-scrollbar {
  height: 6px;
}
.price-table-wrap::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
/* 流れのボックスの数字の色の指定 */
.st-mybox-class ol {
  background-color: transparent;
  color: #333; /* 適切な文字色に変更 */
}

.st-mybox-class ol li {
  background-color: transparent;
  color: #ffffff; /* 適切な文字色に変更 */
}


/* 施術ページのテーブル指定 */
table td:first-child {
  padding-left: 1em; /* 左に1文字分くらいの余白を追加 */
}




/* アロマページの指定 */
.aroma-section {
  padding: 30px 0;
}

.aroma-title {
  font-size: 1.8em;
  margin-bottom: 20px;

}

.aroma-intro {
  max-width: 700px;
  margin: 0 auto 40px;
}

.aroma-courses {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.aroma-box {
  flex: 0 1 45%;
  box-sizing: border-box;
   background: #f0f8ff; /* 明るめブルー系背景 */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}



.meguri-link {
  text-align: center;
  margin-top: 2em;
  font-size: 0.95em;
}

.meguri-link a {
  text-decoration: underline;
  color: #005f99;
}


.aroma-btn {
  display: inline-block;
  margin-top: 15px;
  color: #006666;
  text-decoration: underline;
  font-weight: bold;
}

.aroma-which,
.aroma-organic {
  max-width: 800px;
  margin: 40px auto;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
}

.aroma-link {
  margin-top: 10px;
}

/* ピラティス */
.section-subtitle {
  font-size: 1.5em;
  color: #336699;
  margin-top: 1em;
}

.lead {
  font-size: 1.1em;
  line-height: 1.7;
  color: #333;
}

.check-list li::before {
  content: "✔";
  margin-right: 0.5em;
  color: #336699;
}

.info-list {
  list-style: none;
  padding-left: 0;
}

.info-list li {
  margin-bottom: 0.5em;
}

.accordion-toggle {
  background: #e6f0fa;
  border: none;
  padding: 1em;
  width: 100%;
  text-align: left;
  cursor: pointer;
  margin-top: 0.5em;
}

.accordion-toggle.active {
  background: #d0e2f5;
}

.accordion-content {
  display: none;
  padding: 1em;
  background: #f4f9fd;
  margin-bottom: 1em;
}



/* セレクトショップ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-item {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  background-color: #fff;
}

.product-item img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.product-item .tags {
  color: #666;
  font-size: 0.9em;
  margin: 5px 0;
}

.product-item .price {
  font-weight: bold;
  color: #333;
  margin: 5px 0;
}

.product-item .sizes {
  font-size: 0.9em;
  color: #555;
}





/* セレクト品CSSここ */

/* --- 商品一覧のレイアウト --- */


.child-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 40px;
  padding: 0;
  list-style: none;
  justify-content: center; /* 中央揃え */
}

.child-category-list li {
  background: #f5f5f5;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
}

.child-category-list li a {
  text-decoration: none;
  color: #333;
}

.child-category-list li:hover {
  background: #4CAF50;
}

.child-category-list li:hover a {
  color: #fff;
}
.item-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 auto;
  padding: 20px 0;
}

.item-card {
  flex: 0 0 calc(33.333% - 13.33px); /* PCでは3列 */
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-family: sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 動きを付ける */
}

.item-card img {
  width: 100%;
  height: auto;
  display: block;
}

.item-info {
  padding: 10px;
}

.item-label {
  font-size: 0.8em;
  color: #555;
  margin-bottom: 5px;
}

.item-title {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 5px;
}

.item-desc {
  font-size: 0.9em;
  color: #333;
}

/* --- マウスを乗せたときのふわっと拡大エフェクト --- */
.item-card:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* --- スマホ表示のとき（幅767px以下）は2列にする --- */
@media (max-width: 767px) {
  .item-card {
    flex: 0 0 calc(50% - 10px); /* スマホでは2列 */
  }
}

/* --- ページネーションデザイン --- */
.pagination {
  text-align: center;
  margin: 30px 0;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 3px;
  background: #f5f5f5;
  color: #333;
  border-radius: 5px;
  text-decoration: none;
}

.pagination .current {
  background: #333;
  color: #fff;
}

/* --- 注文案内ブロックのデザイン --- */
.order-info {
  background: #f9f9f9;
  padding: 30px;
  margin: 50px 0;
  border-radius: 10px;
  text-align: center;
}

.order-info h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

.order-info p {
  font-size: 16px;
  margin: 10px 0;
}

.order-link {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background: #4CAF50;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.order-link:hover {
  background: #45a049;
}



/* --- 検索ボックス --- */
.simple-search-form {
  text-align: center;
  margin: 30px 0;
}
.simple-search-form input[type="text"] {
  width: 70%;
  max-width: 400px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.simple-search-form button {
  padding: 8px 16px;
  margin-left: 5px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.simple-search-form button:hover {
  background-color: #45a049;
}

/* トップページ用メッセージセクション */
.top-message {
  padding: 2em 1em;
  background: #f9f9f9;
}

.top-message h2 {
  font-size: 1.6em;
  margin-bottom: 1em;
  text-align: center;
}

.top-message p {
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto 1.5em;
  text-align: left;
}

.top-message ul {
  list-style: none;
  padding: 0;
  margin: 1em auto 1.5em;
  max-width: 720px;
}

.top-message ul li {
  margin-bottom: 0.5em;
}
input[type="submit"], 
input.wpcf7-submit {
  background-color: #f0a500;  /* 好きな背景色に変更してください */
  color: #ffffff !important;  /* 文字色は白など見やすい色に */
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;  /* 角丸お好みで */
}

input[type="submit"]:hover,
input.wpcf7-submit:hover {
  background-color: #c47f00;  /* ホバー時の色 */
  color: #fff;
}

/*　注文フォーム　*/
/* フォーム全体の見やすさ */
dl.order-form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

dl.order-form dt {
  font-weight: bold;
  font-size: 1.1em;
  color: #2c3e50;
  background-color: #f9f9f9;
  padding: 0.6em 1em;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

dl.order-form dd {
  margin: 0;
}

/* ラジオボタンとチェックボックスを整列 */
.radio-box label,
.consent-box label {
  display: inline-block;
  margin-right: 1em;
  cursor: pointer;
}

.radio-box input[type="radio"],
.consent-box input[type="checkbox"] {
  margin-right: 0.5em;
}

/* 承諾注意文 */
p.consent-notice {
  font-size: 0.95em;
  color: #666;
  margin-top: 1em;
  padding-left: 1em;
  border-left: 3px solid #ccc;
}
.mail-notice {
  background-color: #fff8e1; /* やさしい黄色系 */
  border-left: 5px solid #f0a500; /* メインカラーに合わせた強調 */
  padding: 1em 1.5em;
  margin: 2em 0;
  font-size: 1em;
  line-height: 1.6;
  color: #333;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.mail-notice strong {
  color: #c0392b;
  font-size: 1.05em;
}
.section-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
  flex-wrap: wrap;
}
 /* ピラティスページ横並び2つのボタン */
.nav-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #f0f4f2;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 30px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.nav-button:hover {
  background-color: #dbe7e2;
  border-color: #aaa;
  color: #000;
}

/* 治療の流れ全体 */
.ynsa-flow {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 40px;
}

/* 各ステップ */
.flow-step {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ccc;
}

/* 見出し */
.flow-step h3 {
  font-size: 1.2em;
  color: #333;
  margin-bottom: 10px;
}

/* 画像 */
.flow-img {
  display: block;
  margin: 10px auto 15px;
  max-width: 300px;
  border-radius: 8px;
}

/* 強調テキスト */
.highlight {
  background: #fff3cd;
  padding: 2px 6px;
  border-radius: 4px;
  color: #856404;
}

.image-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

.image-row img {
  width: 23.5%;
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  display: block;
}

/* スマホ対応：2枚並びに切り替え */
@media screen and (max-width: 768px) {
  .image-row img {
    width: 48%;
    margin-bottom: 12px;
  }
}
.five-elements {
  margin: 80px 0;
}

.five-elements h3 {
  margin-top: 40px;
  font-size: 1.2rem;
}

.five-elements ul {
  padding-left: 20px;
  margin-bottom: 10px;
}

.five-elements li {
  margin-bottom: 6px;
}

.care {
  background: #f6f8f5;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
}

.check-lead {
  margin: 30px 0;
  font-size: 1.05rem;
}

.note {
  margin-top: 40px;
  font-size: 0.9rem;
  color: #666;
}