@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** ハル式V1の装飾クラス
************************************/
.entry-content .box-point,
.entry-content .box-caution,
.entry-content .box-memo {
  box-sizing: border-box;
  position: relative;
  margin: 1.5em 0;
  padding: 1.2em 1.25em 1.15em;
  border: 1px solid;
  border-left-width: 6px;
  border-radius: 6px;
  line-height: 1.8;
}

.entry-content .box-point::before,
.entry-content .box-caution::before,
.entry-content .box-memo::before {
  display: block;
  margin-bottom: 0.45em;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.entry-content .box-point {
  border-color: #4f86c6;
  background: #f1f7ff;
}

.entry-content .box-point::before {
  color: #2d6099;
  content: "POINT";
}

.entry-content .box-caution {
  border-color: #d89a25;
  background: #fff8e8;
}

.entry-content .box-caution::before {
  color: #9b6200;
  content: "CAUTION";
}

.entry-content .box-memo {
  border-color: #7d8790;
  background: #f5f7f8;
}

.entry-content .box-memo::before {
  color: #58616a;
  content: "MEMO";
}

.entry-content .scroll-box {
  box-sizing: border-box;
  max-width: 100%;
  margin: 1.5em 0;
  padding: 0.25em 0 0.65em;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.entry-content .scroll-box > table {
  min-width: 640px;
  margin-bottom: 0;
}

.entry-content .conversation-box {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 1.5em 0;
}

.entry-content .conversation-box .name {
  box-sizing: border-box;
  flex: 0 0 92px;
  padding: 0.7em 0.45em;
  border: 1px solid #cfd6dc;
  border-radius: 999px;
  background: #f5f7f8;
  color: #3f4850;
  font-size: 0.86em;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.entry-content .conversation-box .text {
  box-sizing: border-box;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 1em 1.1em;
  border: 1px solid #cfd6dc;
  border-radius: 10px;
  background: #fff;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.entry-content .conversation-box .text::before,
.entry-content .conversation-box .text::after {
  position: absolute;
  top: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
}

.entry-content .conversation-box .text::before {
  left: -11px;
  border-width: 9px 11px 9px 0;
  border-color: transparent #cfd6dc transparent transparent;
}

.entry-content .conversation-box .text::after {
  left: -9px;
  border-width: 9px 11px 9px 0;
  border-color: transparent #fff transparent transparent;
}

.entry-content .marker-yellow {
  padding: 0 0.08em;
  background: linear-gradient(
    transparent 58%,
    rgba(255, 225, 66, 0.72) 58%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  .entry-content .box-point,
  .entry-content .box-caution,
  .entry-content .box-memo {
    margin: 1.25em 0;
    padding: 1em;
  }

  .entry-content .conversation-box {
    gap: 9px;
  }

  .entry-content .conversation-box .name {
    flex-basis: 70px;
    padding: 0.6em 0.35em;
    font-size: 0.78em;
  }

  .entry-content .conversation-box .text {
    padding: 0.9em;
  }
}