@charset "UTF-8";
/* ! ---------- initial ---------- ---------- ---------- ---------- */
/* ---------- setting ---------- ---------- */
/* ! ---------- area ---------- ---------- ---------- ---------- */
/* リセットCSS */
html, body { width: 100%; height: 100%; }

body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, blockquote, pre, a, div { margin: 0; padding: 0; font-size: 100%; line-height: inherit; box-sizing: border-box; }

body { -webkit-text-size-adjust: 100%; line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

th, td { vertical-align: top; text-align: left; font-weight: normal; }

img { border: 0; vertical-align: bottom; }

a { text-decoration: none; }

body { font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; color: #333; }

main { display: block; }

main p { margin-bottom: 15px; line-height: 1.5; letter-spacing: 0.1em; }

main p.is-no-margin { margin-bottom: 0; }

/* ----------------------------------------------------------
.area-wrapper
---------------------------------------------------------- */
.area-wrapper { position: relative; overflow: hidden; }

/* ----------------------------------------------------------
.area-inner
---------------------------------------------------------- */
.area-inner { position: relative; }

/* ----------------------------------------------------------
.block-inner
---------------------------------------------------------- */

@media screen and (min-width: 768px){
 main{ font-size: 14px; } }

@media screen and (max-width: 767px){
 main{ font-size: 12px; margin-top: 50px; }
 main img{ max-width: 100%; }
 .area-wrapper{ background: url(../../images/index/download/bg2_sp.png) right bottom 0 no-repeat; background-size: 150px 250px; }
 .block-inner-sp{ padding-right: 15px; padding-left: 15px; }
 /* ----------------------------------------------------------
.area-header
---------------------------------------------------------- */
 .area-header{ position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100; height: 60px; background: #fff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
  /*opacity: 0; transition-duration: 0.4s; body.js-gmenu-show &{ opacity: 1; }  */ }
 .area-header img{ width: 100%; }
 .area-header ._logo{ position: absolute; top: 3px; width: 100px; left: 10px; }
 .area-header ._name{ position: absolute; top: 13px; font-size: 6px; line-height: 1.6; letter-spacing: 0em; left: 120px; }
 .area-header ._btns{ display: none; }
 .area-menu-btn{ position: fixed; top: 0px;
  /*   opacity: 0; transition-duration: 0.4s; body.js-gmenu-show &{ opacity: 1; } */ right: 0; width: 60px; height: 60px; z-index: 140; }
 .area-menu-btn span{ transition-duration: 0.2s; position: absolute; background: #2b7dc2; height: 2px; left: 15px; right: 15px; }
 .area-menu-btn span:nth-child(1){ top: 25px; }
 .area-menu-btn span:nth-child(2){ bottom: 25px; }
 body.js-gmenu-active .area-menu-btn{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
 body.js-gmenu-active .area-menu-btn span{ background: #000; }
 body.js-gmenu-active .area-menu-btn span:nth-child(1){ position: absolute; top: 30px; -ms-transform: rotate(45deg); transform: rotate(45deg); }
 body.js-gmenu-active .area-menu-btn span:nth-child(2){ position: absolute; top: 30px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
 /* ----------------------------------------------------------
area-mega-menu
---------------------------------------------------------- */
 .area-modal-menu{ position: fixed; z-index: 120; visibility: hidden; z-index: -1; transition-duration: 0.4s; top: 0px; left: 0px; right: 0px; bottom: 0px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; }
 .area-modal-menu:before{ content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; height: 0px; background: rgba(255, 237, 88, 0.95); transition-duration: 0.5s; }
 body.js-gmenu-active .area-modal-menu{ visibility: visible; z-index: 120; }
 body.js-gmenu-active .area-modal-menu:before{ transition-delay: 0.2s; height: 100%; }
 .area-modal-menu ._inner{ position: relative; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.2s; transition-delay: 0s; }
 body.js-gmenu-active .area-modal-menu ._inner{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition-duration: 0s; transition-delay: 0.6s; }
 .area-modal-menu ._btns{ margin-top: 20px; text-align: center; }
 .area-modal-menu ._btns ._btn{ margin-top: 20px; }
 .area-modal-menu ._menu{ position: relative; }
 .area-modal-menu ._menu li{ margin-top: 15px; }
 .area-modal-menu ._menu a{ font-size: 16px; font-weight: bold; letter-spacing: 0.15em; color: #333; }
 /* ----------------------------------------------------------
area-body
---------------------------------------------------------- */
 /* ----------------------------------------------------------
.area-footer
---------------------------------------------------------- */
 .area-footer{ padding: 60px 0 30px 0; position: relative; text-align: center; font-size: 14px; }
 .area-footer img{ width: 100%; }
 .area-footer a{ color: #000; }
 .area-footer a:hover{ text-decoration: underline; }
 .area-footer ._illust{ margin: 0 auto; width: 245px; }
 .area-footer ._logo{ margin: 0 auto; margin-top: 40px; width: 250px; }
 .area-copy{ padding: 20px; text-align: center; position: relative; }
 .area-copy small{ font-size: 12px; letter-spacing: 0.1em; }
 .area-copy a{ color: #000; }
 .area-copy a:hover{ text-decoration: underline; }
 .area-copy ._link{ margin-top: 20px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; }
 .area-copy ._link li{ margin: 0 10px; }
 .area-copy ._link a{ font-size: 12px; letter-spacing: 0.1em; }
 /* ----------------------------------------------------------
.btn-pagetop
---------------------------------------------------------- */
 .btn-pagetop{ position: fixed; display: block; position: fixed; bottom: 100px; right: 10px; z-index: 20; width: 70px; height: 70px; background-image: url(../images/footer/pagetop_sp.png); background-size: 70px 70px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.2s; transition-property: opacity; visibility: hidden; }
 .btn-pagetop.js-show{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; }
 .btn-pagetop.js-show:hover{ opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
 .area-modal-movie{ visibility: hidden; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.2s; transition-duration: 0.4s; -ms-transform: scale(0.9); transform: scale(0.9); position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1000; }
 .area-modal-movie.js-show{ visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -ms-transform: scale(1); transform: scale(1); }
 .area-modal-movie ._modal-bg{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(255, 237, 88, 0.95); }
 .area-modal-movie ._modal-btn-close{ position: absolute; top: 0px; right: 0px; width: 60px; height: 60px; z-index: 140; }
 .area-modal-movie ._modal-btn-close span{ transition-duration: 0.2s; position: absolute; background: #000; height: 2px; left: 15px; right: 15px; }
 .area-modal-movie ._modal-btn-close span:nth-child(1){ top: 30px; -ms-transform: rotate(45deg); transform: rotate(45deg); }
 .area-modal-movie ._modal-btn-close span:nth-child(2){ top: 30px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
 .area-modal-movie ._modal-box{ position: absolute; background: #333; box-sizing: border-box; top: 50%; margin-top: -40vw; width: 100%; height: 56.25vw; }
 .area-modal-movie ._modal-box ._modal-body{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; }
 .area-modal-movie iframe, .area-modal-movie video{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
 .area-modal-privacy{ visibility: hidden; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.2s; transition-duration: 0.4s; -ms-transform: scale(0.9); transform: scale(0.9); position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1000; }
 .area-modal-privacy.js-show{ visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -ms-transform: scale(1); transform: scale(1); }
 .area-modal-privacy ._modal-bg{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(255, 237, 88, 0.95); }
 .area-modal-privacy ._modal-btn-close{ position: absolute; top: 0px; right: 0px; width: 60px; height: 60px; z-index: 140; }
 .area-modal-privacy ._modal-btn-close span{ transition-duration: 0.2s; position: absolute; background: #000; height: 2px; left: 15px; right: 15px; }
 .area-modal-privacy ._modal-btn-close span:nth-child(1){ top: 30px; -ms-transform: rotate(45deg); transform: rotate(45deg); }
 .area-modal-privacy ._modal-btn-close span:nth-child(2){ top: 30px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
 .area-modal-privacy ._modal-box{ position: absolute; top: 50px; left: 10px; right: 10px; bottom: 10px; }
 .area-modal-privacy ._modal-box ._modal-body{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #fff; }
 .area-modal-privacy ._modal-box ._modal-body ._title{ position: absolute; top: 20px; left: 0px; right: 0px; text-align: center; }
 .area-modal-privacy ._modal-box ._modal-body ._title h2{ font-size: 16px; letter-spacing: 0.1em; }
 .area-modal-privacy ._modal-box ._modal-body ._body{ position: absolute; top: 50px; left: 15px; right: 15px; bottom: 15px; overflow-y: scroll; }
 .area-modal-privacy ._modal-box ._modal-body ._body h3{ margin-top: 20px; font-size: 12px; line-height: 1.6; }
 .area-modal-privacy ._modal-box ._modal-body ._body p{ margin-top: 10px; font-size: 10px; line-height: 1.6; } }

@media print, screen and (min-width: 768px){
 .area-wrapper{ min-width: 960px; background: url(../../images/index/download/bg2.svg) right bottom -70px no-repeat; background-size: 740px 700px; }
 .area-inner{ margin: 0 auto; min-width: 960px; max-width: 1120px; }
 .block-inner{ margin: 0 auto; min-width: 960px; max-width: 1120px; }
 .block-inner2{ margin: 0 auto; width: 960px; }
 /* ----------------------------------------------------------
.area-header
---------------------------------------------------------- */
 .area-header{ position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100; height: 90px; background: #fff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);}
 body.js-gmenu-show .area-header{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
 .area-header img{ width: 100%; }
 .area-header ._logo{ position: absolute; top: 3px; width: 170px; height: 40px; font-weight: 800;}
 .area-header ._name{ position: absolute; top: 30px; font-size: 12px; line-height: 1.6; letter-spacing: 0.1em; }
 .area-header ._btns{ position: absolute; top: 20px; right: 120px; display: -ms-flexbox; display: flex; }
 .area-header ._btns ._btn{ position: relative; }
 .area-header ._btns ._btn + ._btn{ margin-left: 10px; }
 .area-menu-btn{ position: fixed; top: 13px;transition-duration: 0.4s; cursor: pointer; width: 60px; height: 60px; z-index: 140; }
 .area-menu-btn:hover{ opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
 .area-menu-btn:hover span{ background: #333; }
 body.js-gmenu-show .area-menu-btn{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
 .area-menu-btn span{ transition-duration: 0.2s; position: absolute; background: #2b7dc2; height: 2px; left: 15px; right: 15px; }
 .area-menu-btn span:nth-child(1){ top: 25px; }
 .area-menu-btn span:nth-child(2){ bottom: 25px; }
 body.js-gmenu-active .area-menu-btn{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
 body.js-gmenu-active .area-menu-btn span{ background: #000; }
 body.js-gmenu-active .area-menu-btn span:nth-child(1){ position: absolute; top: 30px; -ms-transform: rotate(45deg); transform: rotate(45deg); }
 body.js-gmenu-active .area-menu-btn span:nth-child(2){ position: absolute; top: 30px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
 /* ----------------------------------------------------------
area-mega-menu
---------------------------------------------------------- */
 .area-modal-menu{ position: fixed; z-index: 120; visibility: hidden; z-index: -1; transition-duration: 0.4s; top: 0px; left: 0px; right: 0px; bottom: 0px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; }
 .area-modal-menu:before{ content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; height: 0px; background: rgba(255, 237, 88, 0.95); transition-duration: 0.5s; }
 body.js-gmenu-active .area-modal-menu{ visibility: visible; z-index: 120; }
 body.js-gmenu-active .area-modal-menu:before{ transition-delay: 0.2s; height: 100%; }
 .area-modal-menu ._inner{ position: relative; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.2s; }
 body.js-gmenu-active .area-modal-menu ._inner{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition-delay: 0.4s; }
 .area-modal-menu ._btns{ margin-top: 40px; text-align: center; }
 .area-modal-menu ._btns ._btn{ margin-top: 20px; }
 .area-modal-menu ._menu li{ margin-top: 25px; }
 .area-modal-menu ._menu a{ font-size: 24px; font-weight: bold; letter-spacing: 0.15em; color: #333; }
 /* ----------------------------------------------------------
area-mega-menu
---------------------------------------------------------- */
 .area-modal-menu{ position: fixed; z-index: 120; visibility: hidden; z-index: -1; transition-duration: 0.4s; top: 0px; left: 0px; right: 0px; bottom: 0px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; text-align: center; }
 .area-modal-menu:before{ content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; height: 0px; background: rgba(255, 237, 88, 0.95); transition-duration: 0.5s; }
 body.js-gmenu-active .area-modal-menu{ visibility: visible; z-index: 120; }
 body.js-gmenu-active .area-modal-menu:before{ transition-delay: 0.2s; height: 100%; }
 .area-modal-menu ._inner{ position: relative; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.2s; }
 body.js-gmenu-active .area-modal-menu ._inner{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition-delay: 0.4s; }
 .area-modal-menu ._btns{ margin-top: 40px; text-align: center; }
 .area-modal-menu ._btns ._btn{ margin-top: 20px; }
 .area-modal-menu ._menu li{ margin-top: 25px; }
 .area-modal-menu ._menu a{ font-size: 24px; font-weight: bold; letter-spacing: 0.15em; color: #333; }
 /* ----------------------------------------------------------
area-body
---------------------------------------------------------- */
 /* ----------------------------------------------------------
.area-footer
---------------------------------------------------------- */
 .area-footer{ padding: 40px 0 20px 0; position: relative; text-align: center; font-size: 14px; }
 .area-footer img{ width: 100%; }
 .area-footer a{ color: #000; }
 .area-footer a:hover{ text-decoration: underline; }
 .area-footer ._illust{ margin: 0 auto; width: 450px; }
 .area-footer ._logo{ margin: 0 auto; margin-top: 40px; width: 250px; }
 .area-copy{ padding: 30px; text-align: center; position: relative; }
 .area-copy small{ font-size: 12px; letter-spacing: 0.1em; }
 .area-copy a{ color: #000; }
 .area-copy a:hover{ text-decoration: underline; }
 .area-copy ._link{ position: absolute; top: 0px; right: 0px; display: -ms-flexbox; display: flex; }
 .area-copy ._link li{ margin: 0 10px; }
 .area-copy ._link a{ font-size: 12px; letter-spacing: 0.1em; }
 /* ----------------------------------------------------------
.btn-pagetop
---------------------------------------------------------- */
 .btn-pagetop{ position: fixed; display: block; position: fixed; bottom: 100px; cursor: pointer; transition-duration: 0.2s; z-index: 20; width: 70px; height: 70px; background-image: url(../images/footer/pagetop.png); background-size: cover; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.2s; transition-property: opacity; visibility: hidden; }
 .btn-pagetop:hover{ opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
 .btn-pagetop.js-show{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; }
 .btn-pagetop.js-show:hover{ opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
 .area-modal-movie{ visibility: hidden; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.4s; -ms-transform: scale(0.9); transform: scale(0.9); position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1000; }
 .area-modal-movie.js-show{ visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -ms-transform: scale(1); transform: scale(1); }
 .area-modal-movie ._modal-bg{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(255, 237, 88, 0.95); }
 .area-modal-movie ._modal-btn-close{ position: absolute; top: 0px; right: 0px; width: 60px; height: 60px; z-index: 140; }
 .area-modal-movie ._modal-btn-close span{ transition-duration: 0.2s; position: absolute; background: #000; height: 2px; left: 15px; right: 15px; }
 .area-modal-movie ._modal-btn-close span:nth-child(1){ top: 30px; -ms-transform: rotate(45deg); transform: rotate(45deg); }
 .area-modal-movie ._modal-btn-close span:nth-child(2){ top: 30px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
 .area-modal-movie ._modal-box{ position: absolute; box-sizing: border-box; overflow: hidden; border: 3px solid #333; border-radius: 20px; top: 50%; left: 50%; width: 1120px; height: 633px; margin: -315px 0 0 -560px; }
 .area-modal-movie ._modal-box ._modal-body{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; }
 .area-modal-movie iframe, .area-modal-movie video{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
 .area-modal-privacy{ visibility: hidden; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-duration: 0.4s; -ms-transform: scale(0.9); transform: scale(0.9); position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1000; }
 .area-modal-privacy.js-show{ visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -ms-transform: scale(1); transform: scale(1); }
 .area-modal-privacy ._modal-bg{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(255, 237, 88, 0.95); }
 .area-modal-privacy ._modal-btn-close{ position: absolute; top: 0px; right: 0px; width: 60px; height: 60px; z-index: 140; }
 .area-modal-privacy ._modal-btn-close span{ transition-duration: 0.2s; position: absolute; background: #000; height: 2px; left: 15px; right: 15px; }
 .area-modal-privacy ._modal-btn-close span:nth-child(1){ top: 30px; -ms-transform: rotate(45deg); transform: rotate(45deg); }
 .area-modal-privacy ._modal-btn-close span:nth-child(2){ top: 30px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
 .area-modal-privacy ._modal-box{ position: absolute; box-sizing: border-box; overflow: hidden; border: 3px solid #333; border-radius: 20px; top: 50%; left: 50%; width: 1120px; height: 633px; margin: -315px 0 0 -560px; }
 .area-modal-privacy ._modal-box ._modal-body{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #fff; }
 .area-modal-privacy ._modal-box ._modal-body ._title{ position: absolute; top: 40px; left: 0px; right: 0px; text-align: center; }
 .area-modal-privacy ._modal-box ._modal-body ._title h2{ font-size: 28px; letter-spacing: 0.1em; }
 .area-modal-privacy ._modal-box ._modal-body ._body{ position: absolute; top: 100px; left: 30px; right: 30px; bottom: 30px; overflow-y: scroll; }
 .area-modal-privacy ._modal-box ._modal-body ._body h3{ margin-top: 30px; font-size: 16px; line-height: 1.6; }
 .area-modal-privacy ._modal-box ._modal-body ._body p{ margin-top: 10px; font-size: 14px; line-height: 1.6; } }

@media print, screen and (min-width: 768px) and (min-width: 1121px){
 .area-header ._logo{ left: 40px; }
 .area-header ._name{ left: 227px; }
 .area-header ._btns{ right: 120px; }
 .area-menu-btn{ right: 25px; }
 .btn-pagetop{ left: calc(50% + 480px); } }

@media screen and (min-width: 768px) and (max-width: 1120px){
 .area-header ._logo{ left: 10px; }
 .area-header ._name{ left: 197px; }
 .area-header ._btns{ right: 60px; }
 .area-menu-btn{ right: 0;}
 .btn-pagetop{ right: 10px; } }

/*# sourceMappingURL=maps/area.css.map */