/*----------------------------------------------------

 Top

----------------------------------------------------*/
/*
 main
----------------------------------------------------*/
.swiper-box {
  margin-inline: auto;
  max-width: 100%;
  position: relative;
}
.swiper {  max-width: 100%;}
.swiper-wrapper img { width: 100%;}
.swiper-wrapper {}
.swiper-slide {  background: #fff;}
.swiper-pagination {  bottom: -30px !important;}
#main {
  margin: 0 auto;
  padding: 0 0 40px;
}
#topics {  margin-bottom: 60px;}
@media screen and (min-width:600px) {}
@media screen and (min-width:1250px) {
  #main {
    max-width: 1280px;
    width: 90%;
    margin: 15px auto 0;
  }
}
/*
 lineup
----------------------------------------------------*/
#lineup ul.youto {
  display: flex;
  justify-content: space-between;
}
#lineup ul.youto li {  width: 31%;}
#lineup ul.youto a {
  display: block;
  background-position: center top;
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding: 60px 0 10px;
  border-radius: 5px;
}
#lineup ul.youto strong {
  background: rgba(255, 255, 255, 0.9);
  display: block;
  padding: 2px 0 0;
  text-align: center;
}
#lineup .youto01 a {  background-image: url(../products/img/lineup01.jpg);}
#lineup .youto02 a {  background-image: url(../products/img/lineup02.jpg);}
#lineup .youto03 a {  background-image: url(../products/img/lineup03.jpg);}
@media screen and (min-width:600px) {
  #lineup .box {  border: 1px solid #ccc;}
  #lineup ul.youto {  table-layout: fixed;}
  #lineup ul.youto {  border-top: 0;}
  #lineup ul.youto li {
    padding: 10px;
    width: calc(100% / 3);
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  #lineup ul.youto li:last-child {  border-right: 0;}
  #lineup ul.youto a {
    transition: 0.5s;
    background-position: center center;
    background-size: 100% auto;
    height: 0;
    padding-top: 60%;
    position: relative;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    border-radius: 0;
  }
  #lineup ul.youto strong {
    position: absolute;
    bottom: 20px;
    display: inline-block;
    padding: 7px 10px 5px 10px;
    text-align: left;
  }
  #lineup ul.youto strong:before {
    content: '\25B6\FE0E';
    color: #46a2d7;
    padding-right: 4px;
  }
  #lineup ul.youto a:hover {  background-size: 120% auto;}
}
/**/
#lineup .results img {  height: 60px;}
#lineup .results {  padding: 10px 0 0;}
#lineup .results a {
  background-image: url(../img/bnr_results_bg.jpg);
  background-position: center center;
  background-size: 100% auto;
  display: block;
  text-align: center;
  border-radius: 5px;
}
@media screen and (min-width:600px) {
  #lineup .box {  padding: 0;}
  #lineup .results img {  height: 100%;}
  #lineup .results {  padding: 10px;}
  #lineup .results a {
    border-radius: 0;
    height: 100px;
  }
}
/*
 useful
----------------------------------------------------*/
#useful img {}
#useful ul {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
#useful li {}
@media screen and (min-width:600px) {
  #useful ul {
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width:1025px) {}
/*
 sns
----------------------------------------------------*/
#sns .nav-sns {  gap: 0;}
#sns .sns-item {
  padding: 0 1.5em;
  border-left: 1px dashed #ccc;
}
#sns .sns-item:first-child {  border-left: 0;}
#sns .nav-sns i {  font-size: 8vw;}
@media screen and (min-width:600px) {
  #sns .nav-sns i {  font-size: 6vw;}
  #sns .sns-item {  padding: 0 5vw;}
}
@media screen and (min-width:1025px) {
  #sns .nav-sns i {  font-size: 5rem;}
  #sns .sns-item {  padding: 10px 5vw;}
}
/*
 news
----------------------------------------------------*/
#news {
  position: relative;
  padding-bottom: 60px;
}
#news .ctt {  padding-bottom: 10px;}
#news .bklink {
  position: absolute;
  bottom: 20px;
  right: 0;
}
@media screen and (min-width:600px) {
  #news {  padding-bottom: 0;}
  #news .bklink {
    top: 10px;
    bottom: auto;
  }
}
@media screen and (min-width:1025px) {
  #news .bklink {  right: 5vw;}
}
/*
 news 2025.11.17 
----------------------------------------------------*/ :root {
  --clr-txt: #333;
  --clr-bk: #000;
  --clr-bk-5: color-mix(in srgb, var(--clr-bk) 5%, transparent);
  --clr-bk-10: color-mix(in srgb, var(--clr-bk) 10%, transparent);
  --clr-bk-20: color-mix(in srgb, var(--clr-bk) 20%, transparent);
  --clr-bk-50: color-mix(in srgb, var(--clr-bk) 50%, transparent);
  --clr-bk-80: color-mix(in srgb, var(--clr-bk) 80%, transparent);
  --clr-red: #d00;
  --clr-gray: #ccc;
  --clr-gray-light: #eee;
  --clr-mizu: #46a2d7;
  --clr-yellow-light: #ffc;
}
#news .kiji-list {  border-top: 1px solid var(--clr-gray);}
#news .kiji-list a {  transition: .3s;}
#news .kiji-list a:hover {
  text-decoration: none;
  transition: .3s;
}
#news .kiji-item {  border-bottom: 1px dashed var(--clr-gray);}
#news .kiji-item a {
  display: block;
  padding: 1.5em 30px 1.5em 1em;
  color: var(--clr-txt);
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23333" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>');
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right center;
}
#news .data {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  font-size: 1.1rem;
  color: var(--clr-mizu);
}
#news .data span {
  display: inline-block;
  padding: .4em .5em;
  margin-left: 1em;
  border-radius: 3px;
  background: var(--clr-gray-light);
  color: var(--clr-txt);
}
#news .data .new_label {
  background: var(--clr-red);
  color: #fff;
}
#news .kiji-item .ttl {
  line-height: 1.5;
  font-size: 1.4rem;
}
@media screen and (min-width:600px) {
  #news .kiji-list {}
  #news .data {
    font-size: 1.2rem;
  }
  #news .kiji-item .ttl {  font-size: 1.5rem;}
  #news .kiji-item a:hover {
    background-color: var(--clr-yellow-light);
    opacity: 1;
  }
}
/*
 link
----------------------------------------------------*/
#topbnr {}
#topbnr img {}
#topbnr .bnr-item, #topbnr .bnr-item-sub {
  margin: 10px 0;
}
@media screen and (min-width:600px) {
  #topbnr .bnr-sub {
    display: flex;
    justify-content: space-between;
  }
  #topbnr .bnr-item-sub {
    width: calc(50% - 20px);
    margin: 0;
  }
}