/* table01 */
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
  width: 30%;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}

.post-body li
 {
    list-style: square !important;
}

div#ContactForm1 {
display: none !important;
}

.contact-form-name, .contact-form-email, .contact-form-email-message {
    display: block;
    margin-bottom: 20px;
    background-color: #eff1f5;
    border: 0;
    border-radius: 3px;
    box-shadow: none;
}
.contact-form-email-message {
    width: 100%;
}
.contact-form-button {
    color: #ffffff; /* ボタンの文字の色 */
    background-color: #6088c6; /* ボタンの背景色 */
    height: 45px; /* ボタンの縦の大きさ */
    width: 110px; /* ボタンの横の大きさ */
    vertical-align: middle;
    border-radius: 5px;
}
.contact-form-button:hover {
    background-color: #aec4e5; /* マウスオーバーした際のボタンの背景色 */
}
.contact-form-error-message-with-border, .contact-form-success-message {
    margin: 1em 0;
    font-weight: bold;
    font-size: 1.2em;
    border: solid 3px #faaaaa;
    padding: 1em;
    display: inline-block;
}


.contact-form-widget
 {
	margin:auto !important;    
}

blockquote{
    position:relative;
    border-top:1px solid #7A87B0;
    border-bottom:1px solid #7A87B0;
    padding:10px 2em;
}
blockquote:before{
    position:absolute;
    background-color:#FFFFFF;
    color:#7A87B0;
    font-family:'FontAwesome';
    content:'\f10d';
    line-height:1;
    text-align:center;
    top:-20px;
    left:-10px;
    padding:10px;
    font-size:20px;
}
blockquote:after{
    position:absolute;
    right:-10px;
    bottom:-20px;
    background-color:#FFFFFF;
    padding:10px;
    color:#7A87B0;
    font-family:'FontAwesome';
    content:'\f10e';
    line-height:1;
    text-align:center;
    font-size:20px;
}
blockquote cite {
    display: block;
    padding-right:30px;
    font-size: 0.8rem;
    text-align: right;
    color: #808080;
}

.code-block {
  position: relative;
  margin: 2em 0;
}
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #66d9ef;
  color: #272822;
  border: none;
  padding: 0.4em 0.8em;
  font-size: 0.85em;
  border-radius: 4px;
  cursor: pointer;
  z-index: 5;
}
.copy-btn:active {
  background: #a1efe4;
}

/* ラベル・ハッシュタグ */
  
.label-info {
  font-size: 14px;
  margin: 2em 0 1em;
}
.category {
  display: inline-block;
  color: #444 !important;
  padding: 2px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 5px;
}
.category:hover {
  text-decoration: none;
}
.hashtag {
  display: inline-block;
  font-size: 12px;
  color: #333 !important;
  background: #f3f7f9;
  padding: 4px 8px;
  border-radius: 3em;
  white-space: nowrap;
}
.hashtag:hover {
  text-decoration: none;
}

.page-footer h3 {
    line-height: 150%;
}

/*--------------------------------------*/
/*****会話のCSSここから*****/
.talk-wrap{
display: block;
clear: both;
margin:0 auto 3px auto;
}
.talk-wrap p{
margin:0;
}
.left-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: no-repeat;
background-size: cover;
background-position: center;
float:left;
display:inline-block;
box-shadow: 1px 1px 5px #aaa;
border: 3px solid #fff;
margin-bottom: 10px;
overflow: hidden;
}
.talk-left{
float:right;
position: relative;
background: #fff;
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 80%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa;
margin-bottom: 10px;
}
.talk-left:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: #666;
position: absolute;
left: -20px;
top: 25%;
margin-top: -9px;
}
.talk-left:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #fff;
position: absolute;
left: -16px;
top: 25%;
margin-top: -8px;
}
.right-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: cover; 
background-position: center;
float:right;
display:inline-block;
box-shadow: 1px 1px 5px #aaa;
border: 3px solid #FFF;
margin-bottom: 10px;
overflow: hidden;
}
.talk-right{
float:left;
position: relative;
background: #fff;
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 80%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa;
margin-bottom:10px;
}
.talk-right:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: #666;
position: absolute;
right: -20px;
top: 25%;
margin-top: -9px;
}
.talk-right:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #fff;
position: absolute;
right: -16px;
top: 25%;
margin-top: -8px;
}
.talk-end{
clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
.left-icon{
width: 80px;
height: 80px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 80px;
height: 80px;
}
.talk-right{
width: 65%;
}
}
@media screen and (max-width: 380px){
.left-icon{
width: 60px;
height: 60px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 60px;
height: 60px;
}
.talk-right{
width: 65%;
}
}
/*****会話のCSSここまで*****/
/*--------------------------------------*/

.breadcrumbs.card a
 {
    color: #263238;
}

nav.npin .dropdown-content li > a, .dropdown-content li > span
 {
    color: #263238;
}

.breadcrumbs.card li
 {
	display: inline;

}

.BlogArchive #ArchiveList ul.posts li {
    display: block;
}

#comments h4
 {
    font-size: medium;
}


#related-posts {
    margin: 1em 0;
}
#related-posts p {
    font-size: 115%;
}
#related-posts ul {
    margin: 0;
    padding: 0;
    border-top: solid 1px #dddddd;
}
#related-posts ul li {
    list-style: none;
    border-bottom: solid 1px #dddddd;
}
#related-posts ul li a {
    display: block;
    position: relative;
    padding: 1em 2em 1em 0;
}
#related-posts ul li a::after {
    font-family: FontAwesome;
    content: "\f054";
    color: #cccccc;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10.5px;
}

.post-summary {
    padding-top: 0px;
}

.section {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

@media only screen and (min-width: 993px) {
    .row .col.l3 {
        padding: 8px 0;
    }
}

.post a {
    color: #376c9e;
}

a.btn.col.m12.right {
    color: #26a69a;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9比率 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.heart-btn {
  position: relative;
  font-size: 32px;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  color: #222; /* 通常時の色 */
}

/* ホバーで色がつく */
.heart-btn:hover {
  color: #e0245e; /* ホバー時の色 */
}

/* クリック後（いいね済み） */
.heart-btn.liked {
  color: #e0245e;
  animation: pop 0.3s ease;
  transform: scale(1.2);
}

/* ポンっと弾むアニメーション */
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1.2); }
}

/* 波紋エフェクト */
.heart-btn::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(224,36,94,0.4);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.heart-btn.animate::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* フォーカス時の枠・影を消す */
.heart-btn:focus,
.heart-btn:focus-visible,
.heart-btn:active {
  outline: none;
  box-shadow: none;
  background-color: inherit;
}

.tag-list li
 {
    padding: 0 !important;
    margin: 0 0 8px 0;
    display: inline-block;
}

.box-ud {
    border-top: 3px solid #aaa;
    border-bottom: 3px solid #aaa;
    background-color: #eee;
    padding: 2em;
    margin: 1em 0;
  } 

.blue-grey-text.text-darken-4 {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
}

#page-top {
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none; /* 非表示時はクリックできない */
  transition: opacity 0.3s;
}

#page-top.show {
  opacity: 1;
  pointer-events: auto; /* 表示時にクリック可能 */
}

#page-top:hover {
  background: #555;
}

#page-top i {
  pointer-events: none;
}

/*--------------------------------------------------
  カエレバ・Bloggerの場合（ボタン下寄せ対応版）
---------------------------------------------------*/
.cstmreba {
    width: 100%;
    height:auto;
    margin:36px 0;
    font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
    line-height: 1.5;
    word-wrap: break-word;
    box-sizing: border-box;
    display: block;
}
.cstmreba a {
    transition: 0.8s ;
    color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
    color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}

/* .kaerebalink-box全体を横並びにしてボタン下寄せ対応 */
.cstmreba .booklink-box,.cstmreba .kaerebalink-box {
    width: 100%;
    background-color: #fff;  /* 全体の背景カラー */
    overflow: hidden;
    border:double #d2d7e6;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 12px 8px;

    display: flex;
    flex-wrap: wrap; /* スマホで縦並びに対応 */
}

/* サムネイル画像ボックス */
.cstmreba .booklink-image, .cstmreba .kaerebalink-image {
    width:150px;
    flex: 0 0 150px;
    margin:0 14px 0 0;
    text-align: center;
}

/* サムネイルリンク */
.cstmreba .booklink-image a, .cstmreba .kaerebalink-image a {
    width:100%;
    display:block;
}

/* サムネイル画像 */
.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img {
    margin:0 auto;
    padding: 0;
    text-align:center;
}

/* テキスト部分を縦方向flexにしてボタンを下寄せ */
.cstmreba .booklink-info,.cstmreba .kaerebalink-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow:hidden;
    line-height:170%;
    color: #333;
}

/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a, .cstmreba .kaerebalink-info a {
    text-decoration: none;
}

/* 作品・商品名 リンク */
.cstmreba .booklink-name>a, .cstmreba .kaerebalink-name>a {
    border-bottom: 1px dotted ;
    font-size:16px;
}

/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p, .cstmreba .booklink-name p {
    margin: 0;
}

/* powered by */
.cstmreba .booklink-powered-date, .cstmreba .kaerebalink-powered-date {
    font-size:10px;
    line-height:150%;
}
.cstmreba .booklink-powered-date a, .cstmreba .kaerebalink-powered-date a {
    border-bottom: 1px dotted ;
    color: #333;
}
.cstmreba .booklink-powered-date a:hover, .cstmreba .kaerebalink-powered-date a:hover {
    color:#333;
}

/* 著者 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail {
    font-size:12px;
}

/* ボタン画像非表示 */
.cstmreba .kaerebalink-link1 img,.cstmreba .booklink-link2 img {
    display:none !important;
}

/* ボタンコンテナ */
.cstmreba .kaerebalink-link1,.cstmreba .booklink-link2 {
    display: inline-block;
    width: 100%;
    margin-top: auto; /* 商品説明の下に下寄せ */
}

/* ボタン個別 */
.cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div {
    float:left;
    width:31%;
    min-width:125px;
    margin:0.5% 1%;
}

/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a, .cstmreba .kaerebalink-link1 a {
    width: 100%;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: bold;
    line-height: 180%;
    padding:3% 1%;
    margin: 1px 0;
    border-radius: 4px;
    box-shadow: 0 2px 0 #ccc;
    background-color: #fff;  /* 初期背景色 */
    border: 2px solid;       /* 枠線 */
    color: inherit;           /* 文字色 */
}

/* カエレバストアカラー */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a { color:#1a4fff; border-color:#1a4fff; letter-spacing:normal;}
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; border-color:#84be24;}
.cstmreba .kaerebalink-link1 .shoplinkcecile a { color:#8d124b; border-color:#8d124b;} 
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a { color:#314995; border-color:#314995;}
.cstmreba .kaerebalink-link1 .shoplinkamazon a, .cstmreba .booklink-link2 .shoplinkamazon a { color:#FF9901; border-color:#FF9901;}
.cstmreba .kaerebalink-link1 .shoplinkrakuten a , .cstmreba .booklink-link2 .shoplinkrakuten a { color: #c20004; border-color:#c20004;}
.cstmreba .kaerebalink-link1 .shoplinkseven a, .cstmreba .booklink-link2 .shoplinkseven a { color:#225496; border-color:#225496; }

/* ホバー時反転 */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover { background-color:#1a4fff; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { background-color:#84be24; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { background-color:#8d124b; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover { background-color:#314995; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover, .cstmreba .booklink-link2 .shoplinkamazon a:hover { background-color:#FF9901; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover , .cstmreba .booklink-link2 .shoplinkrakuten a:hover { background-color: #c20004; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover, .cstmreba .booklink-link2 .shoplinkseven a:hover { background-color:#225496; color:#fff; }

/***** ボタンデザインここまで ******/
.cstmreba .booklink-footer { clear:both; }

/*** 解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
    .cstmreba .booklink-image, .cstmreba .kaerebalink-image { width:100%; float:none; }
    .cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div { width: 95%; margin: 0 auto 8px auto; float:none; }
    .cstmreba .booklink-info, .cstmreba .kaerebalink-info { text-align:center; padding-bottom: 1px; }
}

.cta-box {
  max-width: 600px;
  margin: 24px auto;
  padding: 20px;
  border: 2px solid #007BFF;
  border-radius: 8px;
  background-color: #E6F0FF; /* 優しい水色背景 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

.cta-header h3 {
  margin: 0 0 12px;
  color: #007BFF;
  text-align: center;
}

.cta-body {
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  gap: 20px;
}

.cta-image img {
  max-width: 120px;
  border-radius: 4px;
}

.cta-text {
  flex: 1;
}

.cta-text p {
  margin: 0 0 12px;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}
  
.cta-button {
  display: block;
  margin: 12px auto 0 auto;
  padding: 10px 24px;
  background-color: #007BFF;   /* ボタン背景 */
  color: #FFFFFF !important;    /* 強制的に文字色を白 */
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid #0056b3;   /* ボーダー */
  text-align: center;           /* 中央揃え */
  transition: 0.3s;
}

.cta-button:hover {
  background-color: #0056b3;
}
  
/* スマホ対応: 480px以下で縦並び */
@media screen and (max-width: 480px){
  .cta-body {
    flex-direction: column;
    text-align: center; /* スマホでは中央揃え */
  }
  .cta-image img {
    margin-bottom: 12px;
  }
  .cta-text {
    text-align: center; /* スマホでは中央揃え */
  }
}

/* タグリスト全体 */
.tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;           /* 横並び */
  flex-wrap: wrap;         /* 折返し対応 */
  gap: 8px;                /* タグ間の間隔 */
}

/* 各タグリンクの装飾 */
.tag-item {
  display: inline-block;
  position: relative;
  padding: 5px 12px;
  border: 1px solid #06c7ea;
  border-radius: 12px;
  text-decoration: none;
  color: #06c7ea;
  font-size: 12px;
  transition: all 0.2s ease;
}

/* ホバー時の変化 */
.tag-item:hover {
  background-color: #06c7ea;
  color: #fff;
  border-color: #06c7ea;
}

/* タグアイコン表示（元の#は残すHTMLでもOK） */
.tag-name {
  display: inline-block;
  position: relative;
}

blockquote 
{
	padding-left: 1.5em;
    padding-right: 1em;
}

/***ステップバーデザイン１***/
.step-wrap1 {
 counter-reset:count;
 margin: 2em 0;
 position: relative;
}
.step-content1 {
 padding: 0 0 1.3em 2em;
 margin: 0;
 position: relative;
}
.step-content1::before {
 content: "";
 display: block;
 width: 13px;
 height: 13px;
 background: #6ab5a5;
 border: solid 3px #ffffff;
 border-radius: 50%;
 position: absolute;
 top: 3px;
 left: 3px;
 box-shadow: 0 0 0 2px #6ab5a5;
}
.step-content1::after {
 content: "";
 display: block;
 height: calc(100% - 35px);
 border-left: dotted 5px #768888;
 position: absolute;
 top: 30px;
 left: 7px;
}
.step-title1 {
 font-weight: bold;
 font-size: 120%;
}
.step-label1 {
 color: #768888;
 font-weight: bold;
}
.step-label1::after {
 counter-increment:count;
 content:counter(count);
 position: relative;
 left: .3em;
}
.step-body1 {
 margin-top: .5em;
 padding: 0 0 1em;
 border-bottom: dotted 2px #ddd;
}
.step-wrap1 > :last-of-type::after {
 display: none;
}
/***ステップバーデザイン１***/

.cta-box {
  max-width: 600px;
  margin: 24px auto;
  padding: 20px;
  border: 2px solid #007BFF;
  border-radius: 8px;
  background-color: #E6F0FF; /* 優しい水色背景 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

.cta-header h3 {
  margin: 0 0 12px;
  color: #007BFF;
  text-align: center;
}

.cta-body {
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  gap: 20px;
}

.cta-image img {
  max-width: 120px;
  border-radius: 4px;
}

.cta-text {
  flex: 1;
}

.cta-text p {
  margin: 0 0 12px;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}
  
.cta-button {
  display: block;
  margin: 12px auto 0 auto;
  padding: 10px 24px;
  background-color: #007BFF;   /* ボタン背景 */
  color: #FFFFFF !important;    /* 強制的に文字色を白 */
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid #0056b3;   /* ボーダー */
  text-align: center;           /* 中央揃え */
  transition: 0.3s;
}

.cta-button:hover {
  background-color: #0056b3;
}
  
/* スマホ対応: 480px以下で縦並び */
@media screen and (max-width: 480px){
  .cta-body {
    flex-direction: column;
    text-align: center; /* スマホでは中央揃え */
  }
  .cta-image img {
    margin-bottom: 12px;
  }
  .cta-text {
    text-align: center; /* スマホでは中央揃え */
  }
}

.breadcrumbs.card a {
    color: #263238;
}

.post a {
    color: #263238;
}