@charset "utf-8";
/* CSS Document */

/* SmartPhone用設定
------------------------------------------------------------------- */
@media screen and (min-width: 320px) and (max-width: 767px) {
  



/* modal menu
--------------------------------------------------------------------*/

#modal {
	width: 140px;
  height:auto;
	z-index: 20;
	background: #333;
	padding: 8px 0 20px;
	display:none;
}
#modal ul {
	margin: 10px 0 0;
	border-top: 1px dotted #666;
}
#modal li {
	margin: 0px;
	padding: 15px 0 15px 8px;
	border-bottom: 1px dotted #666;
	color: #666;
}
#modal li a {
	display: block;
	color: #FFF;
}
#modal p a {
	background: #CCC;
	color: #333;
	font-weight: bold;
	padding: 5px 10px;
	border: none;
	text-align:center;
	display:block;
}
#pageslide {
    /* These styles MUST be included. Do not change. */
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 9999;
    overflow:scroll;
    
    /* Specify the width of your pageslide here */
    width: 140px;
    padding: 0 20px;
    
    /* These styles are optional, and describe how the pageslide will look */
    background-color: #333;
    color: #FFF;
    -webkit-box-shadow: inset 0 0 5px 5px #222;
    -moz-shadow: inset 0 0 5px 5px #222;
    box-shadow: inset 0 0 5px 5px #222;
}

.m_menuBtn {
  position:absolute;
  top:10px;
  right:0px;
  display:block;
  width:30px;
  height:25px;
  margin:13px 10px 0 0;
}
.fixed .m_menuBtn {
  top:0px;
}

.m_joinBtn {
  width: 100px;
	height: 25px;
  display:block;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 500;
  font-size:108%;
  position:absolute;
  top:23px;
  right:50px
}
.m_joinBtn a {
  width: 100px;
	height: 26px;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
	border-radius: 4px;
	background-color: #ff6600;
}
.fixed .m_joinBtn {
  top:13px;
}

/* header
--------------------------------------------------------------------*/
.globalMenu,
.subMenu,
#pageTop,
.joinBtn,
.scrollBtn
 {
  display:none;
}


#headerArea {
  width:100%;
  height:60px;
}
#headerArea h1 {
  text-align:center;
}

.emblem {
  left:10px;
}
.emblem img {
  width:100px;
  height:auto;
  left:10px;
}


.fixed .logo {
  top:5px;
  left:10px;
}
.fixed .logo img {
  width:65px;
  height:auto
}

.fixed #headerArea {
  height:50px;
}

#visualBlock {
  height:50%;
}


.sponcerArea {
  width:100%;
  height:auto;
  display:block;
  text-align:center;
}
.sponcerArea ul {
  width:100%;
  display: flex;
  display:-webkit-box;/*--- Androidブラウザ用 ---*/
  display:-ms-flexbox;/*--- IE10 ---*/
  display: -webkit-flex;/*--- safari（PC）用 ---*/
  justify-content: center;
  -webkit-justify-content: center;/*--- safari（PC）用 ---*/
  flex-wrap:wrap;
  padding:0 0 8px
}
.sponcerArea li {
  padding:8px 0 0;
  height:auto;
  width:100%;
}
.sponcerArea li h2,
.sponcerArea li p {
  width:100%;
  height:auto;
  display:block;
  vertical-align:middle;
  text-align:center;
}


/* footer
--------------------------------------------------------------------*/
#footerArea {
  background-color: #574c3a;
  color:#FFF;
  width:100%;
  min-width:100%;
}
.footerBlock {
  width:auto;
  padding:10px; 
}
.footerBlock a {
  color:#FFF;
}
.footerBlock h2 {
  width:100%;
  float:left;
  padding:10px 0 10px;
  line-height:1.3em;
}
.footerBlock ul {
  float:none;
}
.footerBlock li {
  float:left;
  background-image:url(../../common/images/arrow_s.png);
  background-repeat:no-repeat;
  background-position:0px 1px;
  padding:0 30px 5px 13px;
}
.copyright {
  text-align:left;
}




/* secondly
--------------------------------------------------------------------*/


#contentsArea {
  padding:10px;
}
.copyBlock {
  width:100%;
  max-width:1000px;
  margin:0 auto;
}
.copyBlock h2 {
  text-align:left;
  padding:0 0 5px;
}
.copyBlock p {
  text-align:center;
  font-size:108%;
  line-height:1.5em;
  text-align:left;
}


#specArea {
  padding:10px;
}
.specBlock {
  display: block;
}
.imgspecBox {
  width:100%;
}
.imgspecBox img {
  width:100%;
  height:auto;
  margin:20px 0 0;
}
.specBox {
  width:100%;
}

.specBox dt {
  width:100px;
}
.specBox dd {
  width:80%;
  line-height:1.4em;
  padding:8px 0;
}
.bbottom {
  border-bottom:#666 dotted 1px;
  margin-bottom:20px;
}