@charset "UTF-8";
/* -------------------------------------
共通＆リセット
------------------------------------- */
.block-inner{
max-width: 960px;
font-size: 16px;
line-height: 2;
margin:0 auto 70px;
padding-left: 15px;
padding-right: 15px;
}
.block-inner:after {
content: "";
display: block;
clear: both;
}
.inner .block-inner{
padding-left: 0;
padding-right: 0;
}
.block-inner h2{
font-weight:bold;
}
.block-inner li{
list-style:none;
}
/*----------------
テキストカラー
※文字色変更は
#contents sectionから書く
----------------*/
#contents section .case-Wrap p.leadIn,
#contents section .inquiry-Wrap p.inquiryText,
#contents section .textSetB-Wrap p,
#contents section .company-Wrap p{
color: #000;
}
article .article-body .block-inner h2,
.block-inner h2{
position: relative;
margin: 35px auto 50px;
padding: 15px 0;
font-size: 20px;
line-height: 1.2;
text-align: center;
font-weight: 500;
z-index: 1;
}
article .article-body .block-inner h2:before,
.block-inner h2:before{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 28%;
margin-left: -14%;
border-top: 1px solid #061834;
}
article .article-body .block-inner h2:after,
.block-inner h2:after{
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 28%;
margin-left: -14%;
border-top: 1px solid #061834;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.block-inner{
margin:0 0 50px;
font-size: 16px;
line-height: 1.6;
padding:0 15px;
}
#contents section.block-inner{
padding:0;
}
#contents article .block-inner{
padding:0 15px;
}
#contents article .article-body .block-inner{
padding: 0;
}
article .article-body .block-inner h2,
.block-inner h2{
margin-bottom: 25px;
font-size: 20px;
padding: 15px 0;
}
article .article-body .block-inner h2:before,
article .article-body .block-inner h2:after,
.block-inner h2:before,
.block-inner h2:after{
width: 60%;
margin-left: -30%;
}
.block-inner .shopinfo-Wrap h2,
.block-inner .case-Wrap h2,
.block-inner .charge-Wrap h2,
.block-inner .staff-Wrap h2,
.block-inner .event-Wrap h2{
margin-bottom: 50px;
}
.block-inner .shopinfo-Wrap h2:before,
.block-inner .shopinfo-Wrap h2:after,
.block-inner .case-Wrap h2:before,
.block-inner .case-Wrap h2:after,
.block-inner .charge-Wrap h2:before,
.block-inner .charge-Wrap h2:after,
.block-inner .event-Wrap h2:before,
.block-inner .event-Wrap h2:after,
.block-inner .staff-Wrap h2:before,
.block-inner .staff-Wrap h2:after,
.block-inner .shopPic-Wrap h2:before,
.block-inner .shopPic-Wrap h2:after,
.block-inner .event-Wrap h2:before,
.block-inner .event-Wrap h2:after{
width: 60%;/*28%;*/
margin-left: -30%;/*-14%;*/
}
.block-inner img{
max-width:100%;
}
}
/* -------------------------------------
◎コンセプト
------------------------------------- */
.eye-Wrap{
margin-top:30px;
}
.eye-Wrap:after{
content: "";
display: block;
clear: both;
}
.eye-Wrap:first-child{
 margin-top:0;
}
.eye-Wrap.Rside .imageIn{
float: right;
margin: 0 0 0 40px;
}
.eye-Wrap.Lside .imageIn{
float: left;
margin: 0 40px 0 0;
}
.eye-Wrap .imageIn img{
display:block;
margin-bottom: 10px;
}
.eye-Wrap .textIn{
overflow: auto;
}
.eye-Wrap.titleUp h2{
width: 100%;
font-size: 20px;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.eye-Wrap {
margin-top: 15px;
}
.eye-Wrap.Lside .imageIn{
margin: 0 20px 5px 0;
max-width: 40%;
}
.eye-Wrap.Rside .imageIn{
margin: 0 0 5px 20px;
max-width: 40%;
}
.eye-Wrap .textIn{
overflow: visible;
}
.eye-Wrap.titleUp h2{
overflow: hidden;
width: auto;
}
}
/* -------------------------------------
◎メニュー
------------------------------------- */
.charge-Wrap{
}
.charge-Wrap .listAreaWrap{
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-right: 50px;
}
.charge-Wrap .spaceR{
flex: 1;
}
.charge-Wrap .spaceL{
flex: 1;
margin-right: 45px;
}
.charge-Wrap .space1Line{
flex: 1;
}
/*--タブレット用スタイル
↓ここまで↓--*/
@media only screen and (max-width: 1020px) and (min-width: 641px) {
.charge-Wrap .spaceL,
.charge-Wrap .space1Line{
margin-right: 0;
}
}
/*--↑ここまで↑--*/
.charge-Wrap .listArea{
margin-bottom: 0;
flex: 1;
}
.charge-Wrap ul li{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding: 0 0 10px 30px;
border-bottom: 1px dashed #bebebe;
}
.charge-Wrap .titleIn{
border-bottom: 1px solid #061834;
font-size: 18px;
font-weight: 600;
padding-top: 45px;
}
.charge-Wrap .titleIn:first-child{
padding-top: 0;
}
.charge-Wrap .priceNote{
text-align: right;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.charge-Wrap .listAreaWrap,
.charge-Wrap .spaceR{
display: block;
margin: 0;
}  
.charge-Wrap .titleIn,
.charge-Wrap .titleIn:first-child{
padding-top: 10px;
line-height: 1em;
}
.charge-Wrap ul span{
line-height: 1.1em;
z-index: auto;
}
.charge-Wrap .spaceL{
margin-right: 0;
}   
}
/* -------------------------------------
代表挨拶
------------------------------------- */
.message-Wrap{
margin-top:30px;
}
.message-Wrap:first-child{
 margin-top:0;
}
.message-Wrap.Rside .imageIn{
float: right;
margin-left: 40px;
}
.message-Wrap.Lside .imageIn{
float: left;
margin-right: 40px;
}
.message-Wrap .textIn{
overflow: hidden;
}
.message-Wrap p{
margin-bottom: 10px;
}
.message-Wrap p.nameIn{
text-align:right;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.message-Wrap.Rside .imageIn{
margin-left: 15px;
margin-bottom: 15px;
max-width: 45%;
}
.message-Wrap.Lside .imageIn{
margin-right: 15px;
margin-bottom: 15px;
max-width: 45%;
}
.message-Wrap .textIn{
overflow: visible;
}
}
/* -------------------------------------
◎お知らせ
------------------------------------- */
.news-Wrap{
}
.news-Wrap .news-body{
line-height:1.6;
}
.news-Wrap ul li {
padding: 10px 0;
border-bottom: 1px dashed #bebebe;
}
.news-Wrap ul li:after {
content: "";
display: block;
clear: both;
}
.news-Wrap ul li span {
display: block;
}
.news-Wrap ul li span.timeIn {
float: left;
width: 9em;
margin-right: 10px;
}
.news-Wrap ul li span.textIn {
overflow: hidden;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.news-Wrap ul li span.timeIn {
float: none;
font-weight:bold;
}
}
/* -------------------------------------
◎ヘアカタログ
------------------------------------- */
.case-Wrap{
}
.case-Wrap .leadIn{
font-size: 16px;
margin-bottom: 20px;
}
.case-Wrap .caseBody{
font-size: 16px;
}
.case-Wrap .caseInWrap{
margin-bottom: -30px;
}
.case-Wrap.Row2 .caseInWrap{
margin-left: -16px;
}
.case-Wrap.Row3 .caseInWrap{
margin-left: -37px;
}
.case-Wrap.Row4 .caseInWrap{
margin-left: -30px;
}
.case-Wrap.Row5 .caseInWrap{
margin-left: -12px;
}
.case-Wrap .caseInWrap:after{
content: "";
display: block;
clear: both;
}
.case-Wrap .caseIn{
box-sizing: border-box;
float: left;
margin: 0 0 45px;
text-align: center;
}
.case-Wrap.Row2 .caseIn{
width: 48%;
padding-left: 50px;
}
.case-Wrap.Row3 .caseIn{
width: 33.3%;
padding-left: 40px;
}
.case-Wrap.Row4 .caseIn{
width: 25%;
padding-left: 30px;
}
.case-Wrap.Row5 .caseIn{
width: 20%;
padding-left: 12px;
margin: 0 0 25px;
}
.case-Wrap.Row2 .caseIn:nth-child(2n+1){clear: both;}
.case-Wrap.Row3 .caseIn:nth-child(3n+1){clear: both;}
.case-Wrap.Row4 .caseIn:nth-child(4n+1){clear: both;}
.case-Wrap.Row5 .caseIn:nth-child(5n+1){clear: both;}
.case-Wrap .caseIn .imageIn{
margin: 0 auto;
text-align: center;
}
.case-Wrap .caseIn .imageIn img{
width:100%;
}
.case-Wrap .caseIn p{
text-align: left;
margin-top: 10px;
line-height: 1.4;
margin-bottom: 0em;
}
.caseNote{
margin-top: 58px;
text-align: right;
}
/*.style-itemと.captionは
E1L0139M0.cssと同じクラス名を使用してます
↓ここから↓*/
.case-Wrap .caseIn .style-item {
position: relative;
overflow: hidden;
margin: 0px 1em 1em 0px;
width: 100%;
height: 100%;
z-index: auto;
}
.case-Wrap.Row4 .caseIn .style-item {
max-width: 205px;
}
.case-Wrap.Row2 .caseIn .style-item {
max-width: 418px;
}
.case-Wrap.Row3 .caseIn .style-item {
max-width: 292px;
}
.case-Wrap.Row5 .caseIn .style-item {
max-width: 182px;
}
.case-Wrap .caseIn .caption {
position: absolute;
left: 0px;
top: 100%;
width: 100%;
height: 100%;
background-color: black;
color: white;
opacity: 0.5;
}
.case-Wrap .caseIn .caption p span {
border-bottom: 1px #fff solid;
display: block;
font-weight: 600;
width: 80%;
margin: 0 auto;
}
.case-Wrap .caseIn .caption p {
font-size: 16px;
color: #fff;
text-align: center;
}
.case-Wrap.Row3 .caseIn .caption p,
.case-Wrap.Row5 .caseIn .caption p {
padding: 0 5px;
}
.case-Wrap.Row2 .caseIn .caption p{
padding: 0 10px;
}
@media only screen and (max-width: 1020px) and (min-width: 641px) {
.case-Wrap .caseIn .caption p {
/*font-size: 12px;*/
line-height: 1.2em;
}
.case-Wrap.Row2 .caseIn .caption p{
padding: 0 5px;
}
}
/*↑ここまで↑*/
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.case-Wrap .leadIn{
font-size: 12px;
}
.case-Wrap.Row2 .caseInWrap,
.case-Wrap.Row3 .caseInWrap,
.case-Wrap.Row4 .caseInWrap,
.case-Wrap.Row5 .caseInWrap{
margin-left: -10px;
}
.case-Wrap .caseIn:nth-child(even){float: right;}
.case-Wrap.Row2 .caseIn,
.case-Wrap.Row3 .caseIn,
.case-Wrap.Row4 .caseIn,
.case-Wrap.Row5 .caseIn{
width: 50%;
margin: 0 0 30px;
padding-left: 10px;
}
.case-Wrap .caseIn p{font-size: 12px;}
.case-Wrap .caseIn:nth-child(2n+1){clear: both;}
.case-Wrap.Row3 .caseIn:nth-child(3n+1),
.case-Wrap.Row4 .caseIn:nth-child(4n+1),
.case-Wrap.Row5 .caseIn:nth-child(5n+1){
clear: none;
}
.case-Wrap.Row2 .caseInWrap img,
.case-Wrap.Row3 .caseInWrap img,
.case-Wrap.Row4 .caseInWrap img,
.case-Wrap.Row5 .caseInWrap img{
width: 100%;
height: auto;
}
.caseNote {
margin-top: 40px;
}
/*この部分のスタイルは
E1L0139M0.cssと同じクラス名を使用してます
↓ここから↓*/
.case-Wrap.Row2 .caseIn .style-item,
.case-Wrap.Row3 .caseIn .style-item,
.case-Wrap.Row4 .caseIn .style-item,
.case-Wrap.Row5 .caseIn .style-item{
/*max-width: none;*/
}
.case-Wrap .caseIn .caption p span {
padding-bottom: 5px;
}
.case-Wrap .caseIn .caption p {
font-size: 12px;
line-height: 1.2em;
}
/*↑ここまで↑*/
}
/* -------------------------------------
◎お問い合わせ
------------------------------------- */
.inquiry-Wrap{
}
.inquiry-Wrap p.inquiryText {
margin-bottom: 30px;
font-size: 16px;
text-align: center;
}
.inquiry-Wrap .inquiryBtn {
text-align: center;
}
.inquiry-Wrap .inquiryBtn a {
display: inline-block;
min-width: 40%;
padding: 25px 45px;
color: white;
text-decoration: none;
background: #333;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
border: 3px double white;
font-size: 20px;
text-shadow: 0 1px 0 #000;
}
.inquiry-Wrap .inquiryBtn input[type="button"]:hover,
.inquiry-Wrap .inquiryBtn a:hover {
cursor: pointer;
position: relative;
top: 1px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.inquiry-Wrap p.inquiryText {
margin-bottom: 20px;
font-size: 12px;
}
.inquiry-Wrap .inquiryBtn {
text-align: center;
}
.inquiry-Wrap .inquiryBtn a {
box-sizing: border-box;
display: block;
width: 100%;
padding: 25px 15px;
font-size: 16px;
-webkit-appearance: none;
}
}
/* -------------------------------------
◎大タイトルとテキスト
------------------------------------- */
.textSetB-Wrap {
}
.textSetB-Wrap h2 font{
z-index: 1;
display: inline-block;
padding: 0 20px;
}
.textSetB-Wrap p{
margin-top: 10px;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
}
/* -------------------------------------
◎小タイトルとテキスト
------------------------------------- */
.textSetS-Wrap {
}
article .article-body .block-inner .textSetS-Wrap h2,
.textSetS-Wrap h2{
margin: 30px 0 20px;
padding: 0 0 10px;
font-size: 18px;
line-height: 1.3;
color: #061834;
border-bottom: 1px solid #061834;
text-align:left;
}
article .article-body .block-inner .textSetS-Wrap h2:before,
.textSetS-Wrap h2:before{
border-top:none;
}
article .article-body .block-inner .textSetS-Wrap h2:after,
.textSetS-Wrap h2:after{
border-top:none;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
}
/* -------------------------------------
◎電話でお問合せ
------------------------------------- */
.numberTel-Wrap {
}
article .article-body .block-inner .numberTel-Wrap h2,
.numberTel-Wrap h2{
margin: 30px 0 20px;
padding: 0 0 10px;
font-size: 18px;
line-height: 1.3;
color: #061834;
border-bottom: 1px solid #061834;
text-align:left;
}
article .article-body .block-inner .numberTel-Wrap h2:before,
.numberTel-Wrap h2:before{
border-top:none;
}
article .article-body .block-inner .numberTel-Wrap h2:after,
.numberTel-Wrap h2:after{
border-top:none;
}
.telIn dt {
display:inline-block;
margin-right: 10px;
}
.telIn dd {
display:inline-block;
}
.telIn dl dd strong {
font-size: 24px;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.telIn dl dd p {
display: block;
}
}
/* -------------------------------------
◎店舗情報
------------------------------------- */
.shopinfo-Wrap{
}
.shopinfo-Wrap .mapTextIn{
overflow: hidden;
}
.shopinfo-Wrap .mapTextIn table {
  width: 100%;
  border-top: 1px solid #061834;
}
.shopinfo-Wrap.Row1 .mapTextIn table {
  margin-bottom: 50px;
}
.shopinfo-Wrap .mapTextIn table tr {
  line-height: 1.4;
  border-bottom: 1px solid #061834;
}
.shopinfo-Wrap .mapTextIn table th {
  width: 35%;
  padding: 15px 0;
  font-weight: 500;
  text-align: left;
  color: #006;
}
.shopinfo-Wrap.Row1 .mapTextIn table th {
    width: 18%;
    min-width: 142px;
}
.shopinfo-Wrap .mapTextIn table td {
  padding: 15px 0;
}
.shopinfo-Wrap.Lside .mapIn{
    float: right;
    margin-left: 50px;
}
.shopinfo-Wrap.Rside .mapIn{
    float: left;
    margin-right: 50px;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
#contents article .article-body .shopinfo-Wrap h2{
margin: 0 0 15px;		
}
.shopinfo-Wrap .mapTextIn{
width: 100%;
float:none;
margin-bottom:15px;
}
.shopinfo-Wrap .mapTextIn table {
margin-bottom: 0;
border-top: none;
}
.shopinfo-Wrap.Row1 .mapTextIn table {
margin-bottom:15px;
}
.shopinfo-Wrap.Row1 .mapTextIn table th {
width: 35%;
min-width: inherit;
}
.shopinfo-Wrap.Lside .mapIn,
.shopinfo-Wrap.Rside .mapIn{
float: none;
margin: 0 auto 15px;
text-align: center;
}
}
/* -------------------------------------
◎お問い合わせフォーム
------------------------------------- */
.inquryform-Wrap{
}
.inquryform-Wrap h2,
article .article-body .inquryform-Wrap h2{
margin: 30px 0 20px;
padding: 0 0 10px;
font-size: 18px;
line-height: 1.3;
color: #061834;
border-bottom: 1px solid #061834;
text-align:left;
}
.inquryform-Wrap h2:before,
article .article-body .inquryform-Wrap h2:before{
content: "";
position: inherit;
margin-left: 0;
border-top: none;
}
.inquryform-Wrap h2:after,
article .article-body .inquryform-Wrap h2:after{
content: "";
position: inherit;
margin-left: 0;
border-top: none;
}
.inquryform-Wrap p{
margin: 0 0 15px;
}
.inquryform-Wrap .inquryTable {
width: 100%;
margin-bottom: 15px;
}
.inquryform-Wrap .inquryTable th,
#contents article .article-body .inquryTable th{
width: 180px;
padding: 0 15px 13px 0;
vertical-align: top;
background: none;
text-align: left;
font-weight: bold;
font-size: 16px;
border-bottom: none;
}
.inquryform-Wrap .inquryTable td,
#contents article .article-body .inquryTable td{
border-bottom: 0;
padding: 0 0 13px 0;
}
.inquryform-Wrap .inquryTable td input[type="text"] {
box-sizing: border-box;
padding: 5px;
width: 50%;
border: 1px solid #bebebe;
}
.inquryform-Wrap .inquryTable td input[type="text"].zipcode {
width: 110px;
}
.inquryform-Wrap .inquryTable td textarea {
box-sizing: border-box;
padding: 5px;
width: 72%;
height: 150px;
border: 1px solid #bebebe;
}
.inquryform-Wrap .inquiryBtn {
text-align: center;
}
.inquryform-Wrap .inquiryBtn input[type="button"],
.inquryform-Wrap .inquiryBtn a {
box-sizing: border-box;
width: 280px;
padding: 15px 5px;
border: 0;
color: #006;
background: white;
border: 1px solid #061834;
border-radius: 0;
font-size: 20px;
font-weight: bold;
-webkit-appearance: none;
cursor: pointer;
transition: all 0.8s ease;
}
.inquryform-Wrap .inquiryBtn input[type="button"]:hover,
.inquryform-Wrap .inquiryBtn a:hover {
color: white;
background: #061834;
}
.inquryform-Wrap table th span {
display: inline-block;
font-weight: bold;
line-height: 1.4;
}
.inquryform-Wrap table.inquryTable th font.required {
margin-left: 7px;
padding: 2px 3px;
background: #e41b1b;
color: #fff;
font-size: 12px;
font-weight: 500;
text-decoration: none;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.inquryform-Wrap table.inquryTable {
width: 100%;
margin-bottom: 5px;
}
.inquryform-Wrap table.inquryTable th,
#contents article .article-body .inquryform-Wrap table.inquryTable th{
display: block;
width: auto;
padding: 0;
vertical-align: top;
background: none;
border: 0;
padding-bottom: 8px;
}
.inquryform-Wrap table.inquryTable td,
#contents article .article-body .inquryTable td{
border-bottom: 0;
display: block;
padding: 0 0 17px;
}
.inquryform-Wrap table.inquryTable td input[type="text"] {
box-sizing: border-box;
width: 100%;
}
.inquryform-Wrap .inquiryBtn input[type="button"],
.inquryform-Wrap .inquiryBtn a {
box-sizing: border-box;
display: block;
width: 100%;
padding: 25px 15px;
font-size: 20px;
-webkit-appearance: none;
}
.inquryform-Wrap table th span {
display: inline-block;
font-weight: bold;
font-size: 16px;
line-height: 1.4;
}
.inquryform-Wrap .inquryTable td textarea {
width: 100%;
}
}
/* -------------------------------------
◎スタッフ
------------------------------------- */
.staff-Wrap{
}
.staff-Wrap .staffInWrap{
margin-bottom: -30px;
}
.staff-Wrap.Row2 .staffInWrap{
margin-left: -16px;
}
.staff-Wrap.Row3 .staffInWrap{
margin-left: -37px;
}
.staff-Wrap.Row4 .staffInWrap{
margin-left: -30px;
}
.staff-Wrap.Row5 .staffInWrap{
margin-left: -12px;
}
.staff-Wrap .staffInWrap:after{
content: "";
display: block;
clear: both;
}
.staff-Wrap li{
box-sizing: border-box;
float: left;
margin: 0 0 45px;
}
.staff-Wrap.Row2 li{
width: 48%;
padding-left: 50px;
}
.staff-Wrap.Row3 li{
width: 33.3%;
padding-left: 40px;
}
.staff-Wrap.Row4 li{
width: 25%;
padding-left: 45px;
}
.staff-Wrap.Row5 li{
width: 20%;
padding-left: 18px;
margin: 0 0 25px;
}
.staff-Wrap.Row2 li:nth-child(2n+1){clear: both;}
.staff-Wrap.Row3 li:nth-child(3n+1){clear: both;}
.staff-Wrap.Row4 li:nth-child(4n+1){clear: both;}
.staff-Wrap.Row5 li:nth-child(5n+1){clear: both;}
.staff-Wrap li img{
margin: 0 auto;
}
.staff-Wrap.Row2 li img{width: 418px;}
.staff-Wrap.Row3 li img{width: 292px;}
.staff-Wrap.Row4 li img{width: 205px;}
.staff-Wrap.Row5 li img{width: 176px;}
.staff-Wrap li p{
text-align: left;
margin-top: 10px;
line-height: 1.4;
margin-bottom: 0em;
}
.staff-Wrap p.nameIn {
border-bottom: 1px solid #061834;
padding: 10px 0;
font-weight: bold;
line-height: 1.3em;
margin-top: 0;
}
.staff-Wrap p.nameIn span {
display: block;
font-size: 14px;
padding-bottom: 0;
}
.staff-Wrap p.commentIn {
line-height: 1.4;
margin-bottom: 0em;
color: #061834;
text-align: justify;
text-justify: inter-ideograph;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.staff-Wrap.Row2 .staffInWrap,
.staff-Wrap.Row3 .staffInWrap,
.staff-Wrap.Row4 .staffInWrap,
.staff-Wrap.Row5 .staffInWrap{
margin: 0 0 -30px -10px;
}
.staff-Wrap li:nth-child(even){float: right;}
.staff-Wrap.Row2 li,
.staff-Wrap.Row3 li,
.staff-Wrap.Row4 li,
.staff-Wrap.Row5 li{
width: 50%;
margin: 0 0 30px;
padding-left: 10px;
text-align: center;
}
.staff-Wrap li p{font-size: 12px;}
.staff-Wrap li:nth-child(2n+1){clear: both;}
.staff-Wrap.Row3 li:nth-child(3n+1),
.staff-Wrap.Row4 li:nth-child(4n+1),
.staff-Wrap.Row5 li:nth-child(5n+1){
clear: none;
}
.staff-Wrap.Row3 li:nth-child(2n+1),
.staff-Wrap.Row4 li:nth-child(2n+1),
.staff-Wrap.Row5 li:nth-child(2n+1){
clear: both;
}
.staff-Wrap.Row2 li img,
.staff-Wrap.Row3 li img,
.staff-Wrap.Row4 li img,
.staff-Wrap.Row5 li img{
width: 100%;
max-width: 205px;
}
.staff-Wrap p.nameIn {
font-size: 16px;
text-align:center;
}
.staff-Wrap p.nameIn span {
display: block;
font-size: 14px;
padding-bottom: 0;
}
.staff-Wrap p.commentIn {
font-size: 14px;
}
}
/* -------------------------------------
◎店内写真
------------------------------------- */
.shopPic-Wrap .shopPicIn {
/*overflow: hidden;*/
min-height: 310px;
}
.shopPic-Wrap.Rside .imageIn {
float: right;
margin-left: 50px;
}
.shopPic-Wrap.Lside .imageIn {
float: left;
margin-right: 50px;
}
@media only screen and (max-width: 1020px) and (min-width: 641px){
.shopPic-Wrap.Lside .imageIn {
width: 60%;
margin-right: 20px;
}
.shopPic-Wrap.Rside .imageIn {
width: 60%;
margin-left: 20px;
}
}
.shopPic-Wrap.Row3 .imagelistIn {
margin: 45px 0 -45px -45px;
}
.shopPic-Wrap.Row4 .imagelistIn {
margin: 45px 0 -45px -31px;
}
.shopPic-Wrap.Row5 .imagelistIn {
margin: 45px 0 -45px -20px;
}
.shopPic-Wrap .imagelistIn:after {
content: "";
display: block;
clear: both;
}
.shopPic-Wrap .imagelistIn img {
float: left;
margin-bottom: 45px;
}
.shopPic-Wrap.Row3 .imagelistIn img {
width: 290px;
margin-left: 45px;
}
.shopPic-Wrap.Row4 .imagelistIn img {
width: 216px;
margin-left: 31px;
}
.shopPic-Wrap.Row5 .imagelistIn img {
width: 176px;
margin-left: 20px;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.shopPic-Wrap .imageIn {
width: 100%;
margin-bottom: 20px;
}
.shopPic-Wrap.Row3 .imagelistIn,
.shopPic-Wrap.Row4 .imagelistIn,
.shopPic-Wrap.Row5 .imagelistIn{
margin: 20px 0 -10px -10px;
}
.shopPic-Wrap.Row3 .imagelistIn img,
.shopPic-Wrap.Row4 .imagelistIn img,
.shopPic-Wrap.Row5 .imagelistIn img {
margin: 0 0 10px 10px;
width: 46%;
}
.shopPic-Wrap .shopPicIn {
min-height: 0;
}
}
/* -------------------------------------
◎イベント情報
------------------------------------- */
.event-Wrap .newsboxIn{
display: block;
background: #f2f2f2;
padding: 30px 30px 20px;
margin-bottom: 30px;
overflow: auto;
}
.event-Wrap.LR:first-child .newsboxIn{
}
.event-Wrap .Lside:after,
.event-Wrap .Rside:after {
content: "";
display: block;
clear: both;
}
.event-Wrap.Mutual li > div:nth-child(n+2){
margin-top: 10px;
}
.event-Wrap.Rside .imageIn,
.event-Wrap.Mutual .Rside .imageIn{
float: right;
margin: 0 0 0 30px;
}
.event-Wrap.Lside .imageIn,
.event-Wrap.Mutual .Lside .imageIn{
float: left;
margin: 0 30px 0 0;
}
.event-Wrap .imageIn img{
display:block;
margin-bottom: 10px;
}
.event-Wrap .textIn{
width: auto;
overflow: hidden;
}
.event-Wrap .textIn p.titleIn{
font-weight: bold;
font-size: 120%;
vertical-align: middle;
margin-bottom: 1em;
}
.event-Wrap .textIn p.titleIn:first-child{
margin-top:0;
}
.event-Wrap .textIn p.dateIn {
background: #7899c5;
padding: 0px 5px;
display: block;
float: left;
color: #fff;
margin: 3px 10px 0 0;
}
.event-Wrap .textIn p.leadIn{
background-image: linear-gradient( rgba(0,0,0,.1) .1em, transparent .1em );
background-size: auto 2em;
text-align: justify;
margin-bottom: 1em;
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.event-Wrap .newsboxIn{
text-align: center;
padding: 20px;
}
.event-Wrap .imageIn{
margin-bottom: 5px;
max-width: 100%;
}
.event-Wrap.Lside .imageIn,
.event-Wrap.Rside .imageIn,
.event-Wrap.Mutual .Lside .imageIn,
.event-Wrap.Mutual .Rside .imageIn{
float: none;
margin: 0;
}
.event-Wrap .imageIn img {
margin: 0 auto 20px;
}
.event-Wrap .textIn img {
display: block;
width: 50%;
}
.event-Wrap .textIn{
margin-right: 0px;
text-align: left;
}
.event-Wrap .textIn p.titleIn{
font-size: 110%;
margin: 5px 0 10px;
}
.event-Wrap .textIn p.dateIn {
float: none;
display: inline-block;
}
.event-Wrap .textIn p.leadIn{
background-size: auto 1.6em;
line-height: 1.6em;
margin-bottom: 0;
font-size: 14px;
}
}
/* -------------------------------------
◎カレンダー
------------------------------------- */
.calendar-Wrap .calSpace {
    display: flex;
}
.calendar-Wrap .calendarIn div {
    max-width: 100%;
    width: auto;
    margin: 5px 15px 5px 15px;
}
.calendar-Wrap.Row3 .calendarIn div {
    margin: 5px 10px;
}
.calendar-Wrap .calendarInfo {
    float: left;
    padding-left: 30px;
    padding-top: 10px;
	color:#444;
}
.calendar-Wrap .calendarInfo ul{
    margin-bottom: 1em;
}
.calendarInfo span {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    width: 38px;
    height: 18px;
    border: 1px solid #ccc;
}
.calendar-Wrap .calendarIn:after,
.calendar-Wrap .calSpace:after {
    content: "";
    display: block;
    clear: both;
}
.calendar-Wrap table.calendar {
    margin-bottom: 1em;
}
/* --カレンダー
calendar-style.cssコピー-- */
table.calendar {
    text-align:center;
    border-spacing: 1.5px;	/* セルの間隔       */
	border-collapse: separate;
	width :100%;			/* カレンダーの横幅 */
	height:320px;			/* カレンダーの高さ */
	font-weight:bold;		/* 全体の           */
	font-size:18px;			/*    フォント指定  */
}
table.calendar thead th {	/* oooo年/oo月の表示部分 */
    background: #ffffff;
    color:#4444;
	height:40px;
	font-size:22px;
border: 1px solid #ccc;
}
table.calendar th {
width:60px;			/* 曜日表示部分 */
    background: #ffffff;
    color:#4444;
border: 1px solid #ccc;
}
.calendar-Wrap.Row3 table.calendar th {
width:39px;	　/*3列バージョンのマスの幅変更*/
}
table.calendar th.sun {		/* 曜日表示部分（日曜） */
    background: #ffffff;
    color:#f72121;
	font-size:18px;
}
table.calendar th.sat {		/* 曜日表示部分（土曜） */
    background: #ffffff;
    color:#249bf3;
}
table.calendar td {			/* 日付日表示部分 */
    background:#ffffff;
vertical-align:middle;
border: 1px solid #ccc;
}
table.calendar td.sun {		/* 日付日表示部分（日曜） */
    background: #ffffff;
	font-family:"メイリオ";
	font-style:bold;
    color:#f72121;
}
table.calendar td.sat {		/* 日付日表示部分（土曜） */
    background: #ffffff;
	font-family:"Arial";
	font-style:bold;
    color:#249bf3;
}
table.calendar td.nodat {	/* 日付のないセル */
	font-style:normal;
    background: #eeeeee;
}
table.calendar td.sun.nodat {	/* 日付のない日曜日のセル */
	font-style:normal;
    background: #fdf1f1;
}
table.calendar td.sat.nodat {	/* 日付のない土曜日のセル */
	font-style:normal;
    background: #e0f1f5;
}
table.calendar td.nodat:after {	/* 日付のないセルの文字 */
	font-family:"ＭＳ　ゴシック";
	font-style:normal;
	content:"-";
}
table.calendar td.sp0 {		/* 祝日 */
    background:#ffffff;
	font-style:bold;
    color:#f72121;
}
table.calendar td.sp1 {		/* 編集でセットする特定日１（休業日など） */
    background: white;
}
table.calendar td.sp2 {		/* 編集でセットする特定日２ */
    background: #f0fff0;
}
table.calendar td.sp3 {		/* 編集でセットする特定日３ */
    background: #f7f7bc;
}
table.calendar td.sp4 {		/* 編集でセットする特定日４ */
    background: greenyellow;
}
table.calendar td.sp5 {		/* 編集でセットする特定日５ */
    background: yellow;
}
table.calendar td.today {	/* 今日 */
    font-weight:800;
    color:#4444;
	font-size:22px;
    background: #f9edd3;
}

div.calendarIn div {
	/* カレンダーが入るdiv クラス名変更.calendar→calendarIn */
	margin: 10px 15px 10px 15px;
	float:left;
    background: #ffffff;
/*border: 1px solid #ccc;*/
}
/*------------
スマホ用スタイル
------------*/
@media only screen and (max-width: 640px) {
.calendar-Wrap.Row3 .calendarIn div {
    margin: 5px 15px;
}
.calendar-Wrap.Row3 table.calendar th {
width:60px;	　/*3列バージョンのマスの幅変更*/
}
}