@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

#header h1#logo{
    max-width: 100px;
}

h3.con_title{
    font-family: 'Staatliches', cursive;
}

h3.intro_title1{
        line-height: 1.3em;
    font-size: max(3vw, 35px);
    transform: scale(0.9);
}

#logo2 img{
    max-width: 150px;
}

footer #footer_info {
    background-color: #cdcdcd;
}

.bg_color1,.hvr_bg_color1:hover{background-color: #58d016;} 
.border_color1,.hvr_border_color1:hover{border-color: #42a10d;}

#loading .kvArea {
    max-width: 150px;
}

#loading {
    background-color: #f7f7f7;
}

.progressbar-text{
        color: rgb(95, 189, 24) !important;
}

.bg_color3,.hvr_bg_color3:hover{background-color: #646464;}

.border_color3,.hvr_border_color3:hover{border-color: #646464;}

.intro_img2{
    display: none;
}

.con_box p.con_txt span{
    font-size: max(1.5vw, 24px);
    max-width: 70%;
    text-align: center;
        font-weight: bold;
    color: #263752;
}

.top_title .slash:before, .top_title .slash:after {
    display: none;
}

span.slash{
       color: #474b50;
}

span.slash:first-letter {
    color: #58d016;
}

#main_img:after{
       content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/copy.png), url(./Dup/img/left.png), url(./Dup/img/catch.png), url(./Dup/img/right.png), url(./Dup/img/back_re.jpg);
    background-position: 94% 40%, 5% 50%, center, bottom right, center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 500px, 35%, cover, 550px, cover;
    pointer-events: none;
}

.more a{
        background-color: #0054a8;
            border: none;
}

#pc_nav li a, #footer_nav li a {
        font-weight: bold;
    background-color: white;
    color: black;
}

.scr_header #pc_nav li a{
    background-color: transparent;
}

.scr_header h1#logo img{
    max-width: 70px;
}


header.scr_header {
    background-color: rgba(255,255,255,0.5) !important;
}

.menu-trigger-bar {
    background-color: #0054a8;
}

#page_title_img {
    height: 400px;
}

#page_title_img:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/sub_main1.jpg);
    background-position:  center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
    z-index: 1;
}

#footertxt span, #h1txt span{
    color: black;
}

#contact_tel a, #contact_tel2 a{
        font-size: 16px;
    letter-spacing: 0.01em;
}

.mnd{
    margin: 20px auto;
}

.box3 .con_box_item, .box2 .con_box_item{
    position: relative;
}

.box2 .con_box_item:before{
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 10%;
    left: 100%;
    background-image: url(./Dup/img/conte.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

.box3 .con_box_item:before{
        content: "";
    display: block;
    width: 180px;
    height: 180px;
    position: absolute;
    top: 0%;
    left: 10%;
    background-image: url(./Dup/img/hito.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 60%;
    pointer-events: none;
}

#top_cms .cms_title .bar {
    background-color: #58d016;
}

.close-trigger-bar:before {
    background-color: rgba(0,0,0,1) !important;
}

.cate_list:before {
    background-color: #58d016 !important;
}

#cms_5-b .cate_box .open_bt .box_title1::before {
    color: rgb(0, 84, 168) !important;
}

.linkStyle{
color: #29a9e0;
font-weight: bold;
}

.pager li a:hover, .pager li a:hover span i{
    color: #58d016;
}

#main_img .scr{
        text-shadow: 1px 1px #58d016, -1px -1px #58d016, -1px 1px #58d016, 1px -1px #58d016;
}

/* ----------- カスタム ---------- */
@media screen and (max-width: 1000px){
#main_img:after {
    background-size: 500px, 35%, 130%, 550px, cover;
}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#contents .con_title {
    font-size: max(2.4vw, 36px);
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main_img:after {
    background-size: 75%, 35%, 160%, 360px, cover;
    background-position: 50% 25%, 5% 70%, center, bottom right, center;
}

header{
        background-color: rgba(255,255,255,0.6) !important;
}

header h1#logo a img{
        max-width: 60px;
}

#loading #loading_text .progressbar-text {
    top: 68%;
}

h3.intro_title1 {
    margin-left: 0.5em;
        font-size: max(3vw, 28px);
}

#page_title_img {
    height: 45vh;
}

.con_box p.con_txt span {
    font-size: max(1.5vw, 18px);
    max-width: 100%;
}

}