﻿/*--------リンク・フォント--------*/
.linkStyle{color: #333333; text-decoration: underline;}


/*--------全体--------*/
.add_shadow1{box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
figure,figure img{border-radius:20px;}
#video{margin-bottom: -11px;}
#loader {height: 105vh;}
#main_nav.bg_color3 { background-color: #7cd4e9;}


@media screen and (min-width: 769px){
#header h1{width: 20%!important;}
.sc_nav .logo{    width: 18%!important;}
#loader > div figure {width: 35%;}
footer h2 a.width_400-max{max-width: 300px;}
#page10 .sitemap_wrap ul li:nth-of-type(3n+1){margin-left: 0%;}
}
#main_img #video{position:relative;}
#main_img #video::before {
    content: "";
    position: absolute;
    display: inline-block;
    background: url(./Dup/img/main_catch.png) no-repeat;
    background-size: contain;
    width: 70%;
    height: 36.5%;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

#contents1 {
    background: url(./Dup/img/back1.jpg) no-repeat center;
    background-size: cover;
}
#contents2_title{
    white-space: break-spaces;
    line-height: 1.2;
}
#contents2 > div{position:relative;}
#contents2 > div:before{
    content: "";
    width: 113%;
    height: calc(100% - 20%);
    background: rgba(218, 235, 242, .75);
    background-image: url(./Dup/img/back2.jpg);
    background-position: 50% 60%;
    background-size: cover;
    position: absolute;
    top: 14%;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
}

#top_cms .bg_color2{
    position:relative;
    background:none;
}
#top_cms .bg_color2:before{
    content: "";
    width: 100%;
    height: calc(100% - 157px);
    background: rgba(218, 235, 242, .25);
    position: absolute;
    top: 157px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
#top_cms .bg_color_add.bg_color2:before {
    content: "";
    width: 100%;
    height: calc(100% - 157px);
    background: rgba(204, 204, 204, .25)!important;
    position: absolute;
    top: 157px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
footer #footer .tel a {color:#ffffff;}
footer #footer .tel a.bg_color2 {background-color: #0071bc;}
#nav_wrap .sns_links ul li a img,#footer .sns_links ul li a img{height: 74%!important;}

/*--------下層--------*/
#page04 #cms_2-d .cate_title{
    border-radius: 45px;
}

#cms_5-c .box_title1::before {
    top: 1px;
}
#page08 .tel_box{
    position: relative;
    overflow: hidden;
    padding: 20px 20px 15px 20px;
}
#page08 .tel_box > a:before{
    content:"";
    position: absolute;
    width:100vw;
    height:100vh;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    left:50%;
    top:50%;
}
@media screen and (max-width: 1200px){
    #page08 .tel_box p{
        display: block;
        padding-right: 0px;
        margin-right: 0px;
        border-right: none;
        
    }
}

@media screen and (max-width: 667px){
  
#page08 .tel_box a{
    font-size: 5.3vw;
    letter-spacing: 2px;    
}

}

/*--------タブレット--------*/
@media screen and (max-width: 768px){
    #wrap{    padding-top: 125px;}

#contents2_title {
    text-align: left;
    margin-bottom: 80px;
}
#contents2 > div:before {
    width: 100%;
    height: calc(100% - 7%);
    top: 9%;
}
}

/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
    #loader {height: 100vh;}
    #wrap {
    padding-top: 100px;
}
#contents2_title {
    font-size: 7.5vw;
    line-height: 1.3;
    letter-spacing: 2px;
}
footer h2 a.width_300-max_tb{max-width: 200px;}
#top_cms .bg_color2:before {
    height: calc(100% - 125px);
    top: 125px;
    width: 100%;
}
#top_cms .bg_color_add:before {
    height: calc(100% - 125px);
    top: 125px;
    width: 103%;
}
#cms_5-c .box_title1::before {
    top: -5px;
}
#cms_5-c .box_txt1::before {
    top: 9px;
    left: 7px;
}
}


/*--------------------------------------------
IE
--------------------------------------------*/
@media all and (-ms-high-contrast:none){
body{overflow:hidden;}
.cms_1-a figure img{width:100%!important;height:auto!important;}
}

