body{margin:0;padding:0; font-family: 'Noto Sans JP', sans-serif;}

.container {
    display: flex;
    flex-wrap: wrap;
}

.top-column,
.bottom-column {
    width: 100%;
}

.left-column {
 
    width: 53%;
    background-color: #EFEFEF;
}

.right-column {
   
    width: 43%;
   
}

.top-column {
    width: 100%;
    display: flex;
    align-items:flex-start; /* 垂直方向の中央揃え */
    
    
}

/*-------------------------
スライダーの設定
---------------------------*/

.scroll-and-details-container {
    width: 100%; /* コンテナ全体の幅 */
    flex-direction: column; /* 子要素を縦方向に並べる */
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
   /* スクロールバーを非表示にする */
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   scrollbar-width: none;  /* Firefox */

}

.scroll-container::-webkit-scrollbar {
    display: none;
}


/*-------------------------
上カラムの設定
---------------------------*/

.brand-box-container{
	 padding:20px;border-bottom:1px solid #f3f3f3;
    /*  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .05);*/
	
}
.brand-box {
    position: relative;
    width: 100px;
    height: 31px; /* 三角形を含めた高さに調整。30pxにするとスマホでスクロールさせた際に上下にコンテンツが揺れてしまう*/
    margin-right: 10px; /* 四角形間の余白 */
   text-align: center; /* テキストを垂直中央に配置 */
   cursor: pointer;
	
}

/*ホバー時にスライド形式の下線を表示する
.group-box::after {
    content: '';
    position: absolute;
    bottom: -12px; 
    left: 0;
    width: 100%;
    height: 2px; 
    background-color: #5FC1C7; 
    transform: scaleX(0); 
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .group-box:hover::after {
    transform: scaleX(1); 
  }*/

.group-lists {
  padding:20px 10px;
    background-color: #F6F6F6;
    overflow: auto; /* 内容が多い場合にスクロール可能にする */
    white-space: nowrap; /* 1行で表示 */
    /*display: none; /* 初期状態では非表示 */
    border-bottom:1px solid #f3f3f3;
   }

.group-lists::-webkit-scrollbar {
    height: 8px; /* WebKitブラウザ用のスクロールバーの高さ */
}

.group-item {
    font-size:13px;
    display: inline-block;
    margin-right: 10px; /* 項目間の余白 */
    /* 必要に応じて他のスタイルを追加 */
    background-color: white;
    border-radius: 50px;
    border:1px solid #5FC1C7;
    color:#5FC1C7;
    padding:5px 15px 5px 15px;
    text-align: center;
    cursor: pointer;
	
	
}

.group-item.selected {
    background-color: #5FC1C7;/* 選択された項目の背景色 */
    color:#fff;
  }
  

/* 初期状態では非表示 */
.triangle {
    display: none;
    position: relative; /* 要素内での相対位置指定 */
    height: 5px; /* 三角形の高さ */
	

  }
  
  /* 背景画像としての三角形の設定 */
  .triangle::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top:-5px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #F6F6F6;/* 三角の色 */
    transform: translateX(-50%) ; /* 中央に配置し、180度回転 */
  }

/*-------------------------
左カラム
---------------------------*/


#pants-slider{margin-top:-20px;}

/*splideの矢印の位置の設定*/
.splide__arrow{background-color:transparent;}
.splide__arrow--prev{position: absolute;left:26%;}
.splide__arrow--next{position: absolute;right:26%;}

/*超重要な設定 
splide内の画像の横幅の設定。splideのオプションでgap、fixedWidthを使用するとバグが出るためここで指定*/
.splide__list li{margin:0 20% 0 0;width: 200px !important;}
.left-column {
        padding:70px 0;
        display: flex;
        flex-direction: column;
        align-items: center; /* 水平方向での中央揃え */
        justify-content: center; /* 垂直方向での中央揃え */
}
.splide {
        width: 100%; /* コンテナの幅を100%に */
        max-width:100%; /* 最大幅を設定（必要に応じて変更） */
        margin-bottom: 20px; /* 下の要素との間隔 */
    }
    
    .splide img {
        width: 100%;/* 画像の幅をコンテナの幅に合わせる */
        height: auto; /* 高さを自動調整してアスペクト比を保持 */
}

    @media (min-width: 768px) and (max-width: 1024px) {
        /* スクリーンサイズが767px以下の場合に適用 */
        .splide__arrow--prev{position: absolute;left:22%;}
        .splide__arrow--next{position: absolute;right:22%;}
        .splide__list li{margin:0 10% 0 0;}
        .splide img {width: 100%;}
    } 
    @media (max-width: 767px) {
      /* スマホで適用されるスタイル */
     .splide__arrow--prev{position: absolute;left:1%;}
    .splide__arrow--next{position: absolute;right:1%;}
    .splide__list li{margin:0 11% 0 11%;}
    .splide img {width: 78%;}
    }
 
/*-------------------------
右カラム
---------------------------*/
.right-column{padding:15px 0 0 15px;font-size:13px;}
.right-column #group-name{font-size:0.9em;}
.right-column p{margin: 5px 0;}

#group-name{padding:5px;margin-bottom:30px;
    color:white;
    background: linear-gradient(45deg,#49a5ae, #5FC1C7 );}
 @media (max-width: 767px) {
      /* スマホで適用されるスタイル */
	 #group-name{display:none;}
	  }

    
#scrub-name,#pants-name{font-weight: bold;font-size:13px;}
#scrub-name span,#pants-name span{border-bottom: 1px solid #000;cursor: pointer;}
#scrub-price,#pants-price{padding:10px 0;}

#scrub-color,#pants-color,
#scrub-size-label,#pants-size-label,
#scrub-type-label,#pants-type-label {font-size:12px;}

#scrub-color span,#pants-color span,
#scrub-size-label span, #pants-size-label span,
#scrub-type-label span,#pants-type-label span{color:#999;}

#scrub-colors-container,#pants-colors-container{margin-bottom:10px;}
#scrub-sizes-container, #pants-sizes-container{margin-bottom:15px;}

#scrub-title, #pants-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/*パンツ*/
#pants-info{margin-top:20px;padding-top:20px;border-top: 1px solid #e3e3e3;}

/*性別*/
.gender-container {
    display: flex;
    gap: 5px; /* 項目間のスペース */}

.gender-container div {
    padding: 2px; /* パディングの設定 */
    min-width: 50px; /* 最小幅の設定 */
    text-align: center; /* 中央揃え */
    font-size:10px;
}

#scrub-gender,
#pants-gender{margin-bottom:20px;}

/*.gender-container div.men{background-color: #5F96CF;color:#fff;border-radius: 2px;}
.gender-container div.women{background-color: #DE91A4;color:#fff;;border-radius: 2px;}
*/
/*
.gender-container div.men{border:1px solid #5F96CF;color:#5F96CF;font-weight: bold;}
.gender-container div.women{border:1px solid #DE91A4;color:#DE91A4;font-weight: bold;}
*/

.gender-container div.men,
.gender-container div.women
{border:1px solid #000;color: #000;font-weight: bold;border-radius: 2px;}

  

.color-box:first-child,
.size-btn:first-child,
.type-tab:first-child{ margin-left: 5px;}

/*カラー*/
.color-box {
    display: inline-block;
    min-width: 20px; /* minにすることで伸縮せずスライダーが機能する */
    min-height: 20px; /* minにすることで伸縮せずスライダーが機能する */
    margin: 5px 5px 5px 0;
    cursor: pointer;
    outline: 2px solid white;
    border:3px solid white;
    
}
.color-selector .selected {
    outline: 1px solid #5FC1C7;
    border:3px solid white;
}
.two-colors {
    background: linear-gradient(to bottom right, var(--color1) 50%, var(--color2) 50%);
}

/*サイズ*/
.size-selector{display: flex;}
.size-btn {
    cursor: pointer;
    margin: 5px 10px 0 0;
    background-color: white;
    /* 四角のサイズを統一する */
    min-width: 35px; /* minにすることで伸縮せずスライダーが機能する */
    min-height: 20px;/* minにすることで伸縮せずスライダーが機能する */
 /* テキストの中央揃え */
    text-align: center; /* 水平方向の中央揃え */
    line-height: 30px; /* 垂直方向の中央揃え */
    border-radius: 2px;
    border: 1px #ccc solid;
}

.size-selector .selected {
    border: 1px #5FC1C7 solid;
    background-color: #5FC1C7;
    color: white;
  
}
.size-btn.out-of-stock {
    background-color:#F0F0F0;
    cursor: not-allowed;
    border: none;
    text-decoration: line-through;
    color:#999;
    border: 1px solid #F0F0F0;
}
/*SCRUBS用*/
.size-scrubs-selector .size-btn {min-width:110px;padding:0 1px 0 4px;font-size:12px;}

/*typeタブ*/
/* タブを格納するコンテナのスタイル */
.type-tabs-container {
    display: flex; /* 子要素を横並びに配置 */
    justify-content: start; /* 左端から配置 */
    gap: 10px; /* タブ間の隙間 */
    
}

.type-tab {
    
    height: 30px; /* 高さ */
    margin: 5px 0 0 0;
    padding: 0 10px;
    border: 1px #ccc solid;/* 枠線 */
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    cursor: pointer; /* カーソルをポインタに */
    user-select: none; /* テキスト選択を無効に */
    border-radius: 2px;
}



.type-tab.selected {
    background-color: #5FC1C7; /* 背景色 */
    color: white; /* テキスト色 */
    border: 1px #5FC1C7 solid;/* 枠線 */
}

/*-------------------------
下カラム
---------------------------*/

.bottom-column{
  margin-top:40px;
    width:100%;height:60px; 
    text-align: center; /* 水平方向の中央揃え */
    line-height: 30px; /* 垂直方向の中央揃え */}

input[type="submit"] {
background-color: #5FC1C7;
color: white;
padding: 15px 20px;
border: none;
/*border-radius: 5px;*/
font-size: 16px;
cursor: pointer;
width:60%;
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* スクリーンサイズが767px以下の場合に適用 */
    input[type="submit"] {width:92%;}
} 
@media (max-width: 767px) {
  /* スマホで適用されるスタイル */
  input[type="submit"] {width:92%;}
}

input[type="submit"]:hover {
background-color: #5FC1C7;
}

.message-area:first-of-type{margin-top:60px;}
.message-area{padding:30px 15px;border-top: 1px solid #e3e3e3; 
    line-height: 1.4em;
}

.message-area h2{ line-height: 1.4em;font-size:24px;}

/*-------------------------
モーダル
---------------------------*/

/*基本構造*/
.modal {
    position: fixed;
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
    display:none;
}
.modal-content{ 
    display: flex;
    position: relative;
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px 20px 60px 20px;
    width: 80%; 
    border-radius: 3px;
    flex-direction: column;
}
.modal-body {
    display: flex;
    flex-direction: row; /* 横並びにするために設定 */
    justify-content: space-between; /* 両カラムの間にスペースを作成 */
    align-items:start;
    height: 500px;
    order: 1;
   
}
.modal-footer {  
    text-align: center;
    order: 2;
}

.modal-left-column{
    margin:20px 10px 0 40px;
    width: 40%;
   background-color: #F0F0EE;
   text-align: center;
   }
.modal-right-column {
    width: 50%;
    font-size: 13px;
}

/*左カラム*/
.modal-left-column img{
    max-width:320px;
    padding:10px 0;
}

/*右カラム*/
.modal-right-column a{color: #5FC1C7;}
.modal-right-column a:hover{text-decoration-line: none;}
.modal-right-column #modal-name{
    font-weight: bold;
    font-size: 17px;
}
.modal-right-column #modal-price,
.modal-right-column #modal-color{
    font-size: 14px;
}

.modal-right-column table{
    width:100%;table-layout: fixed;
    border-collapse: collapse;
padding-top: 30px;}

.modal-right-column th{
    font-size: 12px;
    padding:5px;
}
.modal-right-column td{

height: 25px;
text-align: center;
font-size: 11px;}

.modal-right-column tr:nth-child(odd) {
    background-color: #f2f2f2; /* 奇数行 */
}


/*タブ*/
.tab {
    margin-top: 20px;
    overflow: hidden;
    /*border: 1px solid #ccc;
    background-color: #f1f1f1;*/
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    /*transition: 0.3s;*/
    font-size: 13px;
    width:25%;
    margin-right: 20px;
	color:#000;
}

.tab button:hover {
   /* background-color: #ddd;*/
   border-bottom:2px solid #5FC1C7;
  
}

.tab button.active {
    /* background-color: #ccc;*/
    border-bottom:2px solid #5FC1C7;
    font-weight: bold;
}

.tabcontent {
    display: none;
    padding: 10px 0;
    /* border: 1px solid #ccc;*/
    border-top: none;
}

.tabcontent:first-child {
    display: block;
}


/*ボタン&リンク*/
.modal-button {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 15px 20px;
    text-align: center;
    width: 250px;
    font-size: 14px;
    cursor: pointer;
	color:#000;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    font-weight: thin;
    cursor: pointer;
}


#modal-oneitem-link{display:block;margin-top:20px;color:#000;font-size:14px;}
#modal-oneitem-link:hover{text-decoration-line: none;}

@media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) {
    .modal-content{flex-direction:column; width:100%;height: 100%;overflow: auto;margin:0;padding:0;}
    .modal-body {flex-direction:column; align-items: center;height: auto;}
    .modal-left-column{order: 1;width: 85%;margin:20px 0 0 0;padding:0;}
    .modal-left-column img{width: 50%;}
    .modal-right-column{order: 2;width: 85%;}
    #myModal .close-button{right: 20px;}
    .tab{border-top:1px #ccc solid ;margin-top:20px;padding-top:10px}
    .modal-right-column table{width:100%;table-layout: fixed;}
    .modal-right-column table th{padding:8px;}
    .modal-right-column table td{padding:5px;}
    .modal-body {order: 1;}
    .modal-footer {order: 2;margin-top:30px;margin-bottom: 30px;}
  
} 

@media (max-width: 767px) {
    #myModal .close-button{right: 10px;top:1px;}

}




/*-------------------------
フッター
---------------------------*/

.site-footer {
	
    background-color: #5FC1C7;
    color: #fff;
    padding: 20px 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;

}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.footer-section {
    margin-right: 20px;
}

.footer-section h4 {
    font-size: 16px;
    margin-bottom: 10px;
}

.footer-section p, .footer-section a {
    color: #333;
    text-decoration: none;
    margin-bottom: 5px;
}

.footer-section a:hover {
    text-decoration: underline;
}

.footer-bottom {
    font-size: 14px;
}

.footer-bottom .copyright a{
color:#fff;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        margin-bottom: 20px;
    }
}