@charset "UTF-8";
/* ------------------------------------------------- *
 *        ＠リセットCSS　　　　　　　　　　　　　　　　　　
 * ------------------------------------------------- */
* {
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

ul {
  padding: 0;
  margin: 0; }

li {
  list-style: none;
  color: #373737; }

h1 {
  padding: 0;
  margin: 0;
  font-size: 1.8rem; }
  @media only screen and (max-width: 767px) {
    h1 {
      font-size: 1.6rem; } }

h1, h2, h3, h4, h5 {
  padding: 0;
  margin: 0;
  color: #373737; }

p {
  line-height: 1.9;
  font-size: 16px;
  padding: 0;
  margin: 0;
  color: #373737; }
  @media only screen and (max-width: 767px) {
    p {
      font-size: 14px; } }

a {
  color: #333;
  text-decoration: none; }
  a:hover {
    opacity: 0.7; }

hr {
  margin: 64px 0; }
  @media only screen and (max-width: 767px) {
    hr {
      margin: 40px 0; } }

dd {
  margin: 0; }

img {
  display: block;
  max-width: 100%;
  height: auto; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-word;
  border-top: 1px solid #DDD;
  border-left: 1px solid #DDD;
  background: #FFF;
  color: #373737; }

th, td {
  padding: 15px;
  border-right: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  color: #373737; }
  @media only screen and (max-width: 767px) {
    th, td {
      padding: 10px; } }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

.clearfix:before {
  　content: "";
  display: block;
  clear: both; }

.clearfix {
  display: block; }

/* ------------------------------------------------- *
 *        ＠レイアウトCSS　　　　　　　　　　　　　　　　　　
 * ------------------------------------------------- */
body {
  background: #fff;
  margin: 0;
  font-size: 1rem;
  /* ルート要素に対して相対的 */ }

#wrap {
  overflow: hidden;
  padding-top: 8rem;
  min-height: calc(100vh - 160px); }
  @media only screen and (max-width: 992px) {
    #wrap {
      margin: 0 16px; } }
  @media only screen and (max-width: 767px) {
    #wrap {
      padding: 0;
      margin: 0; } }

#main {
  width: 69%;
  float: left;
  margin-bottom: 32px; }
  @media only screen and (max-width: 992px) {
    #main {
      float: none;
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    #main {
      width: 100%;
      float: none;
      padding: 16px 16px 0; } }

article {
  max-width: 1120px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden; }

/* ------------------------------------------------- *
 *        ＠マルチクラスCSS　　　　　　　　　　　　　　　　　　
 * ------------------------------------------------- */
/* ============ レイアウト関係 ============ */
.img-w {
  width: 100%;
  height: auto; }

/*　余白 */
.mb-16 {
  margin-bottom: 16px; }

.mb-32 {
  margin-bottom: 32px; }

.mb-48 {
  margin-bottom: 48px; }

/* ============ テキスト関係 ============ */
.txt-red {
  color: #ff3469;
  font-weight: 700; }

.txt-green {
  color: #01913a;
  font-weight: 700; }

.txt-blue {
  color: #2366d9;
  font-weight: 700; }

.txt-yellow {
  color: #f4cb0a;
  font-weight: 700; }

.txt-big {
  font-size: 20px; }
  @media only screen and (max-width: 767px) {
    .txt-big {
      font-size: 18px; } }

.txt-marker {
  background: #ffe566; }

.txt-marker-yellow {
  background-image: linear-gradient(transparent 50%, #ffef9d 50%); }

.txt-marker-pink {
  background-image: linear-gradient(transparent 50%, #ffddeb 50%); }

.txt-center {
  text-align: center; }

.txt-right {
  text-align: right; }

.txt-big {
  font-size: 26px; }
  @media only screen and (max-width: 767px) {
    .txt-big {
      font-size: 24px; } }

.txt-point {
  background: #fff3e6;
  padding: 32px 24px 24px;
  margin-bottom: 32px;
  position: relative;
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: 0.05em; }
  .txt-point:before {
    content: '';
    display: inline-block;
    width: 110px;
    height: 32px;
    background: url(../img/icon/icon-txt-point.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: -10px;
    left: 16px; }

/* ============ タイトル関係 ============ */
.section-title {
  color: #373737; }
  .section-title h1 {
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .section-title h1 {
        margin-bottom: 16px; } }
  .section-title h2 {
    border-bottom: 3px solid #98DBC6;
    line-height: 1.2;
    margin-bottom: 20px;
    padding-bottom: 8px; }
    @media only screen and (max-width: 767px) {
      .section-title h2 {
        text-align: center; } }
  .section-title .description {
    font-size: 14px;
    margin-bottom: 32px; }
    @media only screen and (max-width: 767px) {
      .section-title .description {
        line-height: 2; } }
    .section-title .description span {
      border-bottom: 2px dotted #CCC;
      padding-bottom: 5px; }
      @media only screen and (max-width: 767px) {
        .section-title .description span {
          padding-bottom: 3px; } }

/* ------------------------------------------------- *
 *        ＠モジュールCSS（単体で使いまわす部分）
 * ------------------------------------------------- */
/* ============ UI関係 ============ */
/*　パンくずリスト */
#pan {
  color: #888;
  font-size: 10px;
  padding: 8px 0; }
  @media only screen and (max-width: 767px) {
    #pan {
      padding: 4px 0;
      height: 30px;
      margin-top: 75px; } }
  @media only screen and (max-width: 767px) {
    #pan .breadcrumbs {
      overflow-y: hidden;
      overflow-x: scroll;
      display: -ms-flexbox;
      display: flex;
      display: flex;
      overflow-scrolling: touch;
      overflow-scrolling: touch;
      padding: 2px 4px; } }
  #pan .breadcrumbs .category {
    display: unset; }
  #pan .breadcrumbs > span {
    padding: 0 5px; }
    @media only screen and (max-width: 767px) {
      #pan .breadcrumbs > span {
        flex: 0 0 auto;
        padding: 0 4px; } }
    @media only screen and (max-width: 767px) {
      #pan .breadcrumbs > span a {
        text-decoration: underline; } }

/* ページネーション */
.pagination-area {
  margin-bottom: 2rem; }
  .pagination-area .navigation {
    width: 100%;
    text-align: center;
    padding: 16px 0; }
  .pagination-area .nav-links a {
    display: inline-block;
    padding: 8px 12px;
    color: #98DBC6;
    font-weight: bold; }
  .pagination-area .nav-links .page-numbers {
    padding: 8px 14px;
    margin: 0 10px; }
    @media only screen and (max-width: 767px) {
      .pagination-area .nav-links .page-numbers {
        margin: 0 6px;
        padding: 4px 10px; } }
  .pagination-area .nav-links .current {
    background: #98DBC6;
    border-radius: 50%;
    color: #FFF;
    font-weight: bold;
    padding: 6px 11px; }
  .pagination-area .nav-links .next, .pagination-area .nav-links .prev {
    border: none;
    font-size: 26px; }

/* ============ ボタン関係 ============ */
/* ページTOPへ戻るボタン */
#page-top {
  position: fixed;
  bottom: 32px;
  right: 16px;
  display: none;
  z-index: 1000; }
  @media only screen and (max-width: 767px) {
    #page-top {
      bottom: 16px; } }
  #page-top a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    background-image: url(../img/icon/icon-pagetop.png);
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); }
    @media only screen and (max-width: 767px) {
      #page-top a {
        width: 40px;
        height: 40px; } }

/*もっと見るボタン*/
a.btn-link {
  text-decoration: none !important;
  color: #FF8C42; }
  a.btn-link:hover {
    color: #fff; }

.more-button {
  width: 250px;
  background: #fff;
  border: solid 3px #FF8C42;
  text-align: center;
  margin: 2rem auto;
  padding: .5rem;
  position: relative;
  font-size: 1rem;
  font-weight: bold; }
  @media only screen and (max-width: 767px) {
    .more-button {
      margin: 1rem auto;
      padding: .3rem; } }
  .more-button:after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 2px #FF8C42;
    border-right: solid 2px #FF8C42;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px; }
  .more-button:hover {
    background: #FF8C42;
    opacity: 1;
    color: #fff; }
    .more-button:hover:after {
      border-top: solid 2px #fff;
      border-right: solid 2px #fff; }

/* 記事内CTA */
.btn-cv {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-duration: 0.2s;
  transition-property: transform;
  transition-property: transform; }
  .btn-cv:hover, .btn-cv .hvr-shrink:focus, .btn-cv .hvr-shrink:active {
    transform: scale(0.95);
    transform: scale(0.95);
    cursor: pointer; }

/* ============ タグ ============ */
.tag-cate {
  background: #CDE8E5;
  font-weight: bold;
  padding: .3rem .5rem;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
  line-height: 1.2;
  margin-bottom: .5rem;
  font-size: .9rem; }
  @media only screen and (max-width: 767px) {
    .tag-cate {
      font-size: .6rem;
      padding: 4px;
      border-radius: 5px;
      margin-bottom: .2rem; } }
  .tag-cate a {
    color: #fff; }

/* 日付 */
.time {
  color: #808080;
  font-size: .9rem; }
  @media only screen and (max-width: 767px) {
    .time {
      font-size: .6rem; } }

/* ============ ハッシュタグ ============ */
.hashtags-box div {
  text-align: center; }
  .hashtags-box div a {
    display: inline-block;
    margin: 0rem 1rem .5rem;
    text-decoration: underline; }

/* ============ 検索窓 ============ */
.search {
  text-align: center;
  margin-bottom: 2rem; }
  .search input {
    width: 58%;
    padding: .7rem;
    border-radius: 5px;
    border: solid 3px #ccc; }
    @media only screen and (max-width: 767px) {
      .search input {
        width: 74%;
        padding: .5rem; } }
  .search button {
    background: none;
    border: none; }
  .search .fa-magnifying-glass {
    vertical-align: middle; }
    .search .fa-magnifying-glass:before {
      font-size: 35px;
      color: #ccc; }

/* ============ お気に入りボタン ============ */
.favorite-btn {
  background: none;
  border: none;
  cursor: pointer; }
  .favorite-btn .fa-regular.fa-heart {
    color: #4D869C;
    font-size: 18px; }
  .favorite-btn .fa-solid.fa-heart {
    color: #4D869C;
    font-size: 18px; }

/* ============ 専門家カード ============ */
/* ============ 関連記事BOX ============ */
.articlebox-kanren {
  margin-bottom: 4rem;
  /* 人気記事のみデザイン違い */
  /* 通常 */ }
  @media only screen and (max-width: 767px) {
    .articlebox-kanren {
      margin-bottom: 2rem; } }
  .articlebox-kanren h2 {
    margin-bottom: 2rem !important; }
    @media only screen and (max-width: 767px) {
      .articlebox-kanren h2 {
        margin-bottom: 1rem !important;
        text-align: left;
        font-size: 20px !important;
        padding: .5rem 0rem !important; } }
  .articlebox-kanren h3 {
    margin-bottom: 1rem !important; }
    @media only screen and (max-width: 767px) {
      .articlebox-kanren h3 {
        margin-bottom: 0.5rem !important; } }
  .articlebox-kanren .box-popular {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem; }
    @media only screen and (max-width: 767px) {
      .articlebox-kanren .box-popular {
        margin-bottom: 1rem; } }
    .articlebox-kanren .box-popular .item {
      width: 48%;
      position: relative; }
      .articlebox-kanren .box-popular .item img {
        width: 100%;
        border-radius: 15px; }
      .articlebox-kanren .box-popular .item .item-txt .cate-time {
        display: flex;
        align-items: center;
        margin: .5em auto 0rem; }
        @media only screen and (max-width: 767px) {
          .articlebox-kanren .box-popular .item .item-txt .cate-time {
            margin: .3em auto 0rem;
            display: block; } }
        .articlebox-kanren .box-popular .item .item-txt .cate-time .tag-cate {
          margin-bottom: .3rem;
          margin-right: .5rem;
          font-size: .8rem; }
          @media only screen and (max-width: 767px) {
            .articlebox-kanren .box-popular .item .item-txt .cate-time .tag-cate {
              font-size: .6rem; } }
      .articlebox-kanren .box-popular .item .item-txt .title {
        font-size: 1rem !important; }
        @media only screen and (max-width: 767px) {
          .articlebox-kanren .box-popular .item .item-txt .title {
            font-size: .9rem !important; } }
      .articlebox-kanren .box-popular .item .favorite-btn {
        position: absolute;
        right: 2px;
        bottom: 105px; }
        @media only screen and (max-width: 767px) {
          .articlebox-kanren .box-popular .item .favorite-btn {
            bottom: 135px;
            right: 0px; } }
  .articlebox-kanren .box {
    margin-bottom: 2rem; }
    .articlebox-kanren .box .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      border-bottom: 1px solid #ededed;
      padding-bottom: 16px;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .articlebox-kanren .box .item {
          align-items: flex-start; } }
      .articlebox-kanren .box .item:last-child {
        border-bottom: 0;
        padding-bottom: 0; }
      .articlebox-kanren .box .item a.img {
        font-size: 14px;
        font-weight: 700;
        display: block;
        width: 20%; }
        @media only screen and (max-width: 767px) {
          .articlebox-kanren .box .item a.img {
            width: 30%; } }
        .articlebox-kanren .box .item a.img:hover {
          opacity: 0.9; }
        .articlebox-kanren .box .item a.img img {
          border-radius: 4px; }
      .articlebox-kanren .box .item .item-txt {
        width: 78%; }
        @media only screen and (max-width: 767px) {
          .articlebox-kanren .box .item .item-txt {
            width: 66%; } }
        .articlebox-kanren .box .item .item-txt .cate-time {
          display: flex;
          align-items: center; }
          .articlebox-kanren .box .item .item-txt .cate-time .tag-cate {
            margin-bottom: .2rem;
            margin-right: .5rem;
            font-size: .8rem; }
            @media only screen and (max-width: 767px) {
              .articlebox-kanren .box .item .item-txt .cate-time .tag-cate {
                font-size: .6rem; } }
          .articlebox-kanren .box .item .item-txt .cate-time time {
            margin-left: 10%; }
            @media only screen and (max-width: 767px) {
              .articlebox-kanren .box .item .item-txt .cate-time time {
                font-size: .6rem; } }
      .articlebox-kanren .box .item .title {
        color: #373737;
        font-size: 1.1rem !important;
        margin-bottom: 0rem !important; }
        @media only screen and (max-width: 767px) {
          .articlebox-kanren .box .item .title {
            margin-top: .3rem;
            font-size: 0.8rem !important; } }
      .articlebox-kanren .box .item .favorite-btn {
        position: absolute;
        right: 10px;
        top: 86px; }
        @media only screen and (max-width: 767px) {
          .articlebox-kanren .box .item .favorite-btn {
            top: 62px;
            right: 2px; } }
  @media only screen and (max-width: 767px) {
    .articlebox-kanren .more-button {
      margin: 0rem auto 2rem;
      padding: .3rem; } }

/* ============ 口コミフォーム用 ============ */
/* 口コミ一覧 */
.review-list h2 {
  margin-bottom: 2rem !important; }
  @media only screen and (max-width: 767px) {
    .review-list h2 {
      margin-bottom: 1rem !important; } }
.review-list p {
  margin: 0rem !important;
  font-size: 1rem !important; }
  .review-list p.name, .review-list p.sex {
    margin-right: 2rem !important; }
  .review-list p.name {
    font-weight: bold; }
    .review-list p.name .fa-user {
      margin-right: .3rem; }
  @media only screen and (max-width: 767px) {
    .review-list p.sex {
      margin-right: 0.5rem !important; } }
  .review-list p.comment {
    position: relative;
    line-height: 1.6 !important;
    font-size: .9rem !important;
    margin: 0.7rem 0rem 0.5rem !important;
    border-radius: 5px;
    background: #fff;
    padding: .5rem; }
    @media only screen and (max-width: 767px) {
      .review-list p.comment {
        margin: 1rem 0rem 0.5rem !important; } }
    .review-list p.comment::before {
      position: absolute;
      top: -12px;
      left: 2em;
      width: 0;
      height: 0;
      content: '';
      border-width: 0 20px 22px 20px;
      border-style: solid;
      border-color: transparent transparent #fff transparent; }
.review-list ul li {
  background: #EEF7FF;
  padding: .5rem 1rem;
  margin-bottom: 2rem;
  border-top: 6px double #ccc;
  border-bottom: 6px double #ccc; }
  @media only screen and (max-width: 767px) {
    .review-list ul li {
      margin-bottom: 1rem; } }
  .review-list ul li div {
    display: flex;
    justify-content: start;
    align-items: center; }
    @media only screen and (max-width: 767px) {
      .review-list ul li div {
        display: block; } }
    @media only screen and (max-width: 767px) {
      .review-list ul li div .sp-div {
        display: flex; }
        .review-list ul li div .sp-div p {
          font-size: 0.8rem !important; }
        .review-list ul li div .sp-div .star img {
          width: 70%; } }

/* フォーム */
.review-post {
  border: #CDE8E5 solid 6px;
  padding: .0rem 2rem 1rem;
  margin-bottom: 4rem; }
  @media only screen and (max-width: 767px) {
    .review-post {
      padding: 0rem 1rem .5rem;
      margin-bottom: 2rem; } }
  .review-post p {
    margin: 0 !important; }
  .review-post h2 {
    border-bottom: solid 3px #CDE8E5 !important;
    margin-bottom: 1rem !important; }
    .review-post h2::after {
      display: none !important; }
  .review-post .review_name span {
    font-size: .8rem; }
    @media only screen and (max-width: 767px) {
      .review-post .review_name span {
        font-size: .6rem;
        display: block;
        margin: .2rem auto; } }
  .review-post #review_age, .review-post #review_sex, .review-post #review_star {
    font-size: 1rem; }
    @media only screen and (max-width: 767px) {
      .review-post #review_age, .review-post #review_sex, .review-post #review_star {
        font-size: .8rem;
        border-radius: 3px;
        border: solid 1px #333;
        color: #333;
        background: #fff; } }
  .review-post div {
    display: flex;
    justify-content: flex-start; }
    @media only screen and (max-width: 767px) {
      .review-post div {
        margin-bottom: .5rem; } }
    .review-post div p {
      margin-right: 2rem !important; }
      @media only screen and (max-width: 767px) {
        .review-post div p {
          margin-right: 1rem !important; } }
  .review-post textarea {
    width: 100%; }
  .review-post .button {
    text-align: center;
    margin: 1rem auto .5rem !important; }
    @media only screen and (max-width: 767px) {
      .review-post .button {
        margin: .5rem auto !important; } }
    .review-post .button input {
      font-size: 1.1rem;
      width: 100px;
      background: #7AB2B2;
      color: #fff; }
  @media only screen and (max-width: 767px) {
    .review-post p {
      font-size: 12px !important; } }

/* ============ 記事内装飾コンポーネント ============ */
/* ブログカード */
.blog-card {
  margin: 64px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  position: relative; }
  @media only screen and (max-width: 767px) {
    .blog-card {
      margin-bottom: 40px; } }
  .blog-card:hover {
    background: #f4feff; }
  .blog-card .blog-card-kanren {
    position: absolute;
    left: 3%;
    top: -8%;
    background: #CDE8E5;
    color: #fff;
    padding: 5px;
    line-height: 1;
    font-size: 14px; }
    @media only screen and (max-width: 767px) {
      .blog-card .blog-card-kanren {
        top: -10%;
        font-size: 12px; } }
  .blog-card a {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none !important;
    padding: 20px;
    color: #222; }
    @media only screen and (max-width: 767px) {
      .blog-card a {
        overflow: hidden;
        padding: 16px 16px 8px 16px; } }
  .blog-card .blog-card-thumbnail {
    width: 25%;
    float: left; }
    .blog-card .blog-card-thumbnail img {
      width: 100%;
      height: auto; }
  .blog-card .blog-card-content {
    width: 75%;
    float: right;
    padding-left: 16px;
    text-decoration: none; }
    .blog-card .blog-card-content .blog-card-title-midashi {
      margin-bottom: 10px; }
      @media only screen and (max-width: 992px) {
        .blog-card .blog-card-content .blog-card-title-midashi {
          margin-bottom: 5px; } }
      @media only screen and (max-width: 767px) {
        .blog-card .blog-card-content .blog-card-title-midashi {
          position: absolute;
          top: -10px;
          left: 16px; } }
      .blog-card .blog-card-content .blog-card-title-midashi span {
        padding: 4px 8px;
        background: #5090d9;
        color: #FFF; }
        @media only screen and (max-width: 992px) {
          .blog-card .blog-card-content .blog-card-title-midashi span {
            font-size: 12px; } }
    .blog-card .blog-card-content .blog-card-cat {
      float: left;
      font-size: 12px; }
      @media only screen and (max-width: 767px) {
        .blog-card .blog-card-content .blog-card-cat {
          font-size: 10px; } }
    .blog-card .blog-card-content .blog-card-day {
      float: right;
      font-size: 12px; }
      @media only screen and (max-width: 767px) {
        .blog-card .blog-card-content .blog-card-day {
          font-size: 10px; } }
    .blog-card .blog-card-content .blog-card-title {
      clear: both;
      padding: 8px 0;
      text-decoration: underline;
      text-align: left;
      color: #303030;
      font-size: 18px;
      font-weight: 700; }
      @media only screen and (max-width: 992px) {
        .blog-card .blog-card-content .blog-card-title {
          font-size: 15px; } }
      @media only screen and (max-width: 767px) {
        .blog-card .blog-card-content .blog-card-title {
          font-size: 14px;
          padding: 4px 0 0 0; } }
    .blog-card .blog-card-content .blog-card-excerpt {
      color: #222;
      font-size: 14px; }
    .blog-card .blog-card-content .more {
      position: absolute;
      right: 20px;
      bottom: 20px;
      text-align: right; }
      @media only screen and (max-width: 992px) {
        .blog-card .blog-card-content .more {
          position: static; } }
      .blog-card .blog-card-content .more span {
        font-size: 14px; }
        @media only screen and (max-width: 992px) {
          .blog-card .blog-card-content .more span {
            font-size: 12px; } }

/* テキスト枠 */
.txt-waku {
  background: #f1f1f1;
  padding: 24px;
  margin-bottom: 32px;
  line-height: 2.1;
  color: #373737;
  font-size: 1rem; }

.balloon {
  margin-bottom: 32px;
  position: relative; }
  .balloon:before {
    clear: both;
    content: "";
    display: block; }
  .balloon:after {
    clear: both;
    content: "";
    display: block; }
  .balloon .balloon-img {
    width: 120px;
    height: 120px; }
    .balloon .balloon-img img {
      width: 100%;
      height: 100%;
      margin: 0; }
  .balloon p {
    margin-bottom: 0 !important; }
    .balloon p:last-child {
      margin-bottom: 0 !important; }

.balloon {
  margin-bottom: 32px;
  position: relative; }
  .balloon:before {
    clear: both;
    content: "";
    display: block; }
  .balloon:after {
    clear: both;
    content: "";
    display: block; }
  .balloon .balloon-img {
    width: 120px;
    height: 120px; }
    .balloon .balloon-img img {
      width: 100%;
      height: 100%;
      margin: 0; }
  .balloon p {
    margin-bottom: 0 !important; }
    .balloon p:last-child {
      margin-bottom: 0 !important; }

.balloon-img-left {
  float: left;
  margin-right: 20px; }

.balloon-img-right {
  float: right;
  margin-left: 20px; }

.balloon-txt-right {
  position: relative;
  padding: 20px;
  border: 2px solid;
  border-radius: 10px;
  max-width: calc(100% - 140px);
  max-width: calc(100% - 140px);
  display: inline-block;
  float: left; }
  .balloon-txt-right:before {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #aaa;
    top: 15px;
    left: -21px; }
  .balloon-txt-right:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #fff;
    top: 15px;
    left: -19px; }

.balloon-txt-left {
  position: relative;
  padding: 20px;
  border: 2px solid;
  border-radius: 10px;
  max-width: calc(100% - 140px);
  max-width: calc(100% - 140px);
  display: inline-block;
  float: right; }
  .balloon-txt-left:before {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #aaa;
    top: 15px;
    right: -21px; }
  .balloon-txt-left:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #fff;
    top: 15px;
    right: -19px; }

.balloon-men .balloon-txt-left {
  border-color: #3975A2;
  background: #f4faff; }
  .balloon-men .balloon-txt-left:before {
    border-left: 10px solid #3975A2; }
  .balloon-men .balloon-txt-left:after {
    border-left: 10px solid #f4faff; }

.balloon-woman .balloon-txt-left {
  border-color: #02AB9E;
  background: #eafffd; }
  .balloon-woman .balloon-txt-left:before {
    border-left: 10px solid #02AB9E; }
  .balloon-woman .balloon-txt-left:after {
    border-left: 10px solid #f4faff; }

.balloon-syuhu .balloon-txt-left {
  border-color: #FF8089;
  background: #fff8f8; }
  .balloon-syuhu .balloon-txt-left:before {
    border-left: 10px solid #FF8089; }
  .balloon-syuhu .balloon-txt-left:after {
    border-left: 10px solid #f4faff; }

.balloon-bari .balloon-txt-right {
  border-color: #AA9D01;
  background: #fffef0; }
  .balloon-bari .balloon-txt-right:before {
    border-right: 10px solid #AA9D01; }

/* 動くマーカー */
.marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, #fffa99 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #fffa99 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #fffa99 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #fffa99 50%);
  background-image: linear-gradient(left, transparent 50%, #fffa99 50%);
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 4s linear;
  font-weight: bold; }
  .marker-animation.active {
    background-position: -100% .5em; }

.marker-yellow {
  background-image: -webkit-linear-gradient(left, transparent 50%, #efff04 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #efff04 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #efff04 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #efff04 50%);
  background-image: linear-gradient(left, transparent 50%, #efff04 50%); }

.marker-red {
  background-image: -webkit-linear-gradient(left, transparent 50%, #facac8 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #facac8 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #facac8 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #facac8 50%);
  background-image: linear-gradient(left, transparent 50%, #facac8 50%); }

.marker-green {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c8fad4 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #c8fad4 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #c8fad4 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #c8fad4 50%);
  background-image: linear-gradient(left, transparent 50%, #c8fad4 50%); }

.marker-bule {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c8f5fa 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #c8f5fa 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #c8f5fa 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #c8f5fa 50%);
  background-image: linear-gradient(left, transparent 50%, #c8f5fa 50%); }

.marker-purple {
  background-image: -webkit-linear-gradient(left, transparent 50%, #ebc8fa 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #ebc8fa 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #ebc8fa 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #ebc8fa 50%);
  background-image: linear-gradient(left, transparent 50%, #ebc8fa 50%); }

/* 口コミボックス */
.kutikomi-box {
  margin-bottom: 64px; }
  @media only screen and (max-width: 767px) {
    .kutikomi-box {
      padding: 5px 5px 1px 5px;
      margin-right: 0;
      margin-left: 0; } }
  .kutikomi-box .item {
    background: #FFF;
    padding: 17px 20px 20px 20px;
    border: 1px solid #DDD;
    overflow: hidden;
    margin-bottom: 15px; }
    @media only screen and (max-width: 767px) {
      .kutikomi-box .item {
        padding: 15px;
        margin-bottom: 5px; } }
    .kutikomi-box .item .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px; }
      @media only screen and (max-width: 767px) {
        .kutikomi-box .item .title {
          font-size: 14px;
          margin-bottom: 5px; } }
    .kutikomi-box .item .item-head {
      display: -ms-flexbox;
      display: flex;
      display: flex;
      box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px; }
    .kutikomi-box .item .head {
      height: 21px;
      width: 50%;
      padding-left: 108px;
      font-size: 14px; }
      @media only screen and (max-width: 767px) {
        .kutikomi-box .item .head {
          width: 40%;
          font-size: 12px;
          padding-left: 86px;
          height: 16px; } }
    .kutikomi-box .item .zokusei {
      width: 50%;
      text-align: right;
      font-size: 14px; }
      @media only screen and (max-width: 767px) {
        .kutikomi-box .item .zokusei {
          width: 60%;
          font-size: 10px; } }
    .kutikomi-box .item p {
      margin-bottom: 0 !important;
      font-size: 13px !important;
      margin-top: 0 !important; }
      @media only screen and (max-width: 767px) {
        .kutikomi-box .item p {
          font-size: 11px !important; } }

.star_05 {
  background: url("../img/icon/rate-0.5.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_05 {
      background-size: 80px; } }

.star_10 {
  background: url("../img/icon/rate-1.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_10 {
      background-size: 80px; } }

.star_15 {
  background: url("../img/icon/rate-1.5.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_15 {
      background-size: 80px; } }

.star_20 {
  background: url("../img/icon/rate-2.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_20 {
      background-size: 80px; } }

.star_25 {
  background: url("../img/icon/rate-2.5.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_25 {
      background-size: 80px; } }

.star_30 {
  background: url("../img/icon/rate-3.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_30 {
      background-size: 80px; } }

.star_35 {
  background: url("../img/icon/rate-3.5.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_35 {
      background-size: 80px; } }

.star_40 {
  background: url("../img/icon/rate-4.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_40 {
      background-size: 80px; } }

.star_45 {
  background: url("../img/icon/rate-4.5.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_45 {
      background-size: 80px; } }

.star_50 {
  background: url("../img/icon/rate-5.png") left center/120px no-repeat;
  background-size: 100px; }
  @media only screen and (max-width: 767px) {
    .star_50 {
      background-size: 80px; } }

/* ============ その他 ============ */
/* TOPの目次 */
.box-col-3-mokuzi {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 16px 16px 1px 16px;
  background: #EFEFEF; }
  @media only screen and (max-width: 767px) {
    .box-col-3-mokuzi {
      padding: 0;
      background: none; } }
  .box-col-3-mokuzi .item {
    position: relative;
    margin-bottom: 16px;
    width: 49%;
    background: #FFF;
    border: 3px solid #DDD; }
    @media only screen and (max-width: 767px) {
      .box-col-3-mokuzi .item {
        margin-bottom: 8px;
        border: 2px solid #DDD;
        border-bottom: 3px solid #CCC; } }
    .box-col-3-mokuzi .item img {
      margin-bottom: 8px; }
    .box-col-3-mokuzi .item a {
      position: relative;
      display: block;
      padding: 16px 16px 32px 16px;
      text-align: center;
      font-size: 18px;
      text-decoration: none !important;
      color: #222; }
      @media only screen and (max-width: 767px) {
        .box-col-3-mokuzi .item a {
          padding: 8px; } }
      .box-col-3-mokuzi .item a:hover {
        opacity: 0.9; }
      .box-col-3-mokuzi .item a:before {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 10px solid transparent;
        border-top: 10px solid #222; }
        @media only screen and (max-width: 767px) {
          .box-col-3-mokuzi .item a:before {
            display: none; } }
    .box-col-3-mokuzi .item .title {
      font-weight: 700;
      font-size: 18px; }
      @media only screen and (max-width: 767px) {
        .box-col-3-mokuzi .item .title {
          font-size: 10px; } }
    .box-col-3-mokuzi .item .txt {
      font-size: 16px; }
      @media only screen and (max-width: 767px) {
        .box-col-3-mokuzi .item .txt {
          font-size: 9px; } }

/* アイコン */
.fa-crown {
  color: #BFA100;
  margin: 0rem .3rem;
  font-size: 22px; }

.fa-bolt {
  color: #FF8C42;
  margin: 0rem .3rem;
  font-size: 22px; }

.fa-list {
  color: #ebd907;
  margin: 0rem .3rem;
  font-size: 18px; }

.fa-magnifying-glass {
  margin: 0rem .3rem;
  font-size: 30px; }

.fa-plus {
  color: #98DBC6;
  margin: 0rem .3rem;
  font-size: 18px; }

.fa-bell {
  color: #BFA100;
  font-size: 22px; }
  @media only screen and (max-width: 767px) {
    .fa-bell {
      font-size: 18px; } }

.fa-star {
  color: #ebd907;
  font-size: 22px; }
  @media only screen and (max-width: 767px) {
    .fa-star {
      font-size: 18px; } }

.fa-regular.fa-heart {
  font-size: 30px; }

/* ------------------------------------------------- *
 *        ＠アニメーション
 * ------------------------------------------------- */
/*ぽよぽよ動く*/
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1; }

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1); }
  50%, 70% {
    transform: scale(0.75); } }
/* ------------------------------------------------- *
*        ＠header
* ------------------------------------------------- */
header {
  position: fixed;
  width: 100%;
  z-index: 10000;
  background: #fff; }
  header article {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    header article .logo {
      padding: .8rem 0; }
      @media only screen and (max-width: 767px) {
        header article .logo {
          margin-left: .5rem; } }
      header article .logo a {
        display: flex; }
        header article .logo a img {
          width: 45px; }
        header article .logo a span {
          font-size: 1.6rem;
          color: #82AABA;
          margin-left: .3rem; }
    header article .menu-box {
      align-items: center;
      display: flex;
      flex-wrap: wrap; }
  header .h-cat {
    background: #98DBC6;
    padding: .7rem; }
    header .h-cat ul {
      max-width: 1170px;
      white-space: nowrap;
      text-align: center;
      margin: auto; }
      header .h-cat ul li {
        display: inline-block;
        padding: 0rem 2rem; }
        header .h-cat ul li a {
          color: #fff;
          font-weight: bold; }

/* ハンバーガーメニュー */
.nav-menu {
  margin: 0rem .5rem;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .nav-menu {
      margin: 0rem .2rem; } }
  .nav-menu span {
    display: block;
    font-size: 10px;
    color: #333; }
  .nav-menu .hamburger-menu {
    width: 70px;
    height: 50px;
    position: relative;
    border: none;
    background: transparent;
    appearance: none;
    padding: 0;
    cursor: pointer;
    z-index: 10001; }
    @media only screen and (max-width: 767px) {
      .nav-menu .hamburger-menu {
        height: 46px;
        width: 57px; } }
    .nav-menu .hamburger-menu .fa-magnifying-glass:before {
      color: #333; }
  .nav-menu .hamburger-menu__bar {
    display: inline-block;
    width: 46%;
    height: 4px;
    background: #242424;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.5s; }
    .nav-menu .hamburger-menu__bar:first-child {
      top: 4px; }
    .nav-menu .hamburger-menu__bar:nth-child(2) {
      top: 13.5px; }
    .nav-menu .hamburger-menu__bar:nth-child(3) {
      top: 23px; }
  .nav-menu .hamburger-menu__text {
    font-size: 13px;
    position: absolute;
    top: 33px;
    margin-left: .3rem; }
    @media only screen and (max-width: 767px) {
      .nav-menu .hamburger-menu__text {
        font-size: 10px; } }
  .nav-menu .hamburger-menu--open .hamburger-menu__bar {
    top: 35%; }
  .nav-menu .hamburger-menu--open .hamburger-menu__bar:first-child {
    transform: translateX(-50%) translateY(-50%) rotate(45deg); }
  .nav-menu .hamburger-menu--open .hamburger-menu__bar:nth-child(3) {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg); }
  .nav-menu .hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
    display: none; }
  .nav-menu .navigation, .nav-menu .search-navigation {
    display: none;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10000;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
    padding: 90px 40px; }
    @media only screen and (max-width: 767px) {
      .nav-menu .navigation, .nav-menu .search-navigation {
        padding: 5rem 1rem 3rem; } }
    .nav-menu .navigation.is-open, .nav-menu .search-navigation.is-open {
      display: block;
      opacity: 1;
      visibility: visible;
      background: rgba(0, 0, 0, 0.5); }
    .nav-menu .navigation h2, .nav-menu .search-navigation h2 {
      font-size: 1.2rem;
      text-align: center;
      margin: 1rem auto;
      font-weight: normal; }
    .nav-menu .navigation .bg-white, .nav-menu .search-navigation .bg-white {
      background: #fff;
      padding: 1rem;
      border-radius: 10px; }
      .nav-menu .navigation .bg-white .search, .nav-menu .search-navigation .bg-white .search {
        margin-bottom: 1rem; }
  .nav-menu .category {
    text-align: center;
    list-style: none;
    display: flex;
    margin: auto;
    justify-content: center;
    flex-wrap: wrap; }
    @media only screen and (max-width: 767px) {
      .nav-menu .category {
        width: 100%; } }
    .nav-menu .category a {
      font-size: 1.1rem;
      width: 30%;
      padding: .5rem;
      margin: 0rem 1rem 1rem;
      background: #CDE8E5;
      border-radius: 5px; }
      @media only screen and (max-width: 767px) {
        .nav-menu .category a {
          width: 47%;
          margin: 0rem .3rem .5rem;
          padding: .3rem; } }
      .nav-menu .category a li {
        color: #fff;
        font-weight: bold; }
  .nav-menu .is-close {
    z-index: 9999; }

.nav-okini {
  text-align: center; }
  .nav-okini span {
    display: block;
    font-size: 10px; }

/* ------------------------------------------------- *
*        ＠sidebar
* ------------------------------------------------- */
#sidebar {
  float: right;
  width: 28%; }
  #sidebar h2 {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: .5rem; }
    #sidebar h2 span {
      display: block;
      line-height: 1; }
      #sidebar h2 span .fa-crown:before, #sidebar h2 span .fa-bolt:before {
        font-size: 18px; }
  #sidebar .ranking {
    background: #EEF7FF;
    border-radius: 15px;
    padding: .5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 2rem auto; }
    #sidebar .ranking .rank-item {
      background: #fff;
      border-radius: 10px;
      margin-bottom: .5rem;
      padding: .5rem; }
      #sidebar .ranking .rank-item a {
        display: flex;
        align-items: center; }
        #sidebar .ranking .rank-item a img {
          border-radius: 10px; }
        #sidebar .ranking .rank-item a .item-txt {
          margin-left: .5rem; }
          #sidebar .ranking .rank-item a .item-txt .sub-item {
            display: flex; }
            #sidebar .ranking .rank-item a .item-txt .sub-item .tag-cate {
              font-size: .6rem;
              margin-bottom: .2rem;
              margin-right: .3rem;
              padding: .2rem .3rem;
              border-radius: 5px; }
            #sidebar .ranking .rank-item a .item-txt .sub-item .date {
              color: #808080;
              font-size: .7rem; }
          #sidebar .ranking .rank-item a .item-txt .title {
            font-size: .8rem;
            margin-bottom: .3rem;
            font-weight: bold; }

/* ------------------------------------------------- *
*        ＠footer
* ------------------------------------------------- */
footer {
  clear: both;
  background: #7AB2B2;
  padding: 2rem 0rem;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    footer {
      padding: 1rem 0rem; } }
  footer .wrap-footer {
    max-width: 1120px;
    margin: 1rem auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center; }
    @media only screen and (max-width: 767px) {
      footer .wrap-footer {
        margin: auto; } }
    footer .wrap-footer ul {
      display: flex;
      justify-content: center; }
      footer .wrap-footer ul li {
        margin: 0rem 2rem;
        font-size: 1rem; }
        @media only screen and (max-width: 767px) {
          footer .wrap-footer ul li {
            font-size: .7rem;
            margin: 0rem .5rem; } }
        footer .wrap-footer ul li a {
          color: #fff; }
  footer .copy {
    padding: .5rem;
    color: #fff;
    font-size: .8rem; }
    @media only screen and (max-width: 767px) {
      footer .copy {
        font-size: .6rem; } }

/* ------------------------------------------------- *
*        ＠Top
* ------------------------------------------------- */
.note {
  font-size: .7rem;
  text-align: right;
  color: #808080; }

.top {
  padding-top: 2rem;
  /* 雲型 */
  /* ============ CTA枠 ============ */
  /* slick調整 */
  /* リボン装飾 */ }
  @media only screen and (max-width: 767px) {
    .top {
      padding-top: 3rem; } }
  .top h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: normal; }
    @media only screen and (max-width: 767px) {
      .top h1 {
        font-size: 1.4rem;
        margin: .5rem auto .3rem; } }
  .top .slider {
    margin-bottom: 2rem;
    /*お気に入りボタン*/ }
    .top .slider .slide-item {
      margin: 0rem 1rem;
      position: relative; }
      .top .slider .slide-item img {
        border-radius: 15px; }
      .top .slider .slide-item .title {
        margin-top: .5rem;
        font-weight: bold;
        font-size: .98rem; }
      @media only screen and (max-width: 767px) {
        .top .slider .slide-item img {
          width: 100%; } }
    .top .slider .favorite-btn {
      position: absolute;
      top: 72%;
      right: 1.5%;
      z-index: 1000; }
      @media only screen and (max-width: 767px) {
        .top .slider .favorite-btn .fa-heart {
          font-size: 25px; } }
  .top .hashtags-box h2 {
    font-weight: normal;
    text-align: center;
    position: relative;
    padding: 1rem;
    border-bottom: 3px solid #d8d8d8;
    width: 315px;
    margin: 0rem auto 1.5rem; }
    .top .hashtags-box h2::before {
      position: absolute;
      bottom: -14px;
      left: 6em;
      width: 0;
      height: 0;
      content: '';
      border-width: 14px 12px 0 12px;
      border-style: solid;
      border-color: #d8d8d8 transparent transparent transparent; }
    .top .hashtags-box h2::after {
      position: absolute;
      bottom: -10px;
      left: 6em;
      width: 0;
      height: 0;
      content: '';
      border-width: 14px 12px 0 12px;
      border-style: solid;
      border-color: #fff transparent transparent transparent; }
  .top #post-box {
    margin: 1rem auto;
    background: #EEF7FF; }
    @media only screen and (max-width: 767px) {
      .top #post-box {
        margin: auto; } }
    @media only screen and (max-width: 767px) {
      .top #post-box {
        /*スマホ用タブ*/ }
        .top #post-box .tabs-sp {
          display: flex;
          flex-wrap: wrap;
          width: 96%;
          margin: auto; }
          .top #post-box .tabs-sp .tab_label {
            font-weight: bold;
            border: solid 2px #4D869C;
            position: relative;
            z-index: 1;
            cursor: pointer;
            flex: 1;
            padding: 4px 0;
            margin: 0px 5px 16px;
            border-radius: 10px;
            background: #fff; }
            .top #post-box .tabs-sp .tab_label h2 {
              margin-bottom: .2rem;
              font-size: 1.2rem; }
          .top #post-box .tabs-sp .tab_content {
            flex: 100%;
            display: none;
            overflow: hidden;
            position: relative;
            animation: fadeIn 1s ease; }
          .top #post-box .tabs-sp input[name="tab_switch"] {
            display: none; }
          .top #post-box .tabs-sp input:checked + .tab_label {
            color: #fff;
            background-color: #4D869C; }
            .top #post-box .tabs-sp input:checked + .tab_label h2 {
              color: #fff; }
          .top #post-box .tabs-sp input:checked + .tab_label::after {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 10px 0 10px;
            border-color: #4D869C transparent transparent transparent;
            display: block;
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -10px;
            transition: all 0.3s ease 0s; }
          .top #post-box .tabs-sp #tab01:checked ~ #tab01_content,
          .top #post-box .tabs-sp #tab02:checked ~ #tab02_content,
          .top #post-box .tabs-sp #tab03:checked ~ #tab03_content {
            display: block; } }
    .top #post-box article {
      display: flex;
      justify-content: space-between;
      background: none; }
      .top #post-box article h2 {
        margin-bottom: 1rem;
        text-align: center;
        line-height: 1.4;
        font-weight: normal; }
        @media only screen and (max-width: 767px) {
          .top #post-box article h2 {
            line-height: 1.1;
            margin-bottom: .5rem; } }
        .top #post-box article h2 span {
          display: block; }
      .top #post-box article .left-content, .top #post-box article .right-content {
        width: 46%; }
        .top #post-box article .left-content .rank-item, .top #post-box article .right-content .rank-item {
          background: #fff;
          border-radius: 15px;
          margin-bottom: 1rem;
          padding: 1rem;
          position: relative; }
          @media only screen and (max-width: 767px) {
            .top #post-box article .left-content .rank-item, .top #post-box article .right-content .rank-item {
              padding: .5rem;
              margin-bottom: .7rem; } }
          .top #post-box article .left-content .rank-item a, .top #post-box article .right-content .rank-item a {
            display: flex;
            align-items: center; }
            .top #post-box article .left-content .rank-item a img, .top #post-box article .right-content .rank-item a img {
              border-radius: 10px; }
            .top #post-box article .left-content .rank-item a .item-txt, .top #post-box article .right-content .rank-item a .item-txt {
              margin-left: 1rem; }
              @media only screen and (max-width: 767px) {
                .top #post-box article .left-content .rank-item a .item-txt, .top #post-box article .right-content .rank-item a .item-txt {
                  margin-left: .5rem;
                  font-size: .8rem;
                  margin-bottom: .2rem; } }
              .top #post-box article .left-content .rank-item a .item-txt .tag-cate, .top #post-box article .right-content .rank-item a .item-txt .tag-cate {
                font-size: .7rem;
                margin-bottom: .2rem; }
              .top #post-box article .left-content .rank-item a .item-txt .title, .top #post-box article .right-content .rank-item a .item-txt .title {
                font-weight: bold;
                margin-bottom: .5rem; }
                @media only screen and (max-width: 767px) {
                  .top #post-box article .left-content .rank-item a .item-txt .title, .top #post-box article .right-content .rank-item a .item-txt .title {
                    font-size: .8rem;
                    margin-bottom: .3rem;
                    line-height: 1.4; } }
              .top #post-box article .left-content .rank-item a .item-txt .date, .top #post-box article .right-content .rank-item a .item-txt .date {
                color: #808080;
                font-size: .8rem; }
                @media only screen and (max-width: 767px) {
                  .top #post-box article .left-content .rank-item a .item-txt .date, .top #post-box article .right-content .rank-item a .item-txt .date {
                    font-size: .6rem; } }
          .top #post-box article .left-content .rank-item .favorite-btn, .top #post-box article .right-content .rank-item .favorite-btn {
            position: absolute;
            right: 8px;
            bottom: 13px; }
  .top .kumo-up {
    height: 100px;
    width: 100%;
    background: radial-gradient(circle at 50% 100%, #EEF7FF 10%, #EEF7FF 49%, #fff 51%, white 100%);
    background-size: 80px 100%; }
    @media only screen and (max-width: 767px) {
      .top .kumo-up {
        height: 85px; } }
  .top .kumo-down {
    height: 100px;
    width: 100%;
    background: radial-gradient(circle at 50% 0, #EEF7FF 10%, #EEF7FF 49%, #fff 51%, white 100%);
    background-size: 80px 100%; }
    @media only screen and (max-width: 767px) {
      .top .kumo-down {
        height: 85px; } }
  .top h2.cta-title {
    margin: 2rem auto; }
    @media only screen and (max-width: 767px) {
      .top h2.cta-title {
        margin: 0rem auto 1rem; } }
  .top .cta {
    width: 100%;
    margin: 0 auto; }
    .top .cta .cta-item {
      text-align: center;
      margin: 0rem 1rem 1rem; }
      @media only screen and (max-width: 767px) {
        .top .cta .cta-item p {
          font-size: .8rem; } }
      .top .cta .cta-item img {
        max-width: 100%;
        height: auto;
        margin: auto; }
      .top .cta .cta-item ul li {
        font-size: .9rem;
        position: relative;
        display: flex;
        justify-content: center; }
        @media only screen and (max-width: 767px) {
          .top .cta .cta-item ul li {
            font-size: .6rem; } }
        .top .cta .cta-item ul li::before {
          content: "\f0a1";
          font-family: "Font Awesome 6 Free";
          font-weight: 900;
          margin-right: 0.5em;
          margin-top: .2rem;
          color: #98DBC6; }
  .top .slick-dotted.slick-slider {
    margin-bottom: 6rem !important; }
    @media only screen and (max-width: 767px) {
      .top .slick-dotted.slick-slider {
        margin-bottom: 3rem !important; } }
  @media only screen and (max-width: 767px) {
    .top .slick-dots {
      bottom: -20px !important; } }
  .top .slick-slide img {
    margin: auto; }
  .top .ribbon {
    position: relative;
    height: 54px;
    text-align: center;
    padding: 7px 0;
    font-size: 1.6rem;
    background: #acd879;
    color: #FFF;
    box-sizing: border-box;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
    width: 20%;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      .top .ribbon {
        width: 60%; } }
    .top .ribbon span {
      margin: 0;
      padding: 0 50px;
      border-top: dashed 2px rgba(255, 255, 255, 0.5);
      border-bottom: dashed 2px rgba(255, 255, 255, 0.5);
      line-height: 43px; }
    .top .ribbon:before, .top .ribbon:after {
      position: absolute;
      content: '';
      width: 0px;
      height: 0px;
      z-index: 1; }
    .top .ribbon:before {
      top: -2px;
      left: -2px;
      border-width: 32px 0px 32px 15px;
      border-color: transparent transparent transparent #fff;
      border-style: solid; }
    .top .ribbon:after {
      top: -2px;
      right: -2px;
      border-width: 32px 15px 32px 0px;
      border-color: transparent #fff transparent transparent;
      border-style: solid; }

/* ------------------------------------------------- *
*        ＠Single（投稿ページ）
* ------------------------------------------------- */
/* ============ 通常コラム記事 ============ */
#single-column {
  margin-bottom: 64px;
  padding-top: 2rem;
  background: #FFF;
  /* snsボタン */
  /* 目次 */
  /*/ CVボタン */
  /* テーブル(小) */
  /* テーブル(横スクロール) */
  /* ポイント */
  /* 枠 ノーマル　*/
  /* 枠　丸角で見出しあり　カラーは記事内で調整 */
  /* 枠　見出し カラーは記事内で調整 */
  /* 枠　見出し横いっぱい　カラーは記事内で調整 */
  /* 枠　左端に色付き カラーは記事内で調整 */
  /* 枠　二重の枠 */
  /* 枠ドット ノーマル　*/
  /* 枠ドット_ブルー */
  /* 枠ドット　カラーは記事内で調整 */
  /* 枠ドット　見出し付　カラーは記事内で調整 */
  /* メモ */
  /* アコーディオン */
  /* テーブルスクロール */
  /*メリットデメリット枠*/
  /* stepバー */
  /* バリュコマ　マイリンクボックス用 */ }
  @media only screen and (max-width: 767px) {
    #single-column {
      margin-bottom: 32px;
      padding-top: 0rem; } }
  #single-column .flex-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* お気に入り */ }
    @media only screen and (max-width: 767px) {
      #single-column .flex-top {
        align-items: flex-end; } }
    @media only screen and (max-width: 767px) {
      #single-column .flex-top .time {
        font-size: .8rem; } }
    #single-column .flex-top .favorite-btn .fa-regular.fa-heart {
      font-size: 30px; }
    #single-column .flex-top .favorite-btn .fa-solid.fa-heart {
      font-size: 30px; }
  #single-column img {
    max-width: 100%;
    height: auto;
    margin: auto; }
  #single-column h1 {
    font-size: 30px;
    line-height: 1.5;
    padding-bottom: 1rem; }
    @media only screen and (max-width: 767px) {
      #single-column h1 {
        font-size: 22px; } }
    #single-column h1 small {
      color: #888;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 1px;
      margin-left: 5px; }
      @media only screen and (max-width: 767px) {
        #single-column h1 small {
          font-size: 15px; } }
  #single-column h2 {
    font-size: 1.6rem;
    font-weight: bold;
    padding: 16px 0;
    margin-bottom: 64px;
    line-height: 1.3;
    border-bottom: solid 3px #c4c4c4;
    position: relative; }
    @media only screen and (max-width: 767px) {
      #single-column h2 {
        font-size: 18px;
        margin-bottom: 32px;
        line-height: 1.4;
        padding: 10px 0; } }
    #single-column h2:after {
      position: absolute;
      content: " ";
      display: block;
      border-bottom: solid 3px #98DBC6;
      bottom: -3px;
      width: 14%; }
  #single-column h3 {
    margin-bottom: 48px;
    padding-left: 16px;
    font-size: 24px;
    border-left: 6px solid #98DBC6; }
    @media only screen and (max-width: 767px) {
      #single-column h3 {
        font-size: 18px;
        margin-bottom: 30px; } }
  #single-column h4 {
    font-size: 20px;
    margin-bottom: 16px; }
  #single-column p {
    margin: 16px 0 64px;
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: 0.05em; }
    @media only screen and (max-width: 767px) {
      #single-column p {
        line-height: 1.7;
        font-size: 16px; } }
  #single-column ul.single-list {
    border: 3px solid #ddd;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 32px;
    padding: 24px; }
    #single-column ul.single-list li {
      font-size: 18px;
      line-height: 1.6em;
      padding: 8px 20px;
      background: url(../img/icon/icon-checked.png) no-repeat center left;
      display: block;
      background-size: 20px;
      padding-left: 30px;
      margin-bottom: 5px;
      border-bottom: 1px dotted #ddd; }
  #single-column ol {
    list-style: decimal;
    margin-bottom: 32px;
    counter-reset: item;
    list-style-type: none;
    padding: 32px 32px 16px 32px;
    background: #f8f8f8; }
    #single-column ol li {
      line-height: 1.6em;
      font-size: 18px;
      margin-bottom: 16px;
      text-indent: -1.3em;
      padding-left: 1.3em; }
      #single-column ol li:before {
        counter-increment: item;
        content: counter(item) ".";
        padding-right: .5em;
        font-weight: bold; }
  #single-column dl {
    margin-bottom: 64px; }
    @media only screen and (max-width: 767px) {
      #single-column dl {
        margin-bottom: 40px; } }
    #single-column dl dt {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 16px; }
      @media only screen and (max-width: 767px) {
        #single-column dl dt {
          font-size: 16px; } }
    #single-column dl dd {
      background: #f1f1f1;
      padding: 24px;
      margin-bottom: 32px;
      line-height: 2.1; }
      @media only screen and (max-width: 767px) {
        #single-column dl dd {
          font-size: 14px; } }
  #single-column table {
    margin-bottom: 64px; }
    @media only screen and (max-width: 767px) {
      #single-column table {
        margin-bottom: 40px; } }
    #single-column table th {
      background: #f1f1f1; }
      @media only screen and (max-width: 767px) {
        #single-column table th {
          font-size: 14px; } }
    @media only screen and (max-width: 767px) {
      #single-column table td {
        font-size: 14px; } }
    #single-column table .btn-cv {
      margin-bottom: 0px; }
      #single-column table .btn-cv a {
        width: 100%;
        padding: 1rem .5rem;
        background-size: 15px; }
        @media only screen and (max-width: 767px) {
          #single-column table .btn-cv a {
            font-size: 17px;
            background-size: 11px; } }
        #single-column table .btn-cv a:hover {
          background-size: 15px; }
          @media only screen and (max-width: 767px) {
            #single-column table .btn-cv a:hover {
              background-size: 11px; } }
    #single-column table img {
      margin-bottom: .7rem; }
    #single-column table p {
      display: none; }
  #single-column a {
    text-decoration: underline; }
  #single-column blockquote {
    padding: 2rem;
    background: #f3f3f3;
    position: relative;
    margin: 0 0 3rem 0; }
    @media only screen and (max-width: 767px) {
      #single-column blockquote {
        margin: 0 0 2rem 0; } }
    #single-column blockquote p {
      margin: 0; }
      @media only screen and (max-width: 767px) {
        #single-column blockquote p {
          font-size: 14px; } }
    #single-column blockquote cite {
      display: block;
      text-align: right; }
    #single-column blockquote::before, #single-column blockquote::after {
      content: "";
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      width: 20px;
      height: 20px; }
    #single-column blockquote::before {
      background-image: url("../img/icon/icon-d-quotation01.png");
      top: 10px;
      left: 10px; }
    #single-column blockquote::after {
      background-image: url("../img/icon/icon-d-quotation02.png");
      bottom: 10px;
      right: 10px; }
  #single-column hr {
    margin: 64px 0; }
    @media only screen and (max-width: 767px) {
      #single-column hr {
        margin: 40px 0; } }
  #single-column .main-visual {
    margin: 10px 0 5px 0; }
    @media only screen and (max-width: 767px) {
      #single-column .main-visual {
        margin: 5px 0; } }
    #single-column .main-visual img {
      border-radius: 8px;
      width: 100%;
      height: auto; }
  #single-column .text-pr {
    font-size: 13px;
    color: #888;
    margin: 0 0 32px;
    text-align: right; }
    @media only screen and (max-width: 767px) {
      #single-column .text-pr {
        font-size: 12px; } }
  #single-column .tag-list {
    margin-bottom: .5rem; }
    #single-column .tag-list ul {
      padding-left: 0px;
      margin-bottom: 0px; }
      #single-column .tag-list ul li {
        padding-left: 0px;
        margin-bottom: 0px;
        margin-right: .3rem;
        border: solid 1px #DE7184;
        border-radius: 20px;
        padding: .2rem .6rem;
        text-decoration: none;
        font-size: .7rem;
        display: inline-block; }
        #single-column .tag-list ul li a {
          text-decoration: none; }
  #single-column .item-compact {
    overflow: hidden;
    margin: 32px 0;
    background: #FFF;
    padding: 30px;
    border: 1px solid #DDD;
    border-radius: 7px; }
    @media only screen and (max-width: 767px) {
      #single-column .item-compact {
        padding: 5px 15px; } }
    #single-column .item-compact a {
      display: block;
      text-decoration: none; }
      #single-column .item-compact a:hover {
        text-decoration: none;
        opacity: 0.9; }
    #single-column .item-compact .img {
      float: left;
      width: 30%; }
      @media only screen and (max-width: 767px) {
        #single-column .item-compact .img {
          float: none;
          margin: auto; } }
    #single-column .item-compact img {
      width: 100%;
      height: auto; }
    #single-column .item-compact .item-compact-right {
      width: 66%;
      float: right; }
      @media only screen and (max-width: 767px) {
        #single-column .item-compact .item-compact-right {
          width: 100%;
          float: none; } }
      #single-column .item-compact .item-compact-right p {
        margin-bottom: 0; }
        @media only screen and (max-width: 767px) {
          #single-column .item-compact .item-compact-right p {
            margin-bottom: .5rem; } }
      #single-column .item-compact .item-compact-right .name {
        font-weight: bold;
        text-decoration: underline;
        margin-bottom: 8px;
        line-height: 1.5; }
      #single-column .item-compact .item-compact-right .txt {
        line-height: 1.4;
        margin-bottom: 16px; }
      #single-column .item-compact .item-compact-right .catch {
        margin-bottom: 8px;
        font-weight: bold; }
      #single-column .item-compact .item-compact-right .check {
        background: #b52323;
        padding: 15px;
        font-weight: bold;
        text-align: center;
        border-radius: 5px 5px 0 5px;
        position: relative;
        color: #fff; }
        @media only screen and (max-width: 767px) {
          #single-column .item-compact .item-compact-right .check {
            padding: 10px;
            line-height: 1.3; } }
        #single-column .item-compact .item-compact-right .check:after {
          content: "";
          position: absolute;
          border-style: solid;
          border-width: 0 0 1.333em 1.333em;
          border-color: transparent transparent #d54040 transparent;
          right: 3px;
          bottom: 3px; }
        #single-column .item-compact .item-compact-right .check i {
          padding-right: 10px; }
        @media only screen and (max-width: 767px) {
          #single-column .item-compact .item-compact-right .check svg {
            margin-right: .3rem; } }
  #single-column .social-box {
    display: -ms-flexbox;
    display: flex;
    box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 32px 0; }
    #single-column .social-box .item {
      width: 32%; }
      #single-column .social-box .item a {
        padding: 15px;
        display: block;
        border-radius: 5px;
        text-align: center;
        text-decoration: none !important;
        display: -ms-flexbox;
        display: flex;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff; }
        #single-column .social-box .item a:hover {
          opacity: 0.9; }
        #single-column .social-box .item a span {
          font-size: 18px; }
      #single-column .social-box .item img {
        width: 28px;
        margin: 0rem .5rem 0rem 0rem; }
    #single-column .social-box .face a {
      background: #3b5998;
      box-shadow: 0 4px 0 #1e315c; }
    #single-column .social-box .x a {
      background: #000;
      box-shadow: 0 4px 0 #555; }
    #single-column .social-box .hatena a {
      background: #008fde;
      box-shadow: 0 4px 0 #005e92; }
  #single-column #toc_container {
    background: #f7f7f7;
    margin-bottom: 64px;
    padding: 20px;
    width: 100%;
    border: none;
    border-radius: 16px;
    font-weight: bold; }
    @media only screen and (max-width: 767px) {
      #single-column #toc_container {
        margin-bottom: 32px;
        padding: 15px 10px; } }
    #single-column #toc_container p.toc_title {
      font-size: 20px;
      text-align: left;
      line-height: 1.2rem; }
      @media only screen and (max-width: 767px) {
        #single-column #toc_container p.toc_title {
          font-size: 18px; } }
    #single-column #toc_container .toc_list {
      margin-top: 24px !important;
      padding: 0 0 0 1%; }
      #single-column #toc_container .toc_list li {
        list-style-type: none;
        margin-top: 16px;
        padding-left: 0; }
        @media only screen and (max-width: 767px) {
          #single-column #toc_container .toc_list li {
            line-height: 1.6rem;
            padding-left: 0; } }
        #single-column #toc_container .toc_list li:before {
          display: none; }
        #single-column #toc_container .toc_list li a {
          color: #928a78; }
          @media only screen and (max-width: 767px) {
            #single-column #toc_container .toc_list li a {
              font-size: 14px; } }
        #single-column #toc_container .toc_list li .toc_number {
          background: #373737;
          color: #FFF;
          font-size: 14px;
          padding: 4px 10px;
          border-radius: 50%;
          margin-right: 16px; }
          @media only screen and (max-width: 767px) {
            #single-column #toc_container .toc_list li .toc_number {
              font-size: 11px;
              padding: 3px 9px;
              margin-right: 0; } }
  #single-column .btn-cv {
    margin-bottom: 64px; }
    @media only screen and (max-width: 767px) {
      #single-column .btn-cv {
        margin-bottom: 40px; } }
    #single-column .btn-cv a {
      text-align: center;
      margin: 0 auto;
      padding: 24px 50px 24px 24px;
      width: 70%;
      display: block;
      background: #FF8C42 url(../img/icon/icon-arrow-white-waku.png) no-repeat right center;
      background-position: 96%;
      font-size: 18px;
      font-weight: bold;
      color: #FFF;
      text-decoration: none;
      border-radius: 10px; }
      @media only screen and (max-width: 767px) {
        #single-column .btn-cv a {
          width: 100%; } }
      #single-column .btn-cv a:hover {
        background: #FF8C42 url(../img/icon/icon-arrow-white.png) no-repeat right center;
        background-position: 96%; }
    #single-column .btn-cv.kiran {
      overflow: hidden; }
      #single-column .btn-cv.kiran::after {
        content: '';
        position: absolute;
        top: -10%;
        left: -20%;
        width: 40px;
        height: 100%;
        transform: scale(2) rotate(20deg);
        background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
        animation-name: shiny;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite; }
@keyframes shiny {
  0% {
    left: -20%; }
  10% {
    left: 120%; }
  100% {
    left: 120%; } }
  #single-column table.small-table th {
    font-size: 12px;
    padding: 8px; }
    @media only screen and (max-width: 767px) {
      #single-column table.small-table th {
        font-size: 10px; } }
  #single-column table.small-table td {
    font-size: 12px;
    padding: 8px; }
    @media only screen and (max-width: 767px) {
      #single-column table.small-table td {
        font-size: 10px; } }
    #single-column table.small-table td .good {
      background: url(../img/icon/img-good.png) no-repeat center center;
      background-size: 40px;
      display: block;
      min-height: 40px;
      padding: .6rem 0 0; }
    #single-column table.small-table td .usually {
      background: url(../img/icon/img-usually.png) no-repeat center center;
      background-size: 40px;
      display: block;
      min-height: 40px;
      padding: .7rem 0 0; }
    #single-column table.small-table td .well {
      background: url(../img/icon/img-well.png) no-repeat center center;
      background-size: 40px;
      display: block;
      min-height: 40px;
      padding: .8rem 0 0; }
    #single-column table.small-table td .bad {
      background: url(../img/icon/img-bad.png) no-repeat center center;
      background-size: 40px;
      display: block;
      min-height: 40px;
      padding: .8rem 0 0; }
  #single-column .scroll-table {
    overflow-x: auto;
    width: 100%;
    overflow-scrolling: touch;
    display: block;
    white-space: nowrap;
    margin-bottom: 32px; }
    @media only screen and (max-width: 767px) {
      #single-column .scroll-table:before {
        content: "※このテーブルは横スクロールできます ↓";
        font-size: 14px;
        margin-bottom: 8px;
        display: block; } }
    #single-column .scroll-table table {
      width: auto;
      border-collapse: collapse;
      border: solid 1px #ddd;
      margin: 0; }
      #single-column .scroll-table table th {
        width: 100px;
        font-size: 12px;
        padding: 8px; }
        @media only screen and (max-width: 767px) {
          #single-column .scroll-table table th {
            font-size: 10px;
            width: 80px; } }
      #single-column .scroll-table table td {
        width: 170px;
        white-space: normal;
        font-size: 12px;
        padding: 8px; }
        @media only screen and (max-width: 767px) {
          #single-column .scroll-table table td {
            font-size: 10px;
            width: 120px; } }
  #single-column .btn-seni {
    border: 3px solid #eb8258;
    background-image: linear-gradient(-45deg, #fff 25%, #fff9f7 25%, #fff9f7 50%, #fff 50%, #fff 75%, #fff9f7 75%, #fff9f7);
    background-size: 15px 15px;
    box-shadow: 2px 2px 2px #d3d3d3;
    border-radius: 15px;
    position: relative;
    margin: 40px; }
    #single-column .btn-seni:hover {
      background-image: linear-gradient(-45deg, #f8e5df 25%, #fff9f7 25%, #fff9f7 50%, #f8e5df 50%, #f8e5df 75%, #fff9f7 75%, #fff9f7); }
    #single-column .btn-seni a {
      display: block;
      padding: 16px 40px 40px 16px;
      text-align: center;
      text-decoration: none;
      width: 100%;
      font-size: 20px;
      background-size: 80px;
      background-position: 98% 100%; }
      #single-column .btn-seni a:after {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 13px;
        border-style: solid;
        border-width: 15px 20px 0 20px;
        border-color: #835e54 transparent transparent transparent;
        width: 0;
        height: 0; }
  #single-column .point {
    border: 1px solid #222;
    padding: 26px 24px 24px 24px;
    margin-bottom: 64px;
    position: relative;
    font-size: 18px;
    line-height: 2.1;
    color: #373737; }
    @media only screen and (max-width: 767px) {
      #single-column .point {
        margin-bottom: 40px;
        font-size: 15px; } }
    #single-column .point:before {
      content: 'POINT';
      display: inline-block;
      width: 140px;
      padding: 6px 0;
      background: #222;
      color: #FFF;
      font-size: 16px;
      line-height: 1;
      text-align: center;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%); }
    #single-column .point p, #single-column .point ul, #single-column .point ol, #single-column .point dl {
      margin: 0; }
  #single-column .waku {
    padding: 5%;
    border: 2px solid #DDD;
    font-size: 18px;
    line-height: 2.1;
    margin-bottom: 48px; }
    @media only screen and (max-width: 767px) {
      #single-column .waku {
        font-size: 16px; } }
  #single-column .waku-maru-midashi {
    position: relative;
    padding: 18px 20px 12px;
    border-radius: 8px;
    margin-bottom: 3rem; }
    #single-column .waku-maru-midashi .midashi {
      position: absolute;
      top: -1em;
      left: 13px;
      padding: 0 0.8em; }
    #single-column .waku-maru-midashi p {
      margin-bottom: 0rem; }
  #single-column .waku-midashi {
    background-color: #fff;
    position: relative;
    padding: 25px 20px 12px; }
    #single-column .waku-midashi .midashi {
      position: absolute;
      top: -0.8em;
      left: 13px;
      padding: 0 1em; }
    #single-column .waku-midashi p {
      margin-bottom: 0rem; }
  #single-column .waku-midashi-02 dt {
    padding-left: 20px;
    margin-bottom: 0; }
  #single-column .waku-midashi-02 dd {
    font-size: 90%;
    padding: 20px;
    line-height: 1.7; }
  #single-column .waku-left {
    padding: 20px;
    font-size: 90%;
    margin-bottom: 3rem; }
    #single-column .waku-left .midashi {
      margin-bottom: 1rem; }
    #single-column .waku-left p.txt {
      margin-bottom: 0;
      font-size: 15px; }
  #single-column .waku-double {
    margin: 2em auto;
    padding: 2em; }
    #single-column .waku-double .midashi {
      margin-bottom: 1rem; }
    #single-column .waku-double p.txt {
      margin-bottom: 0;
      font-size: 15px; }
  #single-column .waku-dot {
    padding: 5%;
    border: 3px dotted #cacaca;
    background: #f5f5f5;
    font-size: 18px;
    line-height: 2.1;
    margin-bottom: 48px; }
    @media only screen and (max-width: 767px) {
      #single-column .waku-dot {
        font-size: 16px; } }
  #single-column .waku-dot-b {
    padding: 5%;
    border: 3px dotted #4D869C;
    font-size: 18px;
    line-height: 2.1;
    margin-bottom: 48px; }
    @media only screen and (max-width: 767px) {
      #single-column .waku-dot-b {
        font-size: 16px; } }
    #single-column .waku-dot-b span {
      font-weight: bold;
      color: #4D869C; }
  #single-column .waku-dot-color {
    padding: 10px;
    margin-bottom: 2rem; }
  #single-column .waku-dot-midashi {
    position: relative;
    padding: 18px 20px 12px;
    margin-bottom: 3rem; }
    #single-column .waku-dot-midashi .midashi {
      position: absolute;
      top: -1em;
      left: 13px;
      padding: 0 0.8em; }
    #single-column .waku-dot-midashi p {
      margin-bottom: 0rem; }
  #single-column .memo {
    border: 1px solid #222;
    padding: 26px 24px 24px 24px;
    margin-bottom: 64px;
    position: relative;
    font-size: 18px;
    line-height: 2.1;
    color: #373737; }
    @media only screen and (max-width: 767px) {
      #single-column .memo {
        margin-bottom: 40px;
        font-size: 15px; } }
    #single-column .memo:before {
      content: 'MEMO';
      display: inline-block;
      width: 120px;
      padding: 6px;
      background-color: #FFF;
      background-image: url(../img/icon/icon-memo-left.png), url(../img/icon/icon-memo-right.png);
      background-repeat: no-repeat;
      background-position: 8%,92%;
      color: #373737;
      font-size: 16px;
      line-height: 1;
      text-align: center;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%); }
    #single-column .memo p, #single-column .memo ul, #single-column .memo ol, #single-column .memo dl {
      margin: 0; }
  #single-column .accordion .accordion-title {
    cursor: pointer;
    font-weight: 700;
    line-height: 1.8;
    position: relative; }
    #single-column .accordion .accordion-title::after {
      border-right: solid 2px #333;
      border-top: solid 2px #333;
      content: "";
      display: block;
      height: 8px;
      position: absolute;
      right: 25px;
      top: 38%;
      transform: rotate(135deg);
      transition: transform .3s ease-in-out, top .3s ease-in-out;
      width: 8px; }
    #single-column .accordion .accordion-title.open::after {
      top: 45%;
      transform: rotate(-45deg); }
  #single-column .accordion .accordion-content {
    line-height: 1.8;
    display: none;
    padding-top: 1rem; }
  #single-column .table-scroll {
    margin: 5rem 0;
    overflow-x: scroll; }
    #single-column .table-scroll::scrollbar {
      width: 8px;
      background-color: #d4d1d1; }
    #single-column .table-scroll::scrollbar-thumb {
      background: #CDA5AC;
      width: 6px;
      border-radius: 10px; }
    #single-column .table-scroll table {
      margin: 0;
      border-spacing: 0;
      table-layout: auto;
      width: 100%;
      min-width: 1200px; }
      #single-column .table-scroll table td {
        background: #FFF; }
      #single-column .table-scroll table th {
        background: #e6e6e6;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        left: 0;
        position: sticky;
        top: 0;
        width: 10%;
        padding: .5rem; }
      #single-column .table-scroll table tr:first-child th {
        border-top: 1px solid #ccc; }
      #single-column .table-scroll table th:first-child {
        border-left: 1px solid #ccc;
        width: 5%; }
      #single-column .table-scroll table tr:first-child th:first-child {
        z-index: 1; }
  #single-column .merit-demerit-box {
    display: flex;
    justify-content: space-between; }
    @media only screen and (max-width: 767px) {
      #single-column .merit-demerit-box {
        display: block; } }
    #single-column .merit-demerit-box dl {
      width: 48%; }
      @media only screen and (max-width: 767px) {
        #single-column .merit-demerit-box dl {
          width: 100%;
          margin-bottom: 20px; } }
      #single-column .merit-demerit-box dl dt {
        margin-bottom: 0;
        text-align: center;
        padding: 10px;
        border-radius: 10px 10px 0px 0px; }
      #single-column .merit-demerit-box dl dd {
        background: #fff;
        border-radius: 0px 0px 10px 10px;
        padding: 15px;
        margin-bottom: 0; }
        #single-column .merit-demerit-box dl dd ul {
          position: relative;
          z-index: 1000;
          min-height: 110px;
          /* リスト全体の最小高さを設定 */
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain; }
          #single-column .merit-demerit-box dl dd ul::after {
            font-family: "Font Awesome 5 Free";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1; }
          #single-column .merit-demerit-box dl dd ul li {
            margin-bottom: .5rem;
            line-height: 1.7; }
      #single-column .merit-demerit-box dl.merit dt {
        background-color: #58D68D;
        color: #145A32; }
      #single-column .merit-demerit-box dl.merit dd {
        border: solid #58D68D 3px; }
        #single-column .merit-demerit-box dl.merit dd ul {
          background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23E3FCEC" d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>'); }
      #single-column .merit-demerit-box dl.demerit dt {
        background-color: #8FAADC;
        color: #34568B; }
      #single-column .merit-demerit-box dl.demerit dd {
        border: solid #8FAADC 3px; }
        #single-column .merit-demerit-box dl.demerit dd ul {
          background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 60 350 400"><path fill="%23D1E4F3" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>'); }
  #single-column .stepbar {
    margin: 0 auto; }
    #single-column .stepbar .stepbarwrap {
      margin: 2em 0;
      position: relative; }
      #single-column .stepbar .stepbarwrap .steptitle {
        display: inline-flex;
        align-items: center; }
        #single-column .stepbar .stepbarwrap .steptitle .title {
          margin: 0.5em;
          font-weight: bold;
          font-size: 1.2em; }
        #single-column .stepbar .stepbarwrap .steptitle .stepcircle {
          display: inline-block;
          width: 3em;
          height: 3em;
          content: "";
          border-radius: 50%;
          background-color: #82AABA;
          color: #fff;
          text-align: center; }
          #single-column .stepbar .stepbarwrap .steptitle .stepcircle span {
            display: inline-block;
            line-height: 1.2em;
            font-size: 0.8em;
            font-weight: bold;
            position: relative;
            top: 0.9em;
            z-index: 100; }
      #single-column .stepbar .stepbarwrap .steptxt {
        padding-left: 3.5em; }
        #single-column .stepbar .stepbarwrap .steptxt .txt {
          font-size: 0.9em; }
      #single-column .stepbar .stepbarwrap .stepline {
        width: 1px;
        height: calc(100% + 1em);
        background-color: #82AABA;
        position: absolute;
        top: 1em;
        left: 1.3em;
        z-index: 99; }
      #single-column .stepbar .stepbarwrap .stepline-last {
        display: none; }
  #single-column .myLinkModule {
    margin-bottom: 2rem !important; }

/* single-column */
/* ============ 執筆者box ============ */
#single-column .saboxplugin-wrap {
  border: none;
  background: #f0f0f1;
  padding: 1.5rem;
  margin-bottom: 3rem; }
  @media only screen and (max-width: 767px) {
    #single-column .saboxplugin-wrap {
      padding: 1rem;
      margin-bottom: 2rem; } }
  #single-column .saboxplugin-wrap a {
    color: #373737;
    font-weight: bold;
    pointer-events: none;
    text-decoration: none; }
  #single-column .saboxplugin-wrap .saboxplugin-authorname {
    margin: 0; }
    @media only screen and (max-width: 767px) {
      #single-column .saboxplugin-wrap .saboxplugin-authorname {
        text-align: left;
        margin-bottom: .3rem; } }
  #single-column .saboxplugin-wrap .saboxplugin-gravatar {
    padding: 0 20px 0 0; }
    @media only screen and (max-width: 767px) {
      #single-column .saboxplugin-wrap .saboxplugin-gravatar {
        float: left;
        padding: 0 0.8rem 0 0; } }
    #single-column .saboxplugin-wrap .saboxplugin-gravatar img {
      width: 100px; }
      @media only screen and (max-width: 767px) {
        #single-column .saboxplugin-wrap .saboxplugin-gravatar img {
          width: 70px; } }
  #single-column .saboxplugin-wrap .saboxplugin-desc {
    margin: auto; }
    #single-column .saboxplugin-wrap .saboxplugin-desc p {
      margin: 16px; }
      @media only screen and (max-width: 767px) {
        #single-column .saboxplugin-wrap .saboxplugin-desc p {
          width: 77%;
          margin: 0;
          margin-left: auto;
          text-align: left; } }

/* ------------------------------------------------- *
*   ＠Category（カテゴリーページ） ＠Tag（タグページ）　＠search
* ------------------------------------------------- */
.post-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media only screen and (max-width: 767px) {
    .post-list {
      width: 94%;
      margin: auto; } }
  .post-list::after {
    content: "";
    display: block;
    width: 30%; }
  .post-list li {
    width: 28%;
    margin-bottom: 3rem;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .post-list li {
        width: 47%;
        margin-bottom: 1rem; } }
    .post-list li:hover {
      opacity: 0.8; }
    .post-list li img {
      border-radius: 15px;
      margin-bottom: .5rem; }
  .post-list h2 {
    font-size: 1rem; }
    @media only screen and (max-width: 767px) {
      .post-list h2 {
        font-size: .8rem; } }
  .post-list .post-date {
    color: #808080;
    font-size: .9rem; }
    @media only screen and (max-width: 767px) {
      .post-list .post-date {
        font-size: .7rem;
        line-height: 1.4; } }
  .post-list img {
    width: 300px;
    /* 横幅を300pxに固定 */
    height: 170px;
    /* 縦幅を170pxに固定 */
    object-fit: cover;
    /* 画像の比率を保ちながら、指定サイズに収める */
    display: block;
    /* 画像をブロック要素として表示（余白の調整に役立ちます） */ }
  .post-list .cate-time {
    display: flex;
    align-items: baseline; }
    .post-list .cate-time .tag-cate {
      margin: 0rem .5rem .2rem 0rem;
      font-size: .8rem;
      padding: .2rem .5rem;
      border-radius: 7px; }
      @media only screen and (max-width: 767px) {
        .post-list .cate-time .tag-cate {
          margin: 0rem .3rem .2rem 0rem;
          font-size: .6rem; } }
  .post-list .favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 144px;
    z-index: 1000; }
    @media only screen and (max-width: 767px) {
      .post-list .favorite-btn {
        right: 0px; } }

/* ============ 記事カテゴリ一覧 ============ */
#category-list h1 {
  text-align: center;
  margin: 2rem auto; }
  @media only screen and (max-width: 767px) {
    #category-list h1 {
      margin: .6rem auto;
      line-height: 1.2; } }
  #category-list h1 span {
    display: block; }

/* ============ タグ一覧 ============ */
#tag-list h1 {
  text-align: center;
  margin: 2rem auto 3rem; }
  @media only screen and (max-width: 767px) {
    #tag-list h1 {
      margin: .6rem auto;
      line-height: 1.2; } }
  #tag-list h1 span {
    display: block; }

/* ============ 検索一覧 ============ */
#search-list h1 {
  margin-top: 2rem; }
  #search-list h1 span {
    display: block; }

/* ============ 各カテゴリ一覧 ============ */
/* タブメニューのスタイル */
.category-btn {
  margin: 1.5rem auto; }
  @media only screen and (max-width: 767px) {
    .category-btn {
      margin: auto; } }
  .category-btn .btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 4rem; }
    @media only screen and (max-width: 767px) {
      .category-btn .btns {
        margin-bottom: 1rem; } }
    @media only screen and (max-width: 767px) {
      .category-btn .btns a {
        width: 48%; } }
    .category-btn .btns .btns-link {
      background: #fff;
      border: 2px solid #ddd;
      padding: 10px 20px;
      cursor: pointer;
      margin-right: 5px;
      margin-bottom: .5rem;
      flex: 1;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .category-btn .btns .btns-link {
          padding: 5px;
          margin-bottom: 0.3rem;
          font-size: .8rem; } }
      .category-btn .btns .btns-link.active {
        font-size: 1rem;
        background: #f5f5f5; }

/* ------------------------------------------------- *
*        ＠Page（固定ページ）
* ------------------------------------------------- */
/* ============ 固定ページ（標準） ============ */
#page-content {
  max-width: 750px;
  margin: auto; }
  @media only screen and (max-width: 767px) {
    #page-content {
      width: 96%; } }
  #page-content h1 {
    font-size: 1.6rem;
    margin-top: 1rem; }
  #page-content h2 {
    line-height: 1.3;
    border-bottom: solid 3px #c4c4c4;
    padding-bottom: .5rem;
    margin: 3rem auto 1rem; }
  #page-content h3 {
    border-left: 5px solid #373737; }
  #page-content p {
    margin-bottom: 2rem;
    line-height: 2.1; }
  #page-content a {
    text-decoration: underline; }
  #page-content table {
    margin-bottom: 3rem; }
    #page-content table th {
      background: #f1f1f1; }

/* ============ 404ページ ============ */
#page-404 {
  text-align: center;
  margin: 120px 0 160px 0; }
  @media only screen and (max-width: 767px) {
    #page-404 {
      margin: 84px 0 100px 0; } }
  #page-404 .title {
    font-size: 24px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      #page-404 .title {
        font-size: 18px;
        margin-bottom: 16px; } }
  #page-404 .sub-txt a {
    text-decoration: underline; }

/* ============ reページ ============ */
#page-re {
  position: relative;
  height: 100vh; }
  #page-re .page-re-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%; }
    @media only screen and (max-width: 767px) {
      #page-re .page-re-content {
        width: 90%; } }
    #page-re .page-re-content h1 {
      margin-bottom: 16px; }
    #page-re .page-re-content a {
      text-decoration: underline;
      margin-bottom: 16px;
      display: block; }
    #page-re .page-re-content img {
      display: inline; }
    #page-re .page-re-content .title {
      font-size: 24px;
      font-weight: bold;
      margin: 0% 0 12px 0; }
      @media only screen and (max-width: 767px) {
        #page-re .page-re-content .title {
          margin: -30% 0 8% 0; } }
    #page-re .page-re-content .loading {
      margin: 0 auto; }

/* ============ お気に入りぺージ ============ */
#favorites h1 {
  text-align: center;
  margin: 2rem auto; }
  #favorites h1 span {
    display: block; }

#favorites-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media only screen and (max-width: 767px) {
    #favorites-list {
      width: 94%;
      margin: auto; } }
  #favorites-list img {
    width: 300px;
    /* 横幅を300pxに固定 */
    height: 170px;
    /* 縦幅を170pxに固定 */
    object-fit: cover;
    /* 画像の比率を保ちながら、指定サイズに収める */
    display: block;
    /* 画像をブロック要素として表示（余白の調整に役立ちます） */ }

/* ------------------------------------------------- *
*        ＠その他
* ------------------------------------------------- */

/*# sourceMappingURL=design.css.map */