@charset "utf-8";

/*　オーバーレイ　===================*/
.overlay {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	min-width: 100vw;
	min-height: 100vh;
	width: auto;
	height: auto;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: all .5s ease;
}
#error .overlay {
	opacity: 1;
	transition: all .5s ease;
}
#login .overlay {
	background-color: rgba(160, 31, 52, 0.4);
	opacity: 1;
	transition: all .5s ease;
}

/*　見出し　===================*/
h1.headline {
	position: relative;
	margin: 0 auto;
	margin-bottom: 1.5vw;
	color: #fff;
	font-size: 3.8vw;
	font-weight: 700;
	text-align: center;
	text-shadow:
		.058em 0 0 #434343, .054em .022em 0 #434343, .041em .041em 0 #434343, .022em .054em 0 #434343,
		0 .058em 0 #434343, -.022em .054em 0 #434343, -.041em .041em 0 #434343, -.054em .022em 0 #434343,
		-.058em 0 0 #434343, -.054em -.022em 0 #434343, -.041em -.041em 0 #434343, -.022em -.054em 0 #434343,
		0 -.058em 0 #434343, .022em -.054em 0 #434343, .041em -.041em 0 #434343, .054em -.022em 0 #434343,
		.125em .067em 0 #434343, .12em .089em 0 #434343, .108em .108em 0 #434343, .089em .12em 0 #434343,
		.067em .125em 0 #434343, .044em .12em 0 #434343, .025em .108em 0 #434343, .013em .089em 0 #434343,
		.008em .067em 0 #434343, .013em .044em 0 #434343, .025em .025em 0 #434343, .044em .013em 0 #434343,
		.067em .008em 0 #434343, .089em .013em 0 #434343, .108em .025em 0 #434343, .12em .044em 0 #434343;
}
h2.subheading {
	position: relative;
	width: 70vw;
	margin: 0 auto;
	margin-top: 6vw;
	margin-bottom: 3vw;
	font-size: 6.5vw;
	font-weight: 700;
	text-align: center;
	line-height: 1.1;
	letter-spacing: .25em;
	z-index: 400;
}
h2.subheading > .canvas {
	position: relative;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	padding-bottom: 20.471%;
	background-image: url(../img/bg_headline.png);
	background-size: 100%;
}
h2.subheading span {
	position: absolute;
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 0;
	top: 50%;
	left: 0;
	transform: translateY(-53%);
	color: hsl(0, 0%, 100%);
	text-shadow: .035em .03em .03em #000;
}
#dlcode h2.subheading {
	font-size: 5vw;
	letter-spacing: .15em;
}
@media screen and (min-width: 600px), (orientation: landscape) {
	h1.headline {
		margin: 0 auto;
		margin-bottom: 1.5vw;
		font-size: 3.6vw;
	}
	h2.subheading {
		width: 50vw;
		margin: 0 auto;
		margin-top: 6vw;
		margin-bottom: 3vw;
		font-size: 6vw;
	}
	#dlcode h2.subheading {
		font-size: 4vw;
	}
}
@media screen and (min-width: 1025px) {
	h1.headline {
		margin: 0 auto;
		margin-bottom: 16px;
		font-size: 32px;
	}
	h2.subheading {
		width: 43%;
		margin: 0 auto;
		margin-top: 60px;
		margin-bottom: 30px;
		font-size: 45px;
	}
	#dlcode h2.subheading {
		font-size: 32px;
	}
}

/*　コンテンツ　===================*/
.container.box_border_major {
	margin: 2vw;
	padding: 1.5vw;
	border: solid 5px #967141;
	border-radius: 3px;
}
.box_border_major .inner_box {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 1.5em 2% 0;
	background-color: #fff;
}

#title_list .item_box {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 2vw;
	padding-bottom: 0;
	background-image: url(../img/ripple1.png);
	background-color:rgba(255,255,255,0.8);
	background-blend-mode:lighten;
	background-size: 45%;
	background-repeat: no-repeat;
	background-position-x: right;
	background-position-y: bottom;
}
#title_list .item_box.ripple {
	background-image: url(../img/ripple1.png);
}
#title_list .item_box.tokaido {
	background-image: url(../img/tokaido1.png);
}
#title_list .item_box.madola {
	background-image: url(../img/madola1.png);
}
#title_list .item_box .game_title {
	position: relative;
	width: 100%;
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0;
	font-size: 5vw;
	color: #a01f34;
	font-weight: 700;
	line-height: 1.1;
}
#title_list .item_box .flex_container .flex_item.txt_area .game_info {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 1.2em 0;
}
#title_list .item_box .flex_container.screenshot {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
#title_list .item_box .flex_container.screenshot .flex_item {
	position: relative;
	width: 100%;
	margin: 0;
	margin-bottom: 0.8em;
	padding: 0;
}


#feature .flex_container .flex_item.item_box {
	position: relative;
	width: 100%;
	margin: 2.5vw auto;
	padding: 2vw;
	padding-bottom: 0;
	border: solid 3px #000;
	background-color: #a6a6a6;
	background-image: 
		linear-gradient(0deg, #858585 2px, transparent 0),
		linear-gradient(-90deg, #858585 2px, transparent 0);
	background-size: 40px 40px;
}
#feature .item_box .func_name {
	position: absolute;
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0 .2em;
	top: -.8em;
	left: 1em;
	font-size: 5vw;
	color: #000;
	font-weight: 700;
	background-color: #967141;
}
#feature .item_box .screenshot {
	position: relative;
	width: 90%;
	margin: 6vw auto;
	padding: 0;
	text-align: center;
	border: solid 2px #333;
	background-color: #000;
}
#feature .item_box .func_detail {
	position: relative;
	width: 90%;
	margin: 6vw auto;
	padding: 0;
}

#thanks p {
	position: relative;
	width: 95%;
}
#thanks .logo {
	position: relative;
	width: 60%;
	max-width: 400px;
	margin: 0 auto;
	padding: 0;
	padding-top: 1em;
	padding-bottom: 2em;
}
@media screen and (min-width: 600px), (orientation: landscape) {
	.container.box_border_major {
		padding: 10px;
		border: solid 6px #967141;
	}
	.box_border_major .inner_box {
		margin: 0;
		padding: 1.5em 2% 0;
	}
	
	#title_list .item_box {
		width: 100%;
		margin: 0 auto;
		padding: 2vw;
		padding-bottom: 0;
	}
	#title_list .item_box .game_title {
		margin: 0;
		margin-bottom: 0.5em;
		padding: 0;
		font-size: 4vw;
	}
	#title_list .item_box .flex_container {
		-webkit-box-align: start;
		align-items: flex-start;
	}
	#title_list .item_box .flex_container .flex_item.img_area {
		width: 35%;
		margin: 0;
		padding: 0;
		padding-top: 0.5em;
	}
	#title_list .item_box .flex_container .flex_item.txt_area {
		width: 65%;
		margin: 0;
		padding: 0;
		padding-top: 0;
	}
	#title_list .item_box .flex_container .flex_item.txt_area .game_info {
		margin: 0;
		padding: 1.2em;
		padding-top: 0;
	}
	#title_list .item_box .flex_container.screenshot {
		-webkit-box-pack: start;
		justify-content: flex-start;
		padding: 0;
	}
	#title_list .item_box .flex_container.screenshot .flex_item {
		width: 30%;
		margin: 0;
		margin-bottom: 0.8em;
		padding: 0;
	}
	
	#feature .flex_container {
		-webkit-box-pack: justify;
		justify-content: space-between;
	}
	#feature .flex_container .flex_item.item_box {
		width: 48%;
		margin: 2.5vw auto;
		padding: 2vw;
	}
	#feature .item_box .func_name {
		padding: 0 .2em;
		font-size: 3.6vw;
		top: -.8em;
		left: .4em;
	}
	#feature .item_box .screenshot {
		margin: 6vw auto 3vw;
		border: solid 1px #333;
	}
	#feature .item_box .func_detail {
		margin: 8vw auto;
	}
	#feature .item_box .screenshot + .func_detail {
		margin: 3vw auto;
	}

	#thanks p {
		width: 65%;
	}
	#thanks .logo {
		position: relative;
		width: 50%;
		max-width: 300px;
		margin: 0 auto;
		padding: 0;
		padding-top: 1em;
		padding-bottom: 2em;
	}
}
@media screen and (min-width: 1025px) {
	.container.box_border_major {
		margin: 20px auto;
		padding: 10px;
		border: solid 6px #967141;
	}
	.box_border_major .inner_box {
		margin: 0;
		padding: 1.5em 2% 0;
	}
	
	#title_list .item_box {
		width: 100%;
		margin: 0 auto;
		padding: 20px;
		padding-bottom: 0;
	}
	#title_list .item_box .game_title {
		margin: 0;
		margin-bottom: 0.5em;
		padding: 0;
		font-size: 40px;
	}
	#title_list .item_box .flex_container .flex_item.img_area {
		width: 35%;
		margin: 0;
		padding: 0;
		padding-top: 0.5em;
	}
	#title_list .item_box .flex_container .flex_item.txt_area {
		width: 65%;
		margin: 0;
		padding: 0;
		padding-top: 0;
	}
	#title_list .item_box .flex_container .flex_item.txt_area .game_info {
		margin: 0;
		padding: 1.2em;
		padding-top: 0;
	}
	#title_list .item_box .flex_container.screenshot {
		-webkit-box-pack: start;
		justify-content: flex-start;
		padding: 0;
	}
	#title_list .item_box .flex_container.screenshot .flex_item {
		width: 30%;
		margin: 0;
		margin-bottom: 0.8em;
		padding: 0;
	}

	#feature .flex_container .flex_item.item_box {
		width: 48%;
		margin: 20px auto;
		padding: 16px;
	}
	#feature .item_box .func_name {
		padding: 0 .2em;
		font-size: 32px;
		top: -.8em;
		left: .4em;
	}
	#feature .item_box .screenshot {
		margin: 50px auto 30px;
		border: solid 1px #333;
	}
	#feature .item_box .func_detail {
		margin: 80px auto;
	}
	#feature .item_box .screenshot + .func_detail {
		margin: 30px auto;
	}

	#thanks p {
		width: 65%;
	}
	#thanks .logo {
		position: relative;
		width: 50%;
		max-width: 300px;
		margin: 0 auto;
		padding: 0;
		padding-top: 1em;
		padding-bottom: 2em;
	}
}

#main_visual {
	position: relative;
	width: 100vw;
	margin: 0;
	padding: 0;
}
#main_visual .container {
	height: 100%;
	top: 0;
	padding-top: 2vw;
}
#main_visual .container img.img_pc {
	display: none;
}
#main_visual .container img.img_mb {
	display: block;
}

#main_visual .release {
	position: relative;
	display: block;
	width: 80vw;
	margin: 1.5vw auto;
}
#main_visual .release p {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: .2em 0;
	font-size: 5vw;
	color: #fff;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	text-shadow:
		.058em 0 0 #434343, .054em .022em 0 #434343, .041em .041em 0 #434343, .022em .054em 0 #434343,
		0 .058em 0 #434343, -.022em .054em 0 #434343, -.041em .041em 0 #434343, -.054em .022em 0 #434343,
		-.058em 0 0 #434343, -.054em -.022em 0 #434343, -.041em -.041em 0 #434343, -.022em -.054em 0 #434343,
		0 -.058em 0 #434343, .022em -.054em 0 #434343, .041em -.041em 0 #434343, .054em -.022em 0 #434343,
		.125em .067em 0 #434343, .12em .089em 0 #434343, .108em .108em 0 #434343, .089em .12em 0 #434343,
		.067em .125em 0 #434343, .044em .12em 0 #434343, .025em .108em 0 #434343, .013em .089em 0 #434343,
		.008em .067em 0 #434343, .013em .044em 0 #434343, .025em .025em 0 #434343, .044em .013em 0 #434343,
		.067em .008em 0 #434343, .089em .013em 0 #434343, .108em .025em 0 #434343, .12em .044em 0 #434343;
}

#game_info {
	position: relative;
	width: 100vw;
	margin: 0 auto;
}
#game_info .tbl {
	width: 90vw;
	line-height: 1.5;
	border-collapse: collapse;
}
#game_info .tbl .th,
#game_info .tbl .td {
	border: solid 1px #fff;
}
#game_info .tbl .th {
	width: 12em;
	text-align: center;
	background-color: rgba(108,93,85,.9);
}
#game_info .tbl .td {
	padding-left: .4em;
	background-color: rgba(220,97,155,.9);
}
#game_info .special, #game_info .standard {
	position: relative;
	width:100%;
	margin: 0 auto;
	margin-bottom: 5.5vw;
	padding: 0;
}
#game_info .special {
	background: linear-gradient(to left, transparent, rgba(93,149,236,.8) 10% 90%, transparent);
}
#game_info .special p {
	width: 85%;
	margin: 0 auto;
	font-size: 3.5vw;
	line-height: 1.6;
	text-align: center;
	text-shadow:
		.058em 0 0 #03376d, .054em .022em 0 #03376d, .041em .041em 0 #03376d, .022em .054em 0 #03376d,
		0 .058em 0 #03376d, -.022em .054em 0 #03376d, -.041em .041em 0 #03376d, -.054em .022em 0 #03376d,
		-.058em 0 0 #03376d, -.054em -.022em 0 #03376d, -.041em -.041em 0 #03376d, -.022em -.054em 0 #03376d,
		0 -.058em 0 #03376d, .022em -.054em 0 #03376d, .041em -.041em 0 #03376d, .054em -.022em 0 #03376d,
		.125em .067em 0 #03376d, .12em .089em 0 #03376d, .108em .108em 0 #03376d, .089em .12em 0 #03376d,
		.067em .125em 0 #03376d, .044em .12em 0 #03376d, .025em .108em 0 #03376d, .013em .089em 0 #03376d,
		.008em .067em 0 #03376d, .013em .044em 0 #03376d, .025em .025em 0 #03376d, .044em .013em 0 #03376d,
		.067em .008em 0 #03376d, .089em .013em 0 #03376d, .108em .025em 0 #03376d, .12em .044em 0 #03376d;
}
#game_info .btn_area {
	position: relative;
	width: 100%;
	margin: 0 auto;
	margin-top: 2vw;
	padding: 0;
}
#game_info .flex_container .flex_item {
	width: 70vw;
}

#game_info .btn_area .button {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: .8em auto;
	padding: .8em;
	text-align: center;
	background-color: #fff;
}
#game_info .btn_area .button span {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 3.6vw;
	font-weight: bolder;
	text-align: center;
	line-height: 1.1;
}
#game_info .btn_area .button:hover,
#game_info .btn_area .button:active {
	color: #a01f34;
	background-color: #efa413;
}

@media screen and (min-width: 600px), (orientation: landscape) {
	#main_visual {
		width: 100%;
		/* height: 60vw; */
	}
	#main_visual .container {
		height: 100%;
		top: 0;
		padding-top: 2vw;
	}
	#main_visual .container img.img_pc {
		display: block;
	}
	#main_visual .container img.img_mb {
		display: none;
	}
	
	#main_visual .title {
		width: 68vw;
		margin-top: 0;
	}

	#main_visual .release {
		width: 70vw;
		margin: 2vw auto;
	}
	#main_visual .release p {
		font-size: 3vw;
	}
	
	#game_info {
		width:100%;
		margin-top: 0;
	}
	#game_info .tbl {
		width: 55%;
		font-size: 2vw;
		line-height: 1.2;
	}
	#game_info .tbl .th,
	#game_info .tbl .td {
		border: solid 1px #fff;
	}
	#game_info .tbl .th {
		width: 12em;
	}

	#game_info .special, #game_info .standard {
		width: 100%;
		margin-bottom: 4vw;
		padding: .5vw 0;
	}
	#game_info .special {
		background: linear-gradient(to left, transparent 3%, rgba(93,149,236,.8) 20% 80%, transparent 97%);
	}
	#game_info .standard {
		background: linear-gradient(to left, transparent 3%, rgba(123,192,196,.8) 20% 80%, transparent 97%);
	}
	#game_info .special p {
		font-size: 2.7vw;
	}
	#game_info .btn_area {
		width: 75%;
		margin-bottom: 1vw;
	}
	#game_info .btn_area.flex_container {
		justify-content: space-around;
	}
	#game_info .btn_area .flex_item {
		width: 45%;
	}
	#game_info .btn_area .button {
		margin: .8em auto;
		padding: 1em;
	}
	#game_info .btn_area .button span {
		font-size: 3vw;
	}
}
@media screen and (min-width: 1025px) {
	#main_visual .title {
		max-width: 1000px;
	}
	#main_visual .release {
		width: 100%;
		margin: 20px auto;
	}
	#main_visual .release p {
		font-size: 40px;
	}
	#game_info .tbl {
		font-size: 1.6vw;
	}
	#game_info .tbl .th {
		width: 14em;
	}
	#game_info .special p {
		font-size: 1.6vw;
	}
	#game_info .btn_area .button span {
		font-size: 30px;
	}
	#game_info .btn_area {
		margin-bottom: 10px;
	}
}

/* INFORMATION */
#info {
	padding-top: 6vw;
	background-color: #447af8;
}
#info .logo_title {
	position: relative;
	width: 50%;
	margin: 0 auto;
	text-align: center;
}
#info .release_info.tbl {
	position: relative;
	width: auto;
	margin-top: 1.5em;
	font-size: 3.5vw;
}
#info .release_info.tbl > .tbl_row > .th {
	width: 8em;
	text-align: right;
}
#info .release_info.tbl > .tbl_row > .th::after {
	content: "：";
}

@media screen and (min-width: 600px), (orientation: landscape) {
	#info .logo_title {
		width: 40%;
	}
	#info .release_info.tbl {
		font-size: 2.2vw;
	}
	#info .release_info.tbl > .tbl_row > .th,
	#info .release_info.tbl > .tbl_row > .td {
		padding: .1em .4em;
	}
}
@media screen and (min-width: 1025px) {
	#info .release_info.tbl {
		font-size: 1.8vw;
	}
}

/*　動画 　===================*/
#info_video {
	position: relative;
	width: 100%;
	margin: 6vw auto 8vw;
	padding: 0;
}
#video {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
.video_wrap {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 56.25%;
}
.video_wrap > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
@media screen and (min-width: 600px), (orientation: landscape) {
	#info_video {
		width: 90%;
	}
}
@media screen and (min-width: 1025px) {
	#info_video {
		width: 80%;
		margin: 60px auto 80px;
	}
}


/*　エラーページ 　===================*/
/* #error #main_visual {
	position: relative;
	max-height: 100vw;
	margin-bottom: 10vw;
}
#error #main_visual .container {
	height: 100%;
	top: 0;
}
#error #main_visual .title {
	max-width: 1000px;
}
#error #main_visual h2.headline {
	font-size: 6vw;
}
#error h3.subheading {
	text-align: center;
	font-size: 4.5vw;
}
@media screen and (min-width: 600px), (orientation: landscape) {
	#error #main_visual {
		margin-bottom: 0;
	}	
	#error #main_visual .title {
		width: 60vw;
	}
	#error #main_visual h2.headline {
		font-size: 5vw;
	}
}

/*　クラファン返礼品ページ 　===================*/
body#login .box_border_major .inner_box,
body#dlcode .box_border_major .inner_box {
	padding: 1.5em 2%;
}

body#dlcode .box_border_major h3.platform {
	position: relative;
	width: 90%;
	margin: 0 auto;
	padding: 0;
	font-size: 4.5vw;
	text-align: center;
}
body#dlcode .box_border_major h3.platform:not(:first-child) {
	margin-top: 1em;
}

body#dlcode .box_border_major .copy_wrap {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
body#dlcode .box_border_major .copy_txt {
	position: relative;
	display: inline-block;
	width: 60%;
	margin: .4em auto;
	padding: .4em .8em;
	font-size: 3vw;
	border: solid 1px #666;
}
body#dlcode .box_border_major button.copy_btn {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: .4em .8em;
	font-size: 3vw;
	/* font-weight: bolder; */
	border: solid 1px #666;
	background-color: #ccc;
	box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	vertical-align: middle;
}
body#dlcode .box_border_major button.copy_btn:active {
	box-shadow: 0 0 2px rgba(0,0,0,.5);
}

body#dlcode .box_border_major .btn_area {
	position: relative;
	width: 70%;
	margin: 0 auto;
	margin-top: .3em;
	padding: 0;
}
body#dlcode .box_border_major .btn_area .button {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: .8em auto;
	padding: .8em;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	font-size: 3.6vw;
	color: #a01f34;
	background-color: #efa413;
	box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
body#dlcode .box_border_major .btn_area .button:hover,
body#dlcode .box_border_major .btn_area .button:active {
	top: 2px;
	left: 2px;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.5);
}
body#dlcode .box_border_major .artwork {
	position: relative;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 1.5em;
}
body#dlcode .box_border_major .artwork .img_area {
	position: relative;
	width: 80%;
	max-width: 500px;
	margin: 0 auto;
	margin-top: .3em;
	padding: 0;
}
@media screen and (min-width: 600px), (orientation: landscape) {
	body#dlcode .box_border_major .copy_txt {
		font-size: 2.4vw;
	}
	body#dlcode .box_border_major button.copy_btn {
		font-size: 2.4vw;
	}
	body#dlcode .box_border_major .btn_area .button {
		font-size: 3vw;
	}
}
@media screen and (min-width: 1025px) {
	body#dlcode .box_border_major h3.platform {
		font-size: 45px;
	}
	body#dlcode .box_border_major .copy_txt {
		font-size: 24px;
	}
	body#dlcode .box_border_major button.copy_btn {
		font-size: 24px;
	}

	body#dlcode .box_border_major .btn_area {
		width: 500px;
	}	
	body#dlcode .box_border_major .btn_area .button {
		margin: .5em auto;
		padding: .5em;
		font-size: 30px;
		border: none;
	}
}

/* Music */
body#music h1.headline {
	margin: 0 auto;
	margin-bottom: 1.5vw;
	font-size: 5vw;
}
body#music h2.subheading span {
	font-size: 5vw;
	letter-spacing: .1em;
}
body#music .box_border_major h3.game_title {
	position: relative;
	width: 100%;
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0;
	font-size: 5vw;
	color: #a01f34;
	font-weight: 700;
	line-height: 1.1;
}
body#music .box_border_major h3.game_title:not(:first-child) {
	margin-top: 1.5em;
}

/* フレックスボックス#Music */
body#music .box_border_major .inner_box {
	padding: 1.5em 5%;
}
body#music .box_border_major .inner_box .snd_info:not(:first-child) {
	margin-top: 1em;
}
body#music .snd_info .flex_item {
	position: relative;
	margin: 0 auto;
	padding: .8em .4em;
	align-items: center;
	font-size: 3vw;
}
body#music .snd_info .num_area > div,
body#music .snd_info .name_area > div {
	padding: 0;
	padding-bottom: .4em;
	align-self: flex-end;
}
body#music .snd_info .detail_area > div {
	display: flex;
	align-items: center;
	justify-content: center;
	border: solid 1px #333;
}
body#music .snd_info .detail_area div:not(:last-child) {
	border-right: none;
}
body#music .snd_info .num_area .number,
body#music .snd_info .name_area .name_jp {
	font-size: 3.4vw;
	font-weight: bolder;
}
body#music .snd_info .name_area .name_en {
	font-size: 2.5vw;
	text-align: right;
}

/* まとめてDL */
body#music #dl_all .snd_info .name_area,
body#music #dl_all .snd_info .detail_area {
	width: 100%;
	margin: 0;
	padding: 0;
}
body#music #dl_all .snd_info .name_area .name_jp {
	width: 50%;
}
body#music #dl_all .snd_info .name_area .name_en {
	width: 50%;
}

body#music #dl_all .snd_info .detail_area .total {
	width: 12%;
	text-align: center;
}
body#music #dl_all .snd_info .detail_area .type {
	width: 53%;
}
body#music #dl_all .snd_info .detail_area .download {
	width: 35%;
	text-align: center;
}

/* 個別DL */
body#music #dl_one .snd_info .num_area {
	width: 7%;
	margin: 0;
	padding: 0;
}
body#music #dl_one .snd_info .name_area {
	width: 93%;
	margin: 0;
	padding: 0;
}
body#music #dl_one .snd_info .detail_area {
	width: 100%;
	margin: 0;
	padding: 0;
}
body#music #dl_one .snd_info .name_area .name_jp {
	width: 50%;
}
body#music #dl_one .snd_info .name_area .name_en {
	width: 50%;
}

body#music #dl_one .snd_info .detail_area .type {
	width: 20%;
	text-align: center;
}
body#music #dl_one .snd_info .detail_area .streaming {
	width: 45%;
}
body#music #dl_one .snd_info .detail_area .streaming audio {
	position: relative;
	width: 100%;
}
body#music #dl_one .snd_info .detail_area .download {
	width: 35%;
	text-align: center;
}

/* DLボタン */
body#music .snd_info .detail_area .download .button {
	position: relative;
	display: inline-block;
	width: auto;
	margin: 0 auto;
	padding: .2em .8em .4em;
	font-size: 3.6vw;
	color: #fff;
	text-decoration: none;
	text-align: center;
	background-color: #000;
	box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
body#music .snd_info .detail_area .download .button:hover,
body#music .snd_info .detail_area .download .button:active {
	top: 2px;
	left: 2px;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.5);
}
@media screen and (min-width: 600px), (orientation: landscape) {
	body#music h1.headline {
		margin: 0 auto;
		font-size: 4.5vw;
	}
	body#music h2.subheading span {
		font-size: 4vw;
		letter-spacing: 0;
	}
	body#music .box_border_major h3.game_title {
		font-size: 5vw;
	}
	
	/* フレックスボックス#Music */
	body#music .snd_info .flex_item {
		font-size: 1.5vw;
	}
	body#music .snd_info .num_area > div,
	body#music .snd_info .name_area > div {
		padding-bottom: 0;
		align-self: center;
	}
	body#music .snd_info .num_area .number,
	body#music .snd_info .name_area .name_jp {
		font-size: 2vw;
		font-weight: bolder;
	}
	body#music .snd_info .name_area .name_en {
		padding-left: .8em;
		font-size: 1.5vw;
		text-align: left;
	}

	/* まとめてDL */
	body#music #dl_all .snd_info .name_area {
		width: 38%;
		padding: .4em;
		padding-left: 1em;
		border: solid 1px #333;
		border-right: none;
	}
	body#music #dl_all .snd_info .detail_area {
		width: 62%;
	}

	body#music #dl_all .snd_info .name_area .name_jp {
		width: 100%;
	}
	body#music #dl_all .snd_info .name_area .name_en {
		width: 100%;
	}

	body#music #dl_all .snd_info .detail_area .total {
		width: 10%;
	}
	body#music #dl_all .snd_info .detail_area .type {
		width: 45%;
	}
	body#music #dl_all .snd_info .detail_area .download {
		width: 45%;
	}

	/* 個別DL */
	body#music #dl_one .snd_info .num_area {
		width: 5%;
		margin: 0;
		padding: 0;
		border: solid 1px #333;
		border-right: none;
	}
	body#music #dl_one .snd_info .num_area .number {
		width: 100%;
		text-align: center;
	}

	body#music #dl_one .snd_info .name_area {
		width: 31%;
		padding: .8em .4em;
		border: solid 1px #333;
		border-right: none;
	}
	body#music #dl_one .snd_info .detail_area {
		width: 64%;
	}

	body#music #dl_one .snd_info .name_area .name_jp {
		width: 100%;
	}
	body#music #dl_one .snd_info .name_area .name_en {
		width: 100%;
	}

	body#music #dl_one .snd_info .detail_area .type {
		width: 16%;
		text-align: center;
	}
	body#music #dl_one .snd_info .detail_area .streaming {
		width: 49%;
	}
	body#music #dl_one .snd_info .detail_area .streaming audio {
		position: relative;
		width: 100%;
	}
	body#music #dl_one .snd_info .detail_area .download {
		width: 35%;
		text-align: center;
	}

	/* DLボタン */
	body#music .snd_info .detail_area .download .button {
		font-size: 2.5vw;
	}
}
@media screen and (min-width: 1025px) {
	body#music h1.headline {
		margin: 0 auto;
		font-size: 45px;
	}
	body#music h2.subheading span {
		font-size: 36px;
		letter-spacing: 0;
	}
	body#music .box_border_major h3.game_title {
		font-size: 48px;
	}

	/* フレックスボックス#Music */
	body#music .snd_info .flex_item {
		font-size: 15px;
	}
	body#music .snd_info .num_area .number,
	body#music .snd_info .name_area .name_jp {
		font-size: 20px;
	}
	body#music .snd_info .name_area .name_en {
		font-size: 14px;
	}
	/* DLボタン */
	body#music .snd_info .detail_area .download .button {
		font-size: 25px;
	}
}

/* 戻るボタン　#music */
body#music .retune {
	position: relative;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 2em;
}
body#music .retune .btn_area {
	position: relative;
	width: 50%;
	margin: 0 auto;
	margin-top: .3em;
	padding: 0;
}
body#music .retune .btn_area .button {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: .8em auto;
	padding: .4em;
	text-align: center;
	font-size: 3.6vw;
	color: #a01f34;
	background-color: #efa413;
	border: none;
	box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
body#music .retune .btn_area .button:hover,
body#music .retune .btn_area .button:active {
	top: 2px;
	left: 2px;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.5);
}
@media screen and (min-width: 1025px) {
	body#music .retune .btn_area .button {
		font-size: 36px;
	}
}

/*　入力フォーム 　===================*/
.formTable {
	position: relative;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 1.5em;
	padding: 0;
}
.formTable .formTableRow {
	position: relative;
	width: 90%;
	margin: 0 auto 1em;
	padding: 0;
}
.formTable .formTableRow label {
	position: relative;
	display: block;
	margin: 0 auto;
	padding: .3em;
	padding-left: 0;
	font-weight: bolder;
}
.formTable .formTableRow input {
	position: relative;
	margin: 0 auto;
	padding: 0;
}
.formTable .formTableRow input#email {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: .3em .8em;
}
.formTable .formTableRow input#btnSubmit {
	position: relative;
	margin: 0 auto;
	padding: .1em .4em;
	font-weight: bolder;
}

/*　フッター 　===================*/
footer .logo_sunsoft {
	position: relative;
	width: 180px;
	margin: 1em auto;
}
footer .trademark {
	position: relative;
	width: 100%;
	margin: 1em auto;
	padding: 0;
	color: #ccc;
	text-align: center;
	line-height: 1.2;
}
footer .trademark a {
	text-decoration: underline;
}
@media screen and (min-width: 600px), (orientation: landscape) {
	footer .logo_sunsoft {
		width: 220px;
	}
}
@media screen and (min-width: 1025px) {
	footer .logo_sunsoft {
		margin: 1em auto;
	}
}

/*　フレックスボックス設定　===================*/
.flex_container {
	position: relative;
	display: -webkit-box;
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
}
.flex_container .flex_item {
	position: relative;
	display: inline-block;
}



/*　table設定　===================*/
.tbl {
	position: relative;
	display: table;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}
.tbl > .tbl_row {
	position: relative;
	display: table-row;
	width: 100%;
	margin: 0;
	padding: 0;
}
.tbl > .tbl_row > .th,
.tbl > .tbl_row > .td {
	position: relative;
	display: table-cell;
	padding: .4em .6em;
	vertical-align: top;
}


/* ボタン ===========================*/

/* ページトップへ戻る */
.btn_top {
	position: fixed;
	display: none;
	width: 60px;
	bottom: 5vw;
	right: 5vw;
	filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
	z-index: 999;
}
.btn_top a {
	display: inline-block;
	width: 100%;
}
.btn_top.active {
	display: inline-block;
}
@media screen and (min-width: 600px), (orientation: landscape) {
	.btn_top {
		width: 80px;
		bottom: 3vw;
		right: 3vw;
	}
}
@media screen and (min-width: 1025px) {
	.btn_top {
		bottom: 30px;
		right: 30px;
	}
}
@media screen and (min-width: 1500px) {
	.btn_top {
		width: 90px;
		bottom: 50px;
		right: 50px;
	}
}

/*　お問い合わせ　===================*/
.btn_inquiry {
	position: relative;
	display: inline-block;
	width: 60vw;
	margin: 2em auto 0;
	padding: .3em 1em .5em;
	font-size: 4vw;
	font-weight: bolder;
	text-align: center;
	border: solid 2px #fff;
	background-color: #dc619b;
}
.btn_inquiry span {
	position: relative;
	color: #fff;
	line-height: 2;
}

body#contact h2.headline {
	position: relative;
	width: 95%;
	height: 2em;
	margin: 0 auto;
	padding: .38em;
	padding-bottom: .45em;
	color: #fff;
	font-size: 4vw;
	text-align: center;
	background: #0000a7;
	border-radius: 10px;
	border: none;
}
body#contact h5 {
	position: relative;
	margin-top: 1.5em;
	padding-left: 1.8em;
	font-size: 3.6vw;
	line-height: 5.4vw;
	color: #333;
}
body#contact h5::after {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	content: '';
	width: 3.6vw;
	height: 3.6vw;
	border: solid .9vw #446688;
	border-radius: 100%;
}

button.btn_mailer {
	position: relative;
	display: inline-block;
	width: 60vw;
	height: 12vw;
	margin: 1.2em auto;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	background-color: #5dc7e5;
}
button.btn_mailer .btn_txt {
	position: absolute;
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 0;
	right: 0;
	top: 50%;
	color: #fff;
	font-size: 3.6vw;
	font-weight: bolder;
	text-align: center;
	line-height: 1.1;
	text-shadow: none;
	transform: translateY(-50%);
}
button.btn_mailer:hover,
button.btn_mailer:active {
	border: solid 1px #dc9100;
	background-color: #efa413;
	top: 2px;
	left: 2px;
	box-shadow: 1px 1px 6px -2px #555,
		3px 3px 8px rgba(255,255,255,0.3) inset;
}
@media screen and (min-width: 600px), (max-width: 599px) and (orientation: landscape) {
	.btn_inquiry {
		width: 36vw;
		margin: 2em auto 0;
		font-size: 2.4vw;
	}

	body#contact{
		font-size: 18px;
	}
	body#contact h2.headline {
		font-size: 24px;
	}
	body#contact h5 {
		font-size: 20px;
		line-height: 30px;
	}
	body#contact h5::after {
		width: 20px;
		height: 20px;
		border: solid .5vw #446688;
	}

	button.btn_mailer {
		width: 360px;
		height: 80px;
	}
	button.btn_mailer .btn_txt {
		font-size: 24px;
	}
}