@charset "UTF-8";

.circle_list {
 display: flex;
 position: absolute;
 top: .8%;
 left: 50%;
 flex-wrap: wrap;
 width: 85%;
 transform: translate(-50%);
}

.list_item {
 position: relative;
 width: calc(100%/5);
}

/*タブ切り替え全体のスタイル*/

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

.tab_item:hover {
 opacity: .75;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#second:checked ~ #second_content ,
#fast:checked ~ #fast_content {
 display: block;
}

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

.circle_sns {
 display: flex;
 position: absolute;
 top: 89%;
 justify-content: center;
 width: 100%;
}

.circle_sns a {
 margin: 0 2%;
 width: 19%;
}

.circle_map {
 position: fixed;
 right: 0;
 bottom: clamp(80px,12vh,106px);
 padding: .5% 1%;
 border-radius: 10px 0 0 10px;
 background-color: #ed931d;
 color: #ffffff;
 text-decoration: none;
 font-size: clamp(12px,1vw,20px);
 line-height: 1.3;
}

@media (max-width:769px) {
 .circle_map {
  padding: 1.5% 2%;
 }
}

/* modal */
.overlay {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 visibility: hidden;
 opacity: 0;
 transition: all .5s 0s ease;
}
#pop-up {
 display: none;
}
#pop-up:checked + .overlay {
 z-index: 100000;
 visibility: visible;
 width: 100%;
 opacity: 1;
}
.popWindow {
 position: fixed;
 top: 50%; /* 中央に */
 left: 50%; /* 中央に */
 z-index: 100010;
 overflow: auto; /* スクロールバー用 */
 padding: 4px 10px;
 min-width: fit-content; /* 横幅が広い時に白の部分が大きくならないため */
 max-width: 95%; /* すき間 */
 max-height: 95%; /* すき間 */
 width: 85%;
 border-radius: 5px;
 background: #fffd; /* 枠の色 */
 text-align: center; /* 文字を中央寄せ */
 font-size: 13px;
 line-height: 18px;
 transition: all 500ms ease-in-out;
 transform: translate(-50%, -50%); /* 中央に */
}
.popWindow .close {
 position: absolute;
 top: 8px;
 right: 10px;
 padding: 2px;
 color: #000000;
 text-decoration: none;
 font-weight: bold;
 font-size: 24px;
 line-height: inherit;
 transition: all 300ms;
}
.popWindow .close:hover {
 color: #06d85f;
}
.close-area {
 display: block;
 width: 100vw;
 height: 100vh;
 background-color: rgba(0, 0, 0, .3098039216);
}
.popWindow::-webkit-scrollbar-track {
 background: none;
}
.popWindow::-webkit-scrollbar {
 width: 10px;
 height: 10px;
}
.popWindow::-webkit-scrollbar-thumb {
 border-radius: 5px;
 background: #999999;
}
.clickable:hover {
 cursor: pointer;
}
/* @media screen and (max-width: 700px) {
 #pop-up:checked + .overlay {
  visibility: hidden;
  opacity: 0;
 }
} */