@import url("https://use.typekit.net/tcq3oam.css");

/*==============================================================================================
PC
==============================================================================================*/
.staticPageMain .spOnly {
  display: none;
}

.staticPageMain h2.staticPageTitle {
  margin: 100px 0 60px;
  color: #040000;
  font-family: classico-urw, sans-serif;
  font-size: 26px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}

/*==========================
brandList
==========================*/
.staticPageMain.brandList {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.staticPageMain.brandList ul.brandListAnyTimeActive {
  display: flex;
  max-width: 1100px;
  margin: 0 auto 30px;
  gap: 18.4px;
}

.staticPageMain.brandList ul.brandListAnyTimeActive li ul {
  display: flex;
  gap: 18.4px;
}

.staticPageMain.brandList .brandListHideBrand ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: auto;
  gap: 30px 18.4px;
}

.staticPageMain.brandList ul.brandListAnyTimeActive li ul li,
.staticPageMain.brandList .brandListHideBrand ul li {
  display: flex;
  align-items: center;
  width: 168px;
}

.staticPageMain.brandList ul li img {
  width: 100%;
}

/*==========================
TOPICS LIST
==========================*/
.staticPageMain.features .featuresList .tab_area {
  text-align: center;
  margin: 0 auto 6rem;
}

.staticPageMain.features .featuresList input[type="radio"] {
  display: none;
}

.staticPageMain.features .featuresList .tab_area label {
  width: 10rem;
  margin: 0 3rem;
  display: inline-block;
  padding: .2rem 0 1.2rem;
  text-align: center;
  font-size: 1.8rem;
  cursor: pointer;
  transition: ease 0.2s opacity;
  font-family: 'futura-pt';
}

.staticPageMain.features .featuresList .feature-Wrap ul.feature-list.tab_panel {
  display: none;
}

.staticPageMain.features .featuresList #tab1:checked~.tab_area .tab1_label {
  border-bottom: 1px solid
}

.staticPageMain.features .featuresList #tab1:checked~.panel_area #panel1 {
  display: flex;
}

.staticPageMain.features .featuresList #tab2:checked~.tab_area .tab2_label {
  border-bottom: 1px solid
}

.staticPageMain.features .featuresList #tab2:checked~.panel_area #panel2 {
  display: flex;
}

.staticPageMain.features .featuresList #tab3:checked~.tab_area .tab3_label {
  border-bottom: 1px solid
}

.staticPageMain.features .featuresList #tab3:checked~.panel_area #panel3 {
  display: flex;
}

.staticPageMain.features .featuresList .tab_area label:hover {
  opacity: 0.5;
}

.staticPageMain.features .featuresList .feature-Wrap .feature-list {
  display: flex;
  flex-wrap: wrap;
  width: 990px;
  margin: auto;
}

.staticPageMain.features .featuresList .feature-Wrap .feature-list li {
  width: 312px;
  margin: 0 18px 18px 0;
}

.staticPageMain.features .featuresList .feature-Wrap .feature-list li:nth-of-type(3n) {
  margin: 0 0 18px 0;
}

/*==========================
News Detail
==========================*/
.newsDetail.staticPageMain {
  width: calc(800*(100vw/1400));
  /* width: 800px; */
  margin: auto;
}

.newsDetail.staticPageMain p.newsCategory {
  margin-bottom: 15px;
  color: #85b7b2;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.025em;
}

.newsDetail.staticPageMain h3.newsTitle {
  margin-bottom: 11px;
  font-family: inherit;
  font-size: 22px;
  line-height: 36px;
}

.newsDetail.staticPageMain p.newsDate {
  margin-bottom: 26px;
  color: #595757;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .025em;
}

.newsDetail.staticPageMain p.newstxt {
  font-size: 14px;
  line-height: 24.5px;
  text-align: center;
}

/*==============================================================================================
iPad
==============================================================================================*/
@media screen and (max-width: 1200px) {

  .staticPageMain h2.staticPageTitle {
    margin: calc(100*(100vw/1200)) 0 calc(60*(100vw/1200));
    font-size: calc(26*(100vw/1200));
  }

  /*==========================
  brandList
  ==========================*/
  .staticPageMain.brandList {
    max-width: calc(1160*(100vw/1200));
  }

  .staticPageMain.brandList ul.brandListAnyTimeActive {
    display: flex;
    max-width: calc(1100* (100vw / 1200));
    margin: 0 auto calc(30*(100vw/1200));
    gap: calc(18.4* (100vw / 1200));
  }

  .staticPageMain.brandList ul.brandListAnyTimeActive li ul {
    gap: calc(18.4* (100vw / 1200));
  }

  .staticPageMain.brandList ul.brandListAnyTimeActive li ul li,
  .staticPageMain.brandList .brandListHideBrand ul li {
    width: calc(168*(100vw/1200));
  }

  .staticPageMain.brandList .brandListHideBrand ul {
    max-width: calc(1100* (100vw / 1200));
    gap: calc(30* (100vw / 1200)) calc(18.4* (100vw / 1200));
  }

  /*==========================
  TOPICS LIST
  ==========================*/
  .staticPageMain.features .featuresList .feature-Wrap .feature-list {
    width: calc(990*(100vw/1200));
  }

  .staticPageMain.features .featuresList .feature-Wrap .feature-list li {
    width: calc(312*(100vw/1200));
    margin: 0 calc(18*(100vw/1200)) calc(18*(100vw/1200)) 0;
  }

  .staticPageMain.features .featuresList .feature-Wrap .feature-list li:nth-of-type(3n) {
    margin: 0 0 calc(18*(100vw/1200)) 0;
  }

  /*==========================
  News Detail
  ==========================*/
  .newsDetail.staticPageMain {
    width: calc(800*(100vw/1200));
  }

  .newsDetail.staticPageMain p.newsCategory {
    margin-bottom: calc(15*(100vw/1200));
    font-size: calc(11*(100vw/1200));
  }

  .newsDetail.staticPageMain h3.newsTitle {
    margin-bottom: calc(11*(100vw/1200));
    font-size: calc(22*(100vw/1200));
  }

  .newsDetail.staticPageMain p.newsDate {
    margin-bottom: calc(26*(100vw/1200));
    font-size: calc(11*(100vw/1200));
  }

  .newsDetail.staticPageMain p.newstxt {
    font-size: calc(14*(100vw/1200));
  }

}