﻿
:root{
    /*--color1:#c4b49d;*/
    --color1:#93acd9;
}

/*
#page-top{
    position:absolute;
}
*/

/*--all page---------------------------
-------------------------------------*/

.linkStyle{
    color:#bf9d74;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

body{
    overflow:hidden;
}

.top_header,
footer{
    background-image:url(./Dup/img/renga2.png),url(./Dup/img/renga1.png);
    background-repeat:no-repeat,no-repeat;
    background-size:500px auto;
    background-position:center left,center right;
}

.header .grid_3{
    display:none;
}
#logo{
    margin: auto;
}
#main_menu{
    padding-top: 10px;
    margin-bottom:0;
}
#main_menu ul li{
    padding-bottom: 0;
}
.sns_link{
    border-left: 0;
    background-color: transparent;
}

#info_map {
    background: url(./Dup/img/bg2.jpg);
    background-repeat: repeat;
    background-size: 400px;
}
#info_map p{
    color:#fff;
}

#info_map p span{
    border-left: 1px solid;
}
#f_menu ul li a,
.page_title h2{
    color:#333!important;
}
#f_menu{
    border-color:#333!important;
}
.foot_tel_bt a:first-of-type{
    display:none;
}


footer{
    border-top:0!important;
}
#copyright a{
    color:#333!important;
}

.hpb_bnr{
    bottom:10px;
    right:70px;
    line-height:50px;
    z-index:5;
}

/*--top page---------------------------
-------------------------------------*/
#main_img{
    height:700px;
}
.catch{
    width:37vw;
    max-width: 700px;
    right: 4%;
    z-index: 4;
    top: 25%;
}
.renga{
    width:300px;
}
.aisatsu_outer .renga{
    top:-100px;
}
#top_cms .renga{
    bottom:0;
}
.renga3,
.renga5{
    left:0;
}
.renga4,
.renga6{
    right: 0;
}

#aisatsu > div {
    background-color: rgb(245 245 245 / 72%)!important;
    position:relative;
}
#aisatsu > div:before{
    content:'';
    position:absolute;
    display:block;
    width:calc(100% - 30px);
    height:calc(100% - 30px);
    border:2px solid #fff;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:1;
    pointer-events:none;
}
.intro{
    font-size:2rem;
}
#aisatsu h2:before,
#top_contents .contents_box h2:before{
    content:'';
    position:absolute;
    display:block;
    width:50px;
    height:2px;
    background-color:var(--color1);
    bottom:-25px;
    left:0;
    right:0;
    margin:auto;
}
.staff{
    width: 700px;
    margin: 50px auto 0;
    position:relative;
    z-index:2;
}
/*
#top_contents{
    background:url(./Dup/img/line.png) no-repeat;
    background-size:1200px;
    background-position:center;
}
*/
#contents1,
#contents2,
#contents3{
    position:relative;
}
#contents1:before,
#contents2:before,
#contents3:before{
    content: '';
    position: absolute;
    display: block;
    width: 600px;
    height: 350px;
    /*background: url(./Dup/img/wood.jpg) no-repeat;*/
    /*background: rgb(255,255,255);*/
    background: linear-gradient(314deg, rgba(255,255,255,1) 0%, rgba(215,222,234,1) 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 0;
    background-size: cover;
}
#contents1,
#contents3{
    margin-left:-200px;
}
#contents1 .contents_box,
#contents2 .contents_box,
#contents3 .contents_box{
    background-image: linear-gradient( 135deg, rgba(255,255,255,1.0) 0%, rgb(215 215 215) 100%)!important;
}
#contents2{
    margin-right:-200px;
}
#top_contents .contents_box h2{
    margin-bottom:50px;
    position:relative;
}

.point {
    width: 350px;
    z-index: 3;
}
.point01,
.point03{
    top: 200px;    
    right: 50px;    
}
.point02{
    bottom:300px;
    left:50px;
}

#top_cms .border_white {
    border: 0;
    background-color: #fff;
    box-shadow: 0 0 60px #eeeeee9e;
}


/*--under page---------------------------
-------------------------------------*/
.u_page{
    background-image:url(./Dup/img/renga3.png),url(./Dup/img/renga4.png);
    background-repeat:no-repeat,no-repeat;
    background-size:300px auto;
    background-position:top left,top right;
}
.u_page #contents{
    margin-bottom:0;
    padding-bottom:100px;
    background-image:url(./Dup/img/renga5.png),url(./Dup/img/renga6.png);
    background-repeat:no-repeat,no-repeat;
    background-size:300px auto;
    background-position:bottom left,bottom right;
}
#main_img2 .page_title {
    background-color: rgb(231 231 231 / 32%)!important;
}

/*menu page*/
#cms_3-c .cate_img1{
    height:300px!important;
}

.BA_type2 .box_img1_wrap, .BA_type2 .box_img2_wrap {
	width: 48%!important;
	margin: 0 1%;
}
.BA_type2 .box_img1_wrap::before, .BA_type2 .box_img2_wrap::before {
	position: absolute;
	content: "Before";
	width: 121px;
	background-color: #4d4d4d;
	color: #fff;
	text-align: center;
	display: block;
	left: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
	font-size: 14px;
	letter-spacing: 1px;
	padding: 4px 0px;
	box-sizing: border-box;
}
.BA_type2 .box_img2_wrap::before {
	content: "After";
	background-color: var(--color1);
}

/*review Q&A*/
.v_type3 .cate_box{border: 1px solid var(--color1);}
.v_type3 .box_title1{color: var(--color1);}



#page10 .cate ul li a span{
    letter-spacing:1px;
}



/* ---------- responshive ---------- */
@media screen and (max-width: 1380px){
#contents1,#contents3{
    margin-left:0;
}
#contents2{
    margin-right:0;
}
#info_map {
    background: url(./Dup/img/info_item.png),url(./Dup/img/bg.jpg);
    background-repeat: no-repeat,repeat;
    background-size: 150px, 400px;
    background-position: bottom 8% right 2%,top left;
}

}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.top_header, footer{
    background-repeat: repeat-y,repeat-y;
    background-size:300px auto;
}
#main_img {
    height: 400px;
}
.catch {
    width: 47vw;
    right: 5%;
    top: auto;
    bottom: 5%;
}
.renga {
    width: 200px;
}
.staff {
    width: 370px;
}
#top_contents {
    background: url(./Dup/img/line_tb.png) no-repeat;
    background-size: 95% 88%;
}
#top_contents h2{
    font-size: calc(1rem + 2px)!important;
}
.point {
    width: 280px;
}
.point01, .point03 {
    top: 100px;
    right: 15px;
}
.point02 {
    bottom: 300px;
    left: -25px;
}

#info_map {
    background: url(./Dup/img/bg.jpg);
    background-repeat: repeat;
    background-size: 400px;
    background-position: top left;
}
#f_menu ul li a{
    letter-spacing: 1px;
}
.u_page,.u_page #contents{
    background-size:200px auto;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.header{
    padding-bottom:10px;
}
.top_header, footer{
    background-size: 220px auto;
    background-position: center left -55%,center right -55%;
}

#main_img {
    height: 230px;
}
.catch {
    width:30vw;
    right: 1%;
    bottom: 3%;
}
.intro{
    width:100%;
}
#aisatsu {
    background-size: 120% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}
#aisatsu > div:before{
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}
.staff {
    width: 300px;
}
.renga {
    width: 130px;
}
#top_contents{
    background:none;
}
#top_contents .contents_box h2{
    text-align:left!important;
}
#top_contents .contents_box p{
    line-height:2!important;
}
#contents1, #contents2, #contents3{
    padding-top:100px;
}
#top_contents .contents_box h2:before{
    right:auto;
}
.point {
    width: 220px;
}
.point01 {
    top: 20px;
    right: auto;
}
.point02 {
    bottom: auto;
    left: 0;
    top: 0;
}
.point03{
    top:50px;
    right:auto;
}
#info_map p span{
    border-left:0;
}

.u_page, .u_page #contents {
    background-size: 120px auto;
}

#cms_1-a .pager li{
    margin:0!important;
}
#cms_3-c .cate_img1 {
    height: 150px!important;
}
.BA_type2 .box_img1_wrap::before, .BA_type2 .box_img2_wrap::before{
	width: 76px;
	font-size: 13px;
}
.BA_type2 .box_img1_wrap::before, .BA_type2 .box_img2_wrap::before{padding: 1px 0px;}

#copyright{
    padding-bottom:70px;
}
}






