/*
Theme Name:GENESIS child for '火の国 Runners Festival'
Theme URI:
Description:TCDテーマ「GENESIS」の子テーマです。
Template:genesis_tcd103
Author:MARUKU
Version:0.1
*/


:root {
  --tcdce-opt-font-weight-bold: 700;
  --header-height: 80px;
  --hrf-color-red: #FF2700;
  --hrf-color-yellow: #FFEB00;
  --hrf-color-beige: #F4F1EC;
  --hrf-gadient-01: linear-gradient(to right, #ed2400 0%, #ff2b00 62.07%, #ff7600 100%);
  @media (width <= 1100px){
    --header-height: 60px;
  }
}




/*********************************************/
/* Layout */
/*********************************************/

/* Header
============================================ */

/* 検索エリア非表示 */
#header_search {
  display: none;
}

#global_menu {
  height: var(--header-height);
  @media (width > 800px){
    display: block;
  }

  > ul > li > a {
    height: var(--header-height);
    line-height: var(--header-height);
    font-size: 30px;
    font-weight: 600;
    .instagram-icon {
      &::before {
        content: '\ea92';
        display: block;
        font-family: 'design_plus';
      }
    }
    .hide-text {
      display: none;
    }
  }

}


/* Drawer（親テーマから移植してPCでも反映されるように）
============================================ */

/* ハンバーガーアイコン表示 */
#drawer_menu_button {
  width:60px; height:60px; display:block; position:absolute; right:0; top:0;
  @media screen and (min-width: 1100px) {
    scale: calc(80/60);
    transform-origin: right top;
    /* top: 0;
    right: 0; */
  }

  span { width:22px; height:2px; background:#000; display:block; position:absolute; left:50%; transform: translateX(-50%); transition: all 0.4s ease; }
  span:nth-child(1) { top:24px; }
  span:nth-child(2) { top:30px; }
  span:nth-child(3) { top:36px; }
}

#drawer_menu {
  display:block; position:fixed; top:0px; right:0; width:400px; height:100vh; height:100dvh; background:#000; overflow:auto; z-index:99999;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); -webkit-overflow-scrolling: touch; pointer-events:none; transform: translate3d(100%,0,0);
}

html.open_menu {
  #drawer_menu { transform: translate3d(0,0,0); pointer-events:auto; }
  #container:before { opacity:1; pointer-events:auto; }
  #container { }
  #js-footer-bar { display:none; }
}
#container:before { opacity:0; pointer-events:none; content:''; width:100%; height:100%; background:rgba(0,0,0,0.6); display:block; position:fixed; top:0; left:0; z-index:3000; transition: opacity 0.5s ease; }
body.admin-bar #drawer_menu_mobile { top:32px; }
@media only screen and (max-width: 782px) {
  body.admin-bar #drawer_menu_mobile { top:48px; }
}
@media only screen and (max-width: 600px) {
	#drawer_menu { width:100%; }
	#container:before { display:none; }
	#container { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); transform: translate3d(0,0,0); }
	.open_menu #container { transform: translate3d(-100%,0,0); }
	#header { transition: transform 0.5s ease, opacity 0.7s ease 0.1s; transform: translate3d(0,0,0); }
	.open_menu #header { transform: translate3d(-100%,0,0); }
}

/* ドロワーメニューのスクロールバー */
#drawer_menu_mobile .simplebar-scrollbar:before { background:#aaa !important; }

/* 閉じるボタン */
#drawer_menu .header { position:relative; width:100%; height:50px; border-bottom:1px solid rgba(255,255,255,0.2); }
#drawer_mneu_close_button { cursor:pointer; display:block; width:50px; height:50px; position:absolute; top:0px; right:0px; z-index:10; }
#drawer_mneu_close_button:before { color:#fff; font-family:'design_plus'; content:'\e91a'; font-size:20px; display:block; top:17px; left:12px; position:absolute; }

/* グローバルメニュー */
#mobile_menu { width:100%; margin:0; }
#mobile_menu ul { margin:0; }
#mobile_menu li ul { display:none; }
#mobile_menu a {
  position:relative; display:block;  margin:0; padding:0 50px 0 20px; height:50px; line-height:50px; overflow:hidden; text-decoration:none;
  color:#fff !important; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.2); transition:none;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; visibility:visible;
}
#mobile_menu li li a { border:none; height:50px; line-height:50px; }

/* グローバルメニュー（子メニュー） */
#mobile_menu li { position:relative; }
#mobile_menu .child_menu_button { display:block; position:absolute; text-align:center; width:50px; height:50px; right:0px; top:-5px; z-index:9; cursor:pointer; }
#mobile_menu .child_menu_button:after {
  background:#fff; content:''; height:2px; width:12px; display:block;
  position:absolute; right:22px; top:30px; transition: background-color 0.25s ease;
}
#mobile_menu .child_menu_button:before {
  background:#fff; content:''; height:12px; width:2px; display:block;
  position:absolute; right:27px; top:25px; transition: background-color 0.25s ease;
}
#mobile_menu li.open > .child_menu_button:before {  display:none; }
#mobile_menu li.open > a { border-bottom:none; }
#mobile_menu li li a { background:#1f272e; border-bottom:1px solid rgba(255,255,255,0.4); position:relative; }
#mobile_menu li li:last-of-type a { border-bottom:none; }
#mobile_menu li li a:after { content:'\e94f'; display:block; font-family:'design_plus'; font-size:10px; position:absolute; right:18px; top:1px; width:20px; color:fff; z-index:2; text-align:center; pointer-events:none; }
#mobile_menu li li.menu-item-has-children > a:after { display:none; }
#mobile_menu li li.open > a { border-bottom:1px solid rgba(255,255,255,0.4); }
#mobile_menu li ul { background:#000; }

/* 検索フォーム */
#drawer_menu_search { margin:30px 20px 0; position:relative; width:auto; }
#drawer_menu_search .input_area { background:#222222; width:100%; height:40px; border-radius:40px; position:relative; }
#drawer_menu_search .input_area input { font-size:12px; border:none; background:none; height:40px; width:calc(100% - 40px); position:absolute; left:0px; top:2px; padding:0 10px 0 25px; color:#fff; }
#drawer_menu_search .button_area { width:40px; height:40px; position:absolute; right:0px; top:0px; }
#drawer_menu_search .button_area input { width:40px; height:40px; border:none; background:none; cursor:pointer; }
#drawer_menu_search .button_area:before {
  display:block; text-align:center; cursor:pointer; z-index:1; pointer-events:none; font-weight:600;
  position:absolute; font-family:'design_plus'; color:#fff; font-size:12px; content:'\e94c'; left:11px; top:15px;
  -webkit-transition: color 0.25s ease; transition: color 0.25s ease;
}

/* SNS */
#mobile_sns { text-align:left; padding:30px 20px; }
#mobile_sns li { margin:0 15px 10px 0; }
#mobile_sns li a:before { color:#fff; }
#mobile_sns li.note a:before { background-color: #fff; }




/* Footer
============================================ */

#footer {
  background-color: #fff;
  /* background-color: #F5F5F5; */

  h3 {
    margin-block-end: 7px;
    color: var(--hrf-color-red);
    font-size: 18px;
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.2;
    @media (width <= 800px){
      font-size: 16px;
    }
  }

  .sponcor-banner-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
    @media (width <= 800px){
      gap: 10px;
      margin-block-end: 30px;
    }

    li {
      /* border-radius: 3px;
      overflow: hidden; */
      
      img {
        vertical-align: top;
        height: 123px;
        width: auto;
        @media (width <= 800px){
          height: 55px;
        }
      }

      a {
        transition: opacity 0.3s ease;
        @media (hover: hover) {
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }


  .sponcor-name-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    font-weight: 500;
    @media (width <= 800px){
      font-size: 14px;
    }

    li {
      &:not(:last-child) {
        &::after {
          content: "｜";
        }
      }
    }

    a {
      color: inherit;
      text-decoration: underline;
      &:hover {
        color: var(--hrf-color-red);
      }
    }

    &.--secondary {
      li {
        &:not(:last-child) {
          &::after {
            content: "、";
          }
        }
      }

    }
  }

  .sponcor-name-inline {
    font-size: 18px;
    font-weight: 500;
    @media (width <= 800px){
      font-size: 14px;
    }
  }
}

#footer_sponsor {
  margin-block-end: 50px;

  h3 {
    margin-block-end: 14px;
    ~ h3 {
      margin-top: 30px;
    }
  }

  .sponcor-notice {
    margin-block-start: 30px;
    padding: 30px;
    background-color: var(--hrf-color-beige);
    @media (width <= 800px){
      padding: 20px;
    }

    p {
      font-size: 14px;
      line-height: calc(24/14);
      @media (width <= 800px){
        font-size: 12px;
      }
    }
  }
}


#footer_banner {
  .title {
    font-weight: 900;
  }
  .sub_title {
    font-weight: 700;
  }
  a::after {
    background-color: #F4F0EC;
  }
}

#footer_logo {
  display: none;
}

#footer_inner {
  @media (width > 800px){
    padding-block: 56px;
  }
  @media (width <= 800px){
  }
}

#footer_address {
  margin-block: 0;

  .footer_address_row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 46px 200px;
    @media (width <= 800px){
      flex-direction: column;
      gap: 30px;
    }
  }

  .footer_address_col {

    p {
      margin-block: 0;
      line-height: calc(24 / 14);
      font-size: 14px;
      font-weight: 500;
    }

    a {
      color: inherit;
      text-decoration: underline!important;
    }
  }
}


#page_header {
  @media (width <= 800px){
    margin-block-end: 20px;
  }
}


/* オレンジ背景の固定ページ */
body.page-template-page-orange-bg {
  #container {
    background: var(--hrf-gadient-01);
  }

  #page_header {
    color: #fff;
    .sub_title {
      color: var(--hrf-color-yellow);
    }
  }

  #page_contents .post_content {
    overflow: visible;
  }
}


/*********************************************/
/* custom theme components */
/*********************************************/
:is(.design_header, .tcdce-body .design_header) {
  .large_headline {
    font-family: var(--tcd-font-type2);
    font-weight: 900;
    &.--size-m {
      @media (width > 800px){
        font-size: 50px!important;
      }
    }
  }
  .sub_title {
    font-weight: 700;
  }
}


/* FAQ */
.faq_list .title.active ,
.faq_list .title:hover {
  color: var(--hrf-color-red);
}

.post_content {
  /* グレーの囲み*/
  .gray_bg {
    margin-block: 70px;
    @media (width <= 800px){
      margin-block: 40px;
    }
    > :first-child {
      margin-block-start: 0!important;
    }
    > :last-child {
      margin-block-end: 0!important;
    }
  }
}
#content_builder {
  .shutter_image {
    ~ .shutter_image {
      margin-block-start: 60px;
      @media (width <= 800px){
        margin-block-start: 3px;
      }
    }

    &.col1 {
      .item {
        @media (width <= 800px){
          aspect-ratio: 320 / 230;
        }
      }
    }
    &.col4 {
      .item {
        @media (width > 800px){
          width: calc(100% / 4 - 3px);
        }
      }
    }
    
    .item {
      @media (width > 800px){
        height: 566px;
      }
      @media (width <= 800px){
        aspect-ratio: 320 / 230;
        width: 100%;
      }
  
      > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
      }
    }

    &.link_ver {
      .headline {
        line-height: calc(70/50);
        /* @media (width > 800px){
          font-size: 50px;
        } */

        small {
          display: block;
          font-size: 18px;
        }
      }
    }

  }
}

.design_header {
  &.--white {
    .large_headline {
      color: #fff;
    }
    .sub_title {
      color: var(--hrf-color-yellow);
    }
  }

  &.--size-m {
    .large_headline {
      @media (width > 800px){
        font-size: 50px!important;
      }
    }
  }
}

.widget_headline {
  background-color: var(--hrf-color-red);
}

.custom_h3 {
  --tcdce-h3-font-family: var(--tcd-font-type1);
}




/*********************************************/
/* Additional components */
/*********************************************/
.post_content {

  .s_table {
    overflow-x: auto;
    width: 100%;
    margin-block: 40px;
    margin-inline: 0;
    padding-inline: 0;
    white-space: normal;

    table {
      &::after {
        display: none;
      }
      th, td {
        @media (width <= 800px){
          white-space: nowrap;
        }
      }
    }
  }
}


.hrf-section {
  position: relative;
  margin-block: 0;
  padding-block: 100px;
  @media (width <= 800px){
    padding-block: 50px;
  }
  &::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 calc(50% - 50vw);
    pointer-events: none;
  }

  .hrf-section__inner {
    position: relative;
    > :first-child {
      margin-block-start: 0!important;
    }
    > :last-child {
      margin-block-end: 0!important;
    }
  }

  &.--gradient {
    &::before {
      background: var(--hrf-gadient-01);
    }
  }
  &.--white {
    &::before {
      background-color: #fff;
    }
  }
  &.--beige {
    &::before {
      background-color: var(--hrf-color-beige);
    }
  }
}
#page_contents:has(.hrf-section:last-child) {
  padding-block-end: 0;
}


.hrf-container {
  max-width: 1700px;
  margin-inline: auto;
  padding-inline: 100px;
  @media (width <= 1391px){
    max-width: inherit;
    padding-inline: 60px;
  }
  @media (width <= 1100px){
    padding-inline: 40px;
  }
  @media (width <= 800px){
    padding-inline: 20px;
  }
  > :first-child {
    margin-block-start: 0;
  }
  > :last-child {
    margin-block-end: 0;
  }
}

/* 白の囲み */
.hrf-wrap-01 {
  background-color: #fff;
  margin-block: 70px;
  padding: 60px;
  @media (width <= 1100px){
    padding: 40px;
  }
  @media (width <= 800px){
    margin-block: 35px;
    padding: 20px;
  }

  > :first-child {
    margin-block-start: 0!important;
  }
  > :last-child {
    margin-block-end: 0!important;
  }

  &.--beige {
    background-color: var(--hrf-color-beige);
  }
  &.--gradient {
    background-color: var(--hrf-gadient-01);
  }

}

/* 人物情報 */
.hrf-person-info {
  display: flex;
  @media (width > 800px){
    /* align-items: center; */
    gap: 46px;
  }
  @media (width <= 800px){
    flex-direction: column;
    gap: 23px;
  }

  > * {
    flex: 1 1 0%;
  }
  .image {
    .shutter_image {
      margin: 0!important;
    }
    img {
      width: 100%;
    }
  }

  &.reverse {
    @media (width > 800px){
      flex-direction: row-reverse;
    }
  }
}

/* テーブル1（罫線無し） */
.hrf-table-01 {
  th, td {
    padding-block: 5px;
    padding-inline: 40px 0;
    background-color: transparent;
    line-height: inherit;
    &:first-child {
      padding-inline-start:0;
    }
  }
  th {
    background:none;
    border:none;
    text-align:left;
    vertical-align: initial;
    font-weight: inherit;
  }
  td {
    border:none;
    vertical-align: initial;
  }
}

/* テーブル2（罫線あり） */
.hrf-table-02 {
  min-width: 100%;

  th, td {
    padding: 8px 20px;
    border: 1px solid #ddd;
    line-height: inherit;
    @media (width <= 800px){
      padding: 8px 15px;
    }
  }
  th {
    background-color: #f7f7f7;
    font-weight: inherit;
    text-align: center;
    vertical-align: middle;
  }
  td {
    vertical-align: initial;
  }

  &.--orange {
    th {
      background-color: var(--hrf-color-red);
      color: #fff;
    }
  }

  &.--center {
    th, td {
      text-align: center;
    }
  }
}

.hrf-table-01 ,
.hrf-table-02 {
  border:none!important;
  border-collapse: collapse!important;
  width: auto!important;
  th, td {
    box-sizing: content-box;
    &:first-child {
      width: var(--first-col-width, auto);
      min-width: var(--first-col-width, 0);
      &[colspan] {
        width: auto;
      }
    }
  }
}


/* 競技種目メニュー */
.hrf-program-navi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 60px 5px;
  @media (width > 1200px){
    grid-template-columns: repeat(5, 1fr);
  }
  @media (width <= 800px){
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }

  &.--col-3 {
    @media (width > 800px){
      grid-template-columns: repeat(3, 1fr);
    }
  }

  > .item {
    position: relative;
    padding: 24px 30px 84px;
    color: #fff;
    overflow: hidden;
    @media (width <= 800px){
      padding: 30px 20px 80px;
    }

    &.--color-01 { background-color: #0487D9; }
    &.--color-02 { background-color: #D96666; }
    &.--color-03 { background-color: #D98E04; }
    &.--impressed {
      grid-column: 1 / -1;
      aspect-ratio: 1366/566;
      @media (width <= 800px){
        aspect-ratio: 4/3;
      }

      > img {
        position: absolute;
        inset: 0;
        z-index: 1;
        object-fit: cover;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      .headline {
        font-weight: 800;
      }
    }
    
    .headline {
      position: relative;
      z-index: 2;
      margin: 0;
      font-weight: 700;
      font-size: 40px;
      line-height: calc(50/40);
      @media (width <= 1100px){
        font-size: 30px;
      }
      @media (width <= 800px){
        font-size: 24px;
      }

      &.--black {
        color: #000;
        /* text-shadow: 0 0 2px #fff; */
        -webkit-text-stroke: 1px #fff;
        text-stroke: 1px #fff;
        paint-order: stroke;
      }
    }
    .post_list {
      position: absolute;
      z-index: 3;
      inset: auto 0 0;
      border-top: 1px solid #fff;
      translate: 0 100%;
      transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;

      a {
        font-size:18px;
        display:block;
        color:#fff;
        height:60px;
        line-height:60px;
        padding:0 70px 0 30px;
        position:relative;
        &::before { content:''; display:block; width:100%; height:1px; position:absolute; left:0; top:-1px; background:rgba(255,255,255,0.3); z-index:2; }
        &::after { content:''; display:block; width:100%; height:100%; position:absolute; left:0; bottom:0; background:#FF2700; z-index:1; transition: background-color 0.25s ease; }

        &:hover:before { display:none; }
        &:hover:after {
          z-index:2;
          background-color: #e12200;
        }

        &:first-of-type::before { display:none; }

        .label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; visibility:visible; display:block; z-index:20; position:relative; }
        .arrow_button_small { top:25px; right:10px; z-index:20; }
      }
      @media (width <= 1100px){
        a {
          font-size:16px; height:50px; line-height:50px; padding:0 50px 0 20px; 
          .label { top:1px; }
          .arrow_button_small { top:19px; right:10px; }
        }
      }
    }

    &:hover {
      .post_list {
        translate: 0 0;
      }
    }
    @media(hover: none) {
      .post_list {
        translate: 0 0;
      }
    }
  }
}

/* 3つの特徴 */
.hrf-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  
  @media (width <= 800px){
    grid-template-columns: repeat(1, 1fr);
    gap: 3px;
  }

  .hrf-feature-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;

    .title {
      display: flex;
      align-items: center;
    }
  }
}
.hrf-feature-card {
  .title {
    margin: 0;
    padding: 15px 30px;
    background-color: var(--hrf-color-red);
    font-size: 26px;
    color: #fff;
    @media (width <= 800px){
      padding: 15px 20px;
      font-size: 18px;
    }
  }
  .body {
    padding: 15px 30px;
    background-color: var(--hrf-color-beige);
    line-height: calc(30/16);
    @media (width <= 800px){
      padding: 15px 20px;
    }
    * {
      line-height: inherit;
    }
  }
}

/* カテゴリーバナー */
.hrf-info-banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin-block-start: 64px!important;
  min-width: 0;
  @media (width <= 1100px){
    gap: 24px;
  }
  @media (width <= 800px){
    grid-template-columns: repeat(2, 1fr);
    margin-block-start: 40px!important;
    gap: 3px;
  }

  li {
    a {
      transition: opacity 0.3s ease;
      &:hover {
        opacity: 0.8;
      }
    }
    img {
      max-width: 100%;
      vertical-align: top;
    }
  }
}

/* メニュー */
.hrf-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  
  @media (width <= 800px){
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }
  .hrf-menu-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
  }
}

.hrf-menu-card {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  color: #000;

  &.--beige {
    background-color: var(--hrf-color-beige);
  }

  .headline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 24px 30px;
    @media (width <= 800px) {
      gap: 3px;
      padding: 15px 20px;
    }

    .main {
      font-family: var(--tcd-font-type2);
      font-size: 44px;
      font-weight: 900;
      line-height: calc(50/44);
      @media (width <= 1100px){
        /* font-size: 26px; */
      }
      @media (width <= 800px){
        font-size: 18px;
      }
    }
    .sub {
      font-size: 18px;
      font-weight: 500;
      @media (width <= 800px){
        font-size: 12px;
      }
    }
  }

  .image {
    img {
      vertical-align: top;
    }
  }

  .post_list {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    border-top: 1px solid #fff;
    translate: 0 100%;
    transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;

    a {
      font-size:18px;
      display:block;
      color:#fff;
      height:60px;
      line-height:60px;
      padding:0 70px 0 30px;
      position:relative;
      &::before { content:''; display:block; width:100%; height:1px; position:absolute; left:0; top:-1px; background:rgba(255,255,255,0.3); z-index:2; }
      &::after { content:''; display:block; width:100%; height:100%; position:absolute; left:0; bottom:0; background:#FF2700; z-index:1; transition: background-color 0.25s ease; }

      &:hover { color: #fff; }
      &:hover:before { display:none; }
      &:hover:after {
        z-index:2;
        background-color: #e12200;
      }

      &:first-of-type::before { display:none; }

      .label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; visibility:visible; display:block; z-index:20; position:relative; }
      .arrow_button_small { top:25px; right:10px; z-index:20; }
    }
    @media (width <= 1100px){
      a {
        font-size:16px; height:50px; line-height:50px; padding:0 50px 0 20px; 
        .label { top:1px; }
        .arrow_button_small { top:19px; right:10px; }
      }
    }
  }

  &:hover {
    .post_list {
      translate: 0 0;
    }
  }
  @media(hover: none) {
    padding-bottom: 50px;
    .post_list {
      translate: 0 0;
    }
  }

}


.hrf-photo-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 48px;
  @media (width <= 1000px){
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 40px;
  }
  @media (width <= 800px){
    gap: 30px 20px;
  }
  @media (width <= 600px){
    grid-template-columns: 1fr;
    gap: 30px;
  }
  

  .image {
    display: block;
    border-radius: 3px;
    overflow: hidden;
    margin-block-end: 30px;
    @media (width <= 800px){
      margin-block-end: 20px;
    }

    img {
      aspect-ratio: 77/52;
      width: 100%;
      object-fit: cover;
      transition: scale 0.5s ease;
    }
  }
  a.image {
    &:hover {
      img {
        scale: 1.1;
      }
    }
  }

  .title {
    margin-block: 0 20px;
    font-size: 20px;
    @media (width <= 800px){
      margin-block: 0 10px;
      font-size: 16px;
    }
  }

  .desc {
    line-height: calc(36/16);
    @media (width <= 800px){
      font-size: 14px;
    }
  }
}



/*********************************************/
/* Page style */
/*********************************************/
body.home {

  .cb_free_space {
    .design_header {
      .post_content {
        padding-inline-end: 0;
      }
    }
  }

  .cb_free_space,
  .cb_design_content {
    &:nth-child(even) {
      background: var(--hrf-gadient-01);
      color: #fff;
  
      .design_header {
        .large_headline {
        }
        .sub_title {
          color: var(--hrf-color-yellow);
        }
      }
  
      .design_arrow_button {
        a {
          .label {
            color: #fff!important;
          }
          &:hover {
            .label {
              color: var(--hrf-color-beige)!important;
            }
          }
        }
      }
      
      .arrow_button {
        background-color: var(--hrf-color-yellow);
        &::before,
        &::after {
          color: var(--hrf-color-red);
        }
  
      }
    }
    
  }
}

#related_post {
  background: var(--hrf-color-beige);
}



@media(hover: none) {
  /* #footer_banner a .title { color:#fff; }
  #footer_banner a .sub_title { color:#fff; }
  #footer_banner a .arrow_button { background:#fff; }
  #footer_banner a .arrow_button:before,
  #footer_banner a .arrow_button:after { color:orange; }
  #footer_banner a:after { opacity:0; }
  #footer_banner.banner_num2 a:nth-child(2):before { display:none; }
  #footer_banner.banner_num3 a:nth-child(1) + a:nth-child(2):before { display:none; }
  #footer_banner.banner_num3 a:nth-child(2):before { display:none; }
  #footer_banner.banner_num3 a:nth-child(2) + a:nth-child(3):before { display:none; }
  #footer_banner.banner_num3 a:nth-child(3):before { display:none; } */
}