/* ---------- font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Shippori+Mincho:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root{
    --font-jp: "Shippori Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    --font-en: "Marcellus", serif;
	/*font-family: "Shippori Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
}
h2,h3,h4{
    font-family: var(--font-jp);
}
.font_en, a[href^="tel:"], .top_title h2{
    font-family: var(--font-en);
}
#contents .con_title, .intro_title1, .cms_title h3, #page_title .jp {
    font-weight: normal;
}
#footertxt, #h1txt{
    color: var(--normal);
}
.info_btn_wrap a, #pc_nav li a::after, .overlay .overlay-nav .bottom a, .overlay ul.sp_tel li a{
    background-color: var(--color1)!important;
}
.info_btn_wrap a:hover, .overlay .overlay-nav .bottom a:hover, .overlay ul.sp_tel li a:hover{
    background-color: var(--color3)!important;
}


/* ---------- color ---------- */
footer #footer_info {
    background-color: #f7f7f7;
}
#pc_nav li a {
    color: var(--normal);
}


/* ---------- all ---------- */
body{
    min-width: 1280px;
}

#loading{
    background-color: #fff!important;
}
.progressbar-text {
    color: var(--normal)!important;
}

#logo {
    opacity: 0;
    transition: all .3s;
    padding: 15px;
}
#logo img{
    max-width: 195px;
}
header.scr_header #logo,header:not(.top) #logo{
    opacity: 1;
} 
header.scr_header,header:not(.top) {
    background-color: rgb(255 255 255 / 60%)!important;
   /*  backdrop-filter: blur(8px); */
}

main.blur {
     background: none!important;
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important;
}
/*body:before, body:after {
    background-image: url(../img/bg_item1.png)!important;
    background-size: 60%!important;
    background-position: right top!important;
    background-repeat: no-repeat!important;
}*/
body:before {
    background-image: url(../img/bg_item1.png) !important;
    background-size: 100% !important;
    background-position: right top !important;
    background-repeat: no-repeat !important;
    top: -61% !important;
    right: -15% !important;
    width: 64% !important;
    height: 136% !important;
    left: auto !important;
    z-index: -1;
}
body:before {
  animation: crossfade 12s infinite,rotateAnimation 30s linear infinite;
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.menu-trigger-bar {
    height: 3px!important;
    background-color: #898989!important;
}
.close-trigger-bar {
    height: 3px!important;
}

.fix_banner{
    bottom: 43px;
    right: 29px;
}
.fix_banner a {
    border-radius: 50px;
    background-color: var(--color3);
    max-width: 280px;
    box-shadow: 3px 8px 18px rgba(9, 9, 9, 0.13);
    border: none;
    padding-top: 20px;
    padding-bottom: 20px;
}
.fix_banner a:hover{
    background-color: var(--color1);
    transform: translateY( -10px);
}
.more_item::before{
    display: none;
}
.more_item .text {
    font-size: 18px;
    padding-left: 0;
    text-transform: none;
}

.menu-trigger, .close-trigger{
    top: 63%!important;
}

.modal-open span, .more a, .info_btn_wrap a, .overlay .overlay-nav .bottom a, .overlay ul.sp_tel li a, #contact_tel a{
    border-radius: 50px;
}
.square_img, .rectangle_img, .normal_img img {
    border-radius: 5px;
}



/* ---------- top ---------- */
.scroll, #main_img:before{
    display: none;
}

.fv_img {
    left: -40px;
    top: -40px;
    width: max(43vh,400px);
    width: min(30%,400px);
}
.fv_txt{
    width: min(44%, 689px);
    left: 49%;
}
.fv_txt .logo_anim img{
    transform: translateY(-20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.fv_txt .logo_anim:first-of-type img{
	opacity: 1;
	transform: translateY(0);
}

.fv_txt .logo_anim.start img{transform: translateY(0);opacity: 1;}

#intro{
    background: url( "../img/intro_bg.png" ) center / cover no-repeat;
    position: relative;
    z-index: 3;
}
#intro_wrap {
    background-image: url(../img/loop_txt.png);
    background-size: 1500px;
    background-position-x: 0;
    background-position-y: calc(100% - 124.35px);
    background-repeat: repeat-x;
    animation: anime1 30s linear infinite;
}
@keyframes anime1 {
    0% {background-position-x: 0;}
    100% {background-position-x: -1500px;}
}
@keyframes anime2 {
    0% {background-position-x: 0;}
    100% {background-position-x: -800px;}
}

#intro .intro_right {
    width: 80%;
    margin: auto;
}
.intro_txt{
    font-size: 18px;
    line-height: 2.2;
}
#video{
    margin: auto;
    margin-top: 50px;
    max-width: 900px;
}
#video .video{
    border-radius: 10px;
    box-shadow: 3px 8px 35px rgb(9 9 9 / 3%);
}

#contents .con_title {
    font-size: 40px;
}
.slash:before, .slash:after{
    display: none;
}
.modal_title_wrap{
    display: none;
}
.modal_title2 {
    font-weight: bold;
}
.modal-box .inner {
    border-radius: 10px;
}

.top_cms_box{
    border: none;
    background-color: #f7f7f7;
    border-radius: 26px;
}

.check {
    /* background: #f7f7f7; */
    padding: 10px;
    border-radius: 10px;
   /*  display: inline-block; */
}
.check li {
    background: url(../img/check.png);
    background-repeat: no-repeat;
    background-position: 0 5px;
    background-size: 28px;
    padding: 5px 5px 5px 38px;
    font-size: 16px;
    text-align: left;
}
@media screen and (max-width: 667px){
.check li {
    background-size: 21px;
    padding: 2px 3px 2px 30px;
    font-size: 14px;
}
}





/* ---------- under ---------- */
#page_title_img{
    background: url( "../img/page_title_img.jpg" ) center / cover no-repeat;
}
#page_title_img:before {
    background-color: rgb(255 255 255 / 15%);
}
#page8 #form_box input, #page8 #form_box textarea {
    background-color: rgb(237 237 237 / 70%);
}
#page_title .jp:before{
    background-color: var(--normal);
}



/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
#loading_logo {
    max-width: 233px;
}
body {
    min-width: 100%;
}
body:before {
    top: -50% !important;
    right: -30% !important;
    width: 106% !important;
    height: 83% !important;
}
#main_img{
    height: 580px !important;
}
.fv_txt {
    width: min(49%, 689px);
}
#intro{
    z-index: 2;
}
.intro_title1 , #contents .con_title, .cms_title h3{
    font-size: 30px!important;
}
#intro_wrap{
    background-position-y: calc(100% - 409px);
}
#video{
    max-width: 555px;
        margin-top: 110px;
}
}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
#loading_logo {
    max-width: 248px;
    top: 50%;
}
#loading #loading_text .progressbar-text {
    top: 73%;
}
#logo {
    padding: 0;
}
#logo img {
    max-width: 111px;
}
.fix_banner {
    bottom: 19px;
}

body:before {
    top: -22% !important;
    right: -53%!important;
    width: 129% !important;
    height: 63% !important;
}

#main_img {
    height: 100svh!important;
}
.fv_txt {
    width: 69%;
    top: 52%;
}
.fv_img {
    width: 40%;
    transform: rotate(14deg);
    left: 0;
}

#intro .intro_right {
    width: 95%;
}
.intro_title1, #contents .con_title, .cms_title h3 {
    font-size: 25px !important;
}
.intro_txt {
    font-size: 16px;
    line-height: 1.8;
}
#intro_wrap {
    background-size: 800px;
    background-position-y: calc(100% - 63px);
    animation: anime2 30s linear infinite;
}
#video {
    margin-top: 30px;
}

#contents_wrap{
    padding: 0 6%;
}
.fix_banner a{
    padding-top: 10px;
    padding-bottom: 10px;
}
#logo2 img{
    max-width: 224px;
    margin-top: 20px;
}

}