@charset "Shift_JIS";
/************************************************************************************
*  octopathtraveler0 section
************************************************************************************/
* {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
}

body {
    background-color: #334130;
    position: relative;
}

article.octopathtraveler0 {
    color: #FFF;
}

.octopathtraveler0 img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    width: auto;
}

.octopathtraveler0 .notice {
    padding-left: 1em;
    text-indent: -1em;
}

.octopathtraveler0 section {
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
}


/* mv
-----------------------------------------------------------*/
.mv {
    margin-bottom: calc(50 / 640 * 100vw);
}


/* itemInfo_wrap
-----------------------------------------------------------*/
.itemInfo_wrap {
    margin: 0 auto calc(70 / 640 * 100vw);
    width: calc(580 / 640 * 100vw);
}

/* itemInfo_wrap > privilege */
.privilege h2 {
    background-image: linear-gradient(90deg, #426e87, #214259);
    font-size: calc(34 / 640 * 100vw);
    font-weight: 700;
    margin-bottom: calc(20 / 640 * 100vw);
    padding: calc(19 / 640 * 100vw) 0;
    text-align: center;
}

.privilege p {
    font-size: calc(20 / 640 * 100vw);
    margin-bottom: calc(20 / 640 * 100vw);
    text-align: center;
}

.privilege_item {
    margin-bottom: calc(60 / 640 * 100vw);
}

.privilege_item img {
    margin-bottom: calc(20 / 640 * 100vw);
}

.privilege_item .method dt,
.privilege_item .method dd {
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(14 / 640 * 100vw);
    font-weight: 300;
}

.privilege p.notice {
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(14 / 640 * 100vw);
    font-weight: 300;
    margin-top: calc(10 / 640 * 100vw);
    text-align: left;
}

/* itemInfo_wrap > items */
.items {
    background-color: #ffffff;
    margin: auto;
    outline : 3px solid #C9C9C9;
    outline-offset : calc(10 / 640 * 100vw);
    padding: calc(10/ 640 * 100vw);
    width: calc(560/ 640 * 100vw);
}

.items h2 {
    background-color: #FFF;
    border-top: solid 1px #000;
    border-left: solid 1px #000;
    border-right: solid 1px #000;
    color: #000;
    font-size: calc(36 / 640 * 100vw);
    padding: calc(20 / 640 * 100vw) 0 calc(30 / 640 * 100vw);
    text-align: center;
    width: calc(560 / 640 * 100vw);
}

.items ul.notice {
    margin-top: calc(20 / 640 * 100vw);
    font-size: calc(14 / 640 * 100vw);
}

.items .notice li {
    color: #000;
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(14 / 640 * 100vw);
    font-weight: 300;
    text-align: left;
}

/* items_wrap */
.items_wrap {
    background-color: #ffffff;
    border-left: solid 1px #000;
    border-right: solid 1px #000;
    border-bottom: solid 1px #000;
    padding-bottom: calc(10 / 640 * 100vw);
    width: calc(560 / 640 * 100vw);
}

.item_info {
    background-color: #FFF;
    font-weight: 700;
    margin: auto;
    padding: 0 calc(30 / 640 * 100vw) calc(40 / 640 * 100vw);
    text-align: center;
    width: calc(480 / 640 * 100vw);
}

/* model */
.model {
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(22 / 640 * 100vw);
    height: calc(48 / 640 * 100vw);
    line-height: calc(48 / 640 * 100vw);
    width: calc(480 / 640 * 100vw);
}

.model_swi2 .model,
.model_swi .model {
    background-color: #E4000F;
    color: #FFF;
}

.model_ps5 .model {
    background-color: #D6DCE5;
    color: #000;
}

.model_ps4 .model {
    background-color: #01479D;
    color: #ffffff;
}

/* price */
.price_title {
    color: #FF000C;
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(24 / 640 * 100vw);
}

.item_price {
    margin-bottom: calc(30 / 640 * 100vw);
}

.item_price .price_font {
    color: #FF000C;
    font-size: calc(110 / 640 * 100vw);
    letter-spacing: calc(-4 / 640 * 100vw);
}

.item_price .yen {
    color: #FF000C;
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(55 / 640 * 100vw);
    left: calc(10 / 640 * 100vw);
}

.item_price .yen::before {
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    left: calc(-2 / 640 * 100vw);
    top: calc(-18 / 640 * 100vw);
}

.octopathtraveler0 img.cta_btn {
    width: calc(390 / 640 * 100vw);
}

a.cta_btn,
img.cta_btn,
img.btn_soldout {
    position: static;
    width: calc(390 / 640 * 100vw);
}

/* package_img */
.octopathtraveler0 .model_swi2 > img.package_img,
.octopathtraveler0 .model_swi > img.package_img {
    margin:calc(30 / 640 * 100vw) auto calc(20 / 640 * 100vw);
    width: calc(210 / 640 * 100vw);
}

.octopathtraveler0 .model_ps5 > img.package_img,
.octopathtraveler0 .model_ps4 > img.package_img {
    margin:calc(30 / 640 * 100vw) auto calc(20 / 640 * 100vw);
    width: calc(260 / 640 * 100vw);
}

/* movie
-----------------------------------------------------------*/
section.movie {
    margin-bottom: calc(60 / 640 * 100vw);
}

.movie h2 img.movie_title {
    margin-bottom: calc(30 / 640 * 100vw);
    width: calc(620 / 640 * 100vw);
}

.octopathtraveler0 .movie .movie_box {
    height: calc(310 * 100vw / 640);
    margin: auto;
    padding: 0;
    width: calc(550 * 100vw / 640);
}

.movie_box iframe {
    height: calc(310 * 100vw / 640);
    width: calc(550 * 100vw / 640);
}

/* about
-----------------------------------------------------------*/
section.about {
    margin-bottom: calc(60 / 640 * 100vw);
}

.about h2 img.about_title {
    margin-bottom: calc(60 / 640 * 100vw);
    width: calc(620 / 640 * 100vw);
}

img.about_text {
    width: calc(538 / 640 * 100vw);
margin-bottom: calc(40 / 640 * 100vw);
}

img.about_text:nth-of-type(2){
    width: calc(459 / 640 * 100vw);
    margin-bottom: calc(20 / 640 * 100vw);
}

img.about_text:nth-of-type(3){
    width: calc(566 / 640 * 100vw);
}

img.about_img {
    margin-bottom: calc(60 / 640 * 100vw);
    width: calc(520 / 640 * 100vw);
}

.about .notice {
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(12 / 640 * 100vw);
    font-weight: 300;
    margin-bottom: calc(30 / 640 * 100vw);
    text-align: center;
}

/* story
-----------------------------------------------------------*/
img.story_title {
    margin-bottom: calc(50 / 640 * 100vw);
    width: calc(620 / 640 * 100vw);
}

img.story_text {
    margin-bottom: calc(40 / 640 * 100vw);
    width: calc(556 / 640 * 100vw);
}

img.story_img {
    margin-bottom: calc(60 / 640 * 100vw);
    width: calc(520 / 640 * 100vw);
}


/* traveler
-----------------------------------------------------------*/
section.traveler {
    margin-bottom: calc(60 / 640 * 100vw);
}

img.traveler_title {
    margin-bottom: calc(40 / 640 * 100vw);
    width: 100%;
}

img.traveler_hero {
    margin-bottom: calc(40 / 640 * 100vw);
    width: calc(566 / 640 * 100vw);
}

img.traveler_subtitle {
    margin-bottom: calc(40 / 640 * 100vw);
    width: calc(415 / 640 * 100vw);
}

img.traveler_member {
    width: calc(566 / 640 * 100vw);
    margin-top: calc(30 / 640 * 100vw);
}


/* system
-----------------------------------------------------------*/
section.system {
    margin-bottom: calc(42 / 640 * 100vw);
}

img.system_title {
    margin-bottom: calc(50 / 640 * 100vw);
    width: calc(620 / 640 * 100vw);
}

/* system > systemUnique_wrap */
.systemUnique_wrap {
    width: calc(480 / 640 * 100vw);
    margin: 0 auto calc(50 / 640 * 100vw);
}

.systemUnique_wrap img.system_subtitle {
    margin-bottom: calc(30 / 640 * 100vw);
    width: calc(343 / 640 * 100vw);
}

.systemUnique_inner {
    margin-top: calc(20 / 640 * 100vw);
}

.systemUnique_inner dt {
    line-height: calc(56 / 640 * 100vw);
    font-size: calc(30 / 640 * 100vw);
    padding-left: calc(20 / 640 * 100vw);
    background-image: linear-gradient(90deg, #f0f0d2, #b6dbe1);
    color: #000;
    font-weight: 600;
    z-index: 10;
    position: relative;
}

.systemUnique_inner dd {
    border: solid 2px #A7A7A7;
    margin-top: -2px;
}

.systemUnique_inner dd img.system_img {
    margin-top: calc(20 / 640 * 100vw);
}

.systemUnique_inner dd p.systemUnique_text {
    padding: calc(20 / 640 * 100vw);
    font-size: calc(18 / 640 * 100vw);
}

.systemUnique_inner dd p.notice {
    font-size: calc(12 / 640 * 100vw);
    margin: calc(-10 / 640 * 100vw) calc(20 / 640 * 100vw) calc(20 / 640 * 100vw);
}

/* system > systemBasicElements_wrap */
.systemBasicElements_wrap {
    width: calc(520 / 640 * 100vw);margin: 0 auto calc(50 / 640 * 100vw);
}

.systemBasicElements_wrap h3:nth-of-type(1) {
    margin: calc(30 / 640 * 100vw) auto;
    width: calc(170 / 640 * 100vw);
}

.systemBasicElements_wrap h3:nth-of-type(2) { 
     width: calc(446 / 640 * 100vw);
    margin: calc(30 / 640 * 100vw) auto;
}


.systemBasicElements_wrap dt {
    line-height: calc(56 / 640 * 100vw);
    font-size: calc(30 / 640 * 100vw);
    padding-left: calc(20 / 640 * 100vw);
    background-image: linear-gradient(90deg, #f0f0d2, #b6dbe1);
    color: #000;
    font-weight: 600;
    margin-top: calc(20 / 640 * 100vw);
}

.systemBasicElements_wrap dd p.systemBasicElements_text {
    padding: calc(20 / 640 * 100vw) 0;
    font-size: calc(18 / 640 * 100vw);
}





p.notice_bottom {
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(14 / 640 * 100vw);
    font-weight: 300;
    text-align: center;
    margin-bottom: calc(80 / 640 * 100vw);
}


/* cta_btn_bottom
-----------------------------------------------------------*/
.cta_btn_bottom {
    display: flex;
    justify-content: center;
    margin: 0 auto calc(40 / 640 * 100vw);
    width: calc(390 / 640 * 100vw);
}


/* inner footer
-----------------------------------------------------------*/
.inner_footer {
    align-content: center;
    align-items: center;
    color: #FFF;
    margin: 0;
    padding-bottom: calc(180 / 640 * 100vw);
    text-align: center;
}

.inner_footer p {
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: calc(14 / 640 * 100vw);
    font-weight: 300;
}

.inner_footer .octopathtraveler0 {
    margin-bottom: calc(30 / 640 * 100vw);
}

.inner_footer p.ps {
    font-size: calc(14 / 640 * 100vw);
    margin-bottom: calc(14 / 640 * 100vw);
}

.inner_footer .nintendo {
    font-size: calc(14 / 640 * 100vw);
    margin-bottom: calc(20 / 640 * 100vw);
}

.inner_footer img.ps {
    display: inline-block;
    height: 1.2em;
}

.inner_footer img.ps5 {
    display: inline-block;
    height: 0.8em;
}

.inner_footer img.ps4 {
    display: inline-block;
    height: 0.8em;
}

/* footer
-----------------------------------------------------------*/
.block_of_static_ttl_ {
    font-size: calc(16/375*100vw);
    color: #fff;
    padding: calc(16/375*100vw) calc(15/375*100vw);
    margin: 0;
    background-color: #31457e;
    line-height: 1;
    font-weight: normal;
    border-bottom: none;
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

#footer_geoonline_store {
    background: #1b2b5b;
    padding: calc(20/375*100vw) calc(10/375*100vw) calc(1/375*100vw);
}

#footer_geoonline_store dt {
    color: #fff;
    font-size: calc(14/375*100vw);
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: calc(20/375*100vw);
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

#footer_geoonline_store dd {
    font-size: calc(7/375*100vw);
    line-height: 1.5em;
    margin: 0 0 calc(20/375*100vw) calc(10/375*100vw);
}

#footer_geoonline_store ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#footer_geoonline_store li {
    margin-bottom: calc(10/375*100vw);
    text-align: left;
}

#footer_geoonline_store dl:not(.two-column) li {
    width: 100%;
}

#footer_geoonline_store .two-column li {
    width: 45%;
}

#footer_geoonline_store a {
    color: #fff;
    display: block;
    font-size: calc(12/375*100vw);
    line-height: 1.5;
    background: url(http://ec.geo-online.co.jp/img/usr/fb/footer/footer_arrow.png) top 0.5em left no-repeat;
    background-size: calc(6/375*100vw);
    padding-left: calc(12/375*100vw);
    text-decoration: none;
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-weight: 500;
}

#footernav_accordion {
    position: relative;
    background-color: #4d4d4d;
    font-size: calc(16/375*100vw);
    color: #fff;
    padding: calc(16/375*100vw) calc(30/375*100vw) calc(16/375*100vw) calc(15/375*100vw);
    line-height: 1;
    cursor: pointer;
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-weight: 300;
}

#footernav_accordion::after {
    position: absolute;
    top: 50%;
    right: calc(15/375*100vw);
    width: calc(10/375*100vw);
    height: calc(10/375*100vw);
    margin: calc(-10/375*100vw) auto auto auto;
    border-right: calc(3/375*100vw) solid #fff;
    border-bottom: calc(3/375*100vw) solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}

#footernav_accordion.open::after {
    border-right: none;
    border-bottom: none;
    border-top: calc(1/375*100vw) solid #fff;
    border-left: calc(1/375*100vw) solid #fff;
    margin: calc(-2/375*100vw) auto auto auto;
}

#footerLink {
    padding: calc(20/375*100vw) calc(10/375*100vw);
    background: #eee;
    font-size: calc(12/375*100vw);
}

#footerLink li {
    display: inline-block;
    margin: 0 25px 10px 0;
}

#footerLink a {
    color: #666;
    font-family: 'メイリオ', Meiryo, '游ゴシック体', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-weight: 500;
    text-decoration: none;
}

#footerLink li a.blank:after {
    display: inline-block;
    content: "";
    height: 12px;
    width: 24px;
    margin-left: 3px;
    background: url(https://ec.geo-online.co.jp/img/footer/footerBlankWindow.png) no-repeat center center;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    font-size: 0.1em;
    line-height: 0;
}

#footerLink ul:nth-child(even) {
    border-top: calc(1/375*100vw) solid #ccc;
    padding-top: calc(10/375*100vw);
}

#copyright {
    display: block;
    height: auto;
    box-sizing: border-box;
    padding: calc(10/375*100vw) 0;
    font-size: calc(7/375*100vw);
    line-height: 1.5em;
    color: #999;
    text-align: center;
    background: #FFF;
}

#pagetopBtn {
    background: #192b5b;
    bottom: 50px;
    display: none;
    height: calc(80 * 100vw / 640);
    position: fixed;
    right: 0;
    width: calc(80 * 100vw / 640);
    z-index: 2;
}