/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　共通
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
html {
  overflow-x: hidden;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body{
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  text-align: initial;
}
.anc{
  padding-top: 72px;
  margin-top: -72px;
}
.inner{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
a, a:visited {
  color: #333333;
  transition: all 0.2s ease;
}
a:hover, a:focus, a:active{
  text-decoration: none;
  color: #333;
}
a img{
  transition: all 0.2s ease;
}
a:hover img{
  opacity: 1;
}
img{
  width: 100%;
}
.tag{
  padding-top: 12px;
  margin-bottom: 12px;
  .tag__label{
    display: inline-flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    background: #999;
    p{
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.56px;
    }
  }
  .tag__label--web{
    background: #356895;
  }
  .tag__label--order{
    background: #6E5089;
  }
  .tag__label--web2-pc{
    background: #DC4A66;
  }
  .tag__label--web2-sp{
    background: #2C6645;
  }
  .tag__label--premium{
    background: #9C720D;
  }
}
.trade-navi__btn--back{
  margin-top: 60px;
  display: flex;
  justify-content: center;
  a{
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 24px 64px 24px 52px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.72px;
    border-radius: 8px;
    border: 1px solid var(--gray_02, #D9D9D9);
    background: var(--bg_gray, #F6F6F6);
  }
  a::before{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    flex: 0 0 10px;
    background: url('/trade-navi/images/arrow_l.webp') center / contain no-repeat;
  }
  a:hover{
    border: 1px solid var(--red, #D11225);
    background: var(--white, #FFF);
  }
}

header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--white, #FFF);
  z-index: 10;
  .wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 0;
  }
  .logo{
    display: flex;
    align-items: center;
    gap: 26px;
    p {
      width: 153px;
    }
    h1 {
      width: 202px;
    }
    a:hover img{
      opacity: 0.6;
    }
  }
}

.main{
  position: relative;
  width: 100%;
  padding-top: 72px;
}

.pageHeader{
  padding: 40px 0 48px;
  background: var(--bg_gray, #F6F6F6);
  .breadcrumbs{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 32px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    .breadcrumbs__list{
      display: flex;
      flex-wrap: nowrap;
      width: max-content;
      min-width: 100%;
      .breadcrumbs__item{
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.56px;
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .breadcrumbs__item:not(:last-child)::after{
        content: '>';
        margin: 0 8px;
      }
      .breadcrumbs__item:not(:has(a)){
        color: var(--gray_01, #858585);
      }
      a{
        text-decoration: underline;
      }
      a:hover, a:focus, a:active{
        text-decoration: none;
      }
    }
  }
  .pageHeader__title{
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.28px;
  }
}
.main__content{
  padding: 40px 0 80px;
  width: 100%;
}
.section__footCvArea{
  width: 100%;
  margin-bottom: 5em;
  box-sizing: border-box;
  #footCvBlock04 .VariousPolicyBlock .inner{
    padding: initial;
  }
}
#footer{
  .inner{
    max-width: 1240px;
  }
  #bottomLinkArea{
    .bottomLinkWrap{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 15px 12px;
      margin-bottom: 30px;
      li{
        float: none;
        max-width: 100%;
        width: auto;
        margin-bottom: 0;
      }
      li a img{
        display: block;
        width: 230px;
        max-width: none;
        position: static;
      }
    }
  }
}

@media screen and (max-width: 767px){
  .tag{
    padding-top: 4px;
    margin-bottom: 4px;
    .tag__label{
      p{
        font-size: 12px;
        letter-spacing: 0.48px;
      }
    }
  }
  .trade-navi__btn--back{
    margin-top: 40px;
    a{
      font-size: 16px;
      letter-spacing: 0.64px;
      padding: 20px 64px 20px 52px;
    }
  }
  .main{
    padding-top: 60px;
  }
  header{
    .wrap{
      padding: 18px 0;
    }
    .logo{
      gap: 12px;
      p{
        width: 88px;
      }
      h1{
        width: 145px;
      }
    }
  }
  .pageHeader{
    padding: 20px 0 24px;
    .inner{
      padding: 0 0 0 20px;
    }
    .breadcrumbs{
      margin-bottom: 24px;
      .breadcrumbs__list{
        .breadcrumbs__item{
          font-size: 12px;
          letter-spacing: 0.48px;
        }
      }
    }
    .pageHeader__title{
      font-size: 24px;
      letter-spacing: 0.96px;
    }
  }
  .main__content{
    padding: 36px 0 60px;
  }
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　TOP
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.page-top{
  .page-top__navList{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
    padding: 26px 60px;
    background: var(--bg_gray, #F6F6F6);
    .page-top__navItem{
      a{
        padding: 20px 156px 20px 20px;
        border-radius: 48px;
        border: 1px solid var(--gray_02, #D9D9D9);
        background: var(--white, #FFF);
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.72px;
        position: relative;
        display: block;
      }
      a::after{
        position: absolute;
        content: "";
        display: inline-block;
        width: 14px;
        height: 20px;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        background-image: url(/trade-navi/images/arrow_d.webp);
        background-size: contain;
        vertical-align: middle;
      }
      a:hover{
        border: 1px solid var(--red, #D11225);
      }
      a:hover::after{
        background-image: url(/trade-navi/images/arrow_d_on.webp);
      }
    }
  }
  .main__content{
    padding: 48px 0 80px;
  }
  .page-top__tool{
    border-bottom: 1px solid var(--gray_02, #D9D9D9);
    padding-bottom: 40px;
  }
  .page-top__purpose{
    margin-top: 40px;
  }
  .h2{
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.12px;
    margin-bottom: 40px;
  }
  .h3{
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.8px;
    padding-left: 18px;
    margin: 40px 0 28px;
    position: relative;
  }
  .h3::before{
    position: absolute;
    content: "";
    width: 6px;
    height: 24px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #333;
    border-radius: 6px;
  }
  .h3:not(:first-of-type){
    margin-top: 60px;
  }
  .page-top__list{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }
  .page-top__item{
    width: 384px;
    a{
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 19px 20px;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.64px;
      border-radius: 8px;
      border: 1px solid var(--gray_02, #D9D9D9);
      background: var(--bg_gray, #F6F6F6);
      position: relative;
      img{
        width: 48px;
      }
    }
    a::after{
      position: absolute;
      content: '';
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
      width: 10px;
      height: 15px;
      background-image: url(/trade-navi/images/arrow_r.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    a:hover{
      border: 1px solid var(--red, #D11225);
      background: var(--white, #FFF);
    }
  }
}

@media screen and (max-width: 767px){
  .page-top{
    .page-top__navList{
      padding: 24px 20px;
      .page-top__navItem{
        width: calc(100% / 2 - 6px);
        a{
          padding: 16px;
          font-size: 14px;
          letter-spacing: 0.56px;
        }
        a::after{
          width: 10px;
          height: 14px;
          right: 16px;
        }
      }
    }
    .main__content{
      padding: 36px 0 60px;
    }
    .page-top__tool{
      padding-bottom: 24px;
    }
    .page-top__purpose{
      margin-top: 36px;
    }
    .h2{
      font-size: 20px;
      letter-spacing: 0.8px;
      margin-bottom: 24px;
    }
    .h3{
      font-size: 16px;
      letter-spacing: 0.64px;
      padding-left: 14px;
      margin: 24px 0 16px;
    }
    .h3:not(:first-of-type){
      margin-top: 36px;
    }
    .page-top__list{
      gap: 12px;
    }
    .page-top__item{
      width: 100%;
      a{
        gap: 8px;
        padding: 7px 12px;
        font-size: 14px;
      }
      a::after{
        right: 12px;
      }
    }
  }
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　第2階層
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.page-category{
  .page-category__list{
    display: flex;
    gap: 80px 24px;
    flex-wrap: wrap;
  }
  .page-category__item{
    flex: 0 0 384px;
    width: 384px;
    max-width: 384px;
    a {
      display: block;
      width: 100%;
    }
    figure{
      width: 100%;
      margin: 0;
    }
    figcaption{
      position: relative;
      display: block;
      width: fit-content;
      max-width: 384px;
      padding-right: 22px;
    }
    figcaption::after{
      content: '';
      position: absolute;
      top: 0.38em;
      right: 0;
      width: 10px;
      height: 15px;
      background-image: url('/trade-navi/images/arrow_r.webp');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    figcaption p{
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.72px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
  }
  .page-category__img{
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
    img {
      display: block;
      width: 100%;;
      transition: transform 0.3s ease;
    }
  }
  .page-category__item a:hover,
  .page-category__item a:focus{
    .page-category__img {
      border-color: var(--red, #D11225);
    }
    .page-category__img img{
      transform: scale(1.05);
    }
    figcaption{
      p{
        text-decoration: underline;
      }
    }
  }
}

@media screen and (max-width: 767px){
  .page-category{
    .page-category__list{
      gap: 48px;
      flex-direction: column;
    }
    .page-category__item{
      flex: none;
      width: 100%;
      max-width: 100%;
      figcaption{
        max-width: 100%;
        padding-right: 18px;
        p{
          font-size: 16px;
          letter-spacing: 0.64px;
        }
      }
      figcaption::after{
        top: 0.32em;
      }
    }
  }
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　第3階層
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.page-detail__content{
  .page-detail__move iframe{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .tag{
    padding-top: 28px;
    margin-bottom: 12px;
    .tag__label{
      border-radius: 15px;
      p{
        letter-spacing: 0.64px;
      }
    }
  }
  .page-detail__ttl{
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1.12px;
    margin-bottom: 28px;
  }
  .page-detail__desc{
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.64px;
    p{
      margin-bottom: 1em;
    }
  }
}

@media screen and (max-width: 767px){
  .page-detail__content{
    .tag{
      padding-top: 16px;
      margin-bottom: 4px;
    }
    .page-detail__ttl{
      font-size: 20px;
      letter-spacing: 0.8px;
      margin-bottom: 16px;
    }
    .page-detail__desc{
      font-size: 14px;
      letter-spacing: 0.56px;
    }
  }
}