/******************************************************
共通
******************************************************/
* { vertical-align: baseline; }
html, body { min-height: 100%; width: 100vw; margin: 0; padding: 0; }
body { background-color: rgb(255, 251, 244); color: rgba(67,64,61,1); font-family: 'Open Sans', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
a { text-decoration: none; }
p { margin: 0; }
table th { font-weight: 300; }
table td { font-weight: 400; }
/* .showpc { display: block; } */
/* .showsp { display: none; } */
.fade-in { opacity: 0; transition: all .5s ease-in; transform: translateY(25px); }
.fade-in.appear { opacity: 1; transform: translateY(0); }
.nowrap { white-space: nowrap; }
@media only screen and (max-width: 1040px) {
    body.menu-open { overflow: hidden; overscroll-behavior: contain; touch-action: none; }
}
/* 言語変更 */
main a.language { margin: 50px auto 0 auto; display: flex; align-items: center; justify-content: center; width: 300px; height: 75px; background-color: rgba(106,59,35,1); border-radius: 50px; color: rgba(255,251,244,1); font-weight: 500; font-size: 20px; box-shadow: 0 0 3px black; transition: all .3s ease; }
main a.language:hover { box-shadow: 0 0 15px black; }
/******************************************************
トップページ START
******************************************************/
.toppage { background-color: rgba(106,59,35,1); width: 100%; min-height: 100vh; color: rgb(255,251,244); }
.toppage main { display: block; margin: 0 auto; width: 100%; max-width: 900px; min-height: 100vh; background-image: url(/handyharp2/resources/bg_redwood.jpg); background-size: 100% auto; background-position: top; box-shadow: 0 0 10px black; }
/* 上の画像 */
.toppage main img { display: block; position: relative; }
.toppage main img:nth-child(1) { height: 35px; margin-left: auto; padding: 40px 50px 0 0; }
.toppage main img:nth-child(2) { height: 35px; margin-left: auto; padding: 20px 50px 0 0; }
.toppage main img:nth-child(3) { height: 110px; margin: 0 auto; padding: 25px 0 0 0; }
.toppage main img:nth-child(4) { height: 65px; margin: 0 auto; padding: 25px 0; }
/*　ボタン部分　*/
.toppage main .special-bg { padding: 30px 0 560px 0; background-image: url(/handyharp2/resources/bg_harpist.jpg); background-size: 100% auto; }
.toppage main .special-bg a { margin: 30px auto; display: flex; align-items: center; justify-content: center; width: 300px; height: 75px; background-color: rgba(148,46,46,1); border-radius: 50px; color: rgba(255,251,244,1); font-weight: 500; font-size: 20px; box-shadow: 0 0 3px black; transition: all .3s ease; }
.toppage main .special-bg a:hover { box-shadow: 0 0 15px black; }
.toppage main .special-bg a:nth-child(1) { margin: 0 auto 30px auto; }
.toppage main .special-bg a:nth-child(4) { margin: 30px auto 0 auto; }
/*　スマホ画像　*/
.toppage main img#phoneimage { width: 65%; margin: -550px auto 0 auto; padding: 20px 0 0 0; }
/*　情報　*/
.toppage main ul.specifications { list-style: none; width: 400px; margin: -90px auto 25px auto; padding: 16px; border: 1px solid rgb(255,251,244); }
.toppage main ul.specifications li { padding: 3px 0; }
.toppage main ul.specifications li p { font-size: 20px; font-weight: 900; }
.toppage main ul.specifications li:nth-child(1) { padding-top: 0; }
.toppage main ul.specifications li:nth-child(7) { border-bottom: 1px solid rgb(255,251,244); }
.toppage main ul.specifications li span { display: inline-block; }
.toppage main ul.specifications li span:nth-child(1) { width: 40%; font-weight: 600; }
.toppage main ul.specifications li span:nth-child(2) { width: 60%; }
.toppage main .detailed-description { display: block; margin: 0 auto; max-width: 445px; }
.toppage main .detailed-description h1 { font-size: 14px; margin: 15px 0 5px 0; }
.toppage main .detailed-description ul { margin: 0; }
.toppage main .detailed-description ul li { font-size: 12px; }
.toppage main .detailed-description p { font-size: 12px; margin: 0 5px; }
/* 英語ページ調整 */
.toppage.en main img:nth-child(4) { height: 55px; }
/* スマホ調整 */
@media only screen and (max-width: 900px) {
    .toppage main img:nth-child(1) { height: 16px; margin-left: auto; padding: 20px 10px 0 0; }
    .toppage main img:nth-child(2) { height: 16px; margin-left: auto; padding: 20px 10px 0 0; }
    .toppage main img:nth-child(3) { height: 55px; margin: 0 auto; padding: 10px 0 0 0; }
    .toppage main img:nth-child(4) { height: 30px; margin: 0 auto; padding: 10px 0; }
    .toppage.en main img:nth-child(4) { height: 25px; }
    .toppage main .special-bg { padding: 10px 0 10px 0; background-image: url(/handyharp2/resources/bg_harpist.jpg); background-size: 100% auto; }
    .toppage main .special-bg a { margin: 10px auto; width: 250px; height: 50px; }
    .toppage main .special-bg a:nth-child(1) { margin: 0 auto 10px auto; }
    .toppage main .special-bg a:nth-child(4) { margin: 10px auto 0 auto; }
    .toppage main img#phoneimage { margin: 0 auto 0 auto; padding: 20px 0 0 0; }
    .toppage main ul.specifications { width: 85%; margin: -35px auto 25px auto; }
    .toppage main .detailed-description { width: 94%; }
}
/******************************************************
トップページ END
******************************************************/
/******************************************************
クライアント START
******************************************************/
.client { background-color: rgba(106,59,35,1); width: 100%; min-height: 100vh; color: rgb(255,251,244); }
.client main { display: block; margin: 0 auto; width: 100%; max-width: 900px; min-height: 100vh; background-image: url(/handyharp2/resources/bg_redwood.jpg); background-size: 100% auto; background-position: bottom; box-shadow: 0 0 10px black; }
.client main .container { display: block; margin: 0 auto; max-width: 700px; padding-top: 50px; }
.client main .container h1 { font-size: 30px; margin: 0 0 5px 0; text-align: center; }
.client main a.download { display: flex; align-items: center; justify-content: center; width: 300px; height: 75px; background-color: rgba(106,59,35,1); border-radius: 50px; color: rgba(255,251,244,1); font-weight: 500; font-size: 20px; box-shadow: 0 0 3px black; transition: all .3s ease; text-align: center; }
.client main a.download:hover { box-shadow: 0 0 15px black; }
/*
.client main a.download:nth-child(2) { margin: 50px auto 0 auto; }
.client main a.download:nth-child(3) { margin: 15px auto 0 auto; }
.client main a.download:nth-child(4) { margin: 15px auto 0 auto; }
*/
.client main a.download:nth-child(2) { margin: 40px auto 0 auto; }
.client main a.download:nth-child(4) { margin: 15px auto 0 auto; }
.client main a.download:nth-child(6) { margin: 15px auto 0 auto; }
.client main .container p.update-time { margin-top: 15px; margin-bottom: 15px; text-align: center; font-size: 16px; opacity: 1;}
.client main .container p { font-size: 12px; margin: 5px 0; padding: 0;}
.client main a.return { margin: 50px auto 0 auto; display: flex; align-items: center; justify-content: center; width: 300px; height: 75px; background-color: rgba(106,59,35,1); border-radius: 50px; color: rgba(255,251,244,1); font-weight: 500; font-size: 20px; box-shadow: 0 0 3px black; transition: all .3s ease; }
.client main a.return:hover { box-shadow: 0 0 15px black; }
/* スマホ調整 */
@media only screen and (max-width: 900px) {
    .client main .container { width: 95%; }
}
/******************************************************
クライアント END
******************************************************/
/******************************************************
プライバシーポリシー START
******************************************************/
.privacy-policy { background-color: rgba(106,59,35,1); width: 100%; min-height: 100vh; color: rgb(255,251,244); }
.privacy-policy main { display: block; margin: 0 auto; width: 100%; max-width: 900px; min-height: 100vh; background-image: url(/handyharp2/resources/bg_redwood.jpg); background-size: 100% auto; background-position: bottom; box-shadow: 0 0 10px black; }
.privacy-policy main .container { display: block; margin: 0 auto; max-width: 700px; padding-top: 50px; }
.privacy-policy main .container h1 { font-size: 30px; margin: 0 0 5px 0; }
.privacy-policy main .container h1:nth-child(2) { margin-bottom: 35px; }
.privacy-policy main .container h2 { font-size: 18px; margin: 20px 0 5px 0; /*padding-bottom: 2px; border-bottom: 1px solid rgb(255,251,244);*/ }
.privacy-policy main a.return { margin: 50px auto 0 auto; display: flex; align-items: center; justify-content: center; width: 300px; height: 75px; background-color: rgba(106,59,35,1); border-radius: 50px; color: rgba(255,251,244,1); font-weight: 500; font-size: 20px; box-shadow: 0 0 3px black; transition: all .3s ease; }
.privacy-policy main a.return:hover { box-shadow: 0 0 15px black; }
.privacy-policy main .container p a.contact { color: white; text-decoration: underline; }
.privacy-policy main .container p a.contact:hover { text-decoration: none; }
/* スマホ調整 */
@media only screen and (max-width: 900px) {
    .privacy-policy main .container { width: 95%; }
}
/******************************************************
プライバシーポリシー END
******************************************************/
/******************************************************
著作権表記 START
******************************************************/
main .footer { padding: 50px 0; text-align: center; font-size: 12px; }
/******************************************************
著作権表記 END
******************************************************/
/******************************************************
説明書 START
******************************************************/
.manual { display: flex; min-height: 100vh; }
/*.manual { max-width: 900px; margin: 0 auto; }*/
/******************
トップページへ戻るボタン
******************/
.manual a.homepage-button { display: flex; align-items: center; justify-content: center; position: absolute; top: 15px; right: 197px; width: 130px; height: 50px; background-color: rgba(67,64,61,1);  border-radius: 25px; box-shadow: black 0 0 2px; text-decoration: none; color: rgb(255, 251, 244); }
/******************
言語変更ボタン
******************/
.manual a.language-button { display: flex; align-items: center; justify-content: center; position: absolute; top: 15px; right: 80px; width: 100px; height: 50px; background-color: rgba(67,64,61,1);  border-radius: 25px; box-shadow: black 0 0 2px; text-decoration: none; color: rgb(255, 251, 244); }
/******************
スマホ用ボタン
******************/
.manual .smartphone-button { z-index: 9; display: none; align-items: center; justify-content: center; position: fixed; top: 15px; right: 15px; width: 50px; height: 50px; background-color: rgba(67,64,61,1); border-radius: 25px; box-shadow: black 0 0 2px; }
.manual .smartphone-button #toggle { width: 30px; cursor: pointer; }
.manual .smartphone-button #toggle span { display: block; width: 100%; border-radius: 3px; height: 3px; background: rgb(255, 251, 244); transition: all .3s; position: relative; }
.manual .smartphone-button #toggle span + span { margin-top: 6px; }
.manual .smartphone-button #toggle.active span:nth-child(1) { animation: ease .7s top forwards; }
.manual .smartphone-button #toggle.not-active span:nth-child(1) { animation: ease .7s top-2 forwards; }
.manual .smartphone-button #toggle.active span:nth-child(2) { animation: ease .7s scaled forwards; }
.manual .smartphone-button #toggle.not-active span:nth-child(2) { animation: ease .7s scaled-2 forwards; }
.manual .smartphone-button #toggle.active span:nth-child(3) { animation: ease .7s bottom forwards; }
.manual .smartphone-button #toggle.not-active span:nth-child(3) { animation: ease .7s bottom-2 forwards; }
@keyframes top { 0% { top: 0; transform: rotate(0); } 50% { top: 9px; transform: rotate(0); } 100% { top: 9px; transform: rotate(45deg); } }
@keyframes top-2 { 0% { top: 9px; transform: rotate(45deg); } 50% { top: 9px; transform: rotate(0deg); } 100% { top: 0; transform: rotate(0deg); } }
@keyframes bottom { 0% { bottom: 0; transform: rotate(0); } 50% { bottom: 9px; transform: rotate(0); } 100% { bottom: 9px; transform: rotate(135deg); } }
@keyframes bottom-2 { 0% { bottom: 9px; transform: rotate(135deg); } 50% { bottom: 9px; transform: rotate(0); } 100% { bottom: 0; transform: rotate(0); } }
@keyframes scaled { 50% { transform: scale(0); } 100% { transform: scale(0); } }
@keyframes scaled-2 { 0% { transform: scale(0); } 50% { transform: scale(0); } 100% { transform: scale(1); } }
@media only screen and (max-width: 1040px) {
    .manual .smartphone-button { display: flex; }
}
/******************
左：Sidebar Menu
******************/
.manual aside { z-index: 8; position: fixed; flex: 1 1 0; width: 350px; height: 100vh; overflow-y: scroll; box-shadow: black 2px 0 5px; }
.manual aside .background { background-image: url(/handyharp2/resources/bg_wood.jpg); background-size: 350px; }
.manual aside nav { width: 90%; margin: 0 auto; }
.manual aside nav a { display: block; color: rgb(255, 251, 244); transition: all .3s ease; }
.manual aside nav a.section { font-weight: 600; font-size: 22px; margin: 35px 0 0 0; padding: 5px 0; border-bottom: 3px solid rgb(255, 251, 244); }
.manual aside nav a.section.top { margin: 0; padding: 15px 0 5px 0; }
.manual aside nav a.item { font-weight: 500; font-size: 18px; margin: 5px 0; padding: 5px 15px; border: 2px solid transparent;  }
.manual aside nav a.item span { display: inline-block; width: 25px; opacity: .5; }
.manual aside nav a.item:hover { border: 2px solid rgb(255, 251, 244); border-radius: 25px; }
.manual aside nav a.item.active { border: 2px solid rgb(255, 251, 244); border-radius: 25px; }
@media only screen and (max-width: 1040px) {
    .manual aside{ margin-left: -355px; transition: all .3s ease; overscroll-behavior: contain; }
    .manual aside.active { margin-left: 0; }
}
/******************
右：Manual Content
******************/
.manual main { width: 100%; }
.manual main h1 { padding-left: 400px; padding-top: 50px; border-bottom: 5px solid rgb(67,64,61); }
.manual main h2 { margin: 50px 0 10px 400px; }
.manual main h2 span { display: inline-block; width: 35px; opacity: .3; }
.manual main p { margin-left: 400px; max-width: 600px; }
.manual main p a, .manual main ul li a { color: #d84d55; }
.manual main p a:hover, .manual main ul li a:hover { text-decoration: underline; }
.manual main p img { width: 100%; }
.manual main p img.number {width: 30px;}
.manual main ul { margin-left: 400px; padding: 0; max-width: 600px; }
.manual main ul li { display: flex; }
.manual main ul li img { width: 30px; margin-right: 15px; }
.manual main ul li.underlined { border-bottom: 2px solid black; margin-top: 35px; }
.manual main p.fumen img { margin-top: 19px; }
.manual main p.credits { text-align: center; line-height: 30px; }
.manual main p.credits span { opacity: .5; }
@media only screen and (max-width: 1040px) {
    .manual main h1 { padding-left: 15px; font-size: 1.5em; padding-top: 60px; }
    .manual main h2 { margin-left: 15px; }
    .manual main p { margin-left: 15px; margin-right: 15px; }
    .manual main ul { margin-left: 15px; margin-right: 15px; }
    .manual main { transition: opacity .3s ease; }
    body.menu-open .manual main { opacity: .3; }
    .manual main p.fumen img { margin-top: 15px; }
}
/******************************************************
説明書 END
******************************************************/