@charset "utf-8";
/*------------------------  app.css  ------------------------*/



/*----------------------  アプリ  ----------------------*/


/*-----  main-visual  -----*/
.main-visual { margin: 0 auto; padding: 50px 3% 0; max-width: 1180px; }
.main-visual .main-visual-block { position: relative; width: 100%; overflow: hidden; }
.main-visual .main-visual-block iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

@media screen and (max-width: 800px) {
 .main-visual { padding: 20px 3% 0; }
}


/*-----  title  -----*/
.title-block-app { padding: 0 0 20px; }
.title-block-app .en { padding: 0 0 2px; font-family: 'Kanit', sans-serif; font-weight: 800; font-size: 44px; }
.title-block-app .title { font-size: 17px; }

@media screen and (max-width: 800px) {
 .title-block-app { padding: 0 0 15px; }
 .title-block-app .en { font-size: 34px; }
 .title-block-app .title { font-size: 16px; }
}


/*-----  main-app  -----*/
.main-app { margin: 0 0 40px; padding: 0; }
.main-app .main-block { display: flex; }
.main-app .main-block .main-img { flex-basis: 40%; display: flex; justify-content: center; align-items: center; position: relative; min-height: 500px; margin: 35px 0; }
.main-app .main-block .main-img picture { max-width: 300px; }
.main-app .main-block .main-info { display: flex; flex-flow: column; justify-content: center; flex-basis: 60%; padding: 35px 8% 35px 0; }
.main-app .main-block .main-info-w100per { flex-basis: 100%; padding: 35px 8%; }
.main-app .main-block .main-info .head { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 2%; background: #FBC400; font-weight: 800; font-size: 28px; line-height: 1.3; }
.main-app .main-block .main-info .desc { padding: 18px 0 27px; font-weight: 400; line-height: 1.6; }
.main-app .main-block .main-info .desc .txt { font-size: 18px; }
.main-app .main-block .main-info .desc .note { padding: 12px 0 0; font-size: 14px; }
.main-app .main-block .main-info .desc .note .list { position: relative; padding-left: 1em; }
.main-app .main-block .main-info .desc .note .list::before { content: '※'; position: absolute; top: 0; left: 0; }
.main-app .main-block .main-info .desc .note-plain { padding: 12px 0 0; font-size: 14px; }
.main-app .main-block .main-info .desc .note-plain .list { position: relative; }
.main-app .main-block-h375 { height: 375px; }

@media screen and (max-width: 960px) {
 .main-app .main-block .main-info { padding: 40px 4%; }
 .main-app .main-block .main-info .head { height: 44px; font-size: 26px; }
 .main-app .main-block .main-info .desc { padding: 16px 0; }
}

@media screen and (max-width: 800px) {
 .main-app { margin: 0 0 20px; }
 .main-app .main-block { display: block; }
 .main-app .main-block .main-img { padding: 10px 25%; min-height: auto; margin: 20px 0 5px; }
 .main-app .main-block .main-info { padding: 14px 6% 22px; }
 .main-app .main-block .main-info .head { height: 32px; font-size: 20px; }
 .main-app .main-block .main-info .head .ss { font-size: 15px; }
 .main-app .main-block .main-info .desc { padding: 13px 0; }
 .main-app .main-block .main-info .desc .txt { font-size: 14px; }
 .main-app .main-block .main-info .desc .note { padding: 9px 0 0; font-size: 13px; }
 .main-app .main-block .main-info .desc .note-plain { padding: 9px 0 0; font-size: 13px; }
 .main-app .main-block-h375 { height: auto; }
}


/*-----  main-app-download  -----*/
.main-app-download .head-download { display: flex; align-items: center; justify-content: center; padding: 10px 0 20px; }
.main-app-download .head-download .ico { width: 100px; }
.main-app-download .main-block .head-download .head { padding-left: 24px; font-weight: 800; font-size: 30px; line-height: 1.3; background: none }
.main-app-download .main-block .main-info .desc { padding: 18px 0; text-align: center; }
.main-app-download .main-block .main-info .desc .note-plain { font-size: 13px; }
.main-app-download .store { padding: 15px 0 0; }
.main-app-download .store .bnr { display: flex; justify-content: center; }
.main-app-download .store .bnr .link { display: block; width: 198px; margin: 0 .8%; }

@media screen and (max-width: 800px) {
 .main-app-download .head-download { padding: 14px 0; }
 .main-app-download .head-download .ico { width: 36px; }
 .main-app-download .main-block .head-download .head { padding-left: 8px; font-size: 22px; }
 .main-app-download .main-block .main-info .desc .note-plain { font-size: 12px; }
 .main-app-download .store .bnr .link { width: 128px; }
}