@charset "UTF-8";
html {
  font-size: 62.5%;
    scroll-behavior: smooth;
}
@media screen and (max-width: 767px) {
  html{
    font-size: 2.1vw;
      
  }
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
    line-height: 1.8;
    font-family: "Gothic Medium BBB",;
    letter-spacing: 0.08em;
    color: #333;
  }
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.6rem;
    line-height: 1.8;
    font-family: "Gothic Medium BBB",;
    color: #333;
  }
}

@media screen and (min-width: 768px) {
  .vsp { display: none !important; }
}
@media screen and (max-width: 767px) {
  .vpc { display: none !important; }
}

a {
  color: #333;
}
a:hover {
  text-decoration: none;
}



body {
    position: relative;
    background: #ffffff;
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}
.wall_btn_online {
    position: fixed; top:12rem; right:0;
    z-index: 1000;
}



header {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 1920px;
    height: 100px;
}
header .logo {
    position: absolute; top:2rem; left: 4rem;
}
header nav {
    position: absolute; top:4rem; right: 35rem;
    text-align: right;
}
header nav a {
    margin-left: 1rem; 
    font-size: 1.4rem;
    font-weight: bold;
}
header nav a:hover {
    opacity: 0.6;
    transition: 0.2s;    
}
        @media screen and (max-width: 1450px) {
            header nav {
                position: absolute; top:9.5rem; left:2.5rem;
                text-align: left;
                width: 100%;
            }
        }

header .btn_toiawase {
    position: absolute; top:3rem; right: 1.3rem;
}

main {
    padding: 0 0 10rem 0;
}


.kv {
    min-width: 1260px;
    height: 600px;
    background: url("../img/kv_bg.jpg") no-repeat;
    background-position: center top;
}
    @media screen and (max-width: 1350px) {
        .kv {
            background: url("../img/kv_bg1350.jpg") no-repeat;
            background-position: center top;
        }
    }
    @media screen and (max-width: 1220px) {
        .kv {
            background: url("../img/kv_bg1350.jpg") no-repeat;
            background-position: center top;
        }
    }

.kv .inner {
    position: relative;
    width: 1260px;
    margin: 0 auto;
}
.kv .btn_cam {
    position: absolute;
    top: 50%; /* 縦方向中央に配置（必要に応じて調整） */
    left: 50%; /* 横中央起点 */
    transform: translateX(calc(12rem)); /* 右に10rem移動 */
    width: 200px; /* 任意のボタンサイズ */
    cursor: pointer;
}
.kv .btn_cam img {
    margin-top: 5rem;
    width: 100%;
}
.kv .btn_online {
    position: absolute; 
    top:39rem;
    left: 29%; /* 横中央起点 */
}
    @media screen and (max-width: 1350px) {
        .kv .inner {
            position: relative;
            width: 1350px;
            margin: 0 auto;
        }
        .kv .btn_cam {
            position: absolute;
            top: 50%; /* 縦方向中央に配置（必要に応じて調整） */
            left: 50%; /* 横中央起点 */
            transform: translateX(calc(4rem)); /* 右に10rem移動 */
            width: 180px; /* 任意のボタンサイズ */
            cursor: pointer;
        }
        .kv .btn_cam img {
            width: 100%;
            height: auto;
        }
        .kv .btn_online {
            position: absolute; 
            top:39rem;
            left: 25%; /* 横中央起点 */
        }            
    }


.g1 {
    background: #fff;
    padding: 5rem 0 10rem 0;
}

.g2 {
    background: #eefbff;
    padding: 10rem 0 10rem 0;
}
.g2 .btn_online {
    text-align: center;
    margin: 0 auto;
    padding: 3rem 0 0 0;
}
.g2 .btn_trial {
    text-align: center;
    margin: 0 auto;
    padding: 3rem 0 0 0;
}
.g3 {
    background: #fff;
    padding: 10rem 0 10rem 0;
}
.g4 {
    background: #eefbff;
    padding: 10rem 0 10rem 0;
}

.g5 {
    background: #fff;
    padding: 10rem 0 15rem 0;
}

.g6 {
    background: #fffcf2;
    padding: 5rem 0 10rem 0;
}
.cam_wrap {
    position: relative;
    background:url("../img/g6.png") no-repeat;
    background-position: top center;
    height: 871px;
    width: 100%;
}
.cam_wrap .btn_online {
    position: absolute; 
    top:66rem;
    text-align: center;
}
.cam_wrap .btn_trial {
    text-align: center;
    position: absolute; 
    top:76rem;
}

.g7 {
    background: #fff;
    padding: 10rem 0 10rem 0;
}
.g8 {
    background: #f5f5f5;
    padding: 10rem 0 10rem 0;
}
.g9 {
    background: #fff;
    padding: 10rem 0 10rem 0;
}

.g1 .inner, .g2 .inner, .g3 .inner, .g4 .inner, .g5 .inner, .g6 .inner, .g7 .inner, .g8 .inner, .g9 .inner {
    width: 1260px;
    margin: 0 auto;
}
.g1 .inner img.pcimage, 
.g2 .inner img.pcimage, 
.g3 .inner img.pcimage,
.g4 .inner img.pcimage, 
.g5 .inner img.pcimage,
.g6 .inner img.pcimage, 
.g7 .inner img.pcimage,
.g8 .inner img.pcimage,
.g9 .inner img.pcimage {
    width: 100%;
    height: auto;
}
    @media screen and (max-width: 1260px) {
        .g1 .inner, .g2 .inner, .g3 .inner, .g4 .inner, .g5 .inner, .g6 .inner, .g7 .inner, .g8 .inner, .g9 .inner {
            width: 100%;
            margin: 0 auto;
        }
        .cam_wrap {
            position: relative;
            background:url("../img/g6.png") no-repeat;
            background-position: top center;
            background-size: 100% auto;
            height: 60rem;
            width: 100%;
        }
        .cam_wrap .btn_online {
            position: relative; 
            top:46rem;
            margin: 0 auto;
            text-align: center;
        }
        .cam_wrap .btn_trial {
            text-align: center;
            position: relative; 
            margin: 0 auto;
            top:49rem;
        }
    }





footer {
    width: 100%;
    border-top: 1px solid #ccc;
    padding: 5rem 0 0 0;
}
footer .inner {
    position: relative;
    width: 1260px;
    height: 350px;
    margin: 0 auto;
}
footer .foot_logo {
    position: absolute; left:0; top:0;
    font-size: 1.4rem;
}
footer .foot_logo img {
    margin-bottom: 1rem;
}
footer .copyright {
    position: absolute; bottom: 5rem;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
}
footer .foot_btn_online {
    position: absolute; top:0; right: 2rem;
}
footer .foot_btn_trial {
    position: absolute; top:8rem; right: 2rem;
}

footer nav {
    position: absolute; bottom: 11rem;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;    
}
footer nav a:hover {
    text-decoration: underline;
}
    @media screen and (max-width: 1260px) {
        footer .inner {
            width: 100%;
            height:400px;
        }
        footer .foot_logo {
            position: absolute; left:3rem; top:0;
        }
    }
    @media screen and (max-width: 890px) {
        footer {
            width: 100%;
            border-top: 1px solid #ccc;
            padding: 5rem 0 0 0;
        }
        footer .inner {
            position: relative;
            width: 100%;
            height:auto;
            margin: 0 auto;
        }
        footer .foot_logo {
            position: relative; left:0; top:0;
            font-size: 1.4rem;
            margin-bottom: 6rem;
            text-align: center;
        }
        footer .foot_logo img {
            margin-bottom: 1rem;
        }
        footer .copyright {
            position:static; bottom:rem;
            width: 100%;
            margin-bottom: 3rem;
            text-align: center;
            font-size: 1.4rem;
        }
        footer .foot_btn_online {
            position: static; top:0; right: 50%;
            text-align: center;
            margin-bottom: 3rem;
        }
        footer .foot_btn_trial {
            position: static; top:8rem; right: 50%;
            text-align: center;
            margin-bottom: 6rem;
        }

        footer nav {
            position: static; bottom: 0;
            width: 100%;
            margin-bottom:3rem;
            padding: 2rem;
            text-align: center;
            font-size: 1.4rem;    
        }
    }



.linkop {
    transition : 0.3s;
    cursor: pointer; 
}
.linkop:hover {
    opacity: 0.6;
}

.linkef {
    margin: 0 auto;
}
.linkef a img {
    transition: transform 0.3s ease;
    cursor: pointer; 
}
.linkef a img:hover {
    opacity: 1.0;
    transform: translateY(-5px) scale(1.05);
}


.anchor {
    position:fixed; bottom: 2rem; right: 2rem;
}
    @media screen and (max-width: 890px) {
        .anchor {
            position:fixed; bottom: 2rem; right: 2rem;
        }
    }



.updown {
animation-name:updown1;   /* アニメーション名の指定 */
animation-delay:0s;   /* アニメーションの開始時間指定 */
animation-duration: 3s;   /* アニメーション動作時間の指定 */
animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
animation-iteration-count: infinite; 
}
@keyframes updown1 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0);
}
}