﻿@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
.font1,
h2,h3,h4{
    font-family: 'Zen Maru Gothic',"Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
}

/*
#fakeloader{
    display:none;
}
*/


/*--all page---------------------------
-------------------------------------*/
.linkStyle{
    color:#302828;
    transition:all 0.3s;
    text-decoration:underline;
}
.linkStyle:hover{
    opacity:0.7;
}

body{
    overflow:hidden;
}
#fakeloader .fl{
    max-width: 400px;
}
.header-in{
    -webkit-box-shadow: none;
    box-shadow: none;
    border:2px solid #1e4da4;
}
.menu_btn{
    box-shadow: none;
    border:2px solid #F7CC38;
}
.logo1 {
    max-width: 260px;
}
.f_contact_box h4{
    line-height:1;
}
.logo2 a{
    max-width: 300px;
}
#sp_nav .sp_nav_inner .menu__header .logo3 img {
    max-width: 300px;
}
footer p{
    text-align: center;
}
.pagetop{
    border:2px solid #fff;
}
.fix_bnr{
    right:90px;
    z-index:2;
}


/*--top page---------------------------
-------------------------------------*/

/*動画来るまでのFV処理*/
/*
#main_img{
    height: calc(100vh - 100px);
    overflow: hidden;
}
*/
#main_img::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 136px;
    background-image: url(../dup/img/machi.png);
    background-size: auto 100%;
    background-position-y: 0;
    background-position-x: 0;
    background-repeat: repeat-x;
    animation: loop 30s linear infinite;
    opacity: 0.7;
}
@keyframes loop{
    0% {
    background-position-x: -1000px;
}
100% {
    background-position-x: 0;
}
}

#main_img .item1{
    width:240px;
    bottom:70px;
    left: 50%;
    transform: translateX(-50%);
}
#main_img .cat{
    width: 170px;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}
.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;
}
}

.con3_bnr{
    border-radius:30px;
}
#con4{
    display:none;
}

#topCms {
    background-image: url(./Dup/img/item6.png),url(./Dup/img/item6.png);
    background-repeat:no-repeat,no-repeat;
    background-position:top -10px left -10px, bottom -10px right -10px;
    background-size:13%,13%;
}

.cms_1-a .box_img1{
    border-radius:20px;
}


/*--under page---------------------------
-------------------------------------*/

.v_type1 .triangle {
    display: block;
    border: #222 solid 2px;
    box-shadow: 5px 5px 0 0 #e2e2e2;
}
.v_type1 .triangle:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #FFF transparent;
    border-width: 13px 13px 0 0;
    bottom: -13px;
    left: 50%;
    margin-left: -9px;
}
.v_type1 .triangle:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    border-style: solid;
    border-color: #222 transparent;
    border-width: 15px 15px 0 0;
    bottom: -17px;
    left: 50%;
    margin-left: -11px;
}

/* ---------- responshive ---------- */
@media screen and (max-width: 1536px){
#main_img{
    padding-bottom:100px;
}
}


@media screen and (max-width: 1366px){

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.header-in{
    border: none;
}
#main_img {
    padding-bottom: 125px;
}
#main_img .cat {
    width: 120px;
}
#topCms{
    background-size: 20%,20%;
}
.cms_1-a .box_img1{
    border-radius:10px;
}
.fix_bnr {
    right: 80px;
}
#cms_2-g .cate_title {
    line-height: 1.5;
    font-size: 2em;
}
.logo1{
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #1e4da4;
}


}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#fakeloader .fl{
    width:100%!important;
    max-width: 300px;
}
.logo1 {
    max-width: 200px;
}
#con3 .title .sl{
    display:none;
}
.f_contact_box h4{
    font-size:30px;
}
.fix_bnr a{
    width:220px;
}

#cms_2-g .cate_title{
    font-size: 1.5em;
}
}




