﻿

/*
#fakeloader{
    display:none;
}
*/



/*--all page---------------------------
-------------------------------------*/
.linkStyle{
    color:#bf9d74;
    transition:all 0.3s;
    text-decoration:underline;
}
.linkStyle:hover{
    opacity:0.7;
}

body{
    overflow:hidden;
}

.fix_bnr{
    left:20px;
    bottom:20px;
    z-index:4;
}
.pagetop{
    z-index:5;
}
.f_contact_box h4{
    line-height: 1.2;
}
.footer p.width_1280-max{
    text-align:center;
}

/*--top page---------------------------
-------------------------------------*/
#video{
    position:relative;
}
#video:before,
#video:after,
#con1::before,
#con2::before,
#con3::before,
#topCms::before,
#topCms::after,
.header::before,
.footer::before,
.all_contents::before,
.all_contents::after,
#con2 .img_wrap::before{
    content:'';
    position:absolute;
    display:block;
}
#video:before{
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.2);
    z-index:2;
}
#video:after {
    width: 38vw;
    max-width: 1200px;
    height: 450px;
    background-image: url(./Dup/img/catch.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}
#con2 .img_wrap{
    position:relative;
}
#con2 .img_wrap::before{
    width: 200px;
    height: 80px;
    top: -20px;
    right: 120px;
    background: url(./Dup/img/con1.png) no-repeat center / contain;
    z-index: 2;    
}
#con1::before,
#con3::before,
.all_contents::before{
    width: 100%;
    height: 30px;
    top: -20px;
    left: 0;
    background: url(./Dup/img/item1.png) no-repeat center bottom / cover;
    z-index: 3;
}
#con2::before,
#topCms::before{
    width: 100%;
    height: 30px;
    top: -20px;
    left: 0;
    background: url(./Dup/img/item2.png) no-repeat center bottom / cover;
    z-index: 2;
}
#topCms::after,
.header::before{
    width: 100%;
    height: 30px;
    bottom: -20px;
    left: 0;
    background: url(./Dup/img/item3.png) no-repeat center bottom / cover;
    z-index: 2;
}
.footer{
    position:relative;
}
.footer::before{
    width: 100%;
    height: 30px;
    top: -20px;
    left: 0;
    background: url(./Dup/img/item4.png) no-repeat center bottom / cover;
    z-index: 2;
}
.all_contents::after{
    width: 100%;
    height: 30px;
    bottom: -20px;
    left: 0;
    background: url(./Dup/img/item5.png) no-repeat center bottom / cover;
    z-index: 2;
}
.f_contact_box {
    z-index:3;
}
.con1_squ{
    bottom: 5px;
    z-index:3;
}
#con3 .box .img.img1{
    border-radius: 51% 56% 63% 40% / 51% 61% 47% 50%;
}
#con3 .box .img.img2 {
    border-radius: 56% 70% 58% 40% / 71% 61% 60% 50%;
}
#con3 .box .img.img3 {
    border-radius: 51% 77% 63% 50% / 64% 77% 60% 50%;
}

/*--under page---------------------------
-------------------------------------*/
.all_contents{
    position:relative;
}
.pager li a{
    border-radius:10px;
}
#cms_2-g .cate_img1,
#cms_4-a .cate_box figure{
    overflow:hidden;
    border-radius:20px;
}
.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 10px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
    content: "0" counter(box);
    font-size: 86px;
    color: #f3f3f3;
    left: 0;
    top: -70px;
    z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}


/* ---------- responshive ---------- */
@media screen and (max-width: 1536px){

}


@media screen and (max-width: 1366px){

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.header::before{
    display:none;
}
#con3 h3{
    text-align:center;
}
.flow_type3 .box_item{padding-top: 0px;}
#cms_2-g .cate_title {
    line-height: 1.5;
    font-size: 2em;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.header .logo1{
    max-width: 80px;
}
#main_img{
    padding-top:70px;
}
/*video来たら調整*/
#video{
    height:40vh;
}
#video:after {
    width: 65vw;
}
.video{
    height: 40vh;
    width: auto !important;
    position: absolute;
    right: -80px;
}
#con1::before,
#con3::before, 
.all_contents::before {
    top: -10px;
}
#con2 .img_wrap::before {
    width: 120px;
    top: -30px;
    right: 20px;
}
.f_contact_box h4{
    font-size: 30px;
}
#cms_2-g .cate_title{
    font-size: 1.5em;
}
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}
}




