@media screen and (max-width: 480px){ /*ウィンドウ幅の最大が480px以下のときに適用*/


/*ここからCSSの記述*/
	
	html{
		height: 100%;
		width: 100%;
	}
	
	body{
		margin: 0;
		background-color: #ffe9a9;
	}	
	
	/*
	loading
	*/
	.loading {
    	position: fixed;
  	    z-index: 100;
  	    top: 0;
  	    right: 0;
  	    bottom: 0;
  	    left: 0;
  	    background: #f7edc6;
	}
	
	.loading__img {
  	    position: absolute;
  	    top: 50%;
    	left: 50%;
  	    transform: translate(-50%,-50%);
	}
	
	.img-load{
		max-width: 85vw;
		max-height: auto;
		object-fit: contain;
	}
	
	.museum-wall{
		/**/
		display: block;
		height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
	}
	/*
	PCメニュー非表示
	*/
	.header-pc{
		display: none;
	}

    /* スマホメニュー from copypet.jp*/
	* {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    a,
    a:visited,
    a:hover,
    a:active {
        text-decoration: none;
        color: inherit;
    }
    input {
        display: none;
    }
    .cp_fullscreenmenu {
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
    }
    /*menuコンテンツ*/
    .cp_fullscreenmenu .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(to top, rgba(166, 136, 189, 0.9) 0%, rgba(224, 185, 255, 0.5) 100%);
    }
    .cp_fullscreenmenu .menu label {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-size: 100%;
    }
    .cp_fullscreenmenu .menu .menucont {
        font-size: 30px;
        position: relative;
        top: 40%;
        margin-top: -170px;
        padding-bottom: 20px;
        text-align: center;
    }
    .cp_fullscreenmenu .menu ul {
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    .cp_fullscreenmenu .menu ul li,
    .cp_fullscreenmenu .menu ul li a {
        transition: all 0.3s ease;
    }
    .cp_fullscreenmenu .menu ul li a {
        display: block;
        padding: 10px 0;
        color: #ffffd9;
    }
    .cp_fullscreenmenu .menu ul li a:hover {
        color: rgba(166, 136, 189, 1.0);
    }
    .cp_fullscreenmenu .menu ul li:hover {
        background: #ffe9a9;
    }
    /*クリックしたらメニューが開閉の動作*/
    .cp_fullscreenmenu .menuEffects {
        visibility: hidden;
        transition: opacity 0.5s, visibility 0.5s;
        opacity: 0;
    }
    .cp_fullscreenmenu .menuEffects ul {
        transition: all 0.5s;
        transform: translateY(0%);
    }
    .cp_fullscreenmenu #menuToggle:checked ~ .menuEffects {
        visibility: visible;
        transition: opacity 0.5s;
        opacity: 1;
    }
    .cp_fullscreenmenu #menuToggle:checked ~ .menuEffects ul {
        opacity: 1;
    }
    .cp_fullscreenmenu #menuToggle:checked ~ .hamburger .open {
        background-color: transparent;
    }
    .cp_fullscreenmenu #menuToggle:checked ~ .hamburger .open:before {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        content: '';
        transform: rotate(45deg);
        background-color: #ffffd9;
    }
    .cp_fullscreenmenu #menuToggle:checked ~ .hamburger .open:after {
        position: relative;
        z-index: 1;
        top: 0;
        right: 0;
        content: '';
        transform: rotate(-45deg);
        background-color: #ffffd9;
    }
    .cp_fullscreenmenu #menuToggle:not(:checked) ~ .menuEffects ul {
        transform: translateY(-30%);
        pointer-events: none;
    }
    /*ハンバーガー*/
    .cp_fullscreenmenu .hamburger {
        position: relative;
        top: 0;
        right: 0;
        display: block;
        width: 50px;
        height: 50px;
        padding: 15px;
        cursor: pointer;
    }
    .cp_fullscreenmenu .hamburger:hover .open:before {
        top: -9px;
    }
    .cp_fullscreenmenu .hamburger:hover .open:after {
        top: 5px;
    }
    .cp_fullscreenmenu .open,
    .cp_fullscreenmenu .open:before,
    .cp_fullscreenmenu .open:after {
        position: relative;
        display: block;
        width: 24px;
        height: 4px;
        border-radius: 2px;
        background-color: #cc003a;
        transition: all 0.3s ease;
    }
    .cp_fullscreenmenu .open {
        top: 8px;
        cursor: pointer;
    }
    .cp_fullscreenmenu .open:before {
        top: -8px;
        content: '';
        transform: rotate(0deg);
    }
    .cp_fullscreenmenu .open:after {
        top: 4px;
        content: '';
    }
    
    .menu-img{
        max-width: 80vw;
    }
    
    /*
    top-img
    */
    
	.game-top{
		position: absolute;
  	    top: 5%;
  	    left: 30%;
  	    transform: translate(-50%,-50%);
		max-height: 7%;
	}
	.top-index{
		z-index: 5;
	}
	
	.link-flower{
		position: absolute;
		top: 3%;
		left: 5%;
	}
	.link-flower > img{
		max-height: 20vh;
	}
	
	.link-field{
		position: absolute;
		bottom: 12%;
		right: 10%;
	}
	.link-field > img{
		max-width: 35vw;
	}

	.link-book{
		position: absolute;
		top: 35%;
		right: 3%;
	}
	.link-book > img{
		max-height: 15vh;
	}
	
	.link-castle{
		position: absolute;
		bottom: 25%;
		left: 8%;
	}
	.link-castle > img{
		max-width: 40vw;
	}
	
	.link-boat{
		position: absolute;
		top: 7%;
		right: 5%;
	}
	.link-boat > img{
		max-height: 25vh;
	}
	
	.link-paint{
		position: absolute;
		top: 25%;
		right: 40%;
	}
	.link-paint > img{
		max-height: 13vh;
	}
	
	.card-reverse {
        display: none;
	}
	
	.link-sp{
	    pointer-events: none;
	}
	
	/* how-to-play */
	
	.gen-box-howtoplay{
	   display: block;
	    position: absolute;
		box-sizing: content-box;
		top: 40%;
		left: 50%;
		transform: translate(-50%,-50%);
	    width: 90vw;
	    height: 70vh;
	    margin: 5vh 0px 0px 0px;
	    padding: 0px 0px 0px 0px;
	    border-radius: 0px;
	    border-style: ridge;
		border-width: 8px;
	    border-color:  rgba(153, 136, 5);
        background-image: 
			linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
			url(../material/field-noborder.png);
		background-size: cover;
		background-position: center;
	}
	
	.img{
		max-width: 40%; 
		display: block;
	}
	
	.play{
		width: 90%;
		display: inline-block;
		vertical-align: top;
		margin: 10px;
	}
	
	.for-other{
		display: inline-block;
		padding: 10px;
		margin: 5px;
		background-color: rgba(180, 230, 255, 1.0);
		width: 80%;
		border-radius: 5px;
		border-style: solid;
		border-color: rgba(66, 33, 11, 1.0);
		text-decoration: none;
	}
	
	/* story */
	.gen-box-story1{
	    display: block;
	    position: absolute;
		box-sizing: content-box;
		top: 40%;
		left: 50%;
		transform: translate(-50%,-50%);
	    width: 90vw;
	    height: 70vh;
	    margin: 5vh 0px 0px 0px;
	    padding: 0px 0px 0px 0px;
	    border-radius: 0px;
	    border-style: ridge;
		border-width: 8px;
	    border-color:  rgba(153, 136, 5);
        background-image: 
			linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
			url(../material/book-noborder.png);
		background-size: cover;
		background-position: top;
	}
	
	.gen-box-story2{
	    display: block;
	    position: absolute;
		box-sizing: content-box;
		top: 125%;
		left: 50%;
		transform: translate(-50%,-50%);
	    width: 90vw;
	    height: 70vh;
	    margin: 0px 0px 10vh 0px;
	    padding: 0px 0px 0px 0px;
	    border-radius: 0px;
	    border-style: ridge;
		border-width: 8px;
	    border-color:  rgba(153, 136, 5);
        background-image: 
			linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
			url(../material/book-noborder.png);
		background-size: cover;
		background-position: bottom;
	}
	
	/*
	outline
	*/
	
	.gen-box-outline1{
		display: block;
	    position: absolute;
		box-sizing: content-box;
		top: 40%;
		left: 50%;
		transform: translate(-50%,-50%);
	    width: 90vw;
	    height: 70vh;
	    margin: 5vh 0px 0px 0px;
	    padding: 0px 0px 0px 0px;
	    border-radius: 0px;
	    border-style: ridge;
		border-width: 8px;
	    border-color:  rgba(153, 136, 5);
        background-image: 
			linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
			url(../material/flower-noborder.png);
			background-size: cover;
			background-position: top;
	}
	.gen-box-outline2{
		display: block;
	    position: absolute;
		box-sizing: content-box;
		top: 125%;
		left: 50%;
		transform: translate(-50%,-50%);
	    width: 90vw;
	    height: 70vh;
	    margin: 0px 0px 10vh 0px;
	    padding: 0px 0px 10px 0px;
	    border-radius: 0px;
	    border-style: ridge;
		border-width: 8px;
	    border-color:  rgba(153, 136, 5);
        background-image: 
			linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
			url(../material/flower-noborder.png);
			background-size: cover;
			background-position: bottom;
	}
	
	/* caution */
	
	.gen-box-caution1{
		display: block;
	    position: absolute;
		box-sizing: content-box;
		top: 40%;
		left: 50%;
		transform: translate(-50%,-50%);
	    width: 90vw;
	    height: 70vh;
	    margin: 5vh 0px 0px 0px;
	    padding: 0px 0px 0px 0px;
	    border-radius: 0px;
	    border-style: ridge;
		border-width: 8px;
	    border-color:  rgb(153, 136, 5);
        background-image: 
			linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
			url(../material/castle-noborder.png);
			background-size: cover;
			background-position: top;
	}
	.gen-box-caution2{
		display: block;
	    position: absolute;
		box-sizing: content-box;
		top: 125%;
		left: 50%;
		transform: translate(-50%,-50%);
	    width: 90vw;
	    height: 70vh;
	    margin: 0px 0px 10vh 0px;
	    padding: 0px 0px 10px 0px;
	    border-radius: 0px;
	    border-style: ridge;
		border-width: 8px;
	    border-color:  rgb(153, 136, 5);
        background-image: 
			linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
			url(../material/castle-noborder.png);
			background-size: cover;
			background-position: bottom;
	}
	
	/* last-answer */
	
	/* lastanswer */
	
	.dark-layer{
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100vw;
	    height: 100vh;
	    background-image: 
		    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
	    	linear-gradient(to bottom, #ffe9a9, #ffe9a9);							
	}
	.spotlight{
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 90vw;
		height: 90vw;
		background-image:
			radial-gradient(rgba(255, 255, 255, 0.1) 60%, rgba(0,0,0,0.5) 70%),
			url(../material/last-pic.png);
		background-repeat:
			no-repeat,
			no-repeat;
		background-size:
			auto,
			contain;
	}
	
    form{
		position: absolute;
		top: 70%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.input-box{
		display: block;
		height: 40px;
		width: 80vw;
		border-radius: 10px;
		font-size: 20px;
		text-align: center;
	}

	.submit-btn {
		display: inline;
		margin: 0px;
		height: 40px;
		width: 100px;
		background-color: darkcyan;
		color: white;
		font-size: 20px;
		border-radius: 10px;
	}

	.submit-btn:hover {
		cursor: pointer;
	}

	.form-text{
		margin: 5px;
		font-size: 20px;
	}

	
	/*
	footer
	*/
	
	.rope-loop2{
		position: absolute;
		bottom: 5.5vh;
		height: 6.5vh;
		width: 100%;
		background-image: url(../material/rope-loop.png);
		background-repeat: repeat-x;
		background-size: contain;
		z-index: 2;
	}
	
	footer{
		background-color: #94002A;
		height: 7vh;
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	
	.foot-man{
		height: 14vh;
		width: auto;
		position: absolute;
		bottom: 3.5vh;
		right: 40vw;
		z-index: 3;
	}
	
	.foot-detective{
		height: 14vh;
		width: auto;
		position: absolute;
		bottom: 3.5vh;
		right: 30vw;
		z-index: 3;
	}
	
	.foot-family{
		height: 14vh;
		width: auto;
		position: absolute;
		bottom: 3.5vh;
		left: 15vw;
		z-index: 3;
	}
	
	.foot-child{
	    height: 10vh;
		width: auto;
		position: absolute;
		bottom: 3.5vh;
		left: 20vw;
		z-index: 3;
	}
	
	.foot-woman{
		height: 13vh;
		width: auto;
		position: absolute;
		bottom: 3.5vh;
		right: 10vw;
		z-index: 3;
	}
	
	.foot-text{
		position: absolute;
		width: 60%;
		bottom: 0;
		left: 50%;
		text-decoration: none;
		color: rgba(255, 243, 184, 0.4);
		font-size: 1.2ex;
		-ms-transform: translate(-50%,-50%);
  	    -webkit-transform: translate(-50%,-50%);
  	    transform: translate(-50%,-50%);
	}
	
	.foot-text > a{
	    text-decoration: none;
	    color: rgb(255, 243, 184);
	}
	
}