﻿.base_link{
    background-color: rgba(255,255,255,0.7);
    border: 1px solid ;
    padding: 16px 13px 10px;
}
.base_link img{
    width: 30px;
    margin-right: 5px;
}
@media  screen and (max-width: 768px){
    
}

.fix_banner_under{
    max-width: 250px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 3;
	transition: 0.5s;
}
.fix_banner_under.close {opacity: 0;z-index: -1;}

/*タブレット*/
@media  screen and (max-width: 768px){}
@media  screen and (max-width: 667px){
.fix_banner_under{max-width: 200px;}
}

/* TOP追従バナー ---------------------------*/
.fix_banner{display: none;}

.fix_banner.close {opacity: 0;z-index: -1;}
.fix_banner.close2{opacity: 0;z-index: -1;}
@media  screen and (max-width: 768px){
    .top_page header{z-index:5;}
    
.fix_banner{
    display: block;
	max-width: 250px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 3;
	transition: 0.5s;
}
}
@media  screen and (max-width: 667px){
.fix_banner{max-width: 200px;}
}
/* 閉じるボタン付き追従バナー end */

/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
.catch {
    z-index: 3;
    position: absolute;
    bottom: 3%;
    right: 0%;
    transform: translate(0%, 0%);
    width: 30%;
}
.video_wrap{
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
video {
	min-width: 100%;
	min-height: 100vh;
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
@media screen and (max-width: 1023px){
.video_wrap {
	position: static;
	overflow: hidden;
	width: 100%;
	height: auto;
	min-width: 100%;
}
video {   
	min-width: auto;
	min-height: auto;
	width: 100%;
	z-index: 1;
	position: static;
	top: 0%;
	left: 0%;
	-webkit-transform: translate(0%, 0%); 
	-ms-transform: translate(0%, 0%);
	transform: translate(0%, 0%); 
vertical-align: bottom;
}
}
/*
.main_img .top_img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    
    margin: 0;
    padding: 0;
    background: center center no-repeat;
    transform: translateZ(0);
    will-change: transform,opacity;
}
.main_img .top_img img{
    width: auto;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
}
.top_ani{
    transition: transform 0.8s ease-in-out, opacity 1s ease-in-out;
    opacity: 0;
    transform: translate(-50%, -50%)scale(1.5);
}
.top_ani.start{
    opacity: 1;
    transform: translate(-50%, -50%)scale(1);
}

@media screen and (min-width: 1365px){
    .main_img .top_img img{
        height: auto;
        width: 100vw;
    }
}*/
/* タブレット */
@media screen and (max-width: 768px){
    .catch {width: 45%;}
    /*
    #main{height: 50vh;}
    .main_img .top_img img{height: 50vh;}
    */
}

/* スマホ */
@media screen and (max-width: 667px){
    .catch {width: 60%;}
    /*
    #main{height: 40vh;}
    .main_img .top_img img{height: 40vh;}
    */
}


/*---------------------------------------------
 テンプレート・CMS・下層ページ 
--------------------------------------------*/
.overlay{background: rgba(255,255,255,0.95);}
#header .logo,#header-change .logo{width: 8%!important;}
#header{padding:10px 0px;}

.all_page .sns_link li{background-color: transparent;}

#contents1_2 .con1 .box_img .no_box, #contents3 .box .box_img .no_box{right: -31px;}
#contents1_2 .con2 .box_img .no_box{left: -32px;}

/*
#contents3 .img_wrap{width: 180vw;}
#contents3 .img_wrap .box_img .img2{left: 19%;}
#contents3 .img_wrap .box_img.img3{right: auto;left: 20%;}
*/
.no{color: #bbb;}

.top_page footer .logo{max-width: 280px;}
.top_page footer:before{background-color: rgba(0, 0, 0, 0.4);}
.f_info .logo{width: 30%!important;}

.top_cms_wrap:before{display: none;}

#cms_2-f .box_title1{
    border-bottom: 1px solid;
    margin-bottom: 20px;
    padding-bottom: 5px;
    padding-left: 5px;
}
#cms_2-f .box_title1::after{display: none;}
#cms_6-d .cate_box:after, .cms_6-d .cate_box:after{
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important;
}
#cms_6-d .cate_box:nth-of-type(odd) .box_description1:after, .cms_6-d .cate_box:nth-of-type(odd) .box_description1:after{
    content:"";
    width: 240px;
    height: 120px;
    background-color: #fff;
    position: absolute;
    top: -35px;
    right: -45px;
    z-index: 1;
}
#cms_6-d .cate_box:nth-of-type(even) .box_description1:after, .cms_6-d .cate_box:nth-of-type(even) .box_description1:after{
    content:"";
    width: 240px;
    height: 120px;
    background-color: #fff;
    position: absolute;
    top: -35px;
    left: -45px;
    z-index: 1;
}
#cms_6-d .cate_box .box_description2{
    width: 85%!important;
    padding-top: 65px;
}
#cms_6-d .cate_box:nth-child(even) .box_description2{
    margin-left: 15%;
}

/* タブレット */
@media screen and (max-width: 768px){
    /*
    #contents3 .img_wrap{
        height: calc(120vh + 600px);
        width: 100%;
    }
    #contents3 .img_wrap .box_img .img1{
        width: 45%;
        left: 10%;
        top: 20%;
    }
    #contents3 .img_wrap .box_img .img2{
        width: 50%;
        left: 75%;
        bottom: auto;
        top: 32%;
    }
    #contents3 .img_wrap .box_img.img3{
        width: 70%;
        top: 0;
        right: 0px;
    }
    */
    #page_title{background-size: 100%;}
    .page_title h2{font-size: 3.5rem;}
    
    #cms_6-d .cate_box:nth-of-type(odd) .box_description1:after, .cms_6-d .cate_box:nth-of-type(odd) .box_description1:after{
        width: 160px;
        height: 90px;
        top: -40px;
        right: -45px;
    }
    #cms_6-d .cate_box:nth-of-type(even) .box_description1:after, .cms_6-d .cate_box:nth-of-type(even) .box_description1:after{
        width: 160px;
        height: 90px;
        top: -40px;
        left: -45px;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    /*
    #contents3 .img_wrap{height: calc(100vh + 400px);}
    #contents3 .img_wrap .box_img .img1 img{height: 50vh;}
    #contents3 .img_wrap .box_img .img1{top: 23%;}
    #contents3 .img_wrap .box_img .img2{bottom: auto; top: 34%;}
    */
    #contents1_2 .con2 .box_img .no_box{left: -35px;}
    #contents1_2 .con1 .box_img .no_box, #contents3 .box .box_img .no_box{right: -35px;}
    
    .top_cms_box .cms_title h2{font-size: 2.4rem;}
    
    .top_page footer .logo{max-width: 150px;}
    .top_page footer{height: 700px!important;}
    
    .page_title h2{
        font-size: 1.8rem;
        letter-spacing: 0em;
    }
    #cms_6-d .cate_box .box_description2{
        margin-top: 50px;
        width: 100%!important;
        padding-top: 0;
    }
    #cms_6-d .cate_box:nth-child(even) .box_description2{
        margin-left: 0;
    }
    #cms_6-d .cate_box:nth-of-type(odd) .box_description1:after, .cms_6-d .cate_box:nth-of-type(odd) .box_description1:after{
        width: 160px;
        height: 70px;
        top: -20px;
        right: -45px;
    }
    #cms_6-d .cate_box:nth-of-type(even) .box_description1:after, .cms_6-d .cate_box:nth-of-type(even) .box_description1:after{
        width: 160px;
        height: 70px;
        top: -20px;
        left: -45px;
    }
}

/* 動画 -----------------------------------------------------------*//*
.video_wrap{
    position: static;
    width: auto;
    height: auto;
}
video{
    position: relative;
    height: 70vh;
    padding-right: 200px;
    margin-left: 80vw;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
}

.video_title{
    position: absolute;
    top: 15%;
    left: 43%;
    font-size: 4rem;
}
*/
/* タブレット *//*
@media screen and (max-width: 768px){
    .video_wrap{
        padding-top: 40%;
    }
    video{
        width: 90%;
        padding-right: 0px;
        margin-left: 0;
        height: auto;
        -webkit-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
    }
    .video_title{
        top: 58%;
        left: 67%;
    }
}*/
/* スマホ *//*
@media screen and (max-width: 667px){
    .video_wrap{padding-top: 20%;}
    video{width: 80%;}
    .video_title{
        top: 61%;
        left: 56%;
        font-size: 2rem;
    }
}
*/
/* バナー ---------------------------------------------------------*/
.btn_container a{
    display: block;
    width: 97%;
    margin: 20px auto;
    background-color: #141414;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    border-radius: 5px;
    font-size: 1.15rem;
}
.btn_container a:hover{
    color: #ccc;
}
.btn_container a:hover i{
    transform: translateX(5px);
}
/* スマホ */
@media screen and (max-width: 667px){
    .btn_container a{width: 100%;}
}

/* Suiri/Sinri --------------------------------------------------- */
#cms_2-a .box_txt1{
    line-height: 2.3;
    font-size: 1rem;
    padding: 30px 11%;
}

/* タブレット */
@media screen and (max-width: 768px){
    #header .logo,#header-change .logo{width: 13%!important;}
    #header{padding:10px;}

}
/* スマホ */
@media screen and (max-width: 667px){
    #header .logo,#header-change .logo{width: 20%!important;}
    
}

/*TOP商品*/
.link_type2 .cate_box a {
    color: #fff;
    height: 320px;
    padding: 115px 10px;
}
.link_type2 .cate_box a:before, .link_type2 .cate_box a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}
.link_type2 .cate_box a:after {
    top: 100%;
    background-color: #020202;
    transition: 0.5s;
	z-index: 3;
}
.link_type2 .cate_box a:hover:after {
    top: 0;
}
.link_type2 .cate_box .txt_wrap {
    z-index: 2;
}
.link_type2 .more {
	letter-spacing: 3px;
    box-sizing: border-box;
	opacity: 0;
	transition: opacity .8s;
	z-index: 4;
}
.link_type2 .cate_box a:hover .more {
    opacity: 1;
}
/* タブレット */
@media screen and (max-width: 768px){
    .link_type2 .cate_box a{
        height: auto;
        padding: 13% 10px 11%;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    .link_type2 .cate_box a{padding: 13% 0px 11%;}
    .link_type2 .cate_box a h3{padding: 20px 0px; font-size:1.3rem; letter-spacing: 0em;}
}

/* topcms_news_type4 ---------------------------------------------*/
.topcms_news_type4 .cate_box{
	width: 30.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	background-color: #fff;
	padding: 0;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.03%);
	border-top: 2px solid #ccc;
}
.topcms_news_type4 .txt_height{
	height: 3em
}
.topcms_news_type4 .box_title1:empty{
	display: block!important;
}
/* ---------- タブレット ---------- */

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.topcms_news_type4 .cate_box {width: 100%!important;}
}


/*お客様の声 ---------------------------------------------------------*/


.v_type1 .triangle {
    width: 45%;
    display: block;
    border: #000 solid 2px;
    box-shadow: 5px 5px 0 0 #e2e2e2;
}
.v_type1 #box0.triangle{top: 0; left: 0;}
.v_type1 #box1.triangle{
    bottom: 0;
    margin-left: 52%;
    margin-top: -30%;
 }
.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: #000 transparent;
    border-width: 15px 15px 0 0;
    bottom: -17px;
    left: 50%;
    margin-left: -11px;
}

/* タブレット */
@media screen and (max-width: 768px){
    .v_type1 .triangle{width: 80%;margin: 0 auto 50px;}
    .v_type1 #box1.triangle{margin-left: auto; margin-top: 0;}
}

/* スマホ */
@media screen and (max-width: 667px){}


/*--------------------------------------------
 全体 ・　文字
----------------------------------------------*/
.linkStyle{
	color: #333;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	opacity: 0.7;
	text-decoration: none;
}


/*.txt_color1,.hvr_txt_color1:hover{color: #ef8f41;} */
/*.txt_color2,.hvr_txt_color2:hover{color: #f4f3f2;} */
/*.txt_color3,.hvr_txt_color3:hover{color: #60513c;} */
/*.txt_color4,.hvr_txt_color4:hover{color: #eae4df;} */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 

/*.bg_color1,.hvr_bg_color1:hover{background-color: #ef8f41;}*/
/*.bg_color2,.hvr_bg_color2:hover{background-color: #f4f3f2;}*/
/*.bg_color3,.hvr_bg_color3:hover{background-color: #60513c;} */
/*.bg_color4,.hvr_bg_color4:hover{background-color: #eae4df;} */
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}*/ 

/*.border_color1,.hvr_border_color1:hover{border-color: #ef8f41;}*/
/*.border_color2,.hvr_border_color2:hover{border-color: #f4f3f2;}*/
/*.border_color3,.hvr_border_color3:hover{border-color: #60513c;}*/
/*.border_color4,.hvr_border_color4:hover{border-color: #eae4df;}*/
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/