@charset "UTF-8";
/* Scss Document */
/*=============================================================
 共通
=============================================================*/
.com_btn01.bg_O {
  background-color: #FACE55; }
  .com_btn01.bg_O a {
    background-color: #FACE55;
    border-color: #fff; }
    .com_btn01.bg_O a span:before {
      background: url("../image/common/arrow_w.png") no-repeat center center;
      background-size: cover; }

/*=============================================================
 archive
=============================================================*/
.archive {
  text-align: left; }
  .archive.container {
    padding-bottom: 50px;
    max-width: 800px; }
    @media print, screen and (min-width: 768px) {
      .archive.container {
        padding-bottom: 80px; } }
  .archive .postList .postBox {
    position: relative;
    background: url("../image/common/line01.png") repeat-x bottom center;
    padding-bottom: 30px;
    margin-bottom: 30px; }
    @media print, screen and (min-width: 768px) {
      .archive .postList .postBox {
        display: flex;
        justify-content: space-between; } }
    .archive .postList .postBox:last-child {
      background: none;
      padding-bottom: 0px;
      margin-bottom: 0px; }
    .archive .postList .postBox img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      border-radius: 15px; }
      @media print, screen and (min-width: 768px) {
        .archive .postList .postBox img {
          max-width: 220px;
          height: 150px; } }
    @media print, screen and (min-width: 768px) {
      .archive .postList .postBox .view-pc {
        width: 30%; } }
    @media print, screen and (min-width: 768px) {
      .archive .postList .postBox .inBox {
        width: 65%; } }
    @media screen and (max-width: 768px) {
      .archive .postList .postBox .inBox .col2_sp {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px; } }
    @media screen and (max-width: 768px) {
      .archive .postList .postBox .inBox .col2_sp div {
        width: 65%; } }
    .archive .postList .postBox .inBox .col2_sp div p span {
      background: linear-gradient(transparent 50%, #FACE55 50%);
      margin-right: 1em; }
    .archive .postList .postBox .inBox .col2_sp div p.tit {
      font-size: 150%;
      margin: 10px 0; }
    @media screen and (max-width: 768px) {
      .archive .postList .postBox .inBox .col2_sp .view-sp {
        width: 30%; } }
    .archive .postList .postBox a {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }
      .archive .postList .postBox a span {
        display: none; }

/*=============================================================
 single
=============================================================*/
.single_tea_trivia {
  padding: 0 0 50px 0; }
  @media print, screen and (min-width: 768px) {
    .single_tea_trivia {
      padding: 0 0 80px 0; } }
  .single_tea_trivia .reset {
    text-align: left;
    max-width: 800px; }
    .single_tea_trivia .reset header {
      text-align: center; }
      .single_tea_trivia .reset header p {
        margin: 0; }
        .single_tea_trivia .reset header p span {
          background: linear-gradient(transparent 50%, #FACE55 50%); }
      .single_tea_trivia .reset header h2 {
        margin: 10px 0 0 0; }
    .single_tea_trivia .reset time {
      display: block;
      text-align: right;
      max-width: 635px;
      margin: 10px auto; }
    .single_tea_trivia .reset .thumbnail {
      max-width: 635px;
      margin: 0 auto;
      text-align: center; }
    .single_tea_trivia .reset .lead {
      background: url("../image/common/line01.png") repeat-x bottom left;
      padding: 40px 0;
      margin: 0; }
    .single_tea_trivia .reset h2 {
      margin: 40px 0 0 0; }
    .single_tea_trivia .reset h3 {
      margin: 40px 0 -0.5em 0;
      position: relative;
      padding-left: 1.5em; }
      .single_tea_trivia .reset h3:before {
        content: "●";
        display: inline-block;
        color: #FACE55;
        position: absolute;
        top: 0;
        left: 0; }
    .single_tea_trivia .reset .col3 {
      display: flex;
      justify-content: space-between; }
      .single_tea_trivia .reset .col3 p {
        width: 32%; }
    .single_tea_trivia .reset ul {
      margin-top: 40px;
      border: 5px solid #FAF1D8;
      background-color: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 20px 40px; }
      .single_tea_trivia .reset ul li {
        list-style: disc;
        margin-left: 1em; }
    .single_tea_trivia .reset p {
      margin-top: 1em; }
    .single_tea_trivia .reset .com_btn01 {
      margin: 40px auto 0 auto; }