@import url('https://fonts.googleapis.com/css2?family=Mohave:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=swap');

.font1,
#top_cms .top_cms_title h2 span,
.more_bt a,
#top_info .more_bt2 a,
#page_title .box h2 span,
#page10 .more_bt2 a h2 span{
    font-family: 'Mohave', sans-serif;
    line-height:1;
}
.font2{
    font-family: 'Mrs Saint Delafield', cursive;
}



.linkStyle{
    color:#e53e3e;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}



/*--all page---------------------------
-------------------------------------*/
#body{
    background-color: #e3e5de;
    overflow:hidden;
}
#pc_nav ul:first-of-type,
#pc_nav ul:last-of-type{
    border-radius:0;
}
.more_bt a{
    border-radius:0;
    
}
#top_info{
    background-color:#333!important;
    color:#fff!important;
}
#top_info h2{
    background-color:#333!important;
    position:relative;
    z-index:2;
    font-size:2rem;
    padding-top:80px;
}
#top_info h2::before{
    content:'Information';
    position:absolute;
    display:block;
    font-family: 'Mrs Saint Delafield', cursive;
    font-size:2rem;
    color:#fff;
    bottom:40%;
    left:45%;
    transform-origin:bottom;
    transform:rotate(-11deg);
    z-index:1;
}
#top_info .width_1280-max{
    padding-top:20px;
}
#top_info .tel_bt a{
    color:#fff;
}
#top_info .tel_bt a:hover{
    color: #e53e3e;
}
.more_bt2 a{
    color:#fff;
    height:30px;
}
#f_contact a span.hover_box{
    background-color:rgba(51,51,51,0.7);
}
#bottom_menu{
    background-color:#333!important;
}
#page-top a{
    border-radius:0;
}

/*--top page---------------------------
-------------------------------------*/
/*
#video{height: 100vh;}
#main_img{max-height: inherit;}
*/

#main_img h2{
    line-height:1.2;
}
#main_img .sub_txt {
    z-index: 9;
    top: 24%;
    left: 1vw;
    font-size:12rem;
    letter-spacing:-5px;
}
/*ローディング後にフェードイン*/
.load-fade,.load-fade2 {opacity : 0; transition : all 5s/*処理にかかる時間*/;}
.load-fade.done{opacity : 0.15; transform : translate(0, 0);}
.load-fade2.done{opacity : 0.2; transform : translate(0, 0);}

/*右回転*/
.rotate {
  display: inline-block;
  animation: r1 50s linear infinite;
}
 
@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } 
}
#main_img .sub_txt2{
    top:-10%;
    left:-30%;
    width:83vw;
}

#main_img .txt{
    top:48%;
    left:4vw;
}

#intro figure{
    right:0;
}
#intro .font1{
    font-size:10rem;
    line-height: 1;
    color:white;
    padding-left:10%;
}
#intro .font2{
    font-size:3rem;
    padding-left:7%;
    transform-origin: left;
    transform: rotate(-10deg) translateY(42px);
}
.con1_sub_title,
.con2_sub_title{
    font-size:5rem;
}
.num{
    font-size:8rem;
    margin-left:10px;
}
#top_cms .font1{
    font-size:5rem;
}
#top_cms .font1 span{
    position:relative;
}
#top_cms .font1 span::before{
    content:'Check!';
    display:block;
    position:absolute;
    font-family: 'Mrs Saint Delafield', cursive;
    font-size:3rem;
    top:-27%;
    left:-10%;
    transform-origin:bottom;
    transform:rotate(-11deg);
}
#top_cms .font1::before,
#top_cms .font1::after{
    content:'';
    position:absolute;
    display:inline-block;
    width:200px;
    height:1px;
    background:#333;
    top:50%;
    transform:translateY(-50%);
    z-index:1;
}
#top_cms .font1::before{
    left:25%;
}
#top_cms .font1::after{
    right:25%;
}


#top_cms h2{
    text-align:center;
}
#top_cms .top_cms_title h2{
    color:#333;
}
#top_cms .top_cms_title h2 span{
    font-size:2rem;
    letter-spacing:1px;
}

/*text-animation*/
/*-------------------------------------------------------
				文字が下から順番に出るアニメーション
-------------------------------------------------------*/
p > span > span{
     display: inline-block;
     -webkit-transform: translateY(20px);
     transform: translateY(20px);
     -webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     opacity: 0;
}
p > span > span:nth-child(1){
-webkit-transition-delay: 200ms;transition-delay: 200ms;
-webkit-animation-delay: 200ms;animation-delay: 200ms;
}
p > span > span:nth-child(2){
-webkit-transition-delay: 250ms;transition-delay: 250ms;
-webkit-animation-delay: 250ms;animation-delay: 250ms;
}
p > span > span:nth-child(3){
-webkit-transition-delay: 300ms;transition-delay: 300ms;
-webkit-animation-delay: 300ms;animation-delay: 300ms;
}
p > span > span:nth-child(4){
-webkit-transition-delay: 350ms;transition-delay: 350ms;
-webkit-animation-delay: 350ms;animation-delay: 350ms;
}
p > span > span:nth-child(5){
-webkit-transition-delay: 400ms;transition-delay: 400ms;
-webkit-animation-delay: 400ms;animation-delay: 400ms;
}
p > span > span:nth-child(6){
-webkit-transition-delay: 450ms;transition-delay: 450ms;
-webkit-animation-delay: 450ms;animation-delay: 450ms;
}
p > span > span:nth-child(7){
-webkit-transition-delay: 500ms;transition-delay: 500ms;
-webkit-animation-delay: 500ms;animation-delay: 500ms;
}
p > span > span:nth-child(8){
-webkit-transition-delay: 550ms;transition-delay: 550ms;
-webkit-animation-delay: 550ms;animation-delay: 550ms;
}
p > span > span:nth-child(9){
-webkit-transition-delay: 600ms;transition-delay: 600ms;
-webkit-animation-delay: 600ms;animation-delay: 600ms;
}
p > span > span:nth-child(10){
-webkit-transition-delay: 650ms;transition-delay: 650ms;
-webkit-animation-delay: 650ms;animation-delay: 650ms;
}
p > span > span:nth-child(11){
-webkit-transition-delay: 700ms;transition-delay: 700ms;
-webkit-animation-delay: 700ms;animation-delay: 700ms;
}
p > span > span:nth-child(12){
-webkit-transition-delay: 750ms;transition-delay: 750ms;
-webkit-animation-delay: 750ms;animation-delay: 750ms;
}
p > span > span:nth-child(13){
-webkit-transition-delay: 800ms;transition-delay: 800ms;
-webkit-animation-delay: 800ms;animation-delay: 800ms;
}
p > span > span:nth-child(14){
-webkit-transition-delay: 850ms;transition-delay: 850ms;
-webkit-animation-delay: 850ms;animation-delay: 850ms;
}
p > span > span:nth-child(15){
-webkit-transition-delay: 900ms;transition-delay: 900ms;
-webkit-animation-delay: 900ms;animation-delay: 900ms;
}

p.is-show > span > span
{
     -webkit-animation-name: slide-bs;
     animation-name: slide-bs;
     opacity: 1;
}
@keyframes slide-bs{
     0%{-webkit-transform: translateY(20px);transform: translateY(20px);}
     100%{-webkit-transform: translateY(0);transform: translateY(0);}
}


/*--under page---------------------------
-------------------------------------*/





/* ---------- responsive ---------- */
@media screen and (max-width: 1630px){
#intro .font2{
    padding-left:2%;
    transform: rotate(-10deg) translateY(30px);
}
#intro .font1{
    padding-left:5%;
}
#top_cms .font1::before {
    left: 20%;
}
#top_cms .font1::after{
    right:20%;
}    
#top_info h2::before{
    left:42%;
}

}

@media screen and (max-width: 1400px){
#top_cms .font1::before {
    left: 10%;
}
#top_cms .font1::after{
    right:10%;
}    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img {
    height: 40vh!important;
    margin-top:90px;
}
#video{
    height:initial;
}
#main_img .sub_txt{
    font-size:7rem;
}
#intro{
    padding-top:30px;
}
#intro .font1 {
    font-size: 8rem;
}
.con1_sub_title, 
.con2_sub_title {
    font-size: 2rem;
}
.num {
    font-size: 3rem;
}
#top_cms .font1::before, #top_cms .font1::after{
    width:100px;
}
#top_info h2::before{
    left:34%;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main_img {
    height: 31vh!important;
    margin-top:65px;
}
#main_img h2 {
    font-size: 25px;
}
#main_img .sub_txt {
    font-size: 4rem;
}
#intro .intro_bg{
    height:97%;
}
#contents1 h2{
    font-size:1.6rem;
}
#top_info h2::before{
    font-size:4rem;
    bottom:11%;
}
#intro .font2{
    transform: rotate(-10deg) translateY(17px);
    font-size:2rem;
}
#intro .font1 {
    font-size: 4.5rem;
}
.info_txt{
    text-align:center;
}
.more_bt2 a{
    margin:auto;
}
#top_cms .font1 {
    font-size: 3rem;
}
#top_cms .font1::before, #top_cms .font1::after {
    width: 30px;
}
#top_cms .font1 span::before{
    font-size:2rem;
    top:-30%;
}
#top_info h2::before {
    font-size: 2rem;
    bottom: 40%;
    left:27%;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){

}