@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');


body{font-family: "jun2", 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;}

.contact_box span.vr_center, .fat-nav li:last-child a, #catch::before, #contents .contents_inner h2::before, .cms_title p, #page_title p{font-family: 'Quicksand', sans-serif;font-weight: 500}
.cms_title p, #page_title p{font-size: 19px;color: #674a41;opacity: 1;}

@font-face {
font-family: "jun2";
src: url("../dup/img/jun2.ttf") format("ttf"),url("../dup/img/jun2.woff") format("woff"),url("../dup/img/jun2.woff2") format("woff2");
}
#catch .catch_txt h2, #contents .contents_inner h2, #contents2 h2{font-weight: normal}



/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #fba63d;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #fba63d} /* メインカラー */
.txt_color2{color: #c9baa9} /* サブカラー */
.txt_color3{color: #f5835c} /* アクセントカラー1 */
.txt_color4{color: #c9baa9} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #fba63d} /* メインカラー */
.bg_color2{background-color: #c9baa9} /* サブカラー */
.bg_color3{background-color: #f5835c} /* アクセントカラー1 */
.bg_color4{background-color: #c9baa9} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #fba63d}
.border_color2{border-color: #c9baa9}
.border_color3{border-color: #f5835c}
.border_color4{border-color: #c9baa9}

/* hover_color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #fba63d} /* メインカラー */
.hvr_txt_color2:hover{color: #c9baa9} /* サブカラー */
.hvr_txt_color3:hover{color: #f5835c} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #c9baa9} /* アクセントカラー2 */

.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #fba63d} /* メインカラー */
.hvr_bg_color2:hover{background-color: #c9baa9} /* サブカラー */
.hvr_bg_color3:hover{background-color: #f5835c} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #c9baa9} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

.hvr_border_color1:hover{border-color: #fba63d}
.hvr_border_color2:hover{border-color: #c9baa9}
.hvr_border_color3:hover{border-color: #f5835c}
.hvr_border_color4:hover{border-color: #c9baa9}

.hamburger{background-color: #fba63d;}
.fat-nav li:last-child a{border-bottom: 2px dashed #ffffff;border-top: 2px dashed #ffffff;font-size: 25px;}


/* video ---------------------------------------------------------------------------------------------*/
#main_img{top: 136px;opacity: 1!important}
#main_img .inner{padding-bottom: 0!important;}
#main_img, #video video{border-radius: 20px}

.loaded #main_img span.before{display: none}
#catch {padding-top: 70px;}


/* design ---------------------------------------------------------------------------------------------*/
.bnr {
    width: 454px;
    margin-bottom: 0;
    margin-top: 64px;
}

body, .font_2dw {font-size: 17px;}
.width_1600-max{width: 90%;}
.opacity02{opacity: 1}
#main_img .inner img, catch_img, .square_img, .rectangle_img, .normal_img img, #footer_info .bg_white_opa, #footer_info .inner .border, #page_title .page_title_img{border-radius: 20px}
.sns_links li{border-radius: 0}

p.gotop a{border-radius: 50%;}
.hamburger{width: 53px;height: 53px;border-radius: 50%;padding: 15px 43px 12px 12px;}
.index_header .nav_box{position: relative;background: url(../dup/img/h_bg.png) left -33px bottom 45px / 70% repeat-x #fba63d;}
.nav_box{position: relative}
.all_header .inner{padding-bottom: 30px;}
.index_header #logo{max-width: 461px;}
.all_header #logo{max-width: 235px;}
.index_header .nav_box{padding: 30px 36px 20% 3%;}
.nav_box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 39px;
    left: 0;
    bottom: -1px;
    background-image: url(./Dup/img/bg_img1.png);
    background-size: 100% 100%;
}
.index_header .nav_box .inner{width: 67%!important;}
#global-nav ul li a .after{
	bottom: -12px;
	left: 18px;
	width: calc(100% - 14px);
}
.all_header #global-nav ul li a .after {
    bottom: -6px;
    left: 0;
    width: 100%;
}
.all_header #global-nav ul li a::before{display: none}
#global-nav ul li a .after, .fat-nav.active li a .after{background-color: #f76652;}
#global-nav ul li a{padding-left: 20px}
.all_header #global-nav ul li a{padding-left: 0}

#global-nav ul li a::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../dup/img/top_h_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -12px;
    top: 2px;
}

.contact_box .header_contact_link a, .more span.before, .more span.after, .cate_list li, .more{border-radius: 45px}
.contact_box .header_contact_link a{overflow: hidden;padding: 6px 25px 9px;}
.cate_list li, .more{overflow: hidden}


/* ---------- main_img ---------- */
#main_img .inner, #contents2{position: relative}
#main_img .inner::before {
    content: '';
    display: inline-block;
    width: 50%;
    max-width: 530px;
    height: 50%;
    background-image: url(../dup/img/main_txt.png);
    background-size: 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    left: 4%;
    top: 9%;
    z-index: 10;
    transform: rotate(-6deg);
}

#main_img span.before{animation-delay: .4s;z-index: 11}

/* ---------- 1400 ---------- */
@media screen and (min-width: 1400px){
#main_img .inner::before {
    width: 50%;
    max-width: 650px;
}
header {
    padding-bottom: 21%;
}
}


/* ---------- catch ---------- */
#catch {
    overflow: visible;
    margin-top: 50px;
    position: relative;
    padding-top: 126px;
    padding-bottom: 216px;
    align-items: flex-start;
    border-bottom: 2px solid #a0908b;
    background: url(../dup/img/catch_bottom.png) center bottom -4px / 550px repeat-x;
}
#catch .catch_txt h2 span, #contents2 .contents_txt h2 span{height: 1px;}
#catch .catch_txt h2{margin-bottom: 49px;}
#catch .catch_txt p{padding: 25px;position: relative}
#catch .catch_txt h2 span{background-color: #f5835c;}
#catch::before, #catch::after, #contents .contents_inner h2::before{
    display: inline-block;
    content: "Introduction";
    position: absolute;
    top: 0;
    left: 0;
	right: 0;
	text-align: center;
    font-size: 52px;
    font-weight: 200;
    color: #674a41;
}
#catch::after{
	content: "";
	width: 150px;
	height: 150px;
	background-image: url(../dup/img/item1.png);
	background-size: contain;
	background-repeat: no-repeat;
	top: -106px;
	margin: auto;
}
#catch span{border-color: #ffffff;}


/* ---------- contents ---------- */
#contents .contents_inner.no2 .contents_txt p{margin-right: 0;margin-left: -40px;}
#contents .contents_inner h2{padding-top: 88px}
#contents .contents_inner h2::before{content: "Salon car";}
#contents .contents_inner.no2 h2::before{content: "Dream plan";}
#contents .contents_inner h2 span{top: 204px;}
#contents2 .opacity07{opacity: 1}
#contents2 .contents_img{padding-bottom: calc(81%*410/837);}
#contents2 .contents_txt h2 span{background-color: #fff;}
#contents .contents_inner .contents_txt p{
	background-color: #fdf5e6;
	border-radius: 20px;
	position: relative;
	padding-bottom: 54px;
}
#contents .contents_inner .contents_txt p::before {
    content: '';
    display: inline-block;
    width: 265px;
    height: 200px;
    background-image: url(../dup/img/item2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -15px;
    bottom: -171px;
    transform: rotate(-6deg);
}
#contents .contents_inner.no2 .contents_txt p::before {
    background-image: url(../dup/img/item3.png);
    left: auto;
    right: -15px;
    transform: rotate(6deg);
    bottom: -151px;
    width: 158px;
    height: 205px;
}
#contents .fade_up{overflow: visible}


/* ---------- other ---------- */
#footer_info .inner .border{border: 1px solid #9e805d;}
#footer_info .bg_white_opa{background-color: rgba(255,255,255,0.9);}


/* ---------- cms ---------- */
#cms_2-a .cate_box{
	background: url( "../dup/img/back.jpg" ) left top / 1000px repeat;
	border-radius: 20px;
    padding: 20px 0;
}
#cms_2-a .box_title1{
	font-size: 22px;
    font-weight: bold;
}
#cms_2-a .box_txt1{
	padding-bottom: 20px;
}
#cms_2-c .box_txt1 {
    color: #f5835c;
    display: inline-block;
    border-bottom: 2px solid;
    line-height: 1.3;
    margin-bottom: 20px;
}
#cms_2-c .cate_title, #cms_3-c .cate_title{position: relative;padding-left: 24px;text-align: left!important;}
#cms_2-c .cate_title{border: none;}
#cms_3-c .cate_title{padding-left: 49px;font-weight: bold;color: #674a41;border-bottom: 2px dashed;}
#cms_2-c .cate_title::before, #cms_3-c .cate_title::before {
    content: '';
    display: inline-block;
    width: 68px;
    height: 68px;
    background-image: url(../dup/img/hana.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: -17px;
    z-index: -1;
    opacity: 0.9;
}
#cms_3-c .cate_title::before{
	width: 92px;
    height: 92px;
	background-image: url(../dup/img/item4.png);
	top: -42px;
}
#cms_2-c .cate_txt{padding-left: 20px!important;padding-right: 20px!important}
#cms_6-c .cate_box, .cms_6-c .cate_box{border-radius: 0 0 20px 20px;}
#cms_6-c .box_title{font-weight: bold;font-size: 23px;}
.cms_1-e .date, #cms_1-e .date{
	color: #f5835c;
    background-color: #fff;
    border-radius: 45px;
    border: 2px solid;
}


/* IE */
@media all and (-ms-high-contrast: none){ 
.fat-nav li:last-child a{padding-bottom: 10px!important}
.more a, .cate_list .more a{padding: 18px 10px 11px !important}
#cms_3-a .cate_txt1{padding: 15px!important}
#cms_6-a .cate .cate_title{padding-top: 9px!important;}
.contact_box .header_contact_link a{padding: 10px 25px 4px}
#contact_tel a{padding-bottom: 21px}
}

@media screen and (max-width: 1440px){
.linehight_2-h{line-height: 2}
}
@media screen and (max-width: 1300px){
#contents2 .contents_img{padding-bottom: calc(96%*410/837);}
}
@media screen and (max-width: 1280px){
#catch{margin-top: 0;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.bnr_wrap{order: 3;}
.bnr{width: 60%;order: 3;}
.index_header .nav_box{padding: 30px 0px 4% 3%;background: none;background-color: #fba63d}
.index_header .nav_box .inner{width: 60%!important;}
.nav_box::before{height: 31px;}
header{padding-bottom: 19%;}
#global-nav ul li a .after{display: none}
.all_header #logo{width: 34.66667%!important;margin-bottom: 18px;}
.all_header #global-nav ul li{width: auto!important}

#main_img .inner::after{background-position: right bottom;top: auto;bottom: 6%;}
#catch {padding-top: 109px;}
#catch .catch_txt h2{margin-bottom: 27px;}

#contents .contents_inner .contents_txt p{padding: 20px 20px 49px}
#contents .contents_inner .contents_txt p::before{width: 232px;left: -31px;}
#contents .contents_inner.no2 .contents_txt{padding: 50px 40px 125px;}
#contents .contents_inner.no2 .contents_txt p{margin-left: 0;padding: 20px 20px 49px}
#contents .contents_inner.no2 .contents_txt p::before{width: 150px;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.bnr{width: 90%;}
	
#fakeloader .fl{width: 68%!important;}
body, .font_2dw, .font_2dw_tb{font-size: 16px}	
#cms_2-a .box_title1{font-size: 18px;padding-top: 0;}
#cms_6-c .box_title{font-size: 18px;}
	
#catch{background: url(../dup/img/catch_bottom.png) center bottom 13px / 100% no-repeat;padding-bottom: 122px;}
.hamburger{padding: 19px 38px 12px 14px;top: 12px;}
#logo {
    margin-bottom: -9px!important;
    max-width: 157px;
    margin-top: -10px;
}
header{padding-bottom: 56px;}
.index_header #logo, #logo{max-width: 195px;padding: 5px 0 20px;}
.all_header #logo{width: 100%!important;}
.all_header .inner{padding-bottom: 0;}
.nav_box::before{height: 16px;}
.index_header .nav_box, .nav_box{padding: 20px 10px 20px 15px;background: url(../dup/img/h_bg_sp.png) right bottom 18px / 51% no-repeat #fba63d;}

.loaded #main_img{padding-top: 26.938px!important;}
#main_img, #video video{border-radius: 0;}
#main_img{top: 114px;}
#main_img .inner img{border-radius: 0;}
#main_img .inner::after{bottom: 5%;width: 52%;}
#main_img .inner::before{display: none}
.main_txt{
	width: 84%;
	margin: auto;
	position: relative;
	z-index: 20;
	transform: translateY(-118px);
}

#catch{padding-top: 84px;}
#catch::before, #contents .contents_inner h2::before{font-size: 44px;}
#catch .catch_txt h2{margin-bottom: 15px;}
#catch::after{width: 116px;height: 116px;top: -88px;}

#contents .contents_inner h2 {
    padding-top: 75px;
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
    padding-left: 10px;
    padding-right: 10px;
}
#contents .contents_inner h2 span{top: 204px;}
#contents .contents_inner .contents_txt{padding: 83px 24px 30px;}
#contents .contents_inner .contents_txt p{padding: 31px 15px 15px;}
#contents .contents_inner .contents_txt p::before{top: -63px;width: 138px;left: -25px;}
#contents .contents_inner.no2 .contents_txt{padding: 30px 24px 93px;}
#contents .contents_inner.no2 .contents_txt p{padding: 15px 15px 35px;}
#contents .contents_inner.no2 .contents_txt p::before {top: auto;bottom: -170px;width: 113px;transform: rotate( 14deg);}
	
.cate_list li a{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#page_title{padding-top: 0!important}
	
#logo2{width: 84%!important;}
#copyright{font-size: 11px;letter-spacing: 0.5px;}
	
#cms_3-c .cate_title{padding-left: 36px;}
#cms_3-c .cate_title::before{top: -34px;width: 73px;height: 73px;left: -5px;}
}


/* ---------- 2021.05.17 ---------- */
.fat-nav__wrapper .yoyaku a {
    box-sizing: border-box;
    display: inline-block!important;
    width: auto!important;
    border-radius: 45px;
    padding: 5px 46px 8px;
}
@media screen and (max-width: 1237px){
.contact_box{top: -11px;}
.header_contact_link {margin-top: 10px;}
}
@media screen and (max-width: 755px){
.index_header #logo {max-width: 370px;}
}
@media screen and (max-width: 768px){
.contact_box {top: 2px;}
}