@charset "utf-8";
/*
Theme Name: seeds2
*/

/* ===================================================================
 common
=================================================================== */

* { margin: 0; padding: 0; font-size: 100%; font-style: normal;}

.hina-mincho-regular {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.tangerine-regular {
  font-family: "Tangerine", cursive;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

body {
	text-align: center;
	background: #FCFAF9;
	color: #382628;
	cursor: auto;
	font: normal normal 14px/1.71 "游ゴシック体", "Yu Gothic", 'YuGothic', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	letter-spacing: 0.095em;
	word-spacing: 0.1em;
	-webkit-text-size-adjust: 100%;
	min-width: 960px;
	margin: 0;
}

*:first-child + html body { font-size: 75%;} /* for IE 7 */

p { padding: 5px 0 10px;}
blockquote { margin: 15px 0; padding: 10px 15px 3px; background: #faf6ed;}
pre { background: #eee; margin: 1em 0; padding: 0 20px; overflow: auto; width: auto;}
code { color: #5b5905; font-family: "Lucida Grande", "Courier New", Courier, mono, Verdana, sans-serif; letter-spacing: 0;}
ul, ol { margin: 10px 0; padding: 0 0 0 30px; }
ul { padding: 0; list-style: none; }
dl { margin: 10px 0;}

a         { color: #75481D; text-decoration: none; cursor: pointer;}
/* a:visited { color: #3b41a4;} */
a:hover   { color: #BBA28A; }
/* a:focus,
a:active  { color: #f90;} */
a:hover img {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.inner a {
	text-decoration: underline;
}

em     { font-weight: bold; color: #666;}
strong { font-weight: bold; color: #75481D;}
abbr, acronym { cursor: help;}
sup { vertical-align: super; font-size: 70%;}
sub { vertical-align: baseline; font-size: 70%;}
*:first-child + html sup { line-height: 1.5; font-size: 80%;} /* for IE 7 */
* html sup               { line-height: 1.5; font-size: 80%;} /* for IE 6 or sooner */

hr { display: none;}
img { border: none; color: #fff; background: transparent; vertical-align: bottom;}
embed, object { outline: 0; vertical-align: bottom;}

table { border: 1px solid #AAAAAA; border-left: none; border-right: none; border-collapse: collapse; margin-bottom: 15px;}
caption { text-align: left;}
th, td {
	padding: 10px 20px;
	border-collapse: collapse;
	border: 1px solid #AAAAAA;
	text-align: left;
}
th { border-left: none; white-space: nowrap; color: #382628; text-align: center; }
td { border-right: none; }

tr:nth-child(even) {
	background: #ebe9e9;
}

fieldset {
	border: 1px solid #ddd;
	margin-bottom: 15px;
	padding: 10px;
}
* html legend { margin: 0 0 10px;}
input,
textarea { padding: 1px; font-family: Arial, Helvetica, "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;}
select option { padding: 0 5px;}
input:focus,
select:focus,
textarea:focus { background-color: #fafafa;}
label { cursor: pointer;}


/******************************************************************** clearfix
*/

#container:after,
.section:after,
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/******************************************************************** utilities
*/

.aL { text-align: left !important;}
.aC { text-align: center !important;}
.aR { text-align: right !important;}
.fR { float: right;}
.fL { float: left;}
.clr { float: none; clear: both;}

.jp { font-family: "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;}
.verdana { font-family: Verdana, sans-serif;}
.times { font-family: "Times New Roman", Times, serif;}

.tempNotes { font-size: 120%; color: #c00; font-weight: bold; background: #f8f8f8; margin: 1em; padding: 1em;}

.pcNone {
	display: none;
}

@media screen and (min-width: 211px) and (max-width: 599px) and (orientation: portrait), screen and (max-width: 767px) and (min-width: 300px) and (orientation: landscape){
	.pcNone {
		display: block;
	}
	.spNone {
		display: none !important;
	}
}
/* ===================================================================
 module
=================================================================== */

#pagenationList {
    text-align: center;
}

#pagenationList .page-numbers.current {
    background: #754C21;
    color: #fff;
    border-radius: 4px;
    padding: 8px;
}

#pagenationList a.page-numbers {
    color: #754C21;
    border: 1px solid #AAAAAA;
    border-radius: 4px;
    padding: 8px;
}

body.page p:empty{display: none;}

.titleStyle1 {
	font-size: 32px;
	line-height: 1.3;
	margin-bottom: 60px;
	color: #75481D;
}

.titleStyle2 {
	font-size: 26px;
	line-height: 1.3;
	margin-bottom: 16px;
    margin-top: 40px;
	color: #75481D;
}

.titleStyle3 {
	font-size: 22px;
	line-height: 1.2;
	margin-bottom: 16px;
    margin-top: 36px;
	color: #75481D;
}

@media screen and (min-width: 211px) and (max-width: 599px) and (orientation: portrait), screen and (max-width: 767px) and (min-width: 300px) and (orientation: landscape){
	.titleStyle1 {
		font-size: 24px;
		margin-bottom: 30px;
	}

	.titleStyle2 {
		font-size: 20px;
		margin-bottom: 10px;
		margin-top: 20px;
	}

	.titleStyle3 {
		font-size: 18px;
		margin-bottom: 10px;
		margin-top: 20px;
	}
}

/******************************************************************** structure
*/


#wrapper { width: 100%;}

header { width: 960px; margin: 0 auto; text-align: left;}

header {
	position: relative;
	height: auto;
}

footer {
	background: #3A2A1B;
	clear: both;
}

/******************************************************************** header
*/
header .header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .site-title {
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: normal;
	color: #BBA28A;
	letter-spacing: 0.05em;
}

header .urgent-contact {
	font-size: 11px;
}

header h1 {
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: normal;
	color: #BBA28A;
	letter-spacing: 0.05em;
}
header p {
	margin: 0;
	padding: 0;
}
header p.logo {
    margin: 0 0 23px;
}

/******************************************************************** globalNav
*/
header nav#globalNav {
    position: absolute;
	top: 64px;
    left: 150px;
}
header nav#globalNav ul li {
	float: left;
}
header nav#globalNav ul li:last-child {
	margin-right: 0;
}
header nav#globalNav ul li a {
	text-decoration: none;
	color: #75481D;
	font-size: 15px;
	padding: 12px;
	line-height: 1.4;
	display: block;
}
header nav#globalNav ul li a span {
	font-size: 10px;
	line-height: 0.8;
	display: block;
	text-align: center;
	font-weight: normal;
	color: #BBA28A;
}
header nav#globalNav ul li a:hover span, header nav#globalNav ul li a:hover {
	color: #BBA28A;
}
header nav#globalNav .link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px;
  line-height: 1.4;
  cursor: pointer;
  z-index: 999;
}
header nav#globalNav .link {
	color: #75481D;
}
header nav#globalNav .link:hover,
header nav#globalNav .link:focus-within {
  color: #BBA28A;
}

header nav#globalNav .link-hover::after {
  content: '▼';
  font-size: 10px;
}

header nav#globalNav .dropDown {
	position: absolute;
    bottom: 0;
    left: -80px;
    width: 300px;
    box-sizing: border-box;
    display: none;
    padding: 10px;
    background-color: #fff;
    opacity: 0.95;
    box-shadow: 0px 3px 8px -2px #bfbebe;
    transform: translate(0, 100%);
}

header nav#globalNav .link:hover > .dropDown,
header nav#globalNav .link:focus-within > .dropDown {
  	display: block;

}

header nav#globalNav .dropDown__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

header nav#globalNav .dropDown__link {
  padding: 10px 20px;
}
header nav#globalNav .dropDown__link:hover,
header nav#globalNav .dropDown__link:focus {
  color: #BBA28A;
}
header nav#globalNav ul li .dropDown .dropDown__item {
  margin-right: 0;
  padding: 0;
}

/* PC時は完全に隠す */
.sp-menu-trigger, .sp-global-nav {
    display: none;
}

@media screen and (max-width: 768px) {
    /* ボタン表示 */
    .sp-menu-trigger {
        display: block;
        position: absolute;
        top: 15px;
        right: 20px;
        width: 44px;
        z-index: 1000;
        cursor: pointer;
    }
    .sp-menu-trigger span {
        display: block;
        width: 100%;
        height: 1px;
        background: #75481d;
        margin-bottom: 9px;
        transition: 0.3s;
    }
    .sp-menu-trigger p {
        font-size: 10px;
        color: #75481d;
        text-align: center;
        font-weight: bold;
    }
    /* ボタン変形(×印) */
    .sp-menu-trigger.is-active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .sp-menu-trigger.is-active span:nth-child(2) { opacity: 0; }
    .sp-menu-trigger.is-active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

    /* ナビ本体 */
    .sp-global-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #f7f4ef;
        z-index: 999;
        transform: translateX(100%); /* 右側に隠しておく */
        transition: transform 0.4s ease;
        overflow-y: auto;
    }
    .sp-global-nav.is-show {
        transform: translateX(0); /* スライドイン */
    }

    .sp-nav-inner {
        padding: 40px 30px 120px;
    }

    .sp-global-nav ul { list-style: none; padding: 0; margin: 0; text-align: center; }
    .sp-global-nav ul li a,
    .sp-accordion-btn {
        display: block;
        padding: 10px 0;
        font-size: 15px;
        color: #75481d;
        text-decoration: none;
        border-bottom: 1px solid rgba(117, 72, 29, 0.1);
    }

    /* アコーディオン */
    .sp-accordion-btn {
        position: relative;
    }
    .sp-accordion-btn::after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 1px solid #75481d;
        border-bottom: 1px solid #75481d;
        transform: translateY(-70%) rotate(45deg);
        transition: 0.3s;
    }
    .sp-accordion-btn.is-open::after {
        transform: translateY(-20%) rotate(-135deg);
    }
    .sp-drop-down {
        display: none;
        background: rgba(117, 72, 29, 0.05);
    }
    .sp-drop-down li a {
        font-size: 14px !important;
        border-bottom: none !important;
    }

    /* CTAエリア */
    .sp-nav-cta {
        margin-top: 10px;
        text-align: center;
    }
    .sp-nav-cta p { font-size: 12px; margin-bottom: 8px; color: #75481d; }
	.sp-nav-cta .phone-button {
		margin-bottom: 15px;
	}
}

/******************************************************************** mainVisual
*/
#mainVisual {
	background: url(img/common-bg-title.jpg) no-repeat 50% 50%;
	background-size: cover;
	height: 200px;
	position: relative;
	text-align: center;
}
#mainVisual h1 {
	margin-top: 52px;
	font-size: 30px;
    font-weight: normal;
}
#mainVisual h1.tangerine-regular span {
	display: block;
	font-size: 12px;
}
#mainVisual h1.tangerine-regular {
	margin-top: 16px;
    font-size: clamp(60px, 8vw, 90px);
    font-weight: normal;
    line-height: 1.2;
    color: #75481D;
}
#mainVisual h1.tangerine-regular span {
	display: block;
	font-size: 12px;
}
#mainVisual #pan{
	font-size: 10px;
}
#mainVisual #pan ul{
	width: 960px;
	margin: 0 auto;
	padding-top: 10px;
	text-align: left;
}
#mainVisual #pan ul li:first-child {
    padding: 0;
}
#mainVisual #pan ul li {
    display: inline;
    padding: 0 0 0 15px;
    position: relative;
}
#mainVisual #pan ul li:before {
    content: ">";
    display: inline-block;
    left: 0;
    padding: 0 0 0 3px;
    position: absolute;
    text-decoration: none;
}
#mainVisual #pan ul li:first-child:before {
	display: none;
    content: "";
}
#mainVisual #pan ul li a {
	color: #75481D;
}
#mainVisual #pan ul li a:hover {
	color: #B49B83;
}

/******************************************************************** contents
*/

#breadcrumbsList { text-align: right;}


/******************************************************************** footer
*/

/* ベーススタイル */
.recommend-menu {
    background: #f7f4ef url(img/common-bg-recommendmenu.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.recommend-menu-inner {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
	padding: 60px 0 60px 0;
    box-sizing: border-box;
}

.recommend-menu .recommend-menu-title {
    font-size: clamp(60px, 8vw, 90px);
    color: #75481D;
    line-height: 0.8;
	margin: 0 0 40px;
    padding: 0;
    text-align: center;
}

.recommend-menu .recommend-menu-title span {
    display: block;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin-top: 10px;
}

/* メニューリストの Flexbox 化 */
.recommend-menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px 40px; /* 上下 左右の余白 */
    justify-content: flex-start;
}

.recommend-menu li {
	text-align: left;
    width: calc(33.333% - 27px); /* PC3列 */
    box-sizing: border-box;
}

.recommend-menu li a {
    display: flex;
    align-items: center;
    gap: 15px; /* アイコンとテキストの間隔 */
    text-decoration: none;
    color: #75481D;
    font-size: 17px;
    line-height: 1.4;
    transition: opacity 0.3s;
}

/* アイコン画像の設定 */
.recommend-menu li a::before {
    content: "";
    flex-shrink: 0;
    width: 85px;
    height: 85px;
    background-size: cover;
    background-position: center;
    border-radius: 50%; /* デザインに合わせた円形 */
    background-repeat: no-repeat;
}

/* 各メニューの画像パス指定 */
.recommend-menu li:nth-child(1) a::before { background-image: url(img/common-img-recommendmenu-brilliant-haircare.png); }
.recommend-menu li:nth-child(2) a::before { background-image: url(img/common-img-recommendmenu-straightperm.png); }
.recommend-menu li:nth-child(3) a::before { background-image: url(img/common-img-recommendmenu-electronic-treatment.png); }
.recommend-menu li:nth-child(4) a::before { background-image: url(img/common-img-recommendmenu-headspa.png); }
.recommend-menu li:nth-child(5) a::before { background-image: url(img/common-img-recommendmenu-kitsuke.png); }

.recommend-menu li a:hover {
    opacity: 0.7;
}

/* --- スマホ対応 (2列レイアウト) --- */
@media screen and (min-width: 211px) and (max-width: 599px) and (orientation: portrait), screen and (max-width: 767px) and (min-width: 300px) and (orientation: landscape){
    .recommend-menu-inner {
        padding: 40px 5%;
    }

    .recommend-menu ul {
        gap: 20px 10px; /* スマホ用に隙間を調整 */
    }

    .recommend-menu li {
        width: calc(50% - 5px); /* きっちり2列 */
    }

    .recommend-menu li a {
        font-size: 13px; /* 2列で収まるように調整 */
        gap: 5px;
        flex-direction: row; /* 横並びを維持 */
    }

    .recommend-menu li a::before {
        width: 50px; /* スマホ用にアイコンを縮小 */
        height: 50px;
    }

    /* 長いテキストの改行位置調整 */
    .recommend-menu li a br {
        display: none;
    }
}


footer .footer-content {
	display: flex;
	margin: 0 auto;
	width: 960px;
	padding: 40px 0 26px;
	gap: 50px;
	text-align: left;
}

footer .footer-content .footer-logo {
	width: 217px;
}

footer .footer-content .footer-links {
	display: flex;
	gap: 50px;
	flex: 1;
	flex-direction: row;
	justify-content: flex-end;
}

footer .footer-content .link-group p {
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 14px;
	padding: 0;
}

footer .footer-content .link-group ul {
	list-style: none;
}

footer .footer-content .link-group li {
	margin-bottom: 8px;
}

footer .footer-content .link-group a {
	color: #ffffff;
	font-size: 14px;
	transition: opacity 0.3s ease;
}

footer .footer-content .link-group a:hover {
	opacity: 0.7;
}

footer .footer-content .link-group.f-social img {
	display: inline-block;
	padding-right: 8px;
}

footer address {
	color: #bba28a;
	font-size: 10px;
	padding: 4px 0;
	border-top: 1px solid #bba28a;
}

@media screen and (min-width: 211px) and (max-width: 599px) and (orientation: portrait), screen and (max-width: 767px) and (min-width: 300px) and (orientation: landscape){
    footer .footer-content {
        flex-direction: column;
        align-items: flex-start; /* 左寄せに変更 */
        padding: 40px 5%;
		gap: 40px;
		width: 100%;
		box-sizing: border-box;
    }

    footer .footer-content .footer-logo {
		width: 150px;
    }

    footer .footer-content .footer-links {
        flex-direction: column; /* グループ自体は縦に並べる */
        gap: 30px;
        width: 100%;
    }

    footer .footer-content .link-group p {
        font-size: 16px; /* 見出しを少し大きく */
        margin-bottom: 20px;
        padding-bottom: 0;
    }

    /* リンクを2列に並べる設定 */
    footer .footer-content .link-group ul {
		display: flex;
        flex-wrap: wrap;     /* 折り返しを許可 */
        gap: 12px 20px;      /* 行間 12px / 左右の間隔 20px */
        justify-content: flex-start; /* 左詰めで並べる */
    }

    footer .footer-content .link-group li {
		width: auto;         /* 50%固定を解除して文字幅に合わせる */
        margin-bottom: 0;
    }

	footer .footer-content .link-group a {
        white-space: nowrap; /* リンク内での意図しない改行を防ぐ */
        font-size: 14px;      /* モバイルで見やすいサイズに調整 */
    }

    /* SOCIALセクションのアイコン横並び */
    footer .footer-content .link-group.f-social ul {
        gap: 15px;
    }

    footer .footer-content .link-group.f-social li {
        width: auto; /* SNSは自幅に合わせる */
    }
}

.pagetop { position: fixed; bottom: 20px; right: 10px; padding: 0; text-align: right;}



/* ===================================================================
 contents
=================================================================== */

/******************************************************************** module
*/

p.campaign-banner {
	margin: 24px auto;
	font-size: 15px;
	font-weight: bold;
}
p.campaign-banner a {
    padding: 15px 10px;
    width: 65%;
    margin: 0 auto;
    font-size: 18px;
    display: block;
	text-decoration: none;
	text-align: center;
	background: #FB615F;
	color: #fff;
	font-weight: bold;
	border-radius: 8px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
p.campaign-banner a::after {
    content: url("img/common-icon-arrow-white.png");
    display: inline-block;
    -webkit-transform: translateX(0.2em) translateY(0.05em);
    -ms-transform: translateX(0.2em) translateY(0.05em);
    transform: translateX(0.2em) translateY(0.05em);
}
p.campaign-banner a:hover {
	background: #FF8A90;
}

p.link {
	margin: 24px auto;
	font-size: 15px;
	font-weight: bold;
}
p.link a {
	padding: 18px 48px 18px 54px;
    text-decoration: none;
    text-align: center;
    border: 1px solid #75481D;
    color: #75481D;
    font-weight: bold;
    box-sizing: border-box;
	background: #fff url(img/common-icon-arrow.png) 95% 50% no-repeat;
    background-size: 15px;
}
p.link a:hover {
	background-color: #ece3db;
}

@media screen and (max-width: 768px) {
	p.link a {
		padding: 18px 32px 18px 16px;
	}
}

ul.contentsContent {
    position: relative;
    clear: both;
    border: 2px solid #382628;
    height: 95px;
    width: 633px;
    padding: 19px 41px;
    margin: 160px auto 40px;
    margin-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
}
ul.contentsContent li.photo {
	position: absolute;
    top: -93px;
    left: 200px;
    z-index: -1;
}
ul.contentsContent li {
	float: left;
}
ul.contentsContent li.tel {
	margin-right: 18px;
    margin-top: -3px;
    font-size: 12px;
    color: #BBA28A;
    letter-spacing: 0.05em;
}
ul.contentsContent li.tel span {
	display: block;
    margin-bottom: 0;
    line-height: 1.3;
    margin-top: 6px;
    text-align: center;
}
ul.contentsContent li.reservation {
	width: 175px;
    margin-top: 5px;
    text-align: center;
}
ul.contentsContent li.reservation a {
	padding: 6px 0;
    display: block;
    background: #00c300;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul.contentsContent li.reservation a:hover {
	background :#00b300;
}

ul.contentsContent li.reservation a img {
	margin-right: 5px;
	vertical-align: middle;
	width: 38px;
	margin-top: -3px;
}
ul.contentsContent li.lineAttention {
    position: absolute;
    left: 0;
    bottom: -53px;
    text-align: left;
}
.photoGallery {
	clear: both;
	overflow: hidden;
	margin-bottom: 40px;
}
.photoGallery .ttl {
	font-size: 20px;
	text-align: left;
	margin: 25px 0 15px;
	padding: 0;
}
.photoGallery .ttl::before {
	content: url(img/common-icon-camera.png);
	margin-right: 8px;
	vertical-align: middle;
}
.photoGallery ul {
	margin: 0 auto 10px;
	overflow: hidden;
}
.photoGallery ul li {
	width: 210px;
	margin-right: 39px;
	margin-bottom: 25px;
	text-align: left;
	float: left;
}
.photoGallery ul li:nth-child(4n) {
	margin-right: 0;
}
.photoGallery ul li a {
	text-decoration: none;
	color: #382628;
}
.photoGallery ul li a:hover {
	color: #BBA28A;
}
.photoGallery ul li img {
	margin-bottom: 15px;
	border-radius: 50%;
}
.photoGallery ul li a .title {
	font-weight: bold;
	font-size: 16px;
	color: #382628;
}
.photoGallery ul li a:hover .title {
	color: #BBA28A;
}

/* 関連記事 */
.relationPost {
	background: #fff;
    padding: 60px 120px;
    width: 80%;
    margin: 40px auto;
    box-sizing: border-box;
}
.relationPost h3 {
	margin-top: 0;
}
.relationPost ul li {
	margin-bottom: 20px;
    text-align: left;
    display: flex;
    flex-direction: row;
}
.relationPost ul li br {
	display: none;
}
.relationPost ul li p {
	padding: 0;
}
.relationPost .relationPost-img {
	padding-right: 8px;
	text-align: center;
    width: 90px;
}
.relationPost-content {
    width: 410px;
}
.relationPost ul li .state {
	font-size: 12px;
	margin: 0;
	padding: 0;
}
.relationPost ul li .state a {
	color: #BBA28A;
}
.relationPost ul li .state a:hover {
	color: #BBA28A;
}
.relationPost ul li .state span {
	margin-right: 3px;
}
.relationPost ul li .title {
	margin: 0;
	padding: 0;
}
.relationPost ul li .title a {
	text-decoration: none;
	font-size: 16px;
	line-height: 1.1;
	color: #75481D;
}
.relationPost ul li .title a:hover {
	color: #BBA28A;
}
.relationPost ul li img {
	margin-bottom: 15px;
}

/* --- 関連記事セクション レスポンシブ追加コード --- */
@media screen and (max-width: 768px) {
    /* 外枠の幅とパディングをスマホ用に最適化 */
    .relationPost {
		width: 95%;
        padding: 30px 30px 15px; /* 左右の広い余白を詰める */
        margin: 30px auto;
    }

	.relationPost h3 {
		margin-bottom: 15px;
	}

    /* リストアイテムの配置 */
    .relationPost ul li {
        align-items: flex-start; /* 上揃え */
        gap: 10px; /* 画像とテキストの間隔 */
    }

    /* 画像エリアの固定幅を維持しつつ調整 */
    .relationPost .relationPost-img {
        padding-right: 0;
        flex-shrink: 0; /* 画像が潰れないように固定 */
    }

    .relationPost ul li img {
        margin-bottom: 0; /* 下の余白をカット */
        width: 80px; /* 少しコンパクトに */
        height: auto;
    }

    /* コンテンツエリアの固定幅(410px)を解除 */
    .relationPost-content {
        width: 100%;
        flex: 1;
    }

	.relationPost-content .state,
	.relationPost-content .title {
		margin: 0;
		padding: 0;
	}

    /* 記事タイトルの文字サイズ調整 */
    .relationPost ul li .title a {
        font-size: 14px;
        line-height: 1.4;
        display: block;
    }

    /* 日付の調整 */
    .relationPost ul li .state {
        margin-bottom: 4px;
    }
}

/* 非常に狭い画面（iPhone SEなど）への対応 */
@media screen and (max-width: 375px) {
    .relationPost ul li .title a {
        font-size: 13px;
    }
}

/******************************************************************** concept
*/
section.concept {
	margin: 0 auto 50px;
}
section.concept .inner {
    width: 960px;
    margin: 80px auto 60px;
    position: relative;
}
section.concept .inner .innerBox-content p {
    text-align: justify;
}
section.concept .inner strong {
	font-weight: normal;
}
section.concept h2 {
	margin: 47px auto 36px;
}
section.concept .c-inner-bg-inner {
	padding: 80px 0 60px;
}
section.concept .c-innerBox-radius {
    margin: 20px auto;
}
section.concept .c-inner-bg .step-arrow{
	width: 40px;
    height: 16px;
    margin: 0 auto; /* 中央寄せ */
    margin-top: 24px; /* 親との距離を調整（bottom: -40pxの代わり） */
    background: url(img/common-icon-step-arrow.png) no-repeat 0 0;
    background-size: 40px;
}

/* 各アイテムの基本構造 */
section.concept .c-concept-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 100px;
    gap: 5%;
}

/* 偶数番目のアイテムを左右反転 */
section.concept .c-concept-item:nth-child(even) {
    flex-direction: row-reverse;
}

/* 画像エリア */
section.concept .c-concept-img {
    width: 50%;
    position: relative;
}

section.concept .c-concept-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 数字（01, 02...）の装飾 */
section.concept .step-num {
    position: absolute;
	top: -40px;
    left: -40px;
    font-size: 120px;
	font-weight: normal;
    font-style: italic;
    color: #75481D;
    line-height: 1;
    z-index: 1;
}

/* 偶数番目の数字の位置調整 */
section.concept .c-concept-item:nth-child(even) .step-num {
    left: auto;
    right: -40px;
}

/* テキストエリア */
section.concept .c-concept-text {
    width: 45%;
}

section.concept .c-concept-text h3 {
	text-align: left;
    margin-bottom: 20px;
    position: relative;
}

section.concept .c-concept-text p {
    text-align: justify;
}

/* レスポンシブ（スマホ対応） */
@media (max-width: 768px) {
    section.concept .c-concept-item,
    section.concept .c-concept-item:nth-child(even) {
        flex-direction: column; /* 縦並びに */
        margin-bottom: 40px;
    }

    section.concept .c-concept-img,
    section.concept .c-concept-text {
        width: 100%;
    }

    section.concept .c-concept-text {
        margin-top: 0;
    }

	section.concept .c-concept-text h3 {
		text-align: center;
		margin-bottom: 0;
	}

    section.concept .step-num {
        font-size: 60px;
		top: -14px;
        left: -14px;
    }

	section.concept .c-concept-item:nth-child(even) .step-num {
    	right: auto;
		left: -14px;
	}
}

/* セクション背景（大理石風） */
section.concept .p-recommended-menu {
    background: url('img/concept-bg-recommend.jpg') repeat-y;
    background-size: 1440px;
}

section.concept .l-container {
    width: 960px;
    margin: 0 auto;
    padding: 40px 0 60px;
}

section.concept .c-section-title {
    margin-bottom: 50px;
}

/* メニューカード共通構造 */
section.concept .c-menu-card {
    background: #fff;
	align-items: center; /* これを追加：カード全体の高さを揃えつつ、中身を中央へ */
    display: flex;
    margin-bottom: 40px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 軽い影 */
    gap: 40px;
}

section.concept .c-menu-card__img {
    width: 35%;
    flex-shrink: 0;
}

section.concept .c-menu-card__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

section.concept .c-menu-card__content {
    flex: 1;
}

section.concept .c-menu-card__content h3 {
    margin-top: 0;
	text-align: left;
	margin-bottom: 20px;
    line-height: 1.4;
}

section.concept .c-menu-card__content p {
    text-align: justify;
}

section.concept .c-menu-card__content strong {
	font-weight: normal;
}

/* スマホ対応 */
@media (max-width: 768px) {
	section.concept .l-container {
		width: 90%;
		padding: 1px 0 20px;
	}
    section.concept .c-menu-card {
        flex-direction: column;
        padding: 20px 5%;
        gap: 20px;
    }
	section.concept .c-menu-card h3 {
		text-align: center;
	}
    section.concept .c-menu-card__img {
		width: 100%;
		max-width: 320px;
    }
	section.concept .c-menu-card p.link{
		text-align: center;
	}
}

/* Q&A部分 */
section.concept .qa-item {
    border-bottom: 1px solid #e0d8c3; /* 下線 */
}

section.concept .qa-item br {
	display: none;
}

section.concept .qa-item:first-child {
    border-top: 1px solid #e0d8c3; /* 最初だけ上線を追加 */
}

/* 質問部分 */
section.concept .qa-question {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 25px 40px 25px 10px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    color: #5a402c; /* 画像に合わせた濃い茶色 */
    position: relative;
    transition: 0.3s;
}

/* Qアイコン */
section.concept .qa-icon {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    margin-right: 15px;
    color: #8c7656;
}

/* 右側のプラス・マイナス記号（擬似要素で作成） */
section.concept .qa-question::after {
    content: '+';
    position: absolute;
    right: 15px;
    font-size: 24px;
    font-weight: 300;
    color: #8c7656;
    transition: transform 0.3s;
}

/* 開いている時のマイナス表示 */
section.concept .qa-item.is-open .qa-question::after {
    content: '−'; /* マイナス記号 */
}

/* 回答部分（初期状態は非表示） */
section.concept .qa-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

section.concept .qa-item.is-open .qa-answer {
    max-height: 500px; /* 十分な高さを設定 */
}

section.concept .qa-answer-inner {
	text-align: left;
    padding: 0 10px 25px 45px; /* アイコンの幅分左を空ける */
    font-size: 14px;
    line-height: 1.8;
}

/******************************************************************** straight-permanent
*/
section.straight-permanent .inner {
	width: 960px;
	margin: 80px auto 20px;
	position: relative;
}
section.straight-permanent .inner p {
	text-align: left;
}

/******************************************************************** menu
*/


/******************************************************************** voice
*/
section.voice {
	width: 960px;
	margin: 80px auto;
}
section.voice h2 {
	margin: 47px auto 36px;
}
section.voice ul {
	margin: 0 auto 10px;
	overflow: hidden;
}
section.voice ul li {
	width: 210px;
	height: 370px;
	margin-right: 39px;
	margin-bottom: 48px;
	text-align: left;
	float: left;
}
section.voice ul li:nth-child(4n) {
	margin-right: 0;
}
section.voice ul li a {
	text-decoration: none;
	color: #382628;
}
section.voice ul li a:hover {
	color: #BBA28A;
}
section.voice ul li img {
	margin-bottom: 15px;
	border-radius: 50%;
}
section.voice ul li .name{
	padding: 0;
	text-align: right;
}

/******************************************************************** staff
*/
section.staff {
	margin: 80px auto;
	font-size: 16px;
}
section.staff .inner {
	margin: 0 auto;
	overflow: hidden;
}
section.staff .staffBlock {
	width: 960px;
	margin: 60px auto;
	overflow: hidden;
}
section.staff .staffBlock .fL {
	width: 310px;
}
section.staff .staffBlock .fR {
	width: 605px;
	text-align: left;
}
section.staff .staffBlock h2 {
	font-size: 26px;
	margin: 60px auto 26px;
}
section.staff .staffBlock table {
	width: 100%;
}
section.staff .staffBlock table th {
	width: 30%;
	text-align: center;
}
section.staff .staffBlock table th, section.staff .staffBlock table td {
	padding: 26px 20px;
}
section.staff .staffBlock .comment {
	clear: both;
    position: relative;
    width: 960px;
    text-align: left;
    margin-top: 50px;
    padding: 20px 30px 20px 30px;
    background: #fff;
    border-radius: 8px;
    line-height: 2.1;
    box-sizing: border-box;
}
section.staff .staffBlock .comment .catch {
	color: #734B28;
	font-size: 22px;
	font-weight: bold;
}

/******************************************************************** top
*/

#top p:empty{display: none;}

#top #mainVisual {
	background: url(img/top-img-main.jpg) no-repeat 50% 50%;
	background-size: 1440px;
	height: 408px;
    min-width: 960px;
    overflow: hidden;
}

#top #mainVisual p {
	text-align: center;
	margin: 0;
	padding: 0;
}

#top .about-inner {
	width: 960px;
	margin: 60px auto;
}

#top .about-content {
  display: flex;
  gap: 50px;
  margin-bottom: 40px;
}

#top .about-title {
  flex: 1;
  text-align: left;
  margin-top: 15px;
}

#top .about-description {
  flex: 1;
}

#top .about-description p {
  text-align: justify;
}

#top .about-description strong {
  font-weight: bold;
}

/* Gallery Section */
#top .gallery {
  display: flex;
  gap: 4px;
  max-width: 1492px;
  margin: 0 auto;
  padding: 0;
}

#top .gallery-item {
  flex: 1;
  height: 420px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#top .gallery-item-1 {
  background-image: url(img/top-img-slider-photo1.jpg);
}

#top .gallery-item-2 {
  background-image: url(img/top-img-slider-photo2.jpg);
}

#top .gallery-item-3 {
  background-image: url(img/top-img-slider-photo3.jpg);
}

#top .gallery-item-4 {
  background-image: url(img/top-img-slider-photo4.jpg);
}

#top section.menu {
	padding: 60px 0 10px;
	background: #ddd9d1 url(img/top-bg-menu.jpg) no-repeat 50% 50%;
	background-size: 1440px;
}
#top section.menu h2 {
	margin: 0 auto 36px;
	font-size: 90px;
	color: #75481D;
	font-weight: normal;
    line-height: 0.9;
}
#top section.menu h2 span {
	display: block;
	font-size: 12px;
}
#top section.menu h3 {
	font-size: 24px;
	line-height: 1.3;
}
#top section.menu ul {
	width: 960px;
	margin: 0 auto 39px;
	overflow: hidden;
}
#top section.menu ul li {
	width: 210px;
	margin-right: 39px;
	float: left;
}
#top section.menu ul li img {
	border: 11px solid #fff;
}

#top section.menu ul li p {
    text-align: left;
	padding: 0;
	margin: 0;
}
#top section.menu ul li:last-child {
	margin-right: 0;
}
#top section.menu ul li a h3 {
	font-size: 20px;
	padding: 0;
    margin: 10px 0;
}
#top section.menu ul li a {
	text-decoration: none;
	color: #382628;
}
#top section.menu ul li a:hover {
	color: #BBA28A;
}

#top section.staffBlog {
	margin: 0 auto 50px;
	padding: 80px 0;
	position: relative;
	background: #fdfdfd url(img/top-bg-staff-blog.jpg) no-repeat 50% 50%;
	background-size: 1440px;
}
#top section.staffBlog .inner {
	width: 960px;
	margin: 0 auto;
	position: relative;
}
#top section.staffBlog .relationPost {
    position: relative; /* 必須：擬似要素の基準にする */
    z-index: 1; /* コンテンツを背景より前に出す */
    margin: 0 auto;
	background: none;
}

#top section.staffBlog .relationPost::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    z-index: -1; /* コンテンツの後ろに配置 */
}
#top section.staffBlog h3 {
    text-align: center;
	margin: 0 0 20px;
}

#top section.staffBlog .state {
	margin: 0;
	padding: 0;
}

#top section.staffBlog .title {
	margin: 0;
	padding: 0;
}

#top section.staffBlog .link {
	margin-bottom: 0;
}

#top section.voice {
	position: relative;
	background: #fff;
	width: 100%;
	margin: 0;
}

#top section.voice .inner {
	width: 960px;
	margin: 0 auto;
	padding: 60px 0;
	position: relative;
}

#top section.voice .inner h2 {
	margin: 0 auto 36px;
	font-size: 90px;
	color: #75481D;
	font-weight: normal;
    line-height: 0.9;
}
#top section.voice h2 span {
	display: block;
	font-size: 12px;
}

@media screen and (min-width: 211px) and (max-width: 599px) and (orientation: portrait), screen and (max-width: 767px) and (min-width: 300px) and (orientation: landscape){
	#top #mainVisual {
		height: auto;
	}

	/* 全体コンテナの幅と余白をリセット */
    #top .about-inner {
        width: 100%; /* 960px固定を解除 */
        padding: 0 5%;       /* 左右に余白を確保 */
        margin: 40px auto;
        box-sizing: border-box;
    }

	#top #contents h2 {
		margin: 0;
		padding: 0;
	}

    /* タイトルと説明文を縦並びに変更 */
    #top .about-content {
        flex-direction: column; /* 横並びを解除 */
        gap: 0;             /* 隙間を縮小 */
        margin-bottom: 0;
    }

    /* ボタン（もっと見る）の調整 */
    #top .about-inner .link {
        text-align: center;    /* ボタンを中央に配置 */
    }

	/* --- ギャラリーセクション レスポンシブ追加コード --- */
    #top .gallery {
        flex-wrap: wrap; /* 折り返しを許可 */
        gap: 4px;        /* 隙間を維持 */
        padding: 0 4px;  /* 左右にわずかな余白 */
    }

    #top .gallery-item {
        /* 2列にするための設定 */
        flex: none;      /* PC版のflex: 1を解除 */
        width: calc(50% - 2px); /* 隙間(4px)の半分を引く */
        height: 140px;   /* スマホで見やすい高さに調整 */
    }


    #top section.menu {
        padding: 40px 15px 20px;
        background-size: cover; /* 背景画像を画面幅に合わせる */
    }

    #top section.menu h2 {
        font-size: 60px; /* PC版90pxは大きすぎるので調整 */
        margin-bottom: 25px;
    }

    #top section.menu ul {
        width: 100%; /* 960px固定を解除 */
        display: flex;
        flex-wrap: wrap;
        gap: 10px 4%; /* 縦の間隔 30px / 横の間隔 4% */
        overflow: visible;
    }

    #top section.menu ul li {
        width: 48%; /* スマホで2列並びにする */
        margin-right: 0; /* float用の余白をリセット */
        float: none;
        box-sizing: border-box;
    }

    #top section.menu ul li img {
        width: 100%; /* 親要素の幅いっぱいに */
        height: auto;
        border-width: 9px; /* 白枠をスマホに合わせて少し細く */
        box-sizing: border-box;
    }

    #top section.menu ul li a h3 {
        font-size: 16px; /* タイトルサイズを微調整 */
        margin: 8px 0;
    }

    #top section.menu ul li p {
        font-size: 13px;
        line-height: 1.5;
    }




	#top section.staffBlog {
		padding: 40px 0;
		margin: 0 auto;
	}
	#top section.voice .inner {
		width: 100%;
		padding: 40px 0;
	}

	#top section.voice .inner .banner {
		margin: 40px auto 0;
	}
}

/******************************************************************** recruit
*/
section.recruit .inner {
	width: 960px;
	margin: 80px auto;
	overflow: hidden;
}
section.recruit h3 {
    margin: 60px auto 16px;
    font-size: 24px;
}
section.recruit p {
	text-align: left;
}
section.recruit .aC p {
	text-align: center;
}
section.recruit p strong.special {
	color: #4b865a;
	font-size: 18px;
}
section.recruit table {
    width: 100%;
    font-size: 16px;
    text-align: center;
    margin: 0 auto 40px;
}
section.recruit table th {
    text-align: center;
    width: 30%;
    box-sizing: border-box;
}

section.recruit table td {
    text-align: right;
    padding-right: 40px;
    box-sizing: border-box;
    text-align: left;
}
section.recruit table th strong {
	display: inline-block;
    background: rgba(56, 38, 40, 0.65);
    color: #fff;
    font-size: 15px;
    padding: 2px 10px;
    border-radius: 8px;
    margin-right: 8px;
}
section.recruit table th span, section.recruit table td span {
	display: block;
	font-size: 14px;
	font-weight: normal;
}
section.recruit table caption {
	font-size: 18px;
    font-weight: bold;
    margin: 25px 0 8px;
    text-align: center;
}
section.recruit table caption span {
	font-size: 18px;
}


/******************************************************************** access
*/
section.access .inner {
	width: 960px;
	margin: 80px auto;
	overflow: hidden;
}
section.access .innerBox {
	overflow: hidden;
}
section.access .innerBox .fL {
	width: 340px;
}
section.access .innerBox table {
	font-size: 16px;
	width: 580px;
}
section.access .innerBox table th {
	width: 20%;
	text-align: center;
}
section.access .map {
	margin: 40px auto 60px;
	width: 960px;
	height: 320px;
}
section.access .train h3,
section.access .buss h3 {
	margin-top: 0;
}

section.access .train {
	clear: both;
	width: 448px;
	float: left;
}
section.access .buss {
	width: 449px;
	float: right;
}
section.access .train ol {
	border-right: 1px solid #AAAAAA;
}
section.access .train ol, section.access .buss ol {
	padding: 30px 0;
	list-style: none;
}
section.access .train ol li, section.access .buss ol li {
	margin-bottom: 50px;
}
section.access .train ol li img, section.access .buss ol li img {
	display: block;
	margin: 0 auto 25px;
}

/******************************************************************** hair-set
*/
section.hair-set .inner {
	width: 960px;
	margin: 80px auto;
	position: relative;
}

/******************************************************************** brilliant-haircare
*/
section.brilliant-haircare .inner {
	width: 960px;
	margin: 80px auto;
	position: relative;
}
section.brilliant-haircare .inner p {
	text-align: left;
}

/******************************************************************** electronic-treatment
*/
section.electronic-treatment {
	margin: 50px auto;
}
section.electronic-treatment .inner {
	width: 960px;
	margin: 80px auto 0;
	position: relative;
}
section.electronic-treatment .movie {
	margin: 40px auto 60px;
}
section.electronic-treatment .c-inner-bg a {
	text-decoration: underline;
}
section.electronic-treatment .c-inner-bg a:hover {
	text-decoration: none;
}


/******************************************************************** head-spa
*/
section.head-spa .inner {
	width: 960px;
	margin: 80px auto;
	position: relative;
}
section.head-spa .inner p {
	text-align: left;
}
/* 上段：2列のグリッド */
section.head-spa .inner .menu-grid {
    margin-top: 48px;
	display: flex;
    border-bottom: 1px solid #e0d8c3; /* 横線（中央） */
}

/* 各メニュー項目の共通設定 */
section.head-spa .inner .menu-item {
    display: flex;
    align-items: center; /* 垂直中央 */
    margin: 0;
    padding: 30px 20px;
    flex: 1;
}

/* 上段の左側の項目にだけ右線を入れる */
section.head-spa .inner .menu-grid .menu-item:first-child {
    border-right: 1px solid #e0d8c3;
}

/* 下段（1列）の設定 */
section.head-spa .inner .menu-wide .menu-item {
    padding-left: 20px;
}

/* ラベル（緑の薄い背景部分） */
section.head-spa .inner .menu-item dt {
    width: 180px; /* ラベルの幅を固定 */
    flex-shrink: 0;
}

section.head-spa .inner .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f6f3; /* 薄い緑色 */
    color: #5a6e60; /* 濃い緑色の文字 */
    font-size: 13px;
    padding: 8px 12px;
    line-height: 1.4;
    text-align: center;
    min-height: 40px;
}

/* メニュー名 */
section.head-spa .inner .menu-item dd {
    margin: 0;
    font-size: 22px; /* 少し大きめの明朝体 */
    padding-left: 20px;
    white-space: nowrap;
}

/* --- ヘッドスパメニュー レスポンシブ追加コード --- */
@media screen and (max-width: 768px) {
    /* 上段の2列グリッドを縦並びに変更 */
    section.head-spa .inner .menu-grid {
		margin-top: 10px;
        flex-direction: column;
        border-bottom: none; /* PC用の横線を消す */
    }

    /* 各メニュー項目の調整 */
    section.head-spa .inner .menu-item {
        flex-direction: column; /* ラベルとメニュー名を縦に */
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #e0d8c3; /* 各項目の下に線を引く */
    }

    /* PC版の右線を消す（1番目の項目） */
    section.head-spa .inner .menu-grid .menu-item:first-child {
        border-right: none;
    }

    /* ラベル(dt)の幅を100%に */
    section.head-spa .inner .menu-item dt {
        width: 100%;
        margin-bottom: 8px;
    }

    /* ラベル自体の調整（左寄せで見やすく） */
    section.head-spa .inner .label {
        padding: 6px 10px;
		min-height: auto;
        font-size: 12px;
    }

    /* メニュー名(dd)の調整 */
    section.head-spa .inner .menu-item dd {
        padding-left: 0;
        font-size: 16px; /* スマホ用に少しサイズダウン */
        white-space: normal; /* 折り返しを許可 */
    }
}

/******************************************************************** salonMenu
*/
section.salonMenu .inner {
	width: 960px;
	margin: 80px auto;
}
section.salonMenu h2 {
	margin: 60px auto 16px;
}
section.salonMenu h2 span {
	font-size: 18px;
}
section.salonMenu h3 {
	margin: 55px auto 8px;
	padding: 0;
}
section.salonMenu h3 span {
	font-size: 16px;
}
section.salonMenu h4 {
	margin: 45px auto 8px;
	padding: 0;
}
section.salonMenu table {
	width: 80%;
	margin: 0 auto;
	font-size: 18px;
}
section.salonMenu table th,
section.salonMenu table td {
	padding: 20px 0;
}
section.salonMenu table th {
	text-align: center;
	width: 60%;
	box-sizing: border-box;
}
section.salonMenu table td {
	text-align: right;
	padding-right: 40px;
	width: 40%;
	box-sizing: border-box;
}
section.salonMenu table th strong {
	display: inline-block;
    background: rgba(56, 38, 40, 0.65);
    color: #fff;
    font-size: 15px;
    padding: 2px 10px;
    border-radius: 8px;
    margin-right: 8px;
}
section.salonMenu table th span, section.salonMenu table td span {
	display: block;
	font-size: 14px;
	font-weight: normal;
}
section.salonMenu table caption {
	font-size: 18px;
	color: #75481D;
    margin: 25px 0 8px;
    text-align: center;
}
section.salonMenu table caption span {
	font-size: 18px;
}
section.salonMenu .attention {
	background: #fff;
	padding: 1px 40px 40px;
	border-radius: 8px;
	width: 80%;
	margin: 30px auto;
	box-sizing: border-box;
}
section.salonMenu .attention h3 {
	margin-top: 30px;
	font-size: 18px;
}
section.salonMenu .attention table {
	font-size: 14px;
	width: 100%;
}
section.salonMenu .attention table th,
section.salonMenu .attention table td {
	padding-top: 10px;
	padding-bottom: 10px;
}

/******************************************************************** voiceDetail
*/
section.voiceComment {
	margin-top: 60px;
	margin-bottom: 60px;
}

section.voiceComment .thumbnail img {
	border-radius: 50%;
	width: 280px;
	height: 280px;
	margin-top: 17px;
}
section.voiceComment .thumbnail .name {
	font-size: 27px;
	margin-top: 20px;
}
section.voiceComment .comment {
	position: relative;
    width: 730px;
    padding: 17px 27px;
    margin: 40px auto 40px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;

}
section.voiceComment .comment h3 {
	font-size: 18px;
    position: absolute;
    top: -35px;
    left: 0;
    padding: 0;
}
section.voiceComment .comment .handwriting {
	border-bottom: 2px dotted #B49B83;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
section.voiceComment .comment .handwriting img {
	max-width: 680px;
	height: auto;
}
section.voiceComment .comment .text {
	font-size: 16px;
	line-height: 2.1;
}


/******************************************************************** blog
*/
#blog #container {
	width: 960px;
	margin: 60px auto;

}
#blog #container #contents {
	overflow: hidden;
}
#blog #container main {
	width: 670px;
	float: left;
	text-align: left;
}
#blog #container aside#sidebar {
	width: 230px;
	float: right;
	text-align: left;
}
#blog #container article.columnPost .head {
	width: auto;
}
#blog #container article.columnPost .head .state, #blog #container article.columnPost .head .post-categories, #blog #container article.columnPost .head .state, #blog #container article.columnPost .head .post-categories li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

#blog #container article.columnPost .head .state a {
	color: #BBA28A;
}
#blog #container article.columnPost .head .state a:hover {
	color: #BBA28A;
}
#blog #container article.columnPost .head .state span {
	margin-right: 3px;
}
#blog #container article.columnPost .head .title a {
	font-weight: bold;
	font-size: 16px;
	color: #382628;
}
#blog #container article.columnPost .head .title a:hover {
	color: #BBA28A;
}
#blog #container article.columnPost .head h1 {
	font-size: 24px;
}
#blog #container article.columnPost .mainImg {
	margin: 40px auto;
	text-align: center;
}
#blog #container article.columnPost .mainImg img {
    max-width: 670px;
    height: auto;
}
#blog #container article.columnPost  .link {
    text-align: center;
    margin-bottom: 80px;
}
#blog #container article.columnPost p#pagenation {
    text-align: center;
    margin: 20px auto;
}
#blog #container article.columnPost .relationPost .ttl {
	font-weight: bold;
	font-size: 16px;
	padding-bottom: 0;
}
#blog #container article.columnPost .relationPost ul {
	margin-top: 4px;
}

#blog #container aside#sidebar .ttl {
	font-size: 20px;
	margin-top: 25px;
	padding-bottom: 0;
}

#blog #container aside#sidebar .category .ttl {
	margin-top: 0;
}

#blog #container article.columnPost .entry-content img {
    max-width: 670px;
    height: auto;
}
#blog #container article.columnPost .entry-content .alignleft { float: left; }
#blog #container article.columnPost .entry-content img.alignleft { display: inline-block; margin: 0 1.5em 1em 0; }

#blog #container article.columnPost .entry-content .alignright { float: right; }
#blog #container article.columnPost .entry-content img.alignright { display: inline-block; margin: 0 0 1em 1.5em; }

#blog #container article.columnPost .entry-content .aligncenter { clear: both; text-align:center; }
#blog #container article.columnPost .entry-content img.aligncenter { display: block; margin: 0 auto; }

#blog #container article.columnPost .entry-content #post h1, #blog #container article.columnPost .entry-content .post h2, #blog #container article.columnPost .entry-content .post h3, #blog #container article.columnPost .entry-content .post h4 ,#blog #container article.columnPost .entry-content .post h5 { color: #382628; background: none; border: none; text-align: inherit; font-weight: bold; padding-left: 0; }
#blog #container article.columnPost .entry-content #post h1 { font-size: 150%; }
#blog #container article.columnPost .entry-content #post h2 { font-size: 140%; }
#blog #container article.columnPost .entry-content #post h3 { font-size: 130%; }
#blog #container article.columnPost .entry-content #post h4 { font-size: 120%; }
#blog #container article.columnPost .entry-content #post h5 { font-size: 110%; }


/******************************************************************** category
*/
#category #container {
	width: 960px;
	margin: 60px auto;

}
#category #container #contents {
	overflow: hidden;
}
#category #container main {
	width: 670px;
	float: left;
	text-align: left;
}
#category #container aside#sidebar {
	width: 230px;
	float: right;
	text-align: left;
}
#category #container article.columnPost .state + h1 {
	margin-top: 0;
}
#category #container article.columnPost .head .state a {
	color: #BBA28A;
}
#category #container article.columnPost .head .state a:hover {
	color: #BBA28A;
}
#category #container article.columnPost .head .state span {
	margin-right: 3px;
}
#category #container article.columnPost .head .title a {
	font-weight: bold;
	font-size: 16px;
	color: #382628;
}
#category #container article.columnPost .head .title a:hover {
	color: #BBA28A;
}
#category #container article.columnPost .head h1 {
	font-size: 24px;
}
#category #container article.columnPost .mainImg {
	margin: 20px auto;
	text-align: center;
}
#category #container article.columnPost .mainImg img {
    max-width: 670px;
    height: auto;
}
#category #container article.columnPost  .link {
    text-align: center;
    margin-bottom: 80px;
}
#category #container article.columnPost p#pagenation {
    text-align: center;
    margin: 20px auto;
}
#category #container article.columnPost .relationPost .ttl {
	font-weight: bold;
	font-size: 16px;
	padding-bottom: 0;
}
#category #container article.columnPost .relationPost ul {
	margin-top: 4px;
}

#category #container aside#sidebar .ttl {
	font-size: 20px;
	margin-top: 25px;
	padding-bottom: 0;
}
#category #container aside#sidebar .category .ttl {
	margin-top: 0;
}

/******************************************************************** archive
*/
#archive #container {
	width: 960px;
	margin: 60px auto;

}
#archive #container #contents {
	overflow: hidden;
}
#archive #container main {
	width: 670px;
	float: left;
	text-align: left;
}
#archive #container aside#sidebar {
	width: 230px;
	float: right;
	text-align: left;
}
#archive #container article.columnPost .state + h1 {
	margin-top: 0;
}
#archive #container article.columnPost .head .state a {
	color: #BBA28A;
}
#archive #container article.columnPost .head .state a:hover {
	color: #BBA28A;
}
#archive #container article.columnPost .head .state span {
	margin-right: 3px;
}
#archive #container article.columnPost .head .title a {
	font-weight: bold;
	font-size: 16px;
	color: #382628;
}
#archive #container article.columnPost .head .title a:hover {
	color: #BBA28A;
}
#archive #container article.columnPost .head h1 {
	font-size: 24px;
}
#archive #container article.columnPost .mainImg {
	margin: 20px auto;
	text-align: center;
}
#archive #container article.columnPost .mainImg img {
    max-width: 670px;
    height: auto;
}
#archive #container article.columnPost  .link {
    text-align: center;
    margin-bottom: 80px;
}
#archive #container article.columnPost p#pagenation {
    text-align: center;
    margin: 20px auto;
}
#archive #container article.columnPost .relationPost .ttl {
	font-weight: bold;
	font-size: 16px;
	padding-bottom: 0;
}
#archive #container article.columnPost .relationPost ul {
	margin-top: 4px;
}

#archive #container aside#sidebar .ttl {
	font-size: 20px;
	margin-top: 25px;
	padding-bottom: 0;
}
#archive #container aside#sidebar .category .ttl {
	margin-top: 0;
}



@media screen and (min-width: 211px) and (max-width: 599px) and (orientation: portrait), screen and (max-width: 767px) and (min-width: 300px) and (orientation: landscape){
    body, header, #top #mainVisual, #mainVisual #pan ul, footer section.hair-salon, section.concept .inner, section.concept .block-inner, section.menu ul, section.voice, section.staff .staffBlock, section.staff .staffBlock .comment, section.staff .staffBg, section.staffBlog .inner, section.access .inner, section.hair-set .inner, section.electronic-treatment .inner, section.head-spa .inner, section.salonMenu .inner, #blog #container, #category #container, #archive #container, ul.contentsContent, footer nav.pickupMenu, section.staffBlog ul {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	box-sizing: border-box;
	}

	/* ===================================================================
	 common
	=================================================================== */

	img {
	    max-width: 100%;
	}

	/******************************************************************** header
	*/
	header {
	    height: auto;
	    padding: 0 5%;
		box-sizing: border-box;
	    overflow: hidden;
	}
	header p.logo {
	    margin: 15px 0 0;
	}
	header p.logo img {
	    width: 85px;
	}
	header ul.headerContact {
		position: static;
		top: 0;
	}
	header ul.headerContact li {
	    float: left;
	}
	header ul.headerContact li.tel {
		margin-right: 0;
	}
	header ul.headerContact li.reservation {
		width: 150px;
		margin-top: 0px;
		float: right;
	}
	header ul.headerContact li.lineAttention {
	    width: auto;
	}

	/******************************************************************** globalNav
	*/
	header nav#globalNav {
	    position: static;
	    top: 0;
	    left: 0;
	    overflow: hidden;
	}
	header nav#globalNav ul li {
		float: none;
		margin-right: 0;
	}
	header nav#globalNav ul li a {
		float: left;
		margin-right: 4%;
		width: 48%;
		text-align: center;
		height: 43px;
		display: block;
	}
	header nav#globalNav ul li:nth-child(2n) a {
	    margin-right: 0;
	}

	/******************************************************************** mainVisual
	*/
	#top #mainVisual p {
		margin: 20px 0;
	}
	#mainVisual p img {
	    max-width: 100%;
	}
	#mainVisual {
		position: static;
		height: 180px;
	    margin-top: 20px;
	}
	#mainVisual #pan {
	    padding: 0 5%;
	}

	/******************************************************************** container
	*/


	/******************************************************************** contents
	*/


	/******************************************************************** footer
	*/

	footer nav.pickupMenu {
		padding: 0 5%;
	}
	footer nav.pickupMenu li {
		float: none;
		margin-right: 0;
	}
	footer nav.pickupMenu li:last-child {
		margin-right: 0;
	}
	footer nav.pickupMenu li a {
		width: 298px;
		background-size: 50px;
		padding: 12px 0 12px 56px;
		float: left;
		font-size: 15px;
		letter-spacing: 0;
		margin-right: 4%;
		margin-bottom: 4%;
		width: 48%;
	}
	footer nav.pickupMenu li:nth-child(1) a,footer nav.pickupMenu li:nth-child(2) a,footer nav.pickupMenu li:nth-child(4) a {
		font-size: 15px;
		line-height: 1.1;
		padding: 8px 0 8px 62px;
		background-size: 50px;
	}
	footer nav.pickupMenu li:nth-child(3) a {
		background-size: 50px;
	}
	footer nav.pickupMenu li:nth-child(5) a {
		background-size: 50px;
	}
	footer nav.pickupMenu li:nth-child(6) a {
		background-size: 50px;
	}
	footer nav.pickupMenu li:nth-child(7) a {
		background-size: 50px;
	}
	footer nav.pickupMenu li:nth-child(even) a {
		margin-right: 0;
	}
	footer section.hair-salon {
		height: auto;
	}
	footer section.hair-salon .address {
		margin-left: 0;
		padding: 7px 5%;
		width: 100%;
		float: none;
		overflow: hidden;
	}
	footer section.hair-salon .address p.logo {
	    float: none;
	    margin-right: 0;
	    width: 26%;
	}
	footer section.hair-salon .address ul {
	    width: 100%;
	}
	footer section.hair-salon ul.footerContact::before {
	    content: "";
	    background: url(img/footer-img-contact.jpg) no-repeat;
	    top: -68px;
	    left: 26%;
	    z-index: 9;
	    height: 66px;
	    background-size: 140px;
	    width: 140px;
	}
	footer section.hair-salon ul.footerContact {
	    height: 120px;
	    padding: 11px 15px;
	    overflow: initial;
	    margin: 70px auto 50px;
	    width: 90%;
	}
	footer section.hair-salon ul.footerContact li.tel {
		margin-right: 0;
		margin-top: 0;
		float: none;
		text-align: center;
	}
	footer section.hair-salon ul.footerContact li.reservation {
		width: 173px;
		margin: 10px auto 0;
		float: none;
	}

	/* ===================================================================
	 contents
	=================================================================== */

	/******************************************************************** module
	*/

	p.campaign-banner a {
	    width: 100%;
	}

	ul.contentsContent {
	    overflow: inherit;
	    height: 190px;
	    width: 90% !important;
	    min-width: 90% !important;
	    padding: 25px 15px;
	    margin: 100px auto 40px;
	    margin-bottom: 0;
	}
	ul.contentsContent li.photo {
		top: -83px;
		left: 23%;
		z-index: -1;
	}
	ul.contentsContent li.photo img {
	    width: 170px;
	}
	ul.contentsContent li.tel {
		margin-right: 0;
		margin-top: 0;
		float: none;
	}
	ul.contentsContent li.reservation {
		width: 225px;
		margin: 15px auto 0;
		display: block;
		float: none;
	}
	ul.contentsContent li.lineAttention {
	    position: absolute;
	    left: 0;
	    bottom: -83px;
	    text-align: left;
	}


	/******************************************************************** concept
	*/
	section.concept .inner {
	    margin: 40px auto;
	    padding: 0 5%;
	}
	section.concept p br {
	    display: none;
	}
	section.concept p {
	    text-align: left;
	}

	/******************************************************************** straight-permanent
	*/
	section.straight-permanent .inner {
	    margin: 40px auto;
	    padding: 0 5%;
	    width: 100%;
	    box-sizing: border-box;
	}


	/******************************************************************** menu
	*/
	section.menu {
		padding: 1px 5%;
	}
	section.menu ul li {
		width: 48%;
		margin-right: 4%;
	}
	section.menu ul li:nth-child(2n) {
	    margin-right: 0;
	}
	section.menu ul li a h3 {
		font-size: 18px;
	}


	/******************************************************************** menu
	*/
	section.menu {
		padding: 1px 5%;
	}
	section.menu ul li {
		width: 48%;
		margin-right: 4%;
	}
	section.menu ul li:nth-child(2n) {
	    margin-right: 0;
	}
	section.menu ul li a h3 {
		font-size: 18px;
	}

	/******************************************************************** voice
	*/
	section.voice {
		margin: 40px auto;
		padding: 0 5%;
	}
	section.voice p {
		padding: 0;
		font-size: 14px;
		margin: 0;
	}
	section.voice ul li {
		width: 48%;
		/* height: ; */
		margin-right: 4%;
		margin-bottom: 20px;
	}
	section.voice ul li:nth-child(2n) {
	    margin-right: 0;
	}
	section.voice ul li img {
		width: 80%;
		display: block;
		margin: 0 auto 15px;
		height: auto;
		text-align: center;
	}

	/******************************************************************** voiceDetail
	*/
	section.voiceComment {
		margin-top: 40px;
	}
	section.voiceComment .comment {
		width: 90%;
	}

	section.voiceComment .comment h3 {
		top: -50px;
	}

	section.voiceComment .thumbnail img {
		border-radius: 50%;
		width: 200px;
		height: 200px;
		margin-top: 17px;
	}

	section.voiceComment .thumbnail .name {
		font-size: 20px;
		margin-top: 0;
	}

	section.voiceComment .thumbnail p {
		padding: 0;
	}

	section.voiceComment .comment .handwriting img {
		max-width: 100%;
		height: auto;
	}

	/******************************************************************** staff
	*/
	section.staff {
		padding: 0;
		margin: 40px auto;
	}
	section.staff .staffBlock {
		width: 100%;
		padding: 0 5%;
		margin: 20px auto;
	}
	section.staff .staffBlock .fL {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	section.staff .staffBlock .fR {
		width: 100%;
		float: none;
	}
	section.staff .staffBlock .comment {
		width: 100%;
		margin: 0 auto;
	}


	/******************************************************************** staffBlog
	*/
	/* section.staffBlog {
		margin: 0 auto 50px;
		position: relative;
		border-top: 1px solid #382628;
	}
	section.staffBlog::after {
	    width: 100%;
	    height: 1px;
	    background: #382628;
	    position: absolute;
	    top: 4px;
	    left: 0;
	    content: "";
	}
	section.staffBlog .inner {
		width: 960px;
		margin: 0 auto;
		position: relative;
		padding: 0 5%;
		background: url(img/index-img-staff-blog.jpg) no-repeat 100% 5px;
		background: none;
	}
	section.staffBlog h2 {
		font-size: 30px;
		text-align: left;
		line-height: 1.2;
		padding: 20px 0 0;
		position: static;
		top: 0;
		left: 0;
	}
	section.staffBlog h2::after {
	    width: 0;
	    height: 0;
	    background: none;
	    content: "";
	    position: relative;
	    right: 0;
	    top: 0;
	}
	section.staffBlog h2 br {
	    display: none;
	}
	section.staffBlog ul {
		margin: 0;
		padding: 30px 0 0px;
		width: 325px;
		text-align: left;
	}
	section.staffBlog ul li {
		overflow: hidden;
		margin-bottom: 20px;
	}
	section.staffBlog ul li a img {
		margin-right: 17px;
		float: left;
	}
	section.staffBlog ul li p {
		padding: 0;
		margin: 0;
	}
	section.staffBlog ul li .state {
		font-size: 12px;
		margin-bottom: 5px;
	}
	section.staffBlog ul li .state a {
		color: #BBA28A;
	}
	section.staffBlog ul li .state a:hover {
		color: #BBA28A;
	}
	section.staffBlog ul li .state span {
		margin-right: 3px;
	}
	section.staffBlog ul li .title a {
		font-weight: bold;
		font-size: 16px;
		color: #382628;
	}
	section.staffBlog ul li .title a:hover {
		color: #BBA28A;
	}
	section.staffBlog p.link {
		writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		position: relative;
		top: 0;
		left: 0;
	}
	section.staffBlog p.link a {
		padding: 12px 14px;
		display: block;
	}
	section.staffBlog p.link a::after {
		webkit-transform: translateY(0.4em);
	    -ms-transform: translateY(0.4em);
		transform: translateY(0.4em);
	} */

	/******************************************************************** recruit
	*/
	section.recruit .inner {
		width: 100%;
		margin: 40px auto 30px;
		padding: 0 5%;
		box-sizing: border-box;
	}
	/* section.recruit h2 {
	    margin: 60px auto 16px;
	    font-size: 24px;
	} */
	section.recruit .c-innerBox .innerBox-content p {
		text-align: center;
	}
	section.recruit table {
	    width: 100%;
	}

	section.recruit table tr {
		margin-bottom: 30px;
		display: block;
	}

	section.recruit table th {
	    width: 100%;
		position: relative;
		display: block;
		border: none;
	}

	section.recruit table td {
		padding-right: 10px;
		display: block;
		border-left: none;
	}

	/******************************************************************** access
	*/
	section.access .inner {
		width: 100%;
		margin: 40px auto;
		padding: 0 5%;
		box-sizing: border-box;
	}
	section.access .innerBox .fL {
		margin-bottom: 20px;
	}
	section.access .inner table {
		width: 100%;
		float: none;
	}
	section.access .map {
		margin: 30px auto 60px;
		width: 100%;
		height: 320px;
	}
	section.access .map iframe {
		width: 100%;
		height: 320px;
	}
	section.access .train {
		width: 100%;
		float: none;
		border: none;
	}
	section.access .buss {
		width: 100%;
		float: none;
	}
	section.access .train ol, section.access .buss ol {
		margin: 0;
		padding: 20px 0 50px;
		background: none;
		list-style: none;
		border: none;
	}
	section.access .train ol li, section.access .buss ol li {
		margin-bottom: 50px;
	}
	section.access .train ol li img, section.access .buss ol li img {
		display: block;
		margin: 0 auto 12px;
	}
	section.access .train ol li br, section.access .buss ol li br {
		display: none;
	}

	/******************************************************************** hair-set
	*/
	section.hair-set .inner {
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		margin: 40px auto;
		position: relative;
	}

	section.hair-set .inner h3 {
		text-align: center !important;
	}

	/******************************************************************** brilliant-haircare
	*/
	section.brilliant-haircare .inner {
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		margin: 40px auto;
		position: relative;
	}

	section.brilliant-haircare h3,
	section.brilliant-haircare h4 {
		text-align: center !important;
	}

	section.brilliant-haircare h3 br {
		display: none;
	}

	/******************************************************************** electronic-treatment
	*/
	section.electronic-treatment .inner {
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		margin: 40px auto 10px;
		position: relative;
	}
	section.electronic-treatment .inner p {
		text-align: left;
	}
	section.electronic-treatment .innerBox-content h3 {
		text-align: center !important;
	}
	section.electronic-treatment .movie {
		width: 100%;
		height: auto;
	}

	/******************************************************************** head-spa
	*/
	section.head-spa .inner {
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		margin: 40px auto;
		position: relative;
	}

	section.head-spa .inner h3 {
		text-align: center !important;
	}


	/******************************************************************** salonMenu
	*/

	section.salonMenu .inner {
		padding: 0 5%;
		margin: 40px auto;
	}

	section.salonMenu .inner p {
		text-align: left;
	}

	section.salonMenu .inner p br {
		display: none;
	}

	section.salonMenu table {
		width: 100%;
		font-size: 16px;
	}

	section.salonMenu table th, section.salonMenu table td {
		display: block;
		padding: 10px 0;
	}
	section.salonMenu table th {
		width: 100%;
		white-space: normal;
		display: block;
		position: relative;
		border: none;
	}
	section.salonMenu table td {
		text-align: right;
		padding-right: 20px;
		width: 100%;
		border-left: none;
	}
	section.salonMenu .attention table {
		font-size: 14px;
		width: 100%;
	}

	section.salonMenu .attention {
		width: 90%;
	}

	/******************************************************************** staffComment
	*/

	section.staffComment {
		width: 90%;
		margin: 50px auto;
	}
	section.staffComment .commentList .photo {
		float: none;
	    margin-bottom: 20px;
	}
	section.staffComment .commentList .comment {
		width: 100%;
		float: none;
	}
	section.staffComment .commentList .comment::after {
		display: none;
	}
	section.staffComment .commentList:nth-child(2n) .photo {
		float: none;
	}
	section.staffComment .commentList:nth-child(2n) .comment {
		float: none;
	}
	section.staffComment .commentList:nth-child(2n) .comment::after {
		display: none;
	}

	/******************************************************************** blog
	*/
	#blog #container {
		width: 100%;
		margin: 40px auto;
	}
	#blog #container main {
		width: 100%;
		float: none;
		box-sizing: border-box;
		padding: 0 5%;
	}
	#blog #container aside#sidebar {
		width: 100%;
		float: none;
		box-sizing: border-box;
		padding: 0 5%;
	}

	#blog #container article.columnPost .mainImg img {
	    max-width: 100%;
	    height: auto;
	}
	#blog #container article.columnPost .entry-content img {
	    max-width: 100%;
	    height: auto;
	}

	/******************************************************************** category
	*/
	#category #container {
		width: 100%;
		margin: 40px auto;
	}

	#category #container main {
		width: 100%;
		float: none;
		padding: 0 5%;
		box-sizing: border-box;
	}
	#category #container aside#sidebar {
		width: 100%;
		float: none;
		padding: 0 5%;
		box-sizing: border-box;
	}
	#category #container article.columnPost .state {
	    margin: 0;
		padding: 0;
	}
	#category #container article.columnPost .mainImg img {
	    max-width: 100%;
	    height: auto;
	}


	/******************************************************************** archive
	*/
	#archive #container {
		width: 100%;
		margin: 40px auto;
	}
	#archive #container main {
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		float: none;
	}
	#archive #container aside#sidebar {
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		float: none;
	}
	#archive #container article.columnPost .state {
	    margin: 0;
		padding: 0;
	}
	#archive #container article.columnPost .mainImg img {
	    max-width: 100%;
	    height: auto;
	}

}

.c-innerBox {
	margin: 0 auto 60px;
	box-sizing: border-box;
	overflow: hidden;
}
p + .c-innerBox {
	margin-top: 40px;
}
.c-innerBox .fL {
	width: 340px;
}
.c-innerBox .fR {
	width: 575px;
}
.c-innerBox h2:first-child,
.c-innerBox h3:first-child,
.c-innerBox h4:first-child,
.c-innerBox p:first-child {
    margin-top: 0;
	padding-top: 0;
}
.c-innerBox .innerBox-content p {
	text-align: left;
}
.c-innerBox .innerBox-content-list {
    padding-left: 1.2em;
    list-style: disc;
    margin: 0 0 20px;
    text-align: left;
}
.c-innerBox .innerBox-content .attention {
	font-size: 10px;
}
.c-caseStudy-list {
	margin: 8px 0 40px;
	padding: 0;
	list-style: none;
	overflow: hidden;
	display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    width: 100%;
	text-align: left;
}
.c-caseStudy-list dt {
	width: 5em; /* 見出しの幅 */
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.c-caseStudy-list dd {
	width: calc(100% - 5em); /* 内容の幅 */
    margin: 0; /* デフォルトの余白を消す */
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

/* --- レスポンシブ用追加コード（CSSの末尾に追記） --- */
@media screen and (min-width: 211px) and (max-width: 599px) and (orientation: portrait), screen and (max-width: 767px) and (min-width: 300px) and (orientation: landscape){
    /* ボックス全体の固定幅解除と余白調整 */
    .c-innerBox {
        width: 100%;
        padding: 0;
        margin-bottom: 40px;
    }

    /* 画像エリア(fL)とコンテンツエリア(fR)を縦並びに */
    .c-innerBox .fL,
    .c-innerBox .fR {
        float: none;      /* float解除 */
        width: 100%;      /* 横幅いっぱい */
        margin-right: 0;
        margin-left: 0;
    }

    /* 画像のレスポンシブ化 */
    .c-innerBox .innerBox-img {
        margin: 0 auto 20px; /* 下に余白を作り、中央寄せ */
        text-align: center;
    }

    .c-innerBox .innerBox-img img {
		width: 100%;
        height: auto;
        max-width: 340px;
    }

    /* テキスト部分の調整 */
    .c-innerBox .innerBox-content {
        text-align: left; /* 左寄せ */
    }

    .c-innerBox .innerBox-content p {
        font-size: 15px;  /* スマホで見やすいサイズに微調整 */
        line-height: 1.6;
        margin-bottom: 10px;
    }
}

.c-inner-bg {
	background: #F0F7F3;
}
.c-inner-bg-inner {
	width: 960px;
	margin: 0 auto;
	padding: 80px 0 20px;
	position: relative;
}
.c-innerBox-radius {
	margin: 30px auto 60px;
	box-sizing: border-box;
	overflow: hidden;
	padding: 30px 50px 30px 0;
	background: #fff;
	border-radius: 20px;
}
p + .c-innerBox-radius {
	margin-top: 40px;
}
.c-innerBox-radius .stepStyle span {
    font-size: 0.9em;
    margin-bottom: 10px;
	align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.c-innerBox-radius .stepStyle span::before,
.c-innerBox-radius .stepStyle span::after {
  background-color: #75481D; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
.c-innerBox-radius .stepStyle span::before {
  margin-right: 15px; /* 文字との余白 */
}
.c-innerBox-radius .stepStyle span::after {
  margin-left: 15px; /* 文字との余白 */
}
.c-innerBox-radius .fL {
	width: 380px;
}
.c-innerBox-radius .fR {
	width: 500px;
}
.c-inner-bg-inner h2:first-child,
.c-inner-bg-inner h3:first-child,
.c-inner-bg-inner h4:first-child,
.c-inner-bg-inner p:first-child {
    margin-top: 0;
	padding-top: 0;
}
.c-innerBox-radius .innerBox-content p {
	text-align: justify;
}
.c-innerBox-radius .innerBox-content-list {
    padding-left: 1.2em;
    list-style: disc;
    margin: 0 0 20px;
    text-align: left;
}
.c-innerBox-radius .innerBox-content .attention {
	font-size: 10px;
}

/* --- 薬剤・アイロンの秘密セクション レスポンシブ追加コード --- */
@media screen and (max-width: 768px) {
    /* 全体コンテナの幅と余白をリセット */
    .c-inner-bg-inner {
        width: 100%;
        max-width: 100%;
        padding: 40px 15px 10px !important;
        box-sizing: border-box;
    }

    /* 白枠のボックス設定 */
    .c-innerBox-radius {
        width: 95%;
        margin: 20px auto 40px;
        padding: 25px 18px; /* PC版の右パディング50pxを解消 */
        border-radius: 15px;
    }

    /* 左右の分割を解除して縦並びに */
    .c-innerBox-radius .fL,
    .c-innerBox-radius .fR {
        width: 100%;
        float: none;
    }

    /* 「01」「02」のステップ見出しの調整 */
    .c-innerBox-radius .stepStyle {
        margin-bottom: 20px;
        text-align: center;
    }

    /* 横線の長さをスマホ向けに少し短く調整 */
    .c-innerBox-radius .stepStyle span::before,
    .c-innerBox-radius .stepStyle span::after {
        width: 40px;
    }

    /* 共通タイトル（薬剤、アイロンの秘密） */
    .c-inner-bg h3 {
        font-size: 24px;
        text-align: center !important;
        margin-bottom: 20px;
    }
}

/* CTA Section */
.cta-section {
	position: relative;
	width: 565px;
	margin: 60px auto;
	padding: 92px 0 0;
    background: url(img/common-img-reservation.png) no-repeat center 0;
	background-size: 192px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cta-content {
	background: #fff;
	border: 1px solid #754c21;
	padding: 16px 35px;
	text-align: center;
}

.business-hours {
  font-size: 12px;
  margin-top: 8px;
}
.business-hours p {
	padding: 0;
	margin: 0;
}

.contact-info {
	display: flex;
	gap: 27px;
	justify-content: center;
}

.contact-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.contact-label {
  font-size: 11px;
}

.contact-buttons {
	display: flex;
	gap: 9px;
	margin-bottom: 4px;
	margin-left: auto;
	width: 390px;
}



.phone-button, .line-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; /* 親要素(flex:1)いっぱいに広げる */
    max-width: 220px;
	padding: 0 5px;
    height: 48px; /* 少し高さを出して押しやすく */
	border: 1px solid #754c21;
	transition: all 0.3s ease;
}

header .contact-buttons .phone-button,
header .contact-buttons .line-button {
	height: 40px;
}

.phone-button {
  background: #754c21;
  color:#fff;
}

.line-button {
  background:#fff;
  color: #75481d;
}

.phone-button:hover, .line-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.phone-icon, .line-logo {
  width: 22px;
  height: 22px;
  margin-right: 3px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.phone-icon {
  background-image: url(img/common-icon-tel.png);
}

.line-logo {
  background-image: url(img/common-icon-line.png);
}

.phone-number {
	font-size: 18px;
	font-weight: bold;
}

.phone-number a {
  color: #fff;
}

.reservation {
  font-weight: bold;
}


/* --- レスポンシブ用追加コード (現在のCSSの末尾に追記) --- */
@media screen and (min-width: 211px) and (max-width: 599px) and (orientation: portrait), screen and (max-width: 767px) and (min-width: 300px) and (orientation: landscape){
    /* セクション全体の幅調整 */
    .cta-section {
        width: 90%; /* 565px固定を解除 */
        margin: 60px auto 80px;
        padding-top: 77px; /* 背景画像との間隔調整 */
        background-size: 160px; /* ロゴサイズを微調整 */
    }

    /* ボックス内の余白調整 */
    .cta-content {
        padding: 20px 15px;
        width: 100%;
        box-sizing: border-box;
    }

    /* ボタンを縦に並べる */
    .contact-info {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
	.contact-group {
		width: 100%;
	}

    /* 各ボタンをスマホで押しやすいサイズに広げる */
    .phone-button, .line-button {
        width: 100%; /* 横幅いっぱい */
        max-width: 260px; /* 広がりすぎないよう制限 */
        height: 55px; /* 押しやすい高さ */
    }

    /* テキストサイズと改行の調整 */
    .business-hours {
        font-size: 11px;
        line-height: 1.6;
    }

    .contact-label {
        margin-bottom: 0;
    }
}

/* 小さい画面での微調整 */
@media screen and (max-width: 480px) {
    .business-hours p {
        margin-bottom: 4px;
        word-break: break-all;
    }
}

iframe.wp-embedded-content {
    max-width: 100%;
}