@import url('./common.css');

/* home.css固有のスタイル */


/* homeページのメインコンテンツ */

#news{
.wrapper{
  .news{
    .inner{
      .title{
        margin-top: calc(220 / 1363 * 100%);
                            &:after {
                        content: "";
                        display: block;
                        width: 80px;
                        height: 2px;
                        background-color: var(--gold);
                        margin: calc(70 / 1363 * 100%) auto;
                        @media screen and (min-width: 769px) {
                        height: 4px;
                        }
                    }
      }
      .news-list{
        max-width: 100%;
        margin: calc(100 / 1363 * 100%) auto 0;
        border-top: 1px solid var(--gray);
        @media screen and (min-width: 769px) {
          max-width: calc(814 / 1363 * 100%);
        }
        li{
          padding: 2rem 0;
          text-align: left;
          border-bottom: 1px solid var(--gray);
        }
        .date{
          font-size:clamp(16px, 0.2vw + 15.24px, 18px);
          color: var(--gray-dark);
          padding-bottom: 1rem;
        }
        .body{
          font-size:clamp(16px, 0.2vw + 15.24px, 18px);
          color: var(--black);
          padding-bottom: 1rem;
          background: url(../img/news/icon-arrow.svg) no-repeat 95% center;
          background-size: 10px 10px;
          padding-right: 4rem;
         
        }
      }
}
}

}
}
#single{
  main{
  text-align: center;
  width: 100%; 
  .single{
    width: 100%;
   
    margin: 0 auto;
   
    padding-top: calc(180 / 1363 * 100%);
    text-align: left;
    
    @media screen and (min-width: 769px) {
       max-width:calc(1016 / 1363 * 100%);
       display: flex;
    justify-content: space-between;
    align-self: start;
    flex-direction:row-reverse;
    }
    .sidebar{
     width: 85%;
      border-top: 1px solid var(--gray);
      padding-top: calc(40 / 1016 * 100%);
      margin: calc(100 / 1363 * 100%) auto 0;
       @media screen and (min-width: 769px) {
         width: calc(270 / 1016 * 100%);
         margin: 0 auto;
       }
      .sidebar-list{
        li{
          margin-bottom: calc(10 / 270 * 100%);
          a{
            font-size: clamp(16px, 0.2vw + 15.24px, 18px);
            position: relative;
            width: 100%;
            display: inline-block;
            @media screen and (min-width: 769px) {
              width: 150px;
            }
            &::after{
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              width: 10px;
              height: 10px;
              background: url(../img/news/icon-arrow.svg) no-repeat right center;
              background-size: 10px 10px;
            }
          }
        }
      }
    }
    .inner{
      width: calc(882 / 1016 * 100%);
      border-top: 1px solid var(--gray);
      padding-top: calc(40 / 1016 * 100%);
      @media screen and (min-width: 769px) {
        width: calc(660 / 1016 * 100%);
      }
      .single-date{
        font-size:clamp(14px, 0.31vw + 12.83px, 16px);
        color: #a5a5a5;
        padding-bottom: calc(5 / 660 * 100%);
      }
      .single-header{
        font-size: clamp(18px, 0.94vw + 14.49px, 24px);
         padding-bottom: calc(20 / 660 * 100%);
      }
      .single-content{
        img{
          margin: calc(30 / 660 * 100%) 0;
        }
        p{
          font-size:clamp(16px, 0.31vw + 14.83px, 18px);
          line-height: 2;
          strong{
            font-weight: 700;
          }
        }
      }
    }

  }
}
}