/** Shopify CDN: Minification failed

Line 493:0 Expected "}" to go with "{"

**/
/* ボタン全体 */
.flowbtn8{
border-radius:50%;
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:30px;
text-decoration:none;
transition:.5s;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn8:hover{
color:#fff!important;
}
/* アイコンをど真ん中に */
.flowbtn8 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.flowbtn8.fl_tw2{
border:solid 1px #000;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn8.insta_btn2 {
border:solid 1px #000;
color:#c6529a;
font-size:35px;
}
/* Instagramマウスホバー時 */
.flowbtn8.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* Facebook */
.flowbtn8.fl_fb2{
border:solid 1px #000;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn8.fl_fb2:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* Feedly */
.flowbtn8.fl_fd2{
border:solid 1px #6cc655;
color:#6cc655;
font-size:28px;
}
/* Feedlyマウスホバー時 */
.flowbtn8.fl_fd2:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* Pocket */
.flowbtn8.fl_pk2{
border:solid 1px #ef3f56;
color:#ef3f56;
font-size:32px;
}
/* Pocketマウスホバー時 */
.flowbtn8.fl_pk2:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* はてブ */
.flowbtn8.fl_hb2{
border:solid 1px #1ba5dc;
color:#1ba5dc;
font-size:25px;
}
/* はてブマウスホバー時 */
.flowbtn8.fl_hb2:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* YouTube */
.flowbtn8.fl_yu2{
border:solid 1px #000;
color:#fc0d1c;
font-size:28px;	
}
/* YouTubeマウスホバー時 */
.flowbtn8.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn8.fl_li2{
border:solid 1px #000;
link-color:#00c300;
font-size:35px;
}
/* LINEマウスホバー時 */
.flowbtn8.fl_li2:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* お問い合わせ */
.flowbtn8.fl_ma2{
border:solid 1px #f3981d;
color:#f3981d;	
font-size:28px;
}
/* お問い合わせマウスホバー時 */
.flowbtn8.fl_ma2:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti li {
  display: inline-block;  /* 水平に並べる */
  list-style-type: none;  /* 先頭のポッチを消す */
  margin: 0px;
  padding: 20px 0px 20px 0px;
  width: 60px;
  text-align:center!important;
  color: white;
  border-radius: 4px;
  border-color: black;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}

/* フォローしてね！という文言 */
.followiyashi{
font-size: 150%;
font-weight: bold;
}

/* ここまでSNSコード貼り付け */


h2.h2b {
  position: relative;
  padding: 0.5em;
  background: #87ceeb;
  color: white;
}

h2.h2b::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}


h3.h3b {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}


h4.h4b {
  color: #6594e0;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #6594e0;
}


/* 吹き出しのcss*/

.blog-container .title-container {
            text-align: center;
            background-color: #ffebcd;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 10px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }

       .blog-container　.title-container h2 {
            color: #333;
            font-size: 24px;
            margin: 0;
        }

       .blog-container　.chat-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .blog-container .message {
            display: flex;
            align-items: center;  /* 中心揃え */
            margin-bottom: 10px;
        }

        .message.left .bubble {
            background-color: rgba(255, 235, 205, 0.8);
            color: #333;
            border-radius: 15px 15px 15px 0px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            margin-left: 10px; /* バランス調整 */
        }

        .blog-container .message.right {
            justify-content: flex-end;
            flex-direction: row-reverse;
        }

        .blog-container .message.right .bubble {
            background-color: rgba(173, 216, 230, 0.8);
            color: #333;
            border-radius: 15px 15px 0px 15px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            margin-right: 10px; /* バランス調整 */
        }

        .blog-container .icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }

        .blog-container .message.right .icon {
            margin-left: 10px;
            margin-right: 0;
        }

        .blog-container .bubble {
            max-width: 70%;
            padding: 15px;
            border-radius: 15px;
            position: relative;
        }

        .blog-container .bubble::before {
            content: "";
            position: absolute;
            top: 50%;  /* アイコンの中心に吹き出しの先端を揃える */
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border: 10px solid transparent;
        }

        .blog-container .message.left .bubble::before {
            left: -20px;
            border-right-color: rgba(255, 235, 205, 0.8);
        }

        .blog-container .message.right .bubble::before {
            right: -20px;
            border-left-color: rgba(173, 216, 230, 0.8);
        }

        @media (max-width: 600px) {
            .blog-container .icon {
                width: 50px;
                height: 50px;
            }

            .blog-container .bubble::before {
                top: 50%;  /* アイコンの中心に吹き出しの先端を揃える */
                transform: translateY(-50%);
            }

/* リンクプレビュースタイル（共通） */
.blog-container .link-preview {
  display: block;
  border: 1px solid #FF69B4;
  background-color: #FFF0F5;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  width: 100%;
  padding-top: 10px; /* ボックス全体のパディングをリセット */
}

/* 画像スタイル（共通） */
.blog-container .link-preview img {
  width: 100%; /* 横幅いっぱいに */
  height: auto; /* アスペクト比を維持 */
  max-width: 100%; /* ボックスの最大幅にフィット */
  border-radius: 5px; /* 画像全体の角を丸くする */
  margin: 10px; /* 余白をなくす */
}

/* コンテンツスタイル（共通） */
.blog-container .preview-content {
  padding: 10px;
}

.blog-container .preview-title {
  font-weight: bold;
  font-size: 1em; /* 文字サイズを小さく調整 */
  color: #333;
  margin: 0; /* タイトルの余白をなくす */
  text-align: left; /* タイトルを左揃え */
}

/* スマホに最適化 */
@media (max-width: 600px) {
  .blog-container .link-preview {
    padding: 0; /* パディングをなくす */
  }

  .blog-container .link-preview img {
    width: 100%; /* 画像を横幅いっぱいに */
    height: auto; /* アスペクト比を維持 */
    max-width: 100%; /* 画像の最大幅をボックスに合わせる */
    margin-top: 10px; /* 画像上部に狭い余白を追加 */
  }

  .blog-container .preview-content {
    padding: 10px;
  }

  .blog-container .preview-title {
    text-align: center;
  }
}

/* PC用のスタイル */
@media (min-width: 601px) {
  .blog-container .link-preview {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    max-width: 800px; /* ボックスの最大幅 */
    margin: 20px auto; /* 中央揃え */
  }

  .blog-container .link-preview img {
    width: 100%; /* ボックスの幅いっぱいに画像を表示 */
    height: auto; /* 高さは画像のアスペクト比に合わせる */
    max-width: 800px; /* 画像の最大幅をボックスに合わせる */
    object-fit: contain; /* 画像を最大幅にフィット */
    border-radius: 5px; /* 画像全体の角を丸くする */
    margin-top: 10px; /* 画像上部に狭い余白を追加 */
  }

  .blog-container .preview-content {
    padding: 10px;
    width: 100%;
    text-align: center;
  }

  .blog-container .preview-title {
    text-align: center;
  }
}

/* 新規チャットコンテナ */

.chat-container {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: auto;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  margin: 10px;
  position: relative;
}

.chat-message .message-content {
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.5;
  max-width: 70%;
}

.chat-message.sender {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message.sender .message-content {
  background-color: #dcf8c6; /* 送信者のバブル色 */
  color: #000;
}

.chat-message.receiver .message-content {
  background-color: #ffffff; /* 受信者のバブル色 */
  border: 1px solid #ccc;
  color: #000;
}

.chat-message .profile-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 10px;
}

.chat-title {
  text-align: center;
  margin: 20px;
  font-weight: bold;
  font-size: 18px;
}

@media screen and (max-width: 480px) {
  .chat-message .message-content {
    font-size: 14px;
    max-width: 80%;
  }

  .chat-message .profile-image {
    width: 40px;
    height: 40px;
  }
}


/*目次スタイル*/
/* 文中目次のスタイル */
.in-article-toc {
    background-color: #ffe4e1; /* 薄いピンク色 */
    border: 2px solid #d63384; /* ピンク色の枠線 */
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.in-article-toc .toc-title {
    font-size: 18px;
    color: #d63384; /* ピンク色の文字 */
    margin-bottom: 10px;
    text-align: center; /* タイトルを中央揃え */
}

.in-article-toc ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.in-article-toc li {
    margin: 8px 0;
}

.in-article-toc li a {
    text-decoration: none;
    color: #6f42c1; /* 紫色のリンク */
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.in-article-toc li a:hover {
    color: #fff; /* 白い文字 */
}