@charset "UTF-8";

/*==================================================================*/

/* common css */

/*=================================================================*/

html {
	width: 100%;
	height: 100%;
	max-height: 100%;
}

body {
	margin: 0;
	padding: 0;
	line-height: 2.1;
	font-weight: 100;
	color: #fff;
	font-family: Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: 1px;
	/* rubyフォントサイズ問題用 */
	max-height: 100%;
	-webkit-text-size-adjust: 100%;
}

ruby {
	font-size: 1em;
	position: relative;
}

ruby rt {
	margin-bottom: .2em;
	font-family: 'ＭＳ ゴシック', "ＭＳ Ｐゴシック", "MS PGothic", Arial, Verdana, Roboto, "游ゴシック", "MSゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
}

.select rt,
.select rp {display: none;}

@supports (-ms-ime-align: auto) {
	rt {
		position: relative;
		top: 0.5em;
	}
}

svg {
	position: relative;
	left: 0.4px;
	top: 0.4px;
}

svg .icon {
	fill: currentColor;
}

a {
	color: #fff;
	text-decoration: none;
	transition-property: all;
	transition-duration: 0.3s;
}

a:hover {
	cursor: pointer
}

ul,
li,
dl,
dt,
dd,
th,
td {
	list-style: none;
	padding: 0;
	margin: 0;
}

p,
li,
dt,
dd {
	line-break: strict;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.imp {
	color: orangered;
}

@media screen and (max-width:1024px) {
	html {width: 100%;}
}

h1,
h3 {
	font-family: Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.8em;
	padding: 0.2em 0;
	margin: 0 0 20px;
	text-align: center;
	line-height: 2;
}

h3 .icon-h {
	width: 148px;
	height: 68px;
}

img {
	border: none;
	vertical-align: bottom;
}

section {
	padding: 0.5em 0 3em;
	color: #000;
}

@media screen and (min-width:460px) {
	body {
	background: url(../image/back_yellow2.png?11) center top;
	background-color:#f3d566;
	background-size: 1100px;
	background-repeat:repeat-y;
}
}

@media screen and (max-width:640px) {	
h3 {
		font-size: 1.3em;
		margin: 0 0 10px;
	}
}

@media screen and (max-width:460px) {	
body {
	background: url(../image/back_yellow.png?9) center top;
	background-color:#f3d566;
	background-size: 700px; 
	background-repeat:repeat-y;
}
}

/* -------------------------------------------------------------- */
/* .pagetop */
/* -------------------------------------------------------------- */
.pagetop * {
	margin: 0;
	padding: 0;
}

.pagetop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	z-index: 9999;
}

@media screen and (max-width:640px) {
.pagetop {
	position: fixed;
	bottom: 20px;
	right: 10px;
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	z-index: 9999;
}
	.pagetop img{width: 40px;}
	}
}
/* -------------------------------------------------------------- */
/* footer */
/* -------------------------------------------------------------- */
footer * {
	margin: 0;
	padding: 0;
}

footer {
	background: #000;
	color: #fce000;
	}

footer p {
	margin: 0 auto;
	padding: 0.5em 0;
	max-width: 980px;
	text-align: center;
	font-size: 0.7em;
}

/* -------------------------------------------------------------- */
/* btn_play */
/* -------------------------------------------------------------- */

header .btn_play {
	display: block;
	position: absolute;
	box-sizing: border-box;
	left: -1px;
	background-color: #fff;
	border: solid 1px #e8465a;
	border-radius: 0 10px 10px 0;
	overflow: hidden;
}

header .btn_play a {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 0.5em 1em .5em 0;
	/* デザイン賞投票受付中！用
	padding: 0.5em 1em 1.6em 0;
	*/
	height: 100%;
	width: 100%;
	color: #e8465a;
}

header .btn_play svg {
	width: 74px;
	height: 34px;
}

header .btn_play a:hover {
	background-color: #e8465a;
	color: #fff;
}

/*
header .btn_play ::after{
	content: "デザイン賞投票受付中！";
	position: absolute;
	bottom:0;
	font-size: 0.8em;
	text-indent: 1em;
}
*/
header .news {
	margin: 0;
	text-align: center;
	background-color: #00bccb;
	letter-spacing: 0.4em;
	font-weight:600;
	padding-top:8px;
	position: fixed;
	width:100%;
	border-bottom: 2px solid #fff;
}

header .news a {
	color: #fff;
}

header .news a {
	color: #fff;
}
@media screen and (min-width:700px){
header .news {font-size:1.5em;	z-index: 100;}
}

@media screen and (max-width:700px){
header .btn_play {margin-top: 50px;}
header .news {font-size:1.2em;	z-index: 100;}
}
/* -------------------------------------------------------------- */
/* header nav */
/* -------------------------------------------------------------- */
#header_nav{
	padding:70px 0 10px;
	line-height:1.2;
	background: linear-gradient(120deg, #ffffff 0%, #babbbb 100%);
	letter-spacing:1px;
	display:block;
	font-family: sans-serif;
	}
#header_nav ul{
	margin-top:30px;
	display:flex;
	margin:0 auto;
	justify-content:space-between;
	align-items: center;
	}
#header_nav li{
	list-style:none;
	 position: relative;
	}
#header_nav li+li::before{
    content: "";
    display: block;
    height: 4em;
    border-left: 1px solid #999;
    position: absolute;
    top: 0;
    bottom: 0;
	left: -15px;
    margin: auto;
}
#header_nav li img{filter: drop-shadow(2px 2px 2px #aaa);}
#header_nav a{
	color:#000;
	font-weight:600;
	}
#header_nav a:hover{color: #02bccb;}
#header_nav a img:hover{opacity: 0.7;}

@media screen and (min-width:800px){
#header_nav{letter-spacing:1px;}
#header_nav ul{max-width:700px;}
#header_nav span{font-size:16px;}
#header_nav a{font-size:14px;}
}

@media screen and (max-width:800px) and (min-width:700px){
#header_nav{
	padding:65px 0 10px;
	line-height:1.2;
	background: linear-gradient(120deg, #ffffff 0%, #babbbb 100%);
	letter-spacing:1px;
	display:block;
	font-family: sans-serif;
	}
#header_nav ul{
	display:flex;
	width:600px;
	margin:0 auto;
	justify-content:space-between;
	align-items: center;
	}
#header_nav li{
	list-style:none;
	font-weight:500;
	 position: relative;
	}
#header_nav li img{width:120px;}
#header_nav li+li::before{
    content: "";
    display: block;
    height: 3em;
    border-left: 1px solid #999;
    position: absolute;
    top: 0;
    bottom: 0;
	left: -8px;
    margin: auto;
}

#header_nav a{font-size:13px;}
#header_nav span{
	text-align:center;
	color:yellow;
	font-size:clamp(15px, 1vw, 25px);
	}
}

@media screen and (max-width:700px){
#header_nav{display:none;}
}

/* -------------------------------------------------------------- */
/* bread */
/* -------------------------------------------------------------- */
@media screen and (min-width:700px) {
#bread {
    margin: 0 auto 10px;
    text-align: right;
    color: #89898a;
	width:98%;
    font-size: 12px;
}

#bread a {
    display: inline-block;
    position: relative;
    padding: 0 20px 0 ;
    color: #89898a;
    vertical-align: middle;
}

#bread a::before {
    right: 8px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #89898a;
    border-right: 1px solid #89898a;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#bread a::before, #bread a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    content: "";
    vertical-align: middle;
}
 #bread a::before, #bread a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    content: "";
    vertical-align: middle;
}

#bread a:hover {color:#02bccb;}
}

@media screen and (max-width:700px) {
#bread {display:none;}
}

/* -------------------------------------------------------------- */
/* main */
/* -------------------------------------------------------------- */
.date p.day_place a{color: #fce000;}
.date p.day_place a:hover{color: #fff;}

@media screen and (min-width:700px) {
#main h1 {
	width:100%;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
	}
	
.mainvisual h1 img{
	padding-top: 0.3em;
	padding-bottom: 0.2em;
	max-width: 560px;
	}

.date h3{
	margin: 0em auto;
	text-align: center;
	margin-top: -1.1em;
	margin-left: 1em;
	margin-bottom: 0.5em;
	filter: drop-shadow(5px 5px 5px #b2b2b2);
	}

.date h3 img {width:450px;}

#main h5 {
	width:100%;
	margin: 0 auto;
	text-align: center;
	padding: 0.5em 1em;
	max-width: 830px;
	margin: 0 auto;
	}
	
.mainvisual h5 img{
	padding-top: 5em;
	max-width: 700px;
	width:100%;
	}

.date p.day_place{
	background-color: #00bccb;
	border-radius:30px;
	position: relative;
	width: 450px;
	margin: 0 auto;
	padding: 10px 0 5px;
	text-align: center;
	color: #fce000;
	font-weight: 800;
	font-size:18px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
}

.date p.end{
	margin: 0 auto;
	padding-top:30px;
	text-align: center;
	font-weight: 700;
	font-size: 35px;
	border-bottom: 5px solid;
	width: 360px;
}

.date p.day_place br{display: none;}
}

@media screen and (max-width:700px) {
	
#main h1{margin-top: 30px;}
#main h1 img{
	width:100%;
	padding: 20px;
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
	}
.date h3 {
	margin-top: -3.5em;
	filter: drop-shadow(3px 3px 3px gray);
	}
#main h3 img{
	width:85%;
	margin: 0 auto;
	text-align: center;
	max-width: 370px;
	padding-top: 1em;
	padding-bottom: 1em;
	}
.mainvisual p.catch {
	font-weight: 700;
	letter-spacing: 0.2em;
	font-size:15px;
	padding-bottom: 2em;
	padding-top: 0.5em;
    text-align: center;
	margin: 0 auto;
	}

.date p.day_place{
	background-color: #00bccb;
	border-radius:30px;
	position: relative;
	width: 70%;
	margin: 0 auto ;
	padding: 10px 0 5px;
	text-align: center;
	font-weight: 800;
	font-size:18px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
}

.date p.end{
	margin: 0 auto;
	padding-top:30px;
	text-align: center;
	font-weight: 700;
	font-size: 35px;
	border-bottom: 5px solid;
	width: 360px;
}

.mainvisual h5 img{
	display: none;
	}
}

/* -------------------------------------------------------------- */
/* gratz */
/* -------------------------------------------------------------- */
#gratz {
	text-align: center;
	padding: 0 1em 1em;
	overflow: hidden;
	background: rgba(254, 244, 200, 0.8);
	max-width:850px;
	width:95%;
	margin:5em 0;
	margin: 0 auto 4em;
	border: 12px solid #40bccb;
	font-size:18px;
	font-weight: 600;
}

#gratz win img {
	padding-left:2em;
	width:100%;
}
#gratz .win{
	padding-bottom: 3em;
}

#gratz .win{
	max-width: 550px;
	width:100%;
	margin: 0 auto;
}

#gratz .win h4 {
	margin: 0.5em 0 0;
	text-align: center;
	color: #ff5c6d;
	font-size:25px;
}

#gratz .win p {
	color: #333;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	margin: 0 auto;
}

#gratz place img {
	padding-left:2em;
	width:80%;
}

#gratz .place p span{
	color: #fff;
	background-color:#2e3076;
	padding: 0.8em 1em 0.3em;
}
#gratz .place .block .js-modal-open:hover {
	background-color: #fddd00;
}
#gratz .place .block .js-modal-open {
	display: inline;
	color: #fff;
	font-size: .8em;
	background-color: #2e3076;
	padding: .5em 1em;
	border-radius: 1em;
}
#gratz .place h4 {
	margin: 2em 5px 0 0;
	text-align: center;
	color: #2e3076;
	font-size:25px;
}
#gratz place img {
	padding-left:2em;
	width:95%;
}
#gratz .place {
	justify-content: space-between;
	width:680px;
	padding-left:1.5em;
	margin: 0 auto;
}

#gratz participation img {
	padding-left:2em;
	width:80%;
}
#gratz participation2 img {
	padding-left:2em;
	width:80%;
}
#gratz .participation p span{
	color: #fff;
	background-color:#2e3076;
	padding: 0.8em 1em 0.3em;
}
#gratz .participation2 p span{
	color: #fff;
	background-color:#2e3076;
	padding: 0.8em 1em 0.3em;
}
header p.team {
	font-size: 1.3em;
	font-weight:700;
	padding-top:0.5em;
}

#gratz .win .block .js-modal-open:hover {
	background-color: #fddd00;
}

#gratz .participation .block .js-modal-open:hover {
	background-color: #fddd00;
}
#gratz .participation2 .block .js-modal-open:hover {
	background-color: #fddd00;
}
#gratz .block .js-modal-open {
	display: inline;
	color: #fff;
	font-size: .8em;
	background-color: #ff5c6d;
	padding: .5em 1.5em;
	border-radius: 1em;
}


#gratz .participation .block .js-modal-open {
	display: inline;
	color: #fff;
	font-size: .8em;
	background-color: #2e3076;
	padding: .5em 1em;
	border-radius: 1em;#00bccb;
}
#gratz .participation2 .block .js-modal-open {
	display: inline;
	color: #fff;
	font-size: .8em;
	background-color: #2e3076;
	padding: .5em 1em;
	border-radius: 1em;#00bccb;
}
@media screen and (min-width:640px) {
#gratz .block .js-modal-open {
	margin-right: 8em;
}

#gratz .win p span{
	color: #fff;
	background-color: #ff5c6d;
	padding: 0.8em 1em 0.1em;
	float:left;
}

#gratz .participation h4 {
	margin: 2em 5px 0 0;
	text-align: center;
	color: #2e3076;
	font-size:25px;
}
#gratz .participation2 h4 {
	margin: 2em 5px 0 0;
	text-align: center;
	color: #2e3076;
	font-size:25px;
}
#gratz p img{
	padding-bottom:0.5em;
	padding-left:2em;
}

#gratz participation img {
	padding-left:2em;
	width:100%;
}
#gratz participation2 img {
	padding-left:2em;
	width:10%;
}
#gratz .win .block {
	padding-left: 2em;
}

#gratz .participation {
	display: flex;
	justify-content: space-between;
	width:680px;
	padding-left:1.5em;
	margin: 0 auto;
}
#gratz .participation2 {
	display: flex;
	justify-content: space-between;
	width:680px;
	padding-left:1.5em;
	margin: 0 auto;
}
#gratz .participation p {
	color: #333;
	font-size: 0.9em;
	text-align: center;
	margin-top:0.5em;
}
#gratz .participation2 p {
	color: #333;
	font-size: 0.9em;
	text-align: center;
	margin-top:0.5em;
}
#gratz .participation .block .js-modal-open {margin-right: 0em;}

#gratz .js-modal-open svg {
	width: 30px;
	height: auto;
	vertical-align: middle;
	margin: 0 -.8em 0 -1em;
	}

}

@media screen and (max-width:640px) {
#gratz {padding: 10px 0.2em;}
#gratz p.congratulations img {width:90%;}
#gratz .win img {
	width:95%;
	padding-bottom:1em;
	}
}

#gratz .win p span{
	color: #fff;
	background-color: #ff5c6d;
	padding: 0.8em 1em 0.1em;
}

#gratz .participation h4 {
	margin: 1.5em 0 0;
	text-align: center;
	color: #2e3076;
	font-size:25px;
}

#gratz .participation{
	width:100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#gratz .participation2{
	width:68%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#gratz .robo_photo img{width:100%;}

#gratz .participatio p {
	color: #333;
	font-size: 1em;
	text-align: center;
	margin-top:0.5em;
}

#gratz p img{
	padding-bottom:0.5em;
	padding-left:1em;
}

#gratz .js-modal-open svg {
	width: 30px;
	height: auto;
	vertical-align: middle;
	margin: 0 -.8em 0 -1em;
	}
}
/* ieだけめっちゃ行が開くので非表示 */
@media all and (-ms-high-contrast:none) {
	#gratz svg {
		display: none;
	}
#gratz .robo_photo img{width:80%;}
}

@media screen and (max-width:640px) {
	#gratz .result h3 img{width:100%;}
	#gratz h3 {
		display: block;
		max-width: 420px;
		width: 95%;
		font-size: 1.3em;
		margin: 0 auto 10px;
	}
}

@media screen and (min-width:550px) {
	#gratz .result h3 img{max-width: 450px;}
}



/* -------------------------------------------------------------- */
/* players */
/* -------------------------------------------------------------- */
header .players {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	max-width: 760px;
}

header .players li {
	list-style: none;
	margin: 0;
	padding: 1%;
	width: 20%;
}

header .players li a {
	width: 100%;
	border: none;
}

header .players img {
	width: 100%;
}

/* -------------------------------------------------------------- */
/* モーダル */
/* -------------------------------------------------------------- */
.modal {
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
}

.modal__bg {
	background: rgba(0, 0, 0, 0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}

.modal__content {
	background: #fff;
	left: 50%;
	padding: 2em;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 75%;
	height: 75%;
	z-index: 1;
}

model-viewer {
	min-width: 100px;
	min-height: 100px;
	width: 100%;
	height: 100%;
}

.modal__content .movie-box {
	min-width: 0%;
	min-height: 0%;
	/*
	max-width:480px;
	max-height:360px;
	*/
	background-color: #000;
	width: 100%;
	height: 90%;
	padding: 0;
	margin: 0 auto;
	position: relative;
}

.modal__content video {
	position: relative;
	width: 100%;
	height: 100%;
}

.modal__content a {
	color: #da60ad;
}

.modal__content a:hover {
	color: #ed99ce;
}

.modal__content span {
	color: #000;
	font-size: .5em;
	margin-left: 1em;
}




@media screen and (max-width:700px) {
	header nav ul {
		display: flex;
		flex-direction: center;
		justify-content: center;
		flex-wrap: wrap;
		overflow: hidden;
		max-width: 440px;
		margin: 0 auto;
	}

	header nav ul li {
		width: 33%;
		display: flex；
	}

	header nav a {
		padding-top: 0.5em;

	}

	header .btn_play svg {
		width: 37px;
		height: 17px;
	}


	header .info br {
		display: inherit;
	}
}

@media screen and (max-width:550px) {
	header .gratz img {
		width: 100%;
	}

	header .gratz h3 {
		display: block;
		max-width: 420px;
		width: 80%;
		font-size: 1.3em;
		margin: 0 auto 10px;
	}

	header .gratz h3:after,
	header .gratz h3:before {
		display: block;
		content: '';
		position: absolute;
		bottom: 0;
		border-top: 1.4em solid #da60ad;
		border-bottom: 1.4em solid #da60ad;
		border-right: 1.4em solid transparent;
		border-left: 1.4em solid transparent;
	}

	header .gratz h3:after {
		left: -1.4em;
	}

	header .gratz h3:before {
		right: -1.4em;
	}
}

@media screen and (max-width:400px) {
	header nav {
		display: none;
	}
}

/* -------------------------------------------------------------- */
/* live */
/* -------------------------------------------------------------- */
#live {
	width: 100%;
	background: rgba(255, 255, 255, 0.5);
	padding: 1em 0 2em;
}


#live div {
	margin: 0 auto;
	max-width: 980px;
	text-align: center;
}

	
#live h2 {
	color: #fff;
	background-color: #40bccb;
	max-width:300px;
	text-align: center;	
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 30px;
	border-radius: 50px;
}

#live p {
	margin: 0 auto;
	padding-bottom: 10px;
	max-width: 680px;
	text-align: center;
	font-weight: bold;
	font-family: sans-serif;
	line-height: 2;
}

#live .phote {
	text-align: center;
	max-width:800px;
	width:100%;
	margin: 1em auto;
}

#live .phote ul{
	width:100%;
}

#live .phote  li{
	display: inline-block;
	padding-bottom:5px;
}

#live .movie {
	clear:both;
	text-align: center;
}



#live .movie .youtubesm {
	display: inline-block;
}

#e1_machine {z-index: 1;}

#live .movie .youtubesm img:hover {
	opacity: .6
}

@media screen and (min-width:850px) {
#live .phote img{
	max-width:260px;
	}
}

@media screen and (min-width:700px) {
#live h2 img{
	margin: 0 0 5px;
	width: 300px;
	}
#live .movie p{
	padding-top:5px;
	font-size:15px;
	}
#live .movie .youtubesm {
	width: 560px;
	height: 315px;
	display: inline-block;
	position: relative;
}
/* 産まれた後 */
#live .movie iframe {
	width: 100%;
	height: 100%;
	width: 560px;
	height: 315px;
	padding: 0;
}
}

@media screen and (max-width:700px) {
	#live {
		width: 100%;
		padding: 2em 0;
	}
	#live h2 img:first-child {
		width: 90%;
		padding: 0 30px;
	}
	#live p {
		margin: 10px 10px;
		padding:0 1em;
		font-weight: bold;
		text-align: left;
		font-size:15px;
	}
	#live .br {display: none; }
		#about .movie{
		padding: 0 1em;
	}
	#live .movie .youtubesm {
	display: inline-block;
	position: relative;
		width: 100%;
		height: 100%;
		max-width: 426px;
		max-height: 230px;
	}
	/* 産まれた後 */
	#live .movie iframe {
		width: 100%;
		height: 100%;
		max-width: 426px;
		max-height: 230px;
		padding: 0;
	}


	#live .movie iframe {
		width: 100%;
		height: 100%;
	}
	#live .movie p{
	text-align: center;
	margin-top:20px;
}
}

@media screen and (max-width:460px) {
	#youtube {
		padding: 2em 0;
	}
	#youtube p{
		padding: 2em 1em;
	}
	#live .movie p{
	text-align: center;
	margin-top:10px;
}
}


/* -------------------------------------------------------------- */
/* about */
/* -------------------------------------------------------------- */
#about {
  background: linear-gradient(120deg, #fce000 0%, #fce000 47%,  #ffffff 47%, #babbbb 100%);
	margin: 0 auto;
}

#about {
	border-top: 15px solid #000;
	border-bottom: 15px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
}
#about h3 img {
	padding-top: 1.3em;
	margin-right: 10px;
	max-width:250px;
	}

.about{
	max-width: 890px;
	margin: 0 auto;
	}

#about p {
	padding-top: 10em;
	color: #2a1640;
	font-weight: bold;
	font-family: sans-serif;
	line-height: 2;
	text-align: left;
  color: #000;
  font-size: 18px;
  font-weight: bold;
}


#about p a{color: #f01356;}
#about p a:hover {color: #00bccb;}

@media screen and (min-width:960px) {
#about h3 {
	float: left;
	padding: 120px 140px 120px 90px;
	}
}
	
@media screen and  (min-width:640px) and (max-width:960px) {
.about{
	max-width: 640px;
	margin: 0 auto;
	}
#about {
  background: linear-gradient(120deg, #fce000 0%, #fce000 44%, #ffffff 44%, #babbbb 100%);
  border-top: 20px solid #000;
  border-bottom: 20px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
}
#about h3 {
	float: left;
	padding: 120px 80px 120px 0px;
	}
	
#about h3 img {
	padding-top: 1.3em;
	margin-right: 10px;
	max-width:220px;
	}
#about p {
	padding-top: 12em;
	font-size: 15px;
}
}

@media screen and (max-width:640px) {
#about {
  background: linear-gradient(176deg, #fce000 0%, #fce000 49%, #ffffff 49%, #babbbb 100%);
  border-top: 20px solid #000;
  border-bottom: 20px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 320px;
}

#about h3 img {
	padding-top: 1.6em;
	padding-bottom: 1.3em;
	width:190px;
	}
	
#about p {
	padding:0.2em 2em;
	font-size: 14px;
	padding: 0 2em;
	}
#about br {display: none;}
}

@media screen and (max-width:400px) {
#about {
  background: linear-gradient(180deg, #fce000 0%, #fce000 45%, #ffffff 45%, #babbbb 100%);
  border-top: 20px solid #000;
  border-bottom: 20px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 330px;
}
#about h3 img {
	padding-top: 0.7em;
	padding-bottom: 0.5em;
	width:180px;
	}
#about p {
	padding:0.2em 2em;
	font-size: 14px;
	padding: 0 1em;
	}
}


/* -------------------------------------------------------------- */
/* requirements */
/* -------------------------------------------------------------- */
#requirements * {
	margin: 0;
	padding: 0;
	}
#requirements h3{font-size: 2.2em;}
#requirements p{
	margin: 0 auto ;
	text-align: center;
	padding:0.5em 0;
}
#requirements p.can{color: #f01356;font-weight:600;font-size:20px;}
#requirements p.change{font-size:28px;color: #000;margin-top:20px;}
#requirements p span{
	font-size:50px;
	font-weight: 600;
	}
#requirements .department{margin-bottom: 35px;}
.robo,
.robo2,
.robo_last,
.robo_last2{
	background-color: rgba(255, 255, 255, 0.8);
	border: 6px outset #c6c6c6;
	}
#requirements h4 {margin-bottom: 5px;color:  #f01356;}
#requirements h4 a{color:  #f01356;}
#requirements h4 a:hover{opacity: 0.5;}
#requirements dd a{color: #00bccb;}
#requirements dd a:hover{color: #f01356;}
#requirements dd.lines {line-height: 1.6;margin-bottom:1em;}
#requirements h3 a:hover{opacity: 0.7;}
dt.conditions {display: inline-block;}
#requirements ul{
	margin: 0 auto;
	max-width:650px;
	text-align: left;
	font-weight:600;
	font-size:15px;
	padding: 10px 0;
	background: linear-gradient(120deg, #ffffff 0%, #babbbb 100%);
	color: #000;
	padding-left: 1em;
	text-indent: -1em;
	margin-top: 50px;
	}
#requirements li {
	width: 500px;
	margin: 0 auto ;
	padding-left: 2em;
	}
#requirements li a{
	color:  blue;
	text-decoration: underline;
	}
#requirements li a:hover{
	color: #ff6876;
	text-decoration: underline;
	}

@media screen and (min-width:740px) {
#requirements {
	font-family: sans-serif;
	margin: 3em 0 2em;
	}
#requirements h3 img{
	float: left;
	margin-left: 1.5em;
	margin-right: 1em;
	width: 135px;
	}
#requirements h3.echizengani img{
	float: left;
	margin-left: 1.5em;
	margin-right: 1em;
	width: 135px;
	}
#requirements h4 {font-size: 20px;}
#requirements h4 img{padding-bottom: 5px;}
#requirements h4 span{
	padding: 15px 10px 10px 10px;
	text-align:center; 
	font-weight: 800;
	font-size: 16px;
	background-color: #fce000;
	border: 2px solid #000;
	}
#requirements dl{
	margin: 0.5em 1em;
	font-weight: 600;
	background-image: linear-gradient(to right, white 10%, rgba(255, 255, 255, 0) 0%);
	background-position: bottom;
	background-size: 4px 1px;
	background-repeat: repeat-x;
	}
dt.conditions{
	background-color: #23337b;
	width: 350px;
	color: #fff;
	text-align: center;
	font-size: 15px;
	}	
#requirements dd{
	margin-left:-1em;
	margin-top:5px;
	font-size:16px;
	}

#requirements dd span{
	font-size: 14px;
	color:#f01356;
	margin-left:12em;
	}
#requirements dd.conditions{
	margin-top:5px;
	margin-bottom:10px;
	}
#requirements dd.conditions br{display: none;}	
}

@media screen and (max-width:740px) and (min-width:641px){
#requirements {
	font-family: sans-serif;
	margin: 1em 0 1em;
	}
#requirements h3 img{
	float: left;
	width:100%;
	max-width:120px;
	margin: 0 10px;
	}
#requirements h4 {font-size: 18px;}
#requirements h4 span{
	font-weight: 800;
	font-size: 16px;
	background-color: #fce000;
	border: 2px solid #000;
	padding: 10px 5px 3px 10px;
	}
dt.conditions{
	background-color: #23337b;
	width: 280px;
	color: #fff;
	text-align: center;
	font-size: 15px;
	padding:10px 0 5px 0; 
	}
#requirements dl{
	margin: 0.5em 1em;
	font-weight: 700;
	font-size: 1.1em;
	background-image: linear-gradient(to right, white 10%, rgba(255, 255, 255, 0) 0%);
	background-position: bottom;
	background-size: 4px 1px;
	background-repeat: repeat-x;
	}
#requirements dd{
	margin-left:-1em;
	margin-top:5px;
	font-size:16px;
	}
#requirements dd span{
	font-size: 14px;
	color:#f01356;
	padding:0 0.8em;
	}
#requirements p{
	font-size: 16px;
	margin: 0 auto;
	max-width:500px;
	padding:0 10px;
	text-align: center;
	}
#requirements ul{
	font-size:14px;
	margin-top: 1em;
	padding-left: 1em;
	text-indent: -1em;
	}
}

@media screen and (min-width:641px) {
#requirements h4 br {display: none;}

#requirements h5 a{font-size: 16px;color:#00bccb;}
#requirements h5 a:hover{font-size: 16px;color:#ff6876;}
#requirements .frame div.robo,
#requirements .frame div.robo_last2{
	margin: 0 auto;
	padding: 8px 0 50px 0;
	max-width: 700px;
	}

#requirements .frame div.robo2,
#requirements .frame div.robo_last{
	margin: 0 auto;
	padding: 8px 0 10px 0;
	max-width: 700px;
	}
}

@media screen and (max-width:640px) {
.robo,
.robo2,{
	background-color: rgba(255, 255, 255, 0.8);
	border-bottom: none;
	}
#requirements {padding-top:20px;}
#requirements h3 {font-size:30px;}
#requirements p{
	color: #f01356;
	margin: 0 auto ;
	max-width:700px;
	text-align: center;
	font-weight:600;
	padding:0.5em 0;
	padding-left: 1em;
	text-indent: -1em;
}
#requirements p span{line-height: 50px}
#requirements .frame div.robo,
#requirements .frame div.robo2,
#requirements .frame div.robo_last,
#requirements .frame div.robo_last2 {
	margin: 0 auto;
	width: 85%;
	}
#requirements .frame div.robo,
#requirements .frame div.robo_last2{
	margin: 0 auto;
	padding: 5px 0 5px 0;
	max-width: 700px;
}
#requirements h3 img{
	clear:both;
	width:100%;
	max-width:180px;
	margin: 5px;
	}
#requirements h4 span{
	font-weight: 800;
	font-size: 16px;
	background-color: #fce000;
	border: 2px solid #000;
	padding: 10px 5px 0px 10px;
	margin:0 5px;
	}
#requirements h4{text-align: center; margin: 0 auto;font-size:22px; line-height: 1.7;}
#requirements h4 img{width: 100%;max-width:240px;}
#requirements h5 {text-align: center; margin: 0 auto;}
#requirements h5 a{font-size: 16px;color:#00bccb;}
#requirements h5 a:hover{font-size: 16px;color:#ff6876;}
#requirements dt img{margin: 0 auto; width:350px; margin-bottom:5px;}
dt.conditions{
	background-color: #23337b;
	width: 100%;
	color: #fff;
	text-align: center;
	font-size: 15px;
	margin: 0 auto;
	}
#requirements dd{
	width: 350px;
	margin: 0 auto;
	font-weight:400;
	font-size:18px;
	}
#requirements dd span{
	width:250px;
	font-size:14px;
	color:#f01356;
    padding-left: 1em;
    text-indent: -1em;
	display: block;
	}
#requirements ul{margin: 0 auto;}
#requirements li{
	font-size:14px;
	margin-top: 1em;
	margin: 0 auto;
	width:450px;
	}
}

@media screen and (max-width:460px) {
#requirements dd{width: 250px;}
#requirements ul{padding-right:30px;}
#requirements li{width:320px;}
}

/* -------------------------------------------------------------- */
/* course_rule */
/* -------------------------------------------------------------- */
#course_rule * {
	margin: 0;
	padding: 0;
}

#course_rule {
	font-family: sans-serif;
	margin: 0 auto;
	padding: 1em 0;
	margin-bottom: 5em;
}

#course_rule ul {
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#course_rule a {
	background-color: #ff6876;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

#course_rule li.nav_rule a {
	background-color: #00a3d2;
}

#course_rule li p {line-height: 2;}

#course_rule li a {
	display: block;
	width: auto;
	box-sizing: border-box;
	height: 100%;
	color: #fff;
	font-weight: 500;
	position: relative;
}

#course_rule li a:hover{
	color: #394567;
	background-color: #fff;
}

#course_rule li a h3 {color: yellow;}

#course_rule li a:hover h3 {color: #394567;}

#course_rule h4 {
	padding-top: 20px;
	font-size: 20px;
}

@media screen and (min-width:600px) {
#course_rule li {
	min-width: 280px;
	width: 40%;
	max-width: 360px;
	min-height: 230px;
	box-sizing: border-box;
	list-style: none;
	vertical-align: top;
	margin: 1em;
	overflow: hidden;
	position: relative;
	}
}

@media screen and (max-width:600px) {
	#course_rule li {
	min-width: inherit;
	width: 100%;
	}
#course_rule li {
	min-width: 280px;
	width: 40%;
	max-width: 360px;
	min-height: 200px;
	box-sizing: border-box;
	list-style: none;
	vertical-align: top;
	margin: 1em;
	overflow: hidden;
	position: relative;
	}
}


/* -------------------------------------------------------------- */
/* contact */
/* -------------------------------------------------------------- */
#contact * {
	margin: 0;
	padding: 0;
}

#contact {
	margin: 0 auto 5em;
	padding: 4em 0 5em;
	text-align: center;
	font-family: sans-serif;
	background: linear-gradient(120deg, #ffffff 0%, #babbbb 100%);
}

#contact p{
	font-size:20px;
	font-weight:500;
}

#contact p.address {
	margin: 0 auto;
	margin-top:20px;
	padding:10px;
	background-color: rgba(0,0,0,1);
	max-width:400px;
	border-radius: 470px;
	font-size:22px;
	font-weight:600;
	color:#fff;
}

#contact p img {
	width: 100%;
	max-width: 633px;
}
@media screen and (min-width:400px) {
#contact h3 {
	font-size:35px;
	}
}
@media screen and (max-width:400px) {
#contact h3 {font-size:20px;}
#contact p.address {
	width:300px;
	border-radius: 470px;
	font-size:18px;
	}
}

/* -------------------------------------------------------------- */
/* gotochi_robo */
/* -------------------------------------------------------------- */
#gotochi_robo * {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

#gotochi_robo {
	margin: 0 auto;
	text-align: center;
}

#gotochi_robo h3 {
	padding-bottom: 20px;
}

#gotochi_robo ul {
	margin: 0 auto;
	max-width: 980px;
	text-align: center;
}

#gotochi_robo li {
	display: inline-block;
	padding: 10px;
}

#gotochi_robo li a:hover {
	filter: opacity(70%);
	cursor: pointer;
}

@media screen and (max-width:760px) {
#gotochi_robo h3 {font-size: 28px;}
#gotochi_robo img{width: 100%;}
}

/* -------------------------------------------------------------- */
/* management */
/* -------------------------------------------------------------- */
#management {
	background-color: #000;
	color: #fce000;
	font-family: sans-serif;
	font-weight:600;
	padding-top: 2em;
}

#management dl {
	padding: 0 1em 0.2em 1em;
	text-align: center;
}

#management dt {
	width: 100%;
	margin-bottom: 0.5em;
	font-size: 1em;
}

#management dd {
	width: 100%;
	margin: 0 auto;
	font-size: 1.3em
	font-weight:600;
}

/* -------------------------------------------------------------- */
/* nav */
/* -------------------------------------------------------------- */
#nav-drawer * {
	margin: 0;
	padding: 0;
}
#nav-drawer {
	position: fixed;
	top: 10px;
	right: 10px;
	padding: 0;
	z-index: 9999;
}

/*チェックボックス等は非表示に*/
.nav-unshown {display: none; }

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 30px;
	height: 25px;
	vertical-align: middle;
	transition: all .4s;
	z-index: 9999;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span,
#nav-open span:before,
#nav-open span:after {
	position: absolute;
	height: 3px;
	/*線の太さ*/
	width: 25px;
	/*長さ*/
	border-radius: 3px;
	background: #000;
	display: block;
	content: '';
	cursor: pointer;
}

#nav-open span:before {bottom: -10px;}
#nav-open span:after {bottom: -20px;}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;
	/*はじめは隠しておく*/
	position: fixed;
	top: 0;
	/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
	z-index: 100;
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	/*最前面に*/
	width: 80%;
	/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 190px;
	/*最大幅（調整してください）*/
	height: 100%;
	background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1));
	/*背景色*/
	transition: .3s ease-in-out;
	/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);
	/*左に隠しておく*/
	z-index: 9999;
}


#nav-input:checked~#nav-open {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked~#nav-close {
	display: block;
	/*カバーを表示*/
	opacity: .5;
}

#nav-input:checked~#nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}

#nav-content ul {
	margin: 0;
	padding: 0.5em 0 0 0.8em;
}

#nav-content li {
	list-style: none;
	padding: 0.5em;
	border-bottom: solid 1px #fff;
}

#nav-content li a {
	font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000;
	font-size: 0.9em;
	padding: 0.2em 0;
	margin: 0 0 10px;
	text-align: center;
	font-weight: 100;
	text-decoration: none;
}

#nav-content li a:hover,
#nav-content li a:active {
	color: #02bccb;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}



/*==================================================================*/

/* course_hokuriku css */

/*==================================================================*/

#course {font-family: sans-serif;}

/* -------------------------------------------------------------- */
/* header */
/* -------------------------------------------------------------- */
#course #header * {
	margin: 0;
	padding: 0;
}

#course #header {
	margin: 0 auto;
	background-size: contain;
	/*position: relative;*/
	position: relative;
}

#course #header h1 {
	text-align: center;
	padding: 4% 0% 5%;
	max-width: 100%;
	color: #000;
}

#course #header p {
	padding: 0 1em 0 0;
	text-align: right;
	font-weight: bold;
}

#course #header p a{
	color: #000;
}

#course #header p a:hover {
	color: #00bccb;
}


/* -------------------------------------------------------------- */
/* fig */
/* -------------------------------------------------------------- */
#course #fig * {
	margin: 0;
	padding: 0;
}

#course #fig {
	margin: 0 auto;
	color: #000;
	background: rgba(255, 255, 255, 0.9);
	padding-top: 50px;
}

#course #fig dl {
	margin: 0 auto;
	max-width: 980px;
}

/* clear hack */
#course #fig dl {
	zoom: 1;
}

#course #fig dl:after {
	content: ".";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

#course #fig dt {
	width: 35%;
	max-width: 286px;
	float: left;
	padding: 0 10px;
}

#course #fig dt img {
	width: 100%;
}

#course #fig dd {
	width: 65%;
	float: right;
}

#course #fig dd p {
	padding-left: 0.5em;
	font-weight: bold;
}

#course #fig ul {
	padding: 0 0 3em 2em;
}

#course #fig li {
	padding: 0 0 0.5em;
}

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

	#course #fig dt,
	#course #fig dd {
		float: none;
		margin: 0 auto;
		width: 90%;
		padding-bottom: 1em;
	}
}

/* -------------------------------------------------------------- */
/* drawing */
/* -------------------------------------------------------------- */
#course #drawing * {
	margin: 0;
	padding: 0;
}

#course #drawing {
	padding: 3em 0 5em;
	background: #fff;
	text-align: center;
}

#course #drawing h2 {
	color: #000;
	margin: 0 auto 1em;
	padding: 0.5em 0 0.2em;
	background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 0.8));
	filter: drop-shadow(5px 5px 3px #6d6d6d);
	text-align: center;
	max-width: 350px;
	border-radius: 100px;
}

#course #drawing div {
	margin: 0 auto 4em;
	padding: 0 0.5em;
	max-width: 980px;
	color: #000;
}

#course #drawing dl {
	margin: 0 0 4em;
}

#course #drawing dt {
	margin: 0 0 1em;
	max-width: 980px;
}

#course #drawing dt img {
	width: 100%;
}

#course #drawing .btn_dl {
	width: 340px;
	height: 77px;
	margin: 0 auto;
	box-sizing: border-box;
	list-style: none;
	display: block;
	border: solid rgba(0, 188, 203, 1) 3px;
	text-align: center;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
}

#course #drawing .btn_dl a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #00bccb;
	font-weight: bold;
	width: 100%;
	height: 100%;
	padding-left: 65px;
	background: url(../image/icon_pdf.png);
	background-repeat: no-repeat;
	background-position: 15px 50%;
}

#course #drawing .btn_dl a svg {
	width: 74px;
	height: 34px;
	padding-left: 5px;
}

#course #drawing .btn_dl a:hover {
	color: #fff;
	background-color: #00bccb;
}
#course p.preparation {
	color: #546ab6;
	font-size:18px;
}

/* max400 */
/* -------------------------------------------------------------- */
@media screen and (max-width:400px) {
	#course #drawing .btn_dl {
		width: 80%;
		background-image: none;
	}

	#course #drawing .btn_dl a {
		padding: 0;
	}

	#course #drawing .btn_dl a svg {
		display: none;
	}
}



/*==================================================================*/

/* rule css */

/*==================================================================*/
#rule {
	counter-reset: number 0;
	font-family: sans-serif;
	font-weight: 300;
	color: #000;
}
/* -------------------------------------------------------------- */
/* header */
/* -------------------------------------------------------------- */
#rule #header * {
	margin: 0;
	padding: 0;
}

#rule #header {
	margin: 0 auto;
	background-size: contain;
	/*position: relative;*/
	position: relative;
}

#rule #header h1 {
	text-align: center;
	padding: 4% 0% 5%;
	max-width: 100%;
}

#rule #header p {
	padding: 0 1em 0 0;
	text-align: right;
	font-weight: bold;
}

#rule #header p a{color: #000;}

#rule #header p a:hover {color: #00bccb;}


/* -------------------------------------------------------------- */
/* detail */
/* -------------------------------------------------------------- */

#rule #detail {
	padding: 3em 0 5em;
	background: rgba(255, 255, 255, 0.7);
	color: #000;
	

}
#rule span {
	color: red;
}

.center {
	padding-bottom: 50px;
	text-align: center;
	color:  #f01356;
}

/* タブ内 */
/*---------------------------------------------*/
#rule #detail .tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto 4em;
	max-width: 750px;
}

#rule #detail .tab-label {
	box-sizing: border-box;
	width: 45%;
	padding: 1px 12px;
	color: #fff;
	background-color: #da60ad;
	font-size: 0.8em;
	order: -1;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

#rule #detail .tab-content {
	width: 100%;
	box-sizing: border-box;
	margin-top: -3em;
	padding: 3em 1em 0;
	z-index: 1;
	color: #333;
	text-align: center;
	line-height: 2.6;
}

/* 内容 */
/*---------------------------------------------*/
#rule .tab-content section {
	color: #333;
	padding: 1em 0 3em
}

#rule h3 {
	color: #000;
	margin: 0 auto 1em;
	padding: 0.5em 0 0.2em;
	background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 0.8));
	filter: drop-shadow(5px 5px 3px #6d6d6d);
	max-width: 800px;
	border-radius: 100px;
	text-align: center;
}

#rule .tab-content p {
	text-align: left;
}

#rule .tab-content img {
	width: 100%;
	/* maxサイズはhtmlタグの方に記入 */
	padding-bottom:20px;
}

/*
#rule #detail h3::before {
	counter-increment: number 1;
	content: counter(number) ".";
	padding-right: 5px;
}
*/

#rule .tab-content .about_desc dl {
	text-align: left;
	padding-bottom: 3em;
}

#rule .tab-content .about_desc dl a {
	color: currentColor;
	text-decoration: underline;
}

#rule .tab-content .about_desc dt {
	font-weight: 800;
}

#rule .tab-content .about_desc dd {
	padding-left: 1em;
	text-indent: -1em;
}

#rule .tab-content .about_desc .desc_road {
	padding-bottom: 310px;
	background: url(../image/rule_road.png) left 15% bottom 1em /auto no-repeat;
	background-position: left 50% bottom 30px;
}

#rule .tab-content .about_desc dd.desc_metal {
	padding-bottom: 310px;
	background: url(../image/course_hokuriku-tournament.png?3) left 15% bottom 1em /auto no-repeat;
	background-position: left 50% bottom 30px;
}

#rule .tab-content .about_desc dd::before {
	content: "・";
}

#rule .tab-content .about_desc .desc_metal {
	background:
		url(../image/rare.png) left 15% bottom 2em / 20% auto no-repeat,
		url(../image/rule_rare.png) right 15% bottom 2em / 45% auto no-repeat;
	padding-bottom: 190px;
}

#rule .tab-content .about_desc .desc_egg {
	background: url(../image/egg.png) no-repeat top 2em right 10%;
}

#rule .tab-content .about_desc .desc_egg dd {
	width: 60%;
}

#rule .tab-content .about_desc .desc_virus {
	background: url(../image/virus_rule.png?2) no-repeat top 4em right 10%;
}

#rule .tab-content .about_desc .desc_virus dd {
	width: 60%;
}

@media screen and (max-width:780px) {
	#rule .tab-content .about_desc .desc_road {
		padding-bottom: 16em;
		background: url(../image/rule_road.png) left 15% bottom 1em / 70% auto no-repeat;
		background-position: left 50% bottom 30px;
	}

	#rule .tab-content .about_desc dd.desc_metal {
		padding-bottom: 15em;
		background: url(../image/course_hokuriku-tournament.png?3) left 15% bottom 1em / 70% auto no-repeat;
		background-position: left 50% bottom 30px;
	}

	#rule .tab-content .about_desc .desc_metal {
		background:
			url(../image/rare.png) left 10% bottom 1em / 26% auto no-repeat,
			url(../image/rule_rare.png) right 10% bottom 1em / 60% auto no-repeat;
	}

	#rule .tab-content .about_desc .desc_egg {
		background: url(../image/egg.png) no-repeat top 4em right 5%;
	}
	#rule .tab-content .about_desc .desc_virus {
		background: url(../image/virus_rule.png?2) no-repeat top 8em right 5%;
	}
}

@media screen and (min-width:960px) {
	#rule .tab-content .about_desc p.photo {
		text-align: right;
		padding-right: 70px;
		margin-top: -30px;
		color: red;
		padding-bottom: 20px;
	}
#rule .tab-content .about_score p {
	text-align: center;
	margin: 0 auto;
	padding-top:40px;
	font-size:18px;
	color:red;
	width:500px;
	line-height: 2em
}
}

@media screen and (max-width:960px) {
	#rule .tab-content .about_desc p.photo {
		text-align: right;
		padding-right: 70px;
		margin-top: -30px;
		color: red;
		padding-bottom: 20px;
	}
#rule .tab-content .about_score p {
	text-align: center;
	margin: 0 auto;
	padding-top:40px;
	font-size:18px;
	color:red;
	width:500px;
	line-height: 2em
}
}

@media screen and (max-width:780px) {
	#rule .tab-content .about_desc p.photo {
		text-align: right;
		padding-right: 30px;
		margin-top: -10px;
		color: red;
		padding-bottom: 20px;
	}
#rule .tab-content .about_score p {
	text-align: center;
	margin: 0 auto;
	padding-top:40px;
	font-size:18px;
	color:red;
	width:500px;
	line-height: 2em
}
}

@media screen and (min-width:560px) {
	.center br {display: none;}
	}
@media screen and (max-width:560px) {
	#rule .tab-content .about_desc .desc_road {
		padding-bottom: 12em;
		background: url(../image/rule_road.png) left 15% bottom 1em / 95% auto no-repeat;
		background-position: left 50% bottom 30px;
	}
	
	#rule .tab-content .about_desc .desc_metal {
		background:
			url(../image/rare.png) left 0% bottom 3em / 28% auto no-repeat,
			url(../image/rule_rare.png) right 0% bottom 3em / 65% auto no-repeat;
	}

	#rule .tab-content .about_desc .desc_egg {
		background: url(../image/egg.png) no-repeat top 2em right 0%;
	}

	#rule .tab-content .about_desc .desc_virus {
		background: url(../image/virus_rule.png) no-repeat top 8em right 0%;
	}
	
	#rule .tab-content .about_desc p.photo {
		text-align: right;
		padding-right: 10px;
		margin-top: -30px;
		color: red;
		padding-bottom: 20px;
	}
#rule .tab-content .about_score p {
	text-align: center;
	margin: 0 auto;
	padding-top:40px;
	font-size:16px;
	color:red;
	width:350px;
	line-height: 2em
}
}

#rule .tab-content .about_score table {
	margin: 0 auto;
	border-collapse: collapse;
	font-size: 0.8em;
	width: 90%;
}

#rule .tab-content .about_score th {
	border: solid 1px #00bccb;
	padding: 1em 0.5em;
	background-color: rgba(0, 188, 203, 0.8);
	color: #fff;
}

#rule .tab-content .about_score td {
	border: solid 1px #00bccb;
	background-color: #fff;
	padding: 0.8em;
}

#rule .tab-content .about_score td:first-child {
	text-align: left;
	width: 90%;
}


#rule .tab-content .about_progress dl {
	text-align: left;
	padding-bottom: 2em;
}

#rule .tab-content .about_progress dt {
	font-weight: 800;
}

#rule .tab-content .about_progress dd p {

}

#rule .tab-content .about_robot ul {
	text-align: left;
	padding-top: 2em;
}

#rule .about_progress li {
	padding-left: 1em;
	text-indent: -1em;
}

#rule .tab-content .about_robot li {
	padding-left: 1em;
	text-indent: -1em;
}

#rule .tab-content .about_robot .normal li::before {
	content: "・";
}

#rule .tab-content .about_robot .kome li::before {
	content: "※";
}

#rule .tab-content .about_day .day_pre {
	border: solid 2px #00bccb;
	width: 70%;
	box-sizing: border-box;
	margin: 0 auto;
	background-color: #fff;
}

#rule .tab-content .about_day .day_pro {
	border: solid 2px #f01356;
	width: 80%;
	box-sizing: border-box;
	margin: 0 auto;
	background-color: #fff;
}

#rule .tab-content .about_day .day_pre dt {
	color: #fff;
	padding: 0.5em 0;
	background-color:  #00bccb;
}

#rule .tab-content .about_day .day_pro dt {
	color: #fff;
	padding: 0.5em 0;
	background-color: #f01356;
}

#rule .tab-content .about_day dd {
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
	margin: 0.5em;
	font-size: 0.9em;
	line-height: 2.4;
}

#rule .tab-content .about_day dd::before {
	content: "・";
}

#rule #detail h4+ol {
	padding-bottom: 5%;

}


#rule #detail p.attention {
	margin: 0 auto 2em;
	padding-left: 1em;
	max-width: 780px;
	color: black;
	font-weight: 100;
	font-size: 0.8em;
}

#rule #detail strong {
	font-size: 1.2em;
}

#rule #detail .red {
	color: #ff0000;
}


#rule #detail s {
	color: #aaa;
}

#rule .tab-content img {
	max-width:560px;
	width: 100%;
	/* maxサイズはhtmlタグの方に記入 */
	padding-bottom:20px;
}

@media screen and (max-width:560px) {
#rule .tab-content img {
	width: 350px;
	/* maxサイズはhtmlタグの方に記入 */
	padding-bottom:20px;
}
#rule .tab-content .about_score table {width: 100%;}
#rule .tab-content .about_day .day_pro {
	border: solid 2px #f01356;
	width: 95%;
	box-sizing: border-box;
	margin: 0 auto;
	background-color: #fff;
}
}

/* -------------------------------------------------------------- */