@charset "utf-8";

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  color: black;
  line-height: 1;
  background-color: white;
  margin:0;

}

img {
  max-width: 100%;
}



/*footer*/

.footer_1{
  text-align: center;
  margin:30px auto 0 auto;
  background-color: rgba(233, 230, 230, 0.422);
  padding:10px 0 20px 0;
}
@media(max-width:576px){
  .footer_1{
    font-size: 3vw;
    line-height: 1.3em;
  }
}


.container {
  width: 80%;
  margin: 0 auto 0 auto;
}

.top_img {
  margin: 20px auto;
}

.container_top001{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:15px;
  margin: 30px auto 50px auto;
}
@media(max-width:768px){
  .container_top001{
    grid-template-columns: repeat(3,1fr);
  }
}
@media(max-width:576px){
  .container_top001{
    grid-template-columns: repeat(2,1fr);
    gap:20px;
  }
}

.index_item{
  text-align: center;
  font-size: 0.8rem;
  margin-top: 8px;
}


.osusume1 {
  font-size: 0.8em;
  text-align: center;
  margin-top:10px;
}

.osusume2 {
  font-size: 0.7em;
  text-align: center;
}

.category_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px auto;
}

@media(max-width:800px) {
  .category_container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.osusume_category {
  margin: 50px 0 20px 0;
}

.ninki_container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin: 10px auto 15px auto;
}

@media(max-width:768px) {
  .ninki_container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media(max-width:576px) {
  .ninki_container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width:480px) {
  .ninki_container {
    grid-template-columns: 1fr;
  }
}

/*カテゴリー詳細ボタン*/

.btn {
  padding: 10px 30px;
  margin: 2.5px;

  background-color: rgba(135, 206, 235, 1);
  border-radius: 5px;

  text-align: center;
  color: white;
}
@media(max-width:700px){
  .btn{
  padding: 5px 15px;
  margin:5px;
  }
}

.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-top:100px;

}
a:hover .btn{
background-color: rgb(218, 215, 243);
}





.custom_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 20px auto 30px auto;
}
.custom1 {
  font-size: 0.8em;
}
.custom2{
  width:60%;
  line-height: 1.6em;
  margin:30px auto 20px auto;
}
@media(max-width:800px){
  .custom2{
    width:85%;
  }
}
.custom3{
  color: rgb(231, 98, 3);
  text-decoration: underline;
  text-align: center;
  margin:40px auto 30px auto;
}
@media(max-width:800px){
  .custom3{
    font-size: 1.3em;
  }
}
.custom4{
  color: rgb(231, 98, 3);
  margin:30px 0 30px 0;
}
.custom5{
  width:80%;
  margin:30px auto 40px auto;
}
.custom6{
  font-size: 1.4em;
  padding: 15px 50px 15px 15px;
  margin:30px auto 40px 0;
  color: white;
  background-color: rgb(231, 98, 3);
}
.custom_container1{
  display: grid;
  grid-template-columns: repeat(2 ,1fr);
  gap:25px;

}

.custom7{
  color: rgb(231, 98, 3);
  font-size: 1.3em;
}
.custom8{
  margin:40px auto 10px auto;
  line-height: 1.5em;
}

/*dealingのページ*/

.d1{
  font-size: 1.3em;
  color: darkblue;
  margin-top: 50px;
}

.d2{
  font-size: 1em;
  color:rgb(42, 27, 27);
  margin:30px 0 20px 0px;
}

.d3{
  margin:20px 0 20px 50px ;
  text-decoration:underline;

}

.d4{
  line-height: 1.6em;
  font-size:0.9em;
  margin:10px 0 20px 60px;
}

.d5{
  list-style: disc;
  margin:10px 0 30px 60px;
  line-height:1.5em;
}

.d6{
  margin:10px 0 20px 50px;
}

.d7{
  width:70%;
  margin:0 auto 30px auto;
}

.d8{
  margin:10px 0 10px 55px;
}

.d9{
  width: 30%;
  margin:30px;
}

.d10{
  font-size: 0.8em;
  line-height: 1.7em;
  margin:10px 0 30px 70px;
}

.d11{
  font-size:0.8em;
  margin:30px 0 30px 60px;
  line-height: 1.7em;
}

.d12{
  line-height: 1.8em;
  margin:10px 0 10px 70px;
  font-size: 0.9em;
}

.d13{
  font-size: 1em;
  color:rgb(42, 27, 27);
  margin:30px 0 20px 30px;
}

.dealing_item{
  display: inline-block;
  padding:15px;
  font-size: 0.9em;
}

.dealing_item1{
  margin:30px auto 20px auto;
}

/*dealingのページ終わり*/

/*companyのページ*/

.company{
  font-size: 1.2em;
  margin:50px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,td {
  padding: 20px 30px;
  border: 1px solid #AAAAAA;
}

th {
  background-color: #CCCCCC;
  width: 150px;
  text-align: left;
}

td {
  width: calc(100% - 150px);
}

@media (max-width: 480px) {
  th,td {
    width: 100%;
    display: block;
  }
}

/*2層目・3層目パングズリスト*/
.bread1{
  margin:20px 0 40px 70px;
  }
  @media(max-width:700px){
    .bread1{
    margin:50px 0 40px 30px;
    font-size:0.9em
    }
  }
  
/*cool_coolの写真grid_layout*/
.container_007{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
  margin: 30px auto 10px auto;
  width:95%;
}
@media(max-width:768px){
  .container_007{
    grid-template-columns: repeat(3,1fr);
  }
}
@media(max-width:576px){
  .container_007{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:480px){
  .container_007{
    grid-template-columns: 1fr;
  }
}

/*新navbar_060418*/
.container_t {
  background-color: var(--nav-color);
  font-size: 1.2rem;
  font-family: "Merriweather Sans", sans-serif;
  height: 70px;
  margin-top: 30px;
}
@media(max-width:768px){
  .container_t{
    font-size:1.0rem;
  }
}
@media(max-width:576px){
  .container_t{
    font-size:0.8rem;
  }
}
.navbar_t {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 80%;
  margin: auto;
}

.navbar_t ul {
  display: flex;
}

.container_t .navbar_t {
  justify-content: space-between;
}

.navbar_t ul li {
  list-style-type: none;
}

.container_t .navbar_t ul li {
  padding: 10px;
  margin: 0 10px;
}
@media(max-width:576px){
  .container_t .navbar_t ul li{
padding:10px 5px;
  }
}


.navbar_t a {
  font-weight: bold;
}

.navbar_t a:hover {
  text-decoration: underline;
  text-underline-offset: 10px;
  color:gray;
}

@media screen and (min-width: 390px) and (max-width: 850px) {
  .container_t {
    height: 100%;
  }

  .container_t .navbar_t {
    flex-direction: column;
  }
}


.container_pagelink{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:5px;
  margin:50px auto;
}
@media(max-width:850px){
  .container_pagelink{
    grid-template-columns: repeat(3,1fr);
  }
}
@media(max-width:650px){
  .container_pagelink{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:480px){
  .container_pagelink{
    grid-template-columns: 1fr;
  }
}
.button-1 {
  display: inline-block;
  padding: 0.8em 1.8em;
  font-size: 0.8rem;
  color: #00b5ad;
  text-decoration: none;
  user-select: none;
  border: 1px #00b5ad solid;
  border-radius: 3px;
  transition: 0.4s ease;
  text-align: center;
}
@media(max-width:850px){
  .button-1{
    font-size:calc(0.4rem+0.4vw)
  }
}

.button-1:hover {
  color: #fff;
  background: #00b5ad;
}

.container_pagelink2{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:5px;
}
@media(max-width:768px){
  .container_pagelink2{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:480px){
  .container_pagelink2{
    grid-template-columns: 1fr;
  }
}

.site_link{
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.top_banner{
  width:100%;
}

/*アイテム区分けの罫線*/

.hr1 {
  width: 500px;
  height: 2px;
  background-color: black;
  margin-top: 10px;
}
@media(max-width:576px){
  .hr1{
    width:85%;
  }
}

.kobetsu_midashi {
  margin-top: 40px;
}

.related_item_container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:15px;
  margin:15px auto 50px auto;
}
@media(max-width:768px){
.related_item_container{
  grid-template-columns: repeat(3,1fr);
}
}
@media(max-width:576px){
  .related_item_container{
    grid-template-columns: repeat(2,1fr);
  }
  }
  @media(max-width:480px){
    .related_item_container{
      grid-template-columns: 1fr;
    }
    }

.related_name{
  font-size: 0.8rem;
  text-align: center;
}

/*ページトップへ戻るボタン*/
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 10px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  .pagetop:hover, .pagetop:hover .pagetop__arrow {
      border-color: #3293e7;
  }
}


/*用語解説ほか＿ステーショナリー*/
.box-011 {
  position: relative;
  max-width: 600px;
  margin: 80px auto 0;
  padding: 1em 1.5em;
  border: 2px solid #2589d0;
  border-radius: 3px;
}

.box-011 span {
  position: absolute;
  top: -1.9em;
  left: -2px;
  padding: .2em .8em;
  border-radius: 5px 5px 0 0;
  background-color: #2589d0;
  color: #fff;
}

.box-011 p {
  margin: 0;
  color: #333;
}

/*印刷範囲の画像その他*/

.printing_area{
  width:80%;
  margin-top: 30px;;
}

.printing_size{
  margin-top: 20px;
  line-height: 1.5rem;
  font-size: 0.8rem;
}

/*TOPページの特注コーナー*/
.feature_container{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
}
@media(max-width:768px){
  .feature_container{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:576px){
  .feature_container{
    grid-template-columns: 1fr;
  }
}

.atten1{
  font-size: 0.8rem;
  text-align: center;
  margin-top:40px;
  line-height: 1.3rem;
}

/*ブランケット・ネックウォーマーの刺繍サンプル*/
.container_neck_warmers{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:15px;
  margin:20px auto;
}
@media(max-width:768px){
  .container_neck_warmers{
    grid-template-columns: repeat(2,1fr);
  }
}

.neck_warmers1{
  font-size: 0.9rem;
  margin-top:30px;
}
@media(max-width:576px){
  .neck_warmers1{
    font-size: 0.8rem;
  }
}

.neck_warmers2{
  font-size: 0.9rem;
  margin-top:10px;
  text-align: center;
}
@media(max-width:576px){
  .neck_warmers2{
    font-size: 0.7rem;
  }
}

.icon_new{
  width:70px;
}

/* レスポンシブ対応のスタイル */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9のアスペクト比（9 ÷ 16 = 0.5625） */
  margin-top: 50px;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*Swiper用CSS（高さ指定＆中央テキストもOK）*/

.swiper {
  width: 100%;
  max-width: 100vw;
  height: 480px;  /* 必要に応じて変更 */
  margin-bottom: 32px;
}

.mySwiper {
  width: 100%;
  height: 70vh;
  min-height: 400px;
  max-height: 600px;
  position: relative;
}

.swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background: #111;
  overflow: hidden;
}

.swiper-slide img,
.swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

/* 動画のスタイル */
.swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキスト重ねる場合 */
.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.5rem; /* デスクトップサイズ */
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.3);
  padding: 20px 30px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  max-width: 90%;
  line-height: 1.4;
  z-index: 10;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .banner-text {
    font-size: 2rem;
    padding: 18px 25px;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .mySwiper {
    height: 50vh;
    min-height: 300px;
    max-height: 400px;
  }
  
  .banner-text {
    font-size: 1.5rem;
    padding: 15px 20px;
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
  .mySwiper {
    height: 40vh;
    min-height: 250px;
  }
  
  .banner-text {
    font-size: 1.2rem;
    padding: 12px 16px;
    max-width: 95%;
  }
}

@media (max-width: 360px) {
  .banner-text {
    font-size: 1rem;
    padding: 10px 14px;
  }
}

/* 人気商品スライダーだけ高さを***pxにしたい場合 */
.pickup-slider .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 8px 0;
}

.pickup-slider .swiper-slide img {
  width: 250px;   /* お好みで */
  height: 200px;  /* お好みで */
  object-fit: cover;
  border-radius: 12px;
}

.pickup-slider .product-name {
  display: block;
  margin-top: 0.5em;
  text-align: center;
  font-size: 1em;
  color: #333;
}

/* ナビゲーションボタンのスタイル調整 */
.swiper-button-next,
.swiper-button-prev {
  color: white;
  background: rgba(0, 0, 0, 0.5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-top: -22px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 18px;
}

/* ページネーションのスタイル */
.swiper-pagination-bullet {
  background: white;
  opacity: 0.7;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }
  
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 14px;
  }
}