@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap');

body {
	margin: 0;
	padding: 0;
	background-color: #fbf3e6;
    font-family: 'Kiwi Maru', serif;
	}

header,main,footer{display: block;}
header,h2,h3{font-family: 'RocknRoll One', sans-serif;}

p,li,td{font-size: 1em; line-height: 1.4em; color: #5a493f;}
li{padding-bottom: 0.5em;}

.center{text-align: center;}
.small{font-size: 0.8em; line-height: 1.2em;}

img{max-width: 100%;}

main :hover,footer :hover{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}

a{text-decoration: none; outline: none;}
a img:hover{opacity: 0.7;}



/*----------NAVI------------*/
header{
	width: 100%;
	background: #FFF;
	position: fixed;
	z-index: 999;
	}

header ul{margin: 0; padding: 0;}
header ul,header li{list-style: none;}

#nav {
	width: 100%;
	max-width: 1480px;
	margin: auto;
	}

#nav > a {display: none;}
#nav li {position: relative; padding: 1.5em 0;}
#nav li a {
	color: #5a493f;
	display: block;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff ,0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
	}

#nav li:first-child{padding: 0.5em 0 0.25em;}
#nav li:first-child img{width: 70%; height: auto;}
#nav > ul > li:first-child :hover{background: none;}

#nav > ul > li:nth-child(4) span:after {
    width: 0;
	height: 0;
	border: 0.313em solid transparent;
    border-bottom: none;
	border-top-color: #5a493f;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.413em;
	}


/*first level*/
#nav > ul {
	display: flex;
	align-items: center;
	}

#nav > ul > li {flex: 0 1 16.6%;}
#nav > ul > li > a {font-size: 1.2em; text-align: center;}

/*hover*/
#nav > ul > li:nth-child(2):hover{
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/rakugakids_2022/background_green.png");
    background-size: cover;
    }

#nav > ul > li:nth-child(3):hover{
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/rakugakids_2022/background_blue.png");
    background-size: cover;
    }

#nav > ul > li:nth-child(4):hover{
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/rakugakids_2022/background_orange.png");
    background-size: cover;
    }

#nav > ul > li:nth-child(5):hover{
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/rakugakids_2022/background_pink.png");
    background-size: cover;
    }

#nav > ul > li:nth-child(6):hover{
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/rakugakids_2022/background_baioretto.png");
    background-size: cover;
    }


/*second level*/
#nav li ul {
	background: rgba(255,255,255,0.9);
	display: none;
	position: absolute;
	top: 100%;
	}

#nav li:hover ul {
	display: block;
	left: 0;
	right: 0;
	}

#nav li:not( :first-child ):hover ul {left: -1px;}

#nav li:hover ul > li{padding: 0; border-bottom: dotted 1px #5a493f;}
#nav li:hover ul > li:last-child{border-bottom: none;}

#nav li ul a {
	color: #5a493f;
	font-size: 1.0em;
	padding: 1em 0.75em;
	text-align: center;
	}

#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {background: rgba(250,170,27,0.3);}


    @media only screen and (max-width: 860px) {
        #nav li:first-child img{width: 90%; margin: -0.5em 1em 0;}
        /*hover*/
        #nav > ul > li:nth-child(2):hover, #nav > ul > li:nth-child(3):hover, #nav > ul > li:nth-child(4):hover, #nav > ul > li:nth-child(5):hover, #nav > ul > li:nth-child(6):hover{background-size: 100% 110%;}
        
        #nav > ul > li > a {font-size: 1em;}
        #nav li ul a {font-size: 0.9em;}
        }

        
    @media only screen and (max-width: 480px) {
        
        header{background: none;}
        
        #nav li{border-bottom: 1px dotted #5a493f;}
        #nav ul li:first-child a{text-align: center!important;}
        #nav li, #nav li:first-child {padding: 0;}
        
        #nav li:first-child img{
            width: 100%;
            margin: 1.5em 0;
            max-width: 280px;
            height: auto;
            }

        #nav > a {
            width: 3.125em;
            height: 3.125em;
            text-align: left;
            text-indent: -9999px;
            background-color: #0180e8;
            box-shadow:0px 0px 1px 3px #FFF inset;
            position: relative;
            z-index: 999;
            }
        
        #nav > a:before, #nav > a:after {
            position: absolute;
            border: 2px solid #fff;
            top: 35%;
            left: 25%;
            right: 25%;
            content: '';
            }
        
        #nav > a:after {top: 60%;}
        #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;}
        
        #nav > ul > li{padding: 0.65em 0;}
        #nav > ul > li:nth-child(2):hover, #nav > ul > li:nth-child(3):hover, #nav > ul > li:nth-child(4):hover, #nav > ul > li:nth-child(5):hover,#nav > ul > li:nth-child(6):hover{background-image: none;}
        
        
        /*first level*/
        #nav > ul {
            margin-top: -3.125em;
            padding-top: 3.125em;
            padding-left: 2em;
            padding-right: 2em;
            height: 100vh;
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            background: rgba(255,255,255,0.95);
            }
        
        #nav:target > ul {display: block;}
        #nav > ul > li {width: 100%;}
        #nav > ul > li > a {
            line-height: 1.8em;
            height: auto;
            text-align: left;
            }
        
        #nav > ul > li:not( :last-child ) > a {border-right: none;}
        
        /*second level*/
        #nav li ul {
            background: none;
            position: static;
            display: block;
            }
        #nav ul li > ul > li:first-child a{text-align: left!important;}
        #nav li ul a {padding: 0.45em 1em; text-align: left;}
        #nav li ul > li{border-bottom: none;}
        #nav li:hover ul > li{border-bottom: none;}
        
        #nav li ul li a:hover,
        #nav li ul:not( :hover ) li.active a {background: none;}
        }
        



main{margin: 0; padding: 7em 0 14em;}
    
    #TOP main{padding: 0 0 14em;}
    
    #HOWTO main > section{max-width: 1480px; margin: auto;}
        #HOWTO main > section:first-child{padding: 1em;}
        #HOWTO #LinkAttrac{max-width: 100%;}

    #ATTRACTION main > section{max-width: 1480px; margin: auto;}
        #ATTRACTION main > section:first-child{padding: 1em;}
        #ATTRACTION #LinkHowto{max-width: 100%;}

    #STORE main > section:first-child{max-width: 1480px; padding: 1em; margin: auto;}
    #ADMISSION main{max-width: 1480px; margin: auto; padding: 7em 1em 14em;}
    #FAQ main{max-width: 1480px; margin: auto; padding: 7em 1em 14em;}

    @media only screen and (max-width: 480px) {
        main{margin: 0; padding: 1.5em 0 14em;}
        #ADMISSION main{max-width: 1480px; margin: auto; padding: 3.5em 1em 14em;}
        #FAQ main{max-width: 1480px; margin: auto; padding: 3.5em 1em 14em;}
        }


h2{
    margin: 0 0 1em;
    padding: 1.5em;
    font-size: 2em;
    color: #FFF;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    }

    #STORE h2, #topStore h2{
        text-shadow: 0 0 5px #58bb60, 0 0 5px #58bb60 ,0 0 5px #58bb60, 0 0 5px #58bb60, 0 0 5px #58bb60, 0 0 5px #58bb60;
        background-image: url("../images/rakugakids_2022/background_green.png");
        }

    #LinkHowto h2{
        margin: 0;
        text-shadow: 0 0 5px #f88219, 0 0 5px #f88219 ,0 0 5px #f88219, 0 0 5px #f88219, 0 0 5px #f88219!important;
        background-image: url("../images/rakugakids_2022/background_orange.png")!important;
        }
    #HOWTO h2, #LinkHowto h2{
        text-shadow: 0 0 5px #f88219, 0 0 5px #f88219 ,0 0 5px #f88219, 0 0 5px #f88219, 0 0 5px #f88219;
        background-image: url("../images/rakugakids_2022/background_orange.png");
        }

    #LinkAttrac h2{
        margin: 0;
        text-shadow: 0 0 5px #2ca2fc, 0 0 5px #2ca2fc ,0 0 5px #2ca2fc, 0 0 5px #2ca2fc, 0 0 5px #2ca2fc!important;
        background-image: url("../images/rakugakids_2022/background_blue.png")!important;
        }
    #ATTRACTION h2, #LinkAttrac h2{
        text-shadow: 0 0 5px #2ca2fc, 0 0 5px #2ca2fc ,0 0 5px #2ca2fc, 0 0 5px #2ca2fc, 0 0 5px #2ca2fc;
        background-image: url("../images/rakugakids_2022/background_blue.png");
        }

    #ADMISSION h2{
        text-shadow: 0 0 5px #e53972, 0 0 5px #e53972 ,0 0 5px #e53972, 0 0 5px #e53972, 0 0 5px #e53972;
        background-image: url("../images/rakugakids_2022/background_pink.png");
        }

    #FAQ h2{
        text-shadow: 0 0 5px #c369b3, 0 0 5px #c369b3 ,0 0 5px #c369b3, 0 0 5px #c369b3, 0 0 5px #c369b3;
        background-image: url("../images/rakugakids_2022/background_baioretto.png");
        }


h3{
    margin: 0;
    padding: 0.35em 1em;
    font-size: 1.2em;
    line-height: 1.4em;
    color: #FFF;
    border-radius: 10px;
    }

    #STORE h3{font-family: 'Kiwi Maru', serif; background: #5ebb62;}
    #HOWTO h3{background: #f9821a;}
    .secret h3{background: none!important;}
    #ADMISSION h3{background: #e53972;}
    #FAQ h3{background: #c369b3;}

h4{
    font-size: 1.1em;
    line-height: 1.5em;
    padding: 0.15em 0.5em;
    color: #5a493f;
    border-left: solid 8px #5b4841;
    border-bottom: solid 2px #5b4841;
    }

    h4.clip{color: #e10000; border-left: solid 8px #e10000; border-bottom: solid 2px #e10000;}
    .tSList h4{margin: 0.5em 0;}


h5{
    margin: 0;
    padding: 0.15em 0.5em;
    font-size: 1em;
    line-height: 1.4em;
    color: #5b4841;
    border-left: solid 8px #584a3f;
    }


/*LinkButton_common*/
.LinkButton{max-width: 480px; text-align: center; margin: 1em auto!important;}

    .sdw, a.sdw, button.sdw {
        width: 90%;
        font-size: 1em;
        font-weight: 700;
        line-height: 1.5em;
        position: relative;
        display: inline-block;
        padding: 0.5em 1em;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        color: #567dbe;
        }

        a.btn-border {
            border: 2px solid #567dbe;
            border-radius: 0;
            background: #fff;
            -webkit-box-shadow: 5px 5px 0 #567dbe;
            box-shadow: 5px 5px 0 #567dbe;
            }

        a.btn-border i {
            font-size: 1.6rem;
            position: absolute;
            width: 1rem;
            top: 25%;
            left: 20%;
            -webkit-transition: all 1s;
            transition: all 1s;
            text-align: right;
            color: #567dbe;
            background: #FFF;
            }

        a.btn-border:hover {
            -webkit-box-shadow: -5px -5px 0 #567dbe;
            box-shadow: -5px -5px 0 #567dbe;
            }

        /*TOP*/
        .tSList .LinkButton{max-width: 240px; margin: 1em 1em 1em auto!important;}
        #LinkAttrac .LinkButton, #LinkHowto .LinkButton{max-width: 240px;}

        /*Twitter Link*/
        .twi .sdw, .twi a.sdw, .twi button.sdw, .twi a.btn-border i {color: #1ca0f2;}
        .twi a.btn-border{border: 2px solid #1ca0f2; -webkit-box-shadow: 5px 5px 0 #1ca0f2; box-shadow: 5px 5px 0 #1ca0f2;}
        .twi a.btn-border:hover {-webkit-box-shadow: -5px -5px 0 #1ca0f2; box-shadow: -5px -5px 0 #1ca0f2;}


/*mainVisual*/
#mainVisual{width: 100%; height: 95vh; position: relative;}
#mainVisual_photo{width: 100%; height: 95vh; position: relative;}/*Photo ver*/


.video-wrap{width: 100%; position: absolute; z-index: 1;}
.video-wrap img, 
.video-wrap video,
.video-wrap iframe {
    width: 100%;
	height: 100%;
	height: 90vh;
    margin: auto;
    min-width: 100%;
	min-height: 90vh;
    object-fit: cover;
    object-position: top;
    }

#mainVisual div:last-child, #mainVisual_photo div:last-child{
    width: 100%;
    padding-top: 12.5%;
    position: absolute;
    z-index: 2;
    }

#mainVisual h1, #mainVisual_photo h1{
	width: 100%;
	height: 0;
	margin: 0 auto;
	padding-top: 35%;
	background: url("../images/rakugakids_2022/mainvisual_h1.png") no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
	background-position: top center;
	}

@media only screen and (max-width: 860px) {
    #mainVisual div:last-child, #mainVisual_photo div:last-child{padding-top: 25vh;}
    #mainVisual h1, #mainVisual_photo h1{padding-top: 50%;}
    }

@media only screen and (max-width: 480px) {
    #mainVisual, #mainVisual_photo{width: 100%; height: 75vh;}
    
    .video-wrap img,
    .video-wrap video,
    .video-wrap iframe {height: 70vh; min-height: 70vh;}
    
    #mainVisual div:last-child, #mainVisual_photo div:last-child{padding-top: 22.5vh;}
    }


/*Photo ver*/
.mv_slider{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 90vh;
    background-color: #fbf3e6;
    }

    @media only screen and (max-width: 480px) {.mv_slider{height: 70vh;}}


.mv_slider .image{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    }

.mv_slider .image:nth-of-type(1){background-image: url(../images/rakugakids_2022/attraction_area01_rakugaki04.jpg);}
.mv_slider .image:nth-of-type(2){
    animation-delay: 5s;
    background-position: top center;
    background-image: url(../images/rakugakids_2022/attraction_area04_fort02.jpg);
    }
.mv_slider .image:nth-of-type(3){
    animation-delay: 10s;
    background-image: url(../images/rakugakids_2022/attraction_area05_tree02.jpg);
    }

.mv_slider .image{
    animation-name: anime;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-duration: 15s;
    }


/*mainVisual_photo animation*/
@keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}




/*NEWS*/
#NewsArea{padding: 0 1em;}

#NEWS {
    max-width: 1000px;
    margin: 0 auto 10%;
    padding: 0 0 0 160px;
    position: relative;
    overflow: hidden;
    border: 2px solid #59493f;
    background: #FFF;
    }

#NEWS:before {
    position: absolute;
    top: -150%;
    left: -100px;
    width: 236px;
    height: 300%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    background: #59493f;
    }

    #NEWS span {
        font-size: 1.4em;
        position: absolute;
        z-index: 1;
        top: 7px;
        left: 0;
        display: block;
        padding-top: 8px;
        padding-left: 16px;
        color: #fff;
        font-family: 'RocknRoll One', sans-serif;
        }

    #NEWS p{margin: 0; padding: 0;}
    #NEWS p:first-child{padding-bottom: 0.25em;}
    #NEWS a{padding: 0.65em; display: block;}
    #NEWS:hover{background-color: rgb(235,218,191,0.3);}


@media only screen and (max-width: 860px){#NEWS {margin: 0 auto 18%;}}
@media only screen and (max-width: 520px){
    #NEWS {margin: 0 auto 30%; padding: 0;}
    #NEWS:before {position: relative;}
    #NEWS span {
        text-align: center;
        padding-top: 0.15em;
        padding-bottom: 0.25em;
        padding-left: 0;
        top: 0;
        position: relative;
        background: #59493f;
        }
    }


/*TOP_Store*/
#topStore{max-width: 1480px; margin: auto; padding: 0 1em 5%;}

.tSList{display: flex; flex-wrap: wrap;}
    .tSList article{flex: 0 1 46%; margin: 0 2% 2em; position: relative;}
    .tSList p:first-child,p.strPhoto{margin: 0;}
    .tSList h4 + p{margin: 0 0 1em 1.25em; font-size: 0.9em;}
    .point{position: absolute; top: -50px; left: 0;}

@media only screen and (max-width: 480px){.tSList{display: block;} .tSList article{margin: 0 0 3em;}}
    

/*TOP_ATTRACTION*//*TOP_Howto*/
#LinkAttrac{width: 100%; padding: 2.5% 0;}
#LinkHowto{width: 100%; padding: 2.5% 0 10%;}

#LinkAttrac div, #LinkHowto div{position: relative;}
#LinkAttrac div > article, #LinkHowto div > article{
    width: 40%;
    padding: 1em 1em 2em;
    border: solid 2px #FFF!important;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    background: rgba(255,255,255,0.85)!important;
    
    position: absolute;
    top: calc(26% - 75px);
    left: calc(34% - 75px);
    z-index: 3;
    }

#LinkAttrac div > article p, #LinkHowto div > article p{margin: 0 0 2em; text-align: center;}

/*fake_BG*/
ul.slider{margin: 0; padding: 0;}
.slider img {width: 100%; height: auto;}


@media only screen and (max-width: 1200px){#LinkAttrac div > article, #LinkHowto div > article{width: 50%; left: calc(31% - 75px);}}
@media only screen and (max-width: 860px){#LinkAttrac div > article, #LinkHowto div > article{width: 80%; left: calc(18% - 75px);}}
@media only screen and (max-width: 480px){
    #LinkAttrac{padding: 10% 0;}
    #LinkHowto{padding: 10% 0 20%;}
    #LinkAttrac div > article, #LinkHowto div > article{width: 80%; left: 5%;}
    #LinkAttrac h2 + p, #LinkHowto h2 + p{font-size: 0.8em;}
    }


/*category menu*/
.ctNavi{margin: 0 auto 3em; display: flex; flex-wrap: wrap; justify-content: center;}
.ctNavi a{flex: 0 1 24%; margin: 0 1%; display: block;}
#ATTRACTION .ctNavi a{flex: 0 1 13.5%; margin: 0 0.5%;}


.navibtn,a.navibtn,button.navibtn {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 0.5rem;
    }

a.btn-flat {
    overflow: hidden;
    padding: 0.5em;
    color: #269ffc;
    border-radius: 0;
    background: #FFF;
    border: solid 2px #269ffc;
    }

a.btn-flat span {position: relative;}
a.btn-flat:hover span{color: #FFF;}

a.btn-flat:before {
    position: absolute;
    top: -7%;
    left: 0;
    
    width: 100px;
    height: 100px;
    
    content: '';
    transition: all .5s ease-in-out;
    transform: translateX(-80%) translateY(-25px);
    
    border-radius: 50%;
    background: #269ffc;
    }


a.btn-flat:hover:before {
    width: 400px;
    height: 400px;
    transform: translateX(-1%) translateY(-175px);
    }


    #HOWTO a.btn-flat {color: #f9821a; border: solid 2px #f9821a;}
    #HOWTO a.btn-flat:before {background: #f9821a;}


    @media only screen and (max-width: 860px) {
        .ctNavi a{flex: 0 1 36%;}
        #ATTRACTION .ctNavi a{flex: 0 1 27%; margin: 0 0.5% 0.5em;}
        }

    @media only screen and (max-width: 480px) {
        .ctNavi a{flex: 0 1 42%;}
        #ATTRACTION .ctNavi a{flex: 0 1 42%;}
        .navibtn,a.navibtn,button.navibtn {font-size: 0.9em;}
        }



/*STORE*/
#STORE .storeDetail{
    margin-bottom: 3em;
    background: #FFF;
    border: solid 3px #58bb60;
    }

#STORE .storeDetail > div{
    margin: 5px;
    padding: 2.5% 3.5%;
    border: dashed 2px #58bb60;
    }

.access{display: flex;}
    .access > div{flex: 0 1 48%; margin: 0 1% 2em;}
    .strPhoto img{border-top-left-radius: 30px; border-bottom-right-radius: 30px;}

    .snsButton {
        position: absolute;
        top: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		height: auto;
		margin: 0px auto;
		padding: 0 0 35px;
		clear: none;
		z-index: 888;
		}

	.snsButton > div > a {
		display: block;
		width: 45px;
		height: 45px;
        margin: 0 8px 0 0;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;
		}

	.snsButton > div.tweetBtn a {background-image: url("../images/sns_ico_02_tw.svg");}
	.snsButton > div.instaBtn a {background-image: url("../images/sns_ico_05_instagram.png");}
	.snsButton > div.tiktokBtn a {background-image: url("../images/sns_ico_04_tiktok.png");}


.access > div:last-child > div{padding: 1em 0 0; border-bottom: solid 1px #aa9e92;}
.access > div:last-child > div:last-child{border-bottom: none;}
.access > div:last-child > div h5 + p{margin-left: 1em;}
.access > div:last-child > div:first-child > h5 + p{display: inline-block; margin-right: 2rem;}

.mapLink{display: inline-block;}
.mapLink a{
    padding: 0.35em 2rem;
    font-size: 0.9em;
    font-weight: 700;
    color: #FFF;
    display: block;
    background: #5b4841;
    border: solid 2px #5b4841;
    text-align: center;
    position: relative;
    }
    .mapLink a:hover{color: #5b4841; background: #FFF;}

    .mapLink i{font-size: 1.4rem; position: absolute; top: 21%; left: 0.25em;}

    @media only screen and (max-width: 1100px) {.mapLink{margin: 0 0 1em 1.15em;}}
    @media only screen and (max-width: 480px) {
        #STORE .storeDetail > div{padding: 5% 3.5% 2.5%;}
        .access{display: block;}
        .access > div:first-child{margin: 1% 0;}
        .access > div:first-child > p{margin: 1em 0 0;}
        .mapLink{width: 95%;}
        .mapLink a{width: 28%; margin: 0 0 0 auto;}
        }
    

.storeDetail p{margin: 1em 0 1.5em;}

.FlexBox{display: flex; margin: 1em 0;}
    .block02 div, .block02 p{flex: 0 1 48%; margin: 0 1%;}
    .block03 div, .block03 p{flex: 0 1 32%; margin: 0 auto;}

.strTwitter{margin: 0 5%; height: 500px; overflow-y: scroll;}
.strMAP{margin: 1em 0 0.5em!important; text-align: center;}
.strGroup{padding: 2em 0 4em; text-align: center;}



/*campaign*/
.coupon{padding: 3em 1em 3em 0.75em;}

.cpn {
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    }

div.btn-coupon {
    padding: 0.65em 0.5em 0.4em;
    color: #5ebb62;
    background: #fff;
    }

div.btn-coupon i {
    font-size: 1.6rem;
    position: absolute;
    width: 1rem;
    -webkit-transition: all 1s;
    transition: all 1s;
    text-align: right;
    color: #e8437f;
    background: #FFF;
    }

div.btn-coupon i.fa-position-top {top: -0.75em; left: 0.5em;}

div.btn-coupon i.fa-position-bottom {
    right: 0.5em;
    bottom: -1em;
    left: auto;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    }

div.btn-coupon span {font-size: 4rem; font-style: italic;}

div.btn-coupon:before {
    position: absolute;
    top: -9px;
    left: -9px;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
    content: "";
    border: 2px solid #e8437f;
    }

div.btn-coupon:hover {color: #e8437f; background: rgba(255, 255, 255, 0.9);}
div.btn-coupon:hover i {width: 90%;}



/*HOW TO*/
#HOWTO main > section article,#STORE #HOWTO{
    margin-bottom: 10em;
    background: #FFF;
    border: solid 3px #f9821a;
    }

    #STORE #HOWTO{max-width: 1480px; margin: auto auto 3em;}
    @media only screen and (max-width: 860px) {#STORE #HOWTO{margin: auto 1em 3em;}}

#HOWTO main > section article > div,#STORE #HOWTO > div{
    margin: 5px;
    padding: 2.5% 3.5%;
    border: dashed 2px #f9821a;
    }

#HOWTO .FlexBox{flex-wrap: wrap;}
.suggest p{flex: 0 1 50%; margin: 0;}
.suggest p > img{vertical-align: bottom;}

.ht_more{padding: 2em 0; text-align: center;}


/*evolution*/
.process, .hakushin, .kokushin, .battle{
    max-width: 1200px;
    margin: 0 auto 15%;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    }

    .process{background-image: url("../images/rakugakids_2022/howto_scoop_shinka02.jpg"); background-position: top 22% center;}
    .hakushin{background-image: url("../images/rakugakids_2022/howto_scoop_hakushinka02.jpg"); background-position: top 44% center;}
    .kokushin{background-image: url("../images/rakugakids_2022/howto_scoop_kokushinka02.jpg"); background-position: top 44% center;}

.process h3, .hakushin h3, .kokushin h3,.battle h3{margin: 0; padding: 0;}
.comment{width: 80%; margin-top: 36.5%;}
.battle .FlexBox{margin: 0;}
.battle .comment{width: 80%; margin-top: 0;}
.chara{width: 18%; position: absolute; right: 2.5%; bottom: -13.5%;}


/*ATTRACTION*/
#ATTRACTION main > section article{
    margin-bottom: 5em;
    background: #FFF;
    border: solid 3px #2ca2fc;
    }

#ATTRACTION main > section article > div{
    margin: 5px;
    padding: 2.5% 3.5%;
    border: dashed 2px #2ca2fc;
    }

#Rakugaki,#Izumi,#Battle,#Fort,#Tree,#Forest{padding-top: 100px; margin-top:-100px;}

#ATTRACTION .FlexBox{flex-wrap: wrap; align-items: center;}
@media only screen and (max-width: 860px) {#ATTRACTION .FlexBox:first-child{display: block;}}

.info div{flex: 0 1 48%; margin: 0 1%;}
.info div:first-child{padding: 4.5% 0 6%; background-size: contain; background-repeat: no-repeat; background-position: center;}
    .red div:first-child{background-image: url("../images/rakugakids_2022/attraction_areabg_red.jpg");}
    .blue div:first-child{background-image: url("../images/rakugakids_2022/attraction_areabg_blue.jpg");}
    .brown div:first-child{background-image: url("../images/rakugakids_2022/attraction_areabg_brown.jpg");}
    .green div:first-child{background-image: url("../images/rakugakids_2022/attraction_areabg_green.jpg");}

.areaPhoto p{flex: 0 1 32%; margin: 0.5% 0.65%;}

#ATTRACTION h3 {
    position: relative;
    padding: 1.5rem;
    text-align: center;
    }

    #ATTRACTION h3:before {
        position: absolute;
        bottom: -10px;
        left: calc(50% - 40px);
        width: 80px;
        height: 5px;
        content: '';
        border-radius: 3px;
        background: #000;
        }

        #Rakugaki h3:before, #Battle h3:before{background: #e88918;}
        #Izumi h3:before{background: #59c7fb;}
        #Fort h3:before{background: #a18d43;}
        #Tree h3:before, #Forest h3:before{background: #86ad9b;}

#ATTRACTION h3 + p{padding-top: 1.5rem; text-align: center;}
br.sp{display: none;}

.pv{
	width:100% !important;
	margin: 1.5em 0 0 !important;
	padding:0 0 56.25% 0!important;
	position:relative;
	}

.pv iframe{
	width:100%;
	height:100%;
	top:0;
	right:0;
	position:absolute;
	}


@media only screen and (max-width: 480px) {
    #ATTRACTION h3 img{width: auto; height: 45px;}
    #ATTRACTION h3 + p{font-size: 0.9em;}
    br.sp{display: block;}
    }

/*ADMISSION*/
#STORE #ADMISSION{max-width: 1480px; margin: auto auto 3em;}
@media only screen and (max-width: 860px) {#STORE #ADMISSION{margin: auto 1em 3em;}}


.admDetail{
    margin-bottom: 10em;
    background: #FFF;
    border: solid 3px #e53972;
    }

.admDetail > div{
    margin: 5px;
    padding: 2.5% 3.5%;
    border: dashed 2px #e53972;
    }

.admDetail table{
    width: 98%;
    margin: 1em auto 5em;
    border: solid 1px #705f50;
    text-align: center;
    border-spacing: 0;
    background: rgba(255,255,255,0.6);
    }

.admDetail th{
    width: 25%;
    padding: 0.65em;
    color: #705f50;
    border-right: solid 1px #705f50;
    border-bottom: solid 1px #705f50;
    background: rgba(126,107,90,0.1);
    }

    .admDetail th br{display: none;}

.admDetail td{
    padding: 2em 1em;
    border-right: solid 1px #705f50;
    border-bottom: solid 1px #705f50;
    vertical-align: middle;
    }

.admDetail tr:last-child th{border-bottom: none;}
.admDetail tr:last-child td{border-bottom: none;}
.admDetail th:last-child{border-right: none;}
.admDetail td:last-child{border-right: none;}

.normal, .webEntry{
    max-width: 180px;
    margin: 0 auto 0.25em;
    padding: 0.25em;
    font-weight: bold;
    border-radius: 5px;
    }

    .normal{background: #eeeeee;}
    p + .normal{margin: 1.5em auto 0.25em;}
    .webEntry{margin: 1.5em auto 0.25em; color: #FFF; background: #e00016;}

.admDetail ul{margin-bottom: 3em;}

.group{display: flex; margin-bottom: 2em;}
.group div{flex: 0 1 auto; margin: 0 1%;}


/*formlink*/
.btn,a.btn,button.btn {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
    }

.btn-wrap {margin: 30px 0;}

a.btn-c {
    font-size: 1em;
    position: relative;
    padding: 0.65rem 4.5rem 1.5rem 4.5rem;
    color: #fff;
    background: #e53972;
    -webkit-box-shadow: 0 5px 0 #be2054;
    box-shadow: 0 5px 0 #be2054;
    }

a.btn-c span {
    font-size: 1em;
    position: absolute;
    top: -10px;
    left: calc(50% - 152px);
    display: block;
    width: 300px;
    padding: 0.2rem 0;
    color: #e53972;
    border: 2px solid #e53972;
    border-radius: 0.5rem;
    background: #fff;
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    }

a.btn-c:hover {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
    color: #fff;
    background: #e53972;
    -webkit-box-shadow: 0 2px 0 #be2054;
    box-shadow: 0 2px 0 #be2054;
    }

a.btn-c:hover:before {left: 2rem;}


    @media only screen and (max-width: 860px) {
        .admDetail table tr:first-child{display: none;}

        .admDetail th{width: 28%;}
        .admDetail th br{display: block;}

        .admDetail table td{
            padding: 0 0 1.5em;
            display: block;
            border-right: none;
            border-bottom: solid 1px #705f50;
            }
    
        .admDetail table td > p{padding: 0 0.5em;}

        .admDetail table td:before {
            display: block;
            margin-bottom: 1.5em;
            padding: 0.65em;
            border-bottom: dotted 2px #705f50;
            background: rgba(126,107,90,0.1);
            font-weight: bold;
            }
 
        .type01 td:nth-of-type(1):before {content: "基本料金（60分）";}
        .type01 tr.watch td:nth-of-type(1):before {content: "料金";}
        .type01 td:nth-of-type(2):before {content: "延長料金（10分）";}
        .type01 td:nth-of-type(3):before {content: "概要";}

        .type01 tr.pack td:nth-child(2),.type01 tr.pack td:nth-child(3){border-bottom: solid 1px #705f50!important;}

        .type01 tr.watch td:nth-child(2){border-bottom: solid 1px #705f50;}
        .type01 tr.watch td:nth-child(3){display: none;}

        .normal, .webEntry{margin: 0 auto 0.25em!important;}
        p + .normal{margin: 1.5em auto 0.25em!important;}
        .webEntry{margin: 1.5em auto 0.25em!important;}
        
        .group{display: block; text-align: center; margin-bottom: 4em;}
        .btn-wrap {margin: 30px 0 40px;}
        }


    @media only screen and (max-width: 480px) {
        .group{padding-top: 0.15em; margin-bottom: 5em;}
        a.btn-c {padding: 0.65rem 3.5rem 1.5rem 3.5rem;}
        }


/*FAQ*/
.SupportDetail{
    margin-bottom: 10em;
    background: #FFF;
    border: solid 3px #c369b3;
    }

.SupportDetail > div{
    margin: 5px;
    padding: 2.5% 3.5%;
    border: dashed 2px #c369b3;
    }

.SupportDetail article:first-child{padding-bottom: 5em;}

.SupportDetail dt {
    position: relative;
    padding: 0.001em 0 0 4.25em;
    border-top: solid 1px #eaf7fd;
    }

    .SupportDetail dt:first-child{border-top: none;}

.SupportDetail dt span {
    position: absolute;
    top: 15px;
    left: 0;
    padding: 0.65em 1em 0.75em;
    color: #FFF;
    font-weight: bold;
    background: #00aacc;
    border-radius: 50%;
    }

.SupportDetail dt span:after {
    position: absolute;
    top: calc(50% - 5px);
    right: -9px;
    width: 0;
    height: 0;
    content: '';
    border-width: 5px 0 5px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #00aacc;
    }

.SupportDetail dt > p{padding-top: 0.65em;}


.SupportDetail dd {
    position: relative;
    padding: 0.001em 0 0 5em;
    margin-bottom: 2em;
    }

.SupportDetail dd > span {
    position: absolute;
    top: 15px;
    left: 8px;
    padding: 0.65em 1em 0.75em;
    color: #FFF;
    font-weight: bold;
    background: #e8437e;
    border-radius: 50%;
    }

.SupportDetail dd > span:after {
    position: absolute;
    top: calc(50% - 5px);
    right: -9px;
    width: 0;
    height: 0;
    content: '';
    border-width: 5px 0 5px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #e8437e;
    }

.SupportDetail dd > p{padding-top: 0.65em;}


@media only screen and (max-width: 480px) {
    .SupportDetail dt span {top: 25px;}
    .SupportDetail dt > p{padding-top: 1.25em;}
    .SupportDetail dd {padding: 0.001em 0 0 4.25em; margin-left: 0;}
    .SupportDetail dd > span {left: 0;}
    }


.covid{padding: 1em;}
.covid div{
    max-width: 860px;
    margin: 0 auto 10em;
    padding: 1em 1.5em;
    border: double 6px #e00000;
    background: #FFF;
    }

.media{padding: 1em;}
.media > div{
    max-width: 860px;
    margin: 0 auto 10em;
    padding: 1em 1.5em 2em;
    border: solid 2px #FFF!important;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    background: rgba(255,255,255,0.85)!important;
    }

.media h4{margin: 1em 0 0;}

.media a{display: block;}
.media a:hover{background: rgba(255,253,200,0.5);}

.media article{display: flex; padding: 0.75em 0.5em 0.45em; border-bottom: dotted 2px #59493f; align-items: center;}
.media article div:first-child{flex: 0 1 110px; margin: 0 1%;}
.media article div:last-child{flex: 0 1 82.5%; margin: 0 1%;}
.media article div:last-child p{margin: 0.5em 0;}
.media article div:last-child p:first-child{margin: 0 0 0.5em; font-weight: bold;}

@media only screen and (max-width: 480px) {.media article div:last-child p{font-size: 0.9em;}}

/*----------SNS----------*/
#shareBox {
	width: 100%;
    padding: 0!important;
	text-align: center;
	position: relative;
	}

    #TOP #shareBox {max-width: 1480px; margin: auto;}
    #STORE .access #shareBox {margin-top: 1em; height: 45px;}

	.shareButtons {
		position: absolute;
        top: 0;
		bottom: 0;
		left: calc(47% - 75px);
		display: flex;
		justify-content: space-between;
		width: 240px;
		height: auto;
		margin: 0px auto;
		padding: 0 0 35px;
		clear: none;
		z-index: 888;
		}

	.shareButtons > div> a {
		display: block;
		width: 45px;
		height: 45px;
        margin: 0 1em;
		background-size: contain;
		background: no-repeat top center;
		}

	.shareButtons>div.fbBtn a {background-image: url("../images/sns_ico_01_fb.svg");}
	.shareButtons>div.tweetBtn a {background-image: url("../images/sns_ico_02_tw.svg");}
	.shareButtons>div.lineBtn a {background-image: url("../images/sns_ico_03_line.svg");}
	.shareButtons>div.instaBtn a {background-image: url("../images/sns_ico_05_instagram.svg");}
	.shareButtons>div.tiktokBtn a {background-image: url("../images/sns_ico_04_tiktok.svg");}
	

    @media only screen and (max-width: 860px) {.shareButtons {left: calc(44% - 75px);}}
    @media only screen and (max-width: 480px) {.shareButtons {left: calc(40% - 75px);}}


/*----------footer----------*/
footer{
	padding: 3em 0 2em;
	color: #FFF;
	background-color: #705f50;
	}

footer > div{
	max-width: 1380px;
	margin: auto;
	padding: 0 1em 1em;
	}


ul.taitoLink{margin: 1em 0; padding: 0 0 0;}
	
ul.taitoLink li{
	font-size: 1.0em;
	margin-right: 1.0em;
	display: inline-block;
	}
	
ul.taitoLink a{color: #FFF; font-weight: 400!important; text-decoration: none;}
ul.taitoLink a:hover{color: #7ecef4;}


footer article p:last-child{
	margin-top: 2em;
	padding-top: 2em;
	font-size:0.8em;
	color: #FFF;
	text-align: center;
	border-top: solid 1px #b1a296;
	}