* 固定 */

@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: 30%;
margin: 0;
display: flex;
position: relative;
}

/* 基本文字サイズ*/
.text {
  padding: 0 1em;
  height: 0;
  opacity: ;
  transition: .5s;
font-size: 2rem;
line-height:100%;
color: #686868;
text-align: left;
}

/* TOP画像 */
.tab_img {
width: 100%;
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: ;
}

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

.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;
}
/* ライン　お問い合わせなど ここまで */



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



/* 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: ;
  bottom: px;
  left: 0;
  background: #fff;
  z-index: 1000;
}

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

.tab-item {
  width: 150%;
display: flex;
flex-wrap:nowrap;
margin: 0px 2%;
justify-content: space-around;
align-items: stretch;
padding: 0px 0px 2px 0px;
cursor: pointer;
color: #686868;
transition: background 0.3s;
}

.tab-item:hover {
  background: #0080ff;
}

.tab-item.active {
  background: #0080ff;;
  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);
    }
}