@charset "utf-8";
/* CSS Document */
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	line-height: 1.6;
font-family: "AxisStd-Regular" ,"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/*---original text color on this page ---*/

img {
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    width: 920px;
}

.sp-only { display:none;}

/*--------------------------------------*/
.ttl h2 {
	border:4px solid #000000;
	border-left:8px solid #000000;
	box-sizing:border-box;
	padding:5px;
	font-size:1.8rem;
	line-height:1.2 !important;}
.mds {font-size:1.6rem; font-weight:bold; margin-bottom:20px;}
.pic-l{
	float: left;
	margin: 0px 10px 5px 0px;
	width:150px;}
.item { overflow:hidden;}


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

/*--------------------------------------*/
.button {
  position: relative;
  display: inline-block;
  padding: 1rem;
  background-color: #ffff00;
  border: 4px solid #333;
  color: #333;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  font-size:1.35rem;
  line-height:1.2;
  margin:0;
  width:100%;
  font-weight:600;
}
.button::before {
  position: absolute;
  top: 50%;
  left: .2em;
  content: '';
  margin-top: -10px;
  border: 14px solid transparent;
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-color: #333;
  transition: all .3s;
}
.button:hover {
  background-color: #efefef;
  color: #333;
}



.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

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

#main

-----------------------------------------------*/
.title { position: relative;}

.title .btn01 {
	position:absolute;
	width:290px;
	height:110px;
	top:260px;
	left:170px;
		z-index:2;}
.title .img02{
	position:absolute;
	width:468px;
	height:197px;
	bottom:0px;
	left:0px;
		z-index:1;}
.title .btn01 a:hover {
	opacity:0.5;}
.obo-list {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
overflow: hidden;}

.obo-list li {
	width: calc((100% / 4) - 10.1px);
	margin: 0px 5px 0px;
}
.obo-list li:nth-child(4n){ margin-right:0 !important;}





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

#応募要項

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

#section_obo-rule {
  margin: 0 auto 40px;
}
#section_obo-rule .inner {
  margin: 0 auto;
  padding: 40px 0px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 12px;
}

/*----------------------*/
	
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#section_obo-rule .inner table {
	border-collapse: collapse;
	margin-top:20px;
}
#section_obo-rule .inner table th,
#section_obo-rule .inner table td {
	padding: 10px 0px;
	border-bottom: 1px solid #cccccc;
	line-height:1.5em;}

#section_obo-rule .inner table th {
	width: 20%;
	text-align: left;
	vertical-align: top;
}
#section_obo-rule .inner table th h3{
text-indent: -2em;
  padding-left: 2em;}
.longurl{word-break: break-all;}
/***-----#審査員
-----------------------------------------------*/
#character{
/*	background-color: rgba(254,239,4,0.70);
	z-index: 1;*/
}

.member {display: flex;flex-wrap: wrap; padding-top: 20px;}

.member_box {
	width: calc((100% / 3) - 13.333px);
	margin: 0 20px 30px 0;
/*	background-color: rgba(0,0,0,0.30);*/
}
.member_box:nth-child(3n){ margin-right:0 !important;}

.name h3 {
	font-family: "AxisStd-bold";
	font-size: 130% !important;
	line-height:1.4!important;
}
.name h3 span {
	font-size: 14px !important;
	
	display: block;
}
.tvxt{padding: 0px;}
.tvxt p {
	padding-left: 0% !important;
	font-size: 84% !important;
}


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

# 動画

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

#section_movie {margin: 0 auto 40px;}


.good-member {display: flex;flex-wrap: wrap; }
.good-member li {
	width: calc((100% / 4) - 13.333px);
	margin: 0 10px 30px 0;
/*	background-color: rgba(0,0,0,0.30);*/

}
.good-member:nth-child(4n){ margin-right:0 !important;}

.ttl h2 span,
p.mds span,
.pagination ul li {
font-family: 'Righteous', cursive;
}

.red {
box-sizing:border-box;
border:solid 4px #F30;}
.gold {
	box-sizing: border-box;
	border: 4px solid #FC0;
}
.silver {
	box-sizing: border-box;
	border: 4px solid #CCC;
}
.copper {
	box-sizing: border-box;
	border: 4px solid #C66;
}
.name { font-weight:bold;}
.name span { font-size:1.8rem;}
.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}


.pagination {display: flex;flex-wrap: wrap; margin-top:30px;}
.pagination-box {
	width: calc((100% / 4) - 10px);
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;/*	background-color: rgba(0,0,0,0.30);*/
}
.pagination-box {
	font-size:1.4rem;
	text-align:center;
		border:solid 5px #CCC;
		 position: relative;
}
.pagination-box::before {
  position: absolute;
  top: 50%;
  left: .2em;
  content: '';
  margin-top: -10px;
  border: 14px solid transparent;
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-color: #333;
  transition: all .3s;
}
.pagination-box a {
	display:block;
		padding:20px;
	text-decoration: none;}
.pagination-box a:hover {
	background:#E9E9E9;}
.here{background:#E9E9E9;}
/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

/*～以下、画面の横幅が768pxまでの場合のスタイル記入～*/
}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px) {
	
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

.sp-only { display:block;}
.pc-only { display:none;}

.inner { width:100%; padding:3%;}	

.title { position:static;}
.title .btn01 {
	position:static;
	width:100%;
	height:auto !important;
}
.title .img02{
	position:static;
	width:100%;
	height:auto !important;
	}	
.obo-list li {
	width: calc((100% / 2) - 10.1px);
	margin: 0px 5px 0px;
}
.obo-list li:nth-child(2n){ margin-right:0 !important;}

#section_obo-rule  {
      margin-bottom: 68px;
    }
#section_obo-rule  .inner {
      width: 96%;
      min-width: initial;
      min-width: auto;
      min-height: initial;
      min-height: auto;

    }


#section_obo-rule  .inner table td {
    display: block;
	width: 100%;
  }
#section_obo-rule  .inner table th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 100%;
  }	
	
/***--------------------------------------------

#character

-----------------------------------------------*/
/*.character_inner{
		padding: 0 10px;
	}*/	
.member {padding-top: 0px;}
.member_box {
	width: calc((100% / 2) - 5px);
	margin: 0px 5px 20px 0;
}
.member_box:first-child{ width: calc((100%));}
.member_box:nth-child(3n){ margin-right:5px !important;}
.name h3 {
	height: auto;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	font-size: 14px;
}
	
.tvxt p{font-size: 13px;}	
.good-member li {
	width: calc((100%));
	margin: 0px 0px 20px;
/*	background-color: rgba(0,0,0,0.30);*/

}

/*--------------------------------------*/
.button {
  padding: .5em .5rem .5em 2rem;
  font-size:1.2rem;
}

/*--------------------------------------*/
.pagination-box {
		width: calc((100%) - 10px);
	margin:5px;
	font-size:1.2rem;}
.pagination-box a {padding:5px;}

}




/*スマホで見た時*/
  #pageTop {
    display: none;
    position: fixed;
    bottom: 150px;
    right: 0px;
	padding:10px;

    font-size: 13px;
	color: #fff;
	 text-decoration: none;
  text-align: center;
  font-weight: bold;
	  background: #000;
  }


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

/*--------------------------------------*/
.login-area{
margin-bottom:50px;
width: 100%;
position:relative;
margin-bottom:0px;
}
.login-area_txt{
	top:100px;
	width:100%;
	text-align:center;
	position:absolute;
  }
.login-area_txt p { font-size:28px; font-weight:800; color:#F00;}
.login-area img { width:100%;}

.login-area_btn {display: flex;flex-wrap: wrap; }

.login-area_btn li {
	width: calc((60%) );
	margin: 30px auto 0px;
	border: 5px solid #000000;
	box-sizing:border-box;

/*	background-color: rgba(0,0,0,0.30);*/
}
.login-area_btn li a {
display:block;
padding:20px;
background-color:#000000;
color:#ffffff;
text-decoration:none;
line-height:20px;
padding-left:3em;}
.login-area_btn li a:hover { background-color:#666666;}
.login-area_btn li a {
width:100%;
position: relative;
box-sizing:border-box;}
.login-area_btn li a::before
{
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
	margin-left: -3.5em;
  background-size: 20px 20px;
}
.login a::before {
	background-image: url(/images/moshi/mensetsu/icon-login.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.register a::before {
	background-image: url(/images/moshi/mensetsu/icon-register.png);
	background-repeat: no-repeat;
	background-position: left top;
}

/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media only screen and (max-width:599px) {
.login-area_txt{top:10%;}
.login-area_txt p { font-size:24px; text-align:left; ;}
.login-area_btn li {
	width: calc((100% ));
    margin: 5px auto 10px;}
/*	background-color: rgba(0,0,0,0.30);*/
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc-only  { display: block !important; }
.sp-only { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width:599px) {
.pc-only  { display: none !important; }
.sp-only { display: block !important; }
}