@charset "utf-8";

html { scroll-behavior: smooth; }
#globalMain, #globalContents{ overflow: visible; }
#globalWrapper { box-sizing: border-box; }


/* Variables & Setup -------------------- */
:root {
  scroll-padding: 80px;
}

.hisako-container-wrapper {
  container-type: inline-size;
  container-name: hisako-container-wrapper;
}

.hisako-container * { box-sizing: border-box; }

:root .hisako-container {
  --color-black: #000;
  --color-nearblack: #111;
  --color-gray: #666;
  --color-white: #fff;
  --color-link: #795284;
  --text-block-spacing: 1.5rem; 
  --image-block-spacing: 2rem; 
  --hover-opacity: 0.7;
}

@container hisako-container-wrapper (max-width: 600px) {
  :root .article-content {
    --text-block-spacing: 1rem; 
    --image-block-spacing: 1.5rem; 
  }
}

/* common -------------------- */ 
.hisako-container {
  max-width: 1120px;
  margin-inline: auto;
  padding-bottom: 2rem;
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.03em;

  & article + article{
    margin-top: 3rem;
  } 

  & figure{ 
    text-align: center;
  }

  & img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  & a{
    color: inherit;
    text-decoration: none;
  }

  & span{
    color: inherit;
    font-weight: inherit;
  }

  @container hisako-container-wrapper (max-width: 768px) {
    font-size: 14px;
  }
}

#wrapper .hisako-container{
  & .inner{
    padding-inline: 1.5rem;
  }
}

/* element -------------------- */
/* 文字リンク */
.hisako-container .el-tlink{
  display: inline;
  padding-inline: .3em;
  border-radius: .25em;
  color: var(--color-link);
  font-weight: bold;

  &:hover{
    background-color: var(--color-link);
    color: var(--color-white);
  }
}

/* 文章 */
.hisako-container .paragraph{
  line-height: 1.7;
  /* text-align: justify; */

  & + .paragraph{
    margin-top: .5rem;
  }
}

/* Section-by-section -------------------- */
/* 【FV】 -------------------- */
.hisako-container .fv-content{
  padding-bottom: var(--text-block-spacing);

  & .page-title{
    margin-block: var(--text-block-spacing);
    padding-bottom: .25rem;
    border-bottom: 3px solid var(--color-black);
    font-size: 200%;
    font-weight: bold;
    @container hisako-container-wrapper (max-width: 600px) {
      font-size: 150%;
    }
  }
}

/* 【動画】 -------------------- */
.hisako-container .article-movie{
  & .movie-block{
    padding-block: var(--text-block-spacing);
    width: 80%;
    min-width: 280px;
    margin-inline: auto;
  }
}

/* 【インタビュー部分（メイン）】 -------------------- */
.hisako-container .article-content{
  & section + section{
    margin-top: 3rem;
  }
  
  /* 見出し */
  & .heading{
    background-color: var(--color-nearblack);
    color: var(--color-white);
    padding-block: 1rem;
    padding-inline: 1rem;
    font-size: 125%;
    font-weight: bold;
    &.hisako{
      background-color: var(--color-gray);
    }
  }

  /* テキストブロック */
  & .text-block{
    margin-block: var(--text-block-spacing);
  }

  /* 画像 */
  & .image-block{
    max-width: 800px;
    margin-block: var(--image-block-spacing);
    margin-inline: auto;
  }

  /* 商品リンクブロック */
  & .product-link-box {
    > a{
      display: block;
      margin-block: var(--text-block-spacing);

      &:nth-child(1){
        padding-block: .75rem;
        padding-inline: 1rem;
        border: 1px solid var(--color-black);
        color: var(--color-link);
        font-size: 125%;
        & > p{font-weight: bold;}
        
        @container hisako-container-wrapper (max-width: 600px) {
          font-size: 112%;          
        }
      }

      &:nth-child(2){
        width: fit-content;
        margin-inline: auto;
      }

      &:hover{
        text-decoration: underline;
        opacity: var(--hover-opacity);
      }
    }
  }

  /* キャッチコピー */
  .catch-copy{
    font-size: 150%;
    font-weight: bold;
    @container hisako-container-wrapper (max-width: 600px) {
      font-size: 112%;
    }
  }

  /* interview */
  & .qa-block{
    line-height: 1.7;

    & > dt,
    & > dd{
      margin-block: var(--text-block-spacing);
    }

    & > dt{
      position: relative;
      padding-left: 2rem;
      color: var(--color-gray);
      font-size: 125%;
      font-weight: bold;
      @container hisako-container-wrapper (max-width: 600px) {
        font-size: 112%;
      }

      &::before{
        content: "";
        width: 1.5rem;
        height: 2px;
        background-color: var(--color-gray);
        position: absolute;
        left: 0;
        margin-top: .7em;
        margin-right: .5rem;
      }
    }
  }
}

/* 【プロフィール】 -------------------- */
.hisako-container .article-profile{
  & .profile-box{
    padding: 1.5rem;
    border: 1px solid var(--color-gray);
  }

  & .text-block + .text-block{
    margin-top: var(--text-block-spacing);
  }

  & .profile-name{
    font-size: 125%;
    & > *{
      font-weight: bold;
    }
    & h2{
      &::before{content: "＜";}
      &::after{content: "＞";}
    }
  }

  & .external-link{
    display: block;
    width: fit-content;
    margin-block: .5rem;
    font-weight: bold;
    
    &::after{
      content: "";
      display: inline-block;
      width: 1.2em;
      height: 1.2em;
      margin-left: .25rem;
      margin-bottom: .25rem;
      background: url(../img/ico-open_new.png) center / contain no-repeat;
      vertical-align: middle;
    }

    &:hover{
      text-decoration: underline;
      opacity: var(--hover-opacity);
    }
  }
}