@font-face {
  font-family: 'digital';
  src:url("./font/digital-7.ttf") format("truetype");
}
@font-face {
  font-family: 'HGP創英角ﾎﾟｯﾌﾟ体';
  src:url("./font/HGRPP1.TTC") format("truetype");
}
img{
	width:100%;
}
.osero_result_contents {
	max-width: 680px;
}
.mode_guide .osero_mode_contents {
	max-width: 680px;
}
.subpage{
    background-image: url("../img/osero/osero_back.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.medium_flex{
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
    align-items: center;
}

.osero_guide_contents{
	font-family: "M PLUS Rounded 1c", sans-serif;
    /*font-size: 23px;*/
    font-size: 20px;
    font-weight: 800;
    font-style: normal;
    color: #4d4d4d;
    background: #d3edf9;
    border-radius: 36px;
    padding: 21px 25px 10px 25px;
    margin: 12px 0px;
    max-height: 390px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*ルビ文字装飾*/
.osero_guide_contents ruby[data-ruby] rt {
  display: none;
}
 
.osero_guide_contents ruby[data-ruby] {
  position: relative;
  display: inline-block;
}
 
.osero_guide_contents ruby[data-ruby]::after {
  content: attr(data-ruby);
  position: absolute;
  transform: translate(-50%, -1.7em);
  display: block;
  left: 50%;
  top: 0;
  white-space: nowrap;
  font-size: 44%;
  letter-spacing: 0;
}

	.osero_guide_contents p{
	    line-height: 32px;
	    margin-bottom: 5px;
	}
	.osero_guide_contents .rubi1{
		line-height: 32px;
	}
	.osero_guide_contents .rubi2{
		line-height: 35px;
	}
	.osero_guide_contents .rubi3{
		line-height: 34px;
	}
	.osero_guide_contents .sub_title {
	    line-height: 8vw;
	    font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
	    color: #ffffff;
	    border-radius: 6vw;
	    padding: 3vw 0vw 1vw 1vw;
	    margin-bottom: 4vw;
	    font-weight: normal;
        text-align: center;
	}
	.osero_guide_contents p span {
		font-size: 4vw;
	}
	.osero_guide_contents .sub_title.orenge {
	    background-color: #f7931e;
	}
	.osero_guide_contents .sub_title.blue {
	    background-color: #0071bc;
	}

.osero_start_btn{
    display: block;
    max-width: 340px;
    margin: 18px auto;
}

.osero_start_btn:hover{
    opacity: 0.8;
}

/*************************level選択POP 装飾*********************************/

.stage_select_guide{
	border: 6px solid #00a0e9;
    background: #d3edf9;
    border-radius: 20px;
	min-height: 550px;
    max-width: 91%;
    width: 100%;
}

.guide_stage_ttl{
	max-width: 300px;
    margin: -45px auto 10px auto;
    max-width: 91%;
    width: 100%;
}

.level_select_contents{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 25px;
}
	.level_select_contents a{
	    width: 90%;
	    text-align: center;
	    background: #58bdec;
	    border: 5px solid #fff;
	    border-radius: 50px;
	    padding: 14px 20px;
	    margin: 14px 0px;
	}
		.level_select_contents img{
		    max-width: 125px;
		}
.splash_back_contents{
    border-radius: 40px;
    min-width: 340px;
    font-size: 25px;
    box-shadow: -1px 4px #2262a3;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    background: #00a0df;
    color: #fff;
    padding: 15px 20px;
    text-align: center;
    margin-top: 13px;
}
	.splash_back_contents a{
		display: block;
        width: 100%;
	}
@media screen and (max-width: 600px){
	.stage_select_guide{
	    max-width: 91%;
	    border-radius: 4vw;
	    min-height: 125vw;
	}
	.guide_stage_ttl{
	    margin: -10.4vw auto 2.5vw auto;
	}
	.level_select_contents{
		margin-bottom: 5.8vw;
	}
		.level_select_contents a,
		.level_select_contents button{
			border: 1.2vw solid #fff;
		    border-radius: 10vw;
			padding: 2.3vw 5vw;
			margin: 2vw 0px;
		}
			.level_select_contents img{
				max-width: 27vw;
			}
	.splash_back_contents{
        border-radius: 10vw;
        min-width: 57vw;
        font-size: 6vw;
        box-shadow: -0.2vw 1vw #2262a3;
        font-family: "M PLUS Rounded 1c", sans-serif;
        font-weight: 700;
        font-style: normal;
        background: #00a0df;
        color: #fff;
        padding: 3vw 4vw;
        text-align: center;
        margin-top: 3vw;
	}
		.splash_back_contents a{
			display: block;
	        width: 100%;
		}
}
/* ******************オセロゲーム装飾********************** */

.game_page {
    background-image: url("../img/osero/osero_back.png");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}
.osero_game_head {
	/*padding-top: 5px;*/
    padding-top: 1.14vw;
	background-image: url(../img/catch/game-score-top.png);
    background-size: cover;
    background-repeat: no-repeat;
    /*border-bottom: 6px solid #8c6239;*/
    border-bottom: 1.5vw solid #8c6239;
    position: relative;
}
.os_h_top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-top: 1.15vw;
	margin-bottom: 1vw;
}
.os_game_level {
    min-width: 30vw;
    background-color: #8c6239;
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    background-color: #8c6239;
    color: #ffffff;
    text-align: center;
	margin-top: 1.1vw;
    padding: 1.5vw 0;
    font-size: 2.5vw;
    padding-right: 2vw;
}
.os_close_time {
    min-width: 34vw;
    padding: 0 4.5vw 0 6.5vw;
    
}
.os_close_time p{
    font-size: 9vw;
    text-align: center;
    font-family: 'digital';
    letter-spacing: 1.4vw;
    margin-left: 2vw;
}
.os_guide_btn {
    min-width: 36vw;
    margin-top: 0.4vw;
}
.os_h_bottom {
    position: absolute;
    bottom: -3vw;
}
.os_h_bottom.pvpmode {
    bottom: 5vw;
} 
.os_page_back {
	display: block;
    max-width: 30vw;
    background: #f57f45;
    padding: 3vw 5vw;
    text-align: center;
    border-top-left-radius: 0px;
    border-top-right-radius: 20px;
    border-top-right-radius: calc(50% + 16vw);
    border-bottom-right-radius: 20px;
    border-bottom-right-radius: calc(50% + 16vw);
    border-bottom-left-radius: 0px;
    /* border: 2px solid #fff; */
    border: 0.6vw solid #fff;
    /* box-shadow: 4px 5px 5px -5px #000; */
    box-shadow: 1vw 1.2vw 1.2vw -1.2vw #000;
}
.stop_button  {
    position: relative;
}
.stop_button img{
	position: absolute;
    top: 1vw;
    right: 6px;
    z-index: 3;
    max-width: 9vw;
}
        .osero_game_area table {
            margin: 11vw auto 4vw;
            border-collapse: collapse;
        }
        .osero_game_area td {
            width: 15vw;
            height: 15vw;
            border: 1vw solid #ffffff;
            background-color: #f4c889;
            text-align: center;
            vertical-align: middle;
        }
        .osero_game_area tr:nth-child(2n+1) td:nth-child(2n+1) {
            background-color: #fcf6d2;
        }
        .osero_game_area tr:nth-child(2n) td:nth-child(2n) {
            background-color: #fcf6d2;
        }

        .osero_game_area .piece {
            width: 13vw;
            height: 13vw;
            border-radius: 50%;
            display: inline-block;
	        display: flex;
            background-repeat: no-repeat;
		    background-size: 100%;
		    background-position: center;
		    box-sizing: border-box;
			margin: auto;
        }
        .osero_game_area .X { background-image: url(../img/osero/stone_blue.png); }
        .osero_game_area .O { background-image: url(../img/osero/stone_pink.png); }
        .osero_game_area .O-orange { background-image: url(../img/osero/stone_orange.png); }
.osero_game_score {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-around;
    padding-bottom: 2vw;
}
.osero_game_score .player_score{
	background-color: #ffffff;
    width: 30vw;
    height: 16vw;
    margin-left: 10vw;
    text-align: right;
    border: 1.5vw solid #ffffff;
    line-height: 13vw;
    border-radius: 1.5vw;
    font-size: 5vw;
    padding-right: 1vw;
    font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
    padding-right: 3vw;
}
.osero_game_score .player_icon {
    margin-top: -17vw;
    margin-left: -10vw;
    text-align: center;
}
.osero_game_score .player_img{
	background-color: #ffffff;
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
    margin: auto;
    border: 0.5vw solid #ffffff;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.osero_game_score .player_name{
    background-color: #ffffff;
    margin: auto;
    margin-top: -3vw;
    font-size: 4vw;
    text-align: center;
    padding: 2vw 1vw;
    width: 32vw;
    border-radius: 6vw;
    border: 1vw solid #ffffff;
    color: #ffffff;
    font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
}
.osero_game_score .player_name span.rubi{
    display: block;
    font-size: 2vw;
    height: 2vw;
}
.osero_game_score .player1 .player_score{
	background-color: #85ebf9;
}
.osero_game_score .player1 .player_img{
	background-color: #45e2ff;
    border: 0.5vw solid #004a8b;
    background-image: url(../img/osero/osero_chara1.png);
}
.osero_game_score .player1 .player_name{
	background-color: #29abe2;
}
.osero_game_score .player2 .player_score{
	background-color: #fbb03b;
}
.osero_game_score .player2 .player_img{
	background-color: #f3bc46;
    border: 0.5vw solid #ee762b;
    background-image: url(../img/osero/osero_chara2.png);
}
.osero_game_score .player2 .player_name{
	background-color: #f15a24;
}
.osero_game_score .npc .player_score{
	background-color: #f9b7cf;
}
.osero_game_score .npc .player_img{
	background-color: #fce9f2;
    border: 0.5vw solid #ef94ae;
    background-image: url(../img/osero/osero_chara2.png);
}
.osero_game_score .npc .player_name{
	background-color: #ff6d9d;
    padding: 1vw;
}

.turn-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: baseline;
	justify-content: center;
	z-index: 9999;
	display: none; /* 最初は非表示 */
}
.turn-overlay #turn-text {
	font-size: 4vw;
    color: #00b3ff;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    text-align: center;
    line-height: 1;
/*    margin-top: 71vw;*/
    padding: 6vw;
    font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
    position: absolute;
    bottom: 5vw;
}
.turn-overlay #turn-text .rubi{
    display: block;
    font-size: 2vw;
    height: 2vw;
    margin-top: -2vw;
    text-align: left;
    padding-left: 29vw;
}

.osero_setumei .game_rule_contents {
    background: #d3edf9;
    border: 4px solid #00a0e9;
    /*top: 43%;*/
    top: 50%;
}
.osero_setumei .game_rule_contents .sub_title {
    line-height: 8vw;
    font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
    color: #ffffff;
    border-radius: 6vw;
    padding: 3vw 0vw 1vw 1vw;
    margin-bottom: 4vw;
    font-weight: normal;
}
.osero_setumei .game_rule_contents .sub_title span {
	letter-spacing: -2vw;
}
.osero_setumei .game_rule_contents p span {
	font-size: 4vw;
}
.osero_setumei .game_rule_contents .sub_title.orenge {
    background-color: #f7931e;
}
.osero_setumei .game_rule_contents .sub_title.blue {
    background-color: #0071bc;
}


@media screen and (min-width: 768px){
	body {
		background: #ffffca;
	}

	/* ******************オセロゲーム装飾********************** */

	.game_page {
		width: 768px;
	    margin: auto;

	}
	.medium_flex {
		width: 768px;
	    margin: auto;
	}
	.osero_game_head {
	    padding-top: 8.76px;
	    border-bottom: 11.52px solid #8c6239;
	}
	.os_h_top {
	    margin-top: 8.83px;
		margin-bottom: 7.68px;
	}
	.os_game_level {
	    min-width: 230.4px;
		margin-top: 8.45px;
	    padding: 11.52px 0;
	    font-size: 19.2px;
	    padding-right: 15.36px;
	}
	.os_close_time {
	    min-width: 261.12px;
	    padding: 0 34.56px 0 49.92px;
	    
	}
	.os_close_time p{
		font-size: 67.68px;
	    letter-spacing: 10.528px;
	    margin-left: 15.04px;
	}
	.os_guide_btn {
	    min-width: 276.48px;
	    margin-top: 3.07px;
	}
	.os_h_bottom {
	    bottom: -23.04px;
	}
	.os_h_bottom.pvpmode {
	    bottom: 38.4px;
	} 
	.os_page_back {
	    max-width: 230.4px;
	    padding: 23.04px 38.4px;
	    border-top-left-radius: 0px;
	    border-top-right-radius: 20px;
	    border-top-right-radius: calc(50% + 122.88px);
	    border-bottom-right-radius: 20px;
	    border-bottom-right-radius: calc(50% + 122.88px);
	    border-bottom-left-radius: 0px;
	    border: 4.61px solid #fff;
	    box-shadow: 7.68px 9.22px 9.22px -9.22px #000;
	}
	.stop_button img{
	    top: 7.68px;
	    right: 6px;
	    z-index: 3;
	    max-width: 69.12px;
	}
	        .osero_game_area table {
	            margin: 84.48px auto 30.72px;
	        }
	        .osero_game_area td {
	            width: 115.2px;
	            height: 115.2px;
	            border: 7.68px solid #ffffff;
	        }

	        .osero_game_area .piece {
	            width: 99.84px;
	            height: 99.84px;
	        }

	.osero_game_score {
	    padding-bottom: 15.36px;
	}
	.osero_game_score .player_score{
	    width: 230.4px;
	    height: 122.88px;
	    margin-left: 76.8px;
	    border: 11.52px solid #ffffff;
	    line-height: 99.84px;
	    border-radius: 11.52px;
	    font-size: 38.4px;
	    padding-right: 7.68px;
	    padding-right: 23.04px;
	}
	.osero_game_score .player_icon {
	    margin-top: -130.56px;
	    margin-left: -76.8px;
	}
	.osero_game_score .player_img{
	    width: 130.56px;
	    height: 130.56px;
	    border: 3.84px solid #ffffff;
	}
	.osero_game_score .player_name{
	    margin-top: -23.04px;
	    font-size: 30.72px;
	    padding: 15.36px 7.68px;
	    width: 245.76px;
	    border-radius: 46.08px;
	    border: 7.68px solid #ffffff;
	}
	.osero_game_score .player_name span.rubi{
	    font-size: 15.36px;
	    height: 15.36px;
	}
	.osero_game_score .player1 .player_img{
		background-color: #45e2ff;
	    border: 3.84px solid #004a8b;
	}
	.osero_game_score .player2 .player_img{
	    border: 3.84px solid #ee762b;
	}
	.osero_game_score .npc .player_img{
	    border: 3.84px solid #ef94ae;
	}
	.osero_game_score .npc .player_name{
	    padding: 7.68px;
	}

	.turn-overlay #turn-text {
		font-size: 30.72px;
/*	    margin-top: 545.28px;*/
	    padding: 46.08px;
	}
	.turn-overlay #turn-text .rubi{
	    font-size: 15.36px;
	    height: 15.36px;
	    margin-top: -15.36px;
	    padding-left: 222.72px;
	}

	.osero_setumei .game_rule_contents {
	    border: 4px solid #00a0e9;
	    top: 43%;
	}
	.osero_setumei .game_rule_contents .sub_title {
	    line-height: 61.44px;
	    border-radius: 46.08px;
	    padding: 23.04px 0.0px 7.68px 7.68px;
	    margin-bottom: 30.72px;
	}
	.osero_setumei .game_rule_contents .sub_title span {
		letter-spacing: -15.36px;
	}
	.osero_setumei .game_rule_contents p span {
		font-size: 30.72px;
	}
}