* 固定 */

@charset "utf-8";


/* header */

 html {
width: 100%;
height: ;
position: relative;
margin: 0;
padding: 0;
}

 body {
width: 100%;
height: ;
background-color: ;
margin: 0;
background-color: ;
}

@media all and (orientation: landscape) {
   /* 横向きの場合は、縦長用を非表示にする */
   div.forPortrait { display: none; }
}
@media all and (orientation: portrait) {
   /* 縦向きの場合は、横長用を非表示にする */
   div.forLandscape { display: none; }
}
/* ここまで */

/* body head */
/* TOP画像 */
.top_img {
width: 100%;
height: 300px;
margin: 0;
display: flex;
position: relative;
}

/* フッター　横100*/
.footer-box {
width: 90%;
height: auto;
background-color: #ffffff;
display: flex;
justify-content: flex-start;
margin: 0 ;
position: absolute;
left: 0;
top: 150px;
}

/* アイコン　紹介用インスタなど */
.icon {
max-width: 30px;
max-height: auto;
border-radius: 50px;
display: inline-block;
margin: 10px 10px 50px 10px;
padding: 
}
/* body head ここまで */

/* mainメニュー*/
.width {
width: 100%;
height: ;
background-color: ;
}


/* 商品表示スライダー */

.slide-wrap{
   display:-webkit-box;
   display:-ms-flexbox;
   display: flex;
   overflow-x: scroll;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   padding: 0;
   margin: 0;
   scroll-behavior: smooth;
width: 90%;
margin: 10px 5% 10px 5%;
height:auto;
}

.slide-wrap .slide-content{
  flex: 0 0 24%;
   margin: 0px 0.5%;
   height:auto;
}


/* メニューボード */

.menu_bord {
min-width: 100%;
display:block;
height: auto;
margin: 0 0 10px 0;
padding: 5px 0;
background: orange;
color: #fff;
font-size: 1.8rem;
text-align: center;
font-weight: bold;
}

/* メニューボード ここまで */

.swiper-container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}

/* 買取カード */

.purchase {
max-width: 100%;
max-height: auto;
margin: 0px 0px 3px 0px;
padding:;
border-radius: 2px;
}

/* 買取カード レアリティ*/

.rarity {
max-width: 100%;
max-height: auto;
margin: 0;
padding: 0;
}

/* レアリティ文字 */

.rarity-blue {
font-size: 14px;
line-height:100%;
color: #0080ff;
margin: 0;
text-align: center;
}
/* 買取金額文字 */

.kaitori-pink {
font-size: 13px;
line-height:100%;
color: #ff05a6;
margin: 0px 0px 0px 0px;
text-align: right;
}
/* 商品表示スライダー ここまで */

/* ライン　お問い合わせなど */

.linefriend {
width: 40%;
height: auto;
margin: 10px 0px 10px 0px;
}

/* 水平線 */
.linebox {
    width: 100%;
    height: 5px;
    transition: 10ms
    opacity: 0;
display: block;
  position: relative;
}

@keyframes line-k {
from {
transform: scaleX(0%);
opacity:0;
}
to {
transform: scaleX(100%)
}
}

.line-waku {
width: 90%;
height: auto;
margin: 20px 5% 20px 5%;
padding: ;
position: relative;
}

.line-text {
width: 75%;
height: auto;
margin: ;
font-size: 1.4rem;
line-height:130%;
color: #686868;
text-align: left;
}
/* ライン　お問い合わせなど ここまで */

/* タップで開閉 */
.open-box{
  margin:;
  padding: ;
  display:;
  text-align:;
width: 100%;
}

/*inputを非表示*/
input[type="checkbox"].on-off{
  opacity: 0;
}
/*ラベル（「開く」ボタン）*/
.open-label{
  margin: 0px 0 10px 50%;
  padding: ;
  display: block;
  color: #000;
  font-weight: bold;
  font-size: 14px;
  text-align: ;
  box-shadow: ;
  background: ;
  border-radius: ;
width: 50%;
}
/*エフェクト*/
.open-label:active{
  
}
.open-label:hover{
  background: ;
}
/*ラベルに表示するテキスト*/
.open-label::after{
  content:'▼ オリパの封入や注意点'; 
}
.on-off:checked ~ .open-label::after{
  content: '▲ 閉じる';
}

/*開閉エリア*/
.open{
  padding: 0 1em;
  height: 0;
  opacity: 0;
  transition: .5s;
font-size: 1.3rem;
line-height:100%;
color: #686868;
text-align: left;
}
/*「開く」をタップで表示*/
.on-off:checked  ~ .open{
  padding: ;
  height: auto;
  opacity: 1;
}
/* タップで開閉 ここまで */

/* オリパボックス */
.flex-box1 {
display:flex;
width: 100%;
height: auto;
margin: 0;
}
/* オリパボックス ここまで */

/* オリパ系 */

.o-waku {
width: 50%;
height: auto;
margin: 0;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
}

.win-waku {
width: 90%;
height: auto;
margin: 0px 5% 10px 5%;
padding: 10px 0;
display: flex;
justify-content: center;
flex-wrap:wrap;
background: #fff;
}

.o-top {
width: 90%;
height: auto;
margin: 5% 0% 5px 5%;
}

.o-cyu-win {
width: 13%;
height: auto;
margin: 0 1.5%;
border-radius: 2px;
}

.o-text {
width: 90%;
height: auto;
margin: 0% 0% 30px 0px;
text-align: ;
border-radius: 20px;
background: rgba(0, 128, 255, 0.4);
display: flex;
align-items: center;
flex-direction: column;
}

.position {
position: absolute;
top: 0;
right: 0;
}

/* カートボタン 左側*/
.cartbotan {
position: absolute;
bottom: 0;
right: 20px;
margin: 0;
transform: scale(1.5);
} 

/* カートボタン 右側*/
.cartbotan1 {
position: absolute;
bottom: 0px;
right: 20px;
margin: 0;
transform: scale(1.5);
} 
/* オリパ系 ここまで */

/* body body ここまで */


/* body foot */
.line {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: '';
  transition: cubic-bezier(0.22, 1, 0.36, 1);
  position: ;
animation:line-k 2s;
width: 100%;
}

/* body foot ここまで */



/* 保留一覧　*/

/* サンプル  */

#mask1 {
background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 3;
}

#modal1 {
background: #fff;
width: 70%;
height: 50%;
padding: 24px;
border-radius: 4px;
color: #000000;
position: fixed;
top: 10%;
left: 10%;
right: 10%;
text-align: center;
margin: 0 auto;
z-index: 4;
}

.hidden1 {
  display: none;
}
/* サンプル ここまで */


/* メッセージアラート 検索 */
#mask {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 80%;
  padding: 20px;
  border-radius: 4px;
  color: #686868;
  line-height:130%;
  position: fixed;
  top: 50%;
  left: 5%;
  right: 5%;
  text-align: left;
  margin: 0 auto;
  z-index: 2;
}

.hidden {
  display: none;
}

/* メッセージアラート 検索 ここまで */




.tabs {
  width: 100%;
  position: fixed;
  bottom: 52px;
  left: 0;
  background: #5c9cd8;
  z-index: 1000;
}

.tab-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  border-radius: 4px 4px 0 0;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  color: #fff;
  transition: background 0.3s;
}

.tab-item:hover {
  background: #4a8ac2;
}

.tab-item.active {
  background: #337ab7;
  font-weight: bold;
}

.tab-content {
  padding: 20px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

#page-top {
  display: flex;
  width: 100%;
  transition: all 1.3s;
  position: fixed;
  right: 0;
  bottom: 0px;
  z-index: 9;
  opacity: 0;
}

#page-top.UpMove {
  animation: UpAnime 1s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#page-top.DownMove {
	animation: DownAnime 0.6s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* spinner */
#button_ig {
    padding: 10px 20px;
    font-size: 16px;
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001; /* 他の要素よりも手前に表示 */
}

#button_ig .circle,
#button_ig .spinner {
    width: 24px; /* サイズを統一 */
    height: 24px;
    border-radius: 50%;
    margin: auto;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    background-color: white; /* 中央を白くする */
}

#button_ig .circle {
    width: 24px; /* サイズを統一 */
    height: 24px;
    border-radius: 50%;
    border: 4px solid #3498db; /* 青色にする */
    background-color: #fff; /* 青色で一周染める */
}

#button_ig .spinner {
    animation: spin 1s linear infinite;
    display: none; /* 初期状態で非表示 */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}