/* スタッフスナップ(詳細ページ)  */

/* 全体のリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* パンくずリスト */
#pankuzu ul {
    list-style: none;
    display: flex;
    font-size: 10px;
}

#pankuzu ul li {
    margin-right: 5px;
}

#pankuzu ul li:after {
    content: '>';
    margin-left: 5px;
}

#pankuzu ul li:last-child:after {
    content: '';
}

/* メインセクション */
#main {
    margin: 20px auto;
    max-width: 1200px;
    padding: 0 20px;
}

/* スナップ詳細 */
#snapDetails {
    margin-top: 20px;
}

#snapDetails .ttl {
    font-size: 24px;
    font-weight: bold;
}

#snapDetails .desp {
    font-size: 16px;
    margin-top: 10px;
}

@media screen and (min-width: 1025px) {
    #main {
        display: flex;
        justify-content: space-between; /* コンテンツを左右に配置 */
    }

    #snapImage {
        width: 50%; /* 画像の幅を設定 */
    }

    #snapDetails {
        width: 45%; /* Detailsの幅を設定 */
        margin-left: 20px; /* 画像との間にスペースを作る */
    }

    #snapImage img {
        width: 100%; /* 画像は親要素の幅に合わせる */
    }
}

/* コーディネートアイテムのスタイル */
/* 基本スタイル */
#coordinate_ajax {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左詰めで表示 */
    margin-top: 20px;
}

.coordinate-item {
    width: 30%; /* デスクトップでは3列表示 */
    margin-bottom: 20px;
    box-sizing: border-box;
}

.coordinate-item img {
    width: 85%;
    border-radius: 8px;
    transition: transform 0.3s;
}

.coordinate-item img:hover {
    transform: scale(1.05);
}

.coordinate-item p {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #333;
    width: 85%; /* 親要素に合わせてテキストの幅を設定 */
    word-wrap: break-word; /* テキストが長い場合に折り返す */
    overflow: hidden; /* はみ出すテキストを隠す */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

/* PC表示での調整（アイテム間の隙間を詰める） */
@media screen and (min-width: 1025px) {
    .coordinate-item {
        margin-right: 2%;
    }
    .coordinate-item:last-child {
        margin-right: 0;
    }
}

/* スマホ表示で1行2アイテム表示 */
@media screen and (max-width: 768px) {
    #coordinate_ajax {
        justify-content: space-between;
    }

    .coordinate-item {
        width: 48%; /* スマホでは1行に2列表示 */
        margin-bottom: 15px;
    }

    .coordinate-item:nth-child(odd) {
        margin-right: 2%;
    }

    .coordinate-item:nth-child(even) {
        margin-right: 0;
    }
}

/* モバイル表示（480px以下で1列表示） */
@media screen and (max-width: 480px) {
    .coordinate-item {
        width: 100%; /* 1列表示 */
        margin-bottom: 20px;
    }
}


/* スタッフスナップ(詳細ページ)  */


/* スタッフスナップ(一覧ページ)  */
#snapList {
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

.itemList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左詰めで表示 */
    padding: 0;
    list-style: none;
}

.itemList li {
    width: 22%;
    margin-bottom: 20px;
    margin-right: 2%; /* アイテム間のスペースを追加 */
}

.itemList li:nth-child(4n) {
    margin-right: 0; /* 4つ目のアイテムは右に余白をつけない */
}


.itemList li a {
    text-decoration: none;
    color: #333;
}

.itemList li img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s;
}

.itemList li img:hover {
    transform: scale(1.05);
}


.data {
    margin-top: 5px;
    font-size: 14px;
    color: #555;
}

.shop {
    display: block;
}

/* ボタンのスタイル */
.linkBtn a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.linkBtn a:hover {
    background-color: #333;
}

/* レスポンシブデザイン */
@media (max-width: 1200px) {
    .itemList li {
        width: 30%;
    }
}

@media (max-width: 768px) {
    .itemList li {
        width: 45%;
    }
}

@media (max-width: 480px) {
    .itemList li {
        width: 100%;
    }
}

/* スタッフスナップ(一覧ページ)  */



/* スタッフスナップ(トップページ) */
#snap {
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

.secTtl {
    font-size: 24px;
    margin-bottom: 20px;
}

.itemList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左詰めで表示 */
    padding: 0;
    list-style: none;
}

.itemList li {
    width: 23%;
    margin-bottom: 20px;
    margin-right: 2%; /* アイテム間のスペースを追加 */
}

.itemList li:nth-child(4n) {
    margin-right: 0; /* 4つ目のアイテムは右に余白をつけない */
}


.itemList li a {
    text-decoration: none;
    color: #333;
}

.itemList li img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s;
}

.itemList li img:hover {
    transform: scale(1.05);
}

.data {
    margin-top: 5px;
    font-size: 14px;
}

.shop {
    display: block;
}

.linkBtn a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;　/* テキストの色を白に変更 */
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.linkBtn a:hover {
    background-color: #333;　/* ホバー時の背景色 */
}

/* ここからレスポンシブデザイン対応 */
@media screen and (max-width: 1024px) {
    .itemList li {
        width: 30%;
    }
}

@media screen and (max-width: 768px) {
    .itemList li {
        width: 45%;
    }
}

@media screen and (max-width: 480px) {
    .itemList li {
        width: 48%; /* スマホで1行に2列表示 */
        margin-bottom: 20px;
        margin-right: 2%;
    }

    .itemList li:nth-child(2n) {
        margin-right: 0; /* 2列目の右側に余白を入れない */
    }
    
    .secTtl {
        font-size: 20px;
    }

    .linkBtn a {
        padding: 8px 16px;
        font-size: 14px;
    }
}


/* スタッフスナップ(トップページ) 終*/


.fs-p-inputGroup {
background: #fff;
}

a:visited {
    color: #000;
}

.fs-l-header__contents {
    display: block;
}

.fs-p-searchForm__input {
    display: block!important;
}

.fs-p-searchForm__button {
    width: 2.2em;
    height: 2em;
}

.fs-p-searchForm__button::before {
    font-size: 1.6rem;
}


@media screen and (max-width: 1200px) {
li.searchForm {
display: none;
}
}

@media screen and (min-width: 1200px) {
li.searchForm-sp {
display: none;
}
}

@media screen and (max-width: 728px) {
.fs-pt-column {
	display: flex;
	flex-wrap: wrap;
}

.fs-pt-column__item {
	width: 50%;
}
}

.fr3-productListCarousel__slides{
 /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}

.fr3-productListCarousel__slides::-webkit-scrollbar{
  display: none;
}

div.flywheel-recommend__frame[data-frame-id="new"] .fs-p-heading--lv2 {
      display: none;
    }
div.flywheel-recommend__frame[data-frame-id="re"] .fs-p-heading--lv2 {
      display: none;
    }

.fs-p-heading--lv2:not(:first-child) {
    margin-top: 5em;
}

.fs-p-heading--lv2 {
    border-bottom: 0px;
    text-align: center;
 margin-bottom: 30px; /* タイトルと画像の間に余白を追加 */
}

.fr3-item__productName {
    font-size: 1.4rem;
}


.brand_dec {
   max-width: 1216px
   margin: auto;
}

.brand_dec img {
    display: flex;
  justify-content: center;
  margin: auto;
}

.brand_dec p {
    display: flex;
  justify-content: center;
  margin:20px auto 0 auto;
  text-align: center;
}

.fs-c-slick .slick-dots {
    margin-top: -30px;
}


@media screen and (max-width: 728px) {
.brand_dec img {
width: 35%
}

.brand_dec p {
font-size:1rem;
width: 90%;
margin: 10px auto 0 auto;
}
}

/* ==========================================================
 商品説明
========================================================== */


/*タブ切り替え全体のスタイル*/
.tabs,.tab_item1 {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: none;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #c3c3c3;
  background-color: #fff;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item1 {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #c3c3c3;
  background-color: #fff;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item:hover,.tab_item1:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*ラジオボタンを全て消す*/
input[name="tab_item1"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

.tab_content1 {
  display: none;
  padding: 0px;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのコンテンツのみを表示*/
#recommend:checked ~ #recommend_content,
#eturan:checked ~ #eturan_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #c3c3c3;
  color: #fff;
}

/*選択されているタブのスタイルを変える*/
.tabs1 input:checked + .tab_item1 {
  background-color: #c3c3c3;
  color: #fff;
}


.flywheel-recommend__frame>.fs-p-heading--lv2 {
  display: none;
}



/* 初期状態では非表示にする */
#fs-c-subgroup {
  display: none;
}

.fs-c-heading--page {
    display: none;
}

.fs-c-subgroup>.fs-c-listControl {
    display: none;
}

.fs-c-subgroupList__link {
    background: #fff;
}

.slick-list draggable {
    padding: 0px!important;
}

.itemPageDetails_sizeSpec {
    margin: 0 auto 5em auto;
    padding: 0;
    width: 100%;
    border: 0;
    border-spacing: 0;
}

.itemPageDetails_sizeSpec th {
    padding: 20px 0;
    text-align: center;
    border-bottom: solid 1px #eee;
    letter-spacing: .2em;
}

.itemPageDetails_sizeSpec td {
    padding: 20px 0;
    text-align: center;
    border-bottom: solid 1px #eee;
    letter-spacing: .2em;
}

.fs-l-productLayout .fs-c-productCarouselMainImage__thumbnailList {
    flex-wrap: wrap;
    overflow-x: auto;
}

.fs-c-productNumber {
    border: 0px;
    padding: 0px;
}

.fs-c-productPrice:not(.fs-c-productPrice--listed) .fs-c-productPrice__main__price {
    color: #000;
}

.fs-c-productPointDisplay {
    background: #fff;
    color: #000;
}

.fs-c-button--secondary {
    background: #000;
    border: 1px solid #000;
}

/* ==========================================================
  お知らせ一覧
========================================================== */
h1.info_title {
    text-align: center;
}

.info-colum {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 50px;
}

.info-colum>.fs-pt-column__item {
    width: 100%;
}
.info-colum>.fs-pt-column__item>.fs-pt-column__heading {
    font-size: 1.1rem;
}
@media screen and (max-width: 728px) {
.info-colum {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

}

/* ==========================================================
 実店舗
========================================================== */
.map>iframe {
  width: 600px;
  height: 450px;
}


@media screen and (max-width: 728px) {
.map>iframe {
  width: 100%;
}
.shop_list>.fs-pt-column__item {
    width: 100%;
}
}




/* ==========================================================
  footer
========================================================== */
.footer {
  display:block;
  position: relative;
  min-width: 1100px;
  min-height: 370px;
  margin-top: 0px;
  border-top: none;
}

@media (max-width: 768px) {
  .footer {
    min-width: 0;
    min-height: 202px;
    margin-top: 0px;
    border-top: none;
  }
}

.footer-in {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto;
  padding: 38px 0 32px;
}

@media (max-width: 768px) {
  .footer-in {
    width: auto;
    padding: 0;
  }
}

.footer .footer-links-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 768px) {
  .footer .footer-links-container {
    display: none;
  }
}

.footer .footer-links {
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 80px;
  line-height: 1.4;
}

.footer .footer-links .ttl-main {
  margin-bottom: 14px;
  font-size: 1.6rem;
  font-weight: bold;
}

.footer .footer-links .list-footer-links li {
  margin-bottom: 13px;
}

.footer .footer-links .list-footer-links li:last-child {
  margin-bottom: 0;
}

.footer .footer-news {
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 320px;
}

.footer .footer-news .ttl-main {
  margin-bottom: 5px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
}

.footer .footer-news .list-footer-news {
  margin-bottom: 10px;
}

.footer .footer-news .list-footer-news li {
  border-bottom: 1px solid #A2A2A2;
}

.footer .footer-news .list-footer-news .box-news {
  position: relative;
  display: block;
  padding: 8px 40px 14px 0;
  font-size: 1.4rem;
  line-height: 1.7;
  text-decoration: none;
}

.footer .footer-news .list-footer-news .box-news .txt-date {
  display: block;
  margin-bottom: 5px;
  color: #A2A2A2;
  font-size: 1.2rem;
}

.footer .footer-news .list-footer-news .box-news::after {
  position: absolute;
  top: 50%;
  right: 19px;
  width: 14px;
  height: 26px;
  margin-top: -13px;
  background: url(https://cdn.grail.bz/images/parts/common/lm20230705125151/ico_arrow_right_01.svg) center no-repeat;
  background-size: 14px 27px;
  content: '';
}

.footer .footer-news .list-footer-news .box-news:hover .txt-info {
  text-decoration: underline;
}

.footer .footer-news .btn-more {
  position: relative;
  display: inline-block;
  min-width: 176px;
  padding-right: 15px;
  background: url(https://cdn.grail.bz/images/parts/common/lm20230705125151/ico_arrow_right_02.svg) center right no-repeat;
  background-size: 6px 12px;
  font-size: 1.4rem;
}

.footer .footer-sns {
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 245px;
}

@media (max-width: 768px) {
  .footer .footer-sns {
    display: none;
  }
}

.footer .footer-sns .ttl-sns {
  margin-bottom: 15px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
}

.footer .footer-sns .list-footer-sns li {
  margin-bottom: 10px;
}

.footer .footer-sns .list-footer-sns li:last-child {
  margin-bottom: 0;
}

.footer .footer-sns .list-footer-sns a {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.1;
}

.footer .footer-sns .list-footer-sns .img-sns {
  width: 22px;
  height: 22px;
}

.footer .footer-sns .list-footer-sns .txt-sns {
  padding-left: 10px;
  font-size: 1.2rem;
}

.footer .footer-links-sp {
  display: none;

}

@media (max-width: 768px) {
  .footer .footer-links-sp {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  }
}

.footer .footer-links-sp li {
  width: 50%;
  border-left: 1px solid #a2a2a2;
  border-right: 1px solid #a2a2a2;
  border-bottom: 1px solid #a2a2a2;
}

.footer .footer-links-sp a {
  display: block;
  height: 100%;
  padding: 15px 5px;
  background-color: #3c3c3c;
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: center;
}

.footer-lower {
  border-top: 1px solid #A2A2A2;
}

@media (max-width: 768px) {
  .footer-lower {
    width: auto;
    border: none;
  }
}

.footer-lower-in {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
  padding: 18px 0;
}

@media (max-width: 768px) {
  .footer-lower-in {
    display: block;
    width: auto;
    padding: 10px 0 5px;
    text-align: center;
  }
}

.footer-lower-in .list-util-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.2rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .footer-lower-in .list-util-nav {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 0.9rem;
  }
}

.footer-lower-in .list-util-nav li::after {
  display: inline-block;
  padding: 0 2px;
  content: '|';
}

.footer-lower-in .list-util-nav li:last-child::after {
  display: none;
}

.footer-lower-in .list-footer-sns {
  display: none;
}

@media (max-width: 768px) {
  .footer-lower-in .list-footer-sns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
    font-size: 1.4rem;
  }
}

.footer-lower-in .list-footer-sns li {
  margin-right: 10px;
}

.footer-lower-in .list-footer-sns li:first-child {
  margin-right: 22px;
}

.footer-lower-in .list-footer-sns .img-sns {
  width: 22px;
  height: 22px;
}

a.footer-copyright {
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
}

@media (max-width: 768px) {
  a.footer-copyright {
    font-size: 1.1rem;
    text-decoration: none;
  }
}

a.text-decoration-none {
  text-decoration: none;
}

.fs-p-footerPageTop {
  display: none;
}

@media (max-width: 768px) {
  .fs-p-footerPageTop {
    display: block;
    padding: 15px 0;
    background-color: #000;
    text-align: center;
    cursor: pointer;
  }
}

.fs-p-footerPageTop .text {
  display: inline-block;
  padding-top: 12px;
  background: url(https://cdn.grail.bz/images/parts/common/lm20230705125151/ico_arrow_up_01.svg) top center no-repeat;
  background-size: 12px 6px;
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.1;
}

.fs-p-footerPageTop__link {
    background-color:transparent;
}

footer .fa-brands, .fab {
    font-size: 2.2rem;
}


.fs-l-footer {
    background-color: #3c3c3c;
    color: #fff;
    margin-top: 80px;
}

.fs-l-footer a {
    color: #fff;
}

footer a:visited {
    /* color: #fff; */
}



/* ==========================================================
 新着再入荷ボタン
========================================================== */
.itemlist_button_ {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px; /* ページのマージンをゼロに設定 */
    }
  

  /* ボタンのスタイル */
    .itemlist_button {
      display: inline-block;
      padding: 10px 20px; /* ボタンの内側の余白 */
      border: 1px solid #000; /* 枠 */
      background-color: #fff; /* 背景色 */
      color: #000; /* テキストの色 */
      text-decoration: none; /* リンクの下線を削除 */
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s; /* ホバー時のアニメーション */
    }

    /* ホバー時のスタイル */
    .itemlist_button:hover {
      background-color: #989898; /* 背景色を変更 */
      color: #fff; /* テキストの色を変更 */
    }

.global-logo {
    display: none;
}

.fs-pt-column__item:only-child {
    padding: 8px;
}

.fr3-item__rank{
    margin-top: 35px;
    z-index: 1;
}