@charset "utf-8";

/* =============================================================================
    Decoration
============================================================================= */

/* Html
============================================ */
html {
  line-height: 1.6;
}

/* Body
============================================ */
/*
body {
  background: #000;
}

body.bakko {
  background: #ff0000;
}
*/

h1 {
  padding: 0 0 10px;
}

img {
  max-width: 100%;
}

ul.link {
  margin: 0 10px;
  padding: 0 0 20px;
}

ul.link li {
  margin: 0 0 10px;
  text-align: center;
}


/* Header
============================================ */
div#header h1,
p#logo {
  padding: 12px 0 0;
}

body.bakko div#header h1,
body.bakko p#logo {
  padding: 0;
}

ul#mode {
  margin: 20px 0 10px;
  text-align: center;
}

ul#mode li {
  display: inline;
  margin: 0 10px;
}

p#utchariBanner {
  margin: 20px 0 10px;
  text-align: center;
}

ul#nav {
  display: none;
}

form#navSelect {
  margin: 0 10px 30px;
}

form#navSelect select {
  -moz-appearance: button;
  -webkit-appearance: button;
  appearance: button;
  width: 100%;
  line-height: 40px;
  background: #e6e6e6;
}

div.linkBox h2 {
  margin: 0 0 10px;
}


/* index page
-------------------------------------------- */
div.section h2 {
  margin: 0 10px 5px;
}

/* ====== News ====== */
div#indexTop {
  margin: 0 10px 30px;
}

dl#news {
  overflow-y: auto;
  height: 300px;
  padding: 0 5px;
  border: 1px #b3b3b3 solid;
  font-size: 85%;
  background: url(../image/smp_guy_back_dragon.jpg) no-repeat 10px 5px;
}

body.bakko dl#news {
  background: url(../image/smp_bakko_back_dragon.jpg) no-repeat 14px bottom;
}

dl#news dt {
  margin: 5px 0 0;
  border-bottom: 1px #000 dotted;
}

dl#news dd {
  margin: 2px 0 0 3px;
  padding: 0 0 5px;
}
img.newsImage {
	margin-bottom: 5px;
	border: 1px solid #E2E2E2;
	padding: 5px;
	background-color: #ffffff;
}

/* ====== SNS ====== */
div.blogBox {
  margin: 0 10px;
}

div.blogBox h3 img {
  width: 100%;
}

div.blog {
  margin: 0 0 30px;
}

div.blog dl {
  overflow-y: auto;
  height: 200px;
  padding: 0 5px;
  border: 1px #b3b3b3 solid;
  border-top: none;
  font-size: 85%;
  background: url(../image/smp_guy_back_dragon.jpg) no-repeat 10px 5px;
}

body.bakko div.blog dl {
  background: url(../image/smp_bakko_back_dragon.jpg) no-repeat 14px bottom;
}

div.blog dt {
  margin: 5px 0 0;
  border-bottom: 1px #000 dotted;
}

div.blog dd {
  margin: 2px 0 0 3px;
  padding: 0 0 5px;
}

div.facebook {
  margin: 0 10px 30px;
  border: 1px solid #e6e6e6;
}

div.facebook .fb_iframe_widget,
div.facebook .fb_iframe_widget span,
div.facebook .fb_iframe_widget iframe[style] {
  width: 100% !important;
  height: 400px !important;
}

div.twitterBox {
  display: flex;
  flex-direction: column;
}

div.twitter {
  margin: 0 10px 30px;
}

div.twitter > iframe {
  /* iPhoneバグ対応。iframeが勝手に大きくなるので、スマホ表示最大の480px+1pxを指定。max-widthで無効化されて100%サイズで表示される。 */
  width: 481px !important;
  vertical-align: bottom;
}

body.bakko div#tweetOtoko {
  order: 2;
}

body.bakko div#tweetBakko {
  order: 1;
}

dl#bannerUtchariSchedule > dd {
  margin: 0 10px;
}


/* ------ side ------ */
div#sideContents {
  padding: 30px 0 0;
}

div#sideContents h2 {
  margin: 0 10px 5px;
}

div#sideContents div.youtube {
  margin: 0 10px 30px;
}

div#sideContents div.youtube iframe {
  width: 100%;
  height: 264px;
}

div#sideContents div.youtube iframe.shortfilm {
  height: 200px;
}

div#sideContents div.product {
  margin: 0 10px 30px;
}

div#sideContents div.product dl,
div#sideContents div.product ul {
  font-size: 85%;
  text-align: center;
}

div#sideContents div.product dt {
  margin: 10px 40px 5px;
  border-bottom: 1px #000 dotted;
  font-weight: bold;
}

div#sideContents div.product dt.image {
  border: none;
}

div#sideContents div.product dd,
div#sideContents div.product li {
  padding: 0 0 25px;
}

div#sideContents div.product p.button {
  margin: 5px 0 0;
}

div#sideContents p.buttonAll {
  margin: 5px 0 0;
  text-align: center;
}

/* schedule page
-------------------------------------------- */
/* ====== scheduleTop ====== */
div#scheduleTop {
  margin: 0 10px 30px;
}

div#scheduleTop table,
div#scheduleTop tbody,
div#scheduleTop tr {
  display: block;
}

div#scheduleTop table {
  padding: 0 0 10px;
}

div#scheduleTop thead {
  display: none;
}

div#scheduleTop th,
div#scheduleTop td {
  list-style: none outside;
  display: list-item;
}

div#scheduleTop th {
  margin: 0 0 2px;
  border-top: 1px solid #000;
  border-bottom: 3px double #000;
  background: #e8e6d7;
}

div#scheduleTop td.name {
  margin: 0 0 2px;
  border-bottom: 1px dotted #000;
  text-align: center;
  font-weight: bold;
}

div#scheduleTop td {
  margin: 0 0 30px;
}


div#scheduleTop table dt {
  float: left;
  margin: 0 0.5em 0 0;
}

div#scheduleTop table dd {
  margin: 0 0 0 6.5em;
}

/* ====== scheduleOne ====== */
div#scheduleOne {
  margin: 0 10px 30px;
}

div#scheduleOne h2 {
  margin: 0 0 2px;
  padding: 2px;
  border-top: 1px double #000;
  border-bottom: 3px double #000;
  font-weight: bold;
  background: #e6e6e6;
}

div#scheduleOne dl {
  margin: 0 0 25px;
}

div#scheduleOne dt {
  padding: 0 2px;
  border-bottom: 1px dotted #000;
}

div#scheduleOne dd {
  padding: 0 2px 5px;
}

/* news page
-------------------------------------------- */
div#news dl {
	margin: 20px;
}
div#news dt {
	border-left: 5px solid #dfdfdf;
	padding-left: 8px;
}

div#news dd {
	padding-left: 50px;
	border-bottom: dotted 1px #dfdfdf;
	font-size: 85%;
	margin-bottom: 10px;
}


/* introduce page
-------------------------------------------- */
div#introduce {
  padding: 0 0 20px;
}

div#introduce p.leftImage {
  margin: 0 10px 30px;
}

div#introduce img.bottom {
  /*width: 91%;*/
}

div#introduce div.article {
  margin: 0 10px 10px;
}

div#introduce div.article h2 {
  margin: 0 0 2px;
  border-bottom: 3px double #000;
  font-weight: bold;
}

div#introduceBox p.leftImage {
  text-align: center;
}

div#introduceBox h2 {
  margin: 0 0 5px;
  text-align: center;
}

div#introduceBox dl.profile {
  width: 256px;
  margin: 0 auto 25px;
}

div#introduceBox dl.profile dt {
  margin: 0 20px 2px;
  padding: 0 0 0 2px;
  border-bottom: 1px solid #000;
  font-weight: bold;
}

div#introduceBox dl.profile dd {
  margin: 0 20px;
  padding: 0 0 5px 2px;
}


/* operating page
-------------------------------------------- */
div#operating div.thanks {
  margin: 20px 0 50px 35px;
}
div#operating div.thanks div.thanksName {
	text-align: center;
}


/*
div#operating ul.thanks {
  margin: 0 0 0 35px;
}

div#operating ul.thanks li {
  float: left;
  padding: 0 10px;
}


/* utchari talk page
-------------------------------------------- */

ul#pageNav li {
	background: url(../image/utchari_nav.gif) no-repeat left center;
	padding-left: 25px;
	margin-bottom: 1em;
}

div#utchari p.image {
  margin: 0 0 30px;
  text-align: center;
}

div#utchari div.section {
  margin: 0 0 30px;
}

div#next dl.nextPerformance {
}

div#next dl.nextPerformance > dt {
  text-align: center;
  margin: 0 10px 30px;
}

div#next dl.nextPerformance > dd.infomation {
  padding: 10px 20px;
  background-color: #eae7e0;
  margin: 0 10px 30px;
}

div#next dl.nextPerformance > dd.infomation h3 {
  margin-bottom: 10px;
}

div#next dl.nextPerformance > dd.infomation dl dt {
  float: left;
  clear: both;
}

div#next  dl.nextPerformance > dd.infomation dl dd {
  margin: 0 0 0 5em;
}

div#next dl.nextPerformance > dd.banner {
	text-align: center;
}

div#next dl.nextPerformance > dd.banner p {
	padding: 0 0 10px;
	display: inline-block;
}

div#past div.history {
  margin: 0 10px 10px;
  background-color: #eae7e0;
}

div#past div.history div dl {
  padding: 20px 10px;
}

div#past div.history dd {
  margin: 0 0 1em 1em;
}

div#past  p.moreBtn {
  text-align: center;
}

div#past #closeButton {
  display: none;
}
div#contact ul.outsideContent {
  text-align: center;
  margin: 0 10px 30px;
}

div#contact ul.outsideContent li {
  text-align: center;
  margin: 0 10px 10px;
}

div#contact ul.outsideContent li.twitter {
  height: 350px;
  text-align: left;
  margin: 0 30px 10px 5px;
}

div#contact ul.outsideContent li.twitte iframe {
  width: 100% !important;
  vertical-align: bottom;
}

div#contact ul.outsideContent li p.business {
	border: 1px #aaa solid;
	text-align: center;
	padding: 5px 10px;
  margin: 0 10px 30px;
}

div#magazine div.threecollumn dl {
	overflow: hidden;
	margin: 0 10px 10px;
}

div#magazine div.threecollumn dt {
	margin-right: 5px;
  text-align: center;
  margin: 0 0 10px;
}
div#magazine div.threecollumn dd {
	display: block;
	font-size: 88%;
  text-align: center;
  margin: 0 0 30px;
}
div#magazine div.threecollumn dd a {
	font-size: 16px;
}

/* column page
-------------------------------------------- */
div#column div.section {
  margin: 0 10px;
  padding: 0 0 30px;
  background: rgba(255, 255, 255, 0.8) url(../image/column_back.gif) no-repeat right bottom;
}

div#column h2 {
  margin: 0 0 10px;
}

div#column p.column {
  font-size: 85%;
}
p#columUpdate {
	background: #000;
	padding:5px;
	width: 180px;
	text-align: center;
	color: #fff;
	font-size: 80%;
	font-weight: bold;
}
p.columnDetail {
  margin: 0 10px;
  font-size: 70%;
}
div#column div#backnumber {
	margin: 0 10px;
  padding: 0 0 10px;
}
div#column div#backnumber ul li {
	margin: 3px 20px;
	border-left: 5px solid #dfdfdf;
	padding: 0 8px;
	font-size: 85%;
}



/* Footer
============================================ */
ul#footerSite {
  display: table;
  width: 100%;
  margin: 0 0 30px;
}

ul#footerSite li {
  display: table-cell;
}

ul#footerSite a {
  display: block;
  overflow: hidden;
  margin: 0 auto;
  text-indent: 100%;
  white-space: nowrap;
  width: 50px;
  height: 50px;
}

li#footerCotact a {
  background: url(../image/footer_icon_mail.gif) no-repeat;
  background-size: contain;
}

li#footerPolicy a {
  background: url(../image/footer_icon_policy.gif) no-repeat;
  background-size: contain;
}

li#footerOperating a {
  background: url(../image/footer_icon_company.gif) no-repeat;
  background-size: contain;
}

ul#footerSns {
  text-align: center;
}

ul#footerSns li {
  float: left;
  line-height: 1;
  vertical-align: top;
  padding: 0 3px;
}

ul#footerSns li iframe {
  margin: 0 0 10px;
}

ul#footerSns li iframe.twitter-share-button {
  width: 105px!important;
}