/*=================================================
    general
=================================================*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap');
/* font-family: 'Josefin Sans', sans-serif; */

/*-- fonts --*/
html,body { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif; }
b, strong, .bold{ font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif; }

/*-- reset --*/
#main { width: 100%; }
header { border:none; }
p {margin: 0; padding: 0;}
a:hover {opacity: 1; transition: .3s;}
.wrapper { margin-bottom: 0; }
ul { padding: 0; margin: 0; }

/*-- wrap --*/
.pageWrap-full {
    width: 100%;
    min-width: 1024px;
    margin: 0 auto;
    }

.pageWrap {
    position: relative;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    }

@media only screen and (max-width: 1024px) { .pageWrap-full { min-width: 100%; } }
@media only screen and (max-width: 1024px) { .pageWrap { width: 90%; } }
@media only screen and (max-width: 1024px) { #content { box-sizing: border-box; padding: 0; } }

/*-- etc --*/
.footerIframe {
    width: 1px;
    height: 1px;
    border: none;
    }

::selection {
    background: #F5F5EE;
    color: #222;
	}

::-moz-selection {
    background: #F5F5EE;
    color: #222;
	}

/* site main color #222222 */
/* site sub color  #998877 */
/* site sub color  #F5F5EE */

/*=================================================
	pintarest icon
=================================================*/

@media only screen and (min-width: 768px) {

	.pinterestBtn { margin: 0; }
	.pinterestBtn span {
		height: 26px !important;
		width: 26px !important;
		background: url(/img/upload/2020/03/social_icons_pin.png) !important;
		background-position: center !important;
		background-size: 26px 26px !important;
		box-shadow: none;
        transition: .3s;
		}
	
	.pinterestBtn span:hover { opacity: 0.75; }

}

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

	.pinterestBtn { margin: 0; }
	.pinterestBtn span {
		height: 26px !important;
		width: 26px !important;
		background: url(/img/upload/2020/03/social_icons_pin.png) !important;
		background-position: center !important;
		background-size: 26px 26px !important;
		box-shadow: none;
		}

}

/*=================================================
    pager
=================================================*/

.pager {
    overflow: hidden;
    margin: 60px 0 0;
    }

.pager ul li a {
    background: #F5F5EE;
    color: #222;
    text-decoration: none;
    }

.pager ul li span, .pager ul li a {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 12px 18px;
    margin: 0 2px;
    border-radius: 6px;
    transition: .3s;
    }

.pager ul li a:hover { background: #998877; color: #FFF !important; }

/*=================================================
    header
=================================================*/

header {
    width: 100%;
    z-index: 100;
    background: #FFF;
    }

header #headerInner {
    position: relative;
    margin: 0 auto 30px;
    padding: 60px 0 0;
    min-height: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    }

header #headerInner .logoArea {
    position: relative;
    width: 180px;
    left: auto;
    margin: 0 auto;
    }

body.top header #headerInner .logoArea a.logo {
    filter: blur(300px);
    animation-name: topBlur;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    }

@keyframes topBlur {
  0% { filter: blur(300px); }
  100% { filter: blur(0); }
}


header #headerInner .logoArea a.logo { width: auto; }
header #headerInner ul.pcBtn {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    width: 240px;
    }

header #headerInner ul.pcBtn li.reserve a {
    position: relative;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    overflow: hidden;
    text-align: left;
    background-color: #222;
    display: block;
    padding: 24px;
    height: auto;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    border: solid 1px #222;
    box-sizing: border-box;
    transition: .3s;
    }

header #headerInner ul.pcBtn li.reserve a::before {    
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #998877;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: .3s;
    }

header #headerInner ul.pcBtn li.reserve a:hover { border-color: #998877;}
header #headerInner ul.pcBtn li.reserve a:hover::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }

header #headerInner ul.pcBtn li div {
    position: relative;
    z-index: 10;
    }

header #headerInner ul.pcBtn li.reserve a span {
    display: block;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 24px;
    }

header #headerInner ul.pcBtn li.reserve svg {
    float: left;
    padding-right: 12px;
    width: 32px !important;
    height: 32px !important;
    }

.st0 { fill:rgba(0,0,0,1) !important; }

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

header {
    border: none;
    width: 100%;
    position: fixed;
    z-index: 9999;
    background: #FFF;
    }

body.top header { border-bottom: none; }
header #headerInner {
    margin: 0 auto 30px;
    padding: 30px 0 0;
    }

header #headerInner .logoArea a.logo {
    width: 160px;
    margin: 0 auto;
    }

header #headerInner ul.spReserve {
    position: fixed;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: solid 1px #FFF;
    box-sizing: border-box;
    z-index: 9999;
    }

header #headerInner ul.spReserve li { width: 50%; box-sizing: border-box; }
header #headerInner ul.spReserve li:first-child { border-right: solid 1px #FFF; }
header #headerInner ul.spReserve li a {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    display: block;
    padding: 12px 0;
    width: 100%;
    color: #FFF;
    background: #222;
    border: none;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .4px;
    box-sizing: border-box;
    }

header #headerInner ul.spReserve svg {
    width: 18px !important;
    height: 18px !important;
    }

header #headerInner ul.spReserve li a span {
    padding-left: 12px;
    vertical-align: text-bottom;
    }

ul.header-sns { display: flex; }
header #headerInner .logoArea { width: 160px; }
body.top header #headerInner .logoArea a.logo { margin: 0; }

}

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

header #headerInner {
    margin: 0 auto 18px;
    padding: 18px 0 0;
    }

header #headerInner .logoArea { width: 120px; }
header #headerInner .logoArea a.logo { width: 120px; }

}

/*=================================================
    nav
=================================================*/

nav.duce-menu {
    width: 100%;
    max-width: 1024px;
    display: flex;
    justify-content: center;
    margin: 0 auto;  
    }

nav.duce-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 60px 0 45px;
    }

nav.duce-menu ul li {
    display: inline-block;
    margin: 0 15px 15px;
    }

nav.duce-menu ul li a {
    position: relative;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 2px;
    color: #222;
    transition: .3s;
    }

nav.duce-menu ul li a::before,
nav.duce-menu ul li a::after {
    position: absolute;
    content: "";
    background: #222;
    top: 50%;
    height: 1px;
    width: 0;
    transition: .3s;
    }

nav.duce-menu ul li a::before { left: 50%; }
nav.duce-menu ul li a::after { right: 50%; }

nav.duce-menu ul li a:hover::before,
nav.duce-menu ul li a:hover::after { width: 60%; }

nav.duce-menu ul.header-sns li a::before,
nav.duce-menu ul.header-sns li a::after { display: none; }
nav.duce-menu ul.header-sns li a:hover { opacity: .75; }
nav.duce-menu ul.header-sns {
    flex-wrap: nowrap;
    margin-left: 12px;
    }

nav.duce-menu ul.header-sns li {
    width: 24px;
    margin: 0 6px;
    }

.nav-button { display: none; }
nav.duce-menu ul a {
    text-decoration: none;
    font-size: 14px;
    color: #448aff;
    }

nav.duce-menu.open { display: block; }
nav.duce-menu.close { display: none; }

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

.nav-button {
    display: block;
    cursor: pointer;
    }

nav.duce-menu {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    background-color: rgba(34, 34, 34, .75);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    width: 100%;
    height: 100%;
    }

nav.duce-menu ul {
    display: block;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    position: relative;
    }

nav.duce-menu ul li {
    display: block;
    margin: 12px 0;
    text-align: center;
    }

nav.duce-menu ul li a {
    display: inline-block;
    color: #fff;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 1px;    
    }

nav.duce-menu ul li a {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    }

nav.duce-menu ul li a::before,
nav.duce-menu ul li a::after { display: none; }

nav.duce-menu ul.header-sns {
    display: flex;
    justify-content: center;
    margin: 0;
    top: unset;
    bottom: 84px;
    transform: translate(-50%, 0%);
    position: absolute;
    }

nav.duce-menu ul.header-sns li { width: 30px; }
    
/*メニューボタンのトグルアニメ*/
.nav-button,
.nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
    }

.nav-button {
    z-index: 20;
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 30px;
    }

.nav-button span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #222;
    border-radius: 4px;
    }

.nav-button span:nth-of-type(1) { top: 0; }
.nav-button span:nth-of-type(2) { top: 13px; }
.nav-button span:nth-of-type(3) { bottom: 0; }
.nav-button.active span:nth-of-type(1) {
    background: #FFF;
    -webkit-transform: translateY(13px) rotate(-45deg);
    transform: translateY(13px) rotate(-45deg);
    }

.nav-button.active span:nth-of-type(2) { opacity: 0; }
.nav-button.active span:nth-of-type(3) {
    background: #FFF;
    -webkit-transform: translateY(-13px) rotate(45deg);
    transform: translateY(-13px) rotate(45deg);
    }
}

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

.nav-button {
    z-index: 20;
    position: absolute;
    top: 36px;
    right: 24px;
    width: 24px;
    height: 21px;
    }

.nav-button span { height: 4px; }
.nav-button span:nth-of-type(2) { top: 8.5px; }
.nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
    }

.nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
    }

nav.duce-menu ul { top: 45%; }
nav.duce-menu ul li a {
    font-size: 16px;
    line-height: 21px;
    }

nav.duce-menu ul.header-sns { bottom: 72px; }

}

/*=================================================
    footer
=================================================*/

.footerGoTop {
    text-align: right;
    margin-bottom: -8px;
    }

a#goTop {
    display: inline-block;
    background: initial;
    margin: 0 auto;
    padding: 0;
    text-align: right;
    color: #EEE;
    font-style: italic;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 2px;
    transition:.3s;
    }

a#goTop:hover { color: #222; }
footer {
    padding: 60px 0 0;
    background-color: #EEEEEE;
    }

.footerNav {
    position: relative;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    }

.footerNav ul {    
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
    }

.footerNav ul li {
    display: inline-block;
    margin: 0 15px;
    }

.footerNav ul li a {
    position: relative;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 2px;
    color: #222;
    transition: .3s;
    }

.footerNav ul li a::before,
.footerNav ul li a::after,
ul.footerMenu li a::before,
ul.footerMenu li a::after {
    position: absolute;
    content: "";
    background: #000;
    top: 50%;
    height: 1px;
    width: 0;
    transition: .3s;
    }

.footerNav ul li a::before,
ul.footerMenu li a::before { left: 50%; }
.footerNav ul li a::after,
ul.footerMenu li a::after { right: 50%; }

.footerNav ul li a:hover::before,
.footerNav ul li a:hover::after,
ul.footerMenu li a:hover::before,
ul.footerMenu li a:hover::after { width: 60%; }

.footerInner {   
    display: flex;
    align-items: center;
    position: relative;
    width: 90%;
    max-width: 1280px;
    margin: 60px auto;
    }

.footerInfo {
    width: 30%;
    min-width: 300px;
    padding: 0 60px;
    box-sizing: border-box;
    border-right: solid 1px #000;
    }

.footerInfo .footerLogo {
    width: 180px;
    margin: 0 auto;
    margin-bottom: 24px;
    }

.footerInfo .footerSns {
    display: flex;
    justify-content: center;
    margin: 24px auto;
    }

.footerInfo .footerSns li {
    width: 24px;
    padding: 0 3px;
    transition: .3s;
    }

.footerInfo .footerSns li:hover { opacity: .75; }
.footerInfo .footerBtn {
    width: 100%;
    margin: 12px auto;
    }

.footerInfo .footerBtn a {
    position: relative;
    overflow: hidden;
    display: block;
    border: solid 1px #000;
    padding: 6px 12px;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #000;
    transition: .3s;
    }

.footerInfo .footerBtn a::before {
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #000;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: .3s;
    }

.footerInfo .footerBtn a:hover { border-color: #000; color: #FFF;}
.footerInfo .footerBtn a:hover .st0 { fill: rgba(255,255,255,1) !important; }
.footerInfo .footerBtn a:hover::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }

.footerInfo .footerBtn a div {
    position: relative;
    z-index: 10;
    }

.footerInfo .footerBtn svg {
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle;
    padding-right: 6px;
    }

ul.footerMenu {
    display: flex;
    justify-content: center;
    margin: 24px auto 12px;
    }

ul.footerMenu li {
    padding: 0 18px;
    border-right: solid 1px #000;
    }

ul.footerMenu li:last-child { border: none; }
ul.footerMenu li a {
    position: relative;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 2px;
    color: #222;
    }

ul.footerData {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 60px;
    box-sizing: border-box;
    }

ul.footerData li {
    width: 50%;
    font-size: 14px;
    line-height: 24px;
    color: #000;
    margin: 12px auto;
    }

ul.footerData li p {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 2px;
    color: #222;
    margin-bottom: 12px;
    }

ul.footerShopList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 60px auto 30px;
    }

ul.footerShopList li {
    width:10%;
    box-sizing: border-box;
    }

ul.footerShopList li a {
    display: block;
    padding: 12px;
    transition: .3s;
    }

ul.footerShopList li a:hover { opacity: .50; }
footer .copy {
    text-align: center;
    color: #000;
    padding: 30px 0;
    font-size: 12px;
    letter-spacing: .4px;
    }

footer .groupTop { text-align: center; }
footer .groupTop a {
    position: relative;
    display: inline-block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 2px;
    color: #222;
    width: 240px;
    border: solid 1px #000;
    padding: 6px 0;
    overflow: hidden;
    transition: .3s;
    }

footer .groupTop a::before {
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #000;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: .3s;
    }

footer .groupTop a:hover { border-color: #000; color: #FFF;}
footer .groupTop a:hover::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }

footer .groupTop a span {
    position: relative;
    z-index: 10;
    }


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

.footerNav ul {
    flex-wrap: wrap;
    justify-content: left;
    }

.footerNav ul li {
    display: inline-block;
    margin: 0 0 12px;
    width: 20%;
    }

.footerNav ul { margin-bottom: 48px; }
.footerInfo { padding: 0 60px 0 0; }
ul.footerData { padding: 0 0 0 60px; }
ul.footerShopList { margin: 30px auto; }
footer .copy { padding: 30px 0 ; }

}

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

a#goTop {
    font-size: 18px;
    color: #222;
    }

.footerGoTop { margin-bottom: -9px; }
footer { padding: 30px 0 0; }
.footerNav ul { margin-bottom: 30px; }
.footerNav ul li {
    margin: 0 0 6px;
    width: 33.3%;
    }

.footerInner { flex-wrap: wrap; }
.footerInfo {
    min-width: unset;
    width: 100%;
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-right: none;
    border-bottom: solid 1px #000;
    }

.footerInfo .footerLogo { width: 120px; }
.footerInfo .footerSns li { padding: 0 6px; }
ul.footerData {
    width: 100%;
    padding: 0;
    }

ul.footerData li { font-size: 12px; }
ul.footerShopList {
    justify-content: left;
    margin: 30px auto 0;
    }

ul.footerShopList li {
    width: 20%;
    margin-bottom: 6px;
    }
    
ul.footerShopList li a { padding: 6px; }
footer .groupTop a { width: 90%; }

}

/*=================================================
    404
=================================================*/

.txt404 {
    font-size: 14px;
    line-height: 24px;
    }

.txt404 a {
    font-weight: bold;
    color: #222;
    text-decoration: underline;
    transition: .3s;
    }

.txt404 a:hover { color: #998877; }

/*=================================================
    page
=================================================*/

body.lower #content {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    }

body.lower #content #main { width: 68%; }
body.lower.onecolumn #content #main { width: 100%; }
body.menu #main .sect { width: 100%; }
#sub { width: 28%; }

body.lower #pageTitleArea {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;
    background: unset;
    background-color: unset;
    }

body.lower #pageTitleArea h1 {
    position: relative;
    display: block;
    margin: 60px auto 90px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #222;
    }

body.lower #pageTitleArea h1::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 1px;
    background: #333;
    top: 56px;
    left: 50%;
    margin-left: -15px;
    }

/* パンくず*/
.breadcrumb {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin: 12px auto;
    width: 100%;
    max-width: 1024px;
    }

.breadcrumb li a {
    position: relative;
    color: #998877;
    font-weight: bold;
    transition: .3s;
    }

.breadcrumb li a::before,
.breadcrumb li a::after {
    position: absolute;
    content: "";
    background: #998877;
    top: 50%;
    height: 1px;
    width: 0;
    transition: .3s;
    }

.breadcrumb li a::before { left: 50%; }
.breadcrumb li a::after { right: 50%; }

.breadcrumb li a:hover::before,
.breadcrumb li a:hover::after { width: 60%; }

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

body.lower #content #main {
    width: 100%;
    margin: 0 auto;
    }

body.lower #pageTitleArea { padding-top: 134px; }

}

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

body.lower #pageTitleArea { padding-top: 90px; }
body.lower #pageTitleArea h1 {
    font-size: 18px;
    }

}

/*=================================================
    sub
=================================================*/

#sub .subBox { position: relative; margin:0 0 60px; }
#sub .subBox .titleArea {
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: solid 1px #222;
    }

#sub .subBox .titleArea p span.en {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    }

#sub .subBox .titleArea p {
    float: none;
    margin: 0;
    padding: 0;
    color: #222;
    font-weight: normal;
    }

#sub #subStaff ul li,
#sub #subCategory ul li,
#sub #subFaq ul li,
#sub #subNewscate ul li,
#sub #subMedicate ul li,
#sub #subBlogcate ul li {
    text-align: left;
    margin: 12px 0;
    padding: 0 12px;
    box-sizing: border-box;
    }

#sub #subStaff ul li a,
#sub #subCategory ul li a,
#sub #subFaq ul li a,
#sub #subNewscate ul li a,
#sub #subMedicate ul li a,
#sub #subBlogcate ul li a {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    color: #222;
    font-size: 14px;
    line-height: 24px;
    transition: .3s;
    border: none;
    }

#sub #subStaff ul li a::before,
#sub #subStaff ul li a::after,
#sub #subCategory ul li a::before,
#sub #subCategory ul li a::after,
#sub #subFaq ul li a::before,
#sub #subFaq ul li a::after,
#sub #subNewscate ul li a::before,
#sub #subNewscate ul li a::after,
#sub #subMedicate ul li a::before,
#sub #subMedicate ul li a::after,
#sub #subBlogcate ul li a::before,
#sub #subBlogcate ul li a::after {
    position: absolute;
    content: "";
    background: #222;
    top: 50%;
    height: 1px;
    width: 0;
    transition: .3s;
    }

#sub #subStaff ul li a::before,
#sub #subCategory ul li a::before,
#sub #subFaq ul li a::before,
#sub #subNewscate ul li a::before,
#sub #subMedicate ul li a::before,
#sub #subBlogcate ul li a::before { left: 50%; }

#sub #subStaff ul li a::after,
#sub #subCategory ul li a::after,
#sub #subFaq ul li a::after,
#sub #subNewscate ul li a::after,
#sub #subMedicate ul li a::after,
#sub #subBlogcate ul li a::after { right: 50%; }


#sub #subStaff ul li a:hover::before,
#sub #subStaff ul li a:hover::after,
#sub #subCategory ul li a:hover::before,
#sub #subCategory ul li a:hover::after,
#sub #subFaq ul li a:hover::before,
#sub #subFaq ul li a:hover::after,
#sub #subNewscate ul li a:hover::before,
#sub #subNewscate ul li a:hover::after,
#sub #subMedicate ul li a:hover::before,
#sub #subMedicate ul li a:hover::after,
#sub #subBlogcate ul li a:hover::before,
#sub #subBlogcate ul li a:hover::after { width: 60%; }

#sub .subBox .titleArea a {
    float: none;
    display: inline-block;
    padding-top: 6px;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    }

#sub .subBox .titleArea a span {
    padding-right: 0;
    background: unset;
    }

#sub .subBox .titleArea a.moreBtn {
    position: absolute;
    top: 0;
    right: 0;
    }

ul.sideNewsList li {
    display: flex;
    flex-wrap: wrap;
    border-bottom: dotted 2px #CCC;
    padding-bottom: 12px;
    margin-bottom: 12px;
    }

ul.sideNewsList li .newsDate a { width: unset; }
ul.sideNewsList li .newsSub a { width: 100%; }
ul.sideNewsList li .newsCut a {
    margin: 0;
    padding: 0 12px;
    }

ul.sideNewsList li:last-child { border: none; }
ul.sideNewsList li:hover .newsSub a { color: #998877;  }

#sub #subStyle ul li {
    width: 48%;
    margin-bottom: 10px;
    }

#sub #subStyle ul li a.img {
    width: 100%;
    margin: 0;
    position: relative;
    display: block;
    background: #FFF;
    overflow: hidden;
    }

#sub #subStyle ul li a.img::before {
    position: absolute;
    top: 0;
    left: -81%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }

#sub #subStyle ul li a.img p {
    position: absolute;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: .4px;
    padding: 6px 12px;
    bottom: 0;
    left: 0;
    color: #FFF;
    background: repeating-linear-gradient(45deg, black, transparent 100%);
    box-sizing: border-box;
    }

#sub #subStyle ul li a.img img { transition: .3s; }
#sub #subStyle ul li:hover a.img img { opacity: .75; }
#sub #subStyle ul li:hover a.img::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }

#sub #subStaff ul {
    display: flex;
    flex-wrap: wrap;
    }

#sub #subStaff ul li {
    width: 50%;
    margin: 6px 0;
    }

#sub .moreBtn {
    width: 100%;
    margin: 30px auto 0;
    padding: 3px 18px;
    }

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

#sub {
    width: 100%;
    margin: 0 auto 60px;
    }

#sub #subStaff ul,
#sub #subCategory ul,
#sub #subFaq ul,
#sub #subNewscate ul,
#sub #subMedicate ul,
#sub #subBlogcate ul {
    display: flex;
    flex-wrap: wrap;
    }

#sub #subStaff ul li,
#sub #subCategory ul li,
#sub #subFaq ul li,
#sub #subNewscate ul li,
#sub #subMedicate ul li,
#sub #subBlogcate ul li { margin: 6px 0; }

#sub .subBox .titleArea a.moreBtn { bottom: auto; }
#sub #subStyle ul { display: flex; }

#sub .moreBtn {
    width: 240px;
    margin: 30px auto 0;
    padding: 12px 18px;
    }

#sub #subStyle ul li {
    width: 30%;
    margin: 0 5% 30px 0;
    }

#sub #subStyle ul li:nth-child(3n) { margin: 0 0 30px 0; }
#sub #subStyle ul li:nth-child(4) { display: none;}

}

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

#sub #subNews {
    margin-bottom: 60px;
    padding: 0;
    }

#sub #subStyle ul { flex-wrap: wrap; }
#sub .moreBtn {
    width: 100%;
    margin: 30px auto 0;
    padding: 12px 18px;
    }

#sub #subStyle ul li {
    width: 48%;
    margin: 0 4% 15px 0;
    }

#sub #subStyle ul li:nth-child(3n) { margin: 0 4% 15px 0; }
#sub #subStyle ul li:nth-child(2n) { margin: 0 0 15px 0; }
#sub #subStyle ul li:nth-child(4) { display: block;}

}


/*=================================================
    top
=================================================*/

body.top #content {
    width: 95%;
    min-width: 1024px;
    margin: 0 auto;
    }

#mainVisual {
    width: 95%;
    max-width: 1024px;
    margin: 0 auto;
    }

#mainVisual .swiper-wrapper { margin-bottom: 0; }
.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 12px;
    }

body.top .topConcept {
    display: block;
    text-align: center;
    margin: 240px auto;
    }

body.top .topConcept h2 {
    position: relative;
    margin: 0 auto 60px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 5px;
    }

body.top .topConcept h2::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 1px;
    background: #333;
    top: 56px;
    left: 50%;
    margin-left: -15px;
    }

body.top .topConcept .conceptTitle {
    margin: 0 auto 60px;
    font-size: 24px;
    line-height: 48px;
    font-weight: bold;
    letter-spacing: 1px;
    }

body.top .topConcept .conceptTxt {
    color: #666;
    font-size: 14px;
    line-height: 36px;
    letter-spacing: .4px;
    }

body.top .topStyle {
    position: relative;
    margin: 240px auto;
    }

body.top .topStyleTitle {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto 60px;
    text-align: center;
    }

.topStyleTitle h2 {
    position: relative;
    font-family: 'Josefin Sans', sans-serif;
    display: block;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 5px;
    margin: 0 0 60px;
    }

.topStyleTitle h2::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 1px;
    background: #333;
    top: 56px;
    left: 50%;
    margin-left: -15px;
    }

.moreBtn {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 12px 18px;
    width: 240px;
    text-align: center;
    overflow: hidden;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
    background: #FFF;
    color: #000;
    transition: .3s;
    box-sizing: border-box;
    border: solid 1px #000;
    }

.moreBtn p {
    position: relative;
    z-index: 10;
    }

.moreBtn p span {
    font-size: 12px;
    font-weight: bold;
    margin-right: 6px;
    }

.moreBtn::before {
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #000;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: .3s;
    }

.moreBtn:hover {
    border-color: #000;
    color: #FFF;
    transition: .3s;
    }

.moreBtn:hover::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }

.topStyleTitle .moreBtn {
    top: 2.5%;
    left: 12px;
    }

body.top .topStyle ul {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    }

body.top .topStyle ul li {
    width: 19%;
    margin: 0 1.25% 0 0;
    }

body.top .topStyle ul li:nth-child(5n) { margin: 0 ;}
body.top .topStyle ul li a {
    position: relative;
    display: block;
    background: #FFF;
    overflow: hidden;
    }

body.top .topStyle ul li a p {
    position: absolute;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: .4px;
    padding: 6px 12px;
    bottom: 0;
    left: 0;
    color: #FFF;
    background: repeating-linear-gradient(45deg, black, transparent 100%);
    box-sizing: border-box;
    }

body.top .topStyle ul li a::before {
    position: absolute;
    top: 0;
    left: -81%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }

body.top .topStyle ul li a img { transition: .3s; }
body.top .topStyle ul li:hover a img { opacity: .75; }
body.top .topStyle ul li:hover a::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }

@keyframes shine { 100% { left: 125%; } }
body.top .topStyle .fadeInStyle { animation-name: fadeInStyle; }
@keyframes fadeInStyle {
  from {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


.topNews {
    position: relative;
    width: 90%;
    max-width: 1024px;
    margin: 240px auto;
    }

.topNewsTitle h2 {
    position: relative;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    display: block;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 5px;
    margin: 0 0 60px;
    }

.topNewsTitle h2::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 1px;
    background: #333;
    top: 56px;
    left: 50%;
    margin-left: -15px;
    }

.topNewsTitle .moreBtn { margin-left: 12px; }
.topNews ul {
    display: block;
    margin: 60px 0 ;
    }

.topNews ul.fadeInNews { animation-name: fadeInNews; }
@keyframes fadeInNews {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


.topNews ul li {
    display: flex;
    border-bottom: dotted 2px #CCC;
    padding-bottom: 12px;
    margin-bottom: 12px;
    }

.topNews ul li:last-child { border: none; }
.newsDate a {
    width: 100px;
    display: block;
    text-align: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    background: #F5F5EE;
    color: #222;
    }

.newsCut a {
    display: block;
    text-align: center;
    margin: 0 24px;
    font-size: 12px;
    line-height: 30px;
    color: #222;
    }

.newsSub a {
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    color: #222;
    transition: .3s;
    }

.topNews ul li:hover .newsSub a { color: #998877; }

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

body.top #content { min-width: unset; }
#mainVisual { padding-top: 134px; }
body.top .topConcept {
    flex-wrap: wrap;
    margin: 120px auto ;
    }

body.top .topConcept .conceptTitle,
body.top .topConcept .conceptTxt {
    width: 100%;
    }

body.top .topConcept .conceptTitle {
    font-size: 21px;
    line-height: 42px;
    margin-bottom: 30px;
    }

body.top .topConcept .conceptTxt {
    letter-spacing: 0;
    line-height: 30px;
    }

body.top .topStyle { margin: 120px auto; }

.topStyleTitle .moreBtn { top: 3%; }
.topNews { margin: 120px auto; }
.topNews ul li { flex-wrap: wrap; }

}

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

#mainVisual {
    width: 90%;
    padding-top: 90px;
    margin: 0 auto 90px;
    }

.swiper-container-horizontal > .swiper-pagination-bullets { bottom: 6px; }

body.top .topConcept { margin: 90px auto; }
body.top .topConcept h2 { font-size: 18px; }
body.top .topConcept h2::before { top: 50px; }
body.top .topConcept .conceptTitle {
    font-size: 16px;
    line-height: 30px;
    }

body.top .topConcept .conceptTxt {
    font-size: 14px;
    line-height: 30px;
    }

body.top .topStyle { margin: 90px auto; }
body.top .topStyle ul {
    flex-wrap: wrap;
    width: 90%;
    margin: 60px auto 30px;
    }

body.top .topStyle ul li {
    width: 47%;
    margin: 0 6% 24px 0;
    }
    
body.top .topStyle ul li:nth-child(2n) { margin: 0 0 24px 0; }
body.top .topStyle ul li:nth-child(5) { display: none; }
.topStyleTitle-left {
    width: 30%;
    height: 110%;
    }

.topStyleTitle h2 { font-size: 18px; }
.topStyleTitle h2::before { top: 50px; }
.topStyleTitle .moreBtn { top: 1.7%; }
.topNews { margin: 90px auto; }
.topNewsTitle h2 { font-size: 18px; }
.topNewsTitle h2::before { top: 50px; }
.topNews ul { margin: 60px auto 30px ; }
.newsDate a {
    width: 72px;
    font-size: 12px;
    }

.newsCut a {
    margin: 0 12px;
    line-height: 24px;
    }

.newsSub { width: 100%; }
.newsSub a {
    display: block;
    margin-top: 12px;
    line-height: 24px
    }

}

/*=================================================
    informations
=================================================*/

body.news #main .couponArea {
    width: 100%;
    margin: 0 auto 60px;
    }

body.news #main .couponArea .couponContent {
    display: block;
    width: 100%;
    margin-bottom: 0;
    }

body.news #main .couponArea ul.couponContent li {
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 12px;
    display: flex;
    justify-content: left;
    border-bottom: dotted 2px #CCC;
    }

body.news #main .couponArea ul.couponContent li:last-child { border-bottom: none; }
body.news #main .couponArea ul.couponContent li:hover .newsSub a { color: #998877; }

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

body.news #main .couponArea { margin: 0 auto 30px; }
body.news #main .couponArea ul.couponContent li { flex-wrap: wrap; }

}

/*=================================================
    information
=================================================*/

body.news #main .sect .titleArea {
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: solid 1px #222;
    }

body.news #main .sect .titleArea h3 {
    float: none;
    margin: 0;
    padding: 0;
    color: #222;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
    }

body.news #main .newsTime {

    padding: 6px 12px;
    font-size: 12px !important;
    font-weight: bold;
    letter-spacing: 1px;
    color: #222;
    background: #F5F5EE;
    display: inline-block;
    margin-bottom: 12px;
    }

body.news #main span.newsCut {
    font-size: 12px;
    line-height: 24px;
    margin-left: 12px;
    }

body.news #main .articleTxt {
    margin: 30px auto 60px;
    font-size: 14px;
    line-height: 24px;
    }

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

body.news #main .sect {
    margin-bottom: 60px;
    padding: 0;
    }

}

/*=================================================
    menu
=================================================*/

body.menu #main .sect .titleArea {
    margin: 0 auto 30px;
    border-bottom: none;
    }

body.menu #main .sect .titleArea h3 {
    display: inline-block;
    vertical-align: middle;
    float: none;
    margin: 0;
    padding: 0;
    color: #222;
    font-weight: bold;
    }

body.menu #main .sect .titleArea h3 span.en {
    font-family: 'Josefin Sans', sans-serif;
    display: block;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    }

body.menu #main .sect .txtRight {
    font-size: 10px;
    margin: 3px 0 0 12px;
    padding: 3px 6px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 8px;
    color: #222;
    border: solid 1px #222;
    }

body.menu #main .sect table { margin-bottom: 90px; }
body.menu #main .sect .table tr {
    border-top: none;
    border-bottom: dotted 1px #CCC;
    display: block;
    }

body.menu #main .sect .table tr:last-child { border: none; }
body.menu #main .sect .table > tbody > tr > td:first-child > .serviceSubTxt {
    text-align: left !important;
    width: 100%;
    color: #998877;
    font-size: 11px !important;
    line-height: 18px;
    letter-spacing: .4px;
    margin: 6px 0 0 6px;
    padding-left: 12px;
    border-left: solid 3px #998877;
    box-sizing: border-box;
    }

body.menu #main .sect .table td { padding: 18px 10px; }
body.menu #main .sect .table td:nth-child(2) span,
body.menu #main .sect .table td:nth-child(3) span {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    }

body.menu .menuNote2 {
    font-size: 12px;
    line-height: 24px;
    border: solid 1px #222;
    padding: 18px;
    box-sizing: border-box;
    margin-bottom: 60px;
    }

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

body.menu #main .sect { margin-bottom: 0; }
body.menu #main .sect .table tr {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 6px;
    }

body.menu #main .sect .table td {
    font-size: 14px;
    line-height: 24px;
    padding: 10px;
    box-sizing: border-box;
    }

body.menu #main .sect .table > tbody > tr > td:first-child { width: 85%; }

}

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

body.menu #main .sect .titleArea h3 span.en { font-size: 18px; }
body.menu #main .sect .table tr {
    flex-wrap: wrap;
    justify-content: flex-end;
    }

body.menu #main .sect .table td {
    text-align: right;
    padding: 0;
    width: 50%;
    }

body.menu #main .sect .table > tbody > tr > td:first-child {
    width: 100%;
    margin-bottom: 6px;
    }

body.menu #main .sect table { margin-bottom: 60px; }
body.menu .menuNote2 { margin-bottom: 30px; }

}

/*=================================================
    staffs
=================================================*/

.staffList h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 5px;
    margin: 0 0 30px;
    }

.staffList ul.wrapper_stylist {
    display: flex;
    flex-wrap: wrap;
    }

ul.wrapper_stylist li {
    margin: 0 2.66% 60px 0;
    width: 23%;
    height: auto;
    display: block;
    }

ul.wrapper_stylist li:nth-child(4n) { margin: 0 0 60px 0; }
body.stylist #main .sect02 ul.wrapper_stylist li a.txt p {
    color: #222;
    display: inline-block;
    font-size: 11px;
    background: #f6f6f6;
    padding: 3px 6px;
    margin-bottom: 6px;
    }

body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3 {
    text-align: center;
    margin: 0;
    color: #222;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    transition: .3s;
    }

body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3 span {
    position: relative;
    display: block;
    padding: 12px 0 0;
    font-size: 12px;
    line-height: 24px;
    color: #999;
    transition: .3s;
    }

body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3 span::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 1px;
    background: #333;
    top: 4px;
    left: 50%;
    margin-left: -15px;
    transition: .3s;
    }

body.stylist #main .sect02 ul.wrapper_stylist li:hover a.txt h3,
body.stylist #main .sect02 ul.wrapper_stylist li:hover a.txt h3 span { color: #998877; }
body.stylist #main .sect02 ul.wrapper_stylist li:hover a.txt h3 span::before { background: #998877; }
body.stylist #main .sect02 ul.wrapper_stylist li a.img {
    width: 100%;
    margin: 0 0 30px;
    position: relative;
    display: block;
    background: #FFF;
    overflow: hidden;
    }

body.stylist #main .sect02 ul.wrapper_stylist li a.img::before {
    position: absolute;
    top: 0;
    left: -81%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }

body.stylist #main .sect02 ul.wrapper_stylist li a.img img { transition: .3s; margin: 0 !important; }
body.stylist #main .sect02 ul.wrapper_stylist li:hover a.img img { opacity: .75; }
body.stylist #main .sect02 ul.wrapper_stylist li:hover a.img::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }

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

ul.wrapper_stylist li {
    margin: 0 5% 60px 0;
    width: 30%;
    }

ul.wrapper_stylist li:nth-child(4n) { margin: 0 5% 60px 0; }
ul.wrapper_stylist li:nth-child(3n) { margin: 0 0 60px 0; }
.staffList ul.wrapper_stylist { margin-bottom: 60px; }

}

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

.staffList h2 {
    font-size: 18px;
    }

ul.wrapper_stylist li {
    margin: 0 4% 30px 0;
    width: 48%;
    }

body.stylist #main .sect02 ul.wrapper_stylist li a.img { margin: 0 0 15px; }
body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3 { font-size: 14px; }
ul.wrapper_stylist li:nth-child(3n) { margin: 0 4% 24px 0; }
ul.wrapper_stylist li:nth-child(2n) { margin: 0 0 24px 0; }

}

/*=================================================
    staff
=================================================*/

body.stylist #main .stylistBox { margin: 0 auto 30px; }
body.stylist #main .stylistBox .visualInfo {
    display: block;
    width: 35%;
    }

body.stylist #main .stylistBox .txtInfo {
    display: block;
    width: 60%;
    }

body.stylist #main .stylistBox .txtInfo h2 {
    font-family: 'Josefin Sans', sans-serif;
    margin: 0 auto 12px;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
    }

body.stylist #main .stylistBox .txtInfo h2 span {
    margin-left: 12px;
    font-size: 14px;
    color: #999;
    letter-spacing: 0;
    }

body.stylist #main .stylistBox .txtInfo p.job {
    color: #222;
    display: inline-block;
    font-size: 11px;
    background: #f6f6f6;
    padding: 3px 6px;
    margin-bottom: 12px;
    }

body.stylist #main .stylistBox .txtInfo ul.sns li { transition: .3s; }
body.stylist #main .stylistBox .txtInfo ul.sns li:hover { opacity: .75; }
body.stylist #main .stylistBox .txtInfo p.catch02 {
    margin: 0 0 6px;
    padding: 0 0 12px;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    border-bottom: solid 1px #222;
    }

body.stylist #main .stylistBox .txtInfo p.comment {
    padding-top: 12px;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 24px;
    border-top: dotted 2px #999;
    }

body.stylist #main .stylistBox .txtInfo .career dl,
body.style #main .styleBox .txtInfo .box dl {
    width: 100%;
    background: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6px;
    }

body.stylist #main .stylistBox .txtInfo .career dl dt {
    width: 35%;
    font-size: 14px;
    line-height: 24px;
    }

body.stylist #main .stylistBox .txtInfo .career dl dt span {
    border-left: solid 5px #222;
    padding-left: 6px;
    box-sizing: border-box;
    }

body.stylist #main .stylistBox .txtInfo .career dl dd {
    width: 65%;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    display: block;
    }

body.stylist #main .stylistBox .visualInfo .photo img { width: 100%; }
body.stylist #main .stylistBox .visualInfo .calendar .calendarInner { border: 1px solid #222; }
body.stylist #main .stylistBox .visualInfo .calendar .calendarInner .month { background-color: #222; }
body.stylist #main .sect02 .titleArea {
    position: relative;
    margin: 0 auto 12px;
    border-bottom: 1px solid #222;
    clear: left;
    }

body.stylist #main .sect02 .titleArea h3 {
    float: none;
    margin: 0;
    padding: 0 0 6px;
    color: #222;
    font-weight: bold;
    }

body.stylist #main .sect02 .titleArea h3 span.en {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    }

body.stylist #main .sect02 .titleArea a {
    float: none;
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    }

body.stylist #main .sect02 .titleArea a span {
    padding-right: 0;
    background: unset;
    }

body.stylist #main .sect02 .titleArea a.moreBtn {
    position: absolute;
    top: 0;
    right: 0;
    }

body.stylist #main .staffStyle {
    margin: 0 auto 60px;
    }

body.stylist #main .sect02 ul.wrapper {
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    }

body.stylist #main .sect02 ul.wrapper li {
    display: block;
    vertical-align: top;
    margin: 0 5% 30px 0;
    width: 30%;
    height: auto;
    }

body.stylist #main .sect02 ul.wrapper li:nth-child(3n) { margin: 0 0 30px 0; }
body.stylist #main .sect02 ul.wrapper li:nth-child(4) { display: none; }
body.stylist #main .sect02 ul.wrapper li a.img {
    width: 100%;
    margin: 0;
    position: relative;
    display: block;
    background: #FFF;
    overflow: hidden;
    }

body.stylist #main .sect02 ul.wrapper li a.img::before {
    position: absolute;
    top: 0;
    left: -81%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }

body.stylist #main .sect02 ul.wrapper li a.img p {
    position: absolute;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: .4px;
    padding: 6px 12px;
    bottom: 0;
    left: 0;
    color: #FFF;
    background: repeating-linear-gradient(45deg, black, transparent 100%);
    box-sizing: border-box;
    }

body.stylist #main .sect02 ul.wrapper li a.img img { transition: .3s; }
body.stylist #main .sect02 ul.wrapper li:hover a.img img { opacity: .75; }
body.stylist #main .sect02 ul.wrapper li:hover a.img::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }

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

body.stylist #main .stylistBox {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    }

body.stylist #main .stylistBox .txtInfo {
    display: block;
    width: 60%;
    }

body.stylist #main .stylistBox .visualInfo {
    display: block;
    width: 35%;
    }

body.stylist #main .stylistBox .txtInfo .career dl dd { margin: 0; }
body.stylist #main .stylistBox .txtInfo ul.sns li { padding-left: 3px; }
body.stylist #main .sect02 .titleArea a.moreBtn { margin: 0; }
body.stylist #main .sect03 ul.wrapper li:nth-child(3n+2) { margin: 0 5% 30px 0; }
body.stylist #main .sect03 ul.wrapper li:nth-child(3n) { margin: 0 0 30px 0 ; }
#sub #subStaff ul li { width: 25%; }

}

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

body.stylist #main .stylistBox .txtInfo,
body.stylist #main .stylistBox .visualInfo {
    display: block;
    width: 100%;
    }

body.stylist #main .stylistBox .visualInfo { margin-bottom: 30px; }
body.stylist #main .stylistBox { flex-direction: column-reverse; }
body.stylist #main .stylistBox .txtInfo .career dl dt { width: 100%; }
body.stylist #main .stylistBox .txtInfo .career dl dd { width: 100%; }
body.stylist #main .stylistBox .txtInfo .career { margin: 0 auto; }
body.stylist #main .sect02 .titleArea { padding: 0 0 6px; }
body.stylist #main .sect02 .titleArea h3 { padding: 0; }
body.stylist #main .sect02 .titleArea h3 span.en {
    font-size: 18px;
    line-height: 24px;
    }

body.stylist #main .sect02 ul.wrapper { margin: 0 auto 15px; }
body.stylist #main .sect02 ul.wrapper li {
    width: 48%;
    margin: 0 4% 15px 0;
    }

body.stylist #main .sect03 ul.wrapper li:nth-child(3n) { margin: 0 4% 15px 0; }
body.stylist #main .sect03 ul.wrapper li:nth-child(3n+2) { margin: 0 4% 15px 0; }
body.stylist #main .sect02 ul.wrapper li:nth-child(2n) { margin: 0 0 15px 0; }
body.stylist #main .sect02 ul.wrapper li:nth-child(4) { display: block; }
#sub #subStaff ul li { width: 50%; }

}

/*=================================================
    styles
=================================================*/

ul.styleList {
    display: flex;
    justify-content:left !important;
    }

body.style #main .sect02 ul.wrapper li {
    display: block;
    vertical-align: top;
    margin: 0 5% 30px 0;
    width: 30%;
    height: auto;
    }

body.style #main .sect02 ul.wrapper li:nth-child(4n) { margin: 0 5% 30px 0; }
body.style #main .sect02 ul.wrapper li:nth-child(3n) { margin: 0 0 30px 0; }
body.style #main .sect02 ul.wrapper li a.img {
    width: 100%;
    margin: 0;
    position: relative;
    display: block;
    background: #FFF;
    overflow: hidden;
    }

body.style #main .sect02 ul.wrapper li a.img::before {
    position: absolute;
    top: 0;
    left: -81%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }

body.style #main .sect02 ul.wrapper li a.img p {
    position: absolute;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: .4px;
    padding: 6px 12px;
    bottom: 0;
    left: 0;
    color: #FFF;
    background: repeating-linear-gradient(45deg, black, transparent 100%);
    box-sizing: border-box;
    }

body.style #main .sect02 ul.wrapper li a.img img { transition: .3s; }
body.style #main .sect02 ul.wrapper li:hover a.img img { opacity: .75; }
body.style #main .sect02 ul.wrapper li:hover a.img::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }

body.style .pager { margin: 60px 0; }

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

ul.styleList {
    flex-wrap: wrap;
    margin-bottom: 60px;
    }

body.style #main .sect02 ul.wrapper li:nth-child(3n+2) { margin: 0 5% 30px 0; }
body.style #main .sect02 ul.wrapper li:nth-child(3n) { margin: 0 0 30px 0; }

}

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

body.style #main .sect02 ul.wrapper li { width: 48%; margin: 0 4% 15px 0; }
body.style #main .sect02 ul.wrapper li:nth-child(3n+2) { margin: 0 4% 15px 0; }
body.style #main .sect02 ul.wrapper li:nth-child(3n) { margin: 0 4% 15px 0; }
body.style #main .sect02 ul.wrapper li:nth-child(2n) { margin: 0 0 15px 0; }

}

/*=================================================
    style
=================================================*/

.styleBox {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    }

body.style #main .styleBox .visualInfo { width: 35%; }
body.style #main .styleBox .visualInfo .photo {
    margin: 0 0 12px;
    width: 100%;
    height: auto;
    overflow: hidden;
    }

body.style #main .styleBox .txtInfo {
    width: 60%;
    float: none;
    }

body.style #main .styleBox .txtInfo h2 {
    margin: 0 auto 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    }

body.style #main .styleBox .txtInfo .box p.styleTitle,
.style-arrenge-point-title {
    margin: 0 auto 12px;
    padding: 0 0 6px;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    border-bottom: 1px solid #222;
    }

body.style #main .styleBox .txtInfo ul.sns {
    display: flex;
    justify-content: flex-end;
    }

body.style #main .styleBox .txtInfo ul.sns li {
    display: block;
    width: 26px;
    padding-left: 4px;
    }

body.style #main .styleBox .txtInfo ul.sns li a { transition: .3s;}
body.style #main .styleBox .txtInfo ul.sns li a:hover { opacity: .75; }

.style-arrenge-point-text {
    line-height: 24px;
    font-size: 14px;
    }

.style-arrange-point {
    font-size: 14px;
    margin-top: 30px;
    }

body.stylist #main .stylistBox .txtInfo .career dl,
body.style #main .styleBox .txtInfo .box dl {
    width: 100%;
    background: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6px;
    }

body.style #main .styleBox .txtInfo .box dl dt span {
    border-left: solid 5px #998877;
    padding-left: 6px;
    color: #998877;
    }

body.style #main .styleBox .txtInfo .box { margin: 0 auto 30px; }
body.style #main .styleBox .txtInfo .box dl dt { width: 25%; }
body.style #main .styleBox .txtInfo .box dl dd {
    margin-left: 0;
    width: 75%;
    }

body.style #main .styleBox .txtInfo .box dl dd ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    }

body.style #main .styleBox .txtInfo .box dl dd ul li {
    margin: 0;
    font-size: 12px;
    display: block;
    width: 30%;
    }

body.style #main .styleBox .txtInfo .box ul {
    display: flex;
    justify-content: space-between;
    }

body.style #main .styleBox .txtInfo .box ul li {
    margin: 0;
    font-size: 12px;
    display: block;
    width: 19%;
    }

.typeOn { background-color: #998877; }
.typeOff { background-color: #F5F5EE; }
.hairMenu {
    font-size: 14px;
    line-height: 24px;
    }

body.style #main .commentArea {
    margin:30px auto 60px;
    padding: 24px;
    background-color: #FFF;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: solid 1px #222;
    box-sizing: border-box;
    }

body.style #main .commentArea .img {
    width: 21%;
    margin-right: 3%;
    text-align: center;
    }

body.style #main .commentArea .txt { width: 76%; }
body.style #main .commentArea .img img {
    width: 100%;
    margin: 0;
    }

body.style #main .commentArea .img p.styleStaffName {
    display: block;
    color: #222;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin: 12px auto 0;
    transition: .3s;
    }

body.style #main .commentArea .img:hover p.styleStaffName {
    color: #998877;
    font-size: 14px;
    }

body.style #main .commentArea .img a p.styleStaff {
    width: 100%;
    margin: 0;
    position: relative;
    display: block;
    background: #FFF;
    overflow: hidden;
    }

body.style #main .commentArea .img a p.styleStaff::before {
    position: absolute;
    top: 0;
    left: -81%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }

body.style #main .commentArea .img a p.styleStaff img { transition: .3s; }
body.style #main .commentArea .img:hover a p.styleStaff img { opacity: .75; }
body.style #main .commentArea .img:hover a p.styleStaff::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }

body.style #main .commentArea .txt h4 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: dotted 2px #CCC;
    }

body.style #main .commentArea .txt p {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    }

body.style #main .sect02 .titleArea {
    position: relative;
    margin: 0 auto 12px;
    padding: 0;
    border-bottom: 1px solid #222;
    clear: left;
    }

body.style #main .sect02 .titleArea h3 {
    float: none;
    margin: 0;
    padding: 0 0 6px;
    color: #222;
    font-weight: bold;
    }

body.style #main .sect02 .titleArea h3 span.en {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    }

body.style #main .sect02 .titleArea a span {
    padding-right: 0;
    background: unset;
    }

body.style #main .sect02 .titleArea a {
    float: none;
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    }

body.style #main .sect02 .titleArea a.moreBtn {
    position: absolute;
    top: 0;
    right: 0;
    }

body.style #main .sect02 ul.wrapper { display: flex; }
body.style #main .stylistStyle { margin-bottom: 60px; }
body.style #main .stylistStyle ul.wrapper li:nth-child(4) { display: none; }
body.style #main .stylistStyle ul.wrapper { margin-bottom: 0; }

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

body.style #main .styleBox { display: flex; }
body.style #main .styleBox .txtInfo .box dl dt:first-of-type { width: 25%; }
body.style #main .commentArea .img a {
    text-decoration: none;
    padding-top: 0;
    margin-bottom: 0;
    }

body.style #main .sect02 .titleArea a { margin-top: 0; }
body.style #main .sect02 ul.wrapper { margin-bottom: 60px; }
body.style #main .stylistStyle ul.wrapper { margin-bottom: 0; }

}

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

body.style #main .styleBox { flex-wrap: wrap-reverse; }
body.style #main .styleBox .visualInfo {
    width: 100%;
    margin-bottom: 30px;
    }

body.style #main .styleBox .txtInfo { width: 100%; }
body.style #main .styleBox .txtInfo .box dl dd ul li { width: 28%; }
body.style #main .styleBox .txtInfo .box ul li { width: 18%; }
body.style #main .commentArea { padding: 12px; }
body.style #main .sect02 ul.wrapper { flex-wrap: wrap; }
body.style #main .commentArea {
    flex-wrap: wrap;
    justify-content: center;
    }

body.style #main .commentArea .img {
    width: 50%;
    margin-right: 0;
    margin-bottom: 12px;
    }

body.style #main .commentArea .txt { width: 100%; }
body.style #main .stylistStyle ul.wrapper li:nth-child(4) { display: block; }
body.style #main .stylistStyle ul.wrapper { margin-bottom: 15px; }

}

/*=================================================
    faq
=================================================*/

.faqBox { margin-bottom: 60px; }
body.faq #main .sect .titleArea {
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid #222;
    }

body.faq #main .sect .titleArea h3 { margin: 0; }
body.faq #main .sect .titleArea h3 span.jp {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    }

div.accordion > ul > li > a {
    font-size: 14px;
    line-height: 24px;
    background-color: #998877;
    cursor: pointer;
    padding: 12px 32px 12px 18px;
    }

div.accordion > ul > li > a:after,
div.accordion > ul > li > a.active:after { top: 13px; }
div.accordion > ul > li > ul > li {
    display: block;
    color: #222;
    font-size: 14px;
    padding: 30px 12px;
    position: relative;
    line-height: 24px;
    }

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

.faqBox { margin-bottom: 90px; }
body.faq #sub { float: none !important; }
body.faq #main { float: none !important; }
body.faq #sub .subBox { padding: 0; }

}

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

.faqBox { margin-bottom: 60px; }
div.accordion > ul > li > ul > li { padding: 18px 12px; }

}

/*=================================================
    access
=================================================*/

body.access #main { margin: 0 auto; }
body.access #main .shopdate { width: 100%; margin: 0 auto 30px; }
body.access section .shopdate .titleArea {
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid #222;
    }

body.access #main .shopdate h3 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    margin-bottom: 0;
    }

body.access #main .shopdate h3 span.en {
    padding: 0;
    font-size: 18px;
    letter-spacing: 3px;
    }

body.access #main .shopdate h3 span.jp {
    margin-left: 12px;
    font-size: 14px;
    font-family: auto;
    letter-spacing: .4px;
    }

body.access #main .shopdate p {
    font-size: 14px;
    line-height: 24px;
    overflow: auto;
    }

body.access #main .shopdate a {
    display: inline-block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: normal;
    line-height: 30px;
    color: #222;
    margin: 12px 0 0;
    font-style: italic;
    text-decoration: underline;
    transition: .3s;
    }

body.access #main .shopdate a:hover {
    color: #998877;
    text-decoration: underline;
    }

body.access #main .shopdate ul {
    display: flex;
    flex-wrap: wrap;
    margin: 30px auto;
    padding: 30px 0;
    border-top: dotted 2px #CCC;
    border-bottom: dotted 2px #CCC;
    }

body.access #main .shopdate ul li {
    display: flex;
    width: 50%;
    margin-bottom: 30px;
    }

body.access #main .shopdate ul li:last-child {
    width: 100%;
    margin: 0;
    }

body.access #main .shopdate p.accessLeft { width: 120px; }
body.access #main .shopdate p.accessRight {
    width: 70%;
    width : -webkit-calc(100% - 120px) ;
    width : calc(100% - 120px) ;
    }

body.access #main .shopdate p.accessLeft span {    
    color: #000;
    border-left: solid 5px #000;
    padding-left: 6px;
    box-sizing: border-box;
    }

.ggmap {
    padding-bottom: 36%;
    padding-top: 30px;
    margin-bottom: 60px;
    }

.ggmap iframe {
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%);
    }

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

body.access #main section { margin: 0; }
.ggmap { padding-bottom: 42%; }

}

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

body.access #main .shopdate h3 span.en { font-size: 16px; }
body.access section .shopdate .titleArea { padding: 0 0 6px; }
body.access #main .shopdate ul {
    margin: 18px auto;
    padding: 18px 0;
    }

body.access #main .shopdate ul li {
    width: 100%;
    margin-bottom: 12px;
    }

body.access #main .shopdate p.accessLeft { width: 100px; }
body.access #main .shopdate p.accessRight {
    width: 70%;
    width : -webkit-calc(100% - 100px) ;
    width : calc(100% - 100px) ;
    }

.ggmap { padding-bottom: 60%; }

}

/*=================================================
    sitemap
=================================================*/

body.sitemap #main section { margin: 0 auto 60px; }
body.sitemap #main .shopdate ul a {
    text-decoration: none;
    color: #222;
    }

.main_page_link {
    display: flex;
    flex-wrap: wrap;
    }

.main_page_link li {
    width: 20%;
    color: #222;
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    padding: 12px 0;
    border-bottom: none;
    }

.main_page_link li::before { display: none; }
.main_page_link li a {
    position: relative;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #222;
    transition: .3s;
    }

.main_page_link li a::before,
.main_page_link li a::after {
    position: absolute;
    content: "";
    background: #222;
    top: 50%;
    height: 1px;
    width: 0;
    transition: .3s;
    }

.main_page_link li a::before { left: 50%; }
.main_page_link li a::after { right: 50%; }

.main_page_link li a:hover::before,
.main_page_link li a:hover::after { width: 60%; }

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

.main_page_link li { width: 25%; }

}

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

.main_page_link li { width: 50%; }

}

/*=================================================
    privacy
=================================================*/

body.privacy #main section { margin: 0 auto 60px; }
body.privacy section .shopdate { margin-bottom: 60px; }
body.privacy section .shopdate .titleArea {
    margin: 0 auto 18px;
    border-bottom: 1px solid #222;
    }

body.privacy #main .shopdate h3 {
    color: #222;
    font-size: 18px;
    line-height: 24px;
    font-family: unset;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 12px;
    }

body.privacy #main .shopdate ol { margin-bottom: 0; }
body.privacy #main .shopdate ol li {
    list-style: decimal;
    font-size: 14px;
    line-height: 24px;
    padding-bottom: 12px;
    }

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

body.privacy #main .shopdate h3 { font-size: 18px; }

}

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

body.privacy #main .shopdate h3 { font-size: 16px; }
body.privacy #main section { margin: 0 auto 30px; }
body.privacy section .shopdate { margin-bottom: 30px; }

}

/*=================================================
    contact
=================================================*/

textarea,
input[type="email"] {
    -webkit-appearance: none;
    border-radius: 0;
    }

/*  contact - input  */
body.lower.onecolumn #content #main { margin: 0 auto 60px; }
body.contact #main .contactInner { margin: 0 auto 60px; }
body.contact #main .input .contactInner dl {
    margin: 0 auto 18px;
    font-size: 14px;
    }

body.contact #main .input .contactInner dl dt {
    font-weight: bold;
    margin-bottom: 6px;
    }

body.contact #main .input .contactInner dl dt span {
    position: relative;
    top: 3px;
    color: #F00;
    font-size: 18px;
    line-height: 18px;
    margin-left: 3px;
    vertical-align: middle;
    }

body.contact #main .input .contactInner dl dd input {
    padding: 9px 15px;
    border: 1px solid #222;
    font-size: 14px;
    line-height: 24px;
    width: 100%;
    box-sizing: border-box;
    }

body.contact #main .input .contactInner dl dd textarea {
    padding: 9px 15px;
    border: 1px solid #222;
    font-size: 14px;
    line-height: 24px;
    width: 100%;
    box-sizing: border-box;
    }

body.contact #main .input .contactInner dl dd input:focus,
body.contact #main .input .contactInner dl dd textarea:focus,
body.contact #main .btn input:focus { border: solid 1px #998877; outline: 0;}

body.contact #main .btn input {
    position: relative;
    display: block;
    width: 48%;
    height: auto;
    padding: 0;
    text-align: center;
    font-family: unset;
    font-size: 14px;
    line-height: 42px;
    letter-spacing: 5px;
    font-weight: normal;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: .3s;
    }

body.contact #main .input .btn input#btnReset {
    color: #FFF;
    background-color: #666;
    border:solid 1px #666;
    }

body.contact #main .input .btn input#btnConfirm {
    color: #fff;
    background-color: #222;
    border: solid 1px #222;
    }

body.contact #main .btn input:hover {
    background-color: #998877 !important;
    border: solid 1px #998877 !important;
    opacity: 1;
    }

/*  contact - check  */
body.contact #main .confirm .contactInner dl {
    margin: 0 auto 18px;
    width: 100%;
    flex-wrap: wrap;
    }

body.contact #main .confirm .contactInner dl dt {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    width: 100%;
    font-weight: bold;
    margin-bottom: 6px;
    }

body.contact #main .confirm .contactInner dl dt span {    
    position: relative;
    top: 3px;
    color: #F00;
    font-size: 18px;
    line-height: 18px;
    margin-left: 3px;
    vertical-align: middle;
    }

body.contact #main .confirm .contactInner dl dd {
    width: 100%;
    margin: 0;
    padding: 9px 15px;
    font-size: 14px;
    line-height: 24px;
    border: solid 1px #222;
    box-sizing: border-box;
    background: #f6f6f6;
    }

body.contact #main .confirm .btn {
    display: flex;
    justify-content: space-between;
    width: 640px;
    margin: 0 auto;
    }

body.contact #main .confirm .btn input#btnBack {
    color: #FFF;
    background-color: #666;
    border: solid 1px #666;
    }

body.contact #main .confirm .btn input#btnSend {
    color: #fff;
    background-color: #222;
    border: solid 1px #222;
    }

body.contact #main p.message,
body.contact #main p.error {
    margin: 0 auto 30px;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    }

body.contact #main p.error { color: #F00; }

/*  contact - finish  */
body.contact #main p.sendTxt {
    width: 100%;
    margin: 0 auto 60px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    }

body.contact #main .complete a.returnTop {
    display: block;
    margin: 0 auto 30px;
    padding: 0;
    width: 300px;
    height: auto;
    text-align: center;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    line-height: 42px;
    letter-spacing: 5px;
    background-color: #222;
    color: #FFF;
    font-weight: bold;
    }

body.contact #main .complete a.returnTop:hover {
    background-color: #998877 !important;
    opacity: 1;
    }

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

/*  contact - input  */
body.contact #main .contactInner { width: 100%; }
body.contact #main .input .btn {
    width: 100%;
    max-width: 600px;
    }

body.contact #main .input .btn input#btnReset,
body.contact #main .input .btn input#btnConfirm { padding: 0; }

/*  contact - check  */
body.contact #main .confirm .btn input#btnBack,
body.contact #main .confirm .btn input#btnSend { padding: 0; }

/*  contact - finish  */

}

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

/*  contact - input  */
body.contact #main .contactInner { margin: 0 auto 30px; }
body.contact #main .btn input { letter-spacing: 2px; }
body.contact #main .input .btn input#btnReset,
body.contact #main .input .btn input#btnConfirm { width: 48%; }

/*  contact - check  */
body.contact #main .confirm .btn { width: 100%; }
body.contact #main .confirm .btn input#btnBack,
body.contact #main .confirm .btn input#btnSend { width: 48%; }
body.contact #main p.message,
body.contact #main p.error {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    }

body.contact #main .confirm .contactInner dl { font-size: 14px; }

/*  contact - finish  */
body.contact #main p.sendTxt {
    margin: 0 auto 30px;
    text-align: left;
    }

body.contact #main .complete a.returnTop {
    width: 100%;
    letter-spacing: 2px;
    }

}

/*=================================================
    products
=================================================*/

.products-box h3 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    margin-bottom: 30px;
    }

.products-txt {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 24px;
    }

.products-box { margin-bottom: 120px; }
.products-box ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }

.products-box ul li {
    display: flex;
    width: 49%;
    border: solid 1px #CCC;
    margin-bottom: 24px;
    padding: 18px;
    box-sizing: border-box;
    }

.products-left {
    width: 40%;
    margin-right: 3%;
    }

.products-right {
    width: 57%;
    font-size: 14px;
    line-height: 24px;
    }

.products-right h4 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: dotted 2px #CCC;
    }

.products-price {    
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-align: right;
    margin: 12px auto;
    }

.products-box ul.products-flow li {
    position: relative;
    display: block;
    width: 24%;
    font-size: 14px;
    line-height: 24px;
    }

.products-box ul.products-flow li img { margin-bottom: 12px; }
.products-box ul.products-flow li p {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    background: #222;
    color: #FFF;
    padding: 9px 15px;
    font-size: 18px;
    font-weight: bold;
    }

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

.products-box { margin-bottom: 60px; }
.products-box ul li {
    display: block;
    width: 100%;
    }

.products-left {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
    }

.products-right { width: 100%; }
.products-box ul.products-flow li { width: 100%; }

}

/*=====================================================================*/
/*2020 0326 店舗設置時追加（吉岡）*/
/*=====================================================================*/
header #headerInner .logoArea,
header #headerInner .logoArea a.logo,
.footerInfo .footerLogo {
	width: 160px;
}

@media only screen and (max-width: 1024px){
header #headerInner .logoArea,
header #headerInner .logoArea a.logo {
	width: 140px;
}
}

@media only screen and (max-width: 767px){
header #headerInner {
    margin: 0 auto 25px;
    padding: 25px 0 0;
}
header #headerInner .logoArea,
header #headerInner .logoArea a.logo {
	width: 80px;
}
.footerInfo .footerLogo{
	width: 100px;	
}
}

/*=================================================
    top blog : ADD 2020/04/20
=================================================*/

.topBlog {
    position: relative;
    width: 90%;
    max-width: 1024px;
    margin: 240px auto;
    }

.topBlogTitle h2 {
    position: relative;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    display: block;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 5px;
    margin: 0 0 60px;
    }

.topBlogTitle h2::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 1px;
    background: #333;
    top: 56px;
    left: 50%;
    margin-left: -15px;
    }

.topBlog .green-blog { margin: 60px 0; }
.topBlog > .green-blog > li {
    width: 32%;
    margin: 0 2% 0 0;
    }

.topBlog > .green-blog > li:nth-child(2n) { margin: 0 2% 0 0 ; }
.topBlog > .green-blog > li:nth-child(3n) { margin: 0; }
.topBlog .green-blog-cat li {
    width: auto;
    margin: 0 6px 6px 0;
    }

.topBlog ul.fadeInBlog { animation-name: fadeInBlog; }
@keyframes fadeInBlog {
  from {
    opacity: 0;
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

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

.topBlog { margin: 120px auto; }

}

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

.topBlog { margin: 90px auto; }
.topBlogTitle h2 { font-size: 18px; }
.topBlogTitle h2::before { top: 50px; }
.topBlog .green-blog { margin: 60px auto 0 ; }
.topBlog > .green-blog > li {
    width: 100%;
    margin: 0 0 60px 0;
    }

.topBlog > .green-blog > li:nth-child(3n) { margin: 0 0 60px 0; }
.topBlog > .green-blog > li:nth-child(2n) { margin: 0 0 60px 0; }
.topBlog .green-blog-cat li {
    width: auto;
    margin: 0 6px 6px 0;
    }

}

/*=================================================
    blogs : ADD 2020/04/20
=================================================*/

body.blog #main .couponArea { margin: 0 auto 60px; }
.green-blog {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    }

.green-blog li {
    width: 48%;
    margin: 0 4% 60px 0;
    }

.green-blog li:nth-child(3n) { margin: 0 4% 60px 0; }
.green-blog li:nth-child(2n) { margin: 0 0 60px 0; }
.green-blog-img { margin-bottom: 12px; }
.green-blog-img a {
    width: 100%;
    margin: 0;
    position: relative;
    display: block;
    background: #FFF;
    overflow: hidden;
    }

.green-blog-img a::before {
    position: absolute;
    top: 0;
    left: -81%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }

ul.green-blog li .green-blog-img a img { transition: .3s; width: 100%; }
ul.green-blog li:hover .green-blog-img a img { opacity: .75; }
ul.green-blog li:hover .green-blog-img a::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }

.green-blog-data {
    font-size: 14px;
    line-height: 21px;
    }

.green-blog-data > a {
    color: #000;
    transition: .3s;
    }

li:hover > .green-blog-data > a { color: #998877; }
.green-blog-data h5 {
    font-size: 14px;
    line-height: 21px;
    font-weight: bold;
    margin:12px 0;
    padding: 0;
    }

.green-blog-txt {
    font-size: 12px;
    line-height: 18px;
    }
    
.green-blog-txt { margin: 0 0 6px; }
ul.green-blog-cat {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    }

ul.green-blog-cat li {
    width: auto;
    margin: 0 6px 6px 0;
    }

ul.green-blog-cat li:nth-child(2n) { margin: 0 6px 6px 0; }
ul.green-blog-cat li a {
    position: relative;
    display: block;
    overflow: hidden;
    vertical-align: middle;
    padding: 3px 6px;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 1px;
    background: #FFF;
    color: #000;
    transition: .3s;
    box-sizing: border-box;
    border: solid 1px #000;
    }

ul.green-blog-cat li a span {
    position: relative;
    z-index: 10;
    }

ul.green-blog-cat li a::before {
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #000;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: .3s;
    }

ul.green-blog-cat li a:hover { border-color: #000; color: #FFF;}
ul.green-blog-cat li a:hover::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }

.green-blog-tags {
    border-top: dotted 1px #CCC;
    font-size: 12px;
    line-height: 18px;
    margin: 6px 0;
    padding: 6px 0 0;
    }

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

body.blog #main .couponArea { margin: 0 auto 60px; }

}

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

.green-blog li {
    width: 100%;
    margin: 0 0 60px 0;
    }

}

/*-- blogs side bar [serch] --*/

dl.search2 dt {
    margin-right: 105px;
    padding: 0;
    background-color: #fff;
    border: 1px solid #222;
    }

dl.search2 dt input {
    width: 100%;
    height: auto;
    font-size: 14px;
    line-height: 24px;
    background: none;
    border: none;
    padding: 3px 6px;
    box-sizing: border-box;
    }

dl.search2 dd { margin: 0; }
dl.search2 dd button {
    display: block;
    width: 100px;
    height: auto;
    padding: 3px;
    color: #fff;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    background-color: #222;
    border: 1px solid #222;
    letter-spacing: 3px;
    cursor: pointer;
    transition: .3s;
    }

dl.search2 dd button:hover {
    background-color: #998877;
    border: 1px solid #998877;    
    }

/*-- blogs side bar [archive] --*/

.subyear {
    font-size: 14px;
    color: #222;
    }

.subyear:before {
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-bottom: solid 2px #222;
    border-right: solid 2px #222;
    position: absolute;
    top: 3px;
    left: 84px;
    transform: rotate(45deg);
    }

/*-- blogs side bar [blog] --*/

ul.sidebar-blog > li {
    display: flex;
    margin: 0 0 12px;
    }

.sidebar-blog-img { width: 40%; }
.sidebar-blog-img a {
    width: 100%;
    margin: 0;
    position: relative;
    display: block;
    background: #FFF;
    overflow: hidden;
    }

.sidebar-blog-img a::before {
    position: absolute;
    top: 0;
    left: -81%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }

ul.sidebar-blog li .sidebar-blog-img a img { transition: .3s; }
ul.sidebar-blog li:hover .sidebar-blog-img a img { opacity: .75; }
ul.sidebar-blog li:hover .sidebar-blog-img a::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }

.sidebar-blog-data {
    width: 56%;
    margin-left: 4%;
    }

.sidebar-blog-data a {
    font-size: 14px;
    color: #222;
    transition: .3s;
    }

ul.sidebar-blog > li:hover > .sidebar-blog-data > a { color: #998877; }
.sidebar-blog-data p.date {
    font-size: 12px;
    line-height: 18px
    }

.sidebar-blog-data p.title {
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    margin: 6px 0;
    }

.sidebar-blog-data ul {
    display: flex;
    flex-wrap: wrap;
    }

.sidebar-blog-data ul li { margin: 0 6px 6px 0; }
.sidebar-blog-data ul li a {
    position: relative;
    display: block;
    overflow: hidden;
    vertical-align: middle;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 1px;
    background: #FFF;
    color: #000;
    border: solid 1px #000;
    box-sizing: border-box;
    transition: .3s;
    }

.sidebar-blog-data ul li a span {
    position: relative;
    z-index: 10;
    }

.sidebar-blog-data ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #000;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: .3s;
    }

.sidebar-blog-data ul li a:hover { border-color: #000; color: #FFF;}
.sidebar-blog-data ul li a:hover::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }

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

ul.sidebar-blog {
    display: flex;
    flex-wrap: wrap;
    }

ul.sidebar-blog > li { width: 50%; }

}

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

ul.sidebar-blog > li { width: 100%; }

}

/*=================================================
    blog : ADD 2020/04/20
=================================================*/

body.blog #main .sect {
    width: 100%;
    margin-bottom: 60px;
    }

body.blog #main .sect .titleArea {
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: solid 1px #222;
    }

body.blog #main .sect .titleArea h3 {
    float: none;
    margin: 0;
    padding: 0;
    color: #222;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
    }

body.blog #main .articleTxt {
    margin: 30px auto 60px;
    font-size: 14px;
    line-height: 24px;
    }

body.blog #main .blog-data {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 21px;
    }

body.blog #main .blog-data li { margin-right: 6px; }
body.blog #main .blog-data li a {
    position: relative;
    display: block;
    overflow: hidden;
    vertical-align: middle;
    background: #FFF;
    color: #000;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 1px;
    padding: 2px 6px;
    border: solid 1px #000;
    box-sizing: border-box;
    transition: .3s;
    }

body.blog #main .blog-data li a span {
    position: relative;
    z-index: 10;
    }

body.blog #main .blog-data li a::before {
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #000;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: .3s;
    }

body.blog #main .blog-data li a:hover { border-color: #000; color: #FFF;}
body.blog #main .blog-data li a:hover::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }

body.blog #main  .blog-tag {
    border-top: dotted 1px #CCC;
    font-size: 12px;
    line-height: 18px;
    padding: 6px 0 0;
    }

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

body.blog #main .sect {
    width: auto;
    margin-bottom: 60px;
    padding: 0;
    }

}


/*=================================================
    PRODUCTS : ADD 2020/04/30  WRITER 吉岡
=================================================*/
@media only screen and (min-width: 768px){
	.products-box ul.products-flow li {
		width: 19.5%
	}
}


/*=================================================
    MAINTENACE：ADD 2021/05/24
=================================================*/
.maintenance {
    width: 100%;
    height: 100%;
    }

.maintenance .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 640px;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    padding: 36px;
    background: #FFF;
    border: solid 1px #CCC;
    box-sizing: border-box;
    }

.maintenance .box h1 {
    text-align: center;
    color: #F00;
    font-size: 24px;
    line-height: 36px;
    font-weight: bold;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: dotted 2px #CCC;
    }

.maintenance .box .shopData {
    border-top: dotted 2px #CCC;
    margin-top: 24px;
    padding-top: 24px;
    }

.maintenance .box ul {
    display: flex;
    align-items: center;
    margin: 0 auto;
    }

.maintenance .box ul li:first-child { width: 30%; }
.maintenance .box ul li:last-child {
    width: 70%;
    padding-left: 3%;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
    }

.maintenance .box ul li a {
    color: #000;
    font-weight: bold;
    text-decoration: underline;
    }

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

.maintenance .box { width: 90%; text-align: left;}
.maintenance .box br { display: none;}
.maintenance .box h1 {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    letter-spacing: -1px;
    }

.maintenance .box .shopData { margin-top: 12px; padding-top: 12px; }
.maintenance .box ul { flex-wrap: wrap; }
.maintenance .box ul br { display: inline;}
.maintenance .box ul li:first-child { width: 100%; }
.maintenance .box ul li:first-child a {
    display: block;
    width: 180px;
    margin: 12px auto;
    }

.maintenance .box ul li:last-child {
    width: 100%;
    padding-left: 0;
    line-height: 24px;
    }

}

body.movie .pager { margin:60px 0; }