@charset "utf-8";

body{
position:relative;
overflow-x: hidden;
color:#5b5b5b;
width:100%;
text-align:center;
margin:0px;
padding:0px;
font-family:"Sawarabi Gothic",'Noto Sans JP', sans-serif;
font-size:15px;
line-height:1.5;
letter-spacing:0.1em;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
html{
scroll-behavior: smooth;
scroll-margin-top:0px; /* ヘッダーの高さ */
}
img{
max-width: 100%;
image-rendering: -webkit-optimize-contrast;
}


.fixed-left {
position: fixed;
width:30%;
top: 50%;
left: calc(50% - 470px / 2 - 50px);
transform: translate(-100%, -50%);
z-index: 999999;
}
.fixed-left img{
width:100%;
}

.fixed-right {
position: fixed;
top: 50%;
left: calc(50% + 470px / 2 + 50px);
transform: translateY(-50%);
z-index: 999999;
}

.layout{
width:500px;
margin:0 auto;
text-align:left;
box-shadow:0px 0px 3px #000000;
background:#ffffff;
padding:0px !important;
}
.wrap{
padding:10px;
}
h1{
margin:20px 0px;
text-align:center;
font-size:20px;
display:block;
background:#417fa7;
color:#ffffff;
padding:10px;
}

h2{
color:#ffffff;
background:#3c578b;
margin:10px 0px;
padding:20px !important;
font-size:18px;
text-align:center;
display:block;
}

h3{
font-size:18px;
padding:20px !important;
margin:10px 0px !important;
text-align:left;
display:block;
font-weight:bolder;
color:#ffffff;
background-image:url(../images/h3-bg.jpg);
}
h4{
margin-top:20px;
font-size:16px;
color:#3c578b;
text-align:left;
display:block;
}
h5{
font-size:16px;
color:#ffffff;
background:#451f3a;
padding:10px;
text-align:left;
display:block;
border-radius:8px;
margin-bottom:10px;
}
h6{
font-size:16px;
text-decoration-color: #EFDCF4;
text-decoration-line: underline;
text-decoration-thickness: 5px;
text-underline-offset: -3px;
text-decoration-skip-ink: none;
}
.logo-s{
width:150px;
}
.logo-m{
width:200px;
}
.subimg{
width:80%;
margin:0 auto;
}

.background{
background-image:url(../images/background.jpg);
background-size:cover;
background-position:50% 50%;
background-attachment: fixed;
}
header{
position:relative;
}
header ul{
position:absolute;
right:0px;
float:left;
}
header ul li{
margin:10px 5px;
float:left;
}
header ul li a{
font-size:12px;
padding:10px;
border-radius:8px;
}
header ul li a.cart{
background: linear-gradient(to bottom,  rgba(109,150,224,1) 0%,rgba(34,70,137,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#ffffff;
}
header ul li a.level{
background: linear-gradient(to bottom,  #d82717 0%,#890404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#ffffff;
}

a.btm{
margin:0 auto;
display:block;
text-align:center;
padding:20px;
background: linear-gradient(to bottom,  rgba(109,150,224,1) 0%,rgba(34,70,137,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#ffffff !important;
border-radius:8px;
}
a.btm:hover{
background: linear-gradient(to bottom,  rgba(78,121,196,1) 0%,rgba(34,70,137,1) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
a.levelcheck{
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#ffffff;
margin:0 auto;
display:block;
text-align:center;
padding:20px;
border-radius:8px;
}
a.levelcheck:hover{
background: linear-gradient(to bottom,  #d82717 0%,#890404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
ul.nav li{
margin-bottom:10px;
}
ul.nav li a{
padding:20px;
display:block;
border-radius:8px;
background:#ffffff;
transition: background 0.3s;
}
ul.nav li a.cart{
background: linear-gradient(to bottom,  rgba(109,150,224,1) 0%,rgba(34,70,137,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#ffffff;
}
ul.nav li a.levelcheck{
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#ffffff;
}

header .head-img{
padding-top:50px;
}
.wrap-1{
margin-bottom:20px;
}

b{
color:#3c578b;
}
.point{
text-align:center;
font-size:16px;
}
.level table{
width:100%;
}
.level table tr th,.level table tr td{
border:solid 1px #ececec;
padding:10px;
text-align:center;
vertical-align:middle;
}
.level table tr td{
font-size:18px;
}
.level table tr td.kaisuu{
color:#3c578b;
}
.level table tr td img{
width:150px;
}
.cheer{
}
.cheer .price{
border:solid 1px #3c578b;
padding:10px;
margin:0px 20px 20px 20px;
text-align:center;
color:#3c578b;
}
.cheer .price .kakaku{
font-size:20px;
font-weight:bolder;
}
.cheer table{
width:100%;
margin:20px 0px;
}
.cheer table tr th{
text-align:center;
width:30%;
color:#3c578b;
font-size:18px;
}
.cheer table tr th,.cheer table tr td{
border:solid 1px #ececec;
padding:5px;
vertical-align:middle;
}
.cheer table tr td.cell{
text-align:center;
font-weight:bolder;
}
.cheer ul li{
margin-left:30px;
list-style-type:decimal;
padding:5px 0px;
}
.cheer ul li.new{
color:#3c578b;
}
ul.note{
margin:10px;
}
ul.note li{
margin-left:10px;
list-style-type:disc;
padding:5px 0px;
}
.note2{
font-size:12px;
text-align:right;
}
.kitei ul{
border:solid 1px #ececec;
padding:10px;
}
.kitei ul li{
margin-left:20px;
list-style-type:decimal;
padding:5px 0px;
}

.qa{
}
.qa .question{
border:solid 1px #ececec;
border-radius:8px;
padding:10px;
font-weight:bolder;
}
.qa .answer{
padding:10px;
margin-bottom:20px;
}

.fixed-right .menu-title{
font-size:12px;
color:#ffffff;
margin-bottom:20px;
}
footer .copy{
text-align:center;
margin:50px;
}
/* メーター */
#bar{
background:url(https://miyakowave.jp/wp/wp-content/themes/miyakowave/images/meter-bg.jpg);
background-size:cover;
background-position:50% 50%;
}
.meter-wrap {
margin-left:100px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 520px;
  font-family: sans-serif;
}

/* 目盛り */
.scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
  font-size: 16px;
  color: #555;
}

.now{
font-size:20px;
color:#3c578b;
}
.now::before{
content:"★";
}

/* メーター枠 */
.vmeter {
  width: 150px;
  height: 500px;
  background: rgba(100,100,100,0.5);
  border-radius: 13px;
  position: relative;
  overflow: hidden;
}

/* メーター中身 */
.vmeter-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to top, #b8cef7, #30366b);
  border-radius: 13px;
  animation: fillUp 1.6s ease-out forwards;
}