/*共通*/

body{
  background-color: #000;
  max-width: 640px;
  margin: 0 auto;
  color:#c7c0c0;
}

.wrapper{
  background-color: #000;
}

.content-head {
  border-bottom: 0;
}

a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  display: block;
  font-family : Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R', 'Droid Sans', メイリオ, 'sans-serif'; 
}

.foot-controler.row a {
    color: #000;
}

  /*共通>リスト関係*/
.list-group, .card-group {
  margin-bottom: 18px;
}

.list-group li {
    border-bottom: 1px solid #e96615;
}

.list-group .list-group-item,
.list-group > a,
.list-group > div {
  border-radius: 0;
  border-right: 0;
  border-left: 0;
  border-color: #e96615;
  /*padding: 8px 12px;*/
  position: relative;
}

.list-group .list-group-item a {
  padding: 8px 12px;
}

.list-group .list-group-item:first-child,
.list-group > a:first-child,
.list-group > div:first-child {
  border-top: 0;
}

.list-group .list-group-item .menu-name,
.list-group > a .menu-name, .list-group > div .menu-name {
  font-weight: normal;
  display: block;
  clear: both;
  margin: 4px 0 4px;
  font-size: 16px;
  color: #ffc774;
  cursor: pointer;
}


.list-group .list-group-item .caption,
.list-group > a .caption,
.list-group > div .caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #888;
  overflow: hidden;
  margin: 0;
  font-size: 12px;
  max-height: 4em;
}

ul.list-group li a::after {
 content: "";
 display: block;
 border-top: 2px solid grey;
 border-right: 2px solid grey;
 width: 10px;
 height: 10px;
 transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 position: absolute;
 right: 3%;
 top: 70%;
 margin-top: -14px;
}

.col-xs-2 .item {
    position: relative;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
}


  /*共通>リスト>カード型のリスト*/
.card-group .card-group-item, .card-group > a, .card-group > div {
    border-radius: 0;
    border-right: 0;
    border-left: 0;
    border: solid 1px #8e4514;
    margin: 10px;
    overflow: hidden;
    background: #672504;
}

.card-group-item {
    position: relative;
    display: block;
    margin-bottom: -1px;
    background-color: #672504;
    border: 1px solid #845454;
}

.card-group .card-group-item a, .card-group > a a, .card-group > div a {
    /* font: normal 14px/28px Montserrat; */
    color: #e96615;
    display: block;
    padding: 3px 24px 3px 6px;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

ul.card-group li a::before, ul.card-group li a::after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    content: '';
    width: 10px;
    height: 1px;
    background-color: #888;
    border-radius: 4px;
}

ul.card-group li a::before {
    margin-top: -4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
ul.card-group li a::after {
    margin-top: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.card-group .card-group-item .menu-name,
.card-group > a .menu-name, .card-group > div .menu-name {
  font-weight: normal;
  display: block;
  clear: both;
  margin: 4px 0 4px;
  font-size: 16px;
  color: #f7dda2;
  cursor: pointer;
}

.card-group .card-group-item .caption,
.card-group > a .caption,
.card-group > div .caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #888;
  overflow: hidden;
  margin: 0;
  font-size: 12px;
  max-height: 4em;
  line-height: 1.4em;
}


  /*MTOP個別課金コーナー用>リスト>カード型のリスト*/
.kobetsu-card-group .kobetsu-card-group-item, .kobetsu-card-group > a, .kobetsu-card-group > div {
    border-radius: 0;
    border-right: 0;
    border-left: 0;
    border: solid 1px #e4b960;
    margin: 10px;
    overflow: hidden;
    background: #f7dda2;
}

.kobetsu-card-group-item {
    position: relative;
    display: block;
    margin-bottom: -1px;
    background-color: #672504;
    border: 1px solid #845454;
}

.kobetsu-card-group .kobetsu-card-group-item a, .kobetsu-card-group > a a, .kobetsu-card-group > div a {
    /* font: normal 14px/28px Montserrat; */
    color: #e96615;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 3px 24px 3px 6px;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

ul.kobetsu-card-group li a::before, ul.kobetsu-card-group li a::after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    content: '';
    width: 10px;
    height: 1px;
    background-color: #3c0807;
    border-radius: 4px;
}

ul.kobetsu-card-group li a::before {
    margin-top: -4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
ul.kobetsu-card-group li a::after {
    margin-top: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.kobetsu-card-group .kobetsu-card-group-item .menu-name,
.kobetsu-card-group > a .menu-name, .kobetsu-card-group > div .menu-name {
  font-weight: normal;
  display: block;
  clear: both;
  margin: 4px 0 4px;
  font-size: 16px;
  color: #3c0807;
  cursor: pointer;
}

.kobetsu-card-group .kobetsu-card-group-item .caption,
.kobetsu-card-group > a .caption,
.kobetsu-card-group > div .caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #888;
  overflow: hidden;
  margin: 0;
  font-size: 12px;
  max-height: 4em;
  line-height: 1.4em;
}

ul.kobetsu-card-group.flex li a img {
    width: 90px;
    height: 90px;
}

ul.kobetsu-card-group.flex li a span.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: 6px;
}

.flex-img {
    margin-right: 4px;
    min-width: 90px;
    height: 90px;
    flex: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
}



section.list-page {
    margin-left:-12px;
    margin-right:-12px;
}
.list-page a.global-menu-list {
    background-color: #ff7314;
}

  /*共通>リスト>リコメ用の装飾*/
  ul.list-group.recomme {
    background-color: #000000; /*リコメリストの背景色*/
  }

  ul.list-group.recomme li {
    border-color: #555;/*リコメリストのボーダー色*/
  }

  /*共通>リスト>リコメ用の装飾*/
  ul.card-group.kobetsu-recomme {
    background-color: #000000; /*リコメリストの背景色*/
  }

  ul.card-group.kobetsu-recomme li {
    border-color: #ff7314;/*リコメリストのボーダー色*/
  }

ul.card-group.kobetsu-recomme li > .card-group .card-group-item, .card-group > a, .card-group > div {
    border-radius: 0;
    border-right: 0;
    border-left: 0;
    border: solid 1px #e96615;
    margin: 10px;
    overflow: hidden;
    background: #FFFFFF;
}

  /*手相鑑定>見出し>アイコン画像*/
.m-hand_situation-list .index-section h2 {
    border-left: 0;
    position: relative;
    width: 200px;
    margin:  auto;
}

.m-hand_situation-list .index-section h2::before {
    content:  "";
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fkokura.pga.jp%2Fimage%2Fic%2F06.096.gif%26decrypt%3D1");
    background-repeat:  no-repeat;
    height: 19px;
    width: 19px;
    display:  inline-block;
    position: absolute;
    left: 10%;
}
.m-hand_situation-list .index-section h2::after {
    content:  "";
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fkokura.pga.jp%2Fimage%2Fic%2F06.096.gif%26decrypt%3D1");
    background-repeat:  no-repeat;
    height: 19px;
    width: 19px;
    display: inline-block;
    position: absolute;
}

  /*危ない日>見出し>アイコン画像*/
.m-danger-top h4::before {
    content:  "";
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fkokura.pga.jp%2Fimage%2Fic%2F01.096.gif%26decrypt%3D1");
    background-repeat:  no-repeat;
    height: 19px;
    width: 19px;
    display:  inline-block;
}

  /*アイコン画像*/
.menu-icon::before {
    content:  "";
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fkokura.pga.jp%2Fimage%2Fic%2F01.096.gif%26decrypt%3D1");
    background-repeat:  no-repeat;
    height: 19px;
    width: 19px;
    vertical-align: middle;
    display:  inline-block;
}

  /*大きめの画像*/
.wide-image img {
    max-width: 200px;
  margin: 20px auto;
}

/* ★kokuraテキストカラー★ */

 /* メインカラー */
.text-primary {
 color: #f4a460 ;
}

 /* 強調 */
.text-accent {
 color: #e96615 ;
}

 /* 警告 */
.text-warning {
 color: #ff0000 ;
}

 /* 弱めて表示 母の言葉、コーナーキャプション等 */
.tex-tmuted {
 color: #c7c0c0 ;
}

 /* うふふ… */
.text-pink {
 color: #ff0094 ;
}

 /* カテゴリ名用 */
.text-category {
 color: #ffffff ;
}

 /* サマリー用 */
.text-summary {
 color: #ffc774 ;
}

 /* 結果テキスト用 */
.text-result {
 color: #ffc774 ;
}

/* 結果テキスト用   白文字 */
.text-result-sub {
color: #c7c0c0 ;
}



/* サブタイトル */
.text-sub-title {
color: #ffffff ;
} 

/* ボタン設定 */

.btn.btn-solid {
    border: 1px solid #000;
    background-color: #f00;
}


  /*ボタンの種類はbtn-〇〇と任意の色などの名前にし、
   線の色背景色文字色をお好きなものに*/
.btn.btn-red {
  border: 1px solid #ff1100;
  background-color: #ff1100;
  color: #fff;
}

.btn.btn-blue {
  border: 1px solid #0000ff;
  background-color: #0000ff;
  color: #fff;
}

.btn.btn-green {
  border: 1px solid #008000;
  background-color: #008000;
  color: #fff;
}

/* オレンジ色追加 */
.btn.btn-orange {
  border: 1px solid #bf5914;
  background-color: #ff7314;
  color: #ffffff;
}

/* 暗めのオレンジ色追加 */
.btn.btn-dark-orange {
  border: 1px solid #a14811;
  background-color: #e96615;
  color: #ffffff;
}

/* 茶色追加 */
.btn.btn-brown {
  border: 1px solid #672606;
  background-color: #b03f08;
  color: #ffffff;
}

.btn-block {
  margin-top: 8px;
  margin-bottom: 8px;
  display: block;
  width: 100%;
}

.btn-list.btn-right{
  margin-left: 50%;
  margin-right: 12px;
}

.btn-list .item {
  margin-bottom: -8px;
}

.btn-list .item:nth-child(odd) {
  padding-right: 5px;
}

.btn-list .item:nth-child(even) {
  padding-left: 5px;
}

  /*共通>リコメその他見出し*/
h4.content-title {
    border-left: 4px solid #e35d0f;
    padding-left: .7em;
    font-size: 16px;
    line-height: 24px;
}

  /*共通>左ラインなし版　結果ページなどのタイトルに*/
h5.content-title {
    border-left: 4px solid #000000;
    padding-left: .7em;
    font-size: 16px;
    line-height: 24px;
}

  /*共通>結果ページ関係*/
p.result-text{
  font-size: 16px;
  line-height: 1.5em;
  text-align: justify;
}

  /*共通>結果ページ関係*/
.result-area{
  border: 1px solid #000;
  border-radius: 4px;
  padding: 8px 12px;
}
.result-image{
  margin: 24px auto;
}

.result-image img {
    max-width: 140px;
    margin: auto;
}

  /*共通>editページ関係*/

  /*各項目の上部に余白をあける*/
h5.edit-item {
    margin: 24px 0 8px 0 ;
}

.item-caption {
    margin: 16px 0 16px 0 ;
}

  /*情報登録確認ページ*/

.confirmation{
  table-layout:fixed;margin:0 0 16px;
  empty-cells:show;
  width:100%
}

.confirmation tbody{
  width:100%;
  border-style:solid;
  border-width:1px;
  border-color:rgba(0,0,0,0.2)
}
.confirmation tr{
  height:40px;
  width:100%
}

.confirmation td{
  vertical-align:middle;
  text-align:center;
  font-size:16px;
  background:#ff7314;
  border-bottom:solid 1px transparent;
  border-color:#ff7314;padding:0 4px
}

.confirmation td > span{
  color: #000000;
}


.confirmation td:nth-child(odd){
  width:35%;
  color:#fff
}

.confirmation td:nth-child(even){
  font-size:16px;
  width:65%;
  border-width:0 0 1px 0;
  background:white;
  color:inherit
}

  /*共通>アコーディオンメニュー*/
.accordion ul.acco-none{
  display: none;
}


.accordion h4:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    top: 35%;
    right: 10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.accordion h4 {
    padding: 12px;
    border: 1px solid #ac2904;
    background-color: #ff7314;
    margin: 0 auto;
    color: #ffffff;
    font-weight: normal;
    position: relative;
}

.accordion h4.open:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    top: 35%;
    right: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

  /*MTOP専用*/

.corner-caption {
    margin: 10px 20px;
    line-height: 1.5em;
}

  /*message*/

.message {
    margin: 5px ;
    padding:5px 10px;
    background-color:#FFF;
    font-size:14px;
    border:1px solid #eee;
    border-radius:10px;
    line-height:1.3;
	position:relative;
    font-size:88%;
    color:#000;
}
.message:before {
    border-width:0 8px 8px;
    border-style:solid;
    border-color:#eee transparent;
    width: 0;
	content:"";
	position:absolute;
	top:-8px;
	right:40px;
}
.message:after {
	border-width:0 6px 6px;
	border-style:solid;
	border-color:#FFF transparent;
	content:"";
	position:absolute;
	top:-6px;
	right:42px;
	width:0;
}

/*m/topヘッダー*/
.m-top .header__top {
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fkokura.pga.jp%2Fimage%2Fmtop-logo.sp.480.png%26decrypt%3D1");
    background-size: contain;
    background-repeat:  no-repeat;
    padding-bottom: 5%;
}

@media screen and (min-width:346px) { 
    /*　画面サイズが346pxからはここを読み込む　*/
.m-top .header__top { padding-bottom: 7%;}
}

@media screen and (min-width:376px) { 
    /*　画面サイズが376pxからはここを読み込む　*/
.m-top .header__top { padding-bottom: 8%;}
}

@media screen and (min-width:426px) { 
    /*　画面サイズが426pxからはここを読み込む　*/
.m-top .header__top { padding-bottom: 9.5%;}
}

@media screen and (min-width:496px) { 
    /*　画面サイズが496pxからはここを読み込む　*/
.m-top .header__top { padding-bottom: 10.5%;}
}

@media screen and (min-width:596px) { 
    /*　画面サイズが596pxからはここを読み込む　*/
.m-top .header__top { padding-bottom: 12%;}
}




/* cocoloniバナー画像 */
.cocoloni-banner {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    border: 0;
    background-color: #000000;
    background-image: url(/image/common/cocoloni-brand2.sp.480.png);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: 4pc 10px;
    background-size: 4pc 10px;
    height: 24px;
}