html {
    scroll-behavior: smooth;
}

.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

/* 追従ボタン*/
.button {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    background: rgb(255,255,255,0.5);
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

@media screen and (max-width:767px) {
    .button {
        height: calc((1/30)*100vw + 74px/3);
        width: calc((1/30)*100vw + 74px/3);
    }
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

@media screen and (max-width:767px) {
    .pagetop__arrow {
        height: calc((1/150)*100vw + 74px/15);
        width: calc((1/150)*100vw + 74px/15);
    }
}

#pagetop {
    bottom: 100px;
}

@media screen and (max-width:767px) {
    #pagetop {
        bottom: calc((1/12)*100vw + 110px/3);
    }
}

#buynow {
    bottom: 30px;
    text-decoration: none;
    color: #E22120;
    font-weight: bold;
    z-index: 100;
}

@media screen and (max-width:767px) {
    #buynow {
        bottom: calc((2/75)*100vw + 146px/15);
    }
}

.buynow_moji {
    text-align: center;
}

@media screen and (max-width:767px) {
    #buynow_moji {
        font-size: calc((1/100)*100vw + 42px/5);
    }
}

body {
    font-family: 'Manrope', sans-serif;
    color: #1C1C1C;
}

#gift {
    font-weight: bold;
}

#Halloween {
    font-family: 'Butcherman';
    white-space: nowrap;
    position: absolute;
    color: white;
    top: 10%;
    left: 30%;
    transform: translate(-50%,-50%) rotate(-30deg);
    font-size: calc((1/61)*100vw + 1160px/61);
    background-color: #E22120;
    padding: 2% 1%;
    border-radius: 5px;
}

@media (orientation: portrait) and (max-width:1280px) {
    #Halloween {
        font-size: calc((1/50)*100vw + 72px/5);
    }
}

@media screen and (max-width:767px) {
    #Halloween {
        font-size: calc((26/595)*100vw + 384px/119);
        top: 5%;
    }
}

#main {
    overflow: hidden;
}

h1 {
    width: 1280px;
    margin: auto;
    border-bottom: 1px solid;
    padding-bottom: min(calc(100vw * (3 / 244) - 45px / 61), 32px);
    padding-top: min(calc(100vw * (3 / 244) - 45px / 61), 32px);
    text-align: center;
    font-size: min(calc((1 / 61) * 100vw + 1770px / 61), 70px);

}

@media (orientation: landscape) and (max-width:1280px) {
    h1 {
        width: 90vw;
        font-size: calc((5/128)*100vw);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    h1 {
        width: 90vw;
    }
}

@media screen and (max-width:767px) {
    h1 {
        font-size: max(calc((5/102)*100vw + 40px/17), 14px);
    }
}

header{
    position: relative;
    width: 100%;
    height: 100vh;
/*    background-image: url(../sozai/haro.jpg);*/
}

#season_bg {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

#ob_uekara_div {
    position: relative;
    z-index: -1;
}

#title_div {
    height: 20%;
    position: relative;
    z-index: 50;
}

@media (orientation: portrait) and  (max-width : 1280px){
    #title_div {
        position: relative;
    }
}


#kaishulogo {
    height: 10%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
}

#logo {
    width: calc(100vw / 12.5);
    margin: 50px 50px;
}

@media (orientation: landscape) and  (max-width : 1280px){
    #logo {
        width: calc((35 / 256) * 100vw - 25px);
    }
}

@media (orientation: portrait) and  (max-width : 1280px){
    #logo {
        width: calc((5/32)*100vw - 20px);
    }
}

@media screen and (max-width:767px) {
    #logo {
        width: calc((35/204)*100vw + 310px/17);
        margin: calc((5/102)*100vw + 210px/17) calc((5/102)*100vw + 210px/17);
    }
}

#title{
    text-align: center;
}

#oblogo {
    width: 60vw;
    max-width: 960px;
}

@media (orientation: portrait) and  (max-width : 1280px){
    #oblogo {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
    }
}

@media screen and (max-width:767px) {
    #oblogo {
        width: calc((40/51)*100vw - 40px/17);
    }
}

#topcontent {
    position: relative;
    height: 70%;
    display: flex;
    justify-content: space-around;
    z-index: 50;
}

@media (orientation: portrait) and  (max-width : 1280px){
    #topcontent {
        display: block;
        position: relative;
    }
}

.setsumei_div{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

@media (orientation: portrait) and  (max-width : 1280px){
    .setsumei_div {
        position: absolute;
        width: 100%;
        height: 50%;
        top: 50%;
        text-align: center;
    }
}

#topsetsumei {
    font-size: calc((1 / 38) * 100vh);
    line-height: calc(100vh / 20);
    width: calc((7/61)*100vw + 21540px/61);
    margin: auto;
    color: #1C1C1C;
}

@media (orientation: portrait) and  (max-width : 1280px){
    #topsetsumei {
        font-size: calc((5/256)*100vw + 15px);
        width: 80%;
    }
}

@media (orientation: landscape) and  (max-width : 1280px){
    #topsetsumei {
        font-size: calc((7 / 512) * 100vw + 15px / 2);
        width: calc((25/64)*100vw);
    }
}

@media screen and (max-width:767px) {
    #topsetsumei {
        font-size: calc((3/98)*100vw + 318px/49);
    }
}

#topsetsumei span{
    color: #E22120;
}

.tokushusetsumei{
    font-size: calc(100vw / 70);
    line-height: calc(100vw / 40);
}

@media screen {
    .tokushusetsumei {
        font-size: calc((1/128)*100vw + 10px);
        line-height: calc((7/512)*100vw + 29px/2);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    .tokushusetsumei {
        font-size: calc((7/502)*100vw + 1830px/251);
    }
}

@media screen and (max-width:767px) {
    .tokushusetsumei {
        font-size: calc((4/147)*100vw + 348px/49);
        line-height: calc((5/136)*100vw + 200px/17);
    }
}

/*.kansou {
    font-size: calc(100vw / 70);
}*/

#seven {
    height: calc((5 / 72) * 100vw + (280px / 9));
}

#seven p{
    color: #1C1C1C;
}

.setsumei {
    line-height: 50px;
    font-size: 25px;
    width: 90%;
/*    line-height: calc(100vw / 40);*/
}

@media (orientation: landscape) and (max-width:1280px) {
    .setsumei {
        font-size: calc((7/512)*100vw + 15px/2);
        line-height: calc((5/128)*100vw);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    .setsumei {
        font-size: calc((6/251)*100vw - 90px/251);
        line-height: calc((10/251)*100vw - 150px/251);
    }
}

@media screen and (max-width:767px) {
    .setsumei {
        font-size: max(calc(2/147)*100vw + 468px/49, 12px);
        line-height: max(calc(4/147)*100vw + 348px/49, 12px);
    }
}

.gazou {
    width: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (orientation: portrait) and  (max-width : 1280px){
    .gazou {
        display: block;
        position: absolute;
        width: 100%;
        height: 50%;
    }
}

#ob_uekara {
    margin: auto;
    height: 80%;
    z-index: -1;
}

@media (orientation: portrait) and  (max-width : 1280px){
    #ob_uekara {
        height: 100%;
    }
}

.intro{
    text-align: center;
    margin: calc(100vw / 80) 0;
}

#open {
    width: 100%;
    height: calc((23 / 48) * 100vw + 20px / 3);
    position: relative;
    overflow: hidden;
}

@media screen and (max-width:767px) {
    #open {
        height: auto;
        position: relative;
    }
}

#wave0 {
    position: absolute;
    bottom: 0;
    width: 105%;
}

@media screen and (max-width:767px) {
    #wave0 {
        top: 100vw;
        transform: translateY(-100%);
    }
}

#openyokokara_div {
    position: absolute;
    width: 85%;
    top: 0;
    right: 0;
}

@media (orientation: portrait) and  (max-width : 1280px){
    #openyokokara_div {
        top: 20%;
        transform: translateY(-30%);
    }
}

@media screen and (max-width:767px) {
    #openyokokara_div {
        position: relative;
        width: 100%;
        top: auto;
        right: auto;
        transform: translateY(0);
        height: 100vw;
    }
}

#openyokokara {
    width: 100%;
}

@media (orientation: portrait) and  (max-width : 1280px){
    #openyokokara {
        width: 130%;
    }
}

@media screen and (max-width:767px) {
    #openyokokara {
        position: absolute;
        transform: translateX(-20%);
        width: auto;
        height: 100%;
    }
}

#yoko_obentobox {
    font-size: calc(100vw / 20);
    font-family: 'Zen Kurenaido', sans-serif;
    margin: 0;
    transform-origin: 0 50%;
    transform: rotate(90deg);
    position: absolute;
    top: 0;
    left: 8%;
}

@media screen and (max-width:767px) {
    #yoko_obentobox {
        color: white;
        font-size: calc((35/408)*100vw - 100px/17);
    }
}

ol a,a:visited{
    color: white;
    text-decoration: underline 1px;
    text-underline-offset:0.3em;
}

@media screen and (max-width:767px) {
    ol a,a:visited{
        color: #1C1C1C;
    }
}

li::marker {
    font-weight: bold;
    font-family: 'Zen Kurenaido', sans-serif;
}

#exciting{
    position: absolute;
    top: 3%;
    left: 17%;
    text-align: left;
    color: white;
    text-shadow:
        1px 1px 0px #000, -1px -1px 0px #000,
       -1px 1px 0px #000,  1px -1px 0px #000,
        1px 0px 0px #000, -1px  0px 0px #000,
        0px 1px 0px #000,  0px -1px 0px #000;
    z-index: 30;
}

@media (orientation: landscape) and (max-width:1280px) {
    #exciting {
        left: calc((25/128)*100vw - 40px);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #exciting {
        left: calc((45/251)*100vw - 6950px/251);
    }

    .index {
        margin-top: 0;
    }
}

@media screen and (max-width:767px) {
    #exciting {
        position: static;
        top: auto;
        left: auto;
        color: #1C1C1C;
        text-shadow: none;
        margin-top: auto;
    }
}

.manga {
    position: relative;
    color: #1C1C1C;
    margin: auto;
    font-size: 23px;
    width: 1260px;
    height: 300px;
}

@media (orientation: landscape) and (max-width:1280px) {
    .manga {
        width: 100vw;
        height: calc((75/256)*100vw - 75px);
        font-size: calc((5/512)*100vw + 21px/2);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    .manga {
        width: 100vw;
        height: calc((50/251)*100vw + 36900px/251);
        font-size: calc((5/251)*100vw + 678px/251);
    }
}

@media screen and (max-width:767px) {
    .manga {
        width: 100vw;
        font-size: max(calc((2/393)*100vw + 1584px/131), 12px);
    }
}

.manga img {
    position: absolute;
    width: 10%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 20%;
}

@media screen and (max-width:767px) {
    .manga img {
        left: 15%;
        width: calc((5/51)*100vw + 250px/17);
    }
}

.manga p {
    position: absolute;
    transform: translateY(-50%);
    top: 45%;
}

#manga1 p {
    right: 10%;
}

@media (orientation: landscape) and (max-width:1280px) {
    #manga1 p {
        right: calc((15/64)*100vw - 100px);
    }
}

@media screen and (max-width:767px) {
    #manga1 p {
        right : 40%;
        transform: translate(+50%, -50%);
    }
}

#manga2 p {
    right: 30%;
}

@media screen and (max-width:767px) {
    #manga2 p {
        right : 40%;
        transform: translate(+50%, -50%);
    }
}


.emptyspace { 
    height: 10vh;
    max-height: 100px;
}

#section1 {
    height: calc((7 / 20) * 100vw + 192px);
    max-height: 1060px;
    width: 1280px;
    margin: auto;
    position: relative;
}

@media screen and (max-width:1280px) {
    #section1 {
        width: 100vw;
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #section1 {
        height: calc((150/251)*100vw + 60500px/251);
    }
}

@media screen and (max-width:767px) {
    #section1 {
        position: static;
        height: auto;
    }
}

.setsumei_sec {
    position: absolute;
    width: 640px;
    transform: translateY(-50%);
}

@media screen and (max-width:1280px) {
    .setsumei_sec {
        width: 50vw;
    }
}

@media screen and (max-width:767px) {
    .setsumei_sec {
        width: 85%;
        margin: auto;
        position: static;
        transform: translateY(0);
        padding-top: calc((10/153)*100vw - 10px/51);
    }
}

.setsumei_sec p {
    margin: auto;
}

#setsumei1 {
    left: 50%;
    top: 45%;
}

@media screen and (max-width:767px) {
    #setsumei1 {
        left: auto;
        top: auto;
    }
}

#gazou1 {
    position: absolute;
    height: 103%;
    max-height: 1200px;
    transform: translateY(-50%);
    right: 50%;
    top: 50%;
    z-index: -10;
}

@media (orientation: portrait) and (max-width:1280px) {
    #gazou1 {
        right: 40%;
    }
}

@media screen and (max-width:767px) {
    #gazou1 {
        position: static;
        left: auto;
        transform: none;
        bottom: auto;
        height: auto;
        width: 100%;
    }
}

#section2 {
    position: relative;
    height: calc((10 / 61) * 100vw + (23800px / 61));
    max-height: 800px;
    width: 1280px;
    margin: auto;
}

@media (orientation: landscape) and (max-width:1280px) {
    #section2 {
        height: calc((125/256)*100vw - 25px);
        width: 100vw;
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #section2 {
        width: 100vw;
        height: calc((75/128)*100vw + 50px);
    }
}

@media screen and (max-width:767px) {
    #section2 {
        position: static;
        height: auto;
        text-align: center;
    }
}

#setsumei2 {
    left: 0;
    top: 55%;
}

@media screen and (max-width:767px) {
    #setsumei2 {
        left: auto;
        transform: none;
        top: auto;
        text-align: start;
    }
}

#section2 p {
    color: #1C1C1C;
}

#gazou2 {
    position: absolute;
    margin: auto;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: -10;
    width: 55%;
}

@media screen and (max-width:1280px) {
    #gazou2{
        left: 50%;
    }
}

@media screen and (max-width:767px) {
    #gazou2 {
        position: static;
        left: auto;
        transform: none;
        bottom: auto;
        height: auto;
        width: 80vw;
    }
}

#title3 {
    z-index: 50;
    margin-bottom: 1%;
    font-size: min(calc((10 / 1257) * 100vw + 50050px / 1257),80px);
}

@media (orientation: landscape) and (max-width:1280px) {
    #title3 {
        font-size: calc((9/256)*100vw + 5px);
    }
}

@media screen and (max-width:767px) {
    #title3 {
        font-size: max(calc((20/393)*100vw + 142px/131), 18px);
    }
}

#section3 {
    position: relative;
    height: 800px;
    width: 100vw;
    margin: auto;
    overflow: hidden;
}

@media (orientation: landscape) and (max-width:1280px) {
    #section3 {
        height: calc((75/128)*100vw - 50px);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #section3 {
        height: calc((25/64)*100vw + 200px);
    }
}

@media screen and (max-width:767px) {
    #section3 {
        height: calc((62/59)*100vw + 5960px/59);
    }
}

#setsumei3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width:767px) {
    #setsumei3 {
        position: static;
        left: auto;
        top: auto;
        transform: translate(0);
        bottom: auto;
        width: 95vw;
    }
}

#setsumei3 p {
    margin: auto;
}

#gazou3 {
    position: absolute;
    height: 70%;
    top: 30%;
    transform: translateY(-50%);
    right: 50%;
    z-index: -10;
}
/*
#gazou3 {
    position: absolute;
    height: 100%;
    transform: translateX(-100%);
    bottom: 0%;
    left: 50%;
    z-index: -10;
}
*/

@media (orientation: portrait) and  (max-width : 1280px){
    #gazou3 {
        height: 75%;
    }
}

@media screen and (max-width:767px) {
    #gazou3 {
        height: auto;
        top: auto;
        transform: translate(0);
        right: 15%;
        width: 130%;
        bottom: 0;
    }
}

#manga3 p { 
    width: 65%;
    right: 3%;
}

#section4 {
    position: relative;
    height: 800px;
    width: 100vw;
    margin: auto;
    overflow: hidden;
}

@media (orientation: landscape) and (max-width:1280px) {
    #section4 {
        height: calc((75/128)*100vw - 50px);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #section4 {
        height: calc((25/64)*100vw + 200px);
    }
}

@media screen and (max-width:767px) {
    #section4 {
        height: calc((62/59)*100vw + 5960px/59);
    }
}

#setsumei4 {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width:767px) {
    #setsumei4 {
        position: static;
        right: auto;
        top: auto;
        transform: translate(0);
        bottom: auto;
        width: 95vw;
    }
}

#setsumei4 p {
    margin: auto;
}

#gazou4 {
    position: absolute;
    margin: auto;
    top: 35%;
    transform: translateY(-50%);
    left: 50%;
    z-index: -10;
    height: 60%;
}

@media (orientation: portrait) and  (max-width : 1280px){
    #gazou4 {
        height: 75%;
    }
}

@media screen and (max-width:767px) {
    #gazou4 {
        position: absolute;
        height: auto;
        top: auto;
        transform: translate(0);
        left: 15%;
        width: 130%;
        bottom: 0;
    }
}

#manga4 p {
    right: 18%;
}

@media (orientation: landscape) and (max-width:1280px) {
    #manga4 p {
        right: calc((35/128)*100vw - 120px);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #manga4 p {
        right: calc((5/32)*100vw - 20px);
    }
}

@media screen and (max-width:767px) {
    #manga4 p {
        text-align: center;
        width: 65%;
        right: calc((50/393)*100vw - 3106px/131);
    }
}


#section5 {
    height: calc((7 / 20) * 100vw + 192px);
    width: 1280px;
    margin: auto;
    display: flex;
    justify-content: space-around;
}

#gazou5 {
    margin: auto;
    height: 500px;
}

#section6 {
    width: 1280px;
    margin: auto;
    overflow: hidden;
}

@media screen and (max-width:1280px) {
    #section6 {
        width: 100%;
    }
}

#title6 {
    border-bottom: none;
}

#setsumei6 {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateY(+50%);
}

@media (orientation: portrait) and  (max-width : 1280px){
    #setsumei6 {
        bottom: 30%;
        left: 45%;
    }
}

@media screen and (max-width:767px) {
    #setsumei6 {
        position: static;
        left: auto;
        bottom: auto;
        transform: translate(0);
        padding-bottom: 10px;
    }
}

#gazou6 {
    position: absolute;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: -10;
    width: 550px;
    left: 0;
}

@media (orientation: landscape) and (max-width:1280px) {
    #gazou6 {
        width: 45%;
    }
}

@media (orientation: portrait) and  (max-width : 1280px){
    #gazou6 {
        width: 55%;
        top: 5%;
        transform: translate(0);
    }
}

@media screen and (max-width:767px) {
    #gazou6 {
        position: absolute;
        top: auto;
        transform: translateY(-35%);
        width: 110%;
        left: 0;
    }
}

#yokonaga {
    text-align: center;
    width: 100%;
}

#yokonaga img {
    width: 1280px;
}

@media screen and (max-width:1280px) {
    #yokonaga img {
        width: 100%;
    }
}

#square_and_setsumei{
    margin: auto;
    width: 100%;
    position: relative;
    height: min(calc((10/61)*100vw + 23800px/61), 800px);
}

@media (orientation: landscape) and (max-width:1280px) {
    #square_and_setsumei {
        height: calc((115/256)*100vw + 25px);
    }
}

@media (orientation: portrait) and  (max-width : 1280px){
    #square_and_setsumei {
        height: calc((175/256)*100vw + 125px);
    }
}

@media screen and (max-width:767px) {
    #square_and_setsumei {
        height: auto;
    }
}

@media screen and (max-width:767px) {
    #kenban_div {
        position: relative;
        overflow: hidden;
        width: 100vw;
        margin: auto;
        text-align: center;
        height: 50vw;
        margin-top: calc((10/153)*100vw - 10px/51);
    }
}

#section7 {
    width: 100%;
    position: relative;
}

@media screen and (max-width:767px) {
    #section7{ 
        position: static;
    }
}

#gazou7_div {
    width: 100%;
}

#gazou7 {
    margin-top: 1.5%;
    width: 100%;
}

#setsumei7 {
    position: absolute;
    color: white;
    text-shadow:
        1px 1px 0px #000, -1px -1px 0px #000,
       -1px 1px 0px #000,  1px -1px 0px #000,
        1px 0px 0px #000, -1px  0px 0px #000,
        0px 1px 0px #000,  0px -1px 0px #000;
    width: 40%;
    top: 5%;
    left: 5%;
    z-index: 30;
}

@media screen and (max-width:767px) {
    #setsumei7 {
        position: static;
        color: #1C1C1C;
        width: 85%;
        margin: auto;
        left: auto;
        text-shadow: none;
        font-size: max(calc(2/147)*100vw + 468px/49, 12px);
        line-height: max(calc(4/147)*100vw + 348px/49, 12px);
        padding-top: calc((10/153)*100vw - 10px/51);
    }
}

#proust_div {
    position: absolute;
    color: white;
    text-shadow:
        1px 1px 0px #000, -1px -1px 0px #000,
       -1px 1px 0px #000,  1px -1px 0px #000,
        1px 0px 0px #000, -1px  0px 0px #000,
        0px 1px 0px #000,  0px -1px 0px #000;
    width: 40%;
    bottom: 3%;
    left: 3%;   
}

@media (orientation: landscape) and (max-width:1280px) {
    #proust_div {
        width: calc((3/128)*100vw + 482px);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #proust_div {
        position: static;
        color: #1C1C1C;
        text-shadow: none;
        width: 70%;
        bottom: auto;
        margin: auto;
    }
}

@media screen and (max-width:767px) {
    #proust_div {
        position: static;
        color: #1C1C1C;
        text-shadow: none;
        width: 85%;
        bottom: auto;
        left: auto;
        margin: auto;
    }
}

#proust {
    font-size: max(calc(100vw / 100), 20px);
    line-height: calc(100vw / 70);
    font-weight: lighter;
}

@media (orientation: landscape) and (max-width:1280px) {
    #proust {
        line-height: calc((1/128)*100vw + 8px);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #proust {
        font-size: calc((1/128)*100vw + 10px);
        line-height: calc((1/128)*100vw + 10px);;
    }
}

@media screen and (max-width:767px) {
    #proust {
        font-size: max(calc((2/295)*100vw + 636px/59), 12px);
    }
}

#proust span {
    font-style: italic;
    font-weight: bold;
}

@media screen and (max-width:767px) {
    #scroll {
        overflow-x: auto;
    }
}

#couponsection {
    width: 1280px;
    margin: auto;
    overflow: hidden;
}

@media screen and (max-width:1280px) {
    #couponsection {
        width: 100%;
    }
}

#couponsection p {
    margin: auto;
}

#epgazousec {
    text-align: center;
    margin-bottom: 30px;
}

@media (orientation: portrait) and (max-width:1280px) {
    #epgazousec {
        margin-bottom: 15px;
    }
}

#epgazou {
    width: 600px;
    text-align: center;
}

@media (orientation: portrait) and (max-width:1280px) {
    #epgazou {
        width: 50vw;
    }
}

#couponcode {
    width: 90%;
    margin: auto;
    text-align: center;
    font-size: min(calc((1 / 61) * 100vw + 1500px / 61), 70px);
}

@media (orientation: landscape) and (max-width:1280px) {
    #couponcode {
        width: 90vw;
        font-size: calc((5/128)*100vw);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #couponcode {
        width: 90vw;
    }
}

@media screen and (max-width:767px) {
    #couponcode {
        font-size: max(calc((5/102)*100vw + 40px/17), 14px);
    }
}

#firstobento {
    width: 500px;
    margin: 20px auto 50px auto;
    text-align: center;
    font-size: min(calc((1 / 61) * 100vw + 1770px / 61), 70px);
    font-family: 'Zen Kurenaido', sans-serif;
    border: dashed 2px #1C1C1C;
    padding: 50px;
    background-color: #c9c9c9;
}

@media screen and (max-width:1280px) {
    #firstobento {
        width: 50%;
        padding: 5%;
    }
}

@media (orientation: landscape) and (max-width:1280px) {
    #firstobento {
        font-size: calc((5/128)*100vw);
    }
}

@media screen and (max-width:767px) {
    #firstobento {
        font-size: max(calc((5/102)*100vw + 40px/17), 14px);
    }
}

#firstobento a:visited{
    color: #000;/*カラーコードは任意*/
    text-decoration: none;
}

#firstobento a{
    color: #000;
    text-decoration: none;
}

table {
    width: 1000px;
    margin: auto;
    text-align: center;
}

@media screen and (max-width:1280px) {
    table {
        width: 100vw;
    }
}

@media screen and (max-width:767px) {
    table {
        width: calc((380/289)*100vw + 200px/289);
        white-space: nowrap;
        margin: 10px 0;
        table-layout: fixed;
    }
}

@media screen and (max-width:767px) {
    #shouhingazou {
        height: 50px;
    }
}

@media screen and (max-width:767px) {
    tr {
        width: 100%;
        white-space: normal;
    }
}

th {
    width: calc(100% / 3);
}

th img {
    width: 200px;
}

@media (orientation: landscape) and (max-width:1280px) {
    th img {
        width: 35%;
    }
}

@media (orientation: portrait) and  (max-width : 1280px){
    th img {
        width: 60%;
    }
}

@media screen and (max-width:767px) {
    th img {
        width: 60%;
    }
}

#futoji {
    font-weight: bold;
}

td img {
    width: 70px;
}

@media screen and (max-width:1280px) {
    td img {
        width: calc((7/256)*100vw + 15px);
    }
}

@media screen and (max-width:767px) {
    td img {
        width: calc((5/116)*100vw + 995px/58);
    }
}

.image{
    height: 150px;
}

@media screen and (max-width:1280px) {
    .image {
        height: calc((15/256)*100vw + 25px);
    }
}

@media screen and (max-width:767px) {
    .image {
        height: calc((4/29)*100vw + 432px/29);
    }
}

.image td {
    vertical-align: bottom;
}

#balance {
    height: 120px;
    font-size: 21px;
}

@media screen and (max-width:1280px) {
    #balance {
        height: calc((15/256)*100vw + 25px);
        font-size: calc((1/256)*100vw + 13px);
    }
}

@media screen and (max-width:767px) {
    #balance {
        position: relative;
        font-size: calc((1/58)*100vw + 315px/29);
        height: calc((9/58)*100vw + 631px/29);
    }
}

@media screen and (max-width:767px) {
    #balance td {
        vertical-align: middle;
    }
}

#obi img{
    width: 130px;
}

@media screen and (max-width:1280px) {
    #obi img {
        width: calc((5/128)*100vw + 50px);
    }
}

@media screen and (max-width:767px) {
    #obi img {
        width: calc((3/58)*100vw + 1177px/29);
    }
}

#japaneseinsence img {
    width: 50px;
}

@media screen and (max-width:1280px) {
    #japaneseinsence img {
        width: calc((3/256)*100vw + 17px);
    }
}

@media screen and (max-width:767px) {
    #japaneseinsence img {
        width: calc((11/290)*100vw + 1609px/145);
    }
}

.moji {
    font-size: 18px;
}

@media screen and (max-width:1280px) {
    .moji {
        font-size: calc((1/256)*100vw + 13px);
    }
}

@media screen and (max-width:767px) {
    .moji {
        font-size: calc((3/290)*100vw + 1467px/145);
        padding-bottom: 15px;
    }
}

#sticker img {
    width: 30px;
}

@media screen and (max-width:1280px) {
    #sticker img {
        width: calc((1/128)*100vw + 14px);
    }
}

@media screen and (max-width:767px) {
    #sticker img {
        width: calc((3/116)*100vw + 307px/58);
    }
}

#shouhinmei {
    font-size: 28px;
    font-weight: bold;
    font-family: 'Zen Kurenaido', sans-serif;
    height: 70px;
}

@media (orientation: landscape) and (max-width:1280px) {
    #shouhinmei {
        font-size: calc((1/64)*100vw + 8px);
        height: calc((5/128)*100vw - 10px);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    #shouhinmei {
        font-size: calc((3/256)*100vw + 13px);
        height: calc((5/128)*100vw - 10px);
    }
}

@media screen and (max-width:767px) {
    #shouhinmei {
        font-size: max(calc((7/290)*100vw + 1393px/145), 14px);
    }
}

#borderyou div{
    border-bottom: 1px solid #1C1C1C;
    width: 90%;
    height: 10px;
    margin: auto;
}

@media (orientation: landscape) and (max-width:1280px) {
    #borderyou div {
        height: calc((3/256)*100vw - 5px);
    }
}

.haifun {
    font-size: 50px;
    padding-bottom: 50px;
}

#obihaifun {
    padding-bottom: 22px;
}

.hr {
    width: 20px;
    border: 1px solid #1C1C1C;
    margin: auto auto 50px auto;
}

#buy a{
    display: inline-block;
    font-size: 18px;
    width: 70px;
    height: 30px;
    padding-top: 7px;
    color: white;
    background: #E22120;
    border: 2px solid #E22120;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.3s;
    border-radius: 20px;
    
}

@media (orientation: landscape) and (max-width:1280px) {
    #buy a{
        font-size: calc((1/128)*100vw + 8px);
        width: calc((11/256)*100vw + 15px);
        height: calc((5/256)*100vw + 5px);
        padding-top: calc((5/512)*100vw - 11px/2);
    }
}

@media (orientation: portrait) and  (max-width : 1280px){
    #buy a {
        font-size: calc((1/256)*100vw + 13px);
        width: calc((1/32)*100vw + 26px);
        height: calc((1/128)*100vw + 18px);
        padding-top: calc((1/128)*100vw - 3px);
    }
}

@media screen and (max-width:767px) {
    #buy a {
        font-size: max(calc((1/145)*100vw + 1558px/145), 12px);
        height: calc((1/58)*100vw + 344px/29);
        padding-top: 2px;
    }
}

#buy a:hover {
    background: white;
    color: #E22120;
}

#last {
    border-bottom: none;
}

footer {
    position: relative;
    width: 100vw;
    background: #E22120;
    height: calc((100 / 1257) * 100vw + 249100px / 1257);
}

@media (orientation: landscape) and (max-width:1280px) {
    footer {
        height: calc((75/256)*100vw - 75px);
    }
}

@media (orientation: portrait) and (max-width:1280px) {
    footer {
        height: calc((25/128)*100vw + 50px);
    }
}

footer img {
    position: absolute;
    height: 55px;
}

@media screen and (max-width:1280px) {
    footer img {
        height: calc((25/512)*100vw - 15px/2);
    }
}

@media screen and (max-width:767px) {
    footer img {
        height: calc((3/145)*100vw + 2064px/145);
    }
}

#footerlogo {
    right: 65%;
    top: 50%;
    transform: translate(+50%, -50%);
}

#footerig {
    left: 65%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #f3f3f3;  /* モーダルウィンドウの背景色 */
    margin: 30% auto;
    padding: 20px;
    border: 1px solid #888888;
    width: 768px;  /* モーダルウィンドウの横幅 */
}

@media screen and (max-width:1280px) {
    .modal-content {
        width: 60%;  /* モーダルウィンドウの横幅 */
    }
}

.modal-title {
    color: #E22120; /* モーダルウィンドウの文字の色 */
    font-size: 35px; /* モーダルウィンドウの文字の大きさ */
    font-weight: bold;
    line-height: 200%;
    text-align: center;
}

@media screen and (max-width:630px) {
    .modal-title {
        font-size: calc((1/17)*100vw - 2px);
    }
}

.modal p{
    font-size: 25px;
    line-height: 50px;
    width: 85%;
    margin: 10px auto 30px auto;
    color: #080808;
}

@media screen and (max-width:1280px) {
    .modal p {
        width: 95%;
        line-height: calc((6/181)*100vw + (1370px/181));
        font-size: calc((7/905)*100vw + (2733px/181));
    }
}

.close-button {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.redmarker {
    background: linear-gradient(transparent 50%, rgba(255, 0, 0, 0.4) 50%); /* マーカーを引く */;
    display: inline;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition:background-size 1.5s;
}
.redmarker.on {
    /* 横方向を100%にして、マーカーを引く */
    background-size: 100% 100%;
  }

.yellowmarker {
    background: linear-gradient(transparent 50%, rgba(251, 255, 0, 0.863) 50%); /* マーカーを引く */;
    display: inline;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition:background-size 1.5s;
}
.yellowmarker.on {
    /* 横方向を100%にして、マーカーを引く */
    background-size: 100% 100%;
  }