@charset "UTF-8";
/* PC ================================================== */
@media all and (min-width:720px) {
    body {
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        background: url("../img/bg.jpg") no-repeat center;
        background-size: cover;
        background-attachment: fixed;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "halt"1;
        font-feature-settings: "palt";
        -webkit-text-size-adjust: 100%;
        width: 100%;
        overflow-x: hidden;
        text-align: justify;
    }
    .loading {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: #fff;
        z-index: 10004;
    }
    .loader {
/*
        position: fixed;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        margin-left: -20px;
        text-align: center;
        z-index: 10005;
*/
    }
    #logo35 {
         position: fixed;
        top: 50%;
        left: 50%;
        width: 243px;
        height: 271px;
        margin-top: -160px;
        margin-left: -120px;
        text-align: center;
        z-index: 10005;
    }
    .sp {
        display: none;
    }
    #logo-small {
        width: 160px;
        position: fixed;
        top: 32px;
        left: 32px;
    }
    #pctitle {
        width: 26vw;
        position: fixed;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
    }
    #navi {
        width: 264px;
        position: fixed;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
    }
    #navi ul {
        margin-bottom: 36px;
    }
    #navi li {
        text-align: center;
        line-height: 42px;
        font-size: 14px;
    }
    #navi li:not(:last-child) {
        margin-bottom: 16px;
    }
    #navi li a {
        display: block;
        color: #231815;
        background: #DFC47B;
        font-weight: bold;
        height: 42px;
        border-radius: 4px;
        filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.6));
    }
    #navi li a:hover {
        color: #FFF700;
        background: #FE3977;
    }
    #pc-navilogo{
        padding: 0 20%;
        margin-bottom: 52px;
    }
    /*
	#navi li a.pink {
		background: #E53CFF;
		color: #FFF;
	}
*/
    #wrap {
        width: 380px;
        margin: 0 auto;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    }
    header {
        width: 380px;
        padding: 16px 28px 20px;
        box-sizing: border-box;
        background: #fff;
        /*
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 10000;
		margin-left: -190px;
*/
    }
    header p {
        width: 128px;
        margin: 0 auto;
    }
    #menu {
        display: none;
    }
    
    #fv img {
        transform: translateY(24px);
        opacity: 0;
        transition: .4s cubic-bezier(.64, .1, .43, .9);
    }
    #fv.show img {
        transform: translateY(0);
        opacity: 1;
        transition: .4s cubic-bezier(.64, .1, .43, .9);
    }
    #btn-cmp {
        width: 90%;
        margin: 0 auto 12px;
        cursor: pointer;
    }
    #btn-cmp:hover {
        filter: brightness(1.2);
    }
    #btn-shop {
        width: 90%;
        margin: 0 auto;
    }
    #btn-cmp:hover, #btn-shop a:hover {
        filter: brightness(1.2);
    }
    #sl {
        width: 100%;
        height: 141px;
        overflow: hidden;
        display: flex;
        background: #fff;
        padding: 6px 0;
    }
    @keyframes scroll-left {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }
    #mieru {
        background: url("../img/support_2.jpg") no-repeat center;
        background-size: cover;
        width: 100%;
        padding-top: 24px;
        padding-bottom: 102px;
    }
    #mieru .slick-slide {
      margin: 0 4px;
    }
    a:hover {
        filter: brightness(1.1);
    }
    #m1, #m2, #m3 {
        transform: translateY(24px);
        opacity: 0;
        transition: .4s cubic-bezier(.64, .1, .43, .9);
    }
    #m1.show, #m2.show, #m3.show {
        transform: translateY(0);
        opacity: 1;
        transition: .4s cubic-bezier(.64, .1, .43, .9);
    }
    #btn-shop2 {
        width: 60%;
        margin: 0 auto;
    }
    .toggle {
        display: none;
    }
    .toggle:checked + .title + .content {
        max-height: 500px;
        transition: all 1s;
    }
    .toggle:checked + .title::after {
        transform: rotate(180deg) !important;
    }
    .toggle:checked + .title {
        border-radius: 2px 2px 0 0;
    }
    
    #shop {
        padding: 32px 5% 48px;
        background: #fff;
    }
    #shop h2 {
        text-align: center;
        font-size: 19px;
        line-height: 1.6em;
        font-weight: bold;
        margin-bottom: 16px;
    }
    #shop h3 {
        position: relative;
        text-align: center;
        font-size: 15px;
        line-height: 1.6em;
        font-weight: bold;
        padding: 8px 0;
        margin-bottom: 24px;
    }
    #shop h3:before {
        content: '';
        background: #000;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
    }
    #shop h3:after {
        content: '';
        background: #000;
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    #shop ul {}
    #shop > ul > li {}
    #shop > ul > li:not(:last-child) {
        margin-bottom: 12px;
    }
    .option2 {
        position: relative;
        background: #fff;
    }
    .title2 {
        background: #DFAE2A;
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        display: block;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        line-height: 1em;
        position: relative;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: all 0.3s;
        cursor: pointer;
        color: #fff;
    }
    .content2 {
        background: #FFF;
        color: #201C3F;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .content2 a:hover {
        background: #F4E2B3;
        filter: unset;
    }
    .content2 li {
        text-align: center;
        font-size: 15px;
        line-height: 1em;
        width: 100%;
        margin-bottom: 2px;
    }
    .content2 li a {
        font-weight: bold;
        display: block;
        padding: 14px 0;
        width: 100%;
        background: #F2EEED;
        color: #000000;
    }
    ul.lr {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    ul.lr li {
        width: 49.7%;
    }
    ul.lr li.max {
        width: 100%;
    }
    #top {
        width: 56px;
        height: 56px;
        position: fixed;
        bottom: 8px;
        right: 8px;
    }
    footer {
        background: #fff;
    }
}
/* mobile ================================================== */
@media all and (max-width:719px) {
    body {
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "halt"1;
        font-feature-settings: "palt";
        -webkit-text-size-adjust: 100%;
        width: 100%;
        overflow-x: hidden;
        text-align: justify;
        background: #fff;
    }
    .loading {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: #fff;
        z-index: 10004;
    }
    #logo35 {
         position: fixed;
        top: 50%;
        left: 50%;
        width: 120px;
        height: 135px;
        margin-top: -60px;
        margin-left: -60px;
        text-align: center;
        z-index: 10005;
    }
    .pc {
        display: none;
    }
    header {
        width: 100%;
        padding: 16px 28px 20px;
        box-sizing: border-box;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100000;
    }
    header p {
        width: 128px;
        margin: 0 auto;
    }
    #fv {
        padding-top: 59px;
    }
    #fv img {
        transform: translateY(24px);
        opacity: 0;
        transition: .4s cubic-bezier(.64, .1, .43, .9);
    }
    #fv.show img {
        transform: translateY(0);
        opacity: 1;
        transition: .4s cubic-bezier(.64, .1, .43, .9);
    }
    #btn-cmp {
        width: 90%;
        margin: 0 auto 12px;
    }
    #btn-shop {
        width: 90%;
        margin: 0 auto;
    }
    #sl {
        width: 100%;
        height: 141px;
        overflow: hidden;
        display: flex;
        background: #fff;
        padding: 6px 0;
    }
    @keyframes scroll-left {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }
    #mieru {
        background: url(../img/support_2.jpg) no-repeat center;
        background-size: cover;
        width: 100%;
        padding-top: 32px;
        padding-bottom: 102px;
    }
    #mieru .slick-slide {
        margin: 0 4px;
    }
    #m1, #m2, #m3 {
        transform: translateY(24px);
        opacity: 0;
        transition: .4s cubic-bezier(.64, .1, .43, .9);
    }
    #m1.show, #m2.show, #m3.show {
        transform: translateY(0);
        opacity: 1;
        transition: .4s cubic-bezier(.64, .1, .43, .9);
    }
    #btn-shop2 {
        width: 60%;
        margin: 0 auto;
    }
    .toggle {
        display: none;
    }
    .toggle:checked + .title + .content {
        max-height: 500px;
        transition: all 1s;
    }
    .toggle:checked + .title::after {
        transform: rotate(180deg) !important;
    }
    .toggle:checked + .title {
        border-radius: 2px 2px 0 0;
    }
    #shop {
        padding: 32px 5% 80px;
        background: #fff;
    }
    #shop h2 {
        text-align: center;
        font-size: 20px;
        line-height: 1.6em;
        font-weight: bold;
        margin-bottom: 16px;
    }
    #shop h3 {
        position: relative;
        text-align: center;
        font-size: 15px;
        line-height: 1.6em;
        font-weight: bold;
        padding: 8px 0;
        margin-bottom: 24px;
    }
    #shop h3:before {
        content: '';
        background: #000;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
    }
    #shop h3:after {
        content: '';
        background: #000;
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    #shop ul {}
    #shop > ul > li {}
    #shop > ul > li:not(:last-child) {
        margin-bottom: 12px;
    }
    .option2 {
        position: relative;
        background: #fff;
    }
    .title2 {
        background: #DFAE2A;
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        display: block;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        line-height: 1em;
        position: relative;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: all 0.3s;
        cursor: pointer;
        color: #fff;
    }
    .content2 {
        background: #FFF;
        color: #201C3F;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: all 0.3s;
    }
    .content2 li {
        text-align: center;
        font-size: 15px;
        line-height: 1em;
        width: 100%;
        margin-bottom: 2px;
    }
    .content2 li a {
        font-weight: bold;
        display: block;
        padding: 14px 0;
        width: 100%;
        background: #F2EEED;
        color: #000000;
    }
    ul.lr {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    ul.lr li {
        width: 49.7%;
    }
    ul.lr li.max {
        width: 100%;
    }
    #top {
        width: 56px;
        height: 56px;
        position: fixed;
        bottom: 8px;
        right: 8px;
    }
    #btn {
		display: flex;
		justify-content: space-between;
		width: 32px;
		height: 20px;
		cursor: pointer;
		position: fixed;
		top: 21px;
		right: 6%;
		z-index: 100001;
		transition: .2s;
	}
	#btn div {
		display: block;
		position: relative;
		width: 32px;
		height: 21px;
	}
	#btn span {
		width: 100%;
		height: 2px;
		background: #000;
		display: block;
	}
	#btn span:nth-child(1) {
		position: absolute;
		width: 32px;
		top: 0;
		left: 0;
		z-index: 10000;
		transition: .1s
	}
	#btn span:nth-child(2) {
		position: absolute;
		width: 32px;
		top: 8px;
		left: 0;
		z-index: 10000;
		transition: .1s
	}
    #btn span:nth-child(3) {
		position: absolute;
		width: 32px;
		top: 16px;
		left: 0;
		z-index: 10000;
		transition: .1s
	}
    
	#btn p {
		width: 100%;
		text-align: center;
		position: absolute;
		bottom: 17px;
		left: 0;
		line-height: 1em;
	}
	#menu-local-trigger {
		width: 100%;
		height: 100%;
        background: url("../img/bg_menu.jpg") no-repeat center;
        background-size: cover;
		padding-top: 45%;
		box-sizing: border-box;
		position: fixed;
		top: 59px;
		right: 0;
		z-index: 100001;
        display: none;
	}
	#nav-local {
		width: 70%;
        margin: 0 auto;
        position: relative;
	}
	#nav-local ul li {
		font-size: 16px;
		letter-spacing: 0;
		line-height: 52px;
		margin-bottom: 26px;
        text-align: center;
	}
	#nav-local ul li a {
        display: block;
        color: #231815;
        background: #DFC47B;
        font-weight: bold;
        height: 52px;
        border-radius: 4px;
        filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.2));
	}
    #navi li a:hover {
        color: #FFF700;
        background: #FE3977;
    }
    #close {
        width: 40px;
        position: absolute;
        top: -72px;
        right: 0;
    }
    
}

.bg-wrapper{
    background: url(../img/bg.png)no-repeat center top #fff;
    background-size: cover;
}
#kyoka-gekkan ul{
    background: url(../img/kyoka-gekkan_bg.jpg)no-repeat center top;
    background-size: 100% auto;
    padding: 0 3%;
}
#kyoka-gekkan #m2,
#kyoka-gekkan #m3{
    margin-top: -18px;
}
ul.lr li:last-of-type a{
    border-bottom-right-radius: 10px;
}
ul.lr li:nth-last-child(2) a{
    border-bottom-left-radius: 10px;
}
.content2 li.max a{
    border-radius: 0 0 10px 10px;
}
#lottery {
    background: url(../img/lottery_bg.png)no-repeat center;
    background-size: auto 100%;
    padding: calc((50 / 860) * 100vw) 0 calc((47 / 860) * 100vw);
    margin-top: calc((50 / 860) * -100vw);
}
@media all and (min-width:720px) {
    #lottery{
        padding: 22px 0 21px;
        margin-top: -22px;
    }
}
#lottery ul {
    width: 90%;
    margin: auto;
    display: flex;
    gap: 10px;
}
#f1, #f2 {
    transition: .3s cubic-bezier(0.33, 1, 0.68, 1);
    opacity: 0;
    transform: scale(.5);
}
#f3, #f4 {
    transform: translateY(24px);
    opacity: 0;
    transition: .4s cubic-bezier(.64, .1, .43, .9);
}
#f1.show, #f2.show {
    opacity: 1;
    transition: .4s cubic-bezier(.88, -1.28, .1, 2.05);
    transform: scale(1);
}
#f3.show, #f4.show {
    transform: translateY(0);
    opacity: 1;
    transition: .4s cubic-bezier(.64, .1, .43, .9);
}
#f4{
    margin-top: calc((62 / 860) * -100vw);
}
@media all and (min-width:720px) {
    #f4{
        margin-top: -27px;
    }
}