/* =================================================
* reset
* ================================================*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img,
dl, dt, dd, ol, ul, li, form, label, table, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
margin: 0px;
padding: 0px;
border: 0px;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
outline: none;
list-style: none;
}
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
display: block;
}
ul, ol {
list-style: none;
}
table {
border-spacing: 0px;
empty-cells: show;
}
body {
font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 16px; 
color: #111;
font-weight: 500;
-webkit-text-size-adjust: none;
background-color: #FFF;
  margin: 0;
  width: 100%;  /* モーダル表示時、幅が変更されるのを防ぐ */
    margin-top:-20px!important;
}
img{
vertical-align: bottom;
font-size:0;
line-height:0;
max-width:100%;
}
area{
border:none;
outline:none;
}
input{
outline:none;
}
textarea{
outline:none;
}

/* clearfix */
.cf:after{
content: "";
display: block;
clear: both;
}
.cf {
zoom:1;
overflow: hidden;
}
.cb {
clear: both;
}

.wrap {
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.floatL {
float: left;
}
.floatR {
float: right;
}
.posi {
position: relative;
}
.tCenter {
text-align: center;
}
.tRight {
text-align: right;
}
.bold {
font-weight: bold;
}
.btn01 {
    position: absolute;
    top: 66%;
    left: 0;
    right: 0;
    margin: auto;
    width: 95%;
}
.btn02 {
    position: absolute;
    top: 3%;
    left: 0;
    right: 0;
    margin: auto;
    width: 95%;
}
.btn03 {
    position: absolute;
    top: -3%;
    left: 0;
    right: 0;
    margin: auto;
    width: 78%;
    padding-right: 3px;
}
.btn04 {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    margin: auto;
    width: 83%;
    padding-right: 3px;
}
.btn05 {
    position: absolute;
    top: 36%;
    right: 8%;
    width: 51%;
}
.btn01 img,
.btn02 img,
.btn03 img,
.btn04 img,
.btn05 img {
    width: 100%;
}
.footer {
    background-image: url(../img/lp/limit/foot_bg.jpg);
    background-repeat: repeat-x;
    padding: 40px 0 40px;
    text-align: center;
    font-size: 13px;
    background-color: #fff;
}
.footer a {
    color: #000;
    text-decoration: none;
}
.keyframe5 {
    animation-name: anim_sc;
    transform: scale(0.9,0.9);
}
.cpbtn {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.0s;
}
@keyframes anim_sc {
  100% {
    transform: scale(0.95,0.95);
  }
}

/* LP改修追加CSS　2024.5.14 */

#footer-btn{
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%)
translateY(-0%);
z-index: 10000;

}

@media screen and (max-width:600px) {
#footer-btn{
left: 0;
bottom: 0;
transform: translateX(-0%)
translateY(-0%);
}
}

.kiran-img {
position :relative;
overflow :hidden;
border-radius: 10px;
}

.kiran {
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
transform: rotate(45deg);
animation: reflection 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 2s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 2s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
30% { transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
30% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
30% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}

#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-mask {
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0.3;
  background: rgb(0, 0, 0); 
}

.modal-container {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 500px;
  transform: translate(-50%, -50%);
    box-shadow: 3px 3px 5px #000000cd;
}


@media screen and (max-width:600px) {
.modal-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width:95%;
  transform: translate(-50%, -50%);
    box-shadow: 3px 3px 5px #000000cd;
}
}

.modal-inner {
  position: relative;
  margin: 0px auto;
  width: 100%;
  height: auto;
}

button {
  position: absolute;
  top: calc(-1% - 8px);
  right: calc(-1% - 8px);
  padding: 3px;
  width: 30px;
  height: 30px;
  border: 3px solid #fefefe;
  border-radius: 50%;
  background-color: #000;
  font-size: 20px;
  box-shadow: 2px 2px 3px #888;
  line-height: 10px;
  color: #FFF;
  cursor: pointer;
}

.mb-200{
margin-bottom: 200px;
}

.douga{
  width: 100%;
max-width: 720px;
}