@charset "UTF-8";
@font-face {
  font-family: 'genshin';
  src: url("../fonts/GenShinGothic-Bold.ttf") format("truetype");
  font-weight: bold; }

@font-face {
  font-family: 'emugo';
  src: url("../fonts/GenEiMGothic2-Heavy.ttf") format("truetype");
  font-weight: black; }

.f-genkaku {
  font-family: source-han-sans-japanese, sans-serif;
  font-style: normal; }

.w-genkaku-bo {
  font-weight: 700; }

.w-genkaku-re {
  font-weight: 400; }

.f-genshin {
  font-family: 'genshin'; }

.f-emugo {
  font-family: 'emugo'; }

.f-mei, section#tipsPage > .center .attr {
  font-family: 'メイリオ', Meiryo,sans-serif; }

.grad {
  background: linear-gradient(to right, #22DCFD 0%, #1C91E2 60%, #5865B9 100%); }

.center {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto; }

section#tipsPage {
  padding-bottom: 100px; }
  section#tipsPage > .center {
    padding: 0 20px; }
    section#tipsPage > .center .thumbnail {
      max-width: 600px;
      margin: 0 auto;
      margin-bottom: 30px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
      section#tipsPage > .center .thumbnail img {
        display: block;
        width: 100%;
        height: auto; }
    section#tipsPage > .center .attr {
      font-size: 14px;
      margin-bottom: 40px;
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      border-left: 4px solid #1C91E2; }
      section#tipsPage > .center .attr .date {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        align-items: center; }
        section#tipsPage > .center .attr .date img.clock {
          display: block;
          width: 20px;
          margin-right: 10px; }
      section#tipsPage > .center .attr .detail {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        align-items: center; }
        section#tipsPage > .center .attr .detail .author {
          margin-right: 20px; }
          section#tipsPage > .center .attr .detail .author::before {
            content: 'Author:';
            margin-right: 5px; }
        section#tipsPage > .center .attr .detail .tags {
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          align-items: center; }
          section#tipsPage > .center .attr .detail .tags span.tag {
            padding: 4px 12px;
            background: #1C91E2;
            color: white;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500; }
            section#tipsPage > .center .attr .detail .tags span.tag:not(:last-child) {
              margin-right: 5px; }
    section#tipsPage > .center .title-section {
      margin-bottom: 40px;
      text-align: center; }
      section#tipsPage > .center .title-section .tips-title {
        font-size: 32px;
        line-height: 1.4;
        color: #333;
        margin: 0;
        font-weight: 700; }
        @media screen and (max-width: 768px) {
          section#tipsPage > .center .title-section .tips-title {
            font-size: 24px; } }
    section#tipsPage > .center section#freeArea {
      word-break: break-all;
      background: #fff;
      border-radius: 12px;
      padding: 40px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      line-height: 1.8; }
      @media screen and (max-width: 768px) {
        section#tipsPage > .center section#freeArea {
          padding: 20px; } }
      section#tipsPage > .center section#freeArea h2,
      section#tipsPage > .center section#freeArea h3,
      section#tipsPage > .center section#freeArea h4 {
        color: #333;
        margin-top: 30px;
        margin-bottom: 15px; }
      section#tipsPage > .center section#freeArea h2 {
        font-size: 24px;
        border-bottom: 2px solid #1C91E2;
        padding-bottom: 8px; }
      section#tipsPage > .center section#freeArea h3 {
        font-size: 20px; }
      section#tipsPage > .center section#freeArea p {
        margin-bottom: 16px; }
      section#tipsPage > .center section#freeArea img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 20px 0; }