﻿
/* ---------- font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
body{
    font-weight: 500;
}



/* ---------- anim ---------- */
.load_anim,scroll_anim {
	opacity: 0;
}
.load_anim.start, .scroll_anim.start {
	animation: poyoyon 1s ease-in-out 1 forwards;
}
.fv_item2 .load_anim.start{
    animation-delay: 0.2s;
}
@keyframes poyoyon {
0% {
    opacity: 0;
    transform: translateY(50px) scale3d(0.5, 0.5, 0.5);
  }
  40% {
    opacity: 1;
    transform: translateY(-20px) scale3d(1, 1, 1);
  }
  70% {
    opacity: 1;
    transform: translateY(5px) scale3d(1, 1, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale3d(1, 1, 1);
  }
}

.kaku {
    display: inline-block;
    animation: kaku 1s infinite steps(2);
}
 @keyframes kaku {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-10deg); }
  }


/* ---------- all ---------- */
#logo {
    width: 185px;
}
#wrap{
    min-width: 1200px;
}
#header{
    background-color: #fff;
}
#header_contact span{
    color: #fff;
}
#header_contact a.btn_back{
    background-color: #212121;
}
#header_contact a.btn_back:hover {
    background-color: var(--color1);
}
#pc_nav li a .txt_color3{
    color: #212121;
}
#top_contents2, #top_contents2 div span.after{
    background-color: var(--color3);
}



/* ---------- top ---------- */
header span.after, header span.before {
    display: none;
}
#vegas {
    height: 100%;
    margin-bottom: 0;
}
.fv img.fv_bg {
    margin-top: -5px;
}
.fv_txt{
    z-index: 2;
    left: 0;
    right: 0;
    margin: auto;
    width: 52.1%;
    bottom: 48.5%;
}
.fv_item1 {
    z-index: 2;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -2vw;
}
.fv_item2 {
    z-index: 3;
    right: 4.5%;
    bottom: 25%;
    width: 28%;
}
#top_message{
    margin-bottom: 0;
}
.top_message_wrap{
    position: relative;
    padding: 150px 0;
    background-color: var(--color4);
    background: url( "../img/bg1.jpg" ) center / cover no-repeat;
}
#top_message h2 {
    font-weight: bold;
    font-size: clamp(25px, 4vw, 45px);
    line-height: 1.4;
    text-align: center;
}
#top_message .intro_txt {
    font-size: 19px;
}

.item1 {
    width: 1467px;
    position: absolute;
    bottom: 0px; /* 好きな位置に調整 */
    left: 100%; /* 初期位置：画面の外（右） */
    animation: carMove 30s linear infinite;
}
@keyframes carMove {
  0% {
    left: 100%;   /* 画面右の外から */
  }
  100% {
    left: -1550px; /* 画面左の外へ（画像の幅より少し大きめに） */
  }
}
@keyframes carMove_tb {
  0% {
    left: 100%;   /* 画面右の外から */
  }
  100% {
    left: -1000px; /* 画面左の外へ（画像の幅より少し大きめに） */
  }
}
@keyframes carMove_sp {
  0% {
    left: 100%;   /* 画面右の外から */
  }
  100% {
    left: -574px; /* 画面左の外へ（画像の幅より少し大きめに） */
  }
}
.anim_type2{
	position: relative;
	animation-name: anim_type2;
	animation-iteration-count: infinite;
	animation-duration: 0.1s;
	animation-direction: alternate;
	animation-timing-function: steps(2);
	transition-duration: .3s;
	transition-property: transform;
}
@keyframes anim_type2 {
	0% {bottom: 0;}
	100% {bottom: -3px;}
}

.intro_title1 {
    margin-top: -7%;
}
.intro_title2{
    margin-top: -9%;
    margin-bottom: 20px;
}
.top_contents2_box {
    margin: 5% 10% 3% auto;
}

.cms_title h2 {
    font-size: clamp(25px, 4vw, 45px);
}
.cms_title p {
    padding-left: 8px;
    font-size: clamp(18px, 3vw, 33px);
    margin-top: -27px;
}



/* ---------- under ---------- */
#filter_white {
    background-color: rgb(255 237 50 / 72%);
}
#filter_white h2{
    color: #222;
}
#page-top {
    width: 126px;
}

/* ---------- 1400px ---------- */
@media screen and (max-width: 1400px){
#top_contents1 div span.after, #top_contents2 div span.after {
    width: 63%;
}

/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
#wrap{
    min-width: 100%;
}
.fv img.fv_bg {
    margin-top: 63px;
}
.fv_txt {
    width: 62.1%;
    bottom: 42.5%;
}
.fv_item2 {
    right: 3.5%;
    bottom: 24%;
    width: 25%;
}

.l-hdr-toggle {
    top: 20px!important;
    right: 3.94444%!important;
}
.item1 {
    width: 1000px;
    animation: carMove_tb 30s linear infinite;
}
.top_message_wrap{
    padding: 100px 0 130px;
}
#top_message .intro_txt {
    font-size: 15px;
}
.intro_title1{
    width: 65%;
    margin: -7% auto 3px;
}
.intro_title2{
    width: 69%;
    margin: -5% auto 15px;
}
.cms_title p{
    margin-top: 0;
}

}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
#header{
    top: 0;
}
#logo {
    width: 139px;
    margin: 0px auto 0px 13px;
}
.l-hdr-toggle {
    top: 16px !important;
    }
.fv img.fv_bg {
    margin-top: 63px;
}
.fv_txt {
        width: 86.1%;
        bottom: 47.5%;
        transform: rotate(3deg);
    }
.fv_item1 {
    bottom: -3vw;
}
.fv_item2{
    display: none;
}
#top_message.scroll_anim.start {
	animation: none;
	opacity: 1!important;
}

.top_message_wrap {
        padding: 65px 0 70px;
    }
#top_message .intro_txt {
    font-size: 14px;
}
.item1 {
    width: 574px;
    animation: carMove_sp 30s linear infinite;
}

.top_contents1_box, .top_contents2_box{
}
.intro_title1, .intro_title2{
    width: 100%;
}
.top_contents2_box {
    margin: 5% 10% 12% auto;
}
.cms_title p {
    padding-left: 4px;
}
.cate{
    padding-top: 20px;
}
}







