
/* ==========================================================================
TOP
========================================================================== */

/* --------------------------------------------------------------------------
MV SLIDER
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
  .top-mv-slide {
    margin-top: calc(20 / var(--font) * 1rem);
    margin-bottom: calc(114 / var(--font) * 1rem);
  }
  .top-mv-slide .swiper-slide a {
    display: block;
    position: relative;
    overflow: hidden;
  }
  .top-mv-slide .swiper-slide img {
    transition: all .4s ease;
  }
  .top-mv-slide .swiper-slide a:hover img {
    transform: scale(1.05);
  }
  .top-mv-slide .swiper-slide .c-btn {
    position: absolute;
    right: calc(25 / var(--font) * 1rem);
    bottom: calc(24 / var(--font) * 1rem);
  }
  .top-mv-slide .swiper-slide .c-btn-txt {
    color: var(--white-color);
  }
  .top-mv-slide .swiper-slide .c-btn-txt::before {
    background-color: var(--white-color);
  }
  .top-mv-slide .swiper-slide .c-icon--circle-arrow::after {
    background-color: var(--white-color);
  }
  .top-mv-slide .swiper-slide .c-icon--circle-arrow::before {
    border-color: var(--white-color);
  }
  .top-mv-slide .swiper-slide .c-btn.--black .c-btn-txt {
    color: #524532;
  }
  .top-mv-slide .swiper-slide .c-btn.--black .c-icon--circle-arrow::after {
    background-color: #524532;
  }
  .top-mv-slide .swiper-slide .c-btn.--black .c-icon--circle-arrow::before { 
    border-color: #524532;
  }
  .top-mv-slide .swiper-slide .c-btn.--black .c-btn-txt::before {
    background-color: #524532;
  }
}

@media all and (max-width: 767px) {
  .top-mv-slide {
  }
  .top-mv-slide .c-icon--circle-arrow::before {
    border: 1px solid #fff;
  }
  .top-mv-slide .c-icon--circle-arrow::after {
    background-color: #fff;
  }
  .top-mv-slide .swiper-slide .c-btn {
    --btn-gap: 19;
    --btn-font-size: 10;
    position: absolute;
    right: calc(10 / var(--font) * 1rem);
    bottom: calc(10 / var(--font) * 1rem);
    color: #fff;
  }
  .top-mv-slide .swiper-slide .c-btn.--black{
    color: var(--black-color);
  }
  .top-mv-slide .swiper-slide .c-btn {
  }
  .top-mv-slide .swiper-slide .c-btn-txt {
    letter-spacing: 0.07em;
  }
  .top-mv-slide .swiper-slide .c-icon--circle-arrow {
    --icon-size: 40;
  }
  .--black .c-icon--circle-arrow::before{
    border: 1px solid var(--black-color);
    color: var(--black-color) !important;
  }
  .--black .c-icon--circle-arrow::after{
    background: var(--black-color);
  }
  .top-mv-slide .swiper-pagination{
    display: none;
  }

}


/* --------------------------------------------------------------------------
TOP BUNNER
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
  .top-bunner {
    display: flex;
    flex-wrap: wrap;
    gap: calc(40 / var(--font) * 1rem);
  }
  .top-bunner__img--01,.top-bunner__img--02{
    max-width: calc(460 / var(--font) * 1rem);
  }
  .top-bunner__img--03{
    width: 100%;
  }
  .top-bunner__img {
    position: relative;
    overflow: hidden;
  }
  .top-bunner img {
    width: 100%;
    max-width: 100%;
    height: auto;
    transition: all .4s ease;
  }
  .top-bunner__img a:hover img {
    transform: scale(1.05);
  }
}
@media all and (max-width: 767px) {
  .top-bunner {
    margin-top: calc(40 / var(--font) * 1rem);
    padding: 0;
  }
  .top-bunner div + div{
    margin-top: calc(16 / var(--font) * 1rem);
  }
}


/* --------------------------------------------------------------------------
ABOUT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
  .sec-about {
    padding-top: calc(80 / var(--font) * 1rem)!important;
    padding-bottom: calc(80 / var(--font) * 1rem)!important;
  }
  .sec-about .sec__header {
    text-align: center;
  }
  .sec-about .sec__body {
    margin-top: calc(56 / var(--font) * 1rem);
  }
  .sec-about .sec__body .c-icon--circle-arrow::before {
    border: 1px solid var(--beige2-color);
  }
}

@media all and (max-width: 767px){
  .sec-about {
    padding-top: calc(56 / var(--font) * 1rem)!important;
    padding-bottom: calc(56 / var(--font) * 1rem)!important;
  }
  .sec-about .sec__header {
    text-align: center;
  }
  .sec-about .sec__body {
    margin-top: calc(40 / var(--font) * 1rem);
  }


}

/* --------------------------------------------------------------------------
BRAND
 -------------------------------------------------------------------------- */

@media all and (min-width: 768px),print {
  .sec-brand .c-column__title {
    margin-top: calc(24 / var(--font) * 1rem)
  }
  .sec-brand .c-column__title-sub {
    margin-top: calc(10 / var(--font) * 1rem)
  }
  .sec-brand .c-column__list {
    align-items: flex-start;
  }
  .sec-brand .c-column__img {
    overflow: hidden;
  }
  .l-column .c-column-media.u-bg {
    padding: calc(80 / var(--font)* 1rem) 0 calc(32 / var(--font)* 1rem) calc(80 / var(--font)* 1rem);
  }
}
@media all and (max-width: 767px){
}

/* --------------------------------------------------------------------------
NEWS
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),print {
  .sec-news {
    display: flex;
    margin-top: calc(80 / var(--font)* 1rem);
  }
  .sec-news .cat {
    display: none;
  }
  .sec-news .sec__body {
    flex-grow: 1;
  }
  .sec-news .sec__header{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: calc(72 / 960 * 100%);
  }
  .sec-news-list {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--font) * 1rem);
  }
  .sec-news-list__item {
    display: flex;
    align-items: flex-start;
    gap: calc(32 / var(--font) * 1rem);
    padding-right: calc(72 / 960 * 100%);
    position: relative;
  }
  .sec-news-list__item::before{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(14 / var(--font) * 1rem);
    height: calc(10 / var(--font) * 1rem);
    --svg-path: url(../img/common/ico_arrow_01.svg);
    -webkit-mask: var(--svg-path);
    mask: var(--svg-path);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black-color);
    transition: all .4s ease;
  }
  .sec-news-list__item:hover::before {
    right: calc(-10 / var(--font) * 1rem);
  }
  .sec-news-title {
    position: relative;
  }
  .sec-news-list__item .sec-news-title::after {
    content: "";
    position: absolute;
    bottom: calc(-3 / 1440 * 100vw);
    left: 0;
    height: calc(1 / 1440 * 100vw);
    width: 100%;
    transition: all .4s ease;
    transform: scale(0, 1);
    transform-origin: left top;
    background-color: var(--black-color);
  }
  .sec-news-title::before {
    transition: all .4s ease;
  }
  .sec-news-list__item:hover::before {
    right: calc(-4 / var(--font) * 1rem);
  }
  .sec-news-title {
    font-size: calc(16 / var(--font) * 1rem);
    line-height: 1.8;
    letter-spacing: 0.03em;
  }
  .sec-news-info {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
  }
  .sec-news-date {
    margin-top: calc(2 / var(--font) * 1rem);
    font-size: calc(16 / var(--font) * 1rem);
    font-weight: 400!important;
  }
}

@media all and (max-width: 767px){
  .sec-news{
    display: flex;
    flex-direction: column;
    margin-top: calc(56 / var(--font)* 1rem);
    position: relative;
    padding-bottom: calc(104 / var(--font)* 1rem);
  }
  .sec-news .cat {
    display: none;
  }
  .sec-news-list{
    margin-top: calc(28 / var(--font) * 1rem);
  }
  .sec-news-date {
    font-size: calc(16 / var(--font) * 1rem);
    font-weight: 400!important;
  }
  .sec-news-title {
    font-size: calc(16 / var(--font) * 1rem);
    line-height: 1.8;
    letter-spacing: 0.03em;
    margin-top: calc(8 / var(--font) * 1rem);
  }
  .sec-news-list li + li{
    margin-top: calc(22 / var(--font) * 1rem);
  }
  .sec-news-list__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: calc(42 / 345 * 100%);
    position: relative;
  }
  .sec-news-list__item::before {
    content: "";
    display: block;
    position: absolute;
    right: calc(6 / var(--font) * 1rem);
    top: calc(43 / var(--font) * 1rem);
    width: calc(16 / var(--font)* 1rem);
    height: calc(12 / var(--font)* 1rem);
    --svg-path: url(../img/common/ico_arrow_01.svg);
    -webkit-mask: var(--svg-path);
    mask: var(--svg-path);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--black-color);
    transition: all .4s ease;
  }
  .sec-news-btn {
    margin-top: calc(48 / var(--font) * 1rem);
    margin-left: auto;
    width: fit-content;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

/* --------------------------------------------------------------------------
INSTAGRAM
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
  .instagram__list {
    padding-top: calc(48 / 960 * 100%);
    padding-bottom: 0;
  }
  
}



/* --------------------------------------------------------------------------
sp
-------------------------------------------------------------------------- */
/*
@media all and (min-width: 768px),print {
}
@media all and (max-width: 767px) {
}
*/





