@charset "UTF-8";

/*==================================================================*/
gratz
/* 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-weight: 300;
	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;
}

/* フワッと表示 */
/*---------------------------------------------*/
#mainvisual {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
 0% {
     opacity: 0;
     transform: translateY(20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}

@-webkit-keyframes fadeIn {
 0% {
     opacity: 0;
     transform: translateY(20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}.fadein.active {
	opacity: 1;
	transform: translateY(0px);
}
/*---------------------------------------------*/


@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;
}

h4 {text-align: center;}
img {
	border: none;
}

dd img {
	text-align: center;
}
section {
	padding: 0.5em 0 3em;
	color: #000;
}


@media screen and (min-width:460px) {
	body {
	background: url(../image/back_yellow2.png?12) 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_yellow2.png?10) 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-color: #000;
	color: #fff;
	font-family: sans-serif;
	}

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;
}

header .news a {color: #fff;}
header .news {font-size:1.2em;}

/* -------------------------------------------------------------- */
/* header nav */
/* -------------------------------------------------------------- */
#header_nav{
	padding:10px 0;
	line-height:2;
	background: linear-gradient(120deg, #ffffff 0%, #babbbb 100%);
	letter-spacing:1px;
	display:block;
	font-family: sans-serif;
	}
#header_nav p{
	float:;
	}
#header_nav ul{
	display:flex;
	margin:0 auto;
	justify-content:space-between;
	align-items: center;
	}
#header_nav li{
	list-style:none;
	position: relative;
	max-width:150px;
	}

#header_nav li+li::before{
    content: "";
    display: block;
    height: 4em;
    border-left: 1px solid #999;
    position: absolute;
    top: 0;
    bottom: 0;
	left: -40px;
    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 li.nav a:hover{
	background-color: yellow;
	padding: 8px;
	border-radius:30px;
	display: block;　
	
	}
#header_nav a img:hover{opacity: 0.7;}

@media screen and (min-width:800px){
#header_nav{letter-spacing:1px;}
#header_nav ul{max-width:800px;}
#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:10px 0;
	line-height:2;
	background: linear-gradient(120deg, #ffffff 0%, #babbbb 100%);
	letter-spacing:1px;
	display:block;
	font-family: sans-serif;
	}
#header_nav ul{
	display:flex;
	width:550px;
	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: -15px;
    margin: auto;
}

#header_nav a{font-size:12px;}
#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 */
/* -------------------------------------------------------------- */
#bread {font-family: sans-serif;}
@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 {
    margin: 0 auto 10px;
    text-align: left;
    color: #89898a;
	width:98%;
    font-size: 12px;
}

#bread a {
    display: inline-block;
    position: relative;
    padding: 10px 20px 10px ;
    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;}
}

/* -------------------------------------------------------------- */
/* news */
/* -------------------------------------------------------------- */
#news {
	margin:-100px 0 120px;
	padding:0 0;
	background-color: #0076f0;
	opacity: 0.9;
}

/*#news ul {
	background-color: #0076f0;
	padding:5px;
	max-width: 400px;
	margin: 0 auto;
}

#news li {
	max-width: 400px;
}*/

#news ul {
	background-color: #00bccb;
	padding:5px;
	text-align: center;
}

#news p {
	color: #fff;
}

#news ul a:hover{text-decoration:underline;}

/* max400 */
/* -------------------------------------------------------------- */
@media screen and (max-width:400px) {

}
/* -------------------------------------------------------------- */
/* gratz */
/* -------------------------------------------------------------- */

#gratz {
	text-align: center;
	overflow: hidden;
	margin-top: -5em;
}

/* #gratz h3 {
	position: relative;
	background-color: #da60ad;
	line-height: 2.4em;
	text-align: center;
	margin: 0 auto 1em;
	max-width: 480px;
}*/


#gratz div {
	max-width: 650px;
	margin: 0 auto;
}

#gratz dl {
	color: #000;
	text-align: left;
	overflow: hidden;
	padding: 1em 0;
	border-bottom: dotted 1px #aaa;
}

#gratz dt {
	width: 100%;
	margin-bottom: 0.5em;
	font-weight: 600;
}

#gratz h4 {
	text-align: left;
	margin: 2em 0 0;
}

#gratz .revenge dd span {
	font-weight: 600;
	color: #009bb2;
	line-height: 2em;
	border: 1px solid red;
}

#gratz .congratulations h4 span {
	color: #fff;
	background-color: #40bccb;
	padding: 0.6em 1em 0.6em;
	margin-right: 1em;
}

#gratz .congratulations dd {
	font-size: 1em;
	line-height: 1.8em;
	text-align: center;
	font-weight: bold;
}


.entry_robot {
	padding:0 0 3em 0;
	background: rgba(255, 255, 255, 0.5);
	padding: 1em 0 2em;
}

.entry_robot p {
	color: #000;
	font-size: 1.2em;
	text-align: center;
	font-weight: bold;
}


#gratz .js-modal-open:hover {
	background-color: #7a93d5;
}

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

#gratz .js-modal-open-3d:hover {
	background-color: #fddd00;
}

#gratz .js-modal-open-3d 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 ul {
	max-width: 760px;
	margin: 0 auto;
	padding-top: 2em;
	box-sizing: border-box;
	text-align: left;
}

#gratz ul li {
	display: block;
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
	font-weight: 600;
}

#gratz ul li a:before {
	content: "・";
}

#gratz ul li a {
	color: #009bb2;
}

#gratz ul li a span {
	text-decoration: underline;
}

#gratz ul li a:hover {
	color: #40bccb;
}

@media screen and (min-width:500px) and (max-width:650px) {
	#gratz{margin-top: 3em;}
}

@media screen and (min-width:500px) {
	#gratz .js-modal-open {
	display: inline;
	color: #fff;
	font-size: .8em;
	background-color: #4d75c9;
	padding: .5em 1em;
	margin: 0;
	border-radius: 1em;
}

#gratz .js-modal-open-3d {
	display: inline;
	color: #fff;
	font-size: .8em;
	background-color: #fdcc00;
	padding: .5em 1em;
	margin: 0;
	border-radius: 1em;
}
br.line {
	display: none;
}
}

@media screen and (max-width:500px) {
	#gratz {padding: 12em 1em 1em;}
	#gratz .js-modal-open {
	display: inline;
	color: #fff;
	font-size: .8em;
	background-color: #4d75c9;
	padding: .5em .5em;
	margin: 0;
	border-radius: 1em;
}
#gratz .js-modal-open-3d {
	display: inline;
	color: #fff;
	font-size: .8em;
	background-color: #fdcc00;
	padding: .5em 1em;
	margin: 0;
	border-radius: 1em;
}
#gratz .round dd a{
	line-height: 3em;
}

}
@media screen and (min-width:460px) {
#gratz {padding: 1em 1em 3em;}
}
@media screen and (max-width:460px) {
#gratz {padding: 2em 1em 1em;}
}
@media screen and (max-width:400px) {
#gratz {padding: 2em 1em 1em;}
}

/* -------------------------------------------------------------- */
/* mainvisual */
/* -------------------------------------------------------------- */
.date p.day_place a{font-family: sans-serif;}
.date p.day_place a{color: #fce000;}
.date p.day_place a:hover{color: #fff;}

#mainvisual {margin-bottom:4em;}
	
@media screen and (min-width:750px){
#mainvisual h1 {
	width:100%;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	}

#mainvisual h2 {
	 position:  relative;
	 margin: 0 auto;
	text-align: center;
	}
	
#mainvisual  h5{
	display: none;
	}
	
.main h1 img{
	padding-top: 0.3em;
	padding-bottom: 0.2em;
	max-width: 480px;
	}

#mainvisual h2 img{
	padding-top: 0.3em;
	padding-bottom: 0.2em;
	max-width: 850px;
	width:100%;
	}
	
.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;}

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

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

	
@media screen and (min-width:641px) and (max-width:750px){
#mainvisual h1 {
	width:100%;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
	position: absolute;   
	}

#mainvisual h1 img{
	max-width: 400px;
	}
	
#mainvisual h2 {
	 position:  relative;
	 margin: 0 auto;
	text-align: center;
	}
	
#mainvisual  h5{
	display: none;
	}
	
.main h1 img{
	padding-top: 0.3em;
	padding-bottom: 0.2em;
	max-width: 480px;
	}

#mainvisual h2 img{
	padding-top: 0.3em;
	padding-bottom: 0.2em;
	max-width: 850px;
	width:100%;
	}
	
.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;}

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

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

@media screen and (max-width:640px) {
#mainvisual h2 {display: none;}
#mainvisual h1 img{
	width:100%;
	padding: 20px;
	margin: 0 auto;
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
	}
.date h3 {
	margin-top: -3.5em;
	filter: drop-shadow(3px 3px 3px gray);
	}
#mainvisual h3 img{
	width:85%;
	margin: 0 auto;
	text-align: center;
	max-width: 370px;
	padding-top: 1em;
	padding-bottom: 1em;
	}
	
#mainvisual  h5{
	margin: 0 auto;
	text-align: center;
	}

#mainvisual  h5 img{
	width:100%;
	padding:0 20px;
	}
	
.main 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: 85%;
	margin: 0 auto ;
	padding: 10px 0 5px;
	text-align: center;
	font-size: 1.2em;
	font-weight: 800;
	font-size:20px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
}
}


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

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

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

#whats 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;
}


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

@media screen and (min-width:960px) {
#whats h3 {
	float: left;
	padding: 120px 140px 120px 90px;
	}
}
	
@media screen and  (min-width:640px) and (max-width:960px) {
.whats{
	max-width: 640px;
	margin: 0 auto;
	}
#whats {
  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;
}
#whats h3 {
	float: left;
	padding: 120px 80px 120px 0px;
	}
	
#whats h3 img {
	padding-top: 1.3em;
	margin-right: 10px;
	max-width:220px;
	}
#whats p {
	padding-top: 12em;
	font-size: 15px;
}
}

@media screen and (max-width:640px) {
#whats {
  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;
}

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

@media screen and (max-width:400px) {
#whats {
  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;
}
#whats h3 img {
	padding-top: 0.7em;
	padding-bottom: 0.5em;
	width:180px;
	}
#whats p {
	padding:0.2em 2em;
	font-size: 14px;
	padding: 0 1em;
	}
}

/* -------------------------------------------------------------- */
/* 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 a {
	text-decoration: underline;
	color: #40bbca;
}

#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 a {
		text-decoration: underline;
		color: #40bbca;
	}
	#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{
  position: relative;
  font-family: sans-serif;
  margin-top:2em;
	}
	
#about h2{
	margin: 0 auto;
	text-align: center;
	position:  relative;   
	}

#about h2 img{
	width:100%;
	max-width:850px;
	}	

.hold::before{  //背景画像の疑似要素にぼかしを
      background: inherit;  //重要
      content: '';
      position: absolute;
      filter: blur(5px);  //重要
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
  }
  
#about h3{
	margin: 0 auto;
	padding-bottom: 1em;
	text-align:left;
  max-width: 400px;
  font-size: 18px;
  color: #ff457b;
  text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0-2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
	}

#about p{margin: 0 auto;}

@media screen and (min-width:700px) {
.hold div{
	width:640px;
	margin: 0 auto;
	}
.hold {
	margin: 0 auto;
	background-color: rgba(223,250,212, 0.7);box-shadow: 0px 0px 20px 20px rgba(223,250,212, 0.7);padding: 10px;margin: 40px 0px;
	position:  relative;
	}
	}

@media screen and (max-width:700px) {
.hold div{
	width:100%;
	margin: 0 10px;
	}
.hold {
	margin: 0 auto;
	background-color: rgba(223,250,212, 0.7);box-shadow: 0px 0px 20px 20px rgba(223,250,212, 0.7);padding: 10px;margin: 40px 0px;
	position:  relative;
	top: -70px;
	}
	}


/* -------------------------------------------------------------- */
/* preparation */
/* -------------------------------------------------------------- */
#preparation {
	font-family: sans-serif;
	margin: 0 auto;
	background-image: radial-gradient(circle, rgba(252, 244, 204, 1) 21%, rgba(223, 250, 212, 1) 51%);
	width: 95%;
	max-width: 600px;
	border-radius: 30px;
	color: #40bbca;
	line-height: 1.8em;
}

#preparation p{
	margin-left: 1.2em;
	font-weight: 500;
}

@media screen and (min-width:460px) {
#preparation {
	padding: 1em 2em;
	font-size: 21px;
	margin-top: 3em;
	margin-bottom: 5em;
	}
	}

@media screen and (max-width:460px) {
#preparation {
	padding: 1em 0.5em;
	font-size: 18px;
	margin-top: 2em;
	margin-bottom: 3em;
	}
	}


/* -------------------------------------------------------------- */
/* requirements */
/* -------------------------------------------------------------- */
#requirements * {margin: 0; padding: 0;}
#requirements {
	font-family: sans-serif;
	margin: -1em 0 2em;
	}
#requirements p{
	margin: 0 auto ;
	text-align: center;
	padding:0.5em 0;
}
	
#requirements p.change{font-size:28px;color: #f01356; font-weight:600;margin-top:20px;}

#requirements dt h3 {font-size:20px;padding-top: 5px;}
#requirements h4.contest{font-size:18px; color: #f01356;}
#requirements h4 a{color: #f01356;}
#requirements h4 a:hover{opacity: 0.5;}
#requirements h4 img{width: 45%;}
#requirements dt h3 {background-color:#fff; color:#fff; border-bottom: 2px solid #ff457b;}
#requirements dd a:hover{color: #f01356;}
#requirements dd {font-weight: 500;font-size:14px;}

#requirements dd.championship {line-height: 1.6; margin: 0 auto ; margin-left: 4em; padding-bottom: 10px;font-size:14px;}
#requirements h3 a:hover{opacity: 0.7;}
#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: 30px;
	}
#requirements li a{
	color:  blue;
	text-decoration: underline;
	}
#requirements li a:hover{
	color: #ff6876;
	text-decoration: underline;
	}

	
@media screen and (min-width:740px) {
.robo{
	background-color: rgba(255, 255, 255, 0.8);
	border: 6px outset #babbbb;
	width:220px;
	height:350px;
	margin: 0 auto ;
	}
#requirements .frame{margin-bottom: 35px; width:750px; margin: 0 auto ;}
#requirements dl{
	margin: 0.5em 0.5em;
	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;
	display: flex;
	flex-wrap: wrap;
	}
#requirements p.change{display: block;padding: 0 150px;}
#requirements li {
	width: 580px;
	margin: 0 auto ;
	padding-left: 2em;
	}
}

@media screen and (max-width:740px) {
.robo{
	background-color: rgba(255, 255, 255, 0.8);
	border: 6px outset #babbbb;
	width:185px;
	height:380px;
	margin: 0 auto ;
	}
.robo img{
	width:100%;
	}
#requirements h4 a,
#requirements h4 {
	font-size: 14px;
	}
#requirements .frame{max-width: 400px; margin: 0 auto ;display: block;}
#requirements dl{
	margin: 0 auto ;
	padding: 0.5em 0.2em;
	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;
	display: flex;
	flex-wrap: wrap;
	}
}
/* -------------------------------------------------------------- */
/* date */
/* -------------------------------------------------------------- */
#date * {
	margin: 0;
	padding: 0;
}

#date {
	margin: 0 auto;
	padding-top: 3em;
}

#date .schedule {
	margin: 0 auto;
	padding: 2em 1em 3em;
	max-width: 980px;
}

#date .schedule div {
	margin: 0 auto;
	max-width: 680px;
}

#date dd {
	padding-bottom:20px;
}

#date dl dd span{
	font-size:15px;
}

#date dl{
	margin: 0 0 0.5em;
	font-weight: bold;
	font-size: 1.3em;
	background-image: linear-gradient(to right, black 30%, rgba(255, 255, 255, 0) 0%);
	background-position: bottom;
	background-size: 4px 1px;
	background-repeat: repeat-x;
}

#date dl:first-child {
	border-top: none;
}

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

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

#date dt{
	float: left;
	width: 80px;
	margin-left:30px;
}

#date dd {
	float: left;
	padding-left: 50px;
}

#date .schedule div p {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 15px;
	padding-left:2em;
}

@media screen and (min-width:920px) {
	#date dl dt {
	font-size:20px;
	}
	
	#date dl dd {
	font-size:20px;
	}

}

@media screen and (max-width:750px) {
#date .schedule div p br {
	display: none;
}
}

@media screen and (min-width:500px) {
#date dd a {
	text-decoration: none!important; 
	font-size:15px;
	color: #fff;
	margin-left:20px;
	padding:10px 10px 5px;
	background-color: #009bb2;
	border-radius: 5px;
}

#date dd a:hover {
	margin-left:20px;
	padding:10px 10px 5px;
	border-radius: 5px;
	opacity: 0.7;
}
}

@media screen and (max-width:500px) {
#date dt {
	width: 90%;
	}
	
#date dd a {
	text-decoration: none!important; 
	font-size:15px;
	color: #fff;
	margin-left:10px;
	padding:10px 10px 5px;
	background-color: #009bb2;
	border-radius: 5px;
	}

#date dd a:hover {
	margin-left:20px;
	padding:10px 10px 5px;
	border-radius: 5px;
	opacity: 0.7;
	}
}	


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

#course_rule {
	font-family: sans-serif;
	margin: 0 auto;
	padding: 1em 0;
	margin-bottom: 5em;
	background-color: rgba(255,255,255,0.7);
}

#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;
	}
}


/* -------------------------------------------------------------- */
/* company */
/* -------------------------------------------------------------- */
#company {
	font-family: sans-serif;
	margin: 0 auto;
	background-image: linear-gradient(90deg, rgba(223, 250, 212, 1), rgba(252, 244, 204, 1) 50%, rgba(223, 250, 212, 1));
	width:95%;
	max-width:900px;
	border-radius: 80px;
	margin-bottom: 5em;
}

#company p.contest{
	max-width: 650px;
	margin: 0 auto;
	padding-bottom: 1em;
	padding: 0 20px;
	text-align: center;
}
#company p.contest span{
	color:#ff457b;
	font-size:1.3em;
	font-weight:600;
	text-shadow:3px 3px 0 #FFF, -3px -3px 0 #FFF,
              -3px 3px 0 #FFF, 3px -3px 0 #FFF,
              0px 3px 0 #FFF,  0 -3px 0 #FFF,
              -3px 0 0 #FFF, 3px 0 0 #FFF;
}	

#company p.recruitment,
#company p.contest_kani,
#company p.contest_zenkoku{
	text-align: center;	margin: 0 auto;
	padding: 0 10px;
	}	

#company p.recruitment{margin-top:15px;}
#company p.contest_kani img{max-width:300px;}
#company p.contest_zenkoku img{max-width:400px;}

#company p a{
	margin: 0 auto;
	text-align: center;
}

#company .merit{
	margin-bottom: 2em;
}

#company h3.sponsor img{
	max-width: 320px;
	padding-top: 0.5em;
}

#company h4 {
	font-size: 1.2em;
	max-width: 720px;
	margin: 1.5em auto 0em;
	color: #fff;
}
#company .business h4 {
	color: #000;
}
#company h5 {
	font-size: 1.5em;
	max-width: 720px;
	margin: 2em auto 0.5em;
	color: #40bbca;
}

#company a {
	text-decoration: underline;
	color: #ff457b;
}

#company p.both{
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	font-size:12px;
	color: #ff457b;
}

#company p.inquiry{
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	font-size:16px;
}

#company p.inquiry a{color: #ff457b;}
#company p.inquiry a:hover{color: #fda2bc;}

#company p.echizengani{
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	text-decoration: underline;
}

#company a:hover {
	/*color: #4cbacb;*/
	color: #ed99ce;
}

#company .support {
	margin: 0 auto;
	padding: 1em;
	max-width: 720px;
	box-sizing: border-box;
	text-align: center;
}

#company p span {
	display: inline-block;
}

#company .support p span img {
	vertical-align: middle;
}

#company .btn_dl1 {
	width:95%;
	max-width: 400px;
	height:120px;
	margin: 0 auto;
	box-sizing: border-box;
	list-style: none;
	display: block;
	border: solid #ff457b 3px;
	text-align: center;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	font-size: 1.1em;
	background-color: #fff;
	margin-top:2em;
	line-height:1em;
	line-height:2em;
}

@-moz-document url-prefix() {
#company .btn_dl1 {
	line-height:2.8em;
}
}

#company .btn_dl1 a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	color: #ff457b;
	font-weight: bold;
	text-decoration: none;
}


#company .btn_dl1 a img.pdf {
	width: 45px;
	height: 45px;
	flex-basis: 20%;
}

#company .btn_dl1 br{
display: block;
content: "";
margin: -12px 0;
}

#company .btn_dl1 a p{
	padding-top: 10px;
}

#company .btn_dl1 a span {
	flex-basis: 50%;
}

#company .btn_dl1 a svg {
	width: 88.8px;
	height: 40.8px;
	flex-basis: 25%;
}

#company .btn_dl1 a:hover {
	color: #fff;
	background-color: #ff457b;
}


#company .btn_dl1 br{
display: block;
content: "";
margin: -12px 0;
}

#company .btn_dl1 a p{
	padding-top: 5px;
}

#company .btn_dl1 a span {
	flex-basis: 50%;
}

#company .btn_dl1 a svg {
	width: 88.8px;
	height: 40.8px;
	flex-basis: 20%;
}

#company .btn_dl2 {
	width:95%;
	max-width: 400px;
	height:120px;
	margin: 0 auto;
	box-sizing: border-box;
	list-style: none;
	display: block;
	border: solid #66c9d5 3px;
	text-align: center;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	background-color: #fff;
	margin-top:5em;
	line-height: 2em;
}

@-moz-document url-prefix() {
#company .btn_dl2 {
	line-height:2.8em;
}
}

#company .btn_dl2 a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	max-width: 400px;
	color: #66c9d5;
	font-weight: bold;
	text-decoration: none;
}

#company .btn_dl2 a:hover {
	color: #fff;
	background-color: #69d0dd;
}


#company .btn_dl2 a img.pdf {
	width: 40px;
	height: 40px;
	flex-basis: 15%;
}

#company .btn_dl2 br{
display: block;
content: "";
margin: -12px 0;
}

#company .btn_dl2 a p{
	padding-top: 5px;
}

#company .btn_dl2 a span {
	flex-basis: 50%;
}

#company .btn_dl2 a svg {
	width: 88.8px;
	height: 40.8px;
	flex-basis: 18%;
}

#company .app_btn{
	padding: 0;
	width: 300px;
	height: 77px;
	box-sizing: border-box;
	list-style: none;
	display: inline-block;
	border: solid #40bbca 3px;
	margin: 1em 0;
	font-size: 20px;
}
/* #company2 .app_btn a */
#company .app_btn div{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: #40bbca;
	font-weight: bold;
	position: relative;
	text-decoration: none;
	background-color: rgba(251, 223, 0, 1);
}
#company .app_btn a::after {
	content: "＞";
	font-size: 40px;
	line-height: 77px;
	position: absolute;
	top: 0px;
	right: 10px;
}

#company .app_btn a:hover {
	color: #fff;
	background-color: #40bbca;
}


p.inquiry {clear:both; padding-top:2em; padding-bottom:5em;}


/* contentsn */
/*-----------------*/
#company .contentsn {
	color：#40bbca;
	text-align: center;
}

#company .contentsn p {
	text-align: left;
	font-size: 0.9em;
	margin: 0.5em 0 0;
	color: #333;
}

#company .contentsn h4 {
	background-color: #40bbca;
	display: inline-block;
	font-size: 1em;
	padding: 0em 1.5em;
	border-radius: 1em;
	color：#40bbca;
}

#company .contentsn .merit h5 {
	font-size: 1em;
	text-decoration: underline;
	text-align: left;
	margin: 1em 0 0;
}

#company .contentsn .plan ol {
	text-align: left;
	font-size: 0.9em;
	padding: 0.5em 0 0 3em;
	margin: 0 auto;
}

#company .contentsn .plan ol li {
	list-style: decimal;
	font-weight: bold;
}

#company .contentsn .plan a {
	color: #009bb2;
}

#company .contentsn .plan a:hover {
	color: #4cbacb;
}


/* contentsn2 */
/*-----------------*/
#company .contentsn2 {
	background-color: rgba(255, 255, 255, 0.8);
	color: #333;
	border: solid #40bbca 3px;
	max-width:600px;
	margin: 0 auto;
	text-align: center;
}

#company .contentsn2 p {
	text-align: left;
	font-size: 0.9em;
	margin: 0.5em 0 0;
	padding-left:1em;
	text-indent:-1em;
}

#company .contentsn2 h4 {
	background-color: #4cbacb;
	display: inline-block;
	font-size: 1em;
	border-radius: 1em;
}

#company .contentsn2 .merit h5 {
	font-size: 1em;
	text-decoration: underline;
	text-align: left;
	margin: 1em 0 0;
}

#company .contents2 .plan ol {
	text-align: left;
	font-size: 0.9em;
	padding: 0.5em 0 0 2em;
	margin: 0 auto;
}

#company .contentsn2 .plan ol li {
	list-style: decimal;
	font-weight: bold;
}

#company .contentsn2 .plan a {
	color: #009bb2;
}

#company .contentsn2 .plan a:hover {
	color: #4cbacb;
}


@media screen and (min-width:950px) {
.business{margin: 0 auto;}

#company .btn_dl2 {font-size: 0.9em;}

.sponsor_application1 {
	border: solid #ff457b 2px;
	margin:10px;
	width:400px;
	height:270px;
	float: left;
}
.sponsor_application2 {
	margin:10px;
	margin: 0 auto;
}
	}
	
.deadline1{
	max-width: 500px;
	margin: 5px auto 20px;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
	color: #ff457b;
	font-size: 20px;
}

.deadline2{
	max-width: 500px;
	margin: 5px auto 20px;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
	color: #66c9d5;
	font-size: 20px;
}

.deadline1 dt,
.deadline2 dt{
	float:left;
	width: 200px;
}

@media screen and (max-width:750px) {
.deadline1,
.deadline2{
	width: 90%;
	font-size:18px;
	}
.deadline1 dt,
.deadline2 dt{
	width: 100%;
}
}




@media screen and (max-width:950px) {
.business{
	margin: 0 auto;
	width:100%;
	}

#company .btn_dl2 {font-size: 0.8em;}

.sponsor_application1 {
	border: solid #ff457b 2px;
	margin:10px;
	width:95%;
}
.sponsor_application2 {
	margin:10px;
	width:95%;
}
	}



@media screen and (min-width:460px) {
#company .contentsn {
	padding: 0 3em 3em;
}

#company .contentsn2 {
	padding: 0em 1.2em 2em;
}

}

/* max400 */
/* -------------------------------------------------------------- */
@media screen and (max-width:460px) {
#company .contentsn {
	padding: 0 1em 3em;
}

	#company li {
		width: 90%;
	}

	#company .btn_dl {
		background-image: none;
	}

	#company .btn_dl a {
		padding: 0;
	}

	#company .btn_dl a svg {
		display: none;
	}

	#company .btn_dl a img {
		width: 56px;
		height: 56px;
		flex-basis: 25%;
	}

	#company .btn_dl a span {
		flex-basis: 75%;
	}
}
@media screen and (max-width:470px) {
	#company .app_btn{
		width: 100%;
		}
.sponsor_application1 {
	margin:10px;
	width:93%;
}
.sponsor_application2 {
	margin:10px;
	width:93%;
}
}

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

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

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

.entry_robot .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: 1em;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	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: #009bb2;
}

.modal__content a:hover {
	color: #90DAE6;
}

.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;
	}
	
	.modal__content {
		width: 80%;
		height: 50%;
	}
}

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

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


/* -------------------------------------------------------------- */
/* archive */
/* -------------------------------------------------------------- */
#archive {
	font-family: sans-serif;
	width: 100%;
	position: relative;
	padding: 4em 1em 7em;
}

#archive h3 {margin: 0 0 20px;}

#archive p {
	margin: 0 auto;
	line-height: 2;
	max-width: 600px;
	text-align: center;
}

#archive p.over {max-width: 460px;text-align:left;}

#archive p a {
	text-decoration: underline;
	color: #40bbca;
}

#archive h4{
	background-color: blue;
	max-width:300px;
	border-radius:50px;
	padding: 1em 0;
	margin: 0 auto;
	text-align: center;
	margin-top:3em;
}

#archive h4 a{
display: inline-block;
}

#archive p a:hover {
	color: #4dd5e5;
	margin: 0 auto;

}

#archive .ballot {
	display: block;
	max-width: 600px;
	font-size: 1.2em;
	font-weight: 700;
	border: #fff solid 2px;
	padding: 1em 0 .5em;
	margin: 0 auto 3em;
	background-color: #da60ad;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

#archive .ballot::before {
	content: "\0bb";
	padding-right: .5em;
	transition-property: all;
	transition-duration: 0.3s;
}

#archive .ballot::after {
	content: "\0ab";
	padding-left: .5em;
	transition-property: all;
	transition-duration: 0.3s;
}

#archive .ballot:hover {
	background-color: #fff;
	border-color: #da60ad;
	color: #da60ad;
}

#archive .ballot:hover::before {
	padding-right: 0;
}

#archive .ballot:hover::after {
	padding-left: 0;
}

#archive .movie {
	text-align: center;
	margin: 1em auto;
	max-width: 980px;
	text-align: center;
}

#archive .movie lite-youtube {
	width:100%;
	max-width: 560px;
	height: 315px;
	padding: 0;
	display: block;
	margin: 0 auto;
}

#archive .movie iframe {
	width:100%;
	max-width: 560px;
	height: 315px;
	padding: 0;
}

#archive .btn_dl {
	max-width: 330px;
	height: 65px;
	margin: 0 auto;
	box-sizing: border-box;
	list-style: none;
	display: block;
	border: solid #40bbca 2px;
	text-align: center;
	border-radius: 50px;
	overflow: hidden;
	position: relative;
	font-size: 1.2em;
	background-color: #40bbca;
	margin-top: 30px;
}

#archive .btn_dl a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	max-width: 330px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

#archive .btn_dl a:hover {
	color: #40bbca;
	background-color: #fff;
}

#archive .btn_dl a img {
	width: 35px;
	flex-basis: 25%;
	margin-right:20px;
	margin-top:-5px;
}

#archive .btn_dl a span {
	flex-basis: 100%;
	margin-left:20px;
}
}


@media screen and (max-width:700px) {
	#archive p {
		padding: 0 1em;
		line-height: 2.5;
		text-align: left;
		max-width: 560px;
	}

	#archive .movie {
		width: 100%;
		max-height: 315px;
		position: relative;
		padding-top: 56.25%;
	}

	#archive .movie lite-youtube {
		position: absolute;
		width: 100%;
		height: 100%;
		max-width: 560px;
		max-height: 315px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	#archive .movie iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		max-width: 560px;
		max-height: 315px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
}

/* max400 */
/* -------------------------------------------------------------- */
@media screen and (max-width:400px) {
	##archive li {
		width: 90%;
	}

	##archive .btn_dl {
		width: 100%;
		background-image: none;
	}

	##archive .btn_dl a {
		padding: 0;
	}

	##archive .btn_dl a svg {
		display: none;
	}

	##archive .btn_dl a img {
		width: 56px;
		height: 56px;
		flex-basis: 25%;
	}

	##archive .btn_dl a span {
		flex-basis: 75%;
	}
}

/* -------------------------------------------------------------- */
/* 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;
	}
}


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

#sponsor {
	color: #000;
	margin: 0 auto;
	padding: 3em 0 6em;
	background: #fff;
	text-align: center;
}

#sponsor h4 {
	font-size: 1.2em;
	text-align: left;
	margin: 0 auto;
	max-width: 980px;
	padding: 0 1em;
}

#sponsor li {padding-bottom:2em;}

#sponsor .light_platinum{
	margin: 0 auto 1em;
	max-width: 980px;
	padding: 1em 0em 0;
	text-align: center;
	letter-spacing: -.6em;
}

#sponsor .pine_gold{
	margin: 0 auto 1em;
	max-width: 980px;
	padding: 1em 2em 0;
	text-align: center;
	letter-spacing: -.6em;
}

#sponsor .bamboo_silver{
	margin: 0 auto 1em;
	max-width: 980px;
	padding: 1em 2em 0;
	text-align: center;
	letter-spacing: -.5em;
}

#sponsor .plum_bronze{
	margin: 0 auto;
	max-width: 980px;
	padding: 0 2em;
	text-align: center;
	letter-spacing: -.5em;
}

#sponsor .light_platinum li{
	display: inline-block;
	letter-spacing: normal;
	margin-bottom: 1em;
}

#sponsor .pine_gold li{
	display: inline-block;
	letter-spacing: normal;
	margin-bottom: 1em;
}

#sponsor .bamboo_silver li {
	display: inline-block;
	letter-spacing: normal;
	margin-bottom: 1em;
	padding: 1em;
}

#sponsor .bamboo_silver li ual {
	padding: 1em;
}

#sponsor .plum_bronze li{
	display: inline-block;
	letter-spacing: normal;
	margin-bottom: 1em;
}

#sponsor a {
	font-size: 0.8em;
	color: #000;
}

#sponsor a:hover {
	color: #da60ad;
}

@media screen and (max-width:980px) {
	#sponsor h4 {
		text-align: center;
		margin-bottom: 0.5em;
		font-size: 0.9em;
	}

	#sponsor ul {
		padding: 0 1em 0.5em 1em;
		margin-bottom: 0.5em;
		text-align: center;
	}

}

@media screen and (max-width:600px) {
	#sponsor img {
		width: 100%;
		height: auto;
	}

	
	#sponsor .light_platinum li{
		width: 100%;
	}

	#sponsor .pine_gold li {
		width: 90%;
	}

	#sponsor .bamboo_silver li {
		width: 80%;
	}

	#sponsor .plum_bronze li{
		width: 60%;
	}

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

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

#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: linear-gradient(120deg, #ffffff 0%, #babbbb 100%);
	color: #000;
	font-family: sans-serif;
	font-weight:600;
	padding-top: 2em;
	
}

#management dl {
	margin: 0 auto 1em;
	max-width: 980px;
	padding: 0 20em;
}

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

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

#management dt {
	float: left;
	width: 80px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}

#management dd {
	float: right;
	width: 250px;
	padding-top:3px;
	box-sizing: border-box;
	overflow: hidden;
}

#management dd span {
	margin-right: 1em;
	display: inline-block;
}
@media screen and (max-width:980px) {
	#management dl {
		padding: 0 1em 0.5em 1em;
		margin-bottom: 0.5em;
		text-align: center;
	}

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

	#management dd {
		width: 100%;
		margin: 0 auto;
		padding: 0.5em 0em 0.5em 1em;
		font-size: 0.9em
	}
}
/* -------------------------------------------------------------- */
/* nav */
/* -------------------------------------------------------------- */
#nav-drawer * {
	margin: 0;
	padding: 0;
}
#nav-drawer {
	position: fixed;
	top: 10px;
	right: 10px;
	padding: 0;
}
 
/*チェックボックス等は非表示に*/
.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: 220px;
	/*最大幅（調整してください）*/
	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;
	display: inline-block;
	width: 100%;
	color: #000;
	font-size: 1em;
	padding: 0.2em 0;
	margin: 0 10px;
	text-align: center;
	font-weight: 100;
	text-decoration: none;
	font-weight: 600;
}

#nav-content li.yellow a:hover,
#nav-content li a:active {
	color: #02bccb;
	background-color:yellow;
	margin: 10px;
	border-radius: 20px 0 0 20px;
}

* {
	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;
}

#rule #management span {
	color: #000;
}

.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_raremetal.png) 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 dd.desc_metal::before {
	content: none;
}

#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: 15em;
		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_raremetal.png) 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 dd.desc_metal {
		padding-bottom: 12em;
		background: url(../image/course_raremetal.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;
}
}

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