@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
/* light 300　regular 400　medium 500　bold 700　black 900 */

:root {
    --s-05px: calc(-.5 / 375 * 100vw);
    --s-1px: calc(-1 / 375 * 100vw);
    --s-2px: calc(-2 / 375 * 100vw);
    --s-7px: calc(-7 / 375 * 100vw);
    --s-8px: calc(-8 / 375 * 100vw);
    --s-20px: calc(-20 / 375 * 100vw);
    --s-40px: calc(-40 / 375 * 100vw);
    --s1px: calc(1 / 375 * 100vw);
    --s2px: calc(2 / 375 * 100vw);
    --s4px: calc(4 / 375 * 100vw);
    --s5px: calc(5 / 375 * 100vw);
    --s8px: calc(8 / 375 * 100vw);
    --s10px: calc(10 / 375 * 100vw);
    --s12px: calc(12 / 375 * 100vw);
    --s14px: calc(14 / 375 * 100vw);
    --s15px: calc(15 / 375 * 100vw);
    --s16px: calc(16 / 375 * 100vw);
    --s17px: calc(17 / 375 * 100vw);
    --s18px: calc(18 / 375 * 100vw);
    --s20px: calc(20 / 375 * 100vw);
    --s22px: calc(22 / 375 * 100vw);
    --s24px: calc(24 / 375 * 100vw);
    --s30px: calc(30 / 375 * 100vw);
    --s34px: calc(34 / 375 * 100vw);
    --s38px: calc(38 / 375 * 100vw);
    --s40px: calc(40 / 375 * 100vw);
    --s44px: calc(44 / 375 * 100vw);
    --s48px: calc(48 / 375 * 100vw);
    --s52px: calc(52 / 375 * 100vw);
    --s60px: calc(60 / 375 * 100vw);
    --s80px: calc(80 / 375 * 100vw);
    --s100px: calc(100 / 375 * 100vw);
    --s105px: calc(105 / 375 * 100vw);
    --s120px: calc(120 / 375 * 100vw);
    --s152px: calc(152 / 375 * 100vw);
    --s157-5px: calc(157.5 / 375 * 100vw);
    --s180px: calc(180 / 375 * 100vw);
    --s225px: calc(225 / 375 * 100vw);
    --s235px: calc(235 / 375 * 100vw);
    --s305px: calc(305 / 375 * 100vw);
    --s490px: calc(490 / 375 * 100vw);
    --s440px: calc(440 / 375 * 100vw);
    --c-violet: #930080;
    --c-douou: #000D80;
    --c-dounan: #818181;
    --c-douhoku: #930080;
    --c-doutou: #0098FF;
    
}

* {
    font-size: 0;
    line-height: 0;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    letter-spacing: var(--s-05px);
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    box-sizing: border-box;
}

img {
    width: 100%;
    height: auto;
}

.wrap {
    margin-right: var(--s20px);
    margin-left: var(--s20px);
}



body {
    background-color: black;
    background-image: url(../../images/smartpachislot/bg_body.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
}

body div#splash-screen,
body header {
    width: 100%;
	height: 100vh;
    min-height: 800px;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

body > .wrap {
    background-image: url(../../images/smartpachislot/bg_hexagon.png);
    background-size: var(--s60px);
    background-position: center;
    background-attachment: fixed;
    margin: 0;
}





header {
    height: 100vh;
    background-image: url(../../images/smartpachislot/bg_top.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

img[id^="top-flash"] {
    mix-blend-mode: screen;
    position: absolute;
}

img#top-flash2 {
    top: 28vh;
}

h1 {
    margin-right: var(--s20px);
    margin-left: var(--s20px);
    padding-top: var(--s10px);
}

h2 {
    margin-right: var(--s10px);
    margin-left: var(--s10px);
    position: absolute;
    top: 12vh;
}

h2 img {
    transform: rotate(-5deg);
}

#top {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 30vh;
}

.top-kisyu {
    width: calc(100% / 3);
}



#youtube {
    position: relative;
    height: var(--s52px);
    background-color: white;
}

#youtube .wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

#youtube iframe {
    width: 100% ;
    height: calc(188 / 375 * 100vw);
}





section#aboutSmartslot {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, #930080 40%, #000000 100%);
    position: relative;
}

section#aboutSmartslot::before,
#howToPlay::before,
#anotherSmartslot .accordion article::before {
    display: block;
    content: "";
    background-image: repeating-linear-gradient(-70deg, transparent, transparent 8px, rgba(255, 0, 196, 0.1) 8px, rgba(255, 0, 196, 0.1) 9px );
    mix-blend-mode: overlay;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#aboutSmartslot h3 {
    padding-top: var(--s40px);
    position: relative;
}

#aboutSmartslot h3::before,
#howToPlay h3::before {
    display: block;
    content: "";
    background-image: url(../../images/smartpachislot/bg_aboutSmaslo_plus.png);
    background-size: 15%;
    mix-blend-mode: darken;
    position: absolute;
    top: var(--s-40px);
    bottom: var(--s-40px);
    left: var(--s-20px);
    right: var(--s-20px);
    z-index: 0;
}

#aboutSmartslot h3 img,
#howToPlay h3 img {
    position: relative;
    z-index: 1;
}

#aboutSmartslot .contents,
#aboutSmartslot .contents ol li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#aboutSmartslot .contents {
    margin-top: var(--s40px);
}

#aboutSmartslot .contents > li {
    width: var(--s305px);
}

#aboutSmartslot .contents p {
    font-size: var(--s16px);
    line-height: var(--s20px);
    color: white;
}

#aboutSmartslot .contents .title {
    width: var(--s30px);
    writing-mode: vertical-rl;
    padding-right: var(--s10px);
    display: flex;
    align-items: center;
}

#aboutSmartslot .contents .title p {
    font-size: var(--s20px);
    line-height: var(--s20px);
    font-weight: 500;
}

#aboutSmartslot .contents ol li~li {
    margin-top: var(--s10px);
}

#aboutSmartslot .contents ol div {
    display: inline-block;
    margin-left: var(--s10px);
    width: var(--s235px);
}

#aboutSmartslot .contents ol .image {
    width: var(--s60px);
    margin: 0;
}

#aboutSmartslot .contents ol .text {
    display: flex;
    align-items: center;
}

#allo {
    height: var(--s30px);
    width: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: var(--s10px);
}

#aboutSmartslot .contents.second {
    margin: 0;
}

#aboutSmartslot .contents.second ol .image {
    width: var(--s105px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#aboutSmartslot .contents.second ol .image p {
    background-color: white;
    color: var(--c-violet);
    font-size: var(--s14px);
    font-weight: bold;
    text-align: center;
    width: 100%;
}

#aboutSmartslot .appeal {
    text-align: center;
    margin-top: var(--s40px);
}

#aboutSmartslot .appeal p,
#aboutSmartslot .appeal strong {
    font-size: var(--s18px);
    line-height: var(--s18px);
    color: white;
    font-weight: 700;
}

#aboutSmartslot .appeal strong {
    display: block;
    font-size: var(--s40px);
    line-height: var(--s40px);
    letter-spacing: calc(-2 / 375 * 100vw);
    color: yellow;
    margin-top: var(--s10px);
    padding-bottom: var(--s8px);
    border-bottom: 1px solid yellow;
}






#anotherSmartslot {
    padding-top: var(--s40px);
    background-color: black;
}

h4 {
    display: inline-block;
    font-size: var(--s20px);
    line-height: var(--s20px);
    color: white;
    background-color: var(--c-violet);
    padding: var(--s8px);
    padding-left: var(--s20px);
    position: relative;
}

h4::after {
    content: "";
    display: block;
    border-top-width: var(--s18px);
    border-top-color: var(--c-violet);
    border-top-style: solid;
    border-left-width: var(--s4px);
    border-left-color: var(--c-violet);
    border-left-style: solid;
    border-right-width: var(--s4px);
    border-right-color: transparent;
    border-right-style: solid;
    border-bottom-width: var(--s18px);
    border-bottom-color: transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 0;
    right: var(--s-8px);
}

#anotherSmartslot .button-box {
    margin-top: var(--s40px);
}

#anotherSmartslot .button-box .button {
    cursor: pointer;
}

#anotherSmartslot .button-box:last-child .button {
    padding-bottom: var(--s40px);
    transition: padding-bottom .5s;
}

#anotherSmartslot .button-box:last-child .button.active {
    padding-bottom: 0;
}

#anotherSmartslot .button p {
    font-size: var(--s16px);
    line-height: var(--s16px);
    font-weight: 500;
    color: white;
    padding: var(--s8px);
    padding-left: var(--s20px);
    border-bottom-width: 1px;
    border-bottom-color: var(--c-violet);
    border-bottom-style: solid;
    position: relative;
}

#anotherSmartslot .button p::before,
#anotherSmartslot .button p::after {
    content: "";
    display: block;
    border-top-width: var(--s16px);
    border-top-color: var(--c-violet);
    border-top-style: solid;
    border-left-width: var(--s4px);
    border-left-color: var(--c-violet);
    border-left-style: solid;
    border-right-width: var(--s4px);
    border-right-color: transparent;
    border-right-style: solid;
    border-bottom-width: var(--s16px);
    border-bottom-color: transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 0;
    left: var(--s8px);
}

#anotherSmartslot .button p::after {
    transform: rotate(180deg);
    left: 0;
}

#anotherSmartslot .button small {
    display: block;
    font-size: var(--s16px);
    line-height: var(--s16px);
    font-weight: 400;
    text-align: right;
    color: white;
    padding-top: var(--s4px);
    padding-right: var(--s30px);
    position: relative;
}

#anotherSmartslot .button small::after {
    display: block;
    content: "";
    border-top-width: var(--s18px);
    border-top-color: var(--c-violet);
    border-top-style: solid;
    border-left-width: var(--s10px);
    border-left-color: transparent;
    border-left-style: solid;
    border-right-width: var(--s10px);
    border-right-color: transparent;
    border-right-style: solid;
    position: absolute;
    top: var(--s4px);
    right: var(--s8px);
}

#anotherSmartslot .accordion article {
    padding-top: var(--s40px);
    padding-bottom: var(--s20px);
    background-color: #000000;
    background-image: linear-gradient(180deg, #000000 0%, #930080 30%, #930080 70%, #110a2f 100%);
    position: relative;
}

#anotherSmartslot .accordion.last article {
    padding-top: var(--s40px);
    padding-bottom: var(--s20px);
    background-color: #000000;
    background-image: linear-gradient(180deg, #000000 0%, #930080 30%, #930080 70%, #FFFFFF 100%);
}

#anotherSmartslot .accordion h5 {
    font-size: var(--s24px);
    line-height: var(--s24px);
    font-weight: 500;
    text-align: center;
    color: white;
}

#anotherSmartslot .accordion figure {
    margin-top: var(--s20px);
    text-align: right;
}

#anotherSmartslot .accordion p {
    font-size: var(--s16px);
    line-height: var(--s24px);
    color: white;
    margin-top: var(--s20px);
}

#anotherSmartslot .accordion small {
    display: block;
    font-size: var(--s12px);
    line-height: var(--s12px);
    color: white;
    margin-top: var(--s8px);
}





#howToPlay {
    padding-top: var(--s30px);
    padding-bottom: var(--s20px);
    background-color: #000000;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 10%, #930080 40%, #930080 50%, #110a2f 100%);
    position: relative;
}

#howToPlay h3 {
    position: relative;
}

#howToPlay div > img {
    display: block;
    margin-top: var(--s20px);
}




#lineUp,
#shop-search {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: var(--s8px);
    padding-bottom: var(--s40px);
    overflow: hidden;

}

#lineUp {
    background-image: url(../../images/smartpachislot/bg_lineup.png);
}

#lineUp h3,
#shop-search h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--s20px);
    padding-bottom: var(--s38px);
    padding-top: var(--s34px);
    position: relative;
}

#lineUp h3 img.bg-h3,
#shop-search h3 img.bg-h3 {
    filter: drop-shadow(0 0 var(--s20px) #82deff);
    position: absolute;
    top: 0;
    left: 0;
}

#lineUp h3 figure,
#shop-search h3 figure {
    width: var(--s100px);
}

#lineUp h3 span,
#shop-search h3 span {
    display: block;
    width: var(--s225px);
    font-size: var(--s44px);
    line-height: var(--s48px);
    font-weight: bold;
    text-align: center;
    color: #EAFFFF;
    text-shadow: 0 0 var(--s20px) #00baff;
    transform: scaleY(102%);
    white-space: nowrap;
}

#lineUp h3 > span,
#shop-search h3 > span {
    margin-left: var(--s10px);
    letter-spacing: var(--s-7px);
}

#lineUp h3 span span {
    letter-spacing: var(--s-2px);
    transform: scale(0.95, 1.02);
    font-size: var(--s40px);
    width: auto;
}

#lineUp .contents {
    padding-top: var(--s20px);
}

#lineUp .contents li~li {
    margin-top: var(--s-8px);
}

#lineUp .contents .left {
    padding-right: var(--s10px);
    position: relative;
    left: -100vw;
}

#lineUp .contents .right {
    padding-left: var(--s10px);
    position: relative;
    right: -100vw;
}

#lineUp .contents li > div {
    position: relative;
}

#lineUp .contents .text {
    position: absolute;
    /* bottom: var(--s14px);*/
    top: var(--s60px);
}

#lineUp .contents .left .text {
    left: var(--s152px);
}

#lineUp .contents .right .text {
    left: var(--s30px);
}

#lineUp .contents .text p,
#lineUp .contents .text p span {
    font-size: var(--s24px);
    line-height: var(--s30px);
    font-weight: bold;
    color: white;
}

#lineUp .contents .text p span {
    display: block;
    transform: scale(.83, 1);
    margin-left: var(--s-20px);
}

#lineUp .contents .group {
    padding-top: var(--s4px);
}

#lineUp .contents .group p {
    font-size: var(--s16px);
    line-height: var(--s16px);
    font-weight: 500;
}

#lineUp .contents .group span {
    font-size: var(--s40px);
    line-height: var(--s40px);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: aqua;
    padding: 0 var(--s4px);
}   




#shop-search {
    background-image: url(../../images/smartpachislot/bg_shop.png);
}

#shop-search h3 span {
    width: var(--s180px);
    letter-spacing: var(--s-05px);
}

#shop-search h3 span span {
    width: auto;
}

#map-all {
    margin-top: var(--s40px);
}

#map-all #control #menu {
    display: flex;
    justify-content: space-between;
    background-color: white;
    position: relative;
}

#map-all #control #menu::before,
#map-all #control #menu::after {
    content: "";
    display: block;
    background-color: #CECECE;
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
}

#map-all #control #menu::before {
    left: calc(100% / 3);
}

#map-all #control #menu::after {
    right: calc(100% / 3);
}

#map-all #control li[id^="button"] {
    width: calc(100% / 3);
    cursor: pointer;
}

#map-all #control #menu p {
    font-size: var(--s20px);
    line-height: var(--s20px);
    font-weight: bold;
    text-align: center;
    padding: var(--s8px) 0;
    border-bottom: 1px solid #CECECE;
}

#map-all #control #button-douou p {
    color: var(--c-douou);
}

#map-all #control #button-dounan p {
/*    color: var(--c-dounan); */
    color : #ffffff;
}

#map-all #control #button-dounan {
    background-color :#b4b4b4;
}


#map-all #control #button-douhoku p {
    color: var(--c-douhoku);
}

#map-all #control #button-doutou p {
    color: var(--c-doutou);
}

#map-all #control #menu li#button-douou.active p {
    color: white;
    background-color: var(--c-douou);
}

#map-all #control #menu li#button-dounan.active p {
    color: white;
    background-color: var(--c-dounan);
}

#map-all #control #menu li#button-douhoku.active p {
    color: white;
    background-color: var(--c-douhoku);
}

#map-all #control #menu li#button-doutou.active p {
    color: white;
    background-color: var(--c-doutou);
}

#map-all #control #map-image {
    background-color: white;
    padding: var(--s10px);
    position: relative;
}

#map-all #control #map-image figure {
    position: relative;
}

#map-all #control #map-image #map1.active {
    opacity: 1;
}

#map-all #control #map-image #map1 {
    opacity: 0;
}

#map-all #control #map-image img~img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s;
}

#map-all #control #map-image img~img.active {
    opacity: 1;
}

#map-all #result {
    background-color: white;
    padding: var(--s10px);
    margin-top: var(--s20px);
    height: var(--s490px);
    position: relative;
}

#map-all #result > div {
    background-color: white;
    position: absolute;
    top: var(--s10px);
    left: 100vw;
    right: -100vw;
    margin: 0 auto;
    opacity: 0;
    transition: 1s;
}

#map-all #result > div.active {
    left: var(--s10px);
    right: var(--s10px);
    opacity: 1;
    transition: .6s;
}

#map-all #result p.title {
    font-size: var(--s20px);
    line-height: var(--s20px);
    font-weight: bold;
    text-align: center;
    color: white;
    padding: var(--s8px) 0;
    background-color: #4D4D4D;
}

#map-all #result .douou p.title {
    background-color: var(--c-douou);
}

#map-all #result .dounan p.title {
    background-color: var(--c-dounan);
}

#map-all #result .douhoku p.title {
    background-color: var(--c-douhoku);
}

#map-all #result .doutou p.title {
    background-color: var(--c-doutou);
}

/* #map-all #result #area .contents {
    display: flex;
    align-items: center;
    justify-content: center;
} */

#map-all #result .contents {
    height: var(--s440px);
}

#map-all #result .contents p {
    font-size: var(--s20px);
    line-height: var(--s24px);
    text-align: center;
    color: #666666;
}

#map-all [id^="list"] .contents p {
    padding:  var(--s12px);
    padding-bottom: 0;
}

/* #map-all #list-douou .contents p.sub {
    font-weight: 500;
    border-top: 1px solid #B4B4B4;
    padding-bottom: var(--s10px);
} */

#map-all #list-douou .contents li,
#map-all #list-doutou .contents li {
    font-size: var(--s20px);
    line-height: var(--s20px);
    font-weight: 500;
    color: #333333;
    padding: var(--s8px) 0;
    padding-left: var(--s24px);
    position: relative;
    cursor: pointer;
}

#map-all #list-douou .contents li.next {
    border-top: 1px solid #B4B4B4;
    padding: var(--s16px) 0;
    padding-left: var(--s24px);
    padding-bottom: var(--s8px);
    margin-top: var(--s12px);
}

#map-all #list-douou .contents li.next:first-child {
    margin-top: var(--s8px);
}

#map-all #list-douou .contents li::before,
#map-all #list-douou .contents li::after,
#map-all #list-doutou .contents li::before,
#map-all #list-doutou .contents li::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
}

#map-all #list-douou .contents li::before,
#map-all #list-doutou .contents li::before {
    width: var(--s20px);
    height: var(--s20px);
    border: 1px solid #81818181;
    top: var(--s10px);
    left: 0;
}

#map-all #list-douou .contents li.next::before {
    top: var(--s17px);
}

#map-all #list-douou .contents li::after,
#map-all #list-doutou .contents li::after {
    width: var(--s10px);
    height: var(--s10px);
    background-color: #0098FF;
    top: var(--s15px);
    left: var(--s5px);
    opacity: 0;
}

#map-all #list-douou .contents li.next::after {
    top: var(--s22px);
}

#map-all #list-douou .contents li:focus-within::after,
#map-all #list-doutou .contents li:focus-within::after {
    opacity: 1;
}

#map-all #list-douou .contents li input,
#map-all #list-doutou .contents li input {
    width: 100%;
    height: var(--s20px);
    position: absolute;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
/* 
#map-all [id^="shop"],
#map-all #list-douhoku {
    left: 100vw;
    right: -100vw;
}

#map-all [id^="shop"].active,
#map-all #list-douhoku.active {
    left: 0;
    right: 0;
} */

/* スマスロその他特徴 アコーディオン */
#anotherSmartslot .accordion.box1,
#anotherSmartslot .accordion.box2,
#anotherSmartslot .accordion.box3 {
    display : none;
}

#anotherSmartslot .accordion.box1 .active,
#anotherSmartslot .accordion.box2 .active,
#anotherSmartslot .accordion.box3 .active {
    display : block;
}


/* 店舗情報 contents内 */

#map-all #result [id^="shop"] .contents > p,
#map-all #result #list-douhoku .contents > p {
    padding-top: var(--s8px);
    font-weight: bold;
    color: #333333;
}

#map-all #result [id^="shop"] .contents > img,
#map-all #result #list-douhoku .contents > img {
    display: block;
    margin-top: var(--s4px);
}

#map-all #result [id^="shop"] .contents > ol,
#map-all #result #list-douhoku .contents > ol {
    padding-top: var(--s8px);
}

#map-all #result .contents ol dt,
#map-all #result .contents ol dd,
#map-all #result .contents ol dd * {
    font-size     : var(--s14px);
    letter-spacing: var(--s5px);
    line-height   : 1;
    color: #333333;
    font-weight   : 400;
    float         : left;
}

#map-all #result .contents ol dt{
    width       : 28%;
    padding: var(--s4px) 0;
}

#map-all #result .contents ol dd {
    width       : 70%;
    border-left : solid 1px #9b9b9b;
    padding     : 2% 0 2% 5%;
}

#map-all #result [id^="shop"] .contents ol dd > *,
#map-all #result #list-douhoku .contents ol dd > *{
    font-size: var(--s14px);
    line-height: var(--s14px);
}

#map-all #result [id^="shop"] .p-world,
#map-all #result #list-douhoku .p-world {
    display: inline-block;
    margin: var(--s12px) 0;
    cursor: pointer;
}

#map-all #result [id^="shop"] .toShopList,
#map-all #result #list-douhoku .toShopList {
    display: flex;
    justify-content: center;
}

#map-all #result [id^="shop"] .toShopList .btn_back p,
#map-all #result #list-douhoku .toShopList .btn_back p {
    font-size: var(--s12px);
    line-height: var(--s12px);
    text-align: center;
    font-weight: bold;
    padding: var(--s8px) var(--s30px);
    cursor: pointer;
}

#map-all #result [id^="shop"] .toShopList.douou .btn_back p,
#map-all #result #list-douhoku .toShopList.douou .btn_back p {
    background-color: #c2d4ff;
    color: var(--c-douou);
}

#map-all #result [id^="shop"] .toShopList.doutou .btn_back p,
#map-all #result #list-douhoku .toShopList.doutou .btn_back p {
    background-color: #cff2ff;
    color: #0066ac;
}



/* 店舗・運営会社情報ボタン */
#btn-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--s20px);
}

.btn {
	background-color : rgba(202,255,255,0.8);
    width: var(--s157-5px);
}

#btn-info a {
    display: block;
	font-size: var(--s16px);
	line-height: var(--s16px);
    text-align: center;
    padding: var(--s8px) 0;
	color: #002771;
    font-weight  : bold;
}





footer {
    background-image: url(../../images/smartpachislot/bg_footer.png);
}

footer * {
    color: white;
}

footer small {
    display: block;
    font-size: var(--s12px);
    line-height: var(--s12px);
    padding-top: var(--s20px);
    padding-bottom: var(--s10px);
}

footer p {
    font-size: var(--s16px);
    line-height: var(--s16px);
    text-align: center;
    padding: var(--s20px) 0;
    border-top: 1px solid white;
}





/* 企業情報・運営会社情報 */
#corp-info {
    background-image: url(../../images/smartpachislot/bg_info.png);
    background-size : cover;
    background-position: top center;
    min-height: 667px;
    height: 100vh;
    position: relative;
}

#corp-info * {
    color      : #FFFFFF;
}

#corp-info section {
    margin: auto 7%;
    width : 86%;
}

#corp-info table {
    padding-top   :   7%;
    padding-bottom:   5%;
    width         : 100%;
    text-align    : left;
}

#corp-info table thead tr th {
    font-size  : var(--s20px);
    line-height: var(--s20px);
    font-weight: bold;
    text-align : center;
}

#corp-info table tbody th {
    width : 30%;
}

#corp-info table tbody td {
    width : 70%;
}

#corp-info table tbody th p,
#corp-info table tbody td p {
    font-size: var(--s16px);
    line-height: var(--s18px);
    padding-top: var(--s8px);
}

#corp-info .analytics-info > div {
    padding-top  : var(--s20px);
    border-top   : solid 1px;
    font-size    : var(--s16px);
    line-height: var(--s20px);
    font-weight  : bold;
    text-align   : center;
}

#corp-info .analytics-info p {
    font-size  : var(--s14px);
    line-height: var(--s20px);
    font-weight: 400;
    margin-top: var(--s8px);
    letter-spacing: var(--s-1px);
}

#corp-info .analytics-info p span a {
    font-size: var(--s14px);
    line-height: var(--s20px);
    font-weight  : 500;
    color     : #00ffff ;
}

#corp-info .analytics-info p span a img {
    display: inline-block;
    width: var(--s12px);
    margin-left: var(--s8px);
}

#corp-info #btn-info {
    justify-content: center;
    /* position: absolute;
    left: 0;
    right: 0;
    bottom: var(--s40px); */
}

/* #corp-info footer.corp-info-footer {
    font-size: var(--s12px);
    line-height: var(--s12px);
    padding: var(--s8px) 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom    :    0;
    text-align: center;
} */



@media screen and (min-width: 380px) {
    #youtube {
        height: 30vw;
    }
}

@media screen and (min-width: 420px) {
    #youtube {
        height: 50vw;
    }
}

@media screen and (min-width: 500px) {
    body header {
        min-height: 960px;
    }
}

@media screen and (min-width: 650px) {
    body header {
        min-height: 1100px;
    }
}




@media screen and (min-width: 768px) {
:root {
    --s-05px: calc(-.5 / 375 * 50vw);
    --s-1px: calc(-1 / 375 * 50vw);
    --s-2px: calc(-2 / 375 * 50vw);
    --s-7px: calc(-7 / 375 * 50vw);
    --s-8px: calc(-8 / 375 * 50vw);
    --s-20px: calc(-20 / 375 * 50vw);
    --s-40px: calc(-40 / 375 * 50vw);
    --s1px: calc(1 / 375 * 50vw);
    --s2px: calc(2 / 375 * 50vw);
    --s4px: calc(4 / 375 * 50vw);
    --s5px: calc(5 / 375 * 50vw);
    --s8px: calc(8 / 375 * 50vw);
    --s10px: calc(10 / 375 * 50vw);
    --s12px: calc(12 / 375 * 50vw);
    --s14px: calc(14 / 375 * 50vw);
    --s15px: calc(15 / 375 * 50vw);
    --s16px: calc(16 / 375 * 50vw);
    --s17px: calc(17 / 375 * 50vw);
    --s18px: calc(18 / 375 * 50vw);
    --s20px: calc(20 / 375 * 50vw);
    --s22px: calc(22 / 375 * 50vw);
    --s24px: calc(24 / 375 * 50vw);
    --s30px: calc(30 / 375 * 50vw);
    --s34px: calc(34 / 375 * 50vw);
    --s38px: calc(38 / 375 * 50vw);
    --s40px: calc(40 / 375 * 50vw);
    --s44px: calc(44 / 375 * 50vw);
    --s48px: calc(48 / 375 * 50vw);
    --s52px: calc(52 / 375 * 50vw);
    --s60px: calc(60 / 375 * 50vw);
    --s80px: calc(80 / 375 * 50vw);
    --s100px: calc(100 / 375 * 50vw);
    --s105px: calc(105 / 375 * 50vw);
    --s120px: calc(120 / 375 * 50vw);
    --s152px: calc(152 / 375 * 50vw);
    --s157-5px: calc(157.5 / 375 * 50vw);
    --s180px: calc(180 / 375 * 50vw);
    --s200px: calc(200 / 375 * 50vw);
    --s225px: calc(225 / 375 * 50vw);
    --s235px: calc(235 / 375 * 50vw);
    --s305px: calc(305 / 375 * 50vw);
    --s490px: calc(490 / 375 * 50vw);
    --s440px: calc(440 / 375 * 50vw);
    
}

body div#splash-screen,
body header,
#corp-info {
    height: calc(667 / 375 * 50vw);
}

body header {
    min-height: inherit;
}

body > .wrap > article {
    width: 50%;
    margin: 0 auto;
}

img#top-flash2 {
    top: var(--s180px);
}

h2 {
    top: var(--s80px);
}

#top {
    top: var(--s200px);
}

#youtube {
    height: auto;
}

#youtube .wrap {
    position: relative;
    bottom: var(--s12px);
}

#youtube iframe {
    height: calc(188 / 375 * 50vw);
}
}




/* Firefox */
@-moz-document url-prefix() {
h4::after {
    right: calc(-6 / 375 * 100vw);
}

#anotherSmartslot .button p::before,
#anotherSmartslot .button p::after {
    top: var(--s1px);
}

#anotherSmartslot .button p::before {
    left: calc(6 / 375 * 100vw);
}

#anotherSmartslot .button small {
    margin-bottom: var(--s2px);
}

    @media screen and (min-width: 768px) {
        h4::after {
            right: var(--s-7px);
        }

        #anotherSmartslot .button p::before {
            left: calc(7 / 375 * 50vw);
        }
    }
}


/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
_::-webkit-full-page-media, _:future, :root
h4::after {
    right: calc(-6 / 375 * 100vw);
}

_::-webkit-full-page-media, _:future, :root
#anotherSmartslot .button p::before,
#anotherSmartslot .button p::after {
    top: var(--s1px);
}

_::-webkit-full-page-media, _:future, :root
#anotherSmartslot .button p::before {
    left: calc(6.5 / 375 * 100vw);
}

_::-webkit-full-page-media, _:future, :root
#anotherSmartslot .button small {
    margin-bottom: var(--s2px);
}

_::-webkit-full-page-media, _:future, :root
#lineUp h3 > span {
    letter-spacing: calc(-7.5 / 375 * 100vw);
}

@media screen and (min-width: 768px) {
    _::-webkit-full-page-media, _:future, :root
    h4::after {
        right: calc(-6.5 / 375 * 50vw);
    }

    _::-webkit-full-page-media, _:future, :root
    #anotherSmartslot .button p::before {
        left: calc(6.5 / 375 * 50vw);
    }

    _::-webkit-full-page-media, _:future, :root
    #lineUp h3 > span {
        letter-spacing: calc(-7.5 / 375 * 50vw);
    }
}
}