@charset "UTF-8";
@font-face{
  font-family: "Gotham Rounded";
  src: url("/css/fonts/gotham-rounded/GothamRounded-Medium.otf");
}
.original_instrument-container {
  background-color: #E6F6FF;
  width: 100%;
  margin-top: 65px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.original_instrument-container img {
    width: 100%;
    max-width: 500px;
}
.title1 p {
  font-size: 5.333vw;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 1.067vw;
  text-align: center;
  color: #226abb;
  font-family: "Gotham Rounded";
}

.title1 {
    padding-top: 8vw;
}
.title2 {
  margin-top: -9.067vw;
}
.title2 p {
    font-family: "A-OTF じゅん Pro 501","ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
    font-size: 6.400vw;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.067vw;
    letter-spacing: normal;
    text-align: center;
    color: #333333;
}
.head-broom {
  margin-top: 2.827vw;
  width: 89.5vw;
  height: 124vw;
  background: #fff;
  margin-left: 5.333vw;
  margin-right: 5.333vw;
}
.head-broom img {
    width: 100%;
    max-width: 450px;
}
.head-broom p:first-of-type {
  font-family: "ヒラギノ丸ゴ Sans W3", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
  font-size: 2.667vw;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 6.400vw;
  letter-spacing: 0.533vw;
  text-align: center;
  color: #666666;
  margin-top: 6.133vw;
}
.head-broom p:nth-child(2) {
  font-family: "A-OTF じゅん Pro 501","ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
  font-size: 4.800vw;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 6.400vw;
  letter-spacing: 0.480vw;
  text-align: center;
  color: #222222;
  margin-top: -2.933vw;
}
.head-broom p:nth-last-child(-n+2) {
  font-family: "A-OTF じゅん Pro 501","ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
  font-size: 3.733vw;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.5;
  letter-spacing: 0.373vw;
  text-align: center;
  color: #222222;
}
.point {
    margin-left: 2.667vw;
    margin-right: 2.667vw;
    box-shadow: 0 3px 20px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 0;
}
.title3 {
    width: 89.333vw;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    padding-top: 6.667vw;
    max-width: 445px;
}
.title3 p {
    font-family: "ヒラギノ丸ゴ Sans W6", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
    font-size: 3.733vw;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.333vw;
    letter-spacing: 0.373vw;
    text-align: center;
    color: #222222;
}
.white-container {
    width: 89.333vw;
    height: auto;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    max-width: 445px;
}
.hex {
    margin-top: 1.067vw;
    width: 100%;
    max-width: 500px;
  }
.hex img {
  max-width: none;
  width: 100vw;
  margin-left: -5.5vw;
}
.guitar1 {
    margin-top: 6.933vw;
}
.guitar1 img {
  max-width: none;
  width: 100vw;
  margin-left: -5.5vw;
}
.guitar2 img {
  max-width: none;
  width: 100vw;
  margin-left: -5.5vw;
}
.guitar3 img {
  max-width: none;
  width: 100vw;
  margin-left: -5.5vw;
}
.guitar4 img {
  max-width: none;
  width: 100vw;
  margin-left: -8vw;
}
.guitar5 img {
  max-width: none;
  width: 100vw;
  margin-left: -7.9vw;
}
.guitar6 img {
  max-width: none;
  width: 100vw;
  margin-left: -7.9vw;
  margin-bottom: -3vw;
}
.cont{
    padding:2.667vw;
    max-width:445px;
    background:#fff;
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 89.333vw;
    margin-bottom: 5vw;
  }
  
  h2, details{
    display:inline;
  }
  
  details {
    position:relative;
  }
  details summary {
    display:block;
    cursor: pointer;
    color: red;
  }
  details summary:focus {
    outline:none;
  }
  details[open] {
    display:block;
    padding-top: 2.667vw;
    animation: open .2s linear;
  }
  details[open] summary {
    position:absolute;
    bottom: 0;
    left:0;
  }
  
  details #open{
    width: 84vw;
    height: 13.333vw;
    border-radius: 6.667vw;
    border: solid 2px #226abb;
    background-color: #ffffff;
    justify-content: center;
    display: flex;
    margin-top: 18.427vw;
    box-shadow: 0 -44vw 9.333vw 0 #fff;
  }
  details #open p {
    font-family: "ヒラギノ丸ゴ Sans W6", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
    font-size: 4.427vw;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 3.5vw;
    letter-spacing: normal;
    text-align: center;
    color: #226abb;
  }
  details #open:nth-child(1) svg {
      font-size: 4.267vw;
  }
  details #open p:nth-child(1) {
    position: absolute;
    margin-top: -15vw;
  }
  details[open] #open{display:none;}
  details #close{display:none;}
  details[open] #close{display:block;}
  ::-webkit-details-marker {display: none;}
  @keyframes open {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
@media screen and (min-width: 500px) {
  .title1 p {
    font-size: 26.7px;
    letter-spacing: 5px;
  }
  .head-broom {
    margin-top: 9px;
    width: 445px;
    margin-left: 28px;
    margin-right: 28px;
    height: 610px;
  }
  .head-broom p:first-of-type {
    font-size: 13.3px;
    line-height: 32px;
    letter-spacing: 2.5px;
    margin-top: 30px;
  }
  .head-broom p:nth-child(2) {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 3px;
    margin-top: -15px;
  }
  .head-broom p:nth-last-child(-n+2) {
    font-size: 18.7px;
    letter-spacing: 1.9px;
  }
  .title1 {
    padding-top: 40px;
  }
  .title2 {
    margin-top: -44px;
  }
  .title2 p {
    font-size: 32px;
    line-height: 7.75px;
  }
  .point {
    margin-left: 10px;
    margin-right: 10px;
}
  .title3 {
    padding-top: 30px;
  }
  .title3 p {
    font-size: 18.66px;
    line-height: 0.4;
    letter-spacing: 2px;
  }
  .hex {
    margin-top: 5px;
  }
  .hex img {
    max-width: 500px;
    margin-left: -29px;
  }
  .guitar1 {
    margin-top: 30px;
  }
  .guitar1 img {
    max-width: 490px;
    margin-left: -24px;
  }
  .guitar2 img {
    max-width: 492.5px;
    margin-left: -25px;
  }
  .guitar3 img {
    max-width: 492px;
    margin-left: -24px;
  }
  .guitar4 img {
    max-width: 492px;
    margin-left: -34.5px;
  }
  .guitar5 img {
    max-width: 492.5px;
    margin-left: -34px;
  }
  .guitar6 img {
    max-width: 491px;
    margin-left: -34px;
    margin-bottom: -18px;
  }
  details #open:nth-child(1) svg {
    font-size: 21.3px;
  }
  details #open{
    border-radius: 35px;
    margin-top: 70px;
    box-shadow: 0 -160px 40px 0 #fff;
    max-width: 419px;
    height: 69.45px;
  }
  details #open p {
    font-size: 22px;
    line-height: 1;
  }
  .cont{
    padding:10px;
    margin-bottom: 40px;
  }
  details #open p:nth-child(1) {
    margin-top: -60px;
  }
}