/*====================================================
	// note overwrite
====================================================*/


.header.miyajiHeader {
  display: none;
}


em {
  font-style: normal;
}

a i {
  width: 6px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: top;
}




.read_more li {
  width: 70%;
  margin: auto;
  padding: .2em 0;
  color: #fff;
  background: #3156a1;
  text-align: center;
  border-radius: 2em;
}



#access {
  background-color: #fff;
}


#access iframe {
  aspect-ratio: 3 / 4;
  display: block;
  height: auto;
  width: 100%;
}

@media print,
screen and (min-width: 1000px) {


  #access iframe {
    aspect-ratio: 21 / 9;
    display: block;
    height: auto;
    width: 100%;
  }


}




/*=======================
	// grand-header 
=====================*/

#grand-header {
  height: 40px;
  margin-bottom: 0;
  background-color: #3c3c41;
  display: flex;
  justify-content: center;
  align-items: center;
}

#grand-header a {
  width: 92px;
}

#grand-header a img {
  width: 100%;
}

@media print, screen and (min-width: 1000px) {

  #grand-header {
    height: 60px;
  }

  #grand-header a {
    width: 132px;
  }

}


/*===============================
	add module
===================================*/

.w-98per {
  width: 98%;
}

.w-95per {
  width: 95%;
}


.mw-1280 {
  max-width: 1280px;
}


.mw-1380 {
  max-width: 1380px;
}

.mw-1500 {
  max-width: 1500px;
}



/*=======================
	// font-family
=====================*/

/*
// <weight>: Use a value from 200 to 900
// <uniquifier>: Use a unique and descriptive class name
.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
  */
.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


.noto-serif-jp.fw200 {
  font-weight: 200;
}

.noto-serif-jp.fw300 {
  font-weight: 300;
}

.noto-serif-jp.fw400 {
  font-weight: 400;
}

.noto-serif-jp.fw500 {
  font-weight: 500;
}

.noto-serif-jp.fw600 {
  font-weight: 600;
}

.noto-serif-jp.fw700 {
  font-weight: 700;
}

.noto-serif-jp.fw800 {
  font-weight: 800;
}


.rocknroll-one-regular {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.zen-kaku-gothic-antique-light {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zen-kaku-gothic-antique-regular {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-antique-medium {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-antique-bold {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-kaku-gothic-antique-black {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 900;
  font-style: normal;
}


.sloop-script-pro-regular {
  font-family: "sloop-script-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sloop-script-pro-medium {
  font-family: "sloop-script-pro", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.sloop-script-pro-bold {
  font-family: "sloop-script-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/*====================================================
	text and bg color
====================================================*/


.text-999 {
  color: #999;
}


.text-red {
  color: #f00;
}


.text-red2 {
  color: #cc2121;
}


.text-red3 {
  color: #c00;
}



.text-maroon {
  color: #ad1212;
}


.text-gold {
  color: #be7d28;
}

.text-gold2 {
  color: #dea357;
}


.text-gold3 {
  color: #c7b078;
}


.green {
  color: #89ccac;
}

/* 
img.arrow {
  width: 20px;
  height: 20px;
  vertical-align: text-top;
} */

.text-orange {
  color: #ef3e2b;
}

.text-brown2 {
  color: #683a16;
}



.arrow.white {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #fff;
  display: inline-block;
  margin-right: 3px;
  margin-bottom: 3px;
  vertical-align: middle;
}



/*////////////////////*/


.bg-gold {
  background-color: #b68d3c;
}

.bg-cream {
  background-color: #fdf5eb;
}



.bg-beige {
  /* background-color: #BFAB90; */
  background-color: #f0e9e0;
}

.bg-beige2 {
  background-color: #faf6f2;
}

.bg_maroon {
  background-color: #ad1212;
}

.bg_brown {
  background-color: #683a16;
}


/*　parts */

.icon {
  /* color: #fff; */
  padding: 1px 15px 0;
  border-radius: 3em;
}


li.indent_gold::before {
  content: '\25CF';
  color: #b68d3c;
}


/*====================================================
	border
====================================================*/

.border-gold {
  border-color: #8b6210;
}


.border-666-1px-dot {
  border: #666 thin dotted;
}


.bb-333-1px {
  border-bottom: #333 thin solid;
}


.bb-666-1px {
  border-bottom: #666 thin solid;
}


.bt-666-1px {
  border-top: #666 thin solid;
}

.bb-green-1px {
  border-bottom: #89ccac thin solid;
}

.bb-brown2-1px {
  border-bottom: #683a16 thin solid;
}


.b-top-bottom-red2 {
  border-top: #cc2121 thin solid;
  border-bottom: #cc2121 thin solid;
}


.b-top-bottom-brown {
  border-top: #683a16 thin solid;
  border-bottom: #683a16 thin solid;
}







hr {
  border-bottom: #333 thin solid;
}


/* rounded */


.rounded-2px {
  border-radius: 2px;
}

.rounded-3px {
  border-radius: 3px;
}


.rounded-5px {
  border-radius: 5px;
}


.rounded-8px {
  border-radius: 8px;
}






/*====================================================
layout
====================================================*/


article {
  background-color: #f9f2e4;
  margin: auto;
  position: relative;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
}


article img {
  width: 100%;
}



/*========================
 // id #title
===========================*/


#title {
  background: url(../img/bg_title_mob.png) top center no-repeat;
  background-size: contain;

  h1 {
    width: 80%;
    margin-inline: auto;
    padding-top: 30%;
  }

  .lead {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
  }

  .lead img.lead_mob {
    display: block;
    width: 100%;
    height: auto;
  }

  .lead img.lead_pc {
    display: none;
  }



  .lead div {
    position: absolute;
    inset: 0;
    width: 85%;
    height: fit-content;
    margin: auto;


    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1;
  }


  #h1_mob {
    display: block;
  }


  #h1_pc {
    display: none;
  }

}

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


  #title {
    background: url(../img/bg_title_pc.png) top center no-repeat;
    /* background-size: cover; */
    background-size: contain;

    h1 {
      /* width: 90%; */
      /* width: 55%; */
      width: 60%;
      max-width: 1031px;
      margin-inline: auto;
      /* padding-top: 10%; */
      padding-top: 8%;
    }

    #h1_mob {
      display: none;
    }


    #h1_pc {
      display: block;
    }

    .lead {
      width: 98%;
      max-width: 1280px;
      margin-inline: auto;
      margin-bottom: 45px;
    }

    .lead img.lead_pc {
      display: block;
      width: 100%;
      height: auto;
    }

    .lead img.lead_mob {
      display: none;
    }


  }


}

/*========================
 // id #title_nav
===========================*/


#title_nav {


  ul {
    line-height: 1.5;
  }


  li {
    width: 48%;
    margin-bottom: 10px;
  }

  li a {
    height: 80px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #666;
    border-radius: 5px;
  }

  li:first-child a {
    background-color: #ad1212;
  }

  li:nth-child(2) a {
    background-color: #9caf2f;
    background-color: #a38065;
  }

  li:nth-child(3) a {
    background-color: #9caf2f;
  }

  li:nth-child(4) a {
    /* background-color: #8dafc6; */
    background-color: #9189dc;
  }

  li:nth-child(5) a {
    background-color: #af6d8b;
    background-color: #ce6092;
  }

  li:nth-child(6) a {
    background-color: #f2b55c;
  }


}




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



  #title_nav {
    li {
      width: 32%;
      margin-bottom: 15px;
    }

    li a {
      height: 100px;
    }


  }


}




/*========================
 // .category
===========================*/




.category {
  padding-bottom: 60px;

  h2.cat-title {
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* height: 18vh; */
    height: 25vh;
    text-align: center;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
    /**/
    position: relative;
  }

  .series {
    width: 95%;
    margin-inline: auto;
    background-color: #fff;
  }


  .series h3 {
    /* height: 15vh; */
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    /**/
    display: flex;
    justify-content: center;
    align-items: center;
  }
}





@media screen and (min-width: 1000px) {
  .category {
    padding-bottom: 150px;



    h2.cat-title {
      /* font-size: 40px; */
      font-size: 46px;
      /* height: 200px; */
      min-height: 300px;
    }

    .series_box h4 {
      font-size: 40px;
    }
  }
}





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

#piano {
  background-color: #ad1212;
}

#used {
  /* background-color: #683a16; */
  /* background-color: #3c220e; */
  background-color: #a38065;
}

#elc {
  background-color: #9caf2f;
}

#chair {
  background-color: #a38065;
  background-color: #146093;
}

#vn_case {
  background-color: #af6d8b;
}

#used-sale {
  background-color: #af6d8b;
  background-color: #ce6092;
}


#score {
  /* background-color: #f2b55c; */
  background-color: #f19d24;
}


/*=======================
	tour
=========================*/


#tour {


  h4 {
    position: relative;
  }

  h4 .icon {
    font-size: 30px;

    color: #ce5050;

    font-family: "sloop-script-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 5px;
    /**/
    position: absolute;
    top: -60px;
    left: -20px;
    z-index: 2;
    /**/
    display: inline-block;
    /* 回転させるため */
    transform: rotate(-10deg);
  }


  dt {
    margin-bottom: 3px;
  }

}


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


  #tour {


    dl {
      font-size: 16px;
    }

    dt {
      margin-bottom: 5px;
    }


    /* figure {
      border: #f00 thin solid;
    }

    .txtbox {
      border: #f00 thin solid;
    } */




  }


}


/*====================================================
	used-item
====================================================*/

.used-item {
  position: relative;


  .icon {
    /* width: 22%; */
    width: 24%;
    aspect-ratio: 1 / 1;
    /**/
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 700;
    font-style: normal;
    /* font-size: 20px; */
    font-size: 16px;
    color: #000;
    text-align: center;
    background-color: #fff;
    border-radius: 50rem;
    /**/
    position: absolute;
    /* top: -30px; */
    top: -30px;
    /* left: 10px; */
    left: 10px;
    z-index: 2;
    /**/
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .icon.right {
    position: absolute;
    top: -15px;
    left: auto;
    right: 10px;
    z-index: 2;
  }
}


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


  .used-item {

    .icon {
      /* width: 12%; */
      width: 16%;
      position: absolute;
      top: -70px;
      left: 15%;
      z-index: 2;

      /**/
      font-size: 30px;

    }


    .icon.right {
      position: absolute;
      top: -70px;
      left: auto;
      right: 15%;
      z-index: 2;
    }


  }



}



/*=======================
	score
=========================*/

#score {


  h3 {}


  .midashi {
    color: #fff;
    background-color: red;
    padding: 3px 15px;
    border-radius: 3px;

  }

}



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

  /* #score {


    h3 {
      text-align: left;
      display: block;
    }



  } */


}



/*====================================================
	items
====================================================*/

.items {

  dt {
    font-size: 14px;
    font-weight: bold;
  }

  dt .model {
    font-size: 18px;
    display: block;
  }


  .display {
    padding: 3px 15px;
    font-size: 14px;
    color: #fff;
    background-color: #ad1212;
  }

  .price {
    font-size: 18px;
    padding-top: 5px;
  }


  figure img {
    /* max-width: 366px; */
    max-width: 400px;
    display: block;
    margin-inline: auto;
  }


}


.line_up {


  a {

    color: #fff;
    background-color: #ad1212;
    padding: 15px 30px;
    border-radius: 50rem;
    display: block;
    width: 90%;
    max-width: 600px;
    margin-inline: auto;
  }

}

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

  .items {

    dt {
      font-size: 18px;
    }

    dt .model {
      font-size: 22px;
    }

    .price {
      font-size: 22px;
      padding-top: 0px;
    }

  }
}





/* ///// grid ///// */

.grid-2col {
  display: grid;
  /* Gridレイアウトを指定 */
  grid-template-columns: 1fr 1fr;
  /* 2列にする */
  gap: 20px;
  /* 列の間に20pxの余白 */
  margin-bottom: 30px;
}





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


  .grid-md-3col {
    display: grid;
    /* Gridレイアウトを指定 */
    grid-template-columns: 1fr 1fr 1fr;
    /* 2列にする */
    gap: 20px;
    /* 列の間に20pxの余白 */
    margin-bottom: 30px;
  }


}









/*=============================
	sns_iconbox
===============================*/


.sns_iconbox {
  text-align: left;
  font-size: 14px;
  padding-top: 60px;
}


.sns_iconbox ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sns_iconbox li {
  width: 40px;
  margin: 0 10px;
}

.sns_iconbox li img {
  width: 100%;
  vertical-align: bottom;
}


.sns_iconbox p {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}


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

  .sns_iconbox {
    width: 95%;
    max-width: 1260px;
    margin: auto auto 60px;
    padding-top: 120px;
    text-align: center;
    font-size: 1.5rem;
  }



}




/*=============================
	advance_notice
===============================*/

.advance_notice {
  font-size: 1.4rem;
  text-align: center;
  background: #fff;
  padding: 10em 0 5em;
}

.advance_notice p {
  margin-bottom: 1em;
}