@charset "utf-8";
/*↓↓のサンプルフォント
https://fonts.google.com/specimen/M+PLUS+Rounded+1c?preview.text=%E6%97%A5%E5%8C%BB%E5%90%9B%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E3%82%B2%E3%83%BC%E3%83%A0*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
/*
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-rounded-1c-extrabold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.outfit-<uniquifier> {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

*/
/* header */
body {
  font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
}

header {
	width: 100%;
    height: 67px;
    position: absolute;
    top: 0px;
}
.base-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1024px;
	width: 100%;
	height: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
.p-logo {
    max-width: 195px;
    width: 100%;
}
.p-logo > a {
	width: 100%;
	height: 100%;
}
.head-logo {
	width: 100%;
}

.icon{
    text-align: center;
}
#sp-hamburger{
    position: fixed;
	top: 0px;
    right: 30px;
    width: 60px;
    height: 67px;
    z-index: 100;
}
@media screen and (min-width: 1300px){
	#sp-hamburger {
		right: calc(50% - 500px);
	}
}
#sp-hamburger .icon span {
    position: absolute;
    left: 12px;
    width: 38px;
    height: 3px;
    background-color: #0068b2;
    border-radius: 15px;
    transition: ease 0.2s;
}

/*メニュークローズ時のcss*/
#sp-hamburger .icon span:nth-of-type(1) {
	top: 18px;
}
#sp-hamburger .icon span:nth-of-type(2) {
	top: 31px;
}
#sp-hamburger .icon span:nth-of-type(3) {
	bottom: 20px;
}

/*メニューオープン時のcss*/
#sp-hamburger .open span:nth-of-type(1),
#sp-hamburger .open span:nth-of-type(2),
#sp-hamburger .open span:nth-of-type(3){
	display: none;
}
.menu_close_txt{
	max-width: 45px;
	text-align: center;
	transition: all 0.3s;
	opacity: 0;
	margin-top: 7px;
}
.open .menu_close_txt{
	opacity: 1;
}

/*メニュー全体*/
.sp-nav {
	display: none;
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
    height: 100vh;
    background: #fffbc4;
}
.sp-nav ul {
	list-style: none;
    padding: 67px 0px 0px 0px;
}
.sp-nav li {
	font-weight: bold;
	text-align: center;
}
.sp-nav a{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	justify-content: center;
    width: 100%;
    padding: 16px 20px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	font-style: normal;
    max-width: 700px;
    width: 100%;
    color: #666666;
    font-size: 24px;
    margin-left: auto;
    margin-right: auto;
}
.sp-nav a p{
    min-width: 330px;
    text-align: left;
    color: #666666;
}
.sp-nav a span.menu-next-icon{
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../img/menu/menu_next_icon.png);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
}
.sp-nav li:before { 
	content: "";
    display: block;
    width: 100%;
    height: 13px;
    background-image: url(../img/menu/menu_line_double.png);
    background-repeat: repeat-x;
    background-size: 12px;
    background-position: center;
}
.sp-nav li:last-child::after { 
    content: "";
	display: block;
    width: 100%;
    height: 13px;
    background-image: url(../img/menu/menu_line_double.png);
    background-repeat: repeat-x;
    background-size: 12px;
    background-position: center;
}
.menu-btn-contents{
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.menu-btn-contents a:hover{
	opacity: 0.7;
}
.menu-btn-contents img{
	width: 100%;
}
.menu-bottom-contents{
    max-width: 230px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	margin-top: 25px;
}
.menu-bottom-contents img{
	width: 100%;
}
/********************** header関係END ***********************************/
.section_com{
	/*font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;*/
	font-family: "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","Hiragino Sans", Meiryo, sans-serif;
}
.subpage{
	background: #fffbc4;
	min-height: 100vh;
	min-height: 100dvh;
    padding-top: 67px;
}
.page-inner{
    padding: 17px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.page-inner img{
	width: 100%;
}
.page_ttl_contents{
    margin: 15px 0px 42px 0px;
    text-align: center;
}
.page_ttl_contents img{
	max-width: 150px;
}

/*1段目*/
.main_contents1{
	background-image: url("../img/back_img1.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 53px;
    /*margin-top: -67px;*/
	margin-bottom:-3px;
}
.top_star_img{
	margin-top: -45px;
}


/*2段目*/
.main_contents2{
	background-image: url("../img/back_img2.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.game_contents_ttl img{
    width: 105%;
    margin-left: -9px;
}

.game_contents_main.guide2{
    margin-top: 20px;
    margin-bottom: 30px;
}

.game_guide_com{
    border-radius: 15px;
    border: 2px solid #fff;
    padding: 60px 15px 15px 15px;
	box-shadow: 4px 5px 5px -5px #000;
}
.guide1 .game_guide_com{
    padding: 60px 15px 15px 15px;
}
.guide2 .game_guide_com{
	padding: 80px 7px 15px 7px;
}
.game_guide_blue{
	background: #59bded;
}
.game_guide_pink{
	background: #ef94ae;
}

.guide1 .game_ttl_img{
	margin-bottom: -55px;
    margin-left: -13px;
    width: 105%;
}

.guide2 .game_ttl_img{
    margin-bottom: -74px;
    margin-left: -7px;
    width: 105%;
}

.game_guide_com a{
	display: block;
    margin-top: 15px;
}
.game_guide_com a:hover{
	opacity: 0.8;
}

/*3段目*/
.main_contents3{
	background: #fffbc4;
    padding: 40px 0px;
}
.top_note_contents{
	/*fffbc4*/
}
	.note_list{
		background: #fff;
	    border-radius: 27px;
	    border: 9px solid #6dbb58;
	    padding: 15px;
	}
		.note_ttl{
			display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    align-content: center;
		    justify-content: center;
		    align-items: center;
		    margin-top: -50px;
		    padding: 0px 43px;
		}
			.note_character_img{
			    max-width: 120px;
				/*max-width: 95px;*/
			}
			.note_txt_img{
			    max-width: 380px;
				/*max-width: 270px;*/
				margin-top: 25px;
			}
		.note_main{
			
		}
			.note_main ul{
			    overflow: scroll;
				 -ms-overflow-style: none;
				scrollbar-width: none;
				
			    min-height: 200px;
			    max-height: 300px;
			    padding: 0px 5px;
			}
			.note_main ul::-webkit-scrollbar{
				display: none;
			}
				.note_main li{
					  padding: 12px 0px;
				}
				.note_main .note_data{
					font-family: "Noto Sans JP", sans-serif;
					font-weight: 400;
					color: #009944;
				    font-size: 19px;
					margin-bottom: 7px;
				}
				.note_main .note_p_txt{
					font-family: "Noto Sans JP", sans-serif;
					font-weight: 500;
					font-size: 21px;
				}
	.note_btn{
		margin-top: 35px;
	}
			.note_btn a{
			    display: block;
			    padding: 8px 0px;
			}
			.note_btn a:hover{
				opacity: 0.8;
			}
			.note_btn img{
			
			}
/*お知らせ詳細*/

.note_ttl_contents{
	text-align: center;
}
	.note_character_img{
		
	}
	.note_ttl_img{
	    max-width: 350px;
	}
	.note_ttl_txt{
		
	}
		.note_ttl_txt p{
			font-family: "Noto Sans JP", sans-serif;
			margin-top: 30px;
		    margin-bottom: 30px;
		    font-size: 25px;
		    font-weight: 500;
		}
		.note_ttl_txt span{
		    display: block;
		    text-align: right;
		    margin: 20px 10px;
		    color: #009944;
		    font-size: 17px;
		}

.note_icon{
    color: #000;
    position: absolute;
    width: 14px;
    height: 14px;
    border-bottom: solid 2px #00a0df;
    border-left: solid 2px #00a0df;
}

.note_txt_contents p{
	font-size: 17px;
    line-height: 36px;
}

.note_link_btn{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
	padding-top: 60px;
	padding-bottom: 60px;
}
.note_link_btn a{
    color: #00a0df;
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}
	.note_back{
	    padding-left: 30px;
	}
		.note_back .note_icon{
			-webkit-transform: rotate(45deg);
		    transform: rotate(45deg);
		    left: 12px;
		    top: 3px;
		}
		
	.note_next{
	    padding-right: 30px;
	}
		.note_next .note_icon{
			-webkit-transform: rotate(225deg);
		    transform: rotate(225deg);
		    right: 12px;
		    top: 3px;
		}
	

@media screen and (max-width: 768px) {
	
}

@media screen and (max-width: 480px) {
	.sp-nav a{
		font-size: 20px;
		font-weight:800;
	    padding: 9px 20px;
	}
	#sp-hamburger .icon span{
		width: 33px;
	}
	#sp-hamburger{
	    right: 5px;
	}
	.menu_close_txt{
		max-width: 33px;
	    margin-top: 13px;
	}
	.menu-btn-contents{
		max-width: 395px;
		margin-top: 5px;
	}
	.menu-bottom-contents{
		/*margin-top: 38%;*/
        margin-top: 8vh;
	}
	.note_txt_img{
		max-width: 270px;
	}
	.note_character_img{
	    max-width: 95px;
	}
}

#blockOverlay {
	position: fixed;
	inset: 0;
    line-height: normal;
	background: rgba(0, 0, 0, 0.64);
	color: white;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	backdrop-filter: blur(4px);
	z-index: 9999;
}
#blockOverlay img{
	max-width: 110px;
    margin-bottom: 40px;
}
@media screen and (max-width: 600px){
	#blockOverlay {
		font-size: 18px;
	}
}