@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/************************************
/ 『グローバルメニュー』
************************************/
.header-container .navi {
  background: linear-gradient(
    #eae4c7 0%,
    #fff 100%
  );
  border-top:2px solid #990000;
  border-bottom:2px solid #990000;
}

 .navi{
  border: 0;
  background-color: transparent;
}

#navi .navi-in>.menu-header .sub-menu {
  background: linear-gradient(
    #eae4c7 0%,
    #fff 100%
  );
}
#navi .navi-in a{
  color:#967037;
  transition: background-color 0.7s;
}

#navi .navi-in a:hover {
  color: #967037;
  background-color:rgba(234,228,199,1);
}

.hlt-top-menu-wrap .header-container{
  background: linear-gradient(
    #eae4c7 0%,
    #fff 100%
  );
  border-top:2px solid #990000;
  border-bottom:2px solid #990000;
  color: #fff;
}

.hlt-top-menu-wrap .header-container .navi{
  border: 0;
}

/************************************
** フッターメニュー
************************************/
.navi-footer-in > .menu-footer li {
  width: 120px;
  border-left: 1px solid #967037;
}
.navi-footer-in > .menu-footer li:last-child {
  border-right: 1px solid #967037;
}
.navi-footer-in a {
  color: #967037;
  text-decoration: none;
  display: block;
  font-size: 14px;
}
.navi-footer-in a:hover {
  background-color: #f5f5dc;
  transition: all 0.5s ease;
  color: #967037;
}

/************************************
** フッター
************************************/
.copyright {
  color: #967037;
}

.article h2 {
	position: relative;
        margin: 40px -10px 20px;
        padding:10px 10px;
        font-size:26px;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}
.article h2:before,
.article h2:after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 8px;
	box-sizing: border-box;
}
.article h2:before {
	top: 0;
	border-top: 4px solid #cc9966;
	border-bottom: 1px solid #cc9966;
}
.article h2:after {
	bottom: 0;
	border-top: 1px solid #cc9966;
	border-bottom: 4px solid #cc9966;
}

.article h3 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #cc9966;
}
.article h3:after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}

.sub {
  font-size:22px;
  font-weight: 700;
  border-bottom:3px solid #e7e7e7;
  padding:5px 10px;
}


#sidebar h3{
  text-align:center; /* タイトルの中央寄せ */
  border-top:1px solid #eee0b5; /* 枠線色 */
  border-right:5px solid #eee0b5; /* ワンポイント色 */
  border-left:5px solid #eee0b5;
  border-bottom:1px solid #eee0b5;
  padding: 8px 8px;
}

.button {
    background-color: #fff;
    border: 1px solid #965a00;
    border-radius: 8px;
    color: #333;
    display: block;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    width: 300px;
}
.button:before,
  button:after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button:before,
.button:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .6s;
  transition: all .6s;
}

/************************************
** 固定ページのアイキャッチ非表示
************************************/

/************************************
** エントリーカードの設定
************************************/
.cat-label {
  border: 1px solid #eee;
  color: #fff;
  background-color: rgba(51, 51, 51, 0.7);
}

/*本文下カテゴリ-エントリーラベルとの調整*/
.cat-link {
  color: #000;
}
.cat-link:hover {
  color: #000;
}

/*---------------------------------
  新着記事NEWマーク用
--------------------------------*/
.new {
	display: inline-block;
	padding: 0 4px;
	margin-right: 4px;
	border: 1px solid rgba(255,0,0,1);
	border-radius: 3px;
	color: rgba(255,0,0,1);
        font-size: 12px;
}

/*---------------------------------
  エントリーカードの立体
--------------------------------*/
.a-wrap:hover {
	  background: linear-gradient(
    #f8f6ec 0%,
    #fff 100%
  );
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.20);
  /*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
}

/* ---------------------------------------------------------
/ 『次の記事と前の記事の隙間』立体化のため
--------------------------------------------------------- */
.pager-post-navi a.prev-post {
  margin-bottom: 8px;
}

/************************************
** サイドバーのスタイル
************************************/
.sidebar {
  font-size: 16px;
}

/************************************
  ショップリンク
************************************/

.shoplink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; 
  margin-bottom: 20px;
  background-color: #eae4c7;
}
.shoplink-image {
  margin-right: 18px;
  float:left;
}
.shoplink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.shoplink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden;
}
.shoplink-name {
  font-size: 17px;
  margin-top: 2px;
}
.shoplink-item {
  margin-top: 5px;
}
.shoplink-caution {
  font-size: 12px;
  color: #990000;
  margin-top: 5px;
}
.shoplink-link {
  font-size: 16px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkseven, .shoplinktower, .shoplinkhmv, .shoplinkhonto, .shoplinkyahoo, .shoplinkishibashi, .shoplinkautobacs, .shoplinkyamada, .shoplinkhands, .shoplinkakibakan, .shoplinkkobo, .shoplinkkindle {
  float: left;
  width: 44%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  border: 2px solid #ddd;
  text-decoration: none;
  font-weight: 700;
}

.shoplinkamazon:before,
.shoplinkamazon:after,
.shoplinkrakuten:before,
.shoplinkrakuten:after,
.shoplinkseven:before,
.shoplinkseven:after,
.shoplinktower:before,
.shoplinktower:after,
.shoplinkhmv:before,
.shoplinkhmv:after,
.shoplinkhonto:before,
.shoplinkhonto:after,
.shoplinkyahoo:before,
.shoplinkyahoo:after,
.shoplinkishibashi:before,
.shoplinkishibashi:after,
.shoplinkautobacs:before,
.shoplinkautobacs:after,
.shoplinkyamada:before,
.shoplinkyamada:after,
.shoplinkhands:before,
.shoplinkhands:after,
.shoplinkakibakan:before,
.shoplinkakibakan:after,
.shoplinkkobo:before,
.shoplinkkobo:after,
.shoplinkkindle:before,
.shoplinkkindle:after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkseven, .shoplinktower, .shoplinkhmv, .shoplinkhonto, .shoplinkyahoo, .shoplinkishibashi, .shoplinkautobacs, .shoplinkyamada, .shoplinkhands, .shoplinkakibakan, .shoplinkkobo, .shoplinkkindle,
.shoplinkamazon:before,
.shoplinkamazon:after,
.shoplinkrakuten:before,
.shoplinkrakuten:after,
.shoplinkseven:before,
.shoplinkseven:after,
.shoplinktower:before,
.shoplinktower:after,
.shoplinkhmv:before,
.shoplinkhmv:after,
.shoplinkhonto:before,
.shoplinkhonto:after,
.shoplinkyahoo:before,
.shoplinkyahoo:after,
.shoplinkishibashi:before,
.shoplinkishibashi:after,
.shoplinkautobacs:before,
.shoplinkautobacs:after,
.shoplinkyamada:before,
.shoplinkyamada:after,
.shoplinkhands:before,
.shoplinkhands:after,
.shoplinkakibakan:before,
.shoplinkakibakan:after,
.shoplinkkobo:before,
.shoplinkkobo:after,
.shoplinkkindle:before,
.shoplinkkindle:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .6s;
  transition: all .6s;
}

.shoplinkamazon {
  color: #fc9711;
}
.shoplinkrakuten {
  color: #cc0000;
}
.shoplinkseven {
  color: #000000;
}
.shoplinktower {
  color: #ff0000;
}
.shoplinkhmv {
  color: #ff0099;
}
.shoplinkhonto {
  color: #3366cc;
}
.shoplinkyahoo {
  color: #ff0000;
}
.shoplinkishibashi {
  color: #ff0033;
}
.shoplinkautobacs {
  color: #ff6633;
}
.shoplinkyamada {
  color: #ff3300;
}
.shoplinkhands {
  color: #006633;
}
.shoplinkakibakan {
  color: #ffcc33;
}
.shoplinkkobo {
  color: #cc0000;
}
.shoplinkkindle {
  color: #fc9711;
}

.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkseven:hover, .shoplinktower:hover, .shoplinkhmv:hover, .shoplinkhonto:hover, .shoplinkyahoo:hover, .shoplinkishibashi:hover, .shoplinkautobacs:hover, .shoplinkyamada:hover, .shoplinkhands:hover, .shoplinkakibakan:hover, .shoplinkkobo:hover, .shoplinkkindle:hover {
  border-color: #ddd;
  color: #fff;
}
.shoplinkamazon:hover {
  background-color: #333333;
}
.shoplinkrakuten:hover {
  background-color: #cc0000;
}
.shoplinkseven:hover {
  background-color: #fc9711;
}
.shoplinktower:hover {
  background-color: #ffcc00;
}
.shoplinkhmv:hover {
  background-color: #3399ff;
}
.shoplinkhonto:hover {
  background-color: #3366cc;
}
.shoplinkyahoo:hover {
  background-color: #ff0000;
}
.shoplinkishibashi:hover {
  background-color: #ff0033;
}
.shoplinkautobacs:hover {
  background-color: #ff6633;
}
.shoplinkyamada:hover {
  background-color: #3366ff;
}
.shoplinkhands:hover {
  background-color: #66cc33;
}
.shoplinkakibakan:hover {
  background-color: #000099;
}
.shoplinkkobo:hover {
  background-color: #cc0000;
}
.shoplinkkindle:hover {
  background-color: #333333;
}


/************************************
  ミニ・ショップリンク
************************************/

.minishoplink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; 
  margin-bottom: 20px;
  background-color: #fff;
}
.minishoplink-link {
  font-size: 12px;
}
.minishoplink-image {
  margin-right: 18px;
  float:left;
}
.minishoplink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.minishoplink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden;
}
.minishoplink-name {
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
  margin-left: 18px;
}
.minishoplink-item {
  margin-top: 5px;
  font-size: 17px;
  font-weight: 700;
}
.minishoplink-caution {
  color: #666666;
  margin-top: 15px;
  margin-left: 18px;
  margin-bottom: 15px;
}
.minishoplink-link {
  font-size: 14px;
}

.minishoplinkamazon, .minishoplinkrakuten, .minishoplinkyahoo, .minishoplinkau, .minishoplinksoft {
  float: left;
  width: 30%;
  text-align: center;
  margin: 2px 5px 2px;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  border: 2px solid #ddd;
  text-decoration: none;
  font-weight: 700;
}

.minishoplinkamazon:before,
.minishoplinkamazon:after,
.minishoplinkrakuten:before,
.minishoplinkrakuten:after,
.minishoplinkyahoo:before,
.minishoplinkyahoo:after,
.minishoplinkau:before,
.minishoplinkau:after,
.minishoplinksoft:before,
.minishoplinksoft:after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.minishoplinkamazon, .minishoplinkrakuten, .minishoplinkyahoo, .minishoplinkau, .minishoplinksoft,
.minishoplinkamazon:before,
.minishoplinkamazon:after,
.minishoplinkrakuten:before,
.minishoplinkrakuten:after,
.minishoplinkyahoo:before,
.minishoplinkyahoo:after,
.minishoplinkau:before,
.minishoplinkau:after,
.minishoplinksoft:before,
.minishoplinksoft:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .6s;
  transition: all .6s;
}

.minishoplinkamazon {
  color: #fc9711;
}
.minishoplinkrakuten {
  color: #cc0000;
}
.minishoplinkyahoo {
  color: #ff0000;
}
.minishoplinkau {
  color: #fc9711;
}
.minishoplinksoft {
  color: #a9a9a9;
}
.minishoplinkamazon:hover, .minishoplinkrakuten:hover, .minishoplinkyahoo:hover, .minishoplinkau:hover, .minishoplinksoft:hover {
  border-color: #ddd;
  color: #fff;
}
.minishoplinkamazon:hover {
  background-color: #333333;
}
.minishoplinkrakuten:hover {
  background-color: #cc0000;
}
.minishoplinkyahoo:hover {
  background-color: #ff0000;
}
.minishoplinkau:hover {
  background-color: #fc9711;
}
.minishoplinksoft:hover {
  background-color: #a9a9a9;
}


/************************************
  固定ページメニューリンク
************************************/

.menulink-box {
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 20px;
  overflow: hidden; 
  margin-bottom: 20px;
  background-color: #fff;
}

.menulink {
  float: left;
  width: 44%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #965a00;
  text-decoration: none;
  font-weight: 700;
}
.menulink-link {
  font-size: 14px;
}

.menulink:before,
.menulink:after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.menulink,
.menulink:before,
.menulink:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .6s;
  transition: all .6s;
}

.menulink {
  color: #000;
}

.menulink:hover {
  border-color: #ccc;
  color: #cc0000;
}
.menulink:hover {
  background-color: #ddd;
}

/************************************
  表作成
************************************/
/* テーブル全体 */
table.table-hrd01 {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 1px 1px 3px 1px #ddd;
	border-collapse: collapse;
	border-spacing: 0;
}

/* ヘッダー行 */
table.table-hrd01 th {
	padding: 5px;
	border: 1px solid #ccc;
	border-width: 0 1px 1px 1px;
	/* ヘッダーの背景色 */
	background: #eae4c7;
	font-weight: bold;
	line-height: 120%;
	text-align: center;
}

/* 通常行 */
table.table-hrd01 td {
	padding: 5px;
	border: 1px solid #ccc;
	border-width: 0 0 1px 1px;
	background: #ffffff;
	/* text-align: center; */
	/* vertical-align: middle; */
}

/*---------------------------------
  比較表作成
--------------------------------*/
/* テーブル全体 */
#table-comp {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 1px 1px 3px 1px #ddd;
	border-collapse: collapse;
	border-spacing: 0;
}

/* ヘッダー行 */
#table-comp th {
	padding: 5px;
	border: 1px solid #ccc;
	border-width: 0 1px 1px 1px;
	/* ヘッダーの背景色 */
	background: #eae4c7;
	font-weight: bold;
	font-size: small;
	line-height: 120%;
	text-align: center;
}

/* 通常行 */
#table-comp td {
	padding: 5px;
	border: 1px solid #ccc;
	border-width: 0 0 1px 1px;
	background: #ffffff;
	font-size: small;
	/* text-align: center; */
	/* vertical-align: middle; */
}


/* セルをバラして上から下に表示 */
@media (max-width: 480px) {
    /* 見出し行を消す */
    #table-comp th {
        display: none;
	text-align: left;
    }
 
    /* セルをブロックとして表示 */
    #table-comp td {
        display: block;
	text-align: left;
    }
 
    /* 最初の項目に背景色を付ける */
    #table-comp td:nth-child(1) {
        margin-top:20px;
        background-color: #eae4c7;
    }
 
    /* セルに見出し代わりの文字を付加 */
    #table-comp td:nth-child(2):before {
	font-weight: bold;
        content: '初年度年会費：';
    }
 
    #table-comp td:nth-child(3):before {
	font-weight: bold;
        content: '年会費：';
    }
 
    #table-comp td:nth-child(4):before {
	font-weight: bold;
        content: '還元率：';
    }

    #table-comp td:nth-child(5):before {
	font-weight: bold;
        content: '付与ポイント種類：';
    }
 
    #table-comp td:nth-child(6):before {
	font-weight: bold;
        content: '国内傷害保険：';
    }
 
    #table-comp td:nth-child(7):before {
	font-weight: bold;
        content: '海外傷害保険：';
    }
 
    #table-comp td:nth-child(8):before {
	font-weight: bold;
        content: 'ショッピング保険：';
    }
 
    #table-comp td:nth-child(9):before {
	font-weight: bold;
        content: '空港ラウンジ：';
    }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
/************************************
スマホ用ショップリンク
************************************/
@media only screen and (max-width: 480px) {
.shoplink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
  background-color: #fff;
}
.shoplink-image {
  margin: 0 0 10px 0;
  float: none;
}
.shoplink-image img {
  margin: 0 auto;
  display: block;
}
.shoplink-info {
  font-size: 14px;
  margin: 0;
}
.shoplink-name {
  font-size: 16px;
  margin-top: 2px;
}
.shoplink-item {
  margin-top: 5px;
}
.shoplink-caution {
  font-size: 12px;
  color: #990000;
  margin-top: 5px;
}
.shoplink-link {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkseven, .shoplinktower, .shoplinkhonto, .shoplinkyahoo, .shoplinkishibashi, .shoplinkautobacs, .shoplinkyamada, .shoplinkhands, .shoplinkakibakan, .shoplinkkobo, .shoplinkkindle {
  float: none;
  display:block;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
}
}

.itunes-preview {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 5px 15px;
  max-width: 300px;
  overflow: hidden; 
}
.itunes-preview-info {
  font-size: 12px;
}

/************************************
スマホ用ミニ・ショップリンク
************************************/
@media only screen and (max-width: 480px) {
.minishoplink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
  background-color: #fff;
}
.minishoplink-image {
  margin: 0 0 10px 0;
  float: none;
}
.minishoplink-image img {
  margin: 0 auto;
  display: block;
}
.minishoplink-info {
  font-size: 14px;
  margin: 0;
}
.minishoplink-name {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}
.minishoplink-item {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
}
.minishoplink-caution {
  color: #666666;
  margin-top: 15px;
  margin-left: 16px;
  margin-bottom: 15px;
}
.minishoplink-link {
  font-size: 14px;
}
.minishoplinkamazon, .minishoplinkrakuten, .minishoplinkyahoo, .minishoplinkau, .minishoplinksoft {
  float: none;
  display:block;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
}
}

/************************************
  スマホ用固定ページメニューリンク
************************************/
@media only screen and (max-width: 480px) {
.menulink-box {
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 10px 15px;
  background-color: #fff;
}

.menulink {
  float: none;
  display:block;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
}
}