@charset "UTF-8";

h1 {
  margin-top: 0;
  font-size: 1.5rem;
}
h2,h3,h4,h5,h6 {font-weight: bold;}
h2 {font-size: 1.25rem;}
h3 {font-size: 1.125rem;}
h4 {font-size: 1rem;}
h5,h6 {font-size: 1rem;}


/* ページタイトル */
.page-title {
  margin: 0 0 0.725rem;
  line-height: 1;
}
/* 見出し 大 */
.head {
  margin: 0 0 0.725rem;
  line-height: 1.2;
}


/* 各見出しのスタイル設定 */
.main h1,
.main-single h1 {
  position: relative;
  padding: 0.75em 1em 0.75em 1.5em;
  border: 1px solid #6C1A23;
  font-weight: bold;
}
.main h1:before,
.main-single h1:before {
  position: absolute;
  top: 20%;
  left: 0.65em;
  content: '';
  width: 8px;
  height: 60%;
  background-color: #9d2633;
}


.main h2,
.main-single h2 {
  position: relative;
  padding: 0.25em 0 0.5em 0.75em;
  border-left: 8px solid #9d2633;
}
.main h2:before,
.main-single h2:before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 2px solid #6C1A23;
}


.main h3,
.main-single h3 {
  padding: 0.25em 0 0.5em 0.75em;
  border-left: 8px solid #B4313F;
  background: transparent;
}


.main h4,
.main-single h4 {
  padding: 0.25em 0 0.5em 0.75em;
  border-bottom: 2px solid #6C1A23;
  background: transparent;
}


.main h5,
.main-single h5 {
  padding: 0.25em 0 0.5em 0.75em;
  border-bottom: 2px solid rgba(228,65,68,0.40);
  background: transparent;
}


.main h6,
.main-single h6 {
  padding: 0.25em 0 0.5em 0.75em;
  background: transparent;
}


.side h2 {
  padding: 0.25em 0 0.5em 0.75em;
  border-left: 8px solid #B4313F;
  background: transparent;
}
.side h2:before {
  display: none;
}


.side h3 {
  padding: 0.25em 0 0.5em 0.75em;
  border-bottom: 2px solid #6C1A23;
  background: transparent;
}


.side h4 {
  padding: 0.25em 0 0.5em 0.75em;
  border-bottom: 2px solid rgba(228,65,68,0.40);
  background: transparent;
}


/* メイン領域のh3のように左側にボーダーが付きます */
.main .bar-left,
.main-single .bar-left,
.side .bar-left {
  padding-left: 0.75em;
  border-left: 8px solid #B4313F;
  background: transparent;
}


/* 蛍光マーカーのような線が引かれます */
.main .line-marker,
.main-single .line-marker,
.side .line-marker {
  display: inline-block;
  padding: 0 0.25em;
  background: -webkit-linear-gradient(transparent 50%, #D7564D 50%);
  background: -o-linear-gradient(transparent 50%, #D7564D 50%);
  background: linear-gradient(transparent 50%, #D7564D 50%);
}


/* メイン領域のh4のように下側にボーダーが付きます */
.main .line-bottom,
.main-single .line-bottom,
.side .line-bottom {
  padding-left: 0.75em;
  border-bottom: 2px solid #6C1A23;
  background: transparent;
}


/* 角が丸い枠になります */
.main .border-radius,
.main-single .border-radius,
.side .border-radius {
  display: inline-block;
  padding: 0.5em 0.75em;
  border: 2px solid #6C1A23;
  /* h1を角丸にする場合は上記記述を削除、もしくは下記記述をh1へ移動 */
  border-radius: 10px;
}


/* 文章の横に水平線が引かれます */
.line-center,
.main .line-center,
.main-single .line-center,
.side .line-center {
  display: flex;
  align-items: center;
}
.line-center:after,
.main .line-center:after,
.main-single .line-center:after,
.side .line-center:after {
  content: "";
  display: inline; /* for IE */
  flex-grow: 1;
  margin-left: 0.5em;
  border-top: 2px solid #6C1A23;
}



/* メイン領域の見出しに .bar-left を設定する場合 */
.main h2.bar-left,
.main-single h2.bar-left,
.main h3.bar-left,
.main-single h3.bar-left,
.main h4.bar-left,
.main-single h4.bar-left,
.main h5.bar-left,
.main-single h5.bar-left {
  position: inherit;
}
.main h2.bar-left:before,
.main-single h2.bar-left:before {
  display: none;
}

.main h4.bar-left,
.main-single h4.bar-left {
  border-bottom: none;
}

.main h5.bar-left,
.main-single h5.bar-left {
  border-bottom: none;
}


/* メイン領域の見出しに .line-marker を設定する場合 */
.main h2.line-marker,
.main-single h2.line-marker,
.main h3.line-marker,
.main-single h3.line-marker,
.main h4.line-marker,
.main-single h4.line-marker,
.main h5.line-marker,
.main-single h5.line-marker {
  position: inherit;
  padding: 0 0.75em 0.25em;
}
.main h2.line-marker:before,
.main-single h2.line-marker:before {
  display: none;
}

.main h2.line-marker,
.main-single h2.line-marker {
  border-left: none;
}

.main h3.line-marker,
.main-single h3.line-marker {
  border-left: none;
}

.main h4.line-marker,
.main-single h4.line-marker {
  border-bottom: 0;
}

.main h5.line-marker,
.main-single h5.line-marker {
  border-bottom: 0;
}


/* メイン領域の見出しに .line-bottom を設定する場合 */
.main h2.line-bottom,
.main-single h2.line-bottom,
.main h3.line-bottom,
.main-single h3.line-bottom,
.main h4.line-bottom,
.main-single h4.line-bottom,
.main h5.line-bottom,
.main-single h5.line-bottom {
  position: inherit;
}
.main h2.line-bottom:before,
.main-single h2.line-bottom:before {
  display: none;
}

.main h2.line-bottom,
.main-single h2.line-bottom {
  border-left: none;
}

.main h3.line-bottom,
.main-single h3.line-bottom {
  border-left: none;
}


/* メイン領域の見出しに .border-radius を設定する場合 */
.main h2.border-radius,
.main-single h2.border-radius,
.main h3.border-radius,
.main-single h3.border-radius,
.main h4.border-radius,
.main-single h4.border-radius,
.main h5.border-radius,
.main-single h5.border-radius {
  position: inherit;
}
.main h2.border-radius:before,
.main-single h2.border-radius:before {
  display: none;
}


/* メイン領域の見出しに .line-center を設定する場合 */
.main h2.line-center,
.main-single h2.line-center,
.main h3.line-center,
.main-single h3.line-center,
.main h4.line-center,
.main-single h4.line-center,
.main h5.line-center,
.main-single h5.line-center {
  position: inherit;
}
.main h2.line-center:before,
.main-single h2.line-center:before {
  display: none;
}

.main h2.line-center,
.main-single h2.line-center {
  border-left: none;
}

.main h3.line-center,
.main-single h3.line-center {
  border-left: none;
}

.main h4.line-center,
.main-single h4.line-center {
  border-bottom: none;
}

.main h5.line-center,
.main-single h5.line-center {
  border-bottom: none;
}