@charset "UTF-8";

/* ===================================================================

 file name  :  common.css

=================================================================== */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}h1,h2,h3,h4,h5{font-weight:normal;font-size:100%;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;vertical-align:bottom;}svg:not(:root){overflow:hidden;}figure{margin:0;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver;}legend{padding:0;border:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}ul{padding:0;}ul li{list-style:none;}*,*:after,*:before{outline:none;}*,*:after,*:before{box-sizing: border-box;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 1000px;
    width: 100%;
    background: #f0ede7;
    color: #4a4645;
    font-size: 1.5rem;
    font-family: system-ui;
    line-height: 1;

    -webkit-text-size-adjust: 100%;
}
a{ color: #4a4645; text-decoration: none;}
a:hover,a:active{ color: #4a4645; text-decoration: underline;}
.pc{ display: block;}
.sp{ display: none;}

@media screen and (max-width: 768px){
    body{ min-width: 0;}
    *, *:after, *:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    img{ max-width: 100%; width: auto; height: auto;}
    .pc{ display: none;}
    .sp{ display: block;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ background: #e0dbd2;}
.header header{ position: relative; margin: 0 auto; width: 1000px; height: 100px;}
.header h1{ position: absolute; bottom: 30px; left: 0;}
.header nav{ position: absolute; right: 0; bottom: 30px;}
.header nav ul{ display: flex;}
.header nav li{ padding: 0 0 0 50px;}
.header nav a{ position: relative; font-weight: bold;}
.header nav .current a:after{ position: absolute; top: -20px; left: 0; width: 100%; height: 4px; border-radius: 12px; background: #fff; content: "";}
.header #menu{ display: none;}

.stuck{ position: fixed; top: 0; left: 0; z-index: 99999; width: 100%;}

@media screen and (max-width: 768px){
    .header header{ width: 100%; height: 50px; text-align: center; line-height: 50px;}
    .header h1{ position: relative; bottom: auto; left: auto; display: inline-block; width: 75%;}
    .header h1 img{ vertical-align: middle;}
    .header nav{ top: 50px; right: auto; bottom: auto; left: 0; z-index: 99999; display: none; width: 100%;}
    .header nav ul{ display: block; width: 100%;}
    .header nav li{ padding: 0; border-bottom: 2px solid #e0dbd2;}
    .header nav a{ position: relative; display: block; padding: 0 15px; background: #fff; text-align: left; font-weight: normal;}
    .header nav a:before{ position: absolute; top: 50%; right: 15px; display: block; box-sizing: border-box; margin: -4px 0 0; width: 8px; height: 8px; border-bottom: 2px solid #4a4645; border-left: 2px solid #4a4645; content: ""; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
    .header nav .current a:after{ display: none;}
    .header #menu{ position: absolute; top: 0; right: 10px; display: inline-block; padding: 0; font-size: 2.4rem; cursor: pointer;}
}

/* --------------------------------------------------
 hero
--------------------------------------------------- */
.hero li{ display: inline-block; width: 50%;}
.hero li a{ display: block; overflow: hidden; width: 100%; height: 460px; background: url("/img/hero_beautysalon.jpg") no-repeat top center / cover; text-indent: 100%; white-space: nowrap;}
.hero li:first-child a{ background-image: url("/img/hero_haircut_s.jpg");}
.hero li a:hover{ opacity: .75;}

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

/* --------------------------------------------------
 content
--------------------------------------------------- */

/* layout */
.row2{ margin: 0 auto; width: 1000px; text-align: center;}
.row2:after{ display: block; clear: both; content: "";}
.row2-left{ float: left; width: 490px;}
.row2-right{ float: right; width: 490px;}

@media screen and (max-width: 768px){
    .row2{ width: 100%;}
    .row2-left{ float: none; width: 100%;}
    .row2-right{ float: none; width: 100%;}
}

.list-row2 li{ display: inline-block; width: 50%; vertical-align: top;}
.list-row2 figure li{ width: 100%;}
.list-row2 figure + h3{ margin: 15px 0 0; text-align: center;}
.list-row2 img{ width: 100%;}
h2 + .list-row2{ margin: 50px 0 0;}
.list-row2s li{ display: inline-block; margin: 50px 50px 0 0; width: 475px; vertical-align: top;}
.list-row2s li:nth-child(even){ margin: 50px 0 0;}
.list-row3 li{ display: inline-block; margin: 50px 20px 0 0; width: 320px; vertical-align: top;}
.list-row3 li:nth-child(3n){ margin: 50px 0 0;}

@media screen and (max-width: 768px){
    .list-row2 li{ display: block; margin: 30px 0 0; width: 100%;}
    .list-row2 li li{ margin: 0;}
    .list-row2 figure + h3{ margin: 10px 0 0;}
    h2 + .list-row2{ margin: 0;}
    .list-row2s li{ display: block; margin: 30px 0 0; width: 100%;}
    .list-row2s li:nth-child(even){ margin: 30px 0 0;}
    .list-row3 li{ display: block; margin: 30px 0 0; width: 100%;}
    .list-row3 li li{ margin: 0;}
    .list-row3 li:nth-child(3n){ margin: 30px 0 0;}
}

/* parts */
.blt{ position: relative; margin: 10px 0 0; height: 19px; border-top: 1px solid; text-align: center; font-weight: bold; font-size: 2.4rem;}
.blt:before{ position: absolute; top: -5px; left: 0; width: 7px; height: 7px; border: 1px solid; border-radius: 100%; background: #f0ede7; content: "";}
.blt:after{ position: absolute; top: -5px; right: 0; width: 7px; height: 7px; border: 1px solid; border-radius: 100%; background: #f0ede7; content: "";}
.blt span{ position: relative; top: -10px; padding: 0 1em; background: #f0ede7;}

@media screen and (max-width: 768px){
    .blt{ margin: 10px 0 0; height: auto; font-size: 1.8rem;}
}

.btn{ margin: 50px 0 0; text-align: center;}
.btn a{ position: relative; display: inline-block; padding: 0 35px 0 20px; height: 50px; border-radius: 2px; background: #e4dfd6; letter-spacing: 1px; line-height: 50px; transition: all .15s ease-out;}
.btn a:after{ position: absolute; top: 50%; right: 20px; margin: -4px 0 0; width: 6px; height: 6px; border-right: 1px solid #000; border-bottom: 1px solid #000; content: ""; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.btn a:hover{ background: #4a4645; color: #e4dfd6;}
.btn a:hover:after{ border-right: 1px solid #e4dfd6; border-bottom: 1px solid #e4dfd6;}

@media screen and (max-width: 768px){
    .btn{ margin: 30px 0 0;}
}

.box{ position: relative; width: 100%; height: 300px; border: 1px solid; border-radius: 6px; text-align: center;}
.box h2{ position: relative; top: -11px; display: inline-block; padding: 0 1em; background: #f0ede7; font-weight: bold; font-size: 2.2rem;}
.box .inner{ margin: 25px 0 0;}
.box p{ display: inline-block; text-align: left; font-weight: bold; line-height: 2;}
.box p span{ font-size: 2rem;}
.box ol{ display: inline-block; margin: 0 0 0 1em;}
.box li{ text-align: left; font-weight: bold; line-height: 2;}

@media screen and (max-width: 768px){
    .box{ height: auto;}
    .box h2{ font-size: 1.8rem;}
    .box .inner{ margin: 0; padding: 15px;}
    .box p{ display: inline-block; text-align: left; font-weight: bold; line-height: 2;}
    .box li{ margin: 15px 0 0; line-height: 1.5;}
    .box li:first-child{ margin: 0;}
}

.list-news{ text-align: left;}
.list-news img{ width: 100%;}
.list-news time{ display: block; margin: 20px 0 0; font-size: 1.2rem; font-family: "Century Gothic", sans-serif;}
.list-news h3{ margin: 10px 0 0; font-weight: bold; font-size: 1.6rem; line-height: 1.5;}
.list-news .body{ margin: 20px 0 0; line-height: 1.5;}
.list-news .name{ margin: 30px 0 0; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .list-news li{ position: relative;}
    .list-news figure{ background: #e4dfd6;}
    .list-news img{ width: 30%;}
    .list-news time{ position: absolute; top: 20px; right: 10px; margin: 0;}
    .list-news .body{ margin: 10px 0 0; font-size: 1.3rem;}
    .list-news .name{ margin: 15px 0 0; padding: 10px 0; border-top: 1px dotted; border-bottom: 1px solid; text-align: right;}
}

/* top */
.main{ padding: 75px 0; border-top: 20px solid #e4dfd6;}
.hero + .main{ border: none;}
.main section{ margin: 0 auto; width: 1000px;}

@media screen and (max-width: 768px){
    .main{ padding: 30px 15px; border-top: 15px solid #e4dfd6;}
    .main section{ width: 100%;}
}

/* article */
article header h1{ overflow: hidden; height: 460px; background: no-repeat top center / cover; text-indent: 100%; white-space: nowrap;}
article header p{ overflow: hidden; height: 0; text-indent: 100%; white-space: nowrap;}
article nav{ background: #e0dbd2;}
article nav ul{display: flex;  margin: 0 auto; width: 1000px; flex-wrap: wrap; justify-content: center;}
article nav li{ padding: 10px 30px;}
article nav .nav-tel{ padding: 10px 5px 10px 30px;}
article nav .nav-btn{ padding: 10px 5px;}
article nav a{ display: inline-block; height: 50px; font-weight: bold; line-height: 50px;}
article nav i{ display: inline-block; margin: 0 5px 0 0;}
article nav div a{ display: inline-block; width: 280px; border-bottom: 2px solid #1d8086; border-radius: 3px; background: #25A3AA; color: #fff; text-align: center; font-weight: bold; font-size: 1.8rem;}
article nav div a:hover{ text-decoration: none;}
article nav span a{ display: inline-block; width: 280px; border-bottom: 2px solid #b5903d; border-radius: 3px; background: #D7AB49; color: #fff; text-align: center; font-weight: bold; font-size: 1.8rem;}
article nav span a:hover{ text-decoration: none;}

article .outer{ border-top: 20px solid #e4dfd6;}
article section{ margin: -100px auto 0; padding: 175px 0 75px; width: 1000px;}
article .row2 section{ width: 100%;}
article .row2 ul{ display: inline-block; margin: 50px 0 0 1em; line-height: 2;}
article .row2 li{ list-style: disc; text-align: left; font-weight: bold;}
article .row2 li span{ display: inline-block; margin: 0 0 0 1em; font-size: 2rem;}
article .row2 li small{ font-weight: normal; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    article header h1{ height: 0; background: none;}
    article nav{ padding: 15px 0;}
    article nav ul{ width: 100%;}
    article nav li{ padding: 0 15px; border-left: 1px solid; font-size: 1.3rem;}
    article nav li:first-child{ border: none;}
    article nav a{ height: auto; line-height: normal;}
    article nav .nav-tel,
    article nav .nav-btn{padding: 5px 15px 0;  width: 100%; border: none;}
    article nav .nav-tel{ padding: 10px 15px 0;}
    article nav .nav-tel a,
    article nav .nav-btn a{ padding: 10px 0; width: 100%; font-size: 1.5rem;}
    article .outer{ padding: 0 15px 30px; border-top: 15px solid #e4dfd6;}
    article section{ margin: 0; padding: 0; width: 100%;}
    article .row2{ text-align: left;}
    article .row2 ul{ margin: 0 0 0 1em;}
    article .row2 li span{ font-size: 2rem;}
    article #news{ margin: -50px 0 0; padding: 80px 15px 30px;}
    article #news li{ margin: 15px 0 0;}
    article #news time{ position: relative; top: auto; right: auto;}
    
    article #price{ margin: -50px 0 0; padding: 80px 0 0;}
    article #howto{ margin: -50px 0 0; padding: 80px 0 0;}
    article #shopinfo{ margin: -50px 0 0; padding: 80px 0 0;}
}

article .shop{ position: relative; margin: 50px 0 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
article .shop h3{ position: relative; padding: 0 0 10px; border-bottom: 1px dashed; font-weight: bold; font-size: 2.4rem; width: 100%;}
article .shop aside{ position: absolute; top: -10px; right: 0;}
article .shop aside ul{ text-align: right; font-size: 0;}
article .shop aside li{ display: inline-block; margin: 0 0 0 10px; vertical-align: middle; font-size: 1.5rem;}
article .shop aside a{ font-weight: bold;}
article .shop aside div a{ display: inline-block; padding: 10px 0; width: 240px; border-bottom: 2px solid #1d8086; border-radius: 3px; background: #25A3AA; color: #fff; text-align: center;}
article .shop aside div a:hover{ color: #4a4645; text-decoration: none;}
article .shop aside span a{ display: inline-block; padding: 10px 0; width: 240px; border-bottom: 2px solid #b5903d; border-radius: 3px; background: #D7AB49; color: #fff; text-align: center;}
article .shop aside span a:hover{ color: #4a4645; text-decoration: none;}
article .shop i{ display: inline-block; margin: 0 5px 0 0;}

.block{ margin: 10px 0 0; width: calc(50% - 5px); background: #fff; vertical-align: top;}
.block iframe{ width: 100%; height: 277px; vertical-align: bottom;}
.block .inner{ padding: 5px 10px 10px; min-height: 90px;}
.block dl{ display: block; padding: 5px 0 0; font-size: 1.3rem; line-height: 1.5;}
.block dt{ display: inline-block; width: 80px; color: #bb9897; vertical-align: top; font-weight: bold;}
.block dd{ display: inline-block; width: 395px; vertical-align: top;}
.block dd span{ display: block; margin: 10px 0 0; padding: 0 0 0 162px;}

@media screen and (max-width: 768px){
    article .shop{ margin: 30px 0 0; flex-direction: column;}
    article .shop h3{ font-size: 1.6rem;}
    article .shop aside{ position: relative; top: auto; right: auto;}
    article .shop aside ul{ padding: 10px 0 0; text-align: center;}
    article .shop aside li{ display: block; margin: 5px 0 0;}
    article .shop aside div a{ padding: 15px 0; width: 100%;}
    article .shop aside span a{ padding: 15px 0; width: 100%;}
    
    .block{ width: 100%;}
    .block iframe{ width: 100%; height: 200px; vertical-align: bottom;}
    .block .inner{ padding: 15px;}
    .block dt{ display: block; width: 100%;}
    .block dd{ display: block; margin: 5px 0 0; width: 100%;}
    .block dd span{ margin: 0;}
}

/* haircut */
.haircut article header h1{ background-image: url("/haircut/img/hero.jpg");}
.haircut .flex{ display: flex; margin: 0 auto; width: 1000px; justify-content: space-between;}
.haircut .flex section{ width: 30%;}
.haircut .flex .inner{ position: relative; padding: 0 20px 20px; height: 100%; border: 1px solid; border-radius: 6px; line-height: 1.8;}
.haircut .flex h2{ padding: 0 0 10px; text-align: center;}
.haircut .flex h2 span{ position: relative; top: -11px; display: inline-block; padding: 0 1em; background: #f0ede7; font-weight: bold; font-size: 2.2rem; line-height: 1;}

.haircut .flex .list-charge > li{ padding: 15px 0; border-bottom: 1px solid; font-weight: bold;}
.haircut .flex .list-charge > li:first-child{ padding: 0 0 15px;}
.haircut .flex .list-charge dl{ display: flex; white-space: nowrap; justify-content: space-between; align-items: center;}
.haircut .flex .list-charge p + dl{ margin: 1em 0 0;}
.haircut .flex .list-charge dd small{ display: inline-block; margin: 0 0 0 .5em; font-size: 1rem;}
.haircut .flex .list-charge p{ font-weight: normal; font-size: 1.2rem;}
.haircut .flex .list-charge p + p{ margin: 1em 0 0;}

.haircut .flex .dl-box{overflow: hidden; margin: 20px 0 0; padding: 0 20px 20px; border-radius: 6px; background: #fff; line-height: 1.5;}
.haircut .flex .dl-box > dt{ margin: 0 -20px; background: #4a4645; color: #fff; text-align: center; font-size: 1.7rem; line-height: 2;}
.haircut .flex .dl-box > dd{ margin: 20px 0 0; font-size: 1.3rem;}
.haircut .flex .dl-box > dd strong{ display: block; padding: 0 0 10px; text-align: center; font-size: 1.6rem;}
.haircut .flex figure{overflow: hidden; margin: 10px 0 0; border-radius: 6px;}
.haircut .flex ol{ margin: 0; list-style: none;line-height: 1.5; }
.haircut .flex ol li{ position: relative; margin: 20px 0 0; padding: 0 0 20px; border-bottom: 1px solid;}
.haircut .flex ol li:after{ position: absolute; bottom: -6px; left: 50%; 
border-width: 6px 6px 0 6px; border-style: solid;border-color: #4a4645 transparent transparent transparent; content: "";transform: translate(-50%,0); }
.haircut .flex ol li:last-child{padding: 0; border: none; }
.haircut .flex ol li:last-child:after{ content: none;}
.haircut .flex ol li:first-child{ margin: 0;}
.haircut .flex img{ width: 100%;}

@media screen and (max-width: 768px){
    .haircut article header h1{ background: none;}
    .haircut .flex{ display: block; width: 100%;}
    .haircut .flex section{ width: 100%;}
    .haircut .flex section + section{ margin: 30px 0 0;}
    .haircut .flex .inner{ padding: 0 15px 15px;}
    .haircut .flex h2{ padding: 0 0 10px; text-align: center;}
    .haircut .flex h2 span{ font-size: 1.8rem;}
    .haircut .flex .dl-box{ margin: 15px 0 0; padding: 0 15px 15px;}
    .haircut .flex .dl-box dt{ margin: 0 -15px; font-size: 1.4rem;}
    .haircut .flex .dl-box dd{ margin: 15px 0 0; font-size: 1.2rem;}
    .haircut .flex .dl-box dd strong{ font-size: 1.6rem;}
    .haircut .flex figure{ margin: 15px 0 0;}
    .haircut .flex ol li{ margin: 15px 0 0;}
}

/* beautysalon */
.beautysalon article header h1{ background-image: url("/beautysalon/img/hero.jpg");}
.beautysalon .block dt{ color: #e99669;}

@media screen and (max-width: 768px){
    .beautysalon article header h1{ background: none;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ padding: 25px 0 0; background: #e0dbd2;}
.footer footer{ position: relative; margin: 0 auto; padding: 0 0 37px; width: 1000px;}
.footer nav{ position: absolute; top: 0; left: 0;}
.footer nav li{ display: inline-block; margin: 0 50px 0 0;}
.footer nav a{ font-weight: bold;}
.footer small{ position: absolute; top: 0; right: 0; font-size: 1.3rem;}

@media screen and (max-width: 768px){
    .footer{ padding: 15px 0;}
    .footer footer{ padding: 0; width: 100%;}
    .footer nav{ position: relative; top: auto; left: auto; text-align: center;}
    .footer nav li{ margin: 0; border-left: 1px solid; font-size: 1.3rem;}
    .footer nav li:first-child{ border: none;}
    .footer nav a{ display: block; padding: 0 15px;}
    .footer small{ position: relative; top: auto; right: auto; display: block; margin: 15px 0 0; text-align: center;}
}