/*
Created : Letters51
Ver     : 0.0.1
Name    : mitoPiano Style
*/
/* color */
/* mix in */
.disBlock {
  display: block;
}

/* common */
.square {
  position: relative;
  width: 100%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.sfTelNum {
  display: none;
}

hr {
  border-top: 1px dashed #bbb;
  border-bottom: 1px dashed #fff;
}

.facebtn {
  width: 35px;
  height: 35px;
  display: block;
  background-color: #fff;
}

.facebtn i {
  line-height: 35px;
}

.fbold {
  font-weight: bold;
  margin-bottom: 5px;
  padding: 10px;
  background-color: #534741;
  color: #fff;
  border-radius: 5px;
}

.mt150 {
  margin-top: 130px !important;
}

.pb20 {
  display: block;
  padding-bottom: 20px !important;
}

a.stBtn {
  display: block;
  width: 50%;
  background-color: #AADEE3;
  line-height: 1;
  padding: 10px;
  color: #fff;
  margin: 20px auto;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.75);
  transition: all 0.35s;
  position: relative;
  top: 0;
}

a.stBtn:hover {
  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.75);
  transition: all 0.35s;
  top: 2px;
}

a.stBtn:active {
  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.75);
  top: 3px;
  transition: all 0.01s;
}

a[href^="tel:"] {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

* {
  word-wrap: break-word;
  word-break: break-all;
}

.m01,
.m02,
.m03,
.m04,
.m05,
.m06,
.m07 {
  background-repeat: no-repeat;
  background-size: 7%;
  background-position: 20px;
}

.m01 {
  background-image: url("https://www.mito-piano.com/img/common/m01.png");
}

.m02 {
  background-image: url("https://www.mito-piano.com/img/common/m02.png");
}

.m03 {
  background-image: url("https://www.mito-piano.com/img/common/m03.png");
}

.m04 {
  background-image: url("https://www.mito-piano.com/img/common/m04.png");
}

.m05 {
  background-image: url("https://www.mito-piano.com/img/common/m05.png");
}

.m06 {
  background-image: url("https://www.mito-piano.com/img/common/m06.png");
}

.m07 {
  background-image: url("https://www.mito-piano.com/img/common/m07.png");
}

th {
  white-space: nowrap;
}

body,
html {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-size: 15px;
  color: #534741;
  background-image: url('https://www.mito-piano.com/img/common/bodyBack.png');
}

#ready {
  visibility: hidden;
}

.btn01 {
  display: block;
  font-size: 0.8em;
  width: 50%;
  background-color: #fff !important;
  color: #998675;
  border-radius: 5px;
  border: 1px solid #998675;
  text-decoration: none;
}

.btn01 a {
  display: block;
  text-decoration: none;
}

.btn01:hover {
  background-color: #998675 !important;
}

.btn01:hover a {
  color: #fff !important;
}

.pcHide {
  display: none;
}

#breadCrumb {
  width: 95%;
  margin: 20px auto 0;
}

a.breadHome {
  display: inline-block;
  border-radius: 5px;
  padding: 8px;
  background-color: #998675;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
}

a.breadHome:hover {
  background-color: #fff;
  border: 1px solid #998675;
  padding: 7px;
  color: #998675;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #998675;
  display: inline-block;
}

.row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.bbSolidlightBrown {
  border-bottom: 1px solid #998675;
}

.bigBold {
  font-size: 40px;
  font-family: 'Poiret One', cursive;
}

/* Global Part */
#wholeWrapper {
  width: 100%;
}

#leftPianoPart {
  float: left;
  width: 20%;
  position: fixed;
  z-index: 999;
  height: 100%;
  overflow: auto;
  background-color: #000;
  border-right: 1px solid #000;
  background-size: 150%;
  background-position: right;
  -webkit-box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.4);
}

#rightContePart {
  float: right;
  width: 80%;
  height: 100%;
  position: relative;
}

#topTelNumber {
  text-align: center;
  padding: 10px 0;
  background-color: #fff;
  position: fixed;
  height: 30px;
  width: 100%;
  border-bottom: 1px solid #AADEE3;
  background-image: url('https://www.mito-piano.com/img/common/mintSkewBack5.png');
  background-size: 5px;
  background-repeat: repeat;
}

#topTelNumber span {
  color: #534741;
  display: inline-block;
  position: relative;
  font-size: 30px;
  line-height: 30px;
  font-weight: bold;
  padding-left: 45px;
  font-family: 'Poiret One', cursive;
}

#topTelNumber span::before {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url('https://www.mito-piano.com/img/common/telePhoneIcon.png');
  background-repeat: none;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.dottborder {
  /*  background: url('https://www.mito-piano.com/img/common/backDott.png') repeat-x bottom center; */
}

/*#topTelNumber::after {
content: '';
display: block;
background: url('img/common/backdott.png') repeat-x bottom center;
height: 20px;
}*/
#topLogo {
  text-align: center;
  /* background-image: url('img/common/sheetLines.png'); */
  background-repeat: repeat-x;
  background-position: center;
  height: 130px;
  width: 100%;
  position: relative;
}

#topLogo img {
  width: 80%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#logoNavArea {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 24px;
}

nav {
  display: block;
}

nav ul {
  margin: 0 auto;
  text-align: center;
}

nav ul li {
  display: block;
  width: 70%;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  /*background-image: url('img/common/mintSkewBack5.png');*/
  background-size: 4px;
  height: auto;
  position: relative;
  /*background-image: url('https://www.mito-piano.com/img/common/mintSkewBack.png');*/
  background-color: unset;
  background-repeat: repeat;
  background-size: 5px;
  margin: 0 auto;
  border-bottom: 1px #222 dotted;
}

nav ul li a {
  display: block;
  width: 100%;
  /*height: 100%;*/
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  /*-webkit-transition: 0.3s ease-in-out;*/
  /*transition: 0.3s ease-in-out;*/
  font-size: 0.8em;
  padding: 10px 0;
  border-radius: 5px;
  overflow: hidden;
}

nav ul li a:hover {
  color: #998675;
  text-decoration: none;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

li.current a {
  color: #534741;
  font-weight: bold;
  background-color: #fff;
}

#spMenuOpner {
  display: none;
}

#leftBottomPart {
  width: 80%;
  height: auto;
  /*background-image: url('img/common/verticalPiano.jpg');*/
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  margin: 0 auto;
  padding-bottom: 120px;
}

.flex_gallery {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.flex_gallery li {
  flex: 1 1 auto;
  max-width: 46%;
margin: 2%;
}

.flex_gallery li img {
width: 100%;
}

li.flex_gallery__full {
  width: 100%;
  max-width: 100%;
}

.page_read {
  margin: 2rem 0;
}
/* slider */
#sliderWrapper {
  width: 100%;
  height: auto;
  margin: 0;
  background-color: #998675;
  /*display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;*/
  border-bottom: 1px solid #534741;
}

#sliderPart {
  width: 100%;
}

#sliderPart ul {
  width: 100%;
  height: 100%;
}

#sliderPart ul li {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}

img.slidePhoto {
  width: 100%;
  height: auto;
  opacity: 1 !important;
  top: 0;
  bottom: 0;
  margin: auto;
}

#textPart {
  width: 100%;
  color: #fff;
  text-align: center;
  position: relative;
  /*display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: left;
  -webkit-justify-content: left;*/
}

#textPart #inTextPart {
  display: inline-block;
  margin: auto;
  padding: 30px 0;
}

#textPart #inTextPart p {
  font-size: 26px;
  margin: 0 0 10px;
  font-family: 'Poiret One', cursive;
  color: #fff;
  font-weight: bold;
}

#textPart #inTextPart h1 {
  font-weight: lighter;
  font-size: 0.9em;
  line-height: 1.7;
  color: #fff;
}

/* left Side Bar */
.rightElm {
  text-align: center;
  height: auto;
  position: relative;
  width: 70%;
  border-bottom: 1px #534741 dotted;
  margin: 0 auto;
}

.rightElm .sideList {
  font-size: 1em;
  font-weight: bold;
  font-family: 'Poiret One', cursive;
  width: 95%;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 15px 0;
  color: #fff;
}

.rightElm .sideList a {
  color: #fff;
  text-decoration: none;
}

.address {
  font-size: 0.8em !important;
}

.rightElm .sideList i {
  color: #fff !important;
  display: block;
}

/* indexConte */
#middleWrapper {
  padding-bottom: 60px;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  padding: 0 3%;
  box-sizing: border-box;
}

.flexMidBox {
  -webkit-flex-direction: row;
  /* Safari */
  flex-direction: row;
  text-align: center;
  width: 30%;
}

.titleText h2 {
  color: #000;
}

div[class^='flexMidHeader'],
div[class^='titleText'] {
  position: relative;
  text-align: center;
  display: inline-block;
  padding-top: 80px;
  width: 100%;
  height: 50px;
  margin: 50px 0 30px;
  background-color: #fff;
}

div[class^='flexMidHeader'] h1,
div[class^='titleText'] h1,
div[class^='flexMidHeader'] h2,
div[class^='titleText'] h2,
div[class^='flexMidHeader'] h3,
div[class^='titleText'] h3 {
  width: 100%;
  text-align: center;
  position: relative;
  font-size: 20px;
  color: #534741;
}

div[class^='flexMidHeader'] span,
div[class^='titleText'] span {
  display: inline-block;
  text-align: center;
  color: #534741;
  font-size: 10px;
  font-family: 'Poiret One', cursive;
}

div[class^='flexMidHeader'] {
  border-radius: 10px;
  border: 1px solid #ccc;
}

.flexMidHeader::before {
  content: '';
  background-image: url('img/common/pianoTitleIcon.png');
  background-repeat: no-repeat;
  width: 140px;
  height: 50px;
  position: absolute;
  top: 18px;
  left: 50%;
  margin-left: -70px;
  background-size: 100%;
}

.flexMidHeader_fb::before {
  content: '';
  background-image: url('img/common/facebkIcon.png');
  background-repeat: no-repeat;
  width: 140px;
  height: 50px;
  position: absolute;
  top: 18px;
  left: 50%;
  margin-left: -70px;
  background-size: 100%;
}

.titleText::before {
  content: '';
  background-image: url('img/common/pianoTitleIconWhite.png');
  background-repeat: no-repeat;
  width: 140px;
  height: 50px;
  position: absolute;
  top: 18px;
  left: 50%;
  margin-left: -70px;
  background-size: 100%;
}

.flexMidHeader_fb h2,
.titleText_fb h2,
.flexMidHeader_fb h3,
.titleText_fb h3 {
  color:  !important;
}

.titleText_fb::before {
  content: '';
  background-image: url('img/common/facebkIcon.png');
  background-repeat: no-repeat;
  width: 140px;
  height: 50px;
  position: absolute;
  top: 18px;
  left: 50%;
  margin-left: -70px;
  background-size: 100%;
}

.flexMidBody {
  margin: 30px 0;
  width: 100%;
  max-width: 840px;
}

.flexMidBody ul {
  display: block;
}

.flexMidBody ul li {
  width: 26%;
  display: block;
  float: left;
  margin: 0 0 0 7.3%;
}

.flexMidBody ul li figure {
  -webkit-flex-direction: row;
  /* Safari */
  flex-direction: row;
  margin: 0 0 30px;
  width: 100%;
  overflow: hidden;
}

.flexMidBody ul li figure img.landscape {
  border-radius: 5px;
  position: absolute;
  min-width: 100%;
  max-width: none;
  max-height: 100%;
}

.flexMidBody ul li figure img {
  border-radius: 5px;
  position: absolute;
  max-width: 100%;
  height: auto;
  width: auto;
}


.flexMidBody ul li div {
  width: 100%;
}

.flexMidBody ul li table {
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0 5px;
  width: 100%;
  table-layout: fixed;
}

.flexMidBody ul li table th {
  font-weight: bold;
  padding: 5px;
  border-bottom: 1px dotted #ccc;
}

.flexMidBody ul li table td {
  border-bottom: 1px dotted #ccc;
  text-align: right;
}

.flexMidPage {
  margin: 30px 0;
  width: 100%;
  max-width: 840px;
}

.flexMidPage ul#fb_posts {
  display: block;
}

.flexMidPage ul#fb_posts li {
  width: 100%;
  display: block;
  float: left;
  margin: 0 0 30px;
}

.flexMidPage ul#fb_posts li figure {
  width: 30% !important;
  float: left;
}

.flexMidPage ul#fb_posts li p.fb_mes {
  width: 65% !important;
  float: right;
}

ul#fb_posts li {
  display: block;
  height: auto;
  float: left;
}

ul#fb_posts li figure.fb_pic {
  display: block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin: 0 auto 30px;
  -webkit-box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.75);
  position: relative;
  top: 0;
  transition: all 0.35s;
}

ul#fb_posts li figure.fb_pic:hover {
  top: 3px;
  -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.75);
}

ul#fb_posts li figure.fb_pic:active {
  top: 5px;
  -webkit-box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.75);
}

ul#fb_posts li figure.fb_pic img {
  display: block;
  width: 100%;
}

ul#fb_posts li p.fb_mes {
  font-size: 0.9em;
  width: 100%;
  line-height: 1.3;
  text-align: left;
  min-height: 77px;
}

ul#fb_posts li p.fb_mes span.fb_created_time {
  display: block;
  background-color: #AADEE3;
  color: #fff;
  padding: 5px;
  margin: 0 0 5px;
  font-size: 0.8em;
  border-radius: 5px;
  text-align: center;
  font-family: 'Poiret One', cursive;
  font-weight: bold;
}

ul#serviceList {
  width: 100%;
  margin-left: 5%;
}

ul#serviceList li {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  display: block;
  margin: 25px 0 25px 10%;
  background-color: #998675;
  color: #fff;
  width: 30%;
  padding: 8px;
  border-radius: 5px;
  text-align: center;
}

.frontConteWrapper {
  width: 100%;
  max-width: 1200px;
  height: 500px;
  margin: 50px auto;
  display: flex;
  display: -webkit-flex;
  padding: 0 3%;
  box-sizing: border-box;
}

.sectionTitle {
  width: 30%;
  margin-left: 0;
  /* background-color: @black;　*/
  color: #fff;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: left;
  -webkit-justify-content: left;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
}

div[class^='sectionConte'] {
  width: 70%;
}

.sectionConteLeft {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: "left";
  -webkit-justify-content: "left";
}

.sectionConteRight {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: right;
  -webkit-justify-content: right;
}

.sectionConteCenter {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

/* pages */
#pageConteWrapper {
  margin: 30px 0;
}

#pageTitleWrapper {
  max-height: 300px;
  border-top: 2px solid #998675;
  border-bottom: 2px solid #534741;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

#pageTitleWrapper img {
  width: 100%;
}

#pageTitleWrapper h2 {
  color: #fff;
  display: block;
  font-size: 20px;
}

.flexMidBox_pages {
  -webkit-flex-direction: row;
  /* Safari */
  flex-direction: row;
  text-align: center;
  width: 65%;
}

ul#serviceDetail {
  margin: 30px 0;
}

ul#serviceDetail li {
  margin: 10px 0;
}

/* service */
h3.galTitle {
  margin: 20px 0;
  text-decoration: underline;
}

.galSection {
  margin-bottom: 90px;
}

.serGal {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-between;
}

.serGal a {
  display: block;
  width: 19%;
  /* height: 8vw; */
  height: 1px;
  overflow: hidden;
  margin: 0.5%;
  position: relative;
}

.serGal img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.serGal img.verticalImg {
  height: auto;
  width: 100%;
}

@supports (-ms-ime-align:auto) {
  .serGal a {
    margin: 0.5%;
    margin-bottom: 10px;
  }
}

.serviceBody {
  padding: 20px 0 40px;
}

.serviceText {
  width: 48%;
  margin: 0 1%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: "left";
  -webkit-justify-content: "left";
  height: auto;
  float: right;
}

.serviceText p {
  width: 100%;
  text-align: left;
}

figure.serviceImg {
  display: block;
  float: left;
  width: 48%;
  margin: 0 1%;
}

figure.serviceImg img {
  width: 100%;
}

/* about */
table.contactInfo a {
  text-decoration: none;
}

table.contactInfo,
table.productInfo,
table.storeInfo {
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 10px 20px;
  margin: 0px auto;
}

table.contactInfo th,
table.productInfo th,
table.storeInfo th {
  color: #998675;
}

table.contactInfo td,
table.productInfo td,
table.storeInfo td,
table.contactInfo th,
table.productInfo th,
table.storeInfo th {
  text-align: left;
  padding: 0 10px;
}

.storeSectionWrapper {
  margin: 0 0 50px;
  padding: 0 0 30px;
}

.storeSectionWrapper img {
  width: 100%;
}

.storeSectionWrapper h3 {
  font-size: 1.3em;
  line-height: 1.8;
}

/* product */
.eachProWrapper {
  margin: 30px 0 50px;
}

figure.productPhoto {
  width: 45%;
  float: left;
  margin: 0 2.5% 0 0;
}

figure.productPhoto img {
  width: 100%;
}

table.productInfo {
  float: left;
  width: 45%;
  margin: 0 2.5%;
}

/* contact */
#contactWrapper {
  margin: 30px 0 50px;
}

#contactWrapper p {
  margin: 30px 0;
}

/* maker */
#makerWrapper {
  margin: 30px 0;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

.eachMaker {
  width: 30.3%;
  margin: 0 1.5% 30px;
}

.eachMaker figure {
  border-radius: 10px;
  display: block;
  overflow: hidden;
}

.eachMaker img {
  width: 100%;
}

/* footer */
#footerWrapper {
  background-color: #534741;
  margin-top: 0;
  padding: 30px 0;
  width: 100%;
}

#backToTop {
  text-align: center;
}

#backToTop button {
  display: inline-block;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #fff;
}

#footerLogo {
  text-align: center;
  margin: 30px 0;
}

#footerLogo img {
  width: 200px;
}

#footerAddress {
  text-align: center;
}

#footerAddress p {
  margin: 20px 0;
  font-size: 10px;
  color: #fff;
}

#copyWrapper {
  text-align: center;
  font-size: 10px;
  margin: 10px 0;
}

/* animation css */
button.openService {
  font-size: 16px;
  background-color: #998675;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  /* transition: 0.4s; */
  /*transition-duration: 1.5s;*/
  /* transition-timing-function: cubic-bezier(0.9, 1.5, 0.9, 1); */
  border-radius: 5px;
}

button.openService h3 {
  transition-duration: 0.5s;
  display: inline-block;
}

button.openService.active,
button.openService:hover {
  background-color: #333;
}

button.openService.active h3,
button.openService:hover h3 {
  color: #fff;
}

.serviceExpla {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

button.openService::after {
  content: '+';
  /* Unicode character for "plus" sign (+) */
  font-size: 21px;
  color: #fff;
  float: right;
  margin-left: 5px;
}

button.openService.active::after {
  content: "-";
  color: #fff;
  /* Unicode character for "minus" sign (-) */
}

/*
    *
    media query
    *
    */
/*@media screen and (max-width: 1200px) and (min-width: 0px) {
    nav {
    ul {
    width: 100%;
  }
}
}*/


.news_section {
	
	gap:0 1rem;
}

@media screen and (max-width: 1000px) and (min-width: 0px) {
.sp-block {
  display: block;
}
}

@media screen and (max-width: 480px) and (min-width: 0px) {
	
  nav ul {
    width: 100%;
  }

  .row-reverse {
    -webkit-flex-direction: row;
    flex-direction: row;
  }

  #globalNavBody {
    /*transition: max-height 0.5s ease-out;*/
    /*max-height: 0;*/
    overflow: hidden;
  }

  nav ul li {
    display: block;
    width: 50%;
    float: left;
    border-radius: 0;
    background: none;
    background-color: #534741;
    border-right: none;
    border-left: none;
    margin: 0;
    border-top: 0;
    border-bottom: 1px solid #998675;
  }

  nav ul li a {
    color: #fff;
    font-weight: normal;
    line-height: 38px;
    width: 100%;
    /*height: 100%;*/
    border-radius: 0;
  }

  nav ul li:nth-child(even) {
    border-left: 1px dotted #998675;
  }

  nav ul li.current a {
    background-image: url('https://www.mito-piano.com/img/common/mintSkewBack.png');
    background-color: unset;
    background-repeat: repeat;
    background-size: 5px;
  }

  #sliderWrapper {
    display: block !important;
    height: auto !important;
    margin: 0 0 50px;
  }

  #sliderPart,
  #textPart,
  .flexMidBox,
  .flexMidBox_pages,
  .sectionConteCenter,
  .sectionTitle,
  div[class^='sectionConte'] {
    width: 100%;
  }

  #inTextPart p {
    font-size: 20px !important;
  }

  #sliderPart li {
    height: auto !important;
    width: 100% !important;
    border-bottom: 2px solid #534741;
  }

  #sliderPart img {
    width: 100%;
    height: auto;
    position: relative;
  }

  #textPart #inTextPart {
    text-align: center;
    margin: 0 auto;
    padding: 20px 0;
    max-width: 80%;
  }

  #spMenuOpner {
    display: block;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    background-color: #998675;
    color: #fff;
    font-family: 'Poiret One', cursive;
    position: relative;
    z-index: 999;
    border-bottom: 2px solid #534741;
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    font-weight: bold;
    display: none;
  }

  #headerWrapper {
    padding: 0;
  }

  #logoNavArea {
    padding-bottom: 0;
  }

  .frontConteWrapper {
    width: 85% !important;
    max-width: inherit;
    margin: 0 auto 40px;
    padding: 0 0 80px;
    height: auto;
    display: block;
  }

  #middleWrapper {
    width: 85% !important;
    max-width: inherit;
    margin: 0 auto;
    padding: 10px 0 30px;
    height: auto;
    display: block;
  }

  .flexMidBody {
    margin: 30px 0 0;
  }

  .flexMidBody ul li {
    width: 100%;
    float: none;
    margin: 0 0 60px;
  }

  .flexMidBody ul li figure {
    text-align: center;
  }

  .flexMidBody ul li figure img {
    width: 50%;
  }

  .flexMidBody ul li:last-child {
    margin: 0;
  }

  ul#serviceList {
    margin-left: 0;
  }

  ul#serviceList li {
    width: 100%;
    margin: 0 0 30px;
  }

  ul#serviceList li:last-child {
    margin: 0;
  }

  ul#fb_posts li figure.fb_pic {
    width: 25%;
    float: left;
  }

  ul#fb_posts li p.fb_mes {
    float: right;
    width: 70%;
  }

  #pageTitleWrapper {
    height: auto;
    border-bottom: 2px solid #534741;
  }

  #breadCrumb {
    width: 90%;
  }

  .flexMidPage ul#fb_posts li {
    float: none;
  }

  .flexMidBox_pages {
    /*background: url('img/common/backDott.png') repeat-x bottom center;*/
    margin: 0 auto 80px;
    height: auto;
    display: block;
  }

  .serviceBody {
    padding: 20px 0 0;
  }

  .serviceText {
    display: block;
  }

  .bigBold {
    font-size: 25px;
  }

  li.current::before {
    background-image: none;
  }

  #topTelNumber span {
    font-size: 20px;
  }

  .storeSectionWrapper img {
    width: 100%;
  }

  #leftPianoPart,
  #rightContePart {
    float: none;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .rightElm {
    display: none;
  }

  nav ul li a {
    padding: 7px 0;
  }

  li.current a {
    background-color: #fff !important;
  }

  .spHide {
    display: none;
  }

  .pcHide {
    display: block;
  }

  #pageTitleWrapper {
    border-top: none;
  }

  #breadCrumb {
    margin: 20px auto !important;
  }

  img.slidePhoto {
    min-width: 0;
    min-height: 0;
  }

  button.openService h3 {
    font-size: 0.75em;
  }

  #leftBottomPart {
    width: 100%;
    background: none;
  }

  #leftPianoPart {
    background-color: #fff;
  }

  #topLogo {
    height: 70px;
    position: fixed;
    background-color: white;
    z-index: 99999;
  }

  #topLogo h1 {
    display: inline;
  }

  #leftBottomPart {
    padding-bottom: 0;
  }

  div[class^='flexMidHeader'],
  div[class^='titleText'] {
    margin: 5px 0;
  }

  figure.productPhoto,
  table.productInfo {
    width: 100%;
    float: none;
  }

  figure.productPhoto {
    margin: 0 0 10px;
  }

  a.topLogo_sf {
    width: 43%;
    text-align: center;
  }

  a.topLogo_sf img {
    width: 90% !important;
  }

  #topLogo a {
    float: left;
    height: 100%;
    position: relative;
    border-bottom: 1px solid #998675;
  }

  #topLogo a.topTel_sf {
    width: 57%;
    text-align: center;
    font-size: 3.7vw !important;
    border: none;
    text-decoration: none;
    line-height: 16px;
    height: 16px;
    margin: 13px 0;
    font-family: 'Poiret One',
      cursive;
    letter-spacing: 1px;
    color: #534741 !important;
    font-weight: bold;
  }

  #topLogo a.topTel_sf i {
    padding-right: 5px !important;
  }

  #topLogo a.topTel_sf:last-child {
    margin: 0 0 13px 0;
  }

  #topLogo span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-family: 'Poiret One', cursive;
    height: 1em;
    font-size: 1.4em;
    color: #534741;
    font-weight: bold;
  }

  nav {
    padding-top: 70px;
  }

  .flexMidBody ul li figure img.landscape {
    border-radius: 5px;
    position: relative;
    max-height: none;
    min-width: 80% !important;
  }

  .flexMidBody ul li figure img {
    border-radius: 5px;
    position: relative;
    width: 80% !important;
  }

  .square:after {

    padding-bottom: 0%;
  }

  table.contactInfo,
  table.productInfo,
  table.storeInfo {

    border-spacing: 0px 20px;

  }

  table.contactInfo th,
  table.productInfo th,
  table.storeInfo th {
    padding: 0;
  }

  .flex_gallery {
    display: block;

  }

  .flex_gallery li {

    max-width: 96%;

  }
}