/*  Page portrait(縦向き) CSS */

/**************************************************
全称セレクターのスタイル
***************************************************/
* {
	margin: 0px;
	padding: 0px;
	font-family: 'Hiragino Kaku Gothic ProN',meiryo,MS PGothic,Arial,sans-serif;
	-webkit-text-size-adjust: none; /*safariでフォントサイズの自動リサイズを無効化*/
}
body {
  margin: 0px; padding: 0px;
}
div.wrap {
	margin: 0px auto;
	/*width: 320px;*/
	width: 100%;
}
a {
	color: #F85302;
	text-decoration: none;
}
a,
img {
	border: none;
}
ul {
	list-style: none;
}
img.emoticon {
	height: 1em;
	vertical-align: middle;
}
h1, h2, h3 {
	font-size: 1em;
	font-weight: normal;
	margin: 0;
}

/**************************************************
footer関係のスタイル
***************************************************/
footer {
	text-align: center;
	border-top: 1px solid #BBB;
	margin-top: 8px;
}
footer p.powered {
	line-height: 1em;
	font-size: 80%;
}
footer p.copyright {
	line-height: 1em;
	color: #666;
	padding-top: 3px;
	margin-top: 3px;
	font-size: 60%;
}


/**************************************************
テキスト、画像、リンクを包むインラインブロックのスタイル
***************************************************/
span.ibox, a.ibox {
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  word-wrap: break-word;
}

/**************************************************
メイン画像(画像ブロック）のスタイル
***************************************************/
#comp3.main {
    background: -webkit-gradient(linear, left top, left bottom, from(#159847), to(#01712C));
	padding: 15px 0px;
}


/**************************************************
タイトルブロックのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-title h1 {
	background: -webkit-gradient(linear, left top, left bottom, from(#1FC860), to(#0B9D43));
	font-size: 100%;
}
.bk-title h1 span {
	background: url(../../pub-ios/img/bg-slash-white.png) left bottom repeat-x;
	color: #FFF;
	display: block;
	text-align: center;
	text-shadow: 1px 1px 2px #000;
	padding: 4px 6px;
}

.bk-title h2 {
	background: -webkit-gradient(linear, left top, left bottom, from(#1FC860), to(#0B9D43));
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
	text-shadow: 1px 1px 2px #000;
	width: 306px;
	padding: 3px 6px;
	color: #FFF;
	margin: 8px 0px 0px 0px;
	font-size: 95%;
}

.bk-title h3 {
	background: url(../../pub-ios/img/li-arrow3.gif) 4px center no-repeat;
	padding-left: 18px;
	font-size: 95%;
	width: 302px;
	color: #0B9D43;
}


/**************************************************
文章ブロックのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-text p {
	margin: 4px;
	font-size: 90%;
}


/**************************************************
画像ブロックのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-image img {
    display: block;
	margin: 0px auto;
}
#comp3.bk-image p {
    text-align: center;
	margin: 0px auto;
	font-size: 80%;
}


/**************************************************
リンクブロックのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-link .align-left {
	text-align: left;
}
.bk-link .align-center {
	text-align: center;
}
.bk-link .align-right {
	text-align: right;
}
.bk-link a.button {
	font-size: 80%;
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	border: 1px solid #888;
	padding: 8px 0px 4px 8px;
	text-decoration: none;
	display: inline-block;
	width: auto;
	margin: 0px 2px 5px auto;
}
.bk-link a.button span.button-arrow-none {
	display: inline-block;
	padding-right: 8px;
	width: auto;
	font-weight: bold;
}
.bk-link a.button span.button-arrow-right {
	background: url(../../pub-ios/img/li-arrow-right1.png) center right no-repeat;
	padding-right: 28px;
	display: inline-block;
	width: auto;
	font-weight: bold;
}
.bk-link a.button span.button-arrow-up {
	background: url(../../pub-ios/img/li-arrow-up1.png) center right no-repeat;
	padding-right: 28px;
	display: inline-block;
	width: auto;
	font-weight: bold;
}
.bk-link a.button span.button-arrow-down {
	background: url(../../pub-ios/img/li-arrow-down1.png) center right no-repeat;
	padding-right: 28px;
	display: inline-block;
	width: auto;
	font-weight: bold;
}
.bk-link a.big-button {
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	 from(rgba(1, 100, 250, 0.6)),
	 to(rgba(1, 100, 250, 0.9)),
	 color-stop(.5,rgba(1, 100, 250, 0.9)),
	 color-stop(.5,rgba(1, 100, 250, 1.0)));
	display: inline-block;
	padding: 8px 12px 6px 12px;
	vertical-align: super;
	text-align: center;
	margin: 8px auto;
	color: #FFF;
	font-weight: bold;
	border: none;
}


/**************************************************
見出し＋文章＋画像+リンクのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-title-image-comment-link table {
	width: 320px;
}
.bk-title-image-comment-link td.img-box {
	vertical-align: top;
}
.bk-title-image-comment-link td.comment-link-box {
	vertical-align: top;
	padding: 0px 0px 0px 5px;
}
.bk-title-image-comment-link td.img-box {
	width: 100px;
}
.bk-title-image-comment-link td.img-box img {
	display: block;
	width: 100px;
}


/**************************************************
区切り線ブロックのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-border hr {
	border-width: 1px 0px 0px 0px;
	border-style: dotted;
	border-color: #666;
	height: 1px;
}


/**************************************************
*電話番号リンクブロックのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/

.bk-tel-link {
	margin: 4px 8px;
   /zoom:1;
}
.bk-tel-link:after {
   content:'';
   display:block;
   clear:both;
}
.bk-tel-link a {
	line-height: 32px;
	font-weight: bold;
	vertical-align: top;
	margin: 0px 8px;
}
.bk-tel-link a img {
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	 from(rgba(248, 83, 2, 0.6)),
	 to(rgba(248, 83, 2, 0.9)),
	 color-stop(.5,rgba(248, 83, 2, 0.9)),
	 color-stop(.5,rgba(248, 83, 2, 1.0)));
	display: block;
	width: 32px;
	height: 32px;
	float: left;
	margin-right: 5px;
}
.bk-tel-link a span.telnum {
	line-height: 24px;
	font-weight: bold;
	font-size: 130%;
	margin-top: 5px;
	display: block;
	float: left;
}


/**************************************************
メールリンクブロックのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-mail-link {
	margin: 4px 8px;
   /zoom:1;
}
.bk-mail-link:after {
   content:'';
   display:block;
   clear:both;
}
.bk-mail-link a {
	line-height: 32px;
	font-weight: bold;
	vertical-align: super;
	margin: 0px 8px;
}
.bk-mail-link a img {
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	 from(rgba(248, 83, 2, 0.6)),
	 to(rgba(248, 83, 2, 0.9)),
	 color-stop(.5,rgba(248, 83, 2, 0.9)),
	 color-stop(.5,rgba(248, 83, 2, 1.0)));
	display: inline-block;
	width: 32px;
	height: 32px;
	float: left;
	margin-right: 5px;
}
.bk-mail-link a span.mailaddress {
	line-height: 32px;
	font-weight: bold;
	font-size: 100%;
	float: left;
}


/**************************************************
改行ブロックのスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-br br {
	line-height: 0em;
}


/**************************************************
子ページの一覧のスタイル(他のブロック内で使用する時のスタイル)
***************************************************/
.bk-child-page-list table.vertical td {
	-webkit-border-radius: 3px;
	border: 1px solid #888;
}
.bk-child-page-list table.vertical div.list {
    margin:0;
    border-top:1px solid #ffffff;
    border-bottom:1px solid #aaaaaa;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
}
.bk-child-page-list table.vertical a.link-name {
    display:block;
    font-weight:bold;
    line-height:1.3;
    background: url(../../pub-ios/img/li-arrow-right1.png) no-repeat right center;
    padding:8px 40px 8px 10px;
	overflow: hidden;
}
.bk-child-page-list table.vertical a.link-name img.thum {
    display: block;
	float: left;
	max-width: 90px;
	max-height: 46px;
	margin-right: 7px;
	margin-bottom: auto;
	overflow: hidden;
}
.bk-child-page-list table.vertical span.link-comment {
    padding-left: 3pt;
    color:#4b4b4b;
    font-size: 80%;
    font-weight:normal;
    display: table;
}


/**************************************************
フォーム関係(共通スタイル)
***************************************************/
form div.form-wrap {
	-webkit-border-radius: 5px;
	border: 1px solid #aaa;
	margin: 0px 2px 0px 2px;
}
form input {
	-webkit-border-radius: 4px;
	padding: 3px;
	margin: 0px 4px;
	font-size: 1em;
}
form textarea {
	margin: 0px 4px;
	font-size: 1em;
}
form div.form-control-btn {
	text-align: center;
	margin-top: 12px;
}
form div.form-control-btn input.control-btn {
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	 from(rgba(1, 100, 250, 0.6)),
	 to(rgba(1, 100, 250, 0.9)),
	 color-stop(.5,rgba(1, 100, 250, 0.9)),
	 color-stop(.5,rgba(1, 100, 250, 1.0)));
	display: inline-block;
	padding: 8px 12px 6px 12px;
	vertical-align: super;
	margin: 0px auto;
	color: #FFF;
	font-weight: bold;
	border: none;
}
form div.form-control-btn input.control-btn.w40p {
	width: 40%;
}

form select {
	-webkit-border-radius: 4px;
	border: 1px solid #999;
	margin: 0px 4px;
	font-size: 1em;
}
form span.font-red {
	color: #ff0000;
	font-weight: bold;
}


form .field-block {
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#dedede));
	border-top: 1px solid #fff;
	border-bottom: 1px solid #bbb;
	padding: 10px;
}
form .field-block:first-child {
	border-top:1px solid #fff;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
}
form .field-block:last-child {
	border-bottom: none;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
}
form .field-title {
	font-weight: bold;
	text-shadow: 1px 1px #fff;
	background: url(../../pub-ios/img/li-blue.gif) left center no-repeat;
	padding-left: 8px;
}
form .field-value {
	margin: 15px 0px 5px 0px;
}
form .field-value .radio-list {
	margin-top: 1em;
	line-height: 1.8em;
}
form p.annotation {
	font-size: 90%;
	margin-bottom: 0.5em;
	margin-left: 4px;
}
form span.field-sub-caption {
	margin-left: 4px;
}
form textarea.liquidwidth {
	width: 98%;
	border: 1px solid #999;
	-webkit-border-radius: 4px;
}
form label.checkbox {
	width: auto;
	display: block;
	padding: 5px 0px;
	margin-bottom: 8px;
}
form input[type="number"]::-webkit-outer-spin-button,
form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
form input[type="number"] {
    -moz-appearance:textfield;
}
form input.zip1 {
	width: 3em;
}
form input.zip2 {
	width: 4em;
}

/**************************************************
会員登録
***************************************************/
.shop-name p {
	text-align: center;
	font-size: 80%;
	border-bottom: 1px solid #CCC;
	margin-bottom: 7px;
}
form.useradd-form div.form-control-btn input.control-btn {
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	 from(rgba(1, 100, 250, 0.6)),
	 to(rgba(1, 100, 250, 0.9)),
	 color-stop(.5,rgba(1, 100, 250, 0.9)),
	 color-stop(.5,rgba(1, 100, 250, 1.0)));
	display: inline-block;
	padding: 8px 12px 6px 12px;
	vertical-align: super;
	margin: 0px auto;
	color: #FFF;
	font-weight: bold;
	border: none;
}
form.useradd-form .field-title {
	font-weight: bold;
	text-shadow: 1px 1px #fff;
	background: url(../../pub-ios/img/li-blue.gif) left center no-repeat;
	padding-left: 8px;
}
form.useradd-form p.annotation {
	font-size: 90%;
	margin-bottom: 0.5em;
	margin-left: 4px;
}
form.useradd-form span.field-sub-caption {
	margin-left: 4px;
}
.bk-title h1 {
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	margin-bottom: 4px;
}
.bk-title h1 span {
	background: url(../../pub-ios/img/bg-slash-white.png) left bottom repeat-x;
	color: #2974FE;
	display: block;
	text-align: center;
	text-shadow: none;
	padding: 8px 6px;
}
form.useradd-form .bk-title h2 {
	margin: 10px 0px 4px 0px;
	background: -webkit-gradient(linear, left top, left bottom, from(#4C8BFF), to(#2974FE));
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	border: 1px solid #888;
	border-bottom: 3px solid #2974FE;
	color: #333;
	text-shadow: none;
}
.bk-link a.button {
	color: #2974FE;
}

div.link-button {
	text-align: center;
	margin: 8px auto;
}
div.link-button a {
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	 from(rgba(1, 100, 250, 0.6)),
	 to(rgba(1, 100, 250, 0.9)),
	 color-stop(.5,rgba(1, 100, 250, 0.9)),
	 color-stop(.5,rgba(1, 100, 250, 1.0)));
	display: inline-block;
	padding: 8px 12px 6px 12px;
	vertical-align: super;
	margin: 0px auto;
	color: #FFF;
	font-weight: bold;
	border: none;
}

/**************************************************
アンケートフォーム
***************************************************/
.bk-title h1.enquete {
	background: -webkit-gradient(linear, left top, left bottom, from(#F74D55), to(#E33D44));
	margin-bottom: 4px;
}
.bk-title h1.enquete span {
	background: url(../../pub-ios/img/bg-slash-white.png) left bottom repeat-x;
	color: #FFF;
	display: block;
	text-align: center;
	text-shadow: none;
	padding: 8px 6px;
}
form.enquete-form .field-title {
	font-weight: bold;
	text-shadow: 1px 1px #fff;
	background: url(../../pub-ios/img/li-question.gif) left center no-repeat;
	padding-left: 20px;
}
form.enquete-form div.form-control-btn input.control-btn-red {
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	 from(#F74D55),to(#E33D44),
	 color-stop(.5,#E33D44),
	 color-stop(.5,#F74D55));
	color: #FFF;
	font-weight: bold;
	border: none;
	padding: 3px 6px;
}
div.enquete-message {
	border: 1px solid #BBB;
	border-left: 3px solid #F74D55;
	padding: 4px;
	margin: 5px 0px;
	min-height: 30px;
}
form.enquete-form div.field-value ul.multi-select {
	margin-left: 20px;
}
form.enquete-form div.field-value ul.multi-select li {
	list-style: circle outside;
}
div.link-button-red {
	text-align: center;
}
div.link-button-red a {
	-webkit-border-radius: 3px;
	-webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	 from(#E33D44),to(#F74D55),
	 color-stop(.5,#E33D44),
	 color-stop(.5,#F74D55));
	display: inline-block;
	padding: 8px 12px 6px 12px;
	vertical-align: super;
	margin: 0px auto;
	color: #FFF;
	font-weight: bold;
	border: none;
}

/**************************************************
ページの概要説明
***************************************************/
div.explanation-headline {
	background-color: #E6F2FF;
	-webkit-border-radius: 3px;
	border: 1px solid #BBB;
	padding: 4px;
	margin: 5px 0px;
}
div.explanation-headline p {
	background: url(../../pub-ios/img/li-arrowor-blue.gif) 0px 4px no-repeat;
	padding-left: 16px;
/*	min-height: 30px;*/
	min-height: 15px;
}
div.explanation-headline p span.font-red {
	color: #ff0000;
	font-weight: bold;
}

/**************************************************
エラー表示
***************************************************/
div.error-headline {
	background-color: #FFE6EC;
	-webkit-border-radius: 3px;
	border: 1px solid #ff0000;
	padding: 4px;
	margin: 5px 0px;
}
div.error-headline p {
	padding-left: 34px;
	background: url(../../pub-ios/img/ico-error.gif) 0px 0px no-repeat;
	min-height: 30px;
}
div.error-headline p span.font-red {
	color: #ff0000;
	font-weight: bold;
}

/**************************************************
処理完了メッセージ
***************************************************/
div.info-headline {
	background-color: #E6FFEA;
	-webkit-border-radius: 3px;
	border: 1px solid #00cc33;
	padding: 4px;
	margin: 5px 0px;
}
div.info-headline p {
	padding-left: 34px;
	background: url(../../pub-ios/img/ico-done.gif) 0px 0px no-repeat;
	min-height: 30px;
}

/**************************************************
動画閲覧
***************************************************/
#videoplayer-back {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
  background-color: #000000;
  color: #FFFFFF;
}

#videoplayer-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  text-align: center;
}

#videoplayer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#videoplayer-wrapper .thumbanner {
  height: 100%;
}

#videoplayer-wrapper .playicon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-40px;
  margin-top:-40px;
}

.mejs__qualities-button {
  margin-right: 2px;
}

img.small-play-btn {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: middle;
}
/**************************************************
パソコンでの表示時（横幅が1025px以上の場合）
***************************************************/
@media (min-width: 1025px) {
  body {
    width: 400px;
    margin: 0px auto;
    padding: 0px 16px;
    border: 1px solid #888;
  }
}