/* color */
body,.txt_color_nomal{color: #4d4d4d!important;}
.txt_color1{color: #d39cb5!important} /* メインカラー */
.txt_color2{color: #efdce5!important} /* サブカラー */
.txt_color3{color: #e0d69a!important} /* アクセントカラー1 */
.txt_color4{color: #ece7c3!important} /* アクセントカラー2 */

/* background-color */
#wrap{background-color: #f4f3f3!important;} /* 全体背景 */
.bg_color1{background-color: #d39cb5!important} /* メインカラー */
.bg_color2{background-color: #ffffff!important} /* サブカラー */
.bg_color3{background-color: #d39cb5!important} /* アクセントカラー1 */
.bg_color4{background-color: #e0d69a!important} /* アクセントカラー2 */



/* border-color ※!important */
.border_color1{border-color: #4d4d4d!important}
.border_color2{border-color: #d39cb5!important}
.border_color3{border-color: #e0d69a!important}
.border_color4{border-color: #ece7c3!important}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #4d4d4d!important;}
.hvr_txt_color1:hover{color: #d39cb5!important} /* メインカラー */
.hvr_txt_color2:hover{color: #e0d69a!important} /* サブカラー */
.hvr_txt_color3:hover{color: #e0d69a!important} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #ece7c3!important} /* アクセントカラー2 */

/* background-color */
.hvr_bg_color1:hover{background-color: #e0d69a!important} /* メインカラー */
.hvr_bg_color2:hover{background-color: #d39cb5!important} /* サブカラー */
.hvr_bg_color3:hover{background-color: #e0d69a!important} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #ece7c3!important} /* アクセントカラー2 */

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #d39cb5!important}
.hvr_border_color2:hover{border-color: #efdce5!important}
.hvr_border_color3:hover{border-color: #e0d69a!important}
.hvr_border_color4:hover{border-color: #ece7c3!important}


/* ----------　all　---------- */
.linkStyle{
	color:#d39cb5;
	transition: all 0.5s;
}
.linkStyle:hover{
	color:#e0d69a;
	opacity: 0.7;
	transition: all 0.5s;
}



/* loading */

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#ffffff;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
	width:500px;
}

/*========= SVG操作手書き風にするためのCSS ===============*/

#mask .st0{
    fill:none;
    stroke:#fff;
    stroke-width:90;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}



/* nav */

header {
    padding-top: 15px;
}

header.transform {
    background-color: rgba(244,243,243,0.85);
}

header #header #header_menu li:not(:last-child) a:hover::before {
    background-color:#666666!important;
}

header #header #header_menu li:last-child {
	border:none;
}

header #header #header_menu li:last-child a span {
    color: #333333;
    background-color:#ffffff!important;
	background-image: url("Dup/img/btn-l-t.png"), url("Dup/img/btn-l-b.png"), url("Dup/img/btn-r-t.png"), url("Dup/img/btn-r-b.png");
	background-position:left top, left bottom, right top, right bottom;
	background-repeat: no-repeat;
}

header #header #header_menu li:last-child a span:hover {
    color: #ffffff!important;
	background-color:#d39cb5!important;
}

#bottom_menu nav li a:hover {
    color: #d39cb5!important;
    border-color:#d39cb5!important;
}

.drawer-open .drawer-hamburger-icon {
    background-color: transparent!important;
}

header #logo {
    padding-top: 0;
    width: 100px !important;
}

.logo a img {
    width: 100%!important;
}

@media screen and (max-width: 1110px){
    header #header #header_menu li a span {
        font-size: 12px!important;
    }
    
    header #logo {
        width: 200px!important;
    }
    
}


/* more btn */
.more a {
	padding: 10px 50px;
	color: #4d4d4d!important;
	font-weight: bold;
	background-color:#ffffff!important;
	background-image: url("Dup/img/btn-l-t.png"), url("Dup/img/btn-l-b.png"), url("Dup/img/btn-r-t.png"), url("Dup/img/btn-r-b.png");
	background-position:left top, left bottom, right top, right bottom;
	background-repeat: no-repeat;
	transition:0.5s;
}

.more a:hover {
	background-color: #ece7c3!important;
}

.more a::after {
	display:none;
}

/* fixed bnr */

#fixed-bnr {
	position:fixed;
	left: 20px;
	bottom:10px;
	overflow: hidden
}

#fixed-bnr .more {
	width: 300px;
	margin-right: 20px;
	float: left;
}

#fixed-bnr .more:nth-child(2){
	margin-right:0;
}

#fixed-bnr .more img {
	width:10%;
	margin-right: 15px;
}

#fixed-bnr .more a{
	padding:10px 20px 10px 5px;
	background-color:rgba(194,236,216,0.85)!important;
	line-height: 2;
}

#fixed-bnr .more:nth-child(2) a {
	background-color:rgba(215,182,194,0.9)!important;
}

#fixed-bnr .more a:hover {
	background-color:rgba(106,217,124,1)!important;
	color: #ffffff!important;
}

#fixed-bnr .more:nth-child(2) a:hover {
	background-color:rgba(215,108,149,1)!important;
}

#page-top {
	transition:0.5s;
}

#page-top:hover {
    transform: translateY(-10px);
}


#footer ul li {
    width: 10%!important;
}

#footer ul li a img{
    height: 90%!important;
}


/* ----------　TOP　---------- */

main {
    padding-top:80px;
}


/* main img */

#main_img {
	position:relative;
	height: 80vh!important;
}

#main_img .rectangle_img img {
    width: 95% !important;
    height: auto !important;
    top: 30%;
    left: 50%;
}


.cachcopy {
	position:absolute;
	bottom: 0;
	left:5%;
	z-index: 1;
}

.cachcopy h3 {
	font-size:clamp(25px, 4vw, 50px);
}

.passing .passing-bar {
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: #d39cb5;
}
.passing.move .passing-bar:before {
    -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
    animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing .passing-txt {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	padding: 5px 15px;
}
.passing.move .passing-txt {
    -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
    animation: passing-txt 0s ease .5s 1 normal forwards;
}


@-webkit-keyframes passing-bar{
	0% {left: 0;right: auto;width: 0;}
	50% {left: 0;right: auto;width: 100%;}
	51% {left: auto;right: 0;width: 100%;}
	100% {left: auto;right: 0;width: 0;}
}
@keyframes passing-bar{
	0% {left: 0;width: 0;}
	50% {left: 0;width: 100%;}
	51% {left: 0;width: 100%;}
	100% {left: 100%;width: 0;}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}


/* 週末、金沢掲載場所 */


#kanazawa {
    padding: 50px 10% 180px;
    background-color: #ffffff;
    text-align: center;
}

#kanazawa p {
    text-align: center;
    font-size: 20px;
    margin:0 auto;
}

#kanazawa .more a:hover {
    background-color:#c0e4f3!important;
}


/* top_cms */

.top_cms_box .cms_title h2 {
	border-color:#d39cb5;
}

#contents .box {
	border-color:#999999!important;
}

.intro_txt {
	background-color:#efdce5;
	width: 47%!important;
    margin-left: 3%;
    padding: 50px 30px 50px 70px;
}


.con_title, .con_no {
	color: #d39cb5!important;
}


.intro_txt .con_no {
	color:#ffffff!important;
	opacity:1!important;
}

#contents .con_no::before {
	background-color: #d39cb5;
	height: 2px;
}

.foot_link a {
	background-color: rgba(211,156,181,0.65)!important;
}


/*　NEWSのタイトルがからの時の指定　*/
#top_cms_h .cms_1-e .box_title1:empty {
    display: block!important;
    padding: 19px;
}




/* ----------　下層ページ　---------- */


#about .more a{
    padding:20px 80px!important;
    font-weight: bold;
}

#cms_2-b .cate_title {
    border-color: #e5c4d3!important;
}





/* 会社情報 */

#page7 .box_item h3, #page7 .box_item p {
    color: #333333!important;
}


#page7 .box_wrap .box:nth-child(8n) {
    background-image: url('Dup/img/photo02_sp.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right 10% bottom;
    padding-top: 80px;
    padding-bottom: 80px;
}


/* お問い合わせ */

#page8 .more {
    margin-top:20px;
}

#page8 .txt_red {
    text-align: center;
    margin-top:10px;
}

#page8 .more a, .menu-page .more a {
    padding: 20px 50px;
    font-family: 'Zen Old Mincho'!important;
}

#page8 .more a:hover, .menu-page .more a:hover {
    opacity: 1!important;
}

.contact_line, .contact_hot {
    margin-top:80px;
}

/* プライバシーポリシー */
/* サイトマップ */

#page10 .more a {
    width: 100%;
    padding:10px 0;
    
}


/*-------------------------------------------------------
			          タブレット
-------------------------------------------------------*/
@media screen and (max-width: 768px){
    
main {
    padding-top:0px;
}

header #logo {
    width: 80px !important;
    padding-left: 20px;
}
    
/* top */

#main_img {
    height: 40vh!important;
}

#main_img .box_img {
    height: 100%!important;
}

.cachcopy {
    left: 3%;
    bottom: -1%;
}

.cachcopy h3 {
    font-size: 40px;
}

    #main_img .rectangle_img img {
        width: 90% !important;
        height: auto !important;
        top: 60%;
        left: 50%;
    }
    
.intro_txt {
    width: 100%!important;
    margin-left: 0;
    padding: 50px 30px 50px 30px!important;
}
    
.con_title, .con_no {
    border-color: #999999!important;
}
    
    
#kanazawa p {
    font-size: 20px;

}
    
    
#page10 .more a {
    width: 90%!important;
}
    
#fixed-bnr .more {
	width: 250px;

}


#page7 .box_wrap .box:nth-child(8n) {
        background-size: 25%;
    background-position: right 2% center;
}


    
}

/*-------------------------------------------------------
		            	スマホ
-------------------------------------------------------*/
@media screen and (max-width: 667px){
    
main {
    padding-top:60px;
}
    
#splash_logo svg {
    width: 100%!important;
}
    
header {
    z-index: 900;
}
    
#main_img {
    height: 45vh!important;
}

.cachcopy {
    top: 70%;
    left: 0%;

}

.cachcopy h3 {
    font-size: 30px;
}

#main_img .rectangle_img {
    height: 45vh!important;
}

#main_img .rectangle_img img {
    width: 100%!important;
    height: auto!important;
    top: 50%;
    left: 50%;
}

.top_cms_box_inner {
    padding: 50px 15px;
}

#fixed-bnr .more span {
    display: none;
}

#fixed-bnr .more {
    width: 60px!important;
}

#fixed-bnr .more a {
    width: 100%!important;
    padding: 15px 0!important;
}

#fixed-bnr .more a img {
    width: 50%!important;
    margin-right: 0;
}

#fixed-bnr .more a {
    background-color: #9ae0be!important;
}

#fixed-bnr .more:nth-child(2) a {
    background-color: rgba(188,133,154,1)!important;
}


#intro .more a {
    padding:10px 25px!important;
    font-size: 12px!important;
}


#page_title h2 {
        font-size: 25px!important;
}


#about .more a {
    padding: 20px 45px!important;
}

#kanazawa {
    text-align: center;
}

#kanazawa p {
    font-size: 16px;
    text-align: left;
}


.cate .cate_title {
    font-size: 1rem!important;
}

#cms_3-e .box_title2 {
    font-size: 1rem!important;
}

#page8 .more a, .menu-page .more a {
    padding: 20px 0px!important;
        font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}

.menu-page .contact_hot, .menu-page .contact_line {
    width: 90%!important;
    margin: 30px auto;
}


.menu-page .contact_hot p, .menu-page .contact_line p {
    font-size: 1rem!important;
}

#page7 .box_wrap .box:nth-child(8n) {
    padding-top: 20px;
    padding-bottom: 200px;
    background-position: center bottom;
    background-size: 50%;
    background-size: auto 200px;
}

}


@media screen and (max-width: 321px){
    
    #logo2 {
        width: 250px!important;
    }
    
    .cachcopy h3 {
    font-size: 25px;
}
}
/*-------------------------------------------------------
		            	SEO対策
-------------------------------------------------------*/
html, body {
    font-size: 16px;
}
@media screen and (max-width: 768px){
.font_2dw_tb {
    font-size: -webkit-calc(1rem - 0px);
    font-size: calc(1rem - 0px);
}
}
@media screen and (max-width: 667px){
.top_cms_box .cms_title h2 {
    font-size: 28px;
}
}