/*
  Skin Name: スーのページ　マヨマニア
  Description: スーのページ全般テンプレ
  Skin URI: http://suemari.com
  Author: スー
  Author URI: http://suemari.com
  Screenshot URI: 
  Version: 1
  Priority: 10
*/

/**************************************/
/* カスタムプロパティ */
/**************************************/
:root{
/* 基本色 */
--impact-color: #f90; /* インパクト色 濃いオレンジ */
--2nd-impact-color: #090; /* インパクト色 濃い緑 */
--std-bg-color: rgba(255,120,0,0.2); /* 基本背景色 オレンジ透明 */
--2nd-bg-color: #ffb; /* 基本背景色２ 黄色 */
--transparent-white: rgba(255,255,255,0.5); /* 白透明 */

/* 全体 */
--bg-img: url("https://mayomania.com/img/mayo-.gif"); /* 背景画像 */
--body-color: #600021; /* 文字色 チョコレート色 */
--body-bg-color: #cfc; /* body背景色 薄い緑 */
--header-bg-color: #97ff99; /* ヘッダー背景色 濃い緑 */
--navi-bg-color: #8f4; /* ナビ背景色 緑色 */
--main-bg-color: var(--transparent-white); /* メイン背景色 透明 */
--side-bg-color: var(--transparent-white);; /* サイド背景色 透明 */
--bottom-bg-color: #ff9; /* スーペーリンク背景色 黄色 */
--footer-bg-color: var(--navi-bg-color); /* フッター背景色 緑 */

/* リンク */
--std-link-color: #03c; /* 基本の文字色 青 */
--std-link-hover: var(--impact-color); /* 基本のリンク色 hover */
--title-link-color: var(--body-color); /* タイトルリンクの文字色 黒 */
--std-link-bg-color-hover: var(--std-bg-color) ; /* 基本のリンクカード背景色hover */

/* ヘッダー */
--header-color: var(--std-link-color); /* 文字色 */

/* オリジナルリンクボタン */
--my-btn-color: var(--impact-color); /* 文字色 */
--my-btn-bg-color: var(--std-bg-color); /* 背景色 */
--my-btn-bg-hover-color: var(--2nd-bg-color); /* 背景色 hover */

/* ナビ */
--navi-color: var(--2nd-impact-color); /* 文字色 */
--navi-color-hover: var(--2nd-impact-color); /* hover文字色 */
--navi-current-bg-color: rgba(255,255,0,0.3); /* hover背景色 薄い黄色透明 */
--navi-li-bg-color: var(--transparent-white);  /* メニュー１個背景色 白透明 */
--navi-hover-color: var(--2nd-impact-color); /* hover文字色 */

/* 見出し */
--h-color: var(--impact-color); /* 文字色 */
--h-bg-img: url("https://mayomania.com/img/orange_back.gif"); /* 背景画像 */
--h1-color: #fff; /* 文字色 */
--h1-bg-color: #fff; /* H1背景色 */
--h2-bg-color: var(--std-bg-color); /* H2背景色 */
--h3-bg-color: var(--transparent-white); /* H3背景色 */
--h4-bg-color: var(--std-bg-color); /* H4背景色 */
--side-h3-bg-color: var(--std-bg-color); /* サイドバーH3背景色 */
--h-border-color: var(--impact-color); /* 線の色 */

/* カルーセル */
--carousel-arrow-color: var(--impact-color); /* 矢印アイコン色 */

/* リストカード home */
--list-home-desc-color: var(--impact-color); /* 説明文字色 */
--list-home-desc-bg-color: var(--transparent-white);/* 説明背景色 */

/* エントリーカード */
--update-color: var(--impact-color); /* 更新日文字色 */
--entry-title-color: var(--title-link-color); /* タイトル文字色 */
--entry-title-color-hover: var(--impact-color); /* 文字色 */
--entry-bg-color-hover: var(--std-link-bg-color-hover); /* 背景色 */
--list-entry-title-color: var(--title-link-color); /* リスト文字色 */
--my-entry-tag-color: #600021; /* myタグ文字色 */
--my-entry-tag-bg-home-color: var(--std-bg-color); /* myタグ背景色 */

/* ブログカード */
--bcard-border-color: var(--impact-color); /* 線の色 */
--bcard-box-shadow-color: var(--impact-color); /* 線の色シャドウ */
--bcard-bg-color: var(--transparent-white); /* 背景色 */
--bcard-bg-color-hover: var(--std-link-bg-color-hover); /* hover 背景色 */
--bcard-label-my-color: var(--impact-color); /* myラベルの文字色 */
--bcard-label-bg-my-color: var(--std-bg-color); /* myラベルの背景色 */
--bcard-title-color: var(--body-color); /* タイトル文字色 */
--bcard-title-hover-color: var(--title-link-color) ; /* タイトル文字色 hover */
--bcard-read--color: var(--body-color); /* 読む背景色 */
--bcard-read-bg-color: var(--2nd-bg-color); /* 読む文字色 */

/* 目次 */
--toc-color: var(--impact-color); /* 文字色 */
--toc-border-color: var(--impact-color); /* 線の色 */
--toc-title-bg-color: var(--std-bg-color); /* タイトル背景色 */
--toc-link-color: var(--impact-color); /* リンク文字色 */
--toc-link-hover-color: var(--impact-color); /* リンク文字色 hover */
--toc-link-bg-color-hover: var(--std-link-bg-color-hover); /* リンク背景色hover */

/* 目次一覧 */
--toc-list-color: var(--title-link-color); /* 文字色 */
--toc-list-color-date: var(--impact-color); /* 投稿日文字色 */
--toc-list-color-update: var(--body-color); /* 更新日文字色 */
--toc-list-border-color: var(--impact-color); /* 線の色 */
--toc-list-bg-color: var(--transparent-white); /* 背景色 */
--toc-list-bg-color-hover: var(--std-link-bg-color-hover); /* 背景色hover */

/* カテゴリ・タグラベル */
--label-cat-bg-color: var(--2nd-bg-color); /* カテゴリラベル色 */
--label-cat-bg-hover-color: rgba(255,255,0,0.3); /* カテゴリラベル背景色 */
--label-cat-count-bg-color: #ffc24b; /* カテゴリラベル　カウント背景色 黄土色 */
--label-cat-count-color: #fff;/* カテゴリラベル　カウント色 白 */
--label-tag-bg-color: #fff; /* タグラベル色 白 */
--label-tag-bg-hover-color: rgba(255,255,0,0.3); /* タグラベル色 白 */

/* 次のページボタン */
--page-next-btn-color: var(--impact-color); /* 文字色 */
--page-next-btn-bg-color: var(--2nd-bg-color);  /* 次のページボタン背景色 */
--page-next-btn-bg-hover-color: var(--std-bg-color); /* 次のページボタンhover背景色 */

/* ページネーション */
--pagination-current-bg-color: var(--std-bg-color); /* 現在のページ背景色 */
--pagination-bg-hover-color: var(--std-bg-color); /* 背景色 hover */
--pagination-color: var(--impact-color); /* 文字色 */

/* 次の記事・前の記事 */
--pager-border-color: var(--impact-color); /* 線の色 */
--pager-bg-color-hover: var(--std-bg-color); /* 背景色hover */
--pager-border-middle-color: var(--impact-color); /* 間の線 */
--pager-arrow-color: var(--impact-color); /* 矢印アイコン色 */
--pager-link-color: var(--title-link-color); /* リンク文字色 */

/* タイルリスト */
--tile-list-color: var(--impact-color); /* 文字色 */
--tile-list-bg-color: var(--transparent-white); /* 背景色 */
--tile-list-bg-color-hover: var(--std-bg-color); /* 背景色 hover */
--tile-list-border-color: var(--impact-color); /* 線の色 */

/* 写真付きカテゴリリスト */
--cat-list-color: var(--impact-color); /* 文字色 */
--cat-list-bg-color: var(--transparent-white); /* 背景色 */
--cat-list-bg-color-hover: var(--std-bg-color); /* 背景色 hover */
--cat-list-border-color: var(--impact-color); /* 線の色 */

/* 説明文・ノート */
--note-bg-color: var(--std-bg-color); /* 背景色 */
--note-bg-img: url("https://suemari.com/img/sec_back.gif"); /* 背景画像 */
--note-color: var(--2nd-impact-color); /* 文字色 */

/* 拡張スタイル */
/* インフォメーション */
--info-list-check-color: #ffa952; /* チェックアイコンの色 */

/* リスト */
--list-check-color: var(--impact-color); /* チェックアイコンの色 */
--list-number-color: #fff; /* 番号リストの色 */
--list-number-bg-color: var(--impact-color); /* 番号リストの背景色 */

/* テーブル */
--table-color: var(--impact-color); /* 文字色 */
--table-th-color: var(--impact-color); /* 文字色 */
--table-border-color: var(--impact-color); /* 枠の色 */
--table-bg-color: var(--transparent-white); /* 背景色 */
--table-th-bg-color: var(--std-bg-color); /* th背景色 */

/* 水平線 */
--hr-color: var(--impact-color); /* 線の色 */

/* ラベル付ボックス */
--lbox-border-color: var(--impact-color); /* 線の色 */
--lbox-bg-color: var(--transparent-white); /* 背景色 */
--lbox-title-bg-color: var(--impact-color); /* タイトル部分の背景色 */
--lbox-title-color: #fff; /* タイトル部分の文字色 */

/* モバイルメニュー */
--m-slide-bg-color: var(--body-bg-color); /* 背景色 */
--m-slide-color: var(--body-color); /* 文字色 */
--m-menu-color: var(--impact-color); /* リンク文字色 */
--m-bottom-menu-color: var(--impact-color); /* 下メニュー文字色 */
--m-bottom-menu-bg-color: var(--body-bg-color); /* 下メニュー背景色 */

/* ボトム */
--bottom-top-border-color: var(--impact-color); /* 上の線の色 */
--bottom-color: var(--impact-color); /* 文字色 */

/* ホテル枠 */
--hotel-border-color: var(--impact-color); /* 枠の色 */
--hotel-bg-color: var(--transparent-white); /* 背景色 */
--hotel-title-color: var(--impact-color); /* タイトル文字色 */
--hotel-title-bg-color: var(--2nd-bg-color); /* タイトル背景色 */
--hotel-icon-color: #fff; /* アイコン文字色 */
--hotel-icon-bg-color: var(--impact-color); /* アイコンの背景色 */
}/* 色指定ここまで */

/**************************************/
/* 全体 */
/**************************************/
body{
background-color:var(--body-bg-color);
background-image:var(--bg-img);
background-position: top left;
background-repeat: repeat;
background-size: auto;
background-attachment: scroll;
color: var(--body-color);
}

/*全体*/
.main{
background-color: var(--main-bg-color);
}
.sidebar{
background-color: var(--side-bg-color);
}
.header-container{
background-color: var(--header-bg-color);
}
#bottom {
border-top: 1px dashed var(--bottom-top-border-color);
background: var(--bottom-bg-color) var(--bg-img) repeat-x 0 0;
color: var(--bottom-color);
}
.footer{
background: var(--footer-bg-color) var(--bg-img);
}
/************************************
** ヘッダー
************************************/
.header{
background-image: var(--bg-img);
background-repeat: repeat;
background-size: auto;
}
.site-name-text{
color: var(--header-color);
font-weight: bold;
}
/************************************
** アンカー
************************************/
a {
  color: var(--std-link-color);
}a:hover {
  color: var(--std-link-hover);
}
/************************************
** ナビメニュー
************************************/
.navi {
background-color: var(--navi-bg-color);
background-image: var(--bg-img);
color: var(--navi-color);
}
.navi-in a {
  color: var(--navi-color-hover);
}
.navi-in ul li{
background: var(--navi-li-bg-color);
}
.navi-in a:hover,
li.current-menu-item a,
li.current-menu-parent a{
background: var(--navi-current-bg-color);
color: var(--navi-hover-color);
}
.navi-in ul li {
border-color: var(--impact-color);
}
.navi-in ul li ul.sub-menu{
background-color: var(--navi-bg-color);
}
/************************************
** カルーセル
************************************/
.carousel-in{
background-color: var(--transparent-white);
}
.carousel-in .card-title{
color: var(--std-link-color);
}
.carousel .slick-arrow::before{
color:var(--carousel-arrow-color);
}
/**************************************/
/* my カードリスト　ホーム */
/**************************************/
.list-home .desc{
color: var(--list-home-desc-color);
background-color: var(--list-home-desc-bg-color);
}
/**************************************/
/* my オリジナルエントリーカード */
/**************************************/
.my-entry-card, .my-entry-card a{
color: var(--entry-title-color);
}
.my-entry-card:hover{
background-color: var(--entry-bg-color-hover);
color: var(--entry-title-color-hover);
}
.my-entry-card a:hover{
color: var(--entry-title-color-hover);
}
.my-entry-card .cat-tag{
color: var(--my-entry-tag-color);
}
.my-entry-card .cat-tag:hover{
color: var(--entry-title-color-hover);
}
/*カテゴリタグ home色*/
.c_home{
background-color: var(--my-entry-tag-bg-home-color);
}
/************************************
** エントリーカード
************************************/
/* タイトル */
.entry-card-title, .new-entry-card-title, .related-entry-card-title, .popular-entry-card-title{
color: var(--entry-title-color);
}
.entry-card-title:hover, .new-entry-card-title:hover, .related-entry-card-title:hover, .popular-entry-card-title:hover{
color: var(--entry-title-color-hover);
}
.a-wrap:hover {
background-color: var(--entry-bg-color-hover);
}
.list .entry-card-title{
color: var(--list-entry-title-color);
}

.list .a-wrap{
border-bottom: 1px solid #ddd;
}
/* 更新日の色 */
.post-update {
color: var(--update-color);
}
/************************************
** ブログカード シンプルリンク用
************************************/
.slink{
/*color:  var(--bcard-title-color);*/
}
a.slink:hover{
background-color: var(--bcard-bg-color-hover);
}
/************************************
** ブログカード
************************************/
.blogcard-wrap{
/*border: 1px solid var(--bcard-border-color);*/
background-color: var(--bcard-bg-color);
box-shadow: 0px 0px 5px var(--bcard-box-shadow-color);
}
.blogcard-wrap:hover{
background-color: var(--bcard-bg-color-hover);
}
.blogcard-title{
color: var(--bcard-title-color);
}
.blogcard-title:hover{
color: var(--bcard-title-hover-color);
}
/* 右下に「読む」 */
.internal-blogcard::after, .external-blogcard::after{
background-color: var(--bcard-read-bg-color); /* 内部リンク右下枠の背景色 */
color: var(--bcard-read--color); /* 内部リンク右下枠の文字色 */
}
.blogcard-title .title{ /* 自由入力 */
color: var(--bcard-label-my-color);
background-color: var(--bcard-label-bg-my-color);
}
.bct-related .blogcard-label{ /* 関連記事 */
background:#fd79a8;
}
.bct-reference .blogcard-label{ /* 参考記事 */
background:#1abc9c;
}
.bct-popular .blogcard-label{ /* 人気記事 */
background:#ffa502;
}
.bct-together .blogcard-label{ /* あわせて読みたい */
background:#0984e3;
}
.bct-detail .blogcard-label{ /* 詳細はこちら */
background:#848ee3;
}
.bct-check .blogcard-label{ /* チェック */
background:#ED4C67;
}
.bct-pickup .blogcard-label{ /* ピックアップ */
background:#F79F1F;
}
.bct-official .blogcard-label{ /* 公式サイト */
background:#636e72;
}
/************************************
** リンクボタン
************************************/
.mybtn, .mybtn-f{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
color: var(--my-btn-color);
background-color: var(--my-btn-bg-color);
}
.mybtn:hover, .mybtn-f:hover{
background-color: var(--my-btn-bg-hover-color);
}
/**************************************/
/* 見出し */
/**************************************/
/* h1 */
h1.entry-title, #archive-title{
color: var(--h1-color);
background-color: var(--h1-bg-color);
background-image: var(--h-bg-img);
padding: 5px 10px 5px 50px !important;/* マヨマニアは左開ける */
/*border: var(--h-border-color) double 3px;*/
}
/* h2 ホームのh2のみ*/
.home h2, .slug-index-e h2, h2.popular{
color: var(--h1-color) !important;
background-color: var(--h1-bg-color);
background-image: var(--h-bg-img);
padding: 5px 10px 5px 50px !important;/* マヨマニアは左開ける */
border: 0 !important;
}
/* h2 */
.article h2, .under-entry-content h2{
color: var(--h-color);
background-color: var(--h2-bg-color);
/*background-image: var(--h-bg-img);*/
/*padding: 5px 5px 5px 50px !important;/* マヨマニアは左開ける */
border: 1px solid var(--h-border-color);
border-left: 20px solid var(--h-border-color);
}
#archive-title:after, .article h1:after, .article h2:after, h3:after, .under-entry-content h2:after, h2 #comments:after, .popular:after {
content: url("https://mayomania.com/img/icon-mayopy.png");
margin: 0 0 0 5px;
position: relative;
top: 8px;
}

/* h3 */
.article h3{
color: var(--h-color);
background-color: var(--h3-bg-color);
border: solid 1px var(--h-border-color);
}
.sidebar h3{
color: var(--h-color);
background-color: var(--side-h3-bg-color);
border: solid 1px var(--h-border-color);
}
/* h4 */
h4{
color: var(--h-color);
border-bottom: 10px solid var(--h4-bg-color);
}
/************************************
** 目次
************************************/
.toc{
color: var(--toc-color);
border: var(--toc-border-color) solid 2px;
}
.toc-title{
background-color: var(--toc-title-bg-color);
border-bottom: 1px dashed var(--toc-border-color);
}
.toc .toc-list a{
color: var(--toc-link-color);
}
.toc .toc-list li{
border-bottom: 1px dashed var(--toc-color);
}
.toc .toc-list li:last-child{
border-bottom: none;
}
.toc .toc-list li a:hover{
background-color: var(--toc-link-bg-color-hover);
}
/************************************
** 目次一覧
************************************/
.toc-all ul li{
color: var(--toc-list-color);
border-color: var(--toc-list-border-color);
background-color: var(--toc-list-bg-color);
}
.toc-all ul li:hover{
background-color: var(--toc-list-bg-color-hover);
}
.toc-all ul li a{
color: var(--toc-list-color);
}
.toc-all ul li a:hover{
}
.toc-all ul li .date{
font-size: 1em;
}
.toc-all ul li .post-date{
color: var(--toc-list-color-date);
}
.toc-all ul li .post-update{
color: var(--toc-list-color-update);
}
.toc-all ul li a:hover{
background-color: var(--toc-list-bg-color-hover);
}
/************************************
** リスト
************************************/
/* 番号付きリスト */
ol.list-number li:before{
color: var(--list-number-color);
background: var(--list-number-bg-color);
}
/************************************
** テーブル（Table）
************************************/
.article table{
background-color: var(--table-bg-color);
}
.article th{
color: var(--table-th-color);
border: solid 1px var(--table-border-color);
background-color: var(--table-th-bg-color);
}
.article td{
border: solid 1px var(--table-border-color);
}
/* 項目の色 ;*/
td.item {
background-color: var(--table-th-bg-color);
color: var(--table-th-color);
}
/* 項目の色 ;*/
td.mark {
background-color: rgba(236,152,0,0.2);
}
/************************************
** 汎用
************************************/
hr {
border-top: 1px dashed var(--hr-color);
color: var(--hr-color);
}

/* カテゴリー説明文 */
.category-page-content, #site-description, .note{
background-color: var(--note-bg-color);
background-image: var(--note-bg-img);
color: var(--note-color);
}
/************************************
** 拡張スタイル
************************************/
.list-check li:before { /* リストのチェック色 */
color: var(--list-check-color); /* list-check内のチェック色 */
}
/**************************************/
/*ラベル付ボックス用*/
/**************************************/
.l-box, .l-box_img{
border: solid 2px var(--lbox-border-color);
background-color: var(--lbox-bg-color);
}
/* ラベル部分 */
.l-box .l-box-title,.l-box_img .l-box-title{
background: var(--lbox-title-bg-color);
color: var(--lbox-title-color);
}
/************************************
** 人気の記事
************************************/
/*カテゴリ　スラッグ別色*/
.wpp-list .c_diary{
background-color:rgba(85,255,204,0.3);/*カオヤイ日記　エメラルドグリーン*/
}
.wpp-list .c_travel{
background-color:rgba(255,0,0,0.3);/*観光スポット　赤*/
}
.wpp-list .c_food{
background-color:rgba(255,119,17,0.3);/*カフェ・レストラン　オレンジ*/
}
.wpp-list .c_cook{
background-color:rgba(255,242,0,0.3);/*自炊　薄い黄色*/
}
.wpp-list .c_thai{
background-color:rgba(204,119,221,0.3);/*タイ語　薄い紫*/
}
.wpp-list .c_story{
background-color:rgba(153,198,0,0.3);/*よもやま　グリーン*/
}

/************************************
** ページネーション
************************************/
.pagination .current {
background-color: var(--pagination-current-bg-color);
}
.pagination a:hover {
background-color: var(--pagination-bg-hover-color);
color: var(--pagination-color);
}

.page-numbers {
  color: var(--pagination-color);
  border: 1px solid var(--pagination-color);
}

/************************************
** 「次のページ」ボタン
************************************/
.pagination-next-link, .comment-btn{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
background-color: var(--page-next-btn-bg-color);
color: var(--page-next-btn-color);
}
.pagination-next-link:hover, .comment-btn:hover{
background-color: var(--page-next-btn-bg-hover-color);
color: var(--page-next-btn-color);
}
/************************************
** 「次の記事」「前の記事」
************************************/
.pager-post-navi{
border: 1px solid var(--pager-border-color);
}
.pager-post-navi a .iconfont{
color: var(--pager-arrow-color);
}
.prev-post-title, .next-post-title{
color: var(--pager-link-color);
}
.pager-post-navi a:hover{
background: none;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 var(--pager-bg-color-hover);
}
.prev-post{
border-right: 1px solid var(--pager-border-middle-color); /* 横に線 */
}

/*480px以下*/
@media screen and (max-width: 480px){
.prev-post{
border-right: 0;
border-bottom: 1px solid var(--pager-border-middle-color); /* スマホは下線 */
}
}
/**************************************/
/* タイルリンク */
/**************************************/
.tile-list li{
color: var(--tile-list-color);
background-color: var(--tile-list-bg-color);
}
.tile-list li:first-child{
border: 1px solid var(--tile-list-border-color);
}
.tile-list li:nth-child(n+2){
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: var(--tile-list-border-color);
}
.tile-list a:hover{
background-color: var(--tile-list-bg-color-hover);
}
/**************************************/
/* カテゴリーリンク */
/**************************************/
.cat-list a{
color: var(--cat-list-color);
background-color: var(--cat-list-bg-color);
border: 1px solid var(--cat-list-border-color);
}
.cat-list a:hover{
background-color: var(--cat-list-bg-color-hover);
}
/************************************
** トップへ戻るボタン
************************************/

.go-to-top-button {
background-color: var(--2nd-bg-color);
color: var(--impact-color);
}
.go-to-top-button:hover {
background-color: var(--std-bg-color);
color: var(--impact-color);
}
/************************************
** スマホ　メニュー関連
************************************/
/* 上下メニュー */
.mobile-menu-buttons, .mobile-menu-buttons .menu-button > a, .menu-button > a:hover{
background: var(--m-bottom-menu-bg-color);
color: var(--m-bottom-menu-color);
background-image: var(--bg-img);
}
.mobile-menu-buttons .menu-button {
border-right: 1px dashed var(--m-menu-color);
}

/* 左右スライドメニュー */
.menu-content{
background-color: var(--m-slide-bg-color);
background-image: var(--bg-img);
background-position: top left;
background-repeat: repeat;
background-size: auto;
background-attachment: scroll;
color: var(--m-slide-color);
}
/* 左メニュー */
.menu-drawer a{
color: var(--m-menu-color);
border-bottom: 1px dashed var(--m-menu-color);
}

/**************************************/
/* サイドバー */
/**************************************/
/* カテゴリーラベル */
.label-cat a, .cat-link{
background-color: var(--label-cat-bg-color);
border: 1px solid var(--impact-color);
color: var(--impact-color);
}
.label-cat a:hover, .cat-link:hover{
color: var(--impact-color);
background-color: var(--label-cat-bg-hover-color);
opacity: 1;/* cat-linkの初期設定消す用 */
}
.label-cat .count {
background-color: var(--label-cat-count-bg-color);
color: var(--label-cat-count-color);
}

/*本文下タグ*/
.tag-link, .comment-reply-link {
color: var(--impact-color);
border: 1px solid var(--impact-color);
background-color: var(--label-tag-bg-color);
}
.tag-link:hover, .comment-reply-link:hover {
background-color: var(--label-tag-bg-hover-color);
  color: var(--impact-color);
}

/**************************************/
/* スーペーリンク */
/**************************************/

/* サムライキャット部分 */
.samuraicat{
border-bottom: 1px dashed var(--impact-color);
}
/* 下部のリンク部分 */
#bottom .bottom_link dl{
  border-bottom: dashed 1px var(--impact-color);
}
#bottom .bottom_link dt{
  border-left: solid 8px var(--impact-color);
}

/**************************************/
/*商品リンク用+ホテル用*/
/**************************************/
/*アマゾン用枠*/
.amazon-item-box{
border: 1px solid #dfdfdf;
background-color: rgb(255, 255, 255);
}
/**************************************/
/* Ｔシャツ　シングルページ用 */
/**************************************/
/* デザイン画像 */
.design{
text-align: center;
background-color: #fff;
border: 1px solid #f90;
border-radius: 10px;
padding: 20px 0;
}
/* 見本のＴシャツ */
.showcase{
border: 1px solid #f90;
border-radius: 10px;
float: left;
max-height: 250px;
max-width: 250px;
}

.shop_link{
background-color: #fff;
border-radius: 10px;
}

.shop_icon{
border: 1px solid #f90;
border-radius: 5px;
width: 100px;
height: 29px;
vertical-align:middle;
}

/**************************************/
/* アイテムループ用(Ｔシャツ) */
/**************************************/
.box-item{
width: 220px;
height: 380px;
float: left;
padding-right: 10px;
text-align: center;
}
.box-item p{
text-align: left;
}
.box-image{
position: relative;
border-radius: 10px;
border: 1px solid #f90;
background-color: #fff;
width: 210px;
height: 210px;
margin-bottom: 10px;
}
.box-image img{
position: absolute;
display: block;
max-width: 200px;
max-height: 200px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.article .box-item a h3{
color: #00f;
text-decoration: underline;
}
.article .box-item a:hover h3{
color: #090;
text-decoration: none;
}
.article .box-item h3{
border-radius: 10px;
width: 100%;
font-size:1rem;
background-color: #8f8;
background-image: none!important;
text-align:center;
border:0;
padding: 5px!important;
margin: 0;
box-sizing: border-box;//余白を内側に設定
}
.box-item p{
font-size: 15px;
line-height: 20px;
}
.box-item .shop_icon{
margin: 10px auto;
}

/**************************************/
/*マヨコレ 一覧ページ用*/
/**************************************/

/* 世界のマヨコレのショートカットリンク部分 */
.short_link{
  border-top: dashed 1px #090;
}

.short_link dl{
  border-bottom: dashed 1px #090;
}

.short_link dt{
  clear: left;
  float: left;
  width: 7.5em;
  border-left: solid 8px #090;
  padding-left: 5px;
  font-weight: bold;
}

.short_link dd{
  margin-bottom: 0.5em;
/*  margin-left: 10em;*/
}

.short_link ul{
display: inline-block;
margin: 0;
}

.short_link li{
float: left;
list-style: none;
border-top: none;
padding: 1px 15px 1px 0;
margin:0;
}

.short_link a{text-decoration:none;}
.short_link a:hover{text-decoration:underline;}

.tag_icon img{
margin: 0;
padding: 0;
    width: 49px;
    height: 20px;
}
.smallMayo img{
    width: 100px;
    height: 100px;
float: left;
margin-right: 3px;
}

.item_loop{
display: flex;
flex-wrap: wrap;
}
.item_loop .item {
box-sizing: border-box;
    border: 1px dashed #f90;
    font-size: 0.8em;
    line-height: 1.5em;
    margin: 3px;
    padding: 5px;
width: 49%; /* 普通は２列 */
background-image: url("https://suemari.com/img/sec_back.gif");
border-radius: 10px;
}
/*480px以下ここから*/
@media screen and (max-width: 480px){
.item_loop .item {
width: 100%; /* スマホは１列 */
}
}/*480px以下ここまで*/

.item_loop .country{
display: inline;
border-bottom: 1px dashed #f90;
}

.item_loop .date{
font-size: x-small;
    line-height: 1em;
}

/**************************************/
/*マヨコレ シングルページ用*/
/**************************************/

.mayo{
text-align: center;
}
.mayo img {
    width: 200px;
    height: 200px;
    margin-right: 10px;
}

.single-collection .mayoInfo .maker, .single-collection_e .mayoInfo .maker {
    font-size: 120%;
    line-height: 100%;
}
.single-collection .mayoInfo .name, .single-collection_e .mayoInfo .name {
    border-bottom: 3px double #f90;
    display: inline;
    font-size: 1.5em;
    line-height: 1.5em;
}

.single-collection .mayoInfo .country, .single-collection_e .mayoInfo .country{
margin: 10px 0;
}
/*アイコン設定*/
.end, .natural, .recommend, .noegg, .shop_button .rakutenLink, .shop_button .amazonLink {
    text-decoration:none;
    display:block;
    text-align:center;
    float: left;
    margin-right: 3px;
    margin-bottom: 3px;
    border-radius:5px;
    cursor:pointer;
    text-decoration: none;
font-size: 0.9em;
}
.item .end, .item .natural, .item .recommend, .item .noegg {
    width:60px;
}
.end, .natural, .recommend, .noegg {
    width:100px;
color: #fff !important;
line-height: 140%;
}
.shop_button .rakutenLink, .shop_button .amazonLink {
    width:150px;
}

a.end {
    background-color:#000;
}
a.natural {
    background-color:#3c3;
}
.natural:hover{
background-color: #7f7;
}
a.recommend {
    background-color:#00f;
}
.recommend:hover{
background-color: #6cf;
}
a.noegg {
    background-color:#f90;
}
.noegg:hover{
background-color: #fe8;
}

.ingredients, .ingredients_ja, .website {
    border: 1px dashed #f90;
    margin: 10px 0;
    padding: 10px;
}

a.rakutenLink {
    color:white;
    background-color:#f00;
    border:1px solid #f00;
}
a.rakutenLink:hover {
    color:red;
    background-color:white;
    border:1px solid #f00;
}

a.amazonLink {
    color:white;
    background-color:#fc9a18;
    border:1px solid #fc9a18;
}
a.amazonLink:hover {
    color:#fc9a18;
    background-color:white;
    border:1px solid #fc9a18;
}