﻿@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
.font1,
.topTxt1,
.pc_nav a .en,
.f_contact_box .txt_color1{
    font-family: 'Fugaz One', cursive;
}

.linkStyle{
    color:#bf9d74;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}





/*--all page---------------------------
-------------------------------------*/
#fakeloader .fl{
    max-width:350px;
}
.logo1{
    max-width:200px;
    margin-right:20px;
}
.header-in{
    height:80px;
    box-shadow:none;
}
.pc_nav li a .font_16{
    color: #f5972d;
}
.menu_btn{
    border:0;
    box-shadow:none;
}
footer .width_1280-max{
    text-align:center;
}
.f_contact_box .font1{
    font-size: 3rem;
    font-weight: normal;
}
.fa-envelope:before{
    display:none;
}

/*--top page---------------------------
-------------------------------------*/
#main_img{
    padding-top:0;
    height:100vh;
    position:relative;
}
/*
#video{height: 100vh;}
#main_img{max-height: inherit;}
*/

#main_img::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.1);
    top:0;
    left:0;
    z-index:1;
}
.sample{
    bottom:10%;
    left:5%;
    z-index:2;
}
.catch{
    width:40vw;
    top:20%;
    left:5%;
    z-index:2;
}
.topTxt1{
    font-size:3rem;
    font-weight:normal;
}
#con1{
    background-image:url(./Dup/img/machi.png);
    background-repeat:repeat-x;
    background-position:bottom;
    background-size:100% 120px;
    background-color: #fdfaef;
}
#con1 h2{
    font-size:2rem;
    margin-top:20px;
}
.man{
    width:20vw;
    margin-left:0;
    margin-right:0;
    margin:auto;
}
.con1_squ span{
    display:none;
}
.con2_sub,
.con3_sub{
    font-size: 3rem;
    font-weight: normal;
    border-radius: 67px;
    padding: 11px 25px 9px;
}
.con2_sub{
    margin-left:-50px;
}
.con2_sub .arrow,
.con3_sub .arrow{
    width: 0;
    height: 0;
    border-left: 16px solid #0000;
    border-right: 16px solid transparent;
    border-top: 15px solid;
    margin-left: -8px;
    bottom: -14px;
}
.con2_sub .arrow{
    left: 15%;
}
.con3_sub .arrow{
    left: 50%;
}
#con3{
    background-image:url(./Dup/img/bg.png);
    background-repeat:no-repeat;
    background-position:bottom;
    background-size:100% 90px;
    background-color: #fdfaef;    
}
#con3 .box .img {
    border-radius: 20px;
}

/*top page animation*/
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}
.rotateYTrigger{
    opacity: 0;
}
.swing_item{
    transform-origin: center center;
    animation: swing 1s steps(2, start) infinite;
}
@keyframes swing{
    0%{
        transform:rotate(-10deg);
    }
    100%{
        transform:rotate(5deg);
    }
}

/*--under page---------------------------
-------------------------------------*/
.pagetitle{
    background-color:transparent;
}
.pagetitle_img{
    background-size:cover;
    opacity:0.5;
}
.cate_list li a{
    border-color:#f5972d;
}
.cate_list li a:hover,
#page10 .sitemap li a:hover{
    background-color:#f5972d;
    color:white;
    border-color:#f5972d;
}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img{
    height:50vh;
}
.catch{
    width:50vw;
}
.man{
    width:35vw;
}
#con1{
    background-size:100% 50px;
}
.con2_sub{
    margin-left:-20px;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.header{
    padding-right:10px;
}
.header-in{
    margin-top:0;
}
#main_img{
    height:37vh;
}
.logo1{
    max-width:150px;
    padding-left:0;
}
.catch{
    width:60vw;
    top:42%;
}
#con1{
    background-size:100% 30px;
}
#con1 h2{
    font-size:1.5rem;
}
.man{
    width:60vw;
}
.con2_sub{
    font-size:2rem;
    margin-left:-10px;
}
#con3{
    background-size:100% 50px;
}
.menu_btn{
    width: 50px;
    height: 50px;
    padding: 16px 18px 20px 18px;
}
.menu_btn.stick_trans {
    padding: 20px 18px 15px 18px;
}
#sp_nav .sp_nav_inner .menu__header .logo3 img{
    max-width:150px;
}
.f_contact_box .font_50{
    font-size:30px;
}

    
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){

}


