@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/**************************************/
/* stripe用 */
/**************************************/
.stripe-box .title{
font-weight: bold;
font-size: 1em;
}
.stripe-box .moji_count, .moji_count{
font-size: 0.8em;
color: #777;
text-align: center;
}
.stripe-box .price{
font-weight: bold;
font-size: 1em;
color: #f00;
margin-top:10px;
}
.stripe-box .note{
    max-width: 614px;
background: var(--std-bg-color) !important;
    padding: 16px;
    border-radius: 6px;
    margin: 24px auto 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  clear:both;
font-size: 0.8em;
}
.asp_product_buy_btn.pink{
background: #ff5760;
color: #fff;
}
.asp_product_buy_btn.pink:hover{
background: #f00;
}
.asp_product_buy_btn{
height: 40px !important;
width: 100%;
font: bold 14px HelveticaNeue, Arial !important;
}
.asp_product_buy_btn_container{
width: 100%;
}
.stripe-btn, .passster-form button[type="submit"]{
    color: #fff;
    background-color: #ff5760;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    line-height: normal;
    padding: 12px 13px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
width: 100%;
}
.stripe-btn:hover{
color: #fff;
background: #f00;
}
/**************************************/
/* passster用 */
/**************************************/

.passster-form h4{
color: var(--impact-color) !important;
}

/**************************************/
/* codoc用 */
/**************************************/
.codoc-support {
    background: var(--std-bg-color) !important;
    border: 1px var(--std-bg-color) !important;
}
.codoc-support .codoc-btn {
    border: 1px solid #red !important;
    background: #fff !important;
}
.codoc-bottom, .codoc-bottom-logged-out {
    display: none !important;
}
.codoc-support .codoc-support-title {
    text-align: left !important;
}
.codoc-support .codoc-btn:hover {
color: var(--impact-color) !important;
}
.codoc-support .codoc-btn {
color: var(--impact-color) !important;
border: 1px solid var(--impact-color) !important;
}

/**************************************/
/* カスタムプロパティ */
/**************************************/
:root{

/* 拡張スタイル */
/* インフォメーション */
--info-color: var(--body-color);/* 文字色 */
--info-border-color: #ffc06e; /* 線の色 */
--info-bg-color: #ffd; /* 背景色 */

/* アラート */
--alert-color: #f45;/* 文字色 */
--alert-border-color: #f45; /* 線の色 */
--alert-bg-color: #ffd; /* 背景色 */

/* レター */
--letter-color: var(--body-color);/* 文字色 */
--letter-border-color: #f60; /* 線の色 */
--letter-bg-color: #ffd; /* 背景色 */

/* 引用 */
--blockquote-bg-color: #fff3e1; /* 背景色 */
--blockquote-border-color: #fff; /* 線の色 */
--blockquote-icon-color: #ffe2b8; /* アイコンの色 */

}/* 色指定ここまで */
/**************************************/
/* 全体 */
/**************************************/
body{
/*font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;*/
font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif;
}
/*メイン・サイド枠　角丸*/
.main, .sidebar{
border-radius: 15px;
}
.main{
padding: 20px 40px;
}
/*スマホはなし*/
@media (max-width:480px){
.main, .sidebar{
border-radius: 0;
}
}
/*全画像ホーバー時透過*/
a:hover img{
 opacity: 0.7;
}

/* パンくずの背景透過 */
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
background-color: rgba(255, 255, 255, 0);
}
/************************************
** ヘッダー
************************************/
.site-name-text{
font-weight: bold;
}
/* myロゴある場合 */
.header{
text-align: center;
}
.header img{
height: 180px;
}
/* ヘッダー画像のみ透過させない*/
.header a:hover img {
 opacity: 1;
}
.header, .header-container, header-container-in{
line-height: 0;
}
.logo-menu-button img{
/*height: 100%;
margin: 0 auto;*/
}
/*834px以下*/
@media screen and (max-width: 834px){
.header img{
height: 70px;
/*display: none;*/ ロゴを表示しない場合
}
}
/************************************
** ナビメニュー
************************************/
/*メニュー左寄せ*/
.navi-in > ul{
justify-content: flex-start;
}
/*フォント小さく*/
.navi-in a{
font-size: 15px;
}
/*高さを低く*/
.navi-in > ul li{
height: 35px;
line-height: 35px;
margin: 2px;
border-radius: 5px;
}
.navi-in > ul li:hover > ul{
display: block;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
height: 35px;
}
/*サブメニュー*/
.navi-in ul li ul.sub-menu{
width: 560px;
}
.navi-in ul li ul.sub-menu li{
height: 25px;
line-height: 25px;
width: 32.6%;
float: left;
}
.navi-in .sub-menu a{
font-size: 12px;
}

/************************************
** カルーセル
************************************/
.carousel-in{
border-radius: 10px;
}
.carousel-in .card-title{
font-size: 0.7em;
margin-top: 10px;
}
.carousel-entry-card-thumb{
display: block; /* inline-blockだと画像が縮小されるので。 */
}
.carousel-entry-card-thumb img{
width: 100%;
max-height: 110px;
object-fit: cover; /* 縦画像下カット */
}
/************************************
** 国旗部分
************************************/
/* 国旗部分 */
.lang{
float: right;
margin-right: 10px;
}
.lang a>img{
opacity:0.4;
filter: alpha(opacity=40);
}
.lang a:hover img{
opacity:1;
filter: alpha(opacity=100);
}
/**************************************/
/* my カードリスト　ホーム */
/**************************************/
.list-home{
font-size: 0.9em;
}
.list-home a{
text-decoration: none;
}
.list-home h3{
margin: 10px 0;
}
.list-home img{
width: 200px;
margin-right: 20px;
height: auto;
float: left;
}
/*480px以下ここから*/
@media screen and (max-width: 480px){
.list-home img{
width: 100%;
float: none;
}
}/*480px以下ここまで*/
.list-home .date, .list-home .count{
text-align: right;
}
.list-home .desc{
font-size: 0.9em;
margin: 20px 0;
padding: 15px;
border-radius: 10px;
}
/**************************************/
/* my オリジナルエントリーカード */
/**************************************/
.home a, .slug-index-e a{
text-decoration: none;
}
.home a h2, .slug-index-e h2{
position: relative;
}
.home a h2:after, .slug-index-e a h2:after{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f0ca"; /* 目次 */
 position: absolute;
right: 10px;
}

/* カード横並び */
.my-entry-card-list{
display: flex;
flex-wrap: wrap;
text-align: center;
}
.my-entry-card, .my-entry-card a{
text-decoration: none;
margin-bottom: 20px
}
.my-entry-card a:hover{
text-decoration: none;
}
/* カード横4列 */
.my-entry-card{
padding: 6px;
width: 25%;
}
.my-entry-card-thumb img{
max-height: 120px; /* エントリーカード画像サイズ */
width: 100%;
object-fit: cover; /* 縦画像下カット */
object-position: 0 10%; /* 左位置0 上位置10% %表示*/
}

.rect-vertical-card .related-entry-card-title{ /*関連記事タイトル*/
font-size: 0.7em;
font-weight: normal;
}

/*481px以上*/
@media screen and (min-width: 481px){
/* T-シャツはカード横3列 タブレット以上　スマホ以下は２列*/
.shirt .my-entry-card{
padding: 5px;
width: 33%;
}
.shirt .my-entry-card-thumb img{
max-height: 250px; /* T-シャツエントリーカード画像サイズ */
width: 100%;
object-fit: cover; /* 縦画像下カット */
object-position: 0 10%; /* 左位置0 上位置10% %表示*/
}
}/*481px以上ここまで*/

/*834px以下*/
@media screen and (max-width: 834px){
/* カード横2列 */
.my-entry-card{
width: 50%;
}
.my-entry-card-thumb img{
max-height: 260px ; /* エントリーカード画像サイズ */
}
}/*834px以下ここまで*/

/*480px以下ここから*/
@media screen and (max-width: 480px){
.my-entry-card-thumb img{
max-height: 120px; /* エントリーカード画像サイズ */
}
}/*480px以下ここまで*/

/* カテゴリタグ */
.my-entry-card .cat-tag{
text-align: center;
font-size: 0.8em;
font-weight: bold;
padding: 3px 5px;
border-radius: 5px;
}
.my-entry-card a.a_cat-tag{
text-decoration: none;
}
/* タイトルリンク */
.my-entry-card .title{
margin-top: 5px;
font-size: 0.7em;
text-align: left;
line-height: 1.7;
}
/* 日付 */
.my-entry-card .date{
text-align: right;
font-size: 0.6em;
}
.home .date .post-update{ /* ホームは日付小さくなるのを防ぐ */
font-size: 1.1em;
}
/*カテゴリタグ スラッグ別色*/
/*エメラルドグリーン*/
/*スーめも*/
/*旅の雑多ブログ*/
/*カオヤイ日記*/
.c_emgreen,
.c_blog, .c_china2, .c_shorttrip, .c_kyoto, .c_tokyo, .c_okinawa, .c_okinawa2,
.c_diary, .c_diary-e{
background-color:rgba(85,255,204,0.3);
}
/*赤*/
/*更新履歴*/
/*レポート*/
/*観光スポット*/
/*便利コンテンツ*/
/*デザイン*/
.c_red,
.c_news,
.c_report,
.c_spot,
.c_useful,
.c_travel,
.c_design{
background-color:rgba(255,0,0,0.3);
}
/*オレンジ*/
/*旅の持ち物*/
/*カフェ・レストラン*/
.c_orange,
.c_items,
.c_food{
background-color:rgba(255,119,17,0.3);
}
/*薄い黄色*/
/*買い物*/
/*クーポン*/
/*自炊*/
/*コレクション*/
/*アイテム*/
.c_yellow,
.c_shopping,
.c_coupon,
.c_cook,
.c_collection,
.c_item{
background-color:rgba(255,242,0,0.3);
}
/*薄い紫*/
/*アプリ*/
/*タイ語*/
.c_purple,
.c_apps,
.c_thai{
background-color:rgba(204,119,221,0.3);
}
/*グリーン*/
/*スーパソ*/
/*ホテル*/
/*よもやま*/
/*本*/
.c_green,
.c_pc,
.c_hotel, .c_hotel-stay,
.c_story,
.c_book{
background-color:rgba(153,198,0,0.3);
}
/************************************
** エントリーカード
************************************/
.admin-pv{
text-align: right;
font-size: 0.7em;
}
/* タイトル */
.new-entry-card-title, .popular-entry-card-title{
font-size: 0.7em;
line-height: 1.5em;
margin-top: 10px;
}
/* カード横並び */
.new-entry-cards, .popular-entry-cards{
display: flex;
flex-wrap: wrap;
}
/* カード横4列 */
.new-entry-card-link, .widget-entry-cards .a-wrap, .popular-entry-card-link, .related-entry-card-wrap{
padding: 6px;
width: 25%;
}
.new-entry-card img, .related-entry-card img, .popular-entry-card img{
max-height: 120px ; /* エントリーカード画像サイズ */
width: 100%;
object-fit: cover; /* 縦画像下カット */
}
/* 関連記事の下余白消去 */
.related-entry-card-content{
padding-bottom: 0;
}
.rect-vartical-card .related-entry-card-title{
font-size: 0.7em;
line-height: 1.5;
font-weight: normal;
}
/* 新着のみ日付表示 */
.new .new-entry-card-date{
display: block;
padding-top: 0.2em;
text-align: right;
}
.new-entry-card-update-date{
display: none;
}
.new .new-entry-cards .cat-label {
display: inline;
}
/*834px以下*/
@media screen and (max-width: 834px){
/* カード横4列 */
.new-entry-card-link, .widget-entry-cards .a-wrap, .popular-entry-card-link, .related-entry-card-wrap{
width: 25%;
}
}/*834px以下ここまで*/
/*480px以下*/
@media screen and (max-width: 480px){
/* カード横2列 */
.new-entry-card-link, .widget-entry-cards .a-wrap, .popular-entry-card-link, .related-entry-card-wrap{
width: 50%;
}
}/*480px以下ここまで*/
/************************************
** エントリーカード リスト
************************************/
.entry-card-info { /* 更新日を左にする */
flex-direction: row-reverse;
}
.list .entry-card-title{
margin-bottom: 0.4em;
padding: 0.4em 0;
/*font-size: 1.1em;*/
line-height: 1.6em;
}
.list .entry-card-thumb{
width:200px;
}
.list .entry-card-thumb img{
max-height: 150px;
object-fit: cover;/* 縦画像下カット */
}
.list .entry-card-content{
margin-left: 220px;
}
.a-wrap{
margin-bottom: 0;
}

/*834px以下*/
@media screen and (min-width: 834px){
.entry-card-thumb {
width: 30%;
}
.entry-card-content{
margin-left: 35%;
}
}/*834px以下ここまで*/
/*480px以下*/
@media screen and (max-width: 480px) {
.list .entry-card-title {
font-size: 0.8em;
}
.list .entry-card-thumb{
width:40%;
}
.list .entry-card-thumb img{
max-height: 130px;
object-fit: cover;/* 縦画像下カット */
}
.list .entry-card-content{
margin-left: 45%;
}
.list .entry-card-info > * {
font-size: 0.6em;
}
}/*480px以下ここまで*
/************************************
** ブログカード シンプルリンク用
************************************/
.author-box, .stripe-box, .passster-form{
margin-top: 30px;
border-radius: 5px;
box-shadow: 2px 2px 0 #EEE;
line-height: 1.5;
display: block;
padding: 15px 15px 14px 10px;
text-decoration: none;
background-color: var(--bcard-bg-color)!important;
box-shadow: 0px 0px 5px var(--bcard-box-shadow-color);
font-size: 0.8em;
font-weight: normal;
}

.links-wrap{
display: flex;
flex-wrap: wrap;
line-height: 1.7;
margin-bottom: 5px;
}
a.link-wrap{
color: #fff;
padding: 4px 10px;
border-radius: 5px;
font-size: 0.8em;
margin: 0 5px 5px 0;
text-decoration: none;
}
a.link-sue{
background-color: #ed958e;
}
a.link-amazon{
background-color: #f39800;
}
a.link-facebook{
background-color: #4267b2;
}
a.link-twitter{
background-color: #1da1f2;
}
a.link-youtube{
background-color: #f00;
}
a.link-insta{
background-color: #000;
}
a.link-line{
background-color: #00b900;
}
/************************************
** ブログカード シンプルリンク用
************************************/
.slink {
margin-top: 30px;
border-radius: 5px;
box-shadow: 2px 2px 0 #EEE;
line-height: 1.5;
display: block;
padding: 15px 15px 14px 10px;
text-decoration: none;
background-color: var(--bcard-bg-color);
box-shadow: 0px 0px 5px var(--bcard-box-shadow-color);
font-size: 0.9em;
font-weight: normal;
}

/* 効果遅く */
/*
a, a:hover { 
transition: background-color .25s ease-out, color .25s ease-out;
}*/
a.slink:before {
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f138"; /* 丸→ */
margin-right: .1em;
padding: .3em;
}
/************************************
** ブログカード
************************************/
.blogcard-wrap {
width: 100%;
border-radius: 5px;
margin-top: 30px;
}
.blogcard {
border: none;
padding-top: 20px;
}
.blogcard-post-date, .blogcard-favicon, .blogcard-site, .blogcard-snippet{
display: none;
}
.blogcard-thumbnail{
width: 90px;
margin: 0;
}
.blogcard-content {
margin-left: 100px;
max-height: 140px;
min-height: 80px;
overflow: hidden;
}
/*480px以下*/
@media screen and (max-width: 480px){
.blogcard-content {
margin-left: 100px;
max-height: 140px;
min-height: 50px;
overflow: hidden;
}
}/*480px以下ここまで*/
/* 右下に「見る」 */
.internal-blogcard::after, .external-blogcard::after{
content: '見る \00bb'; /* 内部・外部リンク右下枠の文言 */
position: absolute;
bottom: .5rem;
right: 1rem;
font-size: 70%;
padding: .3em 1em;
font-weight: bold;
border-radius: 2px;
}
/* ラベル */
.blogcard-title{
position: relative;
/*font-weight: normal; これは、master.cssのカード全体が太字なるのを消去だが、各中身をnormalにすることにする*/
}
.blogcard-title .title{
position: absolute;
display: inline-block;
top: -23px;
left: 15px;
font-size: 13px;
font-weight: bold;
padding: 3px .6em;
border-radius: 3px;
letter-spacing: .7px;
}
.blogcard-title .title:before{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f0c1"; /* リンク */
margin-right: .1em;
padding: .3em;
}

/************************************
** リンクボタン
************************************/
/* アフィリとかリンクボタン */
.article .btn-wrap{
display: block;
margin: 10px 0;
}

.mybtn, .mybtn-f{
text-decoration: none;
font-size: 12pt;
font-weight: bold;
margin: 5px auto;
text-align: center;
padding: 8px 10px;
border-radius: 10px;
}
.mybtn{ /*通常は300px*/
display: block;
width: 300px;
}
.mybtn-f{ /*fitは可変*/
display: inline-block;
}
.mybtn:active, .mybtn-f:active{ /*押したとき fitは効かない？*/
-webkit-transform: translateY(2px);
transform: translateY(2px);/*沈むように*/
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
/* アイコン指定 googo map */
.gmap:before {
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f3c5"; /* 地図マーカー */
margin-right: .1em;
padding: .3em;
}
/* アイコン指定 google */
.google:before {
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f002"; /* 虫メガネ */
margin-right: .1em;
padding: .3em;
}
/* アイコン指定 ダウンロード */
.dl:before {
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f56d"; /* ダウンロード */
margin-right: .1em;
padding: .3em;
}
/**************************************/
/* 見出し */
/**************************************/
/* シングルタイトル */
h1.entry-title, #archive-title{
  line-height: 2.5rem;
  padding: 10px 20px;
  border-radius: 15px;
}
/* H2 */
.article h2, .under-entry-content h2, .popular{
font-size: 22px;
border-radius: 5px;
padding: 5px 10px;
line-height: 2;
margin: 2.4em 0 1em;
}
.entry h2 a{
font-weight: 700;
font-size: 1.2rem;
line-height: 1.4;
}
.article h3, .sidebar h3{
border-radius: 25px;
padding: 10px 25px;
line-height: 1.5;
}
.article h4{
border-top: 0;
}
/************************************
** 目次
************************************/
.toc{
font-size: 0.9em;
padding: 0;
width: 90%;
border-radius: 5px;
}
.toc-title {
border-radius: 5px 5px 0 0;
padding: 5px;
}
/* 目次のアイコン */
.toc-title:before {
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f0ca";
margin-right: .5em;
padding: .3em;
}
/* 余白 */
.toc-list.open{
margin: 0 0 10px 0;
padding: 0 2em 0 3em;
}
.toc-list li a{
display: block;
margin: 0;
padding: 10px 0;
}
.toc-list li a:hover{
text-decoration: none;
}
@media (max-width:480px){
.toc{
width:100%;
}
}/*480px以下ここまで*/
/************************************
** 目次一覧リンク
************************************/
.list-link{
text-align: center;
padding: 10px;
border-radius: 5px;
}
/************************************
** 目次一覧
************************************/
.article .toc-all .admin-pv{ /* アクセス数 */
font-size: 0.7em;
}
.toc-all .date{ /* 日付 */
font-size: 0.7em;
text-align: right;
}
.article .toc-all ul{
list-style-type: none;
padding: 0;
}
.article .toc-all ul li{
position: relative;
padding: 10px;
border-width: 0 0 0 10px;
border-style: solid;
margin: 20px 0;
line-height: 1.5;
}
.article .toc-all ul li a{
text-decoration: none;
}
.article .toc-all ul li .edit{ /* 編集リンク */
position: absolute;
top: 0;
right: 0;
font-size: small;
text-align: right;
}
/************************************
** 投稿ページ
************************************/
/*行間を広げる*/
.entry-content > p, .sidebar p {
/* margin:2em 0; */
/* line-height:2; */
}
p, .paragraph{
margin: 1.2em 0;
}
.entry-content > *, .demo .entry-content p{
margin-top: 1.4em;
margin-bottom: 1.4em;
}
.entry-content .wp-caption-text {
margin: 0;
}
/* アイキャッチのラベル非表示 */
.cat-label{
display: none;
}
/**************************************/
/* メールフォーム用(現在スーペーのみ) */
/**************************************/
table.mail, table.mail th, table.mail td{
border:none;
}
table.mail{
border-radius: 15px;
}
table.mail tr:nth-child(1) th{
border-radius: 15px 15px 0 0;
}
table.mail tr:nth-child(5) th{
border-radius:  0 0 15px 15px;
}
/*項目前後に★*/
.mail th::before, .mail th::after{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: '\f005';
display: inline-block;
position: relative;
top: 1px;
font-size: 15px;
color: #f45;
padding: 0 5px;
}
input[type="text"], input[type="email"], input[type="submit"], input[type="number"], input[type="button"], .wpcf7-form textarea, .wpcf7-form select, select{
border:2px solid #f99;
border-radius: 4px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type="text"]:focus, input[type="email"]:focus, .wpcf7-form textarea:focus, input[type="text"]:hover, input[type="email"]:hover, .wpcf7-form textarea:hover, .wpcf7-form select:focus, .wpcf7-form select:hover {
border:2px solid #f45;
}
.wpcf7-submit{
text-align: center;
font-size: 2rem;
}
.button, input[type="submit"], input[type="reset"], input[type="button"] {
background-color: rgba(255, 0, 0, 0.1);
border: 1px solid #f45;
color: #f45;
margin-bottom: 20px;
padding: 6px 12px;
width: 100%
}
.button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
background-color: rgba(255, 0, 0, 0.3);
}

/**************************************/
/* ホロスコープ、数秘術フォーム */
/**************************************/
.h_date select{
padding: 10px;
margin: 0 5px 10px 0;
}
.h_date select.year, .h_date input[type="number"].year{
width: 85px;
}
.h_date select.month, .h_date select.time, .h_date input[type="number"].month, .h_date input[type="text"].month{
width: 80px;
}
/* バックをグレーに */
.h_date input[type="text"].grey{
background-color:#eee;
}

.h_date input[type="text"].name{
width: 250px;
margin: 5px;
}
.h_date input[type="button"].button{
width: 80px;
}
/* https://kinocolog.com/css_checkbox/
/* 元々のチェックボックス（非表示） */
.mycheckbox input[type="checkbox"]{
    display: none;
}
/* チェックボックスの代わりを成すラベル */
.mycheckbox input[type="checkbox"]+label{
display: none;
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
padding-right: 10px;
}
/* ラベルの左に表示させる正方形のボックス□ */
.mycheckbox input[type="checkbox"]+label::before{
content: "";
position: absolute;
display: block;
box-sizing: border-box;
width: 20px;
height: 20px;
border-radius: 4px;
margin-top: -10px;
left: 0;
top: 50%;
border: 2px solid;
border-color: #f99; /* 枠の色変更 お好きな色を */
background-color: #FFF; /* 背景の色変更 お好きな色を */
}
/* チェックが入った時のレ点 */
.mycheckbox input[type="checkbox"]:checked+label::after{
content: "";
position: absolute;
display: block;
box-sizing: border-box;
width: 18px;
height: 9px;
margin-top: -9px;
top: 50%;
left: 3px;
transform: rotate(-45deg);
border-bottom: 3px solid;
border-left: 3px solid;
border-color:  #585753; /* チェックの色変更 お好きな色を */
}
.h_date select.timezone{
width: 300px;
}
.h_date select.house_sys{
width: 190px;
}
.h_date select.pref{
width: 150px;
}
.h_date input[type="submit"]{
padding: 10px;
font-size: 20px;
}
/************************************
** 拡張スタイル
************************************/
.info, .information-box, .question-box, .alert, .alert-box, .memo-box, .comment-box, .letter{
font-size: 0.9em;
margin: 2em 0;
padding: 1em;
border-radius: 5px;
}
.info{ /* infoの色 */
border: solid 4px var(--info-border-color);
color: var(--info-color);
background-color: var(--info-bg-color);
}
.alert{ /* alertの色 */
border: solid 4px var(--alert-border-color);
color: var(--alert-color);
background-color: var(--alert-bg-color);
}
.alert:before{ /* alertのアイコンと線なくす */
content: '';
border-right: 0;
}
/* infoボックスの中のリストにチェック付ける */
.info ul, .list-check, .applink ul{
list-style: none;
padding:0;
margin:0;
}
.info ul li, .list-check li, .applink ul li{ 
position: relative;
padding-left: 25px;
}
.info ul li:before,.list-check li:before, .applink ul li:before{ /* listのチェックアイコン */
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f058"; /*アイコン*/
position: absolute;
left:0;
}
.info ul li:before, .applink ul li:before{
color: var(--info-list-check-color); /* info内のチェック色 */
}

/*レター*/
.letter{
background: var(--letter-bg-color);
box-shadow: 0px 0px 0px 5px var(--letter-bg-color);
border: dashed 1px var(--letter-border-color);
}

/*文字付区切り線*/
.text-divider{
display: flex;
align-items: center;
color: var(--impact-color);
font-weight: bold;
font-size: 0.9rem;

}
.text-divider::before,
.text-divider::after{
  content: '';
  height: 2px;
  background-color: var(--impact-color);
  flex-grow: 1;
}
.text-divider::before{
  margin-right: 1rem;
}
.text-divider::after{
  margin-left: 1rem;
}
/*太字文字*/
.bold-blue{
color: var(--std-link-color);
}
/************************************
** 汎用
************************************/
/* 並び用 */
.column-wrap-my{
display: flex;
flex-wrap: wrap;
}
/* ２列並び */
.column-50{
width: 50%;
padding: 10px;
}
/*480px以下ここから*/
@media screen and (max-width: 480px){
.column-50{
width: 100%;
padding: 0;
}
}/*480px以下ここまで*/

/* カテゴリー説明文、ノート */
.category-page-content, #site-description, .note{
border-radius: 15px;
margin: 10px 0px;
padding: 5px 15px;
font-size: 16px;
}
.fleft{
float:left;
}
.aright{
text-align:right;
}
.mr10{
margin-right: 10px;
}
.lpic{
float:left;
margin: 0 10px 10px 0;
}
hr {
border-bottom: none;
text-align: center;
margin: 20px auto 20px auto;
width: 95%;
}
/* large */
.x-large{
font-size: x-large;
}
.xx-large{
font-size: xx-large;
}
/* small */
.small{
font-size: small;
}
.x-small{
font-size: x-small;
}
.xx-small{
font-size: xx-small;
}
.clear{
clear: both;
}
/*******************************
* 補足説明
********************************/
/* 汎用　黄色　蛍光ペン */
strong{
background: linear-gradient(transparent 60%, #ffff76 40%);
}

/* オレンジバッヂ */
.badge{
/*  margin-right: 5px; */
color: #fff;
background-color: #fc7a22;
padding: 1px 5px 0;
border-radius: 2px;
font-size: 13px;
}
/*！リンクに→*/
.arrow::before{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: '\f061';
display: inline-block;
position: relative;
top: 1px;
font-size: 20px;
color: #fc7a22;
padding-right: 5px;
}
/************************************
** リスト
************************************/

/* 番号付きリスト */
ol.list-number{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:0.5em;
}
ol.list-number li {
position: relative;
padding-left: 35px;
line-height: 1.5em;
padding: 0.5em 0.5em 0.5em 30px;
}
ol.list-number li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*以下数字のデザイン変える*/
display:inline-block;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 0.8em;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
}
/************************************
** 引用
************************************/
blockquote{
position: relative;
background: var(--blockquote-bg-color);
font-size: 0.9em;
border-radius: 5px;
border-color: var(--blockquote-border-color);
}
blockquote:before{
display: inline-block;
position: absolute;
top: 7px;
left: 10px;
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
color:  var(--blockquote-icon-color);
font-size: 58px;
line-height: 1;
}
blockquote p{
position: relative;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}
blockquote cite{
position: relative;
z-index: 3;
display: block;
text-align: right;
}
blockquote:after{
content: "";
}
/************************************
** テーブル（Table）
************************************/
.article table{
font-size: 1rem;
line-height: 1.5rem;
}
.article th{
padding: 10px;
}
.article table tr:nth-of-type(2n+1){ /* 1行ごと色違い消去 */
background-color: transparent;
}
table.first-tr-center tr{ /* 基本左寄せ */
text-align: left;
}
table.first-tr-center tr:nth-child(1){ /* 1行目のみ中央揃え */
text-align: center;
}
.article td{
padding: 10px;
}
/* 項目の色 ;*/
td.item {
font-size: 1rem;
font-weight: bold;
vertical-align: top;
white-space: nowrap;
}

/* プロフィール用 ;*/
.small-font{
font-size: 0.8em;
}
.photos{
display: flex;
flex-wrap: wrap;
}
.photos a{
padding: 4px;
width: 25%;
}
.photos img{
border-radius: 10px;
}
/*480px以下ここから*/
@media screen and (max-width: 480px){
.photos a{
width: 50%;
}
}/*480px以下ここまで*/

/* メディア履歴用 ;*/
.media-photos table{
font-size: 0.8em;
}
.media-photos table td.item{
font-size: 1.1em;
font-weight: normal;
}
.media-photos img{
float: left;
width: 100px;
padding-right: 5px;
}
/*480px以下ここから*/
@media screen and (max-width: 480px){
/* スマホの場合　アイテム欄の下線なし */
td.no-b-bottom{
border-bottom: none;
}

/* スマホの場合　セルが縦並び */
.table-v table { width: 100%;}
.table-v tr{
display: block;
margin-bottom: 20px;
}
.table-v td, .table-v th {
display: block;
padding: 10px;
}
/* スマホの場合　１行目消去 */
table.first-tr-none tr:nth-child(1){ /* 1行目のみ消去 */
display: none;
}
}/*480px以下ここまで*/

/************************************
** テーブル横スクロール（Table）
************************************/
/*img.flag{
max-width: 100px;
}*/
@media screen and (max-width:720px){/* ここから */
.table-scroll {
box-sizing: border-box;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
}/* ここまで */
/************************************
** テーブル見出し固定スクロール（Table）
************************************/
/* tableタグ */
.sticky_table {
  display: block;
  position: relative;
  overflow: scroll;
  width: calc(100vw - 3.0rem);
  height: calc(75vh);
/*  border-collapse: collapse;*/
  font-size: 0;
white-space: nowrap;
/* firefoxで線が消える対策 */
border-collapse: separate;
border-spacing:0;
empty-cells:show;
border-top:1px solid var(--table-border-color);
border-right:none;
border-bottom:none;
border-left:1px solid var(--table-border-color);
}
/* thead, tbodyタグ */
.sticky_table thead,
.sticky_table tbody {
/*  display: block;*/
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
/* th, tdタグ */
.sticky_table th{
  background: var(--table-th-bg-color-sticky);
/* firefoxで線が消える対策 */
border-top:none;
border-left:none;
}
.sticky_table td {
/*  display: inline-block;*/
  width: 8.0rem;
  font-size: 1.0rem;
/* firefoxで線が消える対策 */
border-top:none;
border-left:none;
}
/* 列ヘッダの固定 */
.sticky_table tbody th {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
}
/* 行ヘッダの固定 */
.sticky_table thead th{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}
/* 行・列ヘッダの交差部分の固定 */
.sticky_table thead th.blank {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}

/************************************
** 人気の記事
************************************/
/* タイトル */
.wpp-list .site{
border-radius: 5px;
padding: 5px 0px;
font-weight:bold;
text-align: center;
margin-bottom: 5px;
}
.wpp-list .site a{
text-decoration: none;
color: #600021;
}
/* アイキャッチ＆リンク */
.ninki-post ul.wpp-list{
margin: 0px;
padding: 0px;
list-style-type: none;
width:100%;
}
.wpp-list{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ninki-post ul.wpp-list li{
vertical-align: top;
float:left;
/* line-height:150%;*/
width:125px;
font-size: 12px;
/*min-height: 230px;*/
text-align:left;
margin: 0 0 15px 0;
padding: 0 8px;
clear: none;
}
.ninki-post ul.wpp-list li img{
padding:2px;margin: 0;
border: #ccc 1px solid;
border-radius: 10px;
width:120px;height:120px;
}
.ninki-post a{
text-decoration: none;
}
.ninki-post .wpp-list a:hover{
text-decoration: underline;
}
.wpp-list .date{
font-size:x-small;
}
/*480px以下*/
@media screen and (max-width: 480px){
.ninki-post ul.wpp-list li{
font-size: 14px;
width:160px;
}
.ninki-post ul.wpp-list li img{
width:150px;height:150px;
}
}/*480px以下ここまで*/
/************************************
** 「次のページ」ページネーション
************************************/
.pagination, .pagination-next{
margin: 20px 0 0 0;
}
.pagination-next-link, .comment-btn{
border-radius: 15px;
font-size: 1em;
border: none;
}
.pagination-next-link:hover, .comment-btn:hover{
transition: none;
}
.pagination-next-link:active, .comment-btn:active{ /*押したとき*/
-webkit-transform: translateY(2px);
transform: translateY(2px);/*沈むように*/
}
/* 矢印のアイコン */
.pagination-next-link:before{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f138";
margin-right: .5em;
padding: .3em;
}
/************************************
** 投稿ナビ
************************************/
.pager-post-navi a{
font-size: 0.7em;
line-height: 1.7;
}
.pager-post-navi img{
border-radius: 10px;
}
/*480px以下*/
@media screen and (max-width: 480px){
.pager-post-navi .card-thumb img {
max-height: 70px;
object-fit: cover;/* 縦画像下カット */
}
}/*480px以下ここまで*/
/*481px以上*/
@media screen and (min-width: 481px){
.pager-post-navi{
display: flex;
flex-direction: row;
position: relative;
justify-content: space-between;
}
.pager-post-navi a.prev-post,
.pager-post-navi a.next-post {
width: 50%;
margin: 0;
}
.pager-post-navi img {
max-height: 90px;
object-fit: cover;/* 縦画像下カット */
}
}/*481px以上ここまで*/
/**************************************/
/* １行タイルリンク */
/**************************************/
ul.tile-list, ul.tile-list-ex{
display: -webkit-box; /* Androidブラウザ用 */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 10px 0;
}
/* カード横1列 */
.tile-list li{
display: block;
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 100%;
/*width: 50%;*/
}
.tile-list a{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center; /* Androidブラウザ用 */
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
padding: 5px;
}
.tile-list img, .tile-list-ex img{
max-width: 100px; /* これを指定しないと、サイズが小さくなる */
height: auto;
}
.tile-list figure{ /* これを指定しないと、下に余白ができる */
max-height: 75px;
}
.tile-letter{
font-size: 0.8em;
margin: 0 0 0 10px;
color: var(--body-color);
}
.tile-letter a{
font-weight: bold;
}
/*834px以下*/
@media screen and (max-width: 834px){
ul.tile-list, ul.tile-list-ex{
margin: 10px -20px;
}
.tile-list img, .tile-list-ex img{/* これを指定しないと、サイズが小さくなる */
max-width: 90px;
}
.tile-list figure{ /* これを指定しないと、下に余白ができる */
max-height: 67.5px;
}
.tile-letter{
font-size: 0.7em;
margin: 0 5px;
}
}/*834px以下ここまで*/

/**************************************/
/* １行タイルリンク バナーとリンク別 */
/**************************************/

/* カード横1列 バナーとリンク別の場合、flexにする */
.tile-list-ex li{
display: flex;
padding: 5px;
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 100%;
/*width: 50%;*/
}
.tile-list-ex figure{
max-height: 60px;
}

/**************************************/
/* カテゴリーリンク */
/**************************************/
.home ul.cat-list, .article ul.cat-list, .cat-list{
display: -webkit-box; /* Androidブラウザ用 */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 10px 0;
}
/* カード横2列 */
.cat-list li{
display: block;
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 50%;
/*width: 25%;*/
padding: 2px;
}
/*834px以下*/
@media screen and (max-width: 834px){
/* カード横1列 */
.cat-list li{
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 100%;
/*width: 50%;*/
}
}/*834px以下ここまで*/
.cat-list a{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center; /* Androidブラウザ用 */
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
}
.cat-list img{
width: 72px;
height: auto;
}
.cat-list h5, .article .cat-list h5{
margin: 0 0 0 5px;
font-size: 12px;
border-bottom: 0;
}
/* ホームh5対策 */
.home h5{
border: 0;
padding: 0;
}
.article ul li{
margin: 0;
}
/* ホームアイコン */
.cat-list .fa-home{
font-size: 54px;
color: var(--impact-color);
padding: 0 6px;
}
/* ホームアイコン */
.cat-list li{
position: relative;
}
.cat-list .cat-arrow i{
position: absolute;
top: 20px;
right: 20px;
}
/************************************
** スマホ　メニュー関連
************************************/
/* メニューアイコン下文字大きく */
.mobile-menu-buttons .menu-caption{
font-size:0.7em;
}
/* 下メニュー右端線消去 */
.mobile-menu-buttons .menu-button:last-child{
border-right: none;
}
/* 左右スライドメニュー */
.menu-content li a{
padding: 10px 0;
}
/**************************************/
/* サイドバー */
/**************************************/
.sidebar{
font-size: 0.8em;
}
/* スーリンク */
.sue-link a{
display: block;
float: left;
font-size: 14px;
margin: 0 15px 0 0;
}
.sue-link:after{
content: "";
display: block;
clear: both;
}
/* 自分の本紹介 */
.mybook img {
width: 70px;
height: auto;
margin: 0 2px;
}
/* カテゴリーラベル */
.label-cat a{
display: block;
float: left;
font-size: 14px;
margin: 0 5px 5px 0;
padding: 5px 10px;
text-decoration: none;
border-radius: 5px;
}
.label-cat .count {
display: inline-block;
font-size: 11px;
font-weight: 700;
line-height: 1;
margin: 0 0 0 3px;
padding: 3px 5px;
}
.sidebar ul li{
line-height: 2.5em;
}
/**************************************/
/* スーペーリンク */
/**************************************/
.footer{
padding-top: 0px;
padding: 0px;
}
.center_wrapper {
margin: 0 auto;
max-width: 1250px;
padding: 0 10px;
}
#bottom {
clear:both;
font-size: 0.8rem;
}
.inside {margin:0 5px;}
dl{ margin: 0.5em;}
/* サムライキャット部分 */
.samuraicat{
margin-top: 10px;
}
/* 下部の４つ並び部分 */
#bottom .inside .bottom_box {
float: left;
/*width: 320px;*/
padding: 6px;
}
#bottom .bottom_link dt{
clear: left;
float: left;
width: 7.5em;
padding-left: 5px;
font-weight: bold;
}
#bottom .bottom_link dd{
margin-bottom: 0.5em;
margin-left: 7rem;
}
#bottom .bottom_link ul{
display: inline-block;
margin: 0;
}
#bottom .bottom_link li{
float: left;
list-style: none;
border-top: none;
padding: 1px 15px 1px 0;
margin:0;
}
/**************************************/
/* クレジット */
/**************************************/
#footer-in{
text-align: center;
}
.credit{
font-size: 0.8rem;
padding: 15px;
max-width: 550px;
margin: auto;
}
.credit-in{
text-align: left;
}
/************************************
** 地図用font awesome
************************************/
.fac-map{
color: #fff;
border-radius:50%;
font-size:1em;
padding:3px 0;
margin-right: 5px;
}
.fac-shopping{
background-color: #9c28b0;
}
.fac-eat{
background-color: #f7a826;
}
.fac-star{
background-color: #e55202;
}
.fac-hotel{
background-color: #0f9d58;
}
.fac-hostel{
background-color: #7cb342;
}
.fac-hospital{
background-color: #a52714;
transform: rotate(45deg);
}
.fac-plane, .fac-train, .fac-bus, .fac-boat{
background-color: #0288d1;
}
.fac-how{
border-radius:5px;
color: #090;
font-size:0.8em;
padding:2px;
margin-left: 15px;
margin-right: 3px;
border: 1px #090 solid;
background-color: #8f8;
}
/**************************************/
/*audio.js
http://145.rei-yumesaki.net/article/427337011.html */
/**************************************/
.audiojs audio{
}
/* プレイヤー（再生バー）*/
.audiojs {
/*width: 60px;*/
width: 40px;/*バーを見えなくする*/
height: 30px;
background: none;
overflow: hidden;
font-family: monospace;
font-size: 12px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
display: inline-block;
vertical-align: middle;
}
/* 再生・停止ボタン */
.audiojs .play-pause{
width: 38px;
height: 28px;
padding: 0;
margin: 0;
float: left;
overflow: hidden;
/*border: 1px solid #0c0;*/
border-radius: 5px;
background-color: #0c0;
border-right: 1px solid #090;
}
/* 再生・停止ボタンなどの p 要素 */
.audiojs p{
display: none;
width: 38px;
height: 28px;
margin: 0px;
cursor: pointer;
}
.audiojs .play{
display: block;
}
/* 進行状態・ロードの状態を表示する部分（薄いグレー）*/
.audiojs .scrubber{
position: relative;
float: left;
/*width: 30px;*/
background: #CCC;
height: 4px;
margin: 12px 0 0 0px;
border-top: 0;
border-left: 0px;
border-bottom: 0px;
overflow: hidden;
}
/* 進行状態を表示するバーの部分(再生ボタンより少し暗い青) */
.audiojs .progress{
position: absolute;
top: 0px;
left: 0px;
height: 4px;
width: 0px;
background: #698D9C;
z-index: 1;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc),
color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));
background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc
100%); */
}
/* ロード状態を表示するバーの部分（薄いグレー） */
.audiojs .loaded {
position: absolute;
top: 0px;
left: 0px;
height: 4px;
width: 0px;
background: #CCC;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222),
color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222
100%); */
}
/* 現在の再生時間/総再生時間　フォント */
.audiojs .time{
float: left;
height: 30px;
line-height: 30px;
margin: 0px 0px 0px 8px;
padding: 0px 0px 0px 0px;
border-left: none;
color: #666;
text-shadow: none;
display: none;
}
/* 現在の再生時間　フォント */
.audiojs .time em{
padding: 0px 2px 0px 0px;
color: #666;
font-style: normal;
display: none;
}
/* 時間の部分 */
.audiojs .time strong{
padding: 0px 0px 0px 2px;
font-weight: normal;
display: none;
}
.audiojs .error-message{
float: left;
display: none;
margin: 0px 10px;
height: 28px;
width: 200px;
overflow: hidden;
line-height: 28px;
white-space: nowrap;
color: #fff;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.audiojs .error-message a{
color: #eee;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #999;
white-space: wrap;
}
/* 再生ボタン */
.audiojs .play{
/*background: url(再生ボタンのグラフィックのURL) center center no-repeat;　←playボタン
margin-left: 1.45px;*/
position:relative;
left:5px;
}
/* 読み込み中ボタン */
.audiojs .loading{
/*background: url("$1") center center no-repeat;*/
display: none;
position:relative;
left:5px;
}
/* エラーボタン */
.audiojs .error {
/*background: url("$1") center center no-repeat;*/
display: none;
position:relative;
left:5px;
}
/* 停止ボタン */
.audiojs .pause{
/*background: url(停止ボタンのグラフィックのURL) center center no-repeat;　←pauseボタン*/
position:relative;
left:5px;
}
.playing .play, .playing .loading, .playing .error{
display: none;
position:relative;
left:5px;
}
.playing .pause{
display: block;
}
.loading .play, .loading .pause, .loading .error{
display: none;
}
.loading .loading{
display: block;
}
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading{
display: none;
}
.loaded, .progress{
display: none;
}
.error .error{
display: block;
}
.error .play-pause p{
cursor: auto;
}
.error .error-message{
display: block;
}
/* 再生している曲の情報 */
.track-details{
clear: both;
height: 28px;
width: 200px;
padding: 0px 6px;
background: #FFF;
color: #3A3A3A;
font-size: 10px;
line-height: 28px;
}
.track-details:before{
content: '♬ Now Playing: ';
}
/************************************
** タイ語用
************************************/
.thai
{font-size:1.6em;}
.female
{color:#f00;
}
.male
{color:blue;}

.card{
border: 1px solid #090;
background-color: rgba(255,255,255,0.3);
padding: 15px;
border-radius:5px;
margin-bottom: 20px;
}
.ja{
color: #090;
font-weight: bold;
font-size: 1.2em;
border-bottom: 2px solid #090;
border-right: 2px solid #090;
background-color: #8f8;
padding: 5px 5px 5px 15px;
border-radius:5px;
margin-bottom: 20px;
}
/**************************************/
/*ラベル付ボックス用*/
/**************************************/
/*.l-box, .l-box_img{
position: relative;
margin-top: 50px;
padding: 0.5em 1em;
border-radius: 0 10px 10px 10px;
}
.l-box .l-box-title,.l-box_img .l-box-title {
position: absolute;
display: inline-block;
top: -30px;
left: -2px;
padding: 0 10px;
height: 30px;
font-size: 17px;
font-weight: bold;
border-radius: 10px 10px 0 0;
}
.l-box p {
margin: 0; 
padding: 0 0 10px 20px;
font-size: 0.85em;
line-height: 1.5em;
}*/

.l-box, .l-box_img{ /*l-box imgは、tour linkで使っているけど、l-boxに変更可能、あとでしたい*/
border: none;
margin-top: 40px;
line-height: 1.6;
position: relative;
padding: 10px;
font-size: 0.9em;
width: 100%;
border-radius: 5px;
background-color: var(--bcard-bg-color);
box-shadow: 0px 0px 5px var(--bcard-box-shadow-color);
transition: all 0.3s ease-in-out;
}
.l-box ul, .l-box ol{
margin: 0;
padding: 0;
}
.l-box li{
margin: 0;
list-style: none;
}
.l-box li .slink{
margin-top: 0;
border-radius: 5px;
box-shadow: none;
line-height: 0;
display: inline;
padding: 0;
text-decoration: none;
box-shadow: none;
font-size: 1em;
font-weight: normal;
}
.l-box li a.slink{
background-color: transparent;
}
.l-box li a.slink:hover{
background-color: transparent;
}
.l-box .l-box-title,.l-box_img .l-box-title {
position: absolute;
display: inline-block;
top: -23px;
left: 15px;
font-size: 13px;
font-weight: bold;
padding: 3px .6em;
border-radius: 3px;
letter-spacing: .7px;
}
.l-box ul.list-check li:before{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f058"; /* チェック */
color: #ffa952; /* 色 */
position: absolute;
}
.l-box-title {
color: var(--bcard-label-my-color);
background-color: var(--bcard-label-bg-my-color);
}
/**************************************/
/*商品リンク用+ホテル用+アプリ用*/
/**************************************/
.amazon-item-box, .hotel-item-box, .applink, .iherblet-box{/*アマゾン用枠 ホテル用枠*/
padding: 20px;
border-radius: 15px;
box-sizing: border-box;
position: relative;
text-align: left;
display: flex;
}
.hotel-item-box{ /*ホテル用枠*/
border: none;
margin-top: 40px;
line-height: 1.6;
width: 100%;
background-color: var(--bcard-bg-color);
box-shadow: 0px 0px 5px var(--bcard-box-shadow-color);
transition: all 0.3s ease-in-out;
}
.applink{ /*アプリ用枠*/
font-weight: normal;/*中の文字がblogcardで設定されている太字になるため*/
margin-top: 40px;
border-radius: 5px;
padding: 10px;
width: 100%;
background-color: var(--bcard-bg-color);
box-shadow: 0px 0px 5px var(--bcard-box-shadow-color);
transition: all 0.3s ease-in-out;
}
/*835px タブレット以上*/
@media screen and (min-width: 835px) {
.l-box_img{
display: flex; /* l-boxの影響で、これをしないとタブレットの文字表示がおかしくなる */ 
}
}/*835px以上 ここまで*/
/*834px タブレット以下*/
@media screen and (max-width: 834px){
.amazon-item-box, .hotel-item-box, .applink, .iherblet-box{
padding: 20px 10px; /* 横幅のみ縮める */
display: block;
}
}/*834px以下 ここまで*/
/*480px以下ここから*/
@media screen and (max-width: 480px){
.applink{
padding: 5px;
}
}/*480px以下ここまで*/
.amazon-item-content, .hotel-item-content{
/*padding-left: 25px;*/
}
.amazon-item-title, .hotel-item-title, .applink, .iherblet-name{
font-size: 0.8em;
}
.hotel-item-title, .hotellinkSite{
display: inline;
}
.hotellinkSite{
margin-left: 10px;
}
.app-item-price{
display: inline-block;
}
.app-item-comment{
margin-top: 15px;
}
.amazon-item-error.cf {
display: block;
line-height: 1.2;
}
.amazon-item-thumb, .iherblet-image{
width: 160px;
min-width: 160px;
margin-right: 20px;
float: left !important; /*画像左寄せ*/
}
.hotel-item-thumb{
width: 200px;
min-width: 200px;
margin-right: 20px;
display: block;
float: left !important; /*画像左寄せ*/
}
.app-item-thumb img{
border-radius: 10px;
width: 120px;
min-width: 120px;
margin-right: 20px;
display: block;
float: left !important; /*画像左寄せ*/
}
/*834px タブレット以下*/
@media screen and (max-width: 834px){
.amazon-item-thumb, .iherblet-image{
margin-right: 10px;
}
.hotel-item-thumb{
width: 250px;
min-width: 250px;
margin: 0 auto 5px;
float: none !important; /*画像センター*/
}
}/*834px以下 ここまで*/
/*480px以下ここから*/
@media screen and (max-width: 480px){
.app-item-thumb img{
width: 70px;
min-width: 70px;
margin-right: 10px;
}
}/*480px以下ここまで*/
.hotel-item-thumb img{
border-radius: 3px;
}
.amazon-item-thumb *, .hotel-item-thumb *, .app-item-thumb *, .iherblet-image *{
display: block;
}
.amazon-item-thumb > a > img, .hotel-item-thumb > a > img, .iherblet-image > a > img{
margin: 0 auto;
}
.amazon-item-content, .hotel-item-content, .iherblet-info{
line-height: 125%;
width: 100%;
}
.amazon-item-snippet{
font-size: 0.8em;
margin-top: 6px;
}
.hotel-item-snippet{ /*ホテル用説明*/
font-size: 0.7em;
}
.amazon-item-buttons, .hotel-item-buttons, .app-item-buttons{
display: flex;
flex-wrap: wrap;
margin-top: 1em;
}
.amazon-item-buttons > *, .iherblet-sub-info{
width: 31.5%; /* ３つ並び */
margin: 2px;
box-sizing: border-box;
}
.hotel-item-buttons > *{
width: 24%; /* ４つ並び */
margin: 2px;
box-sizing: border-box;
}
/*834px タブレット以下*/
@media screen and (max-width: 834px){
.shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo, .shoplinkiherb, .shoplinkmercari, .hotellinkagoda, .hotellinkbooking, .hotellinkEx, .hotellinkTA, .hotellinkJaran, .hotellinkHotels, .hotellinkVeltra, .hotellinkTabinaka, .hotellinkRakuten, .hotellinkYahoo, .hotellinkIkyu, .hotellinkRurubu, .tour-link-veltra, .tour-link-kkday, .tour-link-rakuten, .tour-link-voyagin, .tour-link-klook, .tour-link-mapple, .tour-link-tabinaka, .tour-link-his, .tour-link-asoview, .tour-link-skyticket{
width: 31.5%; /* 全て３つ並び */
}
.applink_ios, .applink_google, .applink_amazon{
margin-top: 5px;
}

.app-item-buttons{
margin-top: 1.5em;
}
}/*834px以下 ここまで*/
.amazon-item-buttons a, .hotel-item-buttons a, .app-item-buttons a, .iherblet-sub-info a{
display: block;
margin: 0px auto 8px;
padding: 10px 1px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
text-align: center;
border-radius: 5px;
color: #fff;
}
.app-item-buttons a{
margin: 0px;
padding: 0;
}
.amazon-item-buttons a:hover, .hotel-item-buttons a:hover, .iherblet-link a:hover{
opacity: 0.6;
}
.amazon-item-maker:after, .amazon-item-comment:after, .hotel-item-comment:after, .app-item-comment:after, .iherblet-detail:after{
content: "";
display: block;
clear: both;
}
/* 各ボタンカラー */
.shoplinkamazon a{ /*amazon*/
background: #f79901;
}
.shoplinkrakuten a{ /*楽天*/
background: #bf0000;
}
.shoplinkyahoo a{ /*yahoo*/
background: #e60033;
position: relative;
}
.shoplinkiherb a{ /*iHerb*/
background: #458500;
position: relative;
}
.iherblet-link a{ /*iHerb*/
background: #458500;
}

.shoplinkmercari a { /*メルカリ*/
  background: #fff;
  position: relative;
  color: #ff0211;
  border: 1px solid #ff0211;
  box-sizing:border-box;
}

.hotellinkagoda a{ /*agoda*/
background: #fff;
position: relative;
color: #f00;
border: 1px solid #919191;
box-sizing:border-box;
}
.hotellinkbooking a{ /*booking*/
background: #003580;
position: relative;
}
.hotellinkEx a{ /*expedia*/
background: #ffcc00;
position: relative;
color: #00335f;
}
.hotellinkTA a{ /*TripAdvisor*/
background: #00a680;
position: relative;
}
.hotellinkJaran a, .tour-link-jaran a{ /*じゃらん*/
background: #ff5800;
position: relative;
}
.hotellinkRakuten a { /*楽天*/
  background: #fff;
  position: relative;
  color: #00b900;
  border: 1px solid #66b821;
  box-sizing:border-box;
}
.hotellinkYahoo a { /*Yahooトラベル*/
  background: #fff;
  position: relative;
  color: #f00;
  border: 1px solid #f00;
  box-sizing:border-box;
}
.hotellinkIkyu a { /*一休*/
  background: #fff;
  position: relative;
  color: #bf9500;
  border: 1px solid #1c4678;
  box-sizing:border-box;
}
.hotellinkRurubu a { /*るるぶ*/
  background: #fff;
  position: relative;
  color: #006;
  border: 1px solid #006;
  box-sizing:border-box;
}
.hotellinkHotels a{ /*hotels.com*/
background: #d32f2f;
position: relative;
}
.hotellinkVeltra a, .tour-link-veltra a{ /*ベルトラ*/
background: #ffae00;
position: relative;
}
.hotellinkTabinaka a, .tour-link-tabinaka a{ /*タビナカ*/
background: #1579c6;
position: relative;
}
.tour-link-kkday a{ /*kkday*/
background: #26bec9;
position: relative;
}
.tour-link-klook a{ /*klook*/
background: #ff5722;
position: relative;
}
.tour-link-rakuten a{ /*rakuten*/
background: #fff;
position: relative;
color: #00b900;
border: 1px solid #66b821;
box-sizing:border-box;
}
.tour-link-voyagin a{ /*voyagin*/
background: #fff;
position: relative;
color: #ff5a00;
border: 1px solid #919191;
box-sizing:border-box;
}
.tour-link-asoview a{ /*アソビュー*/
background: #fff;
position: relative;
color: #f44336;
border: 1px solid #f44336;
box-sizing:border-box;
}
.tour-link-his a{ /*HIS*/
background: #003d8f;
position: relative;
color: #fff;
box-sizing:border-box;
}
.tour-link-mapple a{ /*マップル*/
background: #94d4ff;
position: relative;
color: #000;
box-sizing:border-box;
}
.tour-link-skyticket a{ /*skyticket*/
background: #1ba1ff;
position: relative;
color: #fff;
box-sizing:border-box;
}
.tour-link-nihon a{ /*日本旅行*/
background: #fff;
position: relative;
color: #1a1975;
border: 1px solid #1a1975;
box-sizing:border-box;
}
/*ホテル用ラベル*/
.hotel-item-box .box-title {
position: absolute;
display: inline-block;
top: -20px;
left: 10px;
padding: 7px 15px 7px 30px;
line-height: 1;
font-size: 19px;
border-radius: 10px;
font-weight: bold;
}
.hotel-city-title, .tour-city-title, .review-city-title{
position: relative;
padding: 5px 5px 5px 30px;
font-size: 1.2em;
font-weight: bold;
border-radius: 10px;
}
.hotel-city-title:before, .tour-city-title:before, .review-city-title:before, .box-title:before{
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/*border: solid 3px white; */
border-radius: 50%;
}
.box-title:before{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f129";
}
.hotel-city-title:before{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f236";
}
.tour-city-title:before{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f207";
}
.review-city-title:before{
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 5で出ない場合必要*/
content: "\f075";
}
/************************************
** 楽天
************************************/
/*楽天アイテム・楽天ホテル←多分ホテルいらんよね？*/
.rakutenItem-box, .rakutenHotel-box {
display: flex;
flex-wrap: wrap;
}
.rakutenItem-box:after, .rakutenHotel-box:after {
content: "";
display: block;
clear: both;
}
.raku-credit{
text-align: right;
}
.rakutenItem, .rakutenHotel {
text-align: center;
font-size: small;
width: 25%; /* ４つ並び */
font-size: 12px;
padding: 8px;
line-height: 1rem;
}
/*480px以下ここから*/
@media screen and (max-width: 480px){
.rakutenItem, .rakutenHotel {
width: 50%; /* ２つ並び */
}
}/*480px以下ここまで*/
.rakutenItem .name{
text-align: left;
}
.rakutenItem .rank{
padding:0px 5px;
margin:2px 0px;
border-width:0px 0px 2px 15px;
border-style:solid;
font-weight:bold;
}
/************************************
** Appbox用
************************************/
div.wpappbox.compact{
margin-top: 30px;
}
/* ラベル */
.appbox-title{
position: relative;
}
.appbox-title .title{
position: absolute;
display: inline-block;
top: -23px;
left: 15px;
font-size: 15px;
font-weight: bold;
padding: 3px .6em;
border-radius: 3px 3px 0 0;
letter-spacing: .7px;
}

.appbox-title .title:before{
font-family: Awesome 5 Brands;
display: inline-block;
font-weight: normal;
position: relative;
top: 1px;
font-size: 16px;
padding-right: 5px;
}
.appstore .appbox-title .title:before{
content: '\f179'; /* リンゴ */
}
.appstore .appbox-title .title::after{
 content:"AppStore アプリ"
}
.appstore .appbox-title .title{
background-color: #000;
color: #fff;
}
.googleplay .appbox-title .title:before{
content: '\f17b'; /* アンドロイド */
}
.googleplay .appbox-title .title::after{
 content:"GooglePlay アプリ"
}
.googleplay .appbox-title .title{
background-color: #689f38;
color: #fff;
}
.amazonapps .appbox-title .title:before {
content: '\f270'; /* アマゾン */
}
.amazonapps .appbox-title .title::after{
 content:"amazon アプリ"
}
.amazonapps .appbox-title .title{
background-color: #eb8c11;
color: #fff;
}
/************************************
** アプリリンク用
************************************/
.app-item-title{
font-size: 1.2em;
font-weight: bold;
}
.app-item-price{
color: #009ed8;
}

/* 各バナー */
.applink_ios a img{
width: 130px;
}
.applink_google img{
margin-top: -11px;
margin-bottom: -11px;
width: 148px;
height: 70px;
}
.applink_amazon img{
width: 130px;
height: 47px;
}
/*480px以下ここから*/
@media screen and (max-width: 480px){
.app-item-price{
/*margin-bottom: 15px;*/
}
}
/*480px以下ここまで*/

/* 星 */
div.applink div.rating-stars {
 width:65px;
 height:13px;
 margin-left:5px;
 margin-top:4px;
 display:inline-block
}
div.applink div.stars-colorful {
 background:url(https://suemari.com/img/rating-stars.png) no-repeat
}
div.applink div.stars00 {
 background-position:0 0
}
div.applink div.stars05 {
 background-position:0 -13px
}
div.applink div.stars10 {
 background-position:0 -26px
}
div.applink div.stars15 {
 background-position:0 -39px
}
div.applink div.stars20 {
 background-position:0 -52px
}
div.applink div.stars25 {
 background-position:0 -65px
}
div.applink div.stars30 {
 background-position:0 -78px
}
div.applink div.stars35 {
 background-position:0 -91px
}
div.applink div.stars40 {
 background-position:0 -104px
}
div.applink div.stars45 {
 background-position:0 -117px
}
div.applink div.stars50 {
 background-position:0 -130px
}
/************************************
** swiper用
************************************/
/* Swiperの親要素 */
.swiper-parent {
position: relative;
}
/* Swiper本体 */
.swiper-container {
width: calc(100% - 50px);	/* ☆前・次ページボタンの幅をそれぞれ50pxとして、その分を引く */
padding-bottom: 50px;		/* ★ページネーション・スクロールバー分の余白50pxを下に取る */
box-sizing: content-box;
margin-left: 0;
}

/* 前・次スライドボタンの縦位置調整（スライドの高さの中央に合わせる） */
.swiper-button-prev, .swiper-button-next {
top: calc((100% - 50px) * 0.5);
/* ☆★ページネーション・スクロールバー（50px）を除く縦位置の中央（＝スライドの高さの中央）に一旦配置 */
margin-top: -22px;
/* ★ボタンの高さ（44px）の半分のネガティブマージンで上に少しずらす */
}
.swiper-button-next:after {
font-family: "Font Awesome 5 Free";
content: "\f35a"; /* 丸矢印 */
font-weight:bold; /* 5で出ない場合必要*/
font-size: 48px;
color: var(--impact-color);
}

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

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

/*834px以下*/
@media screen and (max-width: 834px){
}

/*480px以下ここから*/
@media screen and (max-width: 480px){
/*480px以下ここまで*/
}