@charset "utf-8";

/*------------------------
 *       Globals
 --------------------------*/
html {
  margin:0;
  padding:0;
  font-size: 100%;

  /* 600px以降から、100pxごとに1px大きくなる*/
  @media (min-width: 600px) {
    font-size: calc(112.5% + 4 * (100vw - 600px) / 400)
  }

  /* 1,000px以上は、22pxに*/
  @media (min-width: 1000px) {
    font-size: calc(137.5%)
  }
}

body {
  width:100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background-image: url("/assets/images/contents/common/Mosaic-tile03-p.jpg");
  margin:0;
  padding:0;
  color:#777;
  line-height:1.6em;
  font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  text-rendering:optimizelegibility;
  text-align:center;
}

.container {
  width:100%;
  max-width:1024px;
  background:#fff;
  overflow:hidden;
  margin-bottom:20px;
  text-align:center;
}

.clearfix {
  clear:both;
}

.logo img{
  width:62%;
  height:auto;
  float:left;
}

.logo h1 {
  display:none;
}

h2 {
  text-align:center;
  border-bottom:solid 3px #777;
  font-family: 'Lato','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

h3 {
  text-align:left;
  border-bottom:solid 1px #777;
}

h4 {
  text-align:center;
  border-bottom:solid 2px #777;
}

.errorTitle {
  margin: 40px 0 20px;
  border: none;
  font-size: 150%;
  color: #000;
}


/*------------------------
 *       Rayout
 --------------------------*/
.logo {
  margin:0;
  padding:0;
  width:100%;
}

.navbar {
  margin:0;
  padding:0;
  width:100%;
}

.wrap {
  padding:15px;
  margin-bottom:20px;
}

.left {
  float:left;
  width:45%;
  margin-bottom:20px;
}

.right {
  float:right;
  width:45%;
  margin-bottom:20px;
}

/*------------------------
 *       Contents
 --------------------------*/

.line-left {
  padding:10px;
  text-align:left;
}

.line-right {
  text-align:right;
}

.line-center {
  text-align: center;
}

.basic {
  text-align:left;
  list-style-type:disc;
}

.comment {
  text-align:left;
  padding:10px;
}

.largeComment {
  margin: 30px 0;
  padding: 30px;
  border: 1px solid #999;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  font-size: 136%;
  text-align: center;
  font-weight: bold;
}

.bizComment {
  margin: 30px 0;
  padding: 30px;
  border: 1px solid #999;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  text-align: left;
  font-weight: bold;
}

br.pc {
  display: none;
}

@media only screen and (min-width: 790px) {
  .bizComment--center {
    text-align: center;
  }

  br.pc {
    display: block;
  }
}

.domainText {
  padding:10px;
}

.domain,
.priceBox {
  width:90%;
  padding:10px;
  margin: 15px auto;
  font-weight: 500;
  border: solid 1px #ccc;
  background: repeating-linear-gradient(-45deg, #EEF5FE, #EEF5FE 10px, #F8FBFF 0, #F8FBFF 20px);
  border-radius:3px;
}

.domain ol {
  padding-left: 20px;
}

.domain ol li {
  list-style-type: decimal;
  color: #666;
  padding-left: 0;
}

.price {
  font-size:1em;
  color:#999;
  margin:0 auto;
  margin-bottom:20px;
}

.sign {
  text-align:right;
  margin-right:20px;
}
.bold-txt {
  font-weight:bold;
}

.link-txt {
  color:#E06F9F;
}

.info {
  text-align:left;
  color:#666;
  padding:10px;

}

.inner-box.info {
  width: auto;
}

.inner-box.txt {
  margin-top: 60px !important;
  margin-bottom: 40px !important;
}

.info-sm {
  font-size:0.9em;
  color:#E06F9F;
  padding: 10px;
}
.infobox {
  text-align:center;
  padding:10px;
}

.inner-box {
  width:80%;
  margin:0 auto;
}

.inner-box.width-full {
  width: 97%;
}

.box {
  padding:10px;
  margin-bottom:15px;
  border: solid 1px #E06F9F;
  line-height:2em;
}
.box .bold-txt {
  color:#E06F9F;
  margin-top:0;
  border-bottom:dotted 1px #E06F9F;
}

.com-list {
  width:80%;
  margin:0 auto;
  padding:10px;
  font-size: 1em;
  text-align:left;
}

ol  {
  position: relative;
  margin:0;
  padding:0;
  text-align: center;
}

ol li  {
  text-align:left;
  list-style: none;
  list-style-position:outside;
  margin:0;
  color:#E06F9F;
  padding-left:1.25em
}
ol li span {
  position: absolute;
  left:0;
  margin:0
}

ul.basicList li {
  text-align: left;
}

/*IE6*/
*html ol li span  {
  left: -1.25em;
}

.main-img {
  width:100%;
  height:auto;
}

.flash-message {
  margin: 15px 20px 8px;
  padding: 15px 10px;
  border: 1px solid #e80;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  color: #e80;
  background-color: #fffae4;
  text-align: center;
}

.numberList {
  margin: 1em 10px 1em 2.6em;
  list-style-type: decimal;
}

.numberList li {
  margin-left: 0;
  padding-left: 0;
  list-style-type: decimal;
  color: #777;
}

.numberList > li + li {
  margin-top: 1em;
}

.numberList > li span {
  display: block;
  font-weight: bold;
}

.numberList > li > ul {
  margin-left: 1em;
  padding-left: 0;
  list-style-type: disc;
}

.numberList > li > ul > li {
  margin-left: 0;
  padding-left: 0;
  list-style-type: disc;
}

/*  */
.bracketList li {
  padding-left: 2.2em;
  position: relative;
  list-style-type: none;
  list-style-position: inside;
  counter-increment: cnt;
}

.bracketList li + li {
  margin-top: 0.3em;
}

.bracketList li:before {
  position: absolute;
  left: 0;
  display: marker;
  content: "(" counter(cnt) ") ";
}

.compactList {
  margin: 0;
}

.compactList::after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  font-size: 0;
  clear: both;
}

.compactList dt {
  float: left;
  clear: both;
  font-weight: bold;
}

.compactList dt::after {
  content: ":";
}

.compactList dd {
  margin-left: 0;
  padding-left: 0;
}

/*------------------------
 *       Table
 --------------------------*/
table {
  width:100%;
  border:0;
  margin:10px 0;
}

th {
  background-color:#777;
  color:#fff;
  text-align:center;
  padding:5px;
}

td {
  border-bottom:solid 1px #ccc;
  border-left:solid 1px #ccc;
  border-right:solid 1px #ccc;
  padding:8px;
}

.law-tbl {
  width:80%;
  margin:0 auto;
  border-spacing: 0px;
}
.law-tbl th {
  background-color:#eee;
  border:solid 1px #ccc;
  color:#777;
}

.law-tbl td {
  padding:20px;
  border:solid 1px #eee;
}

/*------------------------
 *       Q & A
 --------------------------*/

.question {
  width:100%;
}
.q-txt {
  color:#E06F9F;
  font-size:1em;
  font-weight:bold;
  text-align:left;
  text-indent:1em;
  border-bottom:dotted 1px #E06F9F;
}

.q-no {
  float:left;
  width:1.5em;
  height:1.5em;
  color:#fff;
  background-color:#E06F9F;
  border-radius:3px;
}

.answer {
  font-size:1em;
  text-align:left;
  padding-bottom:15px;
}


/*------------------------
 *       Form
 --------------------------*/
#frmarea {
  width: 80%;
  margin:0 auto;
  padding:20px 10px;
  text-align:center;
  background-color:#eee;
  display:block;
  border-radius:5px;
  border:solid 1px #ccc;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

@media only screen and (max-width: 460px) {
  #frmarea {
    width: 100%;
  }
}

#frmarea .message {
  border-top: 2px solid #dedede;
  border-bottom: 2px solid #dedede;
  margin: 20px 0;
  padding: 10px 0;
  background-color: #eeeeee;
  text-align: left;
}

@media screen and (max-width:340px) {
  #frmarea {
    width:100%;
  }
}

#frmarea.confirm-form .form_body {
  min-height: 25px;
  padding: 10px;
  background-color: white;
  color:#777777;
  font-size:1.8em;
}

#frmarea.confirm-form .form_body.textarea {
  text-align: left;
  font-size:1.2em;
}

input[type="text"],
input[type="date"] {
  width:90%;
  height:40px;
  display:table-cell;
  text-align:center;
  color:#777777;
  font-size:1.4em;
  font-weight:500;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

textarea {
  width:90%;
  height:150px;
  display:table-cell;
  color:#777777;
  border-color: #ccc;
  text-align:left;
  font-size:1.2em;
}

.label {
  text-align:left;
  text-indent:1em;
  font-weight:500;
  margin:15px 10px 0 10px;
}

input#submit_button {
  width:60%;
  margin:10px auto;
  padding: 8px 20px;
  text-align:center;
  border-radius:5px;
  background-color:#709FE0;
  color:#fff;
  font-size:1.3em;
}

input#submit_button:hover {
  background-color:#80B5FF;
}

/*------------------------
 *       Button
 --------------------------*/
.btn {
  width: 68%;
  padding: 0 6px;
  margin:20px auto;
  border-radius:5px;
  background-color:#709FE0;
  color:#fff;
  font-size: 14px;
  border: none;
  cursor: pointer;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.btn + h2 {
  margin-top: 50px;
}

button.btn {
  padding: 15px 20px;
}

.btn a,
.btn button {
  margin: 0;
  border: none;
  width: 100%;
  display: inline-block;
  padding: 15px 0;
  color:#fff;
  line-height:1.5em;
  text-decoration:none;
  background: none;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.btn:hover{
  background-color:#80B5FF;
}

/*------------------------
 *       SNS button
 --------------------------*/
.btn-box {
  z-index:99;
  top: 0;
  right: 0;
  position:absolute;
  margin: 15px 15px 0 0;
  text-align: right;
}

.sns {
  margin: 12px;;
}

.sns.one-button {
  margin-top: 32px;
}

.sns + .sns {
  margin-top: 3px;
}

.sns li{
  margin-top: 3px;
  list-style-type:none;
  color:#fff;
  font-size:1em;
  display:block;
  text-align:center;
  width:auto;
  padding:3px;
  border-radius:3px;
}

.sns li:first-child{
  margin-top: -7px;
}

.sns li:hover{
  -webkit-filter:brightness(1.5);
  -moz-filter:brightness(1.5);
  -ms-filter:brightness(1.5);
  filter:brightness(1.5);
  text-decoration:none;
}

.sns li a {
  color:#fff;
  text-decoration:none;
}

.sns li.mybtn {
  width:100px;
  background:#709FE0;
  color:#fff;
  margin-bottom: 10px;
}

.sns li.mybtn a {
  display: inline-block;
  height: 100%;
  width: 100%;
}

/*------------------------
 *    Navigation
 --------------------------*/
.navbar:after {
  content:"";
  clear:both;
  display:block;
}

.navbar ul {
  display:table;
  text-align:center;
  margin:0;
  padding:0;
  width:100%;
  max-width:1024px;
  font-weight: bold;
  background:#2a2c36;
}

.navbar li {
  display:table-cell;
  color:#2a2c36;
  width:25%;
  text-align:center;
  list-style-type:none;
}

.navbar li a {
  display:block;
  color:#fff;
  line-height:2em;
  text-decoration:none;
  background:#2a2c36;
}

.navbar li:nth-child(odd) a {
  display:block;
  color:#fff;
  line-height:2em;
  text-decoration:none;
  background-image: linear-gradient(
  -45deg,
  #2a2c36 25%,
  #55565f 25%, #55565f 50%,
  #2a2c36 50%, #2a2c36 75%,
  #55565f 75%, #55565f
  );
  background-size: 50px 50px;
}

.navbar li a .active {
  background:#999;
}

.nav-box {
  width:100%;
  background:#2a2c36;
}

/*------------------------
 *    midashi
 --------------------------*/

.midashi {
  background:none;
  border:none;
  font-family: 'Lato','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  letter-spacing: 1px;
}

.midashi p{
  display:block;
  border-bottom:#333 solid 2px;
}

.midashi p img{
  width:100%;
  min-width: 320px; /* 最小幅 */
}

.midashi span {
  display:none;
}

.navbar li a:hover {
  position: relative;
  margin-bottom: -3px;
  border-bottom: 3px solid #e06f9f;
  z-index: 10;
}

.navbar li a.underline_pink {
  position: relative;
  margin-bottom: -3px;
  border-bottom: 3px solid #e06f9f;
  z-index: 10;
}

/*------------------------
 *      article-box
 --------------------------*/
.article-title {
  color:#333;
  margin:0;
}

.bunner .photo {
  width:50%;
  float:left;
  margin-right:1em;
  margin-bottom:1em;
  min-width: 320px; /* 最小幅 */
}

p img {
  width:98vw;
}

/*------------------------
 *      comic
 --------------------------*/
.comic {
  margin: 0 auto;
  text-align:center;
  overflow:hidden;
}
.comic img {
  width:100%;
  border:solid 2px #777;
  margin-top:20px;
  max-width: 320px; /* 最大幅 */
}

/*------------------------
 *   Image-Article
 --------------------------*/
.photo-box {
  /*position:relative;*/
  overflow:hidden;
}

.photo-box ul {
  list-style-type:none;
  padding-left:0;
}

.photo-box ul li {

}
.inline {
  text-align:center;
}

.inline li {
  display: inline-block;
}

/*
.photo-box ul {
position:relative;
left:48%;
float:left;
}

.photo-box ul li {
position:relative;
float:left;
left:-50%;
margin-bottom:0.2%;
}
 */
.article {
  float:left;
  margin-left:1%;
  margin-bottom:1%;
  position:relative;
  overflow:hidden;
}

.article img {
  width:100%;
}

.article p {
  bottom:0;
  left:0;
  width:100%;
  height:1.5em;
  /* position:absolute; */
  text-align:center;
  color: #fff;
  margin: 0;
  padding: 3% 0;
  background: #000;
  filter: Alpha(opacity=100);
  opacity:0.6;
  -webkit-transition: .3s;
  transition: .3s;
}

.article p.name {
  display:block;
}
.article p.category {
  display:block;
  margin-bottom:0em;
}

.article a {
  text-decoration: none;
}
.article a:hover p.name{
  text-decoration: none;
  background: #4d2636;
  filter: Alpha(opacity=80);
  opacity: 0.8;
}

/*
.article a:hover p.name{
bottom:-40%;
padding:0;
padding-top:10px;
padding-bottom:40%;
text-decoration: none;
background: #4d2636;
filter: Alpha(opacity=100);
opacity: 1;
}

.article a:hover p.category {
display:block;
font-size:0.8em;
padding:0;
padding-bottom:5%;
text-decoration: none;
background: none;
filter: Alpha(opacity=100);
opacity: 1;
}
 */
/*------------------------
 *        Group
 --------------------------*/
.main-img {
  width:600px;
}

.member {
  position:relative;
  overflow:hidden;
}
/*
.member ul {
position:relative;
left:50%;
float:left;
}
 */
.member ul li {
  position:relative;
  /*left:-50%;
  float:left;*/
width:46vw;
max-width:240px;
height:auto;
}

.goods .img-list li a p,
.member .img-list li a p {
  -webkit-transition: .3s;
  transition: .3s;
}

.goods .img-list li a:hover p,
.member .img-list li a:hover p {
  background-color: #4d2636;
  filter: Alpha(opacity=80);
  opacity: 0.8;
}

.item-photo-wrap {
  padding-top: 100%;
  height: 0;
  position: relative;
  display: block;
  overflow: hidden;
}

.item-photo-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}

.goods {
  position:relative;
  overflow:hidden;
}
/*
.goods ul {
position:relative;
left:50%;
float:left;
}
 */
.goods ul li {
  position:relative;
  /*left:-50%;
  float:left;*/
width:46vw;
max-width:240px;
height:auto;
}

.img-list {
  list-style-type:none;
  padding-left:0;
}
.img-list li {
  list-style:none;
  margin:0.5%;
}

.img-list li .item-photo {
  display: table-cell;
  width: 240px;
  height: 240px;
  text-align: center;
  vertical-align: middle;
}

.img-list li img {
  width:100%;
  height:auto;
  max-width:240px;
  max-height:240px;
  vertical-align: middle;
}

.img-list p {
  bottom:0;
  left:0;
  width:100%;
  max-width:240px;
  line-height:1.2em;
  height:auto;
  position:absolute;
  text-align:center;
  color: #fff;
  margin: 0;
  padding: 3% 0 3% 0;
  background:#000;
}
.img-list li a {
  text-decoration:none;
}

/*------------------------
 *      NewIcon
 --------------------------*/
.article .ribbon {
  position:absolute;
  top:0;
  left:0;
  width:200px;
  height:30px;
  background: #ff035c;
  color:white;
  font-size:16px;
  line-height:2em;
  text-align:center;
  -webkit-transform: rotate(-45deg) translate(-60px,-50px);
  -moz-transform: rotate(-45deg) translate(-60px,-50px);
  -o-transform: rotate(-45deg) translate(-60px,-50px);
  transform: rotate(-45deg) translate(-60px,-50px);
}

.utaten_store_logo {
  background-image: url(/assets/images/contents/common/store_by_logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  margin: 20px auto;
  height: 30px;
  width: 150px;
}

.utaten_store_logo a {
  display: block;
  height: 100%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/*------------------------
 *      PageTop
 --------------------------*/
#pageTop {
  position: fixed;
  bottom: 0px;
  right: 10px;
  /*width:80px;
  height:80px;*/
  display:none;
  z-index: 10;
}

#pageTop a {
  z-index: 999;
  display:block;
  padding: 5px 3px 5px 3px;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
  -webkit-transition:all 0.3s ;
  -moz-transition:all 0.3s ;
  transition:all 0.3s ;
}
#pageTop img {
  width:80px;
  height:80px;
}
/*------------------------
 *      Footer
 --------------------------*/

footer {
  width:100%;
  padding:20px 0;
  text-align: center;
  color: #333;
  border-top:#333 solid 3px;
  background: #fff;
}

div.footer {
  margin:0;
  /*padding-bottom: 20px;*/
  border:none;
  background:url('/assets/images/contents/common/Mosaic-tile03-p.jpg');
}

.footer .navbar-nav {
  width:100%;
  padding:0;
}

.footer ul li {
  font-size:0.9em;
  text-align:center;
  line-height:1.8em;
  list-style-type:none;
}

.footer li a {
  display:block;
  width:80%;
  margin: 3px auto;
  font-size: 1em;
  line-height:2em;
  color: #333;
  background-color:#fff;
  text-decoration:none;
}

.footer li a:hover {
  color: #e06f9f;
  background-color:#fff;
  text-decoration:none;
}

/*---------------------------------------------------------------------------------------*/
/*                                    スマホ                                             */
/*---------------------------------------------------------------------------------------*/

@media screen and (max-width:600px) {
  body {
    width:100%;
    overflow-x:hidden;
    overflow-y: scroll;
    background-image: url("/assets/images/contents/common/Mosaic-tile03-p.jpg");
    margin:0;
    padding:0;
    color:#777;
    line-height:1.6em;
    font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    text-rendering:optimizelegibility;
    text-align:center;
  }
  .container {
    background-color: #fff;
    border:none;
    margin:20px auto;
    padding:0;
  }

  .wrap {
    padding:0 auto;
    margin:0 auto;
  }

  p img {
    width:100vw;
  }
  img {
    width:100%;
    height:auto;
  }

  /*------------------------*/
  /*      Logo  スマホ
  --------------------------*/
.logo {
  position:relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(/assets/images/contents/common/header_1024_110_background.png) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100px;
}
.moji {
  position:relative;
  z-index:99;
  bottom:0;
  left:auto;
  height: 100%;
  right:auto;
  min-height:70px;
  margin: 0;
}
.logo img {
  margin-top: 15px;
  height: 66%;
  width: auto;
}

.logo .sm {
  visibility: hidden;
}

/*------------------------
 *       Rayout スマホ
 --------------------------*/
.left {
  width:100%;
}

.right {
  width:100%;
}
/*------------------------
 *     Navigation スマホ
 --------------------------*/
.nav {
    font-size: 14px;
}

.nav li:nth-of-type(2) {
   width: 17%;
}

.navbar li a.active {
  background:#999;
}
/*------------------------
 *       Contents スマホ
 --------------------------*/
.inner-box {
  width:100%;
  margin:0 auto;
}

li .basic-list {
  text-align:left;
  list-style-type:disc;
}

/*------------------------
 *       Table スマホ
 --------------------------*/
.law-tbl {
  width:100%;
}
/*------------------------
 *       SNS button スマホ
 --------------------------*/
.btn-box {
  z-index:99;
  top: 0;
  right: 0;
  position:absolute;
  margin: 0;
  text-align: right;
}

.sns {
  margin: 22px 0 0;
}

.sns.one-button {
  margin-top: 40px;
}

.sns li{
  list-style-type:none;
  color:#fff;
  font-size:14px;
  display:block;
  text-align:center;
  width:auto;
  line-height:1em;
  margin:3px;
  padding:5px;
  border-radius:3px;
}

.sns li:first-child{
  margin-top: 7px;
}

.sns .share-facebook {
  margin-bottom:0;
  padding:0;
}
.sns .share-twitter {
  margin-bottom:0;
  padding:0;
}

.sns li:hover{
  -webkit-filter:brightness(1.5);
  -moz-filter:brightness(1.5);
  -ms-filter:brightness(1.5);
  filter:brightness(1.5);
  text-decoration:none;
}

.sns li a {
  color:#fff;
  text-decoration:none;
}

.sns li.mybtn {
  display: block;
  width:76px;
  background:#709FE0;
  color:#fff;
}

/*------------------------
 *      comic スマホ
 --------------------------*/
.comic img {
  width:100%;
  height:auto;
}

/*------------------------
 *      article-box スマホ
 --------------------------*/
.photo-box {
  padding:0;
  margin-top: 20px;
}
.bunner {
  clear:both;
}

p .photo {
  width:80%;
  text-align:center;
  margin-bottom:1em;
  /*min-width: 320px;  最小幅 */
}

/*------------------------
 *   Image-Article スマホ
 --------------------------*/
/* iOSでリンクを2回タップしないと画面遷移しない問題 */
/* http://blog.mismithportfolio.com/web/20150826ios841failure */
/*
.article {
width:48%;
margin-right:2%
margin-top:0;
}
 */
/*------------------------
 *        Group スマホ
 --------------------------*/
.main-img {
  width:100%;
}

.img-list li{
  width:48%;
}
/*
.member {
margin-left:-15%;
}
.goods {
margin-left:-15%;
}

.photo-box ul {
left:38%;
}

.photo-box ul li {
left:-50%;
}
 */

.article div.profile {
  position: absolute;
  width: 100%;
  bottom: 0;
}
}
/*---------------------------------------------------------------------------------------*/
/*                                    スマホyoko                                                 */
/*---------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:768px) {

  /*------------------------*/
  /*      Logo  スマホ
  --------------------------*/
.logo {
  position:relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(/assets/images/contents/common/header_1024_110_background.png) center center no-repeat;
  background-size: cover;
  width: 100%;
  height:auto;
  height: 110px;
}
.logo img {
  width: auto;
  height:80%;
}
.moji {
  position:absolute;
  z-index:99;
  margin:auto;
  top:15px;
  bottom:0;
  left:auto;
  right:auto;
  width:50%;
  height:auto;
  min-height:91px;
}

.logo .sm {
  visibility: hidden;
}

/*------------------------
 *       Rayout スマホ
 --------------------------*/
.left {
  width:100%;
}

.right {
  width:100%;
}

/*------------------------
 *      comic
 --------------------------*/
.comic img {
  width:30%;
}
/*------------------------
 *   Image-Article スマホyoko
 --------------------------*/
.article {
}
/*------------------------
 *   Image-Article
 --------------------------*/
.photo-box ul li {
  width:48%;
  list-style: none;
  float: none;
  margin-bottom: 0;
  margin: 0;
  padding: 0;
}
/*
.photo-box ul li:first-child {
margin-bottom:-30px;
}

.photo-box ul {
left:50%;
}

.photo-box ul li {
left:-50%;
}
 */

/*------------------------
 *       SNS button
 --------------------------*/
.btn-box {
  z-index:99;
  top: 0;
  right: 0;
  position:absolute;
  margin: 15px 15px 0 0;
  text-align: right;
}

.sns {
  margin: 0;
}

.sns.one-button {
  margin-top: 32px;
}

.sns li{
  list-style-type:none;
  color:#fff;
  font-size:1em;
  display:block;
  text-align:center;
  width:auto;
  margin:3px;
  padding:3px;
  border-radius:3px;
}

.sns li:hover{
  -webkit-filter:brightness(1.5);
  -moz-filter:brightness(1.5);
  -ms-filter:brightness(1.5);
  filter:brightness(1.5);
  text-decoration:none;
}

.sns li a {
  color:#fff;
  text-decoration:none;
}

.sns li.mybtn {
  width:100px;
  background:#709FE0;
  color:#fff;
}

/*------------------------
 *        Group
 --------------------------*/
.main-img {
  width:100%;
}

.img-list li{
  width:48%;
}
/*
.member {
width: 100vw;
margin-left: -10%;
}
.member ul li {
left: -40%;
}

.goods {
width: 100vw;
margin-left: -10%;
}
.goods ul li {
left: -40%;
}*/

.article div.profile {
  position: absolute;
  width: 100%;
  bottom: 0;
}
}

.article p.mailBody span {
  margin: 0 auto;
  width: 90%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*---------------------------------------------------------------------------------------*/
/*                                    PC                                                 */
/*---------------------------------------------------------------------------------------*/

@media screen and (min-width:768px) {

  .container {
    max-width: 1024px;
    margin: 0px auto 20px auto;
    background:#fff;
  }

  /*------------------------
   *     Navigation PC
   --------------------------*/
.navbar ul {
  margin:0 auto;
  padding:0;
  width:100%;
  font-weight: bold;
  background:#2a2c36;
}

.navbar li {
  float:left;
  color:#2a2c36;
  width:25%;
  text-align:center;
  list-style-type:none;
}

.navbar li a {
  display:block;
  color:#fff;
  line-height:2.5em;
  text-decoration:none;
  background:#2a2c36;
}

.navbar li:nth-child(odd) a {
  display:block;
  color:#fff;
  line-height:2.5em;
  text-decoration:none;
  background-image: linear-gradient(
  -45deg,
  #2a2c36 25%,
  #55565f 25%, #55565f 50%,
  #2a2c36 50%, #2a2c36 75%,
  #55565f 75%, #55565f
  );
  background-size: 50px 50px;
}

.navbar li a.active {
  background:#999;
}

/*------------------------
 *       Logo PC
 --------------------------*/
.logo {
  position:relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(/assets/images/contents/common/header_2000_110_background.png) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 110px;
}
.logo img {
  width: 100%;
  height:auto;
}
.moji {
  position:absolute;
  z-index:99;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:240px;
  height:65px;
}
/*------------------------
 *       Layout  PC
 --------------------------*/
.left {
  width:48%;
}

.right {
  width:48%;
}
/*------------------------
 *       Contents  PC
 --------------------------*/
.inner-box {
  width:80%;
  margin:0 auto;
}

li .basic-list {
  text-align:left;
  list-style-type:disc;
}

.domain,
.priceBox {
  width:80%;
}

.box {
  width:80%;
  margin:0 auto;
  margin-bottom:15px;
}

/*------------------------
 *       Table  PC
 --------------------------*/
.law-tbl {
  width:80%;
}

/*------------------------
 *      midashi PC
 --------------------------*/
.midashi {
  position: relative;
  height: auto;
  /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
  padding-top:5.8%;
  margin:0 auto;
  background: url('/assets/images/contents/common/miadshi_1024_60_background.png') 0 0 no-repeat;
  background-size: 100%;
}

.midashi span {
  display:none;
}

.midashi p {
  position:absolute;
  z-index:99;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width: 480px;
  height: 40px;
  line-height: 40px;
  border-bottom:none;
}

.midashi p img {
  width: 480px;
  height: 40px;
}
/*------------------------
 *        Group PC
 --------------------------*/
.main-img {
  width:600px;
}
.member {
  margin-left:0;
  margin-right:0;
}
/*
.member ul li {
left: -40%;
}
 */
.goods {
  margin-left:0;
  margin-right:0;
}
/*
.goods ul li {
left: -40%;
}
 */
/*------------------------
 *      article-box PC
 --------------------------*/
p .photo {
  width:50%;
  float:left;
  margin-bottom:1em;
  min-width: 320px; /* 最小幅 */
}
/*------------------------
 *   Image-Article PC
 --------------------------*/
.photo-box ul li {
  list-style:none;
  width:32%;
}

.article p {
  bottom:0;
  left:0;
  width:100%;
  height:1.8em;
  position:absolute;
  text-align:center;
  color: #fff;
  margin: 0;
  padding: 3% 0;
  background: #000;
  filter: Alpha(opacity=60);
  opacity: 0.6;
  -webkit-transition: .3s;
  transition: .3s;
}


/* firefox　だけ位置ずらす */
@-moz-document url-prefix() {
  .article p {
    bottom:7px;
  }
}
.article p.category,
.article p.mailBody {
  display:none;
  line-height:1.2em;
}
.article p.name {
  line-height:1.8em;
  margin-bottom:0;
}
.article a{
  text-decoration: none;
}

.article a:hover p.name{
  text-decoration: none;
  background: #4d2636;
  filter: Alpha(opacity=80);
  opacity: 0.8;
}

/*------------------------
 *      Footer PC
 --------------------------*/

footer {
  width:100%;
  padding:40px;
  text-align: center;
  color: #333;
  border-top:#333 solid 3px;
  background: #fff;
}

div.footer {
  margin-top: 30px;
  margin-bottom:0;
  margin:0 auto;
  border:none;
  background: none;
}

.footer .navbar-nav {
  width:1022px;
  padding:0;
  margin:0 auto;
}

.footer ul li {
  float:left;
  font-size:0.9em;
  background: none;
  width:20%;
  text-align:center;
  list-style-type:none;
}

.footer li a {
  display:block;
  font-size: 1em;
  width:100%;
  color: #333;
  background: none;
  text-decoration:none;
}


.footer li a:hover {
  color: #e06f9f;
  background: none;
  text-decoration:none;
}
}

.simple-text {
  margin: 10px;
  border: 1px solid #ddd;
  padding: 50px 10px;
  background-color: #f6f6f6;
  text-align: center;
  font-size: 15px;
}

.error-message {
  max-width:600px;
  box-sizing: border-box;
  margin: 20px auto;
  padding: 15px 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  color: #a94442;
  background-color: #fbb;
  text-align: left;
}

@media screen and (max-width:600px) {
  .error-message {
    width:100%;
  }
}


/** --------------------------------------------------------------------------------
 * フォント
 */
@font-face {
  font-family: kiraIcon;
  src:url('/assets/fonts/kiraIcon.eot');
  src:url('/assets/fonts/kiraIcon.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/kiraIcon.woff') format('woff'),
    url('/assets/fonts/kiraIcon.ttf') format('truetype'),
    url('/assets/fonts/kiraIcon.svg#kiraIcon') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: myPage;
  src:url('/assets/fonts/myPage.eot');
  src:url('/assets/fonts/myPage.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/myPage.woff') format('woff'),
    url('/assets/fonts/myPage.ttf') format('truetype'),
    url('/assets/fonts/myPage.svg#myPage') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*------------------------
 *       ログインフォーム
 --------------------------*/
.form {
  margin: 40px auto;
  max-width: 460px;
  text-align: left;
}

.form dl,
.form dt,
.form dd {
  margin: 0;
  padding: 0;
}

.form dt {
  margin-bottom: 5px;
  padding-left: 1.3em;
  position: relative;
  font-weight: bold;
  font-size: 18px;
}

.form dt::before {
  content: "\e900";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1em;
  height: 1.2em;
  line-height: 1.2;
  font-size: 90%;
  font-family: kiraIcon;
}

.form dd + dt {
  margin-top: 20px;
}

.form input[type="text"],
.form input[type="password"],
.form input[type="date"],
.form textarea {
  padding: 15px 10px;
  border: 1px solid #ccc;
  display: block;
  width: 100%;
  height: auto;
  line-height: 1.2;
  color: #000;
  background: #fff !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  text-align: left;
  font-size: 18px;
}

.form select {
  padding: 15px 0 15px 10px;
  border: 1px solid #ccc;
  max-width: 100%;
  display: block;
  height: auto;
  line-height: 1.2;
  color: #000;
  background: #fff !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  text-align: left;
  font-size: 18px;
}

input[type="text"]:-webkit-autofill,
input[type="password"]:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.button {
  text-align: center;
}

.button p + p {
  margin-top: 10px;
}

.button button,
.button a {
  padding: 15px 10px;
  border: none;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  display: block;
  width: 100%;
  height: auto;
  line-height: 1.2;
  color: #fff;
  background: #709fe0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  font-size: 18px;
  font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  cursor: pointer;
}

.button a {
  background: #888;
}

.button.pink a {
  background: #e06f9f;
}

.button button:hover {
  background-color: #80B5FF;
}

.button a:hover {
  background-color: #aaa;
}

.button.blue a {
  background-color: #709fe0;
}

.button.blue a:hover {
  background-color: #80B5FF;
}

.box2 {
  width: 90%;
  padding: 10px;
  margin: 15px auto;
  font-weight: 500;
  border: solid 1px #ccc;
  background: repeating-linear-gradient(-45deg, #EEF5FE, #EEF5FE 10px, #F8FBFF 0, #F8FBFF 20px);
  border-radius: 3px;
}

@media screen and (min-width: 768px) {
  .box2 {
    width: 80%;
  }
}

.form__message {
  margin: 5px 0;
  padding: 0;
  font-size: 90%;
  color: #ff0c84;
  line-height: 1.2;
  font-weight: normal;
}

.form--confirm .form__body {
  /*
  margin-left: 1.4em;
  */
  padding: 10px;
  font-weight: normal;
  background-color: #fff;
  font-size: 90%;
}

.form__goodsName {
  font-weight: bold;
}

.form--confirm .form__body ul {
  margin: 0;
}

.form__body--date {
  display: flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: -ms-flex;
  -moz-flex-direction: row;
  -o-flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}

.form__body--date select {
  width: 33%;
}

/** ------------------------------------------------------------
 * マイページ
 */
.mailRanking {
  padding: 10px 0 2px;
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  display: block;
  color: #fff;
  line-height: 2;
  background-color: #e06f9f;
  text-align: center;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 50% 0;
     -moz-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
  font-size: 10px;
  letter-spacing: -0.001em;
}

/* RankIcon */
.rankIcon {
  padding: 0 4px;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  background-color: #ff900c;
  font-size: 10px;
  letter-spacing: -0.001em;
  font-weight: bold;
  line-height: 1.5;
}

.rankIcon--up {
  background-color: #ff0c84;
}

.rankIcon--down {
  background-color: #0c9bff;
}

/** ------------------------------------------------------------
 * setting
 */
.setting {
  display: flex;
  flex-wrap:wrap;
  margin: 0;
  padding: 0 0 30px;
  list-style-type: none;
  letter-spacing: -0.001em;
  line-height: 1.4;
  text-align: left;
}

@media only screen and (max-width: 600px) {
  .setting {
    font-size: 11px;
  }
}

@media only screen and (max-width: 500px) {
  .setting {
    font-size: 10px;
  }
}

.setting::after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  font-size: 0;
  clear: both;
}

.setting li {
  padding: 0 5px;
  display: inline-block;
  width: 50%;
  margin-bottom: 6px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
}

.setting li a {
  display: block;
  padding: 16px 5px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  color: #fff;
  background: #709fe0;
  text-decoration: none;
}

.setting .setting__shortText {
  line-height: 2.8;
}

.setting li a:hover {
  filter: Alpha(opacity=80);
  opacity: 0.8;
  -webkit-transition: .3s;
  transition: .3s;
}

@media only screen and (min-width: 700px) {
  .setting li a br {
    display: none;
  }

  .setting .setting__shortText {
    line-height: 1.4;
  }
}

.setting li a > span {
    display: block;
    margin: 0 auto;
    width: 30%;
    min-width: 144px;
    text-align: left;
}

@media only screen and (max-width: 460px) {
    .setting li a > span {
        min-width: 100px;
    }
}

.setting li a span span {
  margin: 0 auto;
  text-align: left;
  vertical-align: middle;
}

.setting li:nth-of-type(1) a > span::before {
  content: "\e9c9";
  display: inline-block;
  text-align: center;
  font-size: 24px;
  font-family: myPage;
  line-height: 1.2;
  vertical-align: middle;
}

.setting li:nth-of-type(2) a > span::before {
  content: "\ea84";
  display: inline-block;
  text-align: center;
  font-size: 24px;
  font-family: myPage;
  line-height: 1.2;
  vertical-align: middle;
}

.setting li:nth-of-type(3) a > span::before {
  content: "\e9b4";
  display: inline-block;
  text-align: center;
  font-size: 24px;
  font-family: myPage;
  line-height: 1.2;
  vertical-align: middle;
}

.setting li:nth-of-type(5) a > span::before {
  content: "\e994";
  display: inline-block;
  text-align: center;
  font-size: 24px;
  font-family: myPage;
  line-height: 1.2;
  vertical-align: middle;
}

.setting li i {
  display: inline-block;
  text-align: center;
  font-size: 24px;
  line-height: 1.2;
  vertical-align: middle;
}

/** ------------------------------------------------------------
 * mailList
 */
.mailList {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: left;
  line-height: 1.3;
}

.mailList__item + .mailList__item {
  border-top: 1px solid #ccc;
}

.mailList__item a {
  content: ".";
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #777;
  text-decoration: none;
}

.mailList__main,
.mailList__sub {
  padding: 10px 0;
  display: table-cell;
  vertical-align: middle;
}

.mailList__main {
  padding-right: 10px;
}

.mailList__sub,
.mailList__sub img {
  width: 100px;
}

.mailList__name {
  margin: 0;
  padding: 0;
  color: #e06f9f;
  font-weight: bold;
}

.mailList__name::before {
  content: "\e900";
  font-size: 90%;
  font-family: kiraIcon;
}

.mailList__subject {
  margin: 0;
  padding: 0;
  font-size: 90%;
}

.mailList__subject span {
  margin: 0 0 10px;
  display: block;
  color: #bbb;
  font-size: 10px;
  letter-spacing: -0.001em;
}

/** ------------------------------------------------------------
 * more
 */
.more {
  margin: 20px 0 40px;
  text-align: center;
}

.more + .more {
  margin-top: -30px;
}

.more > * {
  display: inline-block;
  padding: 10px 5px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  color: #fff;
  background: #e06f9f;
  text-decoration: none;
  min-width: 280px;
  -webkit-transition: .3s;
  transition: .3s;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  font-size: 16px;
  font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  cursor: pointer;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.more > *:hover {
  filter: Alpha(opacity=80);
  opacity: 0.8;
}

.more.blue > * {
  background-color: #709FE0;
}

/** ------------------------------------------------------------
 * メール詳細
 */
.flashMessage {
  margin-bottom: 30px;
  padding: 30px 20px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  color: #e06f9f;
  background: #eee;
}

@media only screen and (max-width: 600px) {
  video {
    width: 100%;
  }
}

.mail {
  margin-bottom: 20px;
  display: table;
  width: 100%;
  table-layout: fixed;
}

.mail__main,
.mail__sub {
  display: table-cell;
  vertical-align: top;
}

.mail__main {
  padding-right: 6%;
  padding-left: 6%;
}

@media only screen and (max-width: 700px) {
  .mail__main,
  .mail__sub {
    padding: 0;
    display: block;
  }

  .mail__sub {
    padding-bottom: 10px;
  }
}

.mail__title {
  margin: 0 0 5px;
  border-bottom: none;
  color: #e06f9f;
  text-align: center;
  line-height: 1.4;
}

.mail__date {
  margin-top: 0;
  margin-bottom: 30px !important;
  display: block;
  color: #bbb;
  font-size: 10px;
  letter-spacing: -0.001em;
  line-height: 1.4;
}

.mail__body {
  padding: 10px;
  border: solid 1px #E06F9F;
  line-height: 1.4;
  text-align: left;
}

.movie {
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

.movie::before {
  content: "\ea9d";
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 2em;
  height: 1.2em;
  line-height: 1.2;
  font-size: 400%;
  font-family: myPage;
  text-align: center;
}

.mail__sub img {
  width: 100%;
}

.mailButton {
  text-align: center;
}

.mailButton .more {
  display: inline-block;
}

/** ------------------------------------------------------------
 * メアド変更
 */
.myEmail {
  display: block;
  font-weight: bold;
  color: #709ef0;
  font-size: 110%;
}

/** ------------------------------------------------------------
 * pager
 */
.pager {
  margin: 20px 0 0;
  text-align: center;
  font-size: 11px !important;
}

.pager ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.pager > * {
  margin: 0 10px;
  display: inline-block;
}

.pager a,
.pager span {
  border: 1px solid #ccc;
  padding: 1px 15px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  display: inline-block;
  text-decoration: none;
}

.pager a {
  color: #999;
  background-color: #fff;
}

.pager a:hover {
  color: #e06f9f;
  border-color: #e06f9f;
}

.pager span {
  color: #ccc;
  background-color: #eee;
}

/** ------------------------------------------------------------
 * path
 */
.path {
  margin: 0 0 10px;
  padding: 0;
  list-style-type: none;
  text-align: left;
  line-height: 1.3;
  font-size: 10px;
  letter-spacing: -0.001em;
}

.path::after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  font-size: 0;
  clear: both;
}

.path li {
  margin: 0 0.5em 0 0;
  padding: 0;
  float: left;
}

.path li + li::before {
  margin-right: 0.5em;
  content: ">";
  color: #ccc;
}

.path li a {
  color: #E06F9F;
  text-decoration: none;
}

.path li + li a {
  margin-left: 6px;
}

.midashiText {
  position: relative;
  margin: 0 auto;
  background: url(/assets/images/contents/common/miadshi_1024_60_background.png) 0 0 no-repeat;
  font-size: 16px;
}

.midashiText a {
  padding: 17px 6px 0;
  color: #333;
  height: 60px;
  display: block;
  font-weight: bold;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.midashiText span {
  padding: 1px 4px;
  float: right;
  color: #fff;
  background-color: #333;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: -0.001em;
}

.priceText {
  margin: 20px 0 10px;
  color: #e06f9f;
  font-size: 30px;
  line-height: 1.2;
}

.priceText span {
  font-size: 11px;
}

/** ------------------------------------------------------------
 * カート
 */
.cartTable {
  text-align: left;
  font-size: 11px;
  letter-spacing: -0.001em;
  line-height: 1.4;
}

.cartTable form {
  display: inline-block;
}

.cartTable__name {
  font-weight: bold;
}

.cartTable__price {
  margin-top: 5px;
  color: #e06f9f;
  text-align: right;
}

.cartTable__button {
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  border: none;
  color: #fff;
  background-color: #e06f9f;
  font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

input[type="text"] + .cartTable__button {
  margin-top: 4px;
}

.cartTable input {
  height: auto;
}

/** ------------------------------------------------------------
 * 会員登録
 */
.entryText {
  margin: 10px;
  padding: 50px 3px;
  border: 1px solid #ddd;
  line-height: 1.6;
  background-color: #f6f6f6;
  text-align: center;
  font-size: 93%;
}

.entryText span {
  font-size: 130%;
  color: #709FE0;
}

/** ------------------------------------------------------------
 * bizDetail
 */
.bizDetail {
  margin: 50px 40px;
  line-height: 2;
}

@media only screen and (max-width: 560px) {
  .bizDetail {
    margin: 50px 0;
  }
}

.bizDetail__title {
  margin: 50px 0 20px;
  border: none;
  text-align: center;
  font-size: 120%;
  font-weight: bold;
}

.bizDetail__subTitle {
  margin: 30px 0;
  font-size: 106%;
  font-weight: bold;
  text-align: left;
}

.bizDetail__q {
  margin: 50px 0;
  font-weight: bold;
  text-align: left;
}

.bizDetail__q::before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 1px;
  vertical-align: middle;
  background-color: #333;
}

.bizDetail__message {
  padding-left: 6.2em;
  position: relative;
  text-align: left;
}

.bizDetail__message span {
  position: absolute;
  left: 0;
  width: 5.7em;
  font-weight: bold;
}

.bizDetail__message span::after {
  content: ":";
  float: right;
}

.bizDetail__q + .bizDetail__title {
  margin-top: 70px;
  padding-top: 70px;
  border-top: 3px solid #999;
}

.movieBox {
  margin: 0 auto 70px;
  max-width: 600px;
}

.movieBox__inner {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.movieBox__inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.inner-box + h2 {
  margin-top: 70px;
}

.inner-box.question ul {
  -webkit-padding-start: 24px;
}

.text-left {
  text-align: left;
}

.main-img {
  width: auto;
}

.profile-img-style {
  margin: 0 auto;
  text-align: center;
  position: relative;
  background-color: #f5f5f5;
  max-width: 600px;
}

.profile-img-style::before {
  display: block;
  content: '';
  padding-top: 100%;
}

.profile-img-style-inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.profile-img-style-inner img {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

.form .form-inline input {
  margin-right: 5px;
  display: inline-block;
}

.note {
  margin-top: -16px;
  font-size: 14px;
  padding: 10px;
  text-align: left;
  color: #999;
}

.note .strong {
  margin: 0 2px;
  font-weight: bold;
  color: #709FE0;
}

.mailbox .photo,
.sakanobori .photo {
  float: none;
}

.search-form {
  margin: 0 auto;
  padding: 20px;
  width: 70%;
  box-sizing: border-box;
  background-color: #fafaff;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.search-form .label {
  margin: 15px 0 0;
  padding: 0;
  text-indent: 0;
}

.search-form .form_body {
  text-align: left;
}

.search-form button,
.sakanobori-form button {
  width: 50%;
}

@media (max-width: 600px) {
    .search-form {
      width: 100%;
    }

    .search-form button,
    .sakanobori-form button {
      width: 80%;
    }
}

.search-form input[type="text"],
.search-form input[type="date"] {
  font-size: 12px;
  text-align: left;
  width: 100%;
  border: 1px solid #bbb;
  padding: 10px 5px;
  background-color: white;
}

.search-form input[type="text"].datepicker,
.search-form input[type="date"].datepicker {
  width: 44%;
  text-align: center;
}

.mypage-news {
  padding: 10px;
  text-align: left;
  border: 2px solid #E06F9F;
  font-size: 15px;
}

.mypage-news .title {
  margin: 16px auto;
  border-bottom: solid 3px #E06F9F;
  text-align: center;
  color: #E06F9F;
  width: 80%;
  font-size: 18px;
}

.mypage-news ul {
  margin-left: -14px;
}

#raty {
  text-align: right;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#raty img {
  width: auto;
}

/*------------------------
 *       Only you
 --------------------------*/
.photoDetail {
  margin: 0 auto;
  display: table;
  table-layout: fixed;
  width: 90%;
  text-align: left;
}

.photoDetail > * {
  display: table-cell;
  vertical-align: top;
}

.photoDetail__sub {
  width: 250px;
}

.photoDetail__sub img {
  margin: 0 auto;
  display: block;
  width: 100%;
}

.photoDetail__sub--S {
  text-align: center;
}

.photoDetail__sub--S > div {
  border: 2px solid #f6f6f6;
}

.photoDetail__sub--S h3 {
  margin: 0 0 10px;
  padding: 3px 5px;
  border: none;
  background-color: #f6f6f6;
  font-size: 14px;
  text-align: center;
}

.photoDetail__sub--S img {
  max-width: 150px;
}

.photoDetail__price {
  margin-top: 10px;
  padding: 5px;
  border-top: 2px solid #f6f6f6;
}

.photoDetail__main {
  padding-left: 8%;
}

@media only screen and (max-width: 1000px) {
  .photoDetail {
    width: 100%;
  }

  .photoDetail__main {
    padding-left: 30px;
  }
}

@media only screen and (max-width: 750px) {
  .photoDetail,
  .photoDetail > * {
    display: block;
    width: auto;
  }

  .photoDetail__sub img {
    max-width: 250px;
  }

  .photoDetail__sub--S img {
    max-width: 140px;
  }

  .photoDetail__main {
    margin-top: 30px;
    padding-left: 0;
  }
}

.photoDetail__commentTitle {
  margin: 0;
  border: none;
  padding: 2px 2em;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  position: relative;
  display: inline-block;
  background-color: #f6f6f6;
  font-family: 'Lato',sans-serif;
  text-transform: uppercase;
  font-size: 12px;
}

.photoDetail__commentTitle::after {
  content: "";
  border-style: solid;
  border-width: 11px 11px 0 0;
  border-color: #f6f6f6 transparent transparent transparent;
  display: block;
  position: absolute;
  top: 99.6%;
  left: 2em;
  width: 0;
  height: 0;
}

.photoDetail__comment {
  margin-top: 20px;
  margin-bottom: 1.5em;
}

/* 入力領域 */
.photoDetail__control {
  padding: 20px;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  background-color: #f6f6f6;
  text-align: center;
}

.photoDetail__comment + .photoDetail__control {
  margin-top: 1.5em;
}

@media only screen and (max-width: 360px) {
  .photoDetail__control {
    padding: 15px;
  }
}

.photoDetail__controlInner {
  margin: 10px auto;
  display: inline-block;
  text-align: left;
  min-width: 320px;
}

@media only screen and (max-width: 470px) {
  .photoDetail__controlInner {
    min-width: auto;
    width: 100%;
  }
}

.photoDetail__control .form__title small {
  font-weight: normal;
}

.photoDetail__control .form {
  margin: 0 auto;
}

.photoDetail__info {
  margin: 5px 0;
}

.photoDetail__infoTitle {
  margin-right: 0.6em;
  padding: 1px 0;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  display: inline-block;
  width: 5.6em;
  background-color: #fff;
  text-align: center;
  font-size: 90%;
}

.photoDetail__infoTax {
  font-size: 12px;
}

.photoDetail del {
  padding: 0 2px;
  color: #f00;
  font-size: 12px;
}

.photoDetail__text {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  padding-left: 1em;
  position: relative;
  font-size: 14px;
  line-height: 1.4;
}

.photoDetail__text span {
  padding: 0 2px;
  background: linear-gradient(transparent 60%, #eae097 0%);
}

.photoDetail__text--deco {
  color: #709fe0;
}

.photoDetail__text::before {
  content: "\e900";
  margin-top: 0.2em;
  position: absolute;
  left: 0;
  font-size: 0.8em;
  font-family: kiraIcon;
}

.photoDetail__info + form .photoDetail__text:first-of-type,
.photoDetail__info + .photoDetail__text--deco {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px dashed #777;
}

.photoDetail__button {
  margin: 0 auto;
  padding: 10px 6px;
  border: none;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  outline: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  width: 100%;
  color: #fff;
  background-color: #2a2c36;
  font-size: 16px;
  appearance: none;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .3s;
          transition: .3s;
}

.photoDetail__info  + .photoDetail__button,
dl.form ~ .photoDetail__button,
.photoDetail__button + .photoDetail__button {
  margin-top: 1em;
}

a.photoDetail__button,
button.photoDetail__button {
  cursor: pointer;
}

a.photoDetail__button:hover,
button.photoDetail__button:hover {
  filter: Alpha(opacity=80);
  opacity: 0.8;
}

.photoDetail__button--discount {
  background-color: #709fe0;
}

.photoDetail__button--soldout {
  background-color: #c00;
}

.photoDetail__button--ordered {
  background-color: #ccc;
}

.photoDetail__button--checking {
  background-color: #ccc;
}

@font-face {
  font-family: 'downloadIcon';
  src:  url('/assets/fonts/downloadIcon.eot?xaivwq');
  src:  url('/assets/fonts/downloadIcon.eot?xaivwq#iefix') format('embedded-opentype'),
        url('/assets/fonts/downloadIcon.ttf?xaivwq') format('truetype'),
        url('/assets/fonts/downloadIcon.woff?xaivwq') format('woff'),
        url('/assets/fonts/downloadIcon.svg?xaivwq#downloadIcon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.photoDetail__button--download::before {
  margin-right: 5px;
  content: "\e900";
  font-family: 'downloadIcon';
}

.photoDetail__ready {
  margin: 0;
}

.photoDetail__ready dt {
  margin: 0;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.6em;
}

.photoDetail__ready dt::before,
.photoDetail__ready dt::after {
  content: "";
  margin: 0 4px;
  border-top: 3px double #777;
  display: inline-block;
  width: 2.5em;
  height: 0;
  vertical-align: middle;
}

.photoDetail__ready dt::before {
  margin-right: calc(0.6em + 4px)
}

.photoDetail__ready dd {
  margin: 0.8em 0 0 0;
  font-size: 90%;
}

/* aboutOnlyYou */
.aboutOnlyYou {
  margin: 0 30px 20px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}


@media only screen and (min-width: 768px) {
  .aboutOnlyYou {
    margin-top: 30px;
  }
}

.aboutOnlyYou::before {
  content: "";
  margin: auto;
  border-right: 1px dashed #777;
  position: absolute;
  top: 20px;
  bottom: 20px;
  width: 0;
  left: 30%;
}

.aboutOnlyYou::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 99.6%;
  right: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 7px 0 7px;
  border-color: #eee transparent transparent transparent;
}

.aboutOnlyYou p {
  margin: 0;
}

.aboutOnlyYou__inner {
  margin: 0 auto;
  display: table;
  table-layout: fixed;
  background-color: #eee;
}

.aboutOnlyYou__inner > * {
  padding: 30px;
  display: table-cell;
  vertical-align: middle;
}

.aboutOnlyYou__title {
  width: 30%;
  font-weight: bold;
}

.aboutOnlyYou__text {
  text-align: left;
}

.aboutOnlyYou__link {
  margin-top: 15px !important;
  text-align: right;
}

.aboutOnlyYou__link a {
  padding: 4px 20px 4px 15px;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  position: relative;
  display: inline-block;
  color: #fff;
  background-color:#709FE0;
  text-decoration: none;
  font-size: 90%;
}

.aboutOnlyYou__link a::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.aboutOnlyYou__link a br {
  display: none;
}

@media only screen and (max-width: 850px) {
  .aboutOnlyYou__inner,
  .aboutOnlyYou__inner > * {
    display: block;
    width: auto !important;
  }

  .aboutOnlyYou::before {
    content: none;
  }

  .aboutOnlyYou__title {
    padding: 12px 20px 11px;
    border-bottom: 1px dashed #777;
  }

  .aboutOnlyYou__text {
    padding: 15px 20px;
  }

  .aboutOnlyYou__link {
    text-align: center;
  }

  .aboutOnlyYou__link a {
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    line-height: 1.3;
  }
}

@media only screen and (max-width: 600px) {
  .aboutOnlyYou__text br {
    display: none;
  }

  .aboutOnlyYou__link a br {
    display: block;
  }
}