/*
Theme Name: HAKU Child
Template: haku_tcd080
Author: Design Plus
Author URI: http://design-plus1.com/tcd-w/
Description: WordPressテーマ「HAKU」
Version: 1.6.1622370472
Updated: 2021-05-30 19:27:52

*/
/* 料理教室の比較テーブル */
        .uotarashi-table-t table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
            font-size: small;
        }
        .uotarashi-table-t th, .uotarashi-table-t td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
            vertical-align: middle;
        }
        .uotarashi-table-t th {
            background-color: #f4f4f4;
        }

        /* レスポンシブ設定 */
        @media screen and (max-width: 600px) {
            .uotarashi-table-t {
                overflow-x: auto;
            }
        }
/*--------------------------------------
 光る背景<div class="abtn-title">テキスト</div>
--------------------------------------*/
.abtn-title a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
margin: 0px auto;	
font-weight: bold ;
font-size: 25px;
/*border-bottom: solid 5px #82c374 ;*/
/*border-radius: 5px;*/
background-color: #f84f73 ;
color: #ffffff !important;
padding: 20px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
}
.abtn-title {
display: block;
width: 100%;
margin-bottom: 1em;
}
.abtn-title a:hover {
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
.abtn-title a:after {
/*    content: "\f138";
    font-family: "font awesome 5 free";
    font-weight: 900;
    margin-left: 15px;
*/
}
.abtn-title a:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: abtn-mc1 3s ease-in-out infinite;
}
@-webkit-keyframes abtn-title {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*--------------------------------------
 光るボタンとその周りのマイクロコピー
--------------------------------------*/
.abtn-mc1 a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 95%;
margin: 0px auto;	
font-weight: bold ;
font-size: 18px;
/*border-bottom: solid 5px #82c374 ;*/
border-radius: 5px;
background-color: #90d582 ;
color: #ffffff !important;
padding: 10px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
}
.abtn-mc1 {
display: block;
width: 100%;
margin-bottom: 1em;
}
.abtn-mc1 a:hover {
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
.abtn-mc1 a:after {
    content: "\f138";
    font-family: "font awesome 5 free";
    font-weight: 900;
    margin-left: 15px;
}
.abtn-mc1 a:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: abtn-mc1 3s ease-in-out infinite;
}
@-webkit-keyframes abtn-mc1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
p.abtn-mc1-top-text {
    font-weight: bold;
    margin-bottom: 0px;
}
p.abtn-mc1-under-text {
    font-size: .8em;
    margin-top: -10px;
}


/*--------------------------------------
  ブルブル動く文字<span class="buruburu">ブルブル動く文字</span>
--------------------------------------*/
.buruburu {
    display: inline-block;
    animation: hurueru .3s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
/*--------------------------------------
  ブルブル動く文字 激しく
--------------------------------------*/
.buruburu1 {
    display: inline-block;
    animation: hurueru1 .2s  infinite;
}

@keyframes hurueru1 {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(3px, 3px) rotateZ(1deg)}
    50% {transform: translate(0px, 3px) rotateZ(0deg)}
    75% {transform: translate(3px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
/* ************************************************ 
* ワンポイント
* ************************************************ */
.balloon3 {
  position: relative;
  display: inline-block;
  margin: 0.2em 0;
  padding: 0 1px;
  width: 140px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  background: #fa8c2b;
  border-radius: 20px;
  box-sizing: border-box;
}

.balloon3:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fa8c2b;
  z-index: 0;
}
/* ************************************************ 
* ワンポイント文字数が変わったら横幅変わるやつ（青背景）
* ************************************************ */
.balloon88 {
  position: relative;
  display: inline-block;
  margin: 0.8em 0;
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
  padding: 2px 10px 2px 10px;	
  height: 33px;
  line-height: 33px;
  text-align: center;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  background: #1ad4fd;
  border-radius: 20px;
  box-sizing: border-box;
}

.balloon88:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #1ad4fd;
  z-index: 0;
}
/* ************************************************ 
* ワンポイント文字数が変わったら横幅変わるやつ（朱色背景）
* ************************************************ */
.balloon1919 {
  position: relative;
  display: inline-block;
  margin:  0;
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
  padding: 2px 10px 2px 10px;	
  height: 33px;
  line-height: 33px;
  text-align: center;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  background: #ff96b1;
  border-radius: 20px;
  box-sizing: border-box;
}

.balloon1919:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ff96b1;
  z-index: 0;
}
/* もっと小さいバージョン */
.balloon4 {
  position: relative;
  display: inline-block;
  margin: 0.9em 0;
  padding: 0 1px;
  width: 90px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #FFF;
  font-size: 13px;
  font-weight: bold;
  background: #fd6585;
  border-radius: 20px;
  box-sizing: border-box;
}

.balloon4:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fd6585;
  z-index: 0;
}	
	
/* ************************************************ 
* 番号付きリストデザイン
* ************************************************ */
/* 初期設定 */
ol.list-no {
  position: relative;
  margin: 0;
  padding: 0 10px 0 6px;
  list-style: none;
  font-weight: bold;
}
ol.list-no li.list-no {
  position: relative;
  margin: 12px 20px 0 10px; /* 左マージンを調整 */
  padding: 0;
  line-height: 1.6;
  list-style-type: none; 
}

/* ol デザイン */
ol.list-no {
  counter-reset: li;
}
ol.list-no > li.list-no:before {
  position: absolute;
  font-weight: bold;
  counter-increment: li;
  content: counter(li) "";
  left: -50px; /* 位置を調整 */
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  width: 26px;
  height: 26px;
  font-size: 14px;
  text-align: center;
  border-radius: 100%;
  box-sizing: border-box;
  font-weight: bold;
  line-height: 1;
  background: #ffc33c;
  padding: 6px 0;
}

/* リンクデザイン */
ol.list-no a {
  text-decoration: none;
  color: #333;
}
ol.list-no a:hover {
  text-decoration: underline;
}

/* スマホ設定 */
@media screen and (max-width: 768px) {
  ol.list-no {
    padding: 0 10px 0 20px;
    font-size: 16px;
  }
  ol.list-no li.list-no {
    margin: 10px 20px 10px 8px; /* 左マージンを調整 */
    padding: 0;
    line-height: 2em;
  }
  ol.list-no:before {
    font-size: 13px;
    left: -30px;
    top: 0px;
    padding: 5px 0;
    width: 22px;
    height: 22px;
  }
}

/* 装飾 */
ol.list-no body {
  margin: 40px 40px;
  background-color: #edf1fa;
}

/* 囲み枠 */
.box11{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 2px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 10px 5px;
    font-weight: bold; 
}

/* ************************************************ 
*   コンタクトフォーム入力漏れの箇所を赤く表示するやつ
* ************************************************ */
    .wpcf7 .wpcf7-not-valid {
     background: #ffb6c1;
     }
     .wpcf7 .wpcf7-validation-errors {
     color: #B94A48;
     background-color: #F2DEDE;
     border: 1px solid #EED3D7;
     }
     .wpcf7 .wpcf7-mail-sent-ok {
     color: #3A87AD;
     background-color: #D9EDF7;
     border: 1px solid #BCE8F1;
     }
/* ************************************************ 
*   マイクロコピー
* ************************************************ */
.micro_moji {
line-height: 2.3em;
text-align:center;
margin: 0px 0px 30px 0px;	
}
.micro_moji_01 {
	font-size: 140%;
	font-weight:bold;
	line-height: 1.0em;
}
.micro_moji_02 {
	font-size: 140%;
	font-weight:bold;
	line-height: 1.1em;
	margin: 0px 0px 10px 0px;
text-align:center;
}

/* ************************************************ 
*   デフォ（ボタン1）
* ************************************************ */
.q_custom_button1 {
margin: 10px 0px 0px 0px;	
}

/* ************************************************ 
*   番号が付与される見出し
* ************************************************ */
h2.midashi_2 {
    font-weight: bold;
    border-bottom: 1px solid #171717;
    border-top: 1px solid #171717;
    position: relative;
    counter-increment: titleNum;
    padding: .4em 0 .5em 2em !important;
    @display: block;

}
h2.midashi_2::before {
    font-size: .9em;
    content: counter(titleNum);
    width: 28px;
    height: 28px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    line-height: 28px;
    color: #fff;
    background-color: #fb4768;
    position: absolute;
    left: 0;
    top: .6em; /* 番号を少し下に移動デフォ0.5em */
    text-align: center;
	font-weight:bold;
}

/* ************************************************ 
*   見出し3
* ************************************************ */
h3.midashi_3 {
  padding: .25em 0 .25em .75em !important;
  border-left: 6px solid #fe768f;
  border-bottom: 1px solid #ccc;	
}

/* ************************************************ 
*   見出し4
* ************************************************ */
h4.midashi_4 {
  font-size: 1.3em;		
  position: relative;
  padding: 0 .5em .5em 2em !important;
  /*border-bottom: 1px solid #3a3a3a;*/
}
h4.midashi_4::before,
h4.midashi_4::after {
  position: absolute;
  content: '';
  border-radius: 100%
}
h4.midashi_4::before {
  top: .2em;
  left: .2em;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: #fe768f;
}
h4.midashi_4::after {
  top: .7em;
  left: .7em;
  width: 13px;
  height: 13px;
  background: #fdb9c5;
}
/* ************************************************ 
*   見出し5
* ************************************************ */
h5.midashi_5 {
  font-size: 1.1em;		
  position: relative;
  padding: 0 .5em .5em 2.0em !important;

}
h5.midashi_5::after {
  position: absolute;
  top: .4em;
  left: .8em;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  background-color: #f96e74;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/*********************************
* タイムライン
*********************************/
.ptimeline-wrap{
    margin:0 auto 2rem;
}
.ptimeline-wrap .ptimeline{
    padding:0 !important;
    list-style:none !important;
}
.ptimeline-wrap .ptimeline-label {
    padding: 3px 0 0 2px;
    color: #aaa;
    font-size: 12px;
    font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    color:#00bfff;
}
.ptimeline-wrap .ptimeline-main {
    margin-top: 0.5em;
    padding: 0 0 1.5em;
    font-size: 0.9em;
    line-height: 1.8;
    border-bottom: dashed 1px #ddd;
    color:#555;
}
.ptimeline-wrap .ptimeline-main img{
  display:block;
  margin:1em auto;
}
.ptimeline-wrap .ptimeline-item {
    position: relative;
    padding: 0 0 1em 1.5em !important;
    margin-bottom:0 !important;
    border:none;
}
.ptimeline-wrap .ptimeline .ptimeline-item:before {
    content: "";
    width: 3px;
    background: #eee !important;
    display: block;
    position: absolute;
    top: 25px;
    bottom: -3px;
    left: 5px;
}
.ptimeline-wrap .ptimeline-item:last-child:before{
    content:none;
}
/*********************************
* タイムライン マーカー
*********************************/
.ptimeline-wrap .ptimeline-marker{
    display: block;
    position: absolute;
    content: "";
    top: 6px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 3px #00bfff;
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
    background:#00bfff;
}
/*四角 */
.ptimeline-wrap .square .ptimeline-marker{
    border-radius: 0;
}
/* アイコン*/
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker:before{
    font-family: "Font Awesome 5 Free";
    top: -1px;
    left: 0;
    position:absolute;
    font-weight:bold;
    font-size:16px;
    line-height:1;
    color:#00bfff;
}
.ptimeline-wrap .icon .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .icon .ptimeline-item:last-child .ptimeline-marker{
    background:none !important;
}
/* 画像*/
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker:before {
    content:"";
    display:inline-block;
    background-image:url(ここに画像URL); /* 画像1番目*/
    background-size:contain;
    background-repeat:no-repeat;
    width:40px;
    height:40px;
    position: relative;
    top: -4px;
    left: -2px;
}
.ptimeline-wrap .tl-img li:nth-of-type(2) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像2番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(3) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像3番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(4) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像4番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(5) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像5番目*/
}
.ptimeline-wrap .tl-img .ptimeline-item {
    padding: 0 0 1em 3em !important;
}
.ptimeline-wrap .tl-img .ptimeline-item:before {
    top: 30px;
    left: 15px;
}
/*********************************
* タイムライン カラー
*********************************/
/* ピンク */
.ptimeline-wrap .pink .ptimeline-title{
    color:#f7bcbc !important; /* タイトル色 */
}
.ptimeline-wrap .pink .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .pink .ptimeline-marker{
    border: solid 3px #f7bcbc !important; /* マーカー色 */
    color:#f7bcbc; /* アイコン色 */
}
.ptimeline-wrap .pink .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .pink .ptimeline-item:last-child .ptimeline-marker{
    background:#f7bcbc; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .pink .ptimeline-item .ptimeline-marker:before{
    color:#f7bcbc !important; /* アイコン色 */
}
/*イエロー*/
.ptimeline-wrap .yellow .ptimeline-title{
    color:#fdc44f !important; /* タイトル色 */
}
.ptimeline-wrap .yellow .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .yellow .ptimeline-marker{
    border: solid 3px #fdc44f !important; /* マーカー色 */
    color:#fdc44f; /* アイコン色 */
}
.ptimeline-wrap .yellow .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .yellow .ptimeline-item:last-child .ptimeline-marker{
    background:#fdc44f; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .yellow .ptimeline-item .ptimeline-marker:before{
    color:#fdc44f !important; /* アイコン色 */
}
/*グリーン*/
.ptimeline-wrap .green .ptimeline-title{
    color:#2fcdb4 !important; /* タイトル色 */
}
.ptimeline-wrap .green .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .green .ptimeline-marker{
    border: solid 3px #2fcdb4 !important; /* マーカー色 */
    color:#2fcdb4; /* アイコン色 */
}
.ptimeline-wrap .green .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .green .ptimeline-item:last-child .ptimeline-marker{
    background:#2fcdb4; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .green .ptimeline-item .ptimeline-marker:before{
    color:#2fcdb4 !important; /* アイコン色 */
}

/*目次の真ん中寄せ*/
#toc_container {
	display: block !important;
	width: 80% !important;
	background: #fff; /* 背景色 */
	border: 1px solid #ccc; /* 枠 */
	font-size: 95%; /* フォントサイズ */
	box-sizing: border-box; /* スマホの横揺れ防止 */
	line-height: 1.4; /* 行間 */
	margin: 36px auto; /* 外側の余白 */
	padding: 1em 2em; /* 内側の余白 */
}
@media screen and (max-width: 640px) {

#toc_container {
	display: block !important;
	width: 100% !important;
}

}
/* ************************************************ 
*  プロフィール枠 この記事を書いたひと
* ************************************************ */

#author_profile {
  border: 1px solid #cccccc;
  width: 100%;
  margin: 40px auto;
  overflow: hidden;
}
#author_profile p {
  margin-bottom: 20px;
  line-height: 1.8;
}
/*この記事を書いた人の見出し*/
#author_profile p.label {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #cccccc;
  padding: 10px 15px;
}
/*名前*/
#author_profile p.author_name {
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  position: relative;
}
/*名前下の下線*/
#author_profile p.author_name::after {
  content: "";
  border-bottom: solid 3px #cccccc;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
}
/*左側画像ブロック*/
#author_profile .left {
  width: 14%;
  float: left;
  margin: 10px 0 15px 30px;
}
/*画像サイズ*/
#author_profile .left img {
  width: 100%;
}
/*右側テキストブロック*/
#author_profile .right {
  width: 74%;
  float: left;
  font-size: 12px;
  line-height: 1.6;
  padding: 5px 0 20px 30px;
}
/*テキスト下部SNSブロック*/
#author_profile .right ul.author_sns {
  margin: 0;
  border-top: 1px dotted #dddddd;
  margin-top: 15px;
  padding-top: 20px;
}
#author_profile .right ul.author_sns li {
  float: left;
  margin-right: 15px;
  list-style: none;
}
#author_profile .right ul.author_sns li:last-child {
  margin-right: 0;
}
/*SNSアイコンを使う場合は別途アイコンCSSの設定が必要*/
#author_profile .right ul.author_sns li i.fa-instagram {
  color: #696969;
  /*background-color: #cccccc;*/
  margin-right: 4px;
  padding: 3px 4px 0;
  position: relative;
  bottom: -1px;
}

/* Clearfix 20231017GTP追記*/
#author_profile::after {
  content: "";
  display: table;
  clear: both;
}
/* Box sizing border-box for all elements 20231017GTP追記*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*SP時の挙動（画面サイズが小さい時）*/
@media (max-width: 480px) {
  #author_profile p.author_name {
    text-align: center;
  }
  #author_profile .left {
    width: 100%;
    float: none;
    margin-left: 0;
    margin-bottom: 0;
    text-align: center;
  }
  #author_profile .left img {
    width: 33%;
  }
  #author_profile .right {
    width: 90%;
    float: none;
    padding: 10px 20px 0;
  }
  #author_profile .right ul.author_sns li {
    margin-bottom: 20px;
  }
}

/* ************************************************ 
*  テキストリンク 矢印うごくやつ
* ************************************************ */
.txt-link {
  font-size: 1.1em;
  line-height: 1.3em;	
  font-weight: bold;
  margin: .8em 0 2em;
  /*text-align: center;*/
}
.txt-link.is-cv a {
text-decoration: underline;	
  padding-left: 25px;
  position: relative;
}
.txt-link.is-cv a:before {
  color: #231e1e;
  content:"🐡";
  /*content: "\f061";	*/
    font-family: "font awesome 5 free";
  font-size: .9em;
  left: 0;
  margin: 0 10px 0 2px;
  position: absolute;
  text-shadow: 1px 2px 0 rgba(0,0,0,.3);
}

/* CVボタン矢印揺れ */
.is-trembling a:before {
  -webkit-animation-name:is-trembling;
  -webkit-animation-duration:.8s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease;
  -moz-animation-name:is-trembling;
  -moz-animation-duration:1s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:ease;
}
@-webkit-keyframes is-trembling {
  0% {-webkit-transform:translate(-3px, 0);}
  100% {-webkit-transform:translate(0, 0);}
}

/* ************************************************ 
*  テキストリンク 矢印うごくやつ（外部リンク用）
* ************************************************ */
.txt-link-gaibu {
  font-size: 1.1em;
  line-height: 1.3em;	
  font-weight: bold;
  margin: .8em 0 2em;
  /*text-align: center;*/
}
.txt-link-gaibu.is-cv a {
text-decoration: underline;	
  padding-left: 25px;
  position: relative;
}
.txt-link-gaibu.is-cv a::after {
  content: "\f35d"; /* FontAwesomeの外部リンクアイコン */
  font-family: "Font Awesome 5 Free"; /* FontAwesomeのフォントファミリー */
  font-weight: 900; /* FontAwesomeのsolidアイコンに必要なフォントウェイト */
  margin-left: 5px; /* アイコンとテキストの間のスペース */
}
.txt-link-gaibu.is-cv a:before {
  color: #231e1e;
  content:"🐟";
  /*content: "\f061";	*/
    font-family: "font awesome 5 free";
  font-size: .9em;
  left: 0;
  margin: 0 10px 0 2px;
  position: absolute;
  text-shadow: 1px 2px 0 rgba(0,0,0,.3);
}

/* CVボタン矢印揺れ */
.is-trembling a:before {
  -webkit-animation-name:is-trembling;
  -webkit-animation-duration:.8s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease;
  -moz-animation-name:is-trembling;
  -moz-animation-duration:1s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:ease;
}
@-webkit-keyframes is-trembling {
  0% {-webkit-transform:translate(-3px, 0);}
  100% {-webkit-transform:translate(0, 0);}
}
/* ************************************************ 
*   文中テキストリンクの最後に外部リンクのマークaタグ
* ************************************************ */
.external-link {
  text-decoration: underline!important;
  color: blue !important;
  display: inline-block; /* ブロックレベルの特性を持たせる */
  position: relative; /* 子要素の位置を相対的にする */
  padding-right: 20px; /* アイコンのスペースを確保 */
}

.external-link::after {
  content: "\f35d"; /* FontAwesomeの外部リンクアイコン */
  font-family: "Font Awesome 5 Free"; /* FontAwesomeのフォントファミリー */
  font-weight: 900; /* solidアイコンのために必要 */
  position: absolute; /* 絶対位置 */
  right: 0; /* 右端に配置 */
  top: 50%; /* 上端から50%の位置に配置 */
  font-size: 0.8em; /* アイコンのサイズを調整 */
  transform: translateY(-50%); /* Y軸方向に-50%移動して、アイコンをテキストの中央に配置 */
}


/* ************************************************ 
*   マーカー
* ************************************************ */
.marker1 {
background: linear-gradient(transparent 60%, #ffdc98 50%);
}
.marker2 {
background: linear-gradient(transparent 60%, #ffbcd5 50%);
}
.marker3 {
background: linear-gradient(transparent 60%, #feff86 50%);
}

/* ************************************************ 
*   マーカー（marker4）動くやつ
* ************************************************ */
@keyframes wave-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.marker4 {
  background: linear-gradient(45deg, transparent 60%, #feff86 50%);
  background-size: 300% 300%;
  animation: wave-animation 3s ease infinite;
}


/* ************************************************ 
*  枠付きリスト
* ************************************************ */
ul.list-matome, ol {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

ul.list-matome li, ol li {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
}

/* ************************************************ 
*  ボックス枠
* ************************************************ */
.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}
/* ************************************************ 
*  ボックス枠1
* ************************************************ */
.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}
.box1 p {
    margin: 0; 
    padding: 0;
}
/* ************************************************ 
*  店舗紹介テーブル
* ************************************************ */
    .info-table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid black;
    }
    .info-table th {
        text-align: center;
        font-size: 80%; /* テキストサイズを小さくする */
        padding: 10px 5px; /* 上下の内側のスペースを調整する（必要に応じて値を変更） */
        /* もしくは、高さを直接指定する場合は以下を使用 */
        /* height: 50px; */ /* セルの高さを指定（必要に応じて値を変更） */
    }
    .info-table td {
        padding: 5px;
        font-size: 80%;
        text-align: center;
        vertical-align: middle;
        border: 1px solid black;
    }
    .info-table td:first-child {
        width: 33%;
    }
    .info-table .data {
        text-align: left;
        line-height: 1.2;
    }
/* ************************************************ 
*  画像引用
* ************************************************ */
/* 画像とキャプションテキストを含むコンテナのスタイル */
.image-container {
    position: relative; /* 子要素に絶対位置を適用するため */
    display: inline-block; /* コンテナのサイズを内容に合わせる */
    line-height: 0; /* 画像間の余分なスペースを削除 */
}

/* 画像のキャプションテキストのスタイル */
.image-caption {
    position: absolute; /* 親要素（.image-container）に対する絶対位置 */
    left: 0; /* 左下隅に配置 */
    bottom: 0;
    padding: 5px 10px; /* テキスト周りのスペース */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
    color: #fff; /* 白いテキスト */
    font-size: 12px; /* 小さめのフォントサイズ */
    font-style: italic; /* イタリック体のフォントスタイル */
    line-height: 1; /* 通常の行の高さ */
    text-align: left; /* テキストを左揃え */
}

/* 画像自体のスタイル（必要に応じて調整） */
.alignnone.size-full.wp-image-1636 {
    display: block; 
    max-width: 100%; 
    height: auto; 
}

/* .image-caption内のaタグのテキストカラーを白に設定 */
.image-caption a {
    color: #fff!important; /* リンクテキストの色を白に設定 */
    text-decoration: none; /* リンクの下線を削除 */
}

/* リンクがホバーされたときのスタイル */
.image-caption a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}
/* ************************************************ 
*  チェックボックスをCSSで表現
* ************************************************ */
.custom-list {
  font-size: 15px;
  line-height: 1.8;
  list-style-type: none;
  padding-left: 0; /* リストを左に寄せる */
}

.custom-list li+li {
  margin-top: 5px;
}

.custom-list li {
  list-style-type:none;     
  position: relative;
  padding-left: 35px; /* チェックボックスのサイズを考慮 */
}

.custom-list li:before {
  content: "\2713"; /* チェックマーク */
  position: absolute;
  top: 50%; /* チェックマークの位置を中央に調整 */
  left: 5px; /* チェックマークの位置を調整 */
  transform: translateY(-50%); /* Y軸方向に50%移動して垂直方向の中央に配置 */
  color: #9c9c9c; /* チェックマークの色 */
  font-size: 25px; /* チェックマークのサイズ */
  font-weight: bold; /* チェックマークを太くする */
}

.custom-list li:after {
  content: "";
  position: absolute;
  top: 50%; /* チェックボックスを垂直方向の中央に配置 */
  left: 0; 
  transform: translateY(-50%); /* Y軸方向に50%移動して垂直方向の中央に配置 */
  width: 20px; /* チェックボックスを大きくする */
  height: 20px; /* チェックボックスを大きくする */
  border: 3px solid #9c9c9c; /* 枠線を太くする */
  border-radius: 2px;
  background-color: #FFFFFF; /* チェックボックスの背景色を白に設定 */
}