@charset "UTF-8";

/*!
Theme Name: Gifted Style
Description: ギフテッドスタイルのオリジナルテーマ。Cocoonを親テーマとして制作している。
Theme URI: https://gifted.dialogs.jp/
Author: Hashikure@Polyphony
Author URI: https://dialogs.jp/
Template:   cocoon-master
Version:    1.0.0
*/


/* ----- 全体の設定 ----- */
:root {
  /* --giftedstyle-line-footer-haight:50px; */
  --giftedstyle-line-footer-haight: max( calc( 45rem / 16 ), 45px );

  --giftedstyle-recaptcha-haight:74px;
  --giftedstyle-gototop-haight:40px;

}
/* スクリーンリーダー用のテキスト */
.sr-only {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* 特定の画面幅で改行するbr */
@media (1024px <= width) {
  br.tab-br, br.sp-br { display: none;}
  br.pc-br { display: block;}
}
@media (520px <= width < 1024px) {
  br.pc-br, br.sp-br { display: none;}
  br.tab-br {display: block;}
}
@media (width <= 520px) {
  br.pc-br, br.tab-br { display: none;}
  br.sp-br { display: block;}
}

/* clearfix用クラスは使わない */
.cf::after {
  content: none;
}

/* addressは斜体にしない */
address {
  font-style: normal;
}

/* 記事タイトル */
h1.entry-title {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-style: normal;
  font-weight: 700;
  transform:rotate(0.03deg);
}

/* 記事内 */
.article {
  & :where(h2, h3, h4, h5, h6) {
    & + p {
      margin-bottom: 1em;
    }
    & +ul, &+ol, &+figure {
      margin-bottom: 1.25em;
    }
  }
  /* & h2, & h3, & h4, & h5, & h6 {
    &:has(+p) {
      margin-bottom: 1em;
    }
    &:has(+ul, +ol, +figure) {
      margin-bottom: 1.25em;
    }
  } */
  /* 見出し02 */
  & h2 {
    background: none;
    color: #000;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-style: normal;
    font-weight: 700;
    padding: 0;
    transform:rotate(0.03deg);
    &:has(+h3) {
      margin-bottom: 1.25em;
    }
    /* ロゴアイコン付き見出し */
    &.with-icon01,
    &.with-icon02,
    &.with-icon03 {
      width: fit-content;
      margin-inline: auto;
      position: relative;
      z-index: 0;
      /* アイコン */
      &::before {
        content: "";
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
      }
      /* テキスト下線部分 */
      &::after {
        content: "";
        border-radius: 5px;
        display: block;
        width: calc(100% - 50px);
        height: 10px;
        position: absolute;
        bottom: 4px;
        left: 56px;
        z-index: -1;
      }
    }
    /* アイコン01・03（ロゴ右上） */
    &.with-icon01,
    &.with-icon03 {
      &::before {
        background-image: url(assets/imgs/icon01.svg);
        width: 52px;
        height: 33px;
        margin-right: 10px;
      }
      &::after {
        background-color: #fed15f;
      }
    }
    /* アイコン02（ロゴ左下・水色下線） */
    &.with-icon02 {
      &::before {
        background-image: url(assets/imgs/icon02.svg);
        width: 42px;
        height: 39px;
        margin-right: 20px;
      }
      &::after {
        background-color: #74c3d6;
      }
    }
    /* アイコン03（白下線） */
    &.with-icon03 {
      &::after {
        background-color: #fff;
      }
    }
    /* 前後に斜線 */
    &.slash {
      position: relative;
      width: fit-content;
      margin: 0 auto;
      padding: 0 2rem;
      &::before, &::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 2px;
        height: 2rem;
        background: rgb(255 255 255);
      }
      &::before {
        transform: rotate(-30deg);
        left: 0;
      }
      &::after {
        transform: rotate(30deg);
        right: 0;
      }
    }
  }

  /* 見出し3 */
  & h3 {
    &:has(+h4) {
      margin-bottom: 1.25em;
    }

    /* 背景色＋白抜き */
    &.is-bg-color {
      background-color: #65abbe;
      border: none;
      color: #fff;
      font-size: 1.5rem;
      line-height: 1;
      padding-block: 6px;
      text-align: center;
    }
  }

  /* 見出し4 */
  & h4 {
    &:has(+h5) {
      margin-bottom: 1.25em;
    }
  }

  /* 見出し5 */
  & h5 {
    &:has(+h6) {
      margin-bottom: 1.25em;
    }
  }

  /* ボーダーなし */
  & .no-border {
    border: none;
    padding: 0;
  }

  /* 行頭に四つ菱 */
  & .diamond-x {
    border: none;
    padding: 0;
    &::before {
      content: "\2756";
      margin-right: 8px;
    }
  }

  /* 下線 */
  & .u_line {
    border: none;
    border-bottom: 2px dotted #65abbe;
    padding-inline: 8px;
  }
}

/* ----- ヘッダー ----- */

.header-container a:hover {
  opacity: .75;
}

.fixed-header {
  box-shadow: 0 1px 5px rgb(0 0 0 / .25);
}

.navi .item-label {
  font-weight: bold;
}

.navi-in {
  display: flex;
  justify-content: flex-end;

  /* ヘッダーメニュー */
  & .menu-header {
    width: 400px;
    & > li {
      width: 100px;
    }
    & .item-label::before {
      content: "＞";
    }
  }

  /* ヘッダーメニュー右 SNS・お問い合わせボタン */
  & .header-right-menu {
    width: 300px;
    justify-content: space-between;
    align-items: center;
    margin-inline-start: 50px;

    /* & li {
      height: 37px;
    } */
    & a {
      display: block;
      width: auto;
      height: auto;
    }
    & img {
      display: block;
    }
    & .sns-x,
    & .sns-yt {
      height: 20px;
    }
    & .sns-x {
      width: 20px;
    }
    & .sns-yt {
      width: 90px;
    }
    & .head-contact-btn {
      width: 140px;
      height: 30px;
    }
  }
}

/* ----- メインコンテンツ ----- */
.main {
  z-index: 1;
}

/* ----- ページトップへ戻るボタン ----- */
.go-to-top-button {
  border-radius: 50%;
  opacity: 1;
  transition: opacity .3s ease-in-out;
  &:hover {
    opacity: .75;
  }
}

/* ----- フッター ----- */
.footer {
  min-height: 154px;
  margin-top: 0;
  /* アドレス */
  & address {
    font-weight: bold;
    grid-column: 2/3;
    grid-row: 2/3;
  }
}

/* フッターボトム */
.footer-bottom {
  display: grid;
  grid-template-columns: 265px 1fr 220px;
  grid-template-rows: 37px 48px;
  padding: 0;
  position: initial;
  &.fnm-text-width .menu-footer li a {
    padding: 0;
  }
}

/* フッターロゴ */
.footer-bottom-logo {
  display: flex;
  align-items: center;
  grid-column: 1/2;
  grid-row: 1/3;
  float: none;
  line-height: 1;
  position: initial;
  margin-right: 48px;
  & a {
    padding: 0;
  }
  & .footer-site-logo-image {
    display: block;
    width: 265px;
    height: auto;
  }
}

/* フッターナビ */
.navi-footer {
  grid-column: 2/3;
  grid-row: 1/2;
}
.navi-footer-in {
  & a {
    font-size: 1rem;
    font-weight: bold;
    &::before {
      content: "▶";
      display: inline-block;
      margin-right: 4px;
    }
  }
  & > .menu-footer{
    gap: 20px;
    justify-content: start;
    & li {
      border-left: none;
      &:last-child {
        border-right: none;
      }
    }
  }
}

/* お問い合わせボタン */
.foot-contact-btn {
  display: block;
  grid-column: 3/4;
  grid-row: 1/2;
  justify-self: end;
  &:hover img {
    opacity: .75;
  }
  & img {
    display: block;
  }
}

/* コピーライト */
.copyright {
  font-size: 0.75rem;
  font-weight: bold;
  grid-column: 3/4;
  grid-row: 2/3;
  text-align: right;
  justify-self: end;
}

/* ----- 追従CTAボタン ----- */
.widget-main-scroll{
  display: flex;
  justify-content: end;
  align-items: end;
  margin-bottom: 18px !important;
}
.main-scroll {
  pointer-events: none; /* 親要素にはマウスイベントを無効にする */

  margin: 0;
  position: fixed;
  top: initial;
  right: 12px;
  bottom: 128px;
  /* width: 320px; */
  /* opacity: 0;
  visibility: hidden; */
  transition: opacity .75s, visibility .75s, bottom .3s;
  z-index: 1;
  & > .widget_block {
    position: relative;
    z-index: inherit;
    &:only-child {
      margin: 0;
    }
  }
  /* ページ下部までスクロールした際にボタンを移動 */
  &.is-avoided {
    bottom: 186px;
  }
}

.side-buttons {
  pointer-events: auto; /* 子要素では再度有効にする */

  opacity: 0;
  visibility: hidden;
  transition: opacity .75s, visibility .75s, bottom .3s;

  position: inherit;
  z-index: inherit;
  & > a {
    align-items: center;
    border-radius: 16px;
    box-shadow: 0 4px 0 rgb(203 203 203 / .5);
    color: #fff;
    display: flex;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    height: 60px;
    padding-inline: 1rem;
    text-decoration: none;
    transform:rotate(0.03deg);
    width: 100%;
    &::before {
      content: "";
      background-color: rgb(0 0 0 / .1);
      background-image: url(assets/imgs/floating-btn-arrow.svg);
      background-position: 11px center;
      background-repeat: no-repeat;
      border-radius: 50%;
      display: inline-block;
      height: 38px;
      line-height: 1;
      margin-inline-end: 1rem;
      width: 40px;
    }
    &:not(:first-child) {
      margin-top: 18px;
    }
    &:hover {
      background-image: none;
    }
  }
  & span {
    font-size: 1.75rem;
    line-height: 1;
  }
  & .small {
    font-size: 0.8em;
  }
  /* W1024px以下でのみ表示するラベル */
  & .mini-label {
    display: none;
  }
}

/* お仕事ご依頼ページ ボタン */
.btn-work {
  background-image: linear-gradient(rgb(209 236 242 / .8) 0%, 7%, rgb(29 153 176 / .75) 8%);
  background-color: rgb(29 153 176 / .6);
  border: 2px solid #1d99b0;
  &:hover {
    background-image: none;
    background-color: #0b6879;
    &::before {
      border-top-color: rgb(12 95 128);
      border-bottom-color: rgb(0 118 187 / .7);
    }
  }
  &::before {
    border-top: 2px solid rgb(0 152 204 / 1);
    border-bottom: 2px solid rgb(113 200 240 / .7);
  }
}

/* サービス紹介ページ ボタン */
.btn-service {
  background-image: linear-gradient(#fcf8cd 0%, 7%, #ee9d32 8%);
  background-color: rgb(238 157 50 / .6);
  border: 2px solid #ee9d32;
  &:hover {
    background-image: none;
    background-color: #b16c12;
    &::before {
      border-top-color: rgb(128 89 12);
      border-bottom-color: rgb(187 150 0 / .7);
    }
  }
  &::before {
    border-top: 2px solid rgb(202 151 49);
    border-bottom: 2px solid rgb(255 204 5 / .7);
  }
}

/* フェードイン・アウトアニメーション用クラス */
.is-active {
  opacity: 1;
  visibility: visible;
}


/* -----
モバイル用スライドメニュー
----- */
.menu-drawer {
  margin-top: 16px;
  & a {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 8px 16px;
    transition: background-color .3s ease-in-out;
    &:hover {
      background-color: #e4e6e8;
    }
  }
}

& .mob-sns-x,
& .mob-sns-yt {
  & a {
    font-size: 1rem;
    font-weight: normal;
    display: flex;
    gap: 12px;
    &::before {
      display: inline-block;
    }
  }
}

& .mob-sns-x a::before {
  content: url(assets/imgs/sns-icon-x.svg);
}
& .mob-sns-yt a::before {
  content: url(assets/imgs/sns-icon-yt.svg);
}


/* -----
Simple Pageテンプレートを利用している場合のレイアウト調整
----- */
.page-template-temp-simple {
  & .wrap {
    max-width: 1200px;
  }
  & .content {
    margin-block: 0;
  }
  & .main {
    border: none;
    border-radius: 0;
    padding: 0;
    & .article {
      margin-bottom: 0;
    }
  }
  & .entry-content {
    margin: 0 auto;
  }
  & .article-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    /* & h1 {
      font-family: "M PLUS Rounded 1c", sans-serif;
      font-style: normal;
      font-weight: 700;
      transform:rotate(0.03deg);
    } */
  }
  & .entry-title {
    align-items: center;
    display: flex;
    font-size: 2.1875rem;
    text-align: center;
    line-height: 1;
    &::before {
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      display: inline-block;
      flex: 1 1 auto;
      line-height: 1;
      margin-right: 16px;
      vertical-align: middle;
    }
  }
  & .title-text {
    flex: 0 1 auto;
  }
}


/* -----
Custom Post List With Category
カテゴリーラベル・サムネイル付き投稿一覧ショートコード用CSS
-----*/
.cpl-w-cat {
  list-style: none;
  max-width: 980px;
  margin-inline: auto;
  padding: 0;
  position: relative;
  width: 100%;
  & .post-item {
    margin: 0;
    position: inherit;
    width: 100%;
    &:not(:first-child) {
      margin-top: 72px;
    }
    /* & article {
      position: inherit;
    } */
    & time {
      display: block;
      font-size: 1rem;
      line-height: 1;
      margin-bottom: 12px;
    }
  }
  & .post-link {
    align-items: center;
    color: #000;
    display: flex;
    gap: 30px;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
    &:hover {
      background-color: rgb(101 171 190 /.05);
    }
    &::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  & .post-thumbnail {
    width: 100%;
    max-width: 190px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  & .post-title {
    font-size: 1.25rem;
    border: none;
    margin-bottom: 1rem;
    padding: 0;
  }
  & .post-excerpt {
    font-size: 1rem;
  }
  & .cat-label {
    border: none;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    padding: 5px 10px;
    left: inherit;
    right: 0;
    top: 0;
    z-index: 1;
  }
}
.no-post {
  background-color: #eee;
  border-radius: 8px;
  display: block;
  padding: 8px;
  text-align: center;
}

/* お問い合わせページ以外でreCAPTCHAバッジを非表示 */
body:not(.page-id-47) .grecaptcha-badge {
  visibility: hidden;
}
/* -----
レスポンシブデザイン用のメディアクエリ
-----*/

/* W1900px以下（追従CTAボタン用） */
@media screen and (width <= 1900px) {
  .main-scroll {
    .side-buttons{
      width: 56px;
    }
  }
  .side-buttons {
    & > a {
      height: auto;
      writing-mode: vertical-rl;
      &::before {
        background-position-x: 9px;
        background-size: 50%;
        height: 28px;
        margin-inline-end: 0.5rem;
        /* padding: 4px 8px; */
        width: 32px;
      }
    }
    & span {
      font-size: 1.25rem;
    }
  }
  .btn-work {
    background-image: linear-gradient(rgb(209 236 242 / .8) 0%, 1.5%, rgb(29 153 175 / .75) 1.6%);
  }
  .btn-service {
    background-image: linear-gradient(rgb(252 248 205 / .8) 0%, 1.5%, rgb(238 156 47 / .75) 1.6%);
  }
}

/* H880px未満（追従CTAボタン用） */
@media (height < 880px) {
  .main-scroll {
    bottom: 64px;
  }
  .side-buttons {
    & > a {
      border-radius: 12px;
    }
    & span {
      font-size: 1.5rem;
    }
  }
}

/* W1300px以下（フッター用） */
@media (width < 1300px) {
  .footer-in {
    width: auto;
  }
}

/* W1240px以下（ヘッダー用） */
@media (width < 1240px) {
  .navi-in .header-right-menu {
    justify-content: space-around;
  }
}

/* W1160px以下（フッター用） */
@media (width < 1160px) {
  .footer-bottom {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr;
    row-gap: 22px;
    /* grid-template-rows: 1fr 1fr; */
  }
  .footer-bottom-logo {
    margin-right: 24px;
  }
  .footer-bottom-logo-image {
    width: 100%;
  }
  .navi-footer {
    margin-right: 24px;
  }
}

/* H768px未満もしくはW1024以下（追従CTAボタン用） */
@media (height < 768px), (width <= 1024px) {
  .main-scroll {
    /* display: none; */
    .side-buttons{
      width: 72px;
    }
    bottom: 64px;
  }
  .side-buttons {
    & > a {
      /* border-radius: 12px 0 0 12px; */
      height: 72px;
      justify-content: center;
      padding: 4px;
      text-align: center;
      writing-mode: initial;
      &::before {
        content: none;
      }
    }
    & span {
      display: none;
      /* font-size: 1rem;
      & .small {
        font-size: 1em;
      } */
    }
    & .mini-label {
      display: block;
      font-size: 1rem;
      line-height: 1.2;
      & .small {
        display: block;
        font-size: 0.9em;
      }
    }
  }
}

/* W1024px未満 */
@media (width < 1024px) {
  .header-container-in.hlt-top-menu {
    padding: 16px 24px;
  }
  .navi-in {
    flex-direction: column;
    & .header-right-menu {
      align-items: center;
      justify-content: center;
      margin-inline: 0;
      margin-top: 8px;
      width: 100%;
      gap: 24px;
      & .head-contact-btn {
        order: 0;
      }
      & .sns-x {
        order: 1;
      }
      & .sns-yt {
        order: 2;
      }
    }
    & .menu-mobile {
      margin-top: 8px;
    }
  }
  #navi .navi-in > .menu-mobile li {
    height: 32px;
    width: 25%;
  }

  /* フッター */
  .footer {
    height: auto;
    & address {
      grid-column: 2/3;
      grid-row: 2/3;
    }
  }
  .foot-contact-btn {
    grid-column: 1/2;
    grid-row: 2/3;
    align-self: center;
    justify-self: center;
  }
  .footer-bottom {
    gap: 0 24px;
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(3, auto);
    margin: 16px auto 0;
    width: calc(100% - 48px);
  }
  .footer-bottom-logo {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .navi-footer {
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: center;
  }
  .navi-footer-in > .menu-footer {
    gap: 8px;
  }
  .copyright {
    grid-column: 1/3;
    grid-row: 3/4;
    justify-self: start;
    text-align: center;
  }
}

/* W834px以下 */
@media (width <= 834px){
  .article p {
    font-size: 1rem;
  }
  .article h2 {
    font-size: 1.5rem;
  }
  /* .article ul {
    padding: 0;
  } */
  /* ----- 追従CTAボタン ----- */
  .main-scroll.is-avoided {
    /* W834以下では動かさない */
    bottom: 64px;
  }
  /* フッター */
  .footer-bottom {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
  }
  .footer-bottom-logo {
    display: block;
    margin: 0;
    order: 0;
    width: 100%;
  }
  .logo-footer {
    margin: 0;
  }
  .footer {
    & address {
      font-size: 1rem;
      margin-top: 32px;
      order: 3;
      text-align: center;
    }
  }
  .foot-contact-btn {
    margin-top: 24px;
    order: 1;
  }
  .navi-footer {
    margin-top: 32px;
    margin-right: 0;
    order: 2;
  }
  .navi-footer-in > .menu-footer {
    display: block;
    & li.menu-item {
      width: 220px;
      text-align: left;
      margin-inline: auto;
      & a {
        font-size: 1rem;
      }
    }
  }
  .copyright {
    margin-block: 32px;
    order: 4;
  }
  /* Simple Page テンプレート */
  .page-template-temp-simple {
    & .article-header {
      height: 154px;
    }
  }
  /* Custom Post List With Category */
  .cpl-w-cat {
    & .post-link {
      padding: 16px;
    }
  }
}

/* W520px以下 */
@media (width <= 520px) {
  .wrap {
    max-width: 100%;
  }
  /* Custom Post List With Category */
  .cpl-w-cat {
    max-width: initial;
    & .post-item:not(:first-child) {
      margin-top: 40px;
    }
    & .post-link {
      flex-direction: column;
      gap: 24px;
      padding: 0;
    }
    & .post-thumbnail {
      max-width: initial;
      aspect-ratio: 16 / 9;
    }
    & .cat-label {
      right: 8px;
      top: 8px;
    }
  }
}

@media (width <= 480px) {
  .page-template-temp-simple .entry-title::before {
    width: 48px;
    height: 48px;
  }
}

/* MARK: ラインへのリンク */

.line-banner{
  /* --giftedstyle-line-sidebar-haight:56px; */
  --giftedstyle-line-sidebar-haight: max( calc( 56rem / 16 ) , 56px );

  background-color: white;
  overflow-y:hidden ;
  border: 2px #06c755 solid;
  display: block;

  border-radius: 18px;

  /* main-scrollの子要素ではointer-eventsを再度有効にする */
  pointer-events: auto; 

  transition: all 0.3s;
  
  /* 最低でも16pxは確保 */
  font-size: max( 1.25rem , 16px );

  a{

    text-decoration: none;

    /* focus時のアウトラインは親要素に設定している */
    &:focus{
      outline: none;
    }

    .floating_line{
      
      /* 要素横並び */
      display: flex;
      gap: 0.5em;

      .floating_line-text{

        /* テキストを要素の中央に */
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left:1em;
        width: 100%;
        align-self: center;
        width: 100%;
        height: var(--giftedstyle-line-sidebar-haight);

        font-weight: 600;
        line-height: 1.55;
        
        /* 色 */
        color: #06c755;
        span{
          color: black;
        }
      }
      .floating_line-icon{
        background-color: white;

        align-self: center;
        justify-content: center;
         img{

          max-width: var(--giftedstyle-line-sidebar-haight);
          max-height: var(--giftedstyle-line-sidebar-haight);
          height: var(--giftedstyle-line-sidebar-haight);
          width: var(--giftedstyle-line-sidebar-haight);
          border-style: none;
          &:hover{
            filter: none;
          }
        }
      }
    }
  }

  /* 子要素がfocusされた場合borderを付ける */
  &:focus-within{
    /* border: 2px orange solid; */
    border: 2px black solid;
  }

  /* hover */
  @media (hover: hover) {
    &:hover{

      background-color: #06c755;

      a{
        .floating_line{
          .floating_line-text{
            color: white;
            span{
              color: white;
            }
          }
          .floating_line-icon{
              background-color: #06c755;
          }
        }
      }
    }
  }

  /* タッチデバイスではhoverではなくactive */
  @media (hover: none) {
    &:active{

      background-color: #06c755;

      a{
        .floating_line{

          .floating_line-text{
            color: white;
            span{
              color: white;
            }
          }

          .floating_line-icon{
              background-color: #06c755;
          }
        }
      }
    }
  }
}
@media (height < 768px), (width <= 1024px) {
  .line-banner{
    a{
      .floating_line{
        .floating_line-icon{
          img{
              width: 68px;
              max-width: 68px;
              height: 68px;
              max-height: 68px;
              
              /* 
              width: max(68px,var(--giftedstyle-line-sidebar-haight));
              max-width: max(68px,var(--giftedstyle-line-sidebar-haight));
              height: max(68px,var(--giftedstyle-line-sidebar-haight));
              max-height: max(68px,var(--giftedstyle-line-sidebar-haight)); 
              */
          }
        }
      }
    }
  }
}
@media (768px < width) and  (width <= 1024px) {
 
  .line-banner{
    --giftedstyle-line-sidebar-haight:62px;
    width: auto;
    border-radius: 20px;
    background-color: #06c755;
    
    a{
     
      .floating_line{

        /* 横幅が小さくなるとLINEアイコンだけ表示する */
        .floating_line-text{
          display: none;
        }

        .floating_line-icon{

          img{

            width: 68px;
            max-width: 68px;
            height: 68px;
            max-height: 68px;

            /* hover */
            @media (hover: hover) {
              &:hover {
                filter: brightness(0.8);
              }
            }

            /* タッチデバイスではhoverではなくactive */
            @media (hover: none) {
              &:active {
                filter: brightness(0.8);
              }
            }

          }
        }
      }
    }
  }
}


/* MARK: ラインへのリンク(フッター) */

.line-footer{

  display: none;
  
  background-color: white;
  overflow-y:hidden ;
  border: 3px #06c755 solid;

  /* 位置調整 */
  position: sticky;
  bottom: 0;
  z-index: 1000;

  transition: all 0.3s;
  font-size: max( 1rem , 16px );

  /* focus時のアウトライン */
  &:focus-within{
     border: 3px black solid;
  }
  

  a{
    /* focus時のアウトラインは親要素に設定している */
    &:focus{
      outline: none;
    }
     text-decoration: none;
    .floating_line{
      display: flex;
      gap: 0.5em;

      .floating_line-text{

        /* 要素がはみ出しても上の行が見え続けるように */
        align-self:flex-start;
        padding-left:1em;
        height: var(--giftedstyle-line-footer-haight);
        width: 100%;

        /* 文字 */
        line-height: 1.55;
        font-weight: 600;
        
        /* 色 */
        color: #06c755; 
        span{
          color: black;
        }
      }
      .floating_line-icon{
        background-color: #06c755;

        align-self: self-start;

        img{
          /* サイズ調整 */
          max-width: var(--giftedstyle-line-footer-haight);
          max-height: var(--giftedstyle-line-footer-haight);
          height: var(--giftedstyle-line-footer-haight);
          width: var(--giftedstyle-line-footer-haight);
          border-style: none;
        }
      }
    }
  }

  /* hover 文字色と背景色を反転 */
  @media (hover: hover) {
    &:hover{
      background-color: #06c755;
      a{
        .floating_line{
          .floating_line-text{
            color: white;
            span{
              color: white;
            }
          }
          .floating_line-icon{
              background-color: #06c755;
          }
        }
      }
    }
  }
  
  /* タッチデバイスではhoverではなくactive */
  @media (hover: none) {
    &:active{
      background-color: #06c755;
      a{
        .floating_line{
          .floating_line-text{
            color: white;
            span{
              color: white;
            }
          }
          .floating_line-icon{
              background-color: #06c755;
          }
        }
      }
    }
  }
}

@media (width <= 768px) {
  .line-banner{
    display: none;
  }
  .line-footer{
    display: block;
  }
  
  /* lineリンクのフッターにかぶらないように位置を調整 */
  .main-scroll{
    bottom: calc( 64px + var(--giftedstyle-gototop-haight) );
  }

  .main-scroll.is-avoided{
    bottom: calc( 64px + var(--giftedstyle-gototop-haight) );
  }
  .go-to-top {
    /* bottom: 10px; */
    bottom: calc(var(--giftedstyle-line-footer-haight) + 10px);
  }
}