/*-----ヘッダー ここから-----*/
#header{
	border-top-color:none;
	background-color:#181818;
}

.home #header_image{
	display:none;
}

.header_inner{
	min-height:80px;
}

#global_menu{
	margin:0;
}

#global_menu ul li a{
	color:#fff;
	font-size:14px;
	height:80px;
	line-height:80px;
	padding:0 10px;
}

#global_menu ul li a:hover{
	color:#e6d8b3!important;
}

#global_menu ul .menu_list_icon img{
	position:relative;
	bottom:-7px
}

#global_menu ul .menu_list_salon a,
#global_menu ul .menu_list_members a{
	height:auto;
	padding:10px 10px;
	margin-left:10px;
	line-height:20px;
	text-align:center;
	border:1px solid #fff;
}

.fix_top.header_fix #global_menu 
ul .menu_list_salon a,
.fix_top.header_fix #global_menu 
ul .menu_list_members a{
	height:40px;
	line-height:20px;
}

#global_menu ul ul{
	top:80px
}

.sub-menu{
	width:235px;
}

@media (max-width:991px){
	.header_inner{
		min-height:60px;
	}
	
	#global_menu ul li a{
		height:60px;
	}
	
	#global_menu ul .menu_list_salon a,
	#global_menu ul .menu_list_members a{
		margin-left:0;
		text-align:left;
		height:60px;
		line-height:60px;
		border:none;
	}
	
	a.menu_button:before{
		color:#fff;
	}
}

#left_col{
	width:1150px;
	margin:0 auto;
}

.post_content p{
	line-height:1.5;
	margin:0;
}

@media (max-width:424px){
	#header_image .caption p{
		font-size:20px!important;
	}
}
/*-----ヘッダー ここまで-----*/


/*-----TOPページ ここから-----*/
/*コンテンツの順番*/
.home #main_col{
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	margin-bottom:0;
}

#index_topics{
	order:1;
}

#bread_crumb{
	order:2;
}

#main_col{
	order:3;
}

#index_blog{
	order:4;
	margin:0 0 120px;
	padding-bottom:120px;
	background:#fffcf5;
}

#index_blog_list{
	background:#fffcf5;
}

/*ボタン*/
.button_text a,
.post_content .q_button{
	display:inline-block;
	background:#fff;
	border:1px solid #c09933;
	color:#c09933!important;
	width:220px;
	padding:10px 0;
	text-align:center;
	text-decoration:none;
}

.button_text a:hover,
.post_content .q_button:hover{
	border-color:#e6d8b3;
	background:#e6d8b3;
	color:#ffffff!important;
	box-shadow:none;
}

/* 見出し h2 */
.title_en {
  position: relative;
  top: 0;
  margin-bottom: 20px; /* 日本語見出しとの距離 */
  font-size: 42px; /* 見出しサイズを調整 */
  letter-spacing: 2px; /* 少しゆとりを出す */
}

/* スマホ用の間隔調整 */
@media (max-width: 767px) {
  .title_en {
    font-size: 30px;
    margin-bottom: 20px;
  }
  .title_ja {
    margin-bottom: 25px;
  }
}

/*カテゴリー*/
.home .category,
.blog .category span,
.archive .category span,
.single-post .category a{
	display:inline-block;
	padding:3px 15px 2px;
	background:#e6d8b3!important;
	color:#292929!important;
}

/*コンテンツ間の余白*/
.product_block{
	margin-bottom:100px;
}

.product_block:last-child{
	margin-bottom:0;
}

/*デフォルトの見出し削除*/
#index_blog .headline{
	display:none;
}

#index_blog_list li .meta .category span{
	background-color:#e6d8b3;
	color:#292929;
}

@media (max-width:1279px){
	.top_column{
		flex-direction:column;
		text-align:center;
		margin-left:0!important;
	}
	
	.top_column .top_image{
		order:1;
	}
	
	.top_column .top_textarea{
		order:2;
	}
	
	#left_col{
		width:100%;
	}
}

@media (max-width:991px){
	#main_col{
		padding:0 10px;
	}
	
	#index_topics{
		margin:0 -10px 30px -10px;
	}
}

@media (max-width:767px){
	.top_column .top_image{
		margin-left:0;
	}
	
	.top_column h3{
		font-size:24px!important;
	}
	
	.top_column .button .button_text{
		text-align:center;
	}
}

@media (max-width:424px){
	.top_column h3 br{
		display:none;
	}
}


/*-----TOPページ ここまで-----*/



/*-----CONCEPTページ ここから-----*/
.concept_point_column{
	justify-content:center;
	margin:0 auto;
}

.concept_point{
	box-shadow:0 0 5px 3px rgba(0, 0, 0, 0.05);
	padding:30px;
	margin-top:100px;
	position:relative;
}

.concept_point_number{
	position:absolute;
	top:-90px;
	right:0;
}

.concept_massage{
	max-width:950px;
	margin:0 auto;
	padding:20px;
}
/*-----CONCEPTページ ここまで-----*/


/*-----PRODUCTページ ここから-----*/
.product{
	text-align:center;
}

/*お悩み・あしらい*/
.product_comment{
	display:inline-block;
	position:relative;
}

.product_comment::before,
.product_comment::after {
	position:absolute;
	content: '';
	width: 1px;
	height: 35px;
	background-color: #c09933;
}

.product_comment::before {
	left:-20px;
	top:0;
	transform: rotate(-25deg)
}

.product_comment::after {
	right:-20px;
	top:0;
	transform: rotate(25deg)
}
sssssssssssssS
.product_comment br{
	display:none;
}

@media (max-width: 600px){
	.product_comment{
		font-size:15px!important;
	}
	
	.product_comment::before {
		left:-10px;
		top:10%;
	}
	
	.product_comment::after {
		right:-10px;
		top:10%;
	}
	
	.product_comment br{
		display:block;
	}
}

/*成分*/
.product_accordion{
	max-width:460px;
	margin:0 auto;
}

.product_accordion .wp-block-coblocks-accordion-item__content{
	text-align:left;
}

/*特徴*/
.product_effect{
	max-width:750px;
	margin:0 auto;
}

.product_effect_title{
	padding: 10px 20px!important;
}

.product_closing{
	text-align: center;
	padding:40px 20px;
	border:1px solid #e6d8b3;
	position:relative;
}

.product_closing::after{
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	border:1px solid #c09933;
	top:5px;
	left:5px;
	z-index:-1;
}

/*免責事項*/
.product_safety{
	max-width:750px;
	margin:0 auto;
}


/*-----PRODUCTページ ここまで-----*/


/*-----NEWS/BLOGページ ここから-----*/
.single-news #post_meta_top .date{
	background:none;
	border:1px solid #c09933;
	color:#c09933;
}

.headline_bg,
.headline_bg_l,
.headline_bg a{
	background:#e6d8b3;
	color:#292929;
}

.headline_bg a:hover{
	color:#ffffff;
}

.title{
	color:#292929;
}

.page_navi p.back a,
#submit_comment{
	background:none!important;
	border:1px solid #c09933;
	color:#c09933;
}

.page_navi p.back a:hover,
#submit_comment:hover{
	background:#e6d8b3!important;
	border-color:#e6d8b3;
	color:#fff!important;
}

#archive_wrapper,
#related_post ol{
	background:#fffcf5;
}

#comment_switch a:hover,
#trackback_switch a:hover{
	background:#e6d8b3!important;
	
}

.comment_switch_active a{
	background:#e6d8b3!important;
	border-color:#e6d8b3!important;
	color:#292929!important;
}

.comment_switch_active a:after{
	border-color:#e6d8b3 transparent transparent transparent!important;
}
/*-----NEWS/BLOGページ ここまで-----*/


/*-----MEMBERSページ ここから-----*/
.members_benefits{
	max-width:630px;
	margin:0 auto!important;
	padding:20px 20px 20px 50px;
	border:1px solid #e6d8b3;
	position:relative;
}

.members_benefits::after{
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	border:1px solid #c09933;
	top:5px;
	left:5px;
	z-index:-1;
}
/*-----MEMBERSページ ここまで-----*/


/*-----CONTACTページ ここから-----*/
.wpcf7{
	background:#f9f2cc;
	border:none;
	box-shadow:0 0 5px 3px rgba(0, 0, 0 ,0.07);
}

.wpcf7 form{
	margin:0;
	padding:30px 50px;
}

.wpcf7 form p{
	font-size:15px;
	color:#292929;
	margin-bottom:15px
}

.wpcf7 form p .wpcf7-submit{
	background:none;
	border:1px solid #c09933!important;
	color:#c09933;
}

.wpcf7 form p .wpcf7-submit:hover{
	background:#e6d8b3;
	border:1px solid #e6d8b3!important;
	color:#fff;
}
/*-----CONTACTページ ここまで-----*/


/*-----STOREページ ここから-----*/
.store .wp-block-group__inner-container{
	display:flex;
	justify-content:center;
}

.store .wp-block-group__inner-container .button{
	margin:20px 10px!important;
}

.store .wp-block-group__inner-container .button .button_text a{
	padding:20px 0 10px 0;
}

@media (max-width: 782px){
	.store .wp-block-group__inner-container{
		display:block;
	}
	
	.store .wp-block-group__inner-container .button{
		text-align:center;
	}
}
/*-----STOREページ ここまで-----*/


/*-----VOICEページ ここから-----*/
.page-numbers.current{
	background:#e6d8b3!important;
	border-color:#e6d8b3!important;
}

a.page-numbers:hover{
	background:#e6d8b3!important;
	border-color:#e6d8b3!important;
}
/*-----VOICEページ ここまで-----*/


/*-----BLOGページ ここから-----*/
.blog #main_contents #main_col,
.single-post #main_contents #main_col,
.archive #main_contents #main_col{
	display:flex;
}

.blog #main_contents #main_col #left_col,
.single-post #main_contents #main_col #left_col,
.archive #main_contents #main_col #left_col{
	max-width:730px;
}

.blog #main_contents #main_col #side_col,
.single-post #main_contents #main_col #side_col,
.archive #main_contents #main_col #side_col{
	margin-left:20px;
}

.blog #main_contents #main_col #side_col h3, 
.single-post #main_contents #main_col #side_col h3,
.archive #main_contents #main_col #side_col h3{
	background:#fefce3;
	color:#292929;
	line-height:1.5;
	border-bottom:2px solid #c09933;
}

.blog #main_contents #main_col #side_col h4, 
.single-post #main_contents #main_col #side_col h4,
.archive #main_contents #main_col #side_col h4{
	margin-top:30px;
}

@media (max-width: 991px){
	.blog #main_contents #main_col #side_col,
	.single-post #main_contents #main_col #side_col,
	.archive #main_contents #main_col #side_col{
		max-width:250px;
	}	
}

@media (max-width: 782px){
	.blog #main_contents #main_col,
	.single-post #main_contents #main_col,
	.archive #main_contents #main_col{
		flex-direction:column;
	}
	
	.blog #main_contents #main_col #side_col,
	.single-post #main_contents #main_col #side_col,
	.archive #main_contents #main_col #side_col{
		max-width:100%;
		margin-left:0;
	}
}

.single-post #article .post_content{
	color:#292929;
	line-height:1.5;
}

.single-post #article .post_content #toc_container{
	border:2px solid #c09933;
	background:#fefce3;
}

.single-post #article .post_content #toc_container .toc_list a{
	color:#292929;
}

.single-post #article .post_content h3{
	background:#e6d8b3;
	padding:15px
}

.single-post #article .post_content h4{
	border-bottom:3px solid #e6d8b3;
	padding-bottom:5px;
}

.single-post #article .post_content h5{
	padding-left:10px;
	position:relative;
}

.single-post #article .post_content h5::before{
	content:'';
	display:inline-block;
	width:15px;
	height:15px;
	background:#e6d8b3;
}

.single-post #article .post_content img{
	width:100%;
}
/*-----BLOGページ ここまで-----*/


/*-----フッター ここから-----*/
#footer_widget{
	background:#fdefe2;
}

#footer_widget .menu{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	height:210px;
	color:#292929;
}

#footer_widget .widget_nav_menu{
	width:400px;
}

#footer_widget .menu li{
	width:190px!important;
}

#footer_bottom{
	background:#e6d8b3;
}

#copyright,
#copyright a{
	color:#292929;
}

@media (max-width: 600px){
	#footer_widget .menu{
		height:auto;
	}
	
	#footer_widget .widget_nav_menu{
	width:auto;
}
}
/*-----フッター ここまで-----*/
/* ヘアケアを強調（確実に当たる版） */
.nav-haircare > a {
  position: relative;
  color: #b38b4d !important;   /* ゴールド */
  font-weight: 700 !important;
  padding-right: 42px !important;
  text-decoration: none !important;
}

/* ホバー色 */
.nav-haircare > a:hover {
  color: #8c5a00 !important;
  transition: color .25s ease;
}

/* 小さなリボン「人気」 */
.nav-haircare > a::after {
  content: "人気";
  position: absolute;
  top: 30px;
  right: 8px;
  background: #d21f3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* 親liのoverflowで疑似要素が切れないように */
.nav-haircare {
  overflow: visible !important;
}
/* ヘアケア人気バッジ位置調整（確実に動く版） */
.nav-haircare > a {
  position: relative !important;  /* ← これが効かないと ::after が動かない */
}

.nav-haircare > a::after {
  content: "人気";
  position: absolute;
  top: 18px;       /* ← この数値で縦の位置を下げられます（お好みで調整） */
  right: 8px;
  background: #d21f3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
  z-index: 9999;   /* ← 他の要素の下に潜らないように */
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}


/* ================================
   PRODUCT レイアウトの縦バランス調整
   追加用CSS（既存はそのままでOK）
   ================================ */

/* セクションの基本余白 */
.product {
  max-width: 1160px;           /* 中央寄せの横幅ガイド */
  margin: 0 auto;
  padding: 0 16px;
}
.product p { line-height: 1.9; }

/* 見出しの余白（英日どちらでも） */
.product h2,
.product .title_en,
.product .title_ja {
  margin-top: 0;
  margin-bottom: 24px;         /* 見出し直下の余白 */
}

/* お悩み・あしらい（飾り付き行）の上下余白と行間 */
.product_comment {
  margin: 16px 0 28px;         /* タイトル～本文の間を作る */
  line-height: 1.8;
  letter-spacing: .2px;
}
/* 飾り線が文字に寄り過ぎるのを緩和 */
.product_comment::before,
.product_comment::after {
  height: 30px;                /* 既存35px → 少し短く */
  top: 2px;
}

/* セクション間の区切り（特徴／成分など） */
.product_effect      { margin: 40px auto 60px; }
.product_accordion   { margin: 40px auto 80px; }

/* 最下部の囲み（クロージング）周りにも間を確保 */
.product_closing     { margin-top: 48px; }

/* 画像のはみ出し対策 */
.product img {
  max-width: 100%;
  height: auto;
}

/* ----- スマホ最適化（～767px） ----- */
@media (max-width: 767px) {
  /* 見出し直下の間を少し広めに */
  .product h2,
  .product .title_en,
  .product .title_ja {
    margin-bottom: 20px;
  }

  .product_comment {
    font-size: 15px !important; /* 既存とあわせる */
    margin: 14px 0 24px;
    line-height: 1.75;
  }
  .product_comment::before,
  .product_comment::after {
    height: 24px;              /* 飾り線をさらに短く */
    top: 10%;
    left: -10px;
    right: -10px;
  }

  .product_effect    { margin: 28px auto 44px; }
  .product_accordion { margin: 28px auto 56px; }
  .product_closing   { margin-top: 36px; padding: 32px 16px; }
}

/* ----- タブレット（768～991px）での少し広めの余白 ----- */
@media (min-width: 768px) and (max-width: 991px) {
  .product_effect    { margin: 36px auto 52px; }
  .product_accordion { margin: 36px auto 64px; }
}

/* スマホ用あしらい調整（余白とバランス） */
@media (max-width: 767px) {
  .product_comment {
    display: inline-block;
    position: relative;
    font-size: 15px !important;
    margin: 18px 0 30px !important; /* 上下の余白を確保 */
    line-height: 1.8;
  }

  .product_comment::before,
  .product_comment::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 22px; /* 縦の長さを短くして詰まり防止 */
    background-color: #c09933;
    top: 4px; /* 文字に重なりにくく */
  }

  .product_comment::before {
    left: -12px;
    transform: rotate(-25deg);
  }

  .product_comment::after {
    right: -12px;
    transform: rotate(25deg);
  }

	  /* あしらい文字の改行を有効化 */
  .product_comment br {
    display: block;
  }
}
/* ----- ボタン色の変更 ----- */
.button_text a,
.post_content .q_button {
  background-color: #b8926a;
  color: #ffffff !important;
  border: 1px solid #b8926a;
}
.button_text a:hover,
.post_content .q_button:hover {
  background-color: #a0774d;
  color: #ffffff !important;
  border-color: #a0774d;
}


/* ----- 本文のテキスト色（メインカラム用） ----- */
#main_col,
#main_col p {
  color: #444444;
}

/* PRODUCT ページの本文も少し濃く */
.product,
.product p {
  color: #444444;
}

/* NEWS本文の文字色を濃くする */
#index_news p,
#index_news .post_content {
  color: #333333;
}


/* おすすめ商品の2ボタン */
.top_intro_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 40px;
}

.top_btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  min-width: 240px;
  text-align: center;
  transition: all .25s ease;
  font-weight: 600;
}

/* メイン：シャンプー＆トリートメント */
.top_btn.main {
  background-color: #b8926a;
  border: 1px solid #b8926a;
  color: #ffffff !important;
}
.top_btn.main:hover {
  background-color: #a0774d;
  border-color: #a0774d;
}

/* サブ：アクアセラムジェル */
.top_btn.sub {
  background-color: #ffffff;
  border: 1px solid #b8926a;
  color: #b8926a !important;
}
.top_btn.sub:hover {
  background-color: #f5e5d4;
}

/* スマホ最適化 */
@media (max-width: 767px) {
  .top_btn {
    min-width: 250px;
    font-size: 14px;
    padding: 12px 20px;
  }
}

/* スマホだけ：トップの2つのボタンの長さを短くする（PCには影響なし） */
@media (max-width: 767px) {

  /* ボタンを中央に寄せる */
  .top_intro_buttons {
    text-align: center;
  }

  /* 2つのボタンの横の長さを短く */
  .top_intro_buttons .top_btn {
    display: inline-block !important;
    width: auto !important;           /* 画面いっぱいに広がるのをやめる */
    padding-left: 18px !important;    /* ← 横の長さをここで調整 */
    padding-right: 18px !important;
  }
}

@media (max-width: 767px) {
  .top_intro_buttons {
    gap: 20px !important;
  }
}