@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/* Scss Document */
#piano .maintitle {
  background: #fff;
  position: relative;
  max-width: 400px;
  width: 90%;
  border-radius: 50%;
  margin: 100px auto 30px; }
  #piano .maintitle .maintitle_wrap {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    top: 35%;
    text-align: center; }
    #piano .maintitle .maintitle_wrap .title_logo {
      max-width: 120px;
      width: 28%;
      margin: 0 auto 30px; }
    #piano .maintitle .maintitle_wrap .maintitle_txt {
      margin: 0 auto 5px; }
      #piano .maintitle .maintitle_wrap .maintitle_txt .en {
        color: #FFA200;
        font-size: 2.8rem;
        line-height: 1.2; }
        @media (min-width: 769px) {
          #piano .maintitle .maintitle_wrap .maintitle_txt .en {
            font-size: calc( 2.8rem + ( 1vw - 7.69px ) * 0.9626955475 ); } }
        @media (min-width: 1600px) {
          #piano .maintitle .maintitle_wrap .maintitle_txt .en {
            font-size: 3.6rem; } }
      #piano .maintitle .maintitle_wrap .maintitle_txt h2 {
        font-weight: normal;
        font-size: 1.2rem; }
        @media (min-width: 769px) {
          #piano .maintitle .maintitle_wrap .maintitle_txt h2 {
            font-size: calc( 1.2rem + ( 1vw - 7.69px ) * 0.2406738869 ); } }
        @media (min-width: 1600px) {
          #piano .maintitle .maintitle_wrap .maintitle_txt h2 {
            font-size: 1.4rem; } }
    #piano .maintitle .maintitle_wrap .txt {
      line-height: 1.8;
      font-size: 1.3rem; }
      @media (min-width: 769px) {
        #piano .maintitle .maintitle_wrap .txt {
          font-size: calc( 1.3rem + ( 1vw - 7.69px ) * 0.2406738869 ); } }
      @media (min-width: 1600px) {
        #piano .maintitle .maintitle_wrap .txt {
          font-size: 1.5rem; } }
  #piano .maintitle:after {
    content: '';
    display: block;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%; }
#piano .piano_wrap .piano_box {
  padding: 0 4%;
  padding-top: 6.6666666667%;
  padding-bottom: 6.6666666667%; }
  @media screen and (max-width: 769px) {
    #piano .piano_wrap .piano_box {
      padding-top: 40px;
      padding-bottom: 40px; } }
  @media screen and (min-width: 1200px) {
    #piano .piano_wrap .piano_box {
      padding-top: 80px;
      padding-bottom: 80px; } }
  #piano .piano_wrap .piano_box .en_name {
    font-weight: bold;
    font-size: 5.6rem;
    font-family: "Lato", Arial, Helvetica, "sans-serif";
    letter-spacing: 0.2em;
    line-height: 1.2; }
    @media (min-width: 769px) {
      #piano .piano_wrap .piano_box .en_name {
        font-size: calc( 5.6rem + ( 1vw - 7.69px ) * 6.9605568445 ); } }
    @media (min-width: 1200px) {
      #piano .piano_wrap .piano_box .en_name {
        font-size: 8.6rem; } }
  #piano .piano_wrap .piano_box .cg {
    margin-top: -10%;
    margin-bottom: 3.3333333333%; }
    @media screen and (max-width: 769px) {
      #piano .piano_wrap .piano_box .cg {
        margin-top: -60px; } }
    @media screen and (min-width: 1200px) {
      #piano .piano_wrap .piano_box .cg {
        margin-top: -120px; } }
    @media screen and (max-width: 769px) {
      #piano .piano_wrap .piano_box .cg {
        margin-bottom: 20px; } }
    @media screen and (min-width: 1200px) {
      #piano .piano_wrap .piano_box .cg {
        margin-bottom: 40px; } }
  #piano .piano_wrap .piano_box .txt h3 {
    font-size: 2rem;
    margin-bottom: 1.6666666667%; }
    @media (min-width: 769px) {
      #piano .piano_wrap .piano_box .txt h3 {
        font-size: calc( 2rem + ( 1vw - 7.69px ) * 2.3201856148 ); } }
    @media (min-width: 1200px) {
      #piano .piano_wrap .piano_box .txt h3 {
        font-size: 3rem; } }
    @media screen and (max-width: 769px) {
      #piano .piano_wrap .piano_box .txt h3 {
        margin-bottom: 10px; } }
    @media screen and (min-width: 1200px) {
      #piano .piano_wrap .piano_box .txt h3 {
        margin-bottom: 20px; } }
  #piano .piano_wrap .piano_box.upright {
    background: #F8E7CF; }
    #piano .piano_wrap .piano_box.upright .en_name {
      color: #F5DCB9; }
    #piano .piano_wrap .piano_box.upright .txt h3 {
      color: #FFA200; }
    #piano .piano_wrap .piano_box.upright .btn a {
      border-bottom: 6px #C77E1B solid; }
  #piano .piano_wrap .piano_box.grand {
    background: #E1F2EF; }
    #piano .piano_wrap .piano_box.grand .en_name {
      color: #D5EDE9; }
    #piano .piano_wrap .piano_box.grand .txt h3 {
      color: #85CBBF; }
    #piano .piano_wrap .piano_box.grand .btn a {
      background: #85CBBF;
      border-bottom: 6px #6CAA9F solid; }

/*------------------------------
		769px以上
------------------------------*/
/*------------------------------
		980px以上
------------------------------*/
@media screen and (min-width: 801px) {
  #piano .maintitle {
    margin: 100px auto -60px; }
  #piano .piano_wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    #piano .piano_wrap .piano_box {
      flex: 0 1 50%;
      width: 50%;
      max-width: 50%;
      box-sizing: border-box;
      padding-left: 1%;
      padding-right: 1%; }
      #piano .piano_wrap .piano_box .cg img {
        margin: auto;
        display: block; }
      #piano .piano_wrap .piano_box.grand .en_name {
        text-align: right; } }
/*------------------------------
		1280px以上
------------------------------*/
@media screen and (min-width: 1200px) {
  #piano {
    position: relative; }
    #piano .maintitle {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: auto;
      width: 25%;
      min-width: 320px; } }

/*# sourceMappingURL=style.css.map */