@charset "UTF-8";
/* CSS Document */
:root {
	--main-color: #FAD512;
	--color-red: #F92912;
}

.font-01 {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/*------------------------------------------------------

	common css

------------------------------------------------------*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; overflow: scroll; font-size: 10px; }
html.fixed {}
html.fixed body { height: 100%; position: fixed; width: 100%;}
body { font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", " 游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #000; line-height: 1.6; background-color: #fff; overflow: hidden;}
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative;}
ul { list-style: none; }
ol { list-style: decimal; }
img { vertical-align: bottom; width: 100%; max-width: 100%; height: auto; }
/*a:link { color: #000; text-decoration: none; }
a:visited { color: #000; }*/
a.fade:hover { text-decoration: none; background-color: #fff; color: #000; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pc { display:block; }
.sp { display:none; }

main { display: block; }

@media (min-width: 768px) {
	body{ /*min-width: 1100px;*/ max-width: 1920px; margin-left: auto; margin-right: auto; }
	.container { max-width: 1160px; }
	.w800 { max-width: 800px; margin-left: auto; margin-right: auto;}
    .w920 { max-width: 920px; margin-left: auto; margin-right: auto;}
	.w960 { max-width: 960px; margin-left: auto; margin-right: auto;}

	a:hover { text-decoration: underline; }
	a img:hover { opacity: 0.8; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
}

@media screen and (min-width:768px) and ( max-width:1220px) {
    .container { width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
}

@media (max-width: 767px) {
	body { padding-bottom: 50px; }
	.container { margin-left: 15px; margin-right: 15px; width: auto; }
	.pc { display: none !important; }
	.sp { display: block !important; }

}



/*------------------------------------------------------

    pageTop

------------------------------------------------------*/
#page-top { position: fixed; bottom:20px; right:20px; z-index:999; }
#page-top a { background: rgba(0,0,0,0.5); text-decoration: none; width:48px; height: 48px; text-align:center; display: block; transition: all 0.2s; }
#page-top a::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; margin: -4px auto 0; transform: rotate(-45deg); border-top: 2px solid #fff; border-right: 2px solid #fff; width: 15px; height: 15px; }

@media (min-width: 768px) {
    #page-top a:hover { text-decoration:none; opacity: 0.8; }
}

@media (max-width: 767px) {
	#page-top { display: none;}
}


/*------------------------------------------------------

	header

------------------------------------------------------*/
header { background-color: #fff;}
header .l_col-head { align-items: center; position: relative; z-index: 100; background-color: #fff;}
header .logo {}
header .logo img { max-height: 48px; width: auto;}
header nav {}
header .l_col-nav {}
header .l_col-nav li {}
header .l_col-nav a { color: #000; text-decoration: none;}

header.scroll { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);}
header nav.open {}
header nav.open .l_col-nav {}
header nav.open .l_col-nav li {}

#menu-btn { position: relative; background-color: var(--color-red); }
#menu-btn span { display: block; background-color: #fff; margin-left: auto; margin-right: auto; transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease; }
#menu-btn.active span { left: 0; right: 0;}
#menu-btn.active span:nth-child(1) { transform: rotate(45deg); position: absolute; }
#menu-btn.active span:nth-child(2) { opacity: 0; }
#menu-btn.active span:nth-child(3) { transform: rotate(-45deg); position: absolute; }


#quick-nav { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; transform: translateY(-100%); transition: transform 0.2s ease; z-index: 95; }
#quick-nav.open { transform: translateY(0); }
#quick-nav ul {}
#quick-nav ul li { font-size: 1.8rem; font-weight: 700; border-bottom: 1px solid var(--color-red);}
#quick-nav ul li a { color: var(--color-red); text-decoration: none; display: block; padding: 10px;}

@media (min-width: 768px) {
	header .l_col-head { height: 80px; padding: 0 15px; flex-wrap: nowrap;}
	header .l_col-nav li { font-size: 14px; font-weight: 700; line-height: 1.4;}
	header .l_col-nav li:not(:last-child) { margin-right: 25px;}
	header .l_col-nav a:hover { text-decoration: underline;}

	header.scroll + main { padding-top: 80px;}
	header.scroll .l_col-head { max-width: 1920px; margin-left: auto; margin-right: auto;}

	#quick-nav ul li { line-height: 2.2;}

	#menu-btn { display: none; width: 80px; height: 80px; padding-top: 16px; }
	#menu-btn span { width: 65%; height: 6px; margin-bottom: 14px; }
	#menu-btn.active span:nth-child(1) { top: 36px; }
	#menu-btn.active span:nth-child(3) { top: 36px; }
}

@media (max-width: 1600px) {
	header .l_col-head { padding-right: 0;}
	header nav { position: absolute; top: -100px;}
	#quick-nav { height: calc(100vh - 80px); padding: 30px 20px;}
	#quick-nav.open { transform: translateY(80px); }

	#menu-btn { display: block;}

}

@media (max-width: 767px) {
	header .l_col-head { padding-left: 10px;}
	header .logo { margin-bottom: 0; width: 48%; max-width: 200px;}

	header.scroll + main { padding-top: 40px;}

	#quick-nav { height: calc(100vh - 40px); padding: 20px 20px;}
	#quick-nav.open { transform: translateY(40px); }

	#menu-btn { margin-bottom: 0; width: 40px; height: 40px; padding-top: 10px;}
	#menu-btn span { width: 65%; height: 3px; margin-bottom: 6px;}
	#menu-btn.active span:nth-child(1) { top: 20px; }
	#menu-btn.active span:nth-child(3) { top: 20px; }
}



/*------------------------------------------------------

	footer

------------------------------------------------------*/
footer { background-color: var(--main-color); height: 60px; padding-top: 20px;}
#copy { text-align: center; color: #000; font-weight: 500; line-height: 1.4;}

@media (min-width: 768px) {
	#copy { font-size: 1.6rem;}
}

@media (max-width: 767px) {
	#copy { font-size: 1.4rem;}
}



/*------------------------------------------------------

	main-visual

------------------------------------------------------*/
#main-visual {  position: relative; margin-bottom: 0;}
#main-visual h1 { text-align: center;}
#main-visual h1 img { width: 100%; height: auto; margin-left: auto; margin-right: auto;}

@media (min-width: 768px) {
	#main-visual { height: calc(700px + 22px); border-bottom: 22px solid var(--main-color); background: url(../images/bg_main-visual.jpg) no-repeat center bottom / cover;}
	#main-visual h1 { position: absolute; bottom: 0; left: 0; right: 0;}
	#main-visual h1 img { max-width: calc(2320px / 2);}
}

@media screen and (min-width:768px) and ( max-width:1220px) {
	#main-visual { height: auto; padding: 50px 20px 0;}
	#main-visual h1 { position: relative;}
}

@media (max-width: 767px) {
}


/*------------------------------------------------------

	promises

------------------------------------------------------*/
#promises { background-color: var(--main-color); margin-bottom: 0;}
#promises .container { background-color: #fff; border-radius: 30px; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);}
#promises .container > div {}
#promises .container > figure { margin-bottom: 0;}
#promises .container > figure img { max-width: 460px; width: 100%;}
#promises .title {}
#promises .title img { max-width: 510px; width: 100%;}
#promises .container .l_col-2 {}
#promises .container .l_col-2 figure { margin-bottom: 0;}
#promises .container .l_col-2 figure img { max-width: 216px; width: 100%;}
#moving-target { font-size: 2rem; font-weight: 700; line-height: 1.8; }

@media (min-width: 768px) {
	#promises { padding-top: 40px; padding-bottom: 60px;}
	#promises .container { padding: 40px;}
	#promises .title { margin-bottom: 5px;}
	#promises .container .l_col-2 { align-items: center;}
	#promises .container .l_col-2 figure { width: 216px;}
	#moving-target { font-size: 20px; width: calc(100% - (216px + 20px)); }
}

@media screen and (min-width:768px) and ( max-width:960px) {
	#promises .container .l_col-2 { flex-direction: column-reverse;}
	#promises .container .l_col-2 figure { width: 100%;}
	#moving-target { width: 100%; margin-bottom: 20px;}
}

@media (max-width: 767px) {
	#promises { padding-bottom: 50px; padding-top: 20px;}
	#promises .container { padding: 30px 20px;}
	#promises .container > figure { margin-bottom: 20px;}
	#promises .title { text-align: center; margin-bottom: 24px;}
	#promises .container .l_col-2 figure img { width: 60%;}
	#moving-target { margin-bottom: 0;}
}



/*------------------------------------------------------

	media

------------------------------------------------------*/
#media { background-color: #F4F4F4; margin-bottom: 0;}
#media .container {}
#media figure { width: 260px;}
#media figure img {}
#media .text {}
#media .tag { width: 120px; height: 28px; border-radius: 14px; background: #4F4F4F; color: #FFF; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; line-height: 28px;}
#media .title { font-size: 2.4rem; font-weight: 700; line-height: 1.4; }
#media .title a { color: #036EB8;}
#media .text p:not(.tag) { font-size: 1.8rem; font-weight: 700; line-height: 1.4;}

@media (min-width: 768px) {
	#media { padding-top: 70px; padding-bottom: 75px;}
	#media figure { margin-bottom: 0;}
	#media .text { width: calc(100% - (260px + 40px));}
	#media .title { margin-bottom: 10px;}
}

@media (max-width: 767px) {
	#media { padding: 70px 0; text-align: center;}
	#media figure { margin-left: auto; margin-right: auto;}
	#media .text { width: 100%;}
	#media .tag { margin-left: auto; margin-right: auto;}
	#media .title { margin-bottom: 20px;}
}


/*------------------------------------------------------

	parts 

------------------------------------------------------*/
/* title */
.contents-title-a { background: url(../images/bg_diagonal-line.png) repeat-x center center / cover var(--main-color); position: relative; text-align: center;}
.contents-title-a img { margin-left: auto; margin-right: auto;}
.contents-title-a::before { content: ""; position: absolute; width: 107px; height: 62px; background: url(../images/img_kagiq-car.png) no-repeat left top / cover; right: -107px; top: -62px; z-index: 0; transform: translateX(0vw); }

/* .contents-title-a が画面内に入ったタイミングで、車画像を右から左へ走らせる */
.contents-title-a.car-animated::before {
	animation: car-move 10s linear infinite;
}

@keyframes car-move {
	from {
		transform: translateX(0vw);
	}
	to {
		transform: translateX(calc(-100vw - 107px));
	}
}

.contents-title-b { background-color: var(--color-red); text-align: center;}
.contents-title-b img { margin-left: auto; margin-right: auto;}

/**/
.red { color: var(--color-red);}
.highlighter { background: linear-gradient(transparent 50%, #fff100 0%); }

/* link */
.link-a { font-weight: 700; color: #036EB8; position: relative;}
.link-a::before,
.link-a::after { content: ""; position: absolute; width: 0; height: 0; border: 8px solid transparent; border-left: 16px solid var(--color-red); right: -30px; top: 1px;}
.link-a::after { right: -52px;}


@media (min-width: 768px) {
	.contents-title-a { height: 160px; margin-bottom: 60px;}

	.contents-title-b { height: 100px; padding-top: 10px;}

	.link-a { font-size: 1.8rem;}

}

@media (max-width: 767px) {
	.contents-title-a { height: 180px; margin-bottom: 30px; padding-top: 52px;}

	.contents-title-b { height: 165px;}

	.link-a { font-size: 1.6rem;}
	.link-a::before,
	.link-a::after { border-left-width: 12px; right: -26px;}
	.link-a::after { right: -44px;}

}



/*------------------------------------------------------

	lock-repair-or-replace

------------------------------------------------------*/
#lock-repair-or-replace {}
#lock-repair-or-replace .contents-title-a {}
#lock-repair-or-replace .contents-title-a img {}
#lock-repair-or-replace > .container {}
#lock-repair-or-replace > .container .img {}
#lock-repair-or-replace > .container .img img {}
#lock-repair-or-replace > .container .link { text-align: center;}
#lock-repair-or-replace > .container .link a { color: #036EB8; font-size: 16px; line-height: 1.4; letter-spacing: 0.1em;}

#point { background-color: var(--main-color); margin-bottom: 0; position: relative;}
#point .contents-title-b {}
#point .contents-title-b img {}
#point .container {}
#point .l_col-lifespan { border-radius: 30px; background: #FFF; position: relative; filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15)); margin-bottom: 0;}
#point .l_col-lifespan::after { content: ""; width: 41px; height: 46px; background: url(../images/img_union.png) no-repeat left top / cover; position: absolute; right: -32px; top: calc(50% - 20px);}
#point .l_col-lifespan figure {}
#point .l_col-lifespan figure img {}
#point .l_col-lifespan > div {}
#point .l_col-lifespan .title {}
#point .l_col-lifespan .title img {}
#point .l_col-lifespan .text { color: #333; font-weight: 700; line-height: 2;}
#point .l_col-lifespan .text .highlighter { background: linear-gradient(transparent 35%, #FFDFDF 0%); }

#point .representative {}
#point .representative > div { border-radius: 10px; border: 3px solid #FEF8D9; margin-bottom: 10px;}
#point .representative > div p:first-child { color: #fff; text-align: center; font-size: 1.6rem; font-weight: 800; line-height: 1.4; background-color: var(--color-red); border-radius: 10px 10px 0 0; padding: 6px 0;}
#point .representative > div p:last-child { text-align: center; font-size: 1.4rem; font-weight: 800; line-height: 1.5; letter-spacing: 0.05em; background-color: #FEF8D9; padding: 6px 0 3px;}
#point .representative .img {}
#point .representative .img img {}


#faq-top10 { background-color: #FEF8D9; padding-bottom: 100px;}
#faq-top10 .container {}
#faq-top10 .title { text-align: center;}
#faq-top10 .title img { margin-left: auto; margin-right: auto;}
#faq-top10 .lead { border-radius: 22px; background-color: var(--color-red); color: #FFF; text-align: center; font-size: 2rem; font-weight: 800; line-height: 1.4; letter-spacing: 0.1em;  margin-bottom: 35px;}
#faq-top10 .lead span { color: var(--main-color);}
#faq-top10 ul { counter-reset: listnum;}
#faq-top10 ul li { color: #333; font-weight: 700; line-height: 1.8; border-radius: 30px; background: #FFF; position: relative; padding-top: 10px;}
#faq-top10 ul li::before { counter-increment: listnum; content: counter(listnum); color: #FFF; text-align: center; font-family: "M PLUS 1p", sans-serif; font-weight: 800;  border-radius: 30px; background-color: var(--color-red); display: inline-block; position: absolute; left: 8px; }
#faq-top10 ul li:nth-child(n+6)::before { background-color: #FFF1B2; color: #000; }

@media (min-width: 768px) {
	#lock-repair-or-replace .contents-title-a img { max-width: calc(1341px / 2); position: relative; top: -20px;}
	#lock-repair-or-replace > .container .img { max-width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 30px;}
	#lock-repair-or-replace > .container .link { margin-bottom: 80px;}

	#point::before { content: ""; position: absolute; width: 100%; height: 190px; background-color: #FEF8D9; left: 0; bottom: 0;}
	#point .contents-title-b { margin-bottom: 60px;}
	#point .contents-title-b img { max-width: 350px;}
	#point .l_col-lifespan { padding: 50px; width: 83%; max-width: 960px;}
	#point .l_col-lifespan figure { max-width: 360px; width: 45%; margin-bottom: 0;}
	#point .l_col-lifespan > div { width: calc(55% - 10px);}
	#point .l_col-lifespan .title { max-width: calc(930px / 2); margin-bottom: 10px;}
	#point .l_col-lifespan .text { font-size: 1.8rem;}

	#point .representative { width:calc(17% - 20px); max-width: calc(1160px - 960px - 20px); padding-top: 50px;}
	#point .representative .img { max-width: 152px; margin-left: auto; margin-right: auto;}

	#faq-top10 { padding-top: 70px;}
	#faq-top10 .title img { max-width: calc(1229px / 2);}
	#faq-top10 .lead { padding: 8px 5px;}
	#faq-top10 ul li { min-height: 60px; font-size: 2.4rem; padding-left: 62px;}
	#faq-top10 ul li::before { line-height: 44px; width: 44px; height: 44px; font-size: 2.4rem; top: 8px;}
	#faq-top10 ul > *:nth-child(n+3) { margin-top: 10px;}

}

@media screen and (min-width:768px) and ( max-width:960px) {
	#point .container { align-items: center;}
	#point .l_col-lifespan { width: 75%; padding: 30px;}
	#point .l_col-lifespan figure { max-width: none; width: 30%;}
	#point .l_col-lifespan > div { max-width: none; width: calc(70% - 20px);}
	#point .representative { width: calc(25% - 20px); padding-top: 0;}
}


@media (max-width: 767px) {
	#lock-repair-or-replace .contents-title-a { padding-top: 13px;}
	#lock-repair-or-replace .contents-title-a img { max-width: calc(695px / 2); }
	#lock-repair-or-replace > .container { margin-bottom: 100px;}
	#lock-repair-or-replace > .container .img { position: relative; width: calc(100% + 30px); left: -15px; margin-bottom: 20px;}

	#point .contents-title-b { padding-top: 20px;}
	#point .contents-title-b img { max-width: calc(478px / 2);}
	#point .container { padding: 20px 0 0;}
	#point .l_col-lifespan { flex-direction: column-reverse; padding: 20px; margin-bottom: 20px;}
	#point .l_col-lifespan::after { right: auto; left: 50px; top: auto; bottom: -33px; transform: rotate(90deg);}
	#point .l_col-lifespan figure { width: 74%; margin-left: auto; margin-right: auto; margin-bottom: 0;}
	#point .l_col-lifespan > div { width: 100%; margin-bottom: 30px;}
	#point .l_col-lifespan .title { margin-bottom: 18px;}
	#point .l_col-lifespan .title img { max-width: 250px; margin-left: auto; margin-right: auto;}
	#point .l_col-lifespan .text { font-size: 1.6rem;}

	#point .representative { width: 100%; display: flex; flex-direction: row-reverse; justify-content: space-between; margin-bottom: 0; align-items: flex-start; max-width: 285px; margin-left: 30px;}
	#point .representative > div { width: calc(100% - (85px + 20px)); margin-bottom: 0;}
	#point .representative > div p:last-child { padding: 8px 0 8px;}
	#point .representative .img { width: 85px; padding-top: 30px;}

	#faq-top10 { padding-top: 100px; padding-bottom: 40px;}
	#faq-top10 .title img { max-width: calc(658px / 2); }
	#faq-top10 .lead { padding: 13px 5px;}
	#faq-top10 ul li { min-height: 50px; font-size: 1.6rem; padding-left: 44px; margin-bottom: 10px;}
	#faq-top10 ul li::before { line-height: 28px; width: 28px; height: 28px; font-size: 2rem; top: 11px;}

}




/*------------------------------------------------------

	cta

------------------------------------------------------*/
.cta {}
.cta .title {}
.cta .title img { margin-left: auto; margin-right: auto;}
.cta > div { position: relative;}
.cta > div > a {}
.cta ul { position: absolute; left: 0; right: 0; margin: auto;}
.cta ul li {}
.cta ul li a {}
.cta ul li img {}

@media (min-width: 768px) {
	.cta { max-width: 960px;}
	.cta .title { text-align: center; margin-bottom: 20px;}
	.cta .title img { max-width: calc(1676px / 2);}
	.cta ul { bottom: 28px; width: calc(100% - 40px); }
	.cta ul li { width: calc( 50% - 10px );}
}

@media (max-width: 767px) {
	.cta .title { margin-bottom: 10px;}
	.cta .title img { max-width: calc(646px / 2);}
	.cta > div { max-width: calc(690px / 2); margin-left: auto; margin-right: auto;}
	.cta ul { bottom: 5px; width: calc(100% - 20px);}
	.cta ul li { margin-bottom: 10px;}
}



/*------------------------------------------------------

	why-choose-us

------------------------------------------------------*/
#why-choose-us {}
#why-choose-us .contents-title-a {}
#why-choose-us .contents-title-a img {}
#why-choose-us .container {}
#why-choose-us .l_col-contents { border-top: 6px solid var(--color-red); }
#why-choose-us .l_col-contents:last-child { border-bottom: 6px solid var(--color-red); padding-bottom: 30px;}
#why-choose-us .l_col-contents figure {}
#why-choose-us .l_col-contents figure img { border-radius: 30px; }
#why-choose-us .l_col-contents .text {}
#why-choose-us .l_col-contents .title { color: var(--color-red); font-weight: 800; line-height: 1.4; letter-spacing: 0.05em;  background: url(../images/icon_kagiq-mark.png) no-repeat left top / 75px auto; font-size: 3.2rem;}
#why-choose-us .l_col-contents .title span { background: linear-gradient(transparent 60%, var(--main-color) 0%);}
#why-choose-us .l_col-contents p { color: #333; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.1em;}
#why-choose-us .l_col-contents a { font-size: 1.6rem; margin-top: 10px; display: inline-block; letter-spacing: 0.1em;}

#suggest { background:url(../images/bg_suggest.png) no-repeat center bottom / cover;}
#suggest .l_col-suggest {}
#suggest .l_col-suggest figure { max-width: calc(760px / 2);}
#suggest .l_col-suggest figure img {}
#suggest .l_col-suggest > div {}
#suggest .l_col-suggest .title { color: #036EB8; font-size: 2.8rem; font-weight: 800; line-height: 1.4;}
#suggest .l_col-suggest ul { list-style-type: disc;}
#suggest .l_col-suggest ul li { font-size: 1.8rem; font-weight: 700; line-height: 2;}



@media (min-width: 768px) {
	#why-choose-us .contents-title-a { padding-top: 34px;}
	#why-choose-us .contents-title-a img { max-width: calc(828px / 2);}
	#why-choose-us .l_col-contents { margin-bottom: 30px; padding-left: 30px; padding-right: 30px; padding-top: 30px;}
	#why-choose-us .l_col-contents figure { width: 33%; max-width: 360px; margin-bottom: 0;}
	#why-choose-us .l_col-contents .text { width: calc(100% - (33% + 40px)); padding-top: 20px;}
	#why-choose-us .l_col-contents .title { margin-bottom: 15px; padding-left: 86px; min-height: calc(103px / 2);}
	#why-choose-us .l_col-contents:nth-child(even) { flex-direction: row-reverse;}
	#why-choose-us .l_col-contents:last-child { margin-bottom: 80px;}

	#suggest .l_col-suggest { align-items: center;}
	#suggest .l_col-suggest figure { width: 33%; margin-bottom: 0;}
	#suggest .l_col-suggest > div { width: calc(100% - (33% + 10px)); padding: 30px 0;}
	#suggest .l_col-suggest .title { margin-bottom: 10px;}
}

@media (max-width: 767px) {
	#why-choose-us .contents-title-a { margin-bottom: 50px;}
	#why-choose-us .contents-title-a img { max-width: calc(679px / 2);}
	#why-choose-us .l_col-contents { flex-direction: column-reverse; padding-top: 20px; margin-bottom: 20px;}
	#why-choose-us .l_col-contents figure { width: 85%; margin-left: auto; margin-right: auto;}
	#why-choose-us .l_col-contents .text { width: 100%; margin-bottom: 0;}
	#why-choose-us .l_col-contents .title { text-align: center; background-position: center top; padding-top: 55px; margin-bottom: 25px;}
	#why-choose-us .l_col-contents p { margin-bottom: 0;}
	#why-choose-us .l_col-contents:last-child { margin-bottom: 50px;}

	#suggest .l_col-suggest { flex-direction: column-reverse; padding-top: 30px;}
	#suggest .l_col-suggest figure { margin-bottom: 0; width: 80%; margin-left: auto; margin-right: auto;}
	#suggest .l_col-suggest > div { margin-bottom: 0; width: 100%;}
	#suggest .l_col-suggest .title { text-align: center;}
	#suggest ul { background-color: #fff; padding: 20px 20px 20px 40px; list-style-type: disc;}
	#suggest ul li { font-size: 1.8rem; font-weight: 700; line-height: 1.6;}
	#suggest ul li:not(:last-child) { margin-bottom: 10px;}
}




/*------------------------------------------------------

	steps-to-completion

------------------------------------------------------*/
#steps-to-completion {}
#steps-to-completion .contents-title-a {}
#steps-to-completion .contents-title-a img {}
#steps-to-completion .container {}
#steps-to-completion .container > .text { font-weight: 700; letter-spacing: 0.1em; text-align: center;}
#steps-to-completion .container > .text p {}
#steps-to-completion .container > .text p span { color: var(--color-red);}
#steps-to-completion .l_col-step {}
#steps-to-completion .l_col-step section { position: relative;}
#steps-to-completion .l_col-step .step { font-size: 1.8rem; height: 40px; border-radius: 20px; border: 2px solid var(--color-red); background: linear-gradient(180deg, #F78121 0%, var(--color-red) 100%); color: #fff; text-align: center; line-height: 38px; position: absolute; left: 0; right: 0; top: -20px; margin: auto;}
#steps-to-completion .l_col-step figure { border-radius: 30px; overflow: hidden;}
#steps-to-completion .l_col-step figure img {}
#steps-to-completion .l_col-step .title { color: var(--color-red); text-align: center; line-height: 1.4; border-top: 3px solid var(--color-red); border-bottom: 3px solid var(--color-red); }
#steps-to-completion .l_col-step .text { color: #333; font-size: 1.5rem; font-weight: 500; line-height: 1.8; letter-spacing: 0.1em;}
#steps-to-completion .l_col-step .text p {}
#steps-to-completion .red {}
#steps-to-completion .note { border: 6px solid #EEE; }
#steps-to-completion .note p { font-size: 1.6rem; letter-spacing: 0.1em; padding-left: calc(2em + 4px); text-indent: calc(-2em - 4px);}
#steps-to-completion .note a { color: #036EB8;}

@media (min-width: 768px) {
	#steps-to-completion .contents-title-a { padding-top: 30px;}
	#steps-to-completion .contents-title-a img { max-width: calc(1211px / 2);}
	#steps-to-completion .container > .text { margin-bottom: 70px; font-size: 20px; line-height: 1.8;}
	#steps-to-completion .l_col-step section { width: calc(25% - 20px); max-width: 260px; margin-bottom: 50px;}
	#steps-to-completion .l_col-step .step { width: 140px; }
	#steps-to-completion .l_col-step figure { margin-bottom: 35px;}
	#steps-to-completion .l_col-step .title { margin-left: 20px; margin-right: 20px; margin-bottom: 20px; font-size: 2rem; padding: 10px 0;}
	#steps-to-completion .l_col-step .text { margin-left: 20px; margin-right: 20px;}
	#steps-to-completion .note { margin-bottom: 105px; padding: 25px;}
}

@media screen and (min-width:768px) and ( max-width:960px) {
	#steps-to-completion .l_col-step section { width: calc(25% - 10px);}
	#steps-to-completion .l_col-step .title { margin-left: 10px; margin-right: 10px; }
	#steps-to-completion .l_col-step .text { margin-left: 10px; margin-right: 10px;}
}

@media (max-width: 767px) {
	#steps-to-completion .contents-title-a { padding-top: 22px; }
	#steps-to-completion .contents-title-a img { max-width: calc(546px / 2);}
	#steps-to-completion .container > .text { font-size: 1.8rem; line-height: 1.6; margin-bottom: 60px;}
	#steps-to-completion .l_col-step section { width: calc(50% - 8px); margin-bottom: 55px;}
	#steps-to-completion .l_col-step section:nth-child(n+3) { margin-bottom: 30px; }
	#steps-to-completion .l_col-step .step { width: 100px;}
	#steps-to-completion .l_col-step .title { font-size: 1.8rem; padding: 20px 0; margin-bottom: 10px;}
	#steps-to-completion .note { padding: 9px 14px; margin-bottom: 50px;}
}



/*------------------------------------------------------

	qa

------------------------------------------------------*/
#qa {}
#qa .contents-title-a {}
#qa .contents-title-a img { }
#qa .container {}
#qa .more { border-radius: 30px; background: #F4F4F4; text-align: center; padding: 20px;}
#qa .more .link { margin-bottom: 10px;}
#qa .more .link .link-a {}
#qa .more p:not(.link) { font-weight: 700; letter-spacing: 0.1em;}

#qa .container > .text.sp { text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 35px;}
#qa .container > .text.sp p {}

#qa dl > div { border-radius: 30px; border: 5px solid var(--color-red);}
#qa dl .question { background-color: #FEF8D9; border-radius: 30px 30px 0 0; color: #333; letter-spacing: 0.05em; position: relative;}
#qa dl .question::after { content: ""; position: absolute;  transition: transform 0.3s; transform-origin: 10px 8px; width: 0; height: 0; border: 10px solid transparent; border-top: 16px solid var(--color-red);}
#qa dl .question.open::after { transform: rotate(180deg);}
#qa dl .answer { background-color: #fff; border-radius: 0 0 30px 30px; color: #333; font-weight: 500; line-height: 1.8; letter-spacing: 0.1em; display: none;}

@media (min-width: 768px) {
	#qa .contents-title-a { padding-top: 30px;}
	#qa .contents-title-a img { max-width: calc(703px / 2);}
	#qa .container { max-width: 960px;}
	#qa .more p:not(.link) { font-size: 1.8rem;}

	#qa dl { margin-bottom: 20px;}
	#qa dl > div { overflow: hidden;}
	#qa dl .question { min-height: 100px; padding: 30px 60px 10px 110px; font-size: 2.4rem;  background: url(../images/icon_qa.png) no-repeat 30px 20px / 60px auto #FEF8D9;}
	#qa dl .question::after { right: 30px; top: calc(50% - 8px);}
	#qa dl .answer { padding: 20px 25px; font-size: 1.8rem;}
	#qa dl > div:not(:last-child) { margin-bottom: 10px;}

}

@media (max-width: 767px) {
	#qa .contents-title-a img { max-width: calc(529px / 2);}
	#qa .more p:not(.link) { font-size: 1.6rem; line-height: 1.4; text-align: left;}

	#qa dl { margin-bottom: 30px;}
	#qa dl .question { font-size: 2rem; line-height: 1.4; padding: 22px 20px 32px; border-radius: 30px;}
	#qa dl .question.open { border-radius: 30px 30px 0 0;}
	#qa dl .question::before { content: ""; width: 44px; height: 44px; background: url(../images/icon_qa.png) no-repeat left top / cover; position: absolute; left: -12px; top: -24px;}
	#qa dl .question::after { left: 0; right: 0; margin: auto; bottom: 0;}
	#qa dl .answer { padding: 20px; font-size: 1.6rem;}
	#qa dl > div:not(:last-child) { margin-bottom: 30px;}
}


/*------------------------------------------------------

	service-area

------------------------------------------------------*/
#service-area {}
#service-area .contents-title-a {}
#service-area .contents-title-a img { }
#service-area .container {}
#service-area .text { font-weight: 700; letter-spacing: 0.1em; text-align: center;}
#service-area .text p {}
#service-area .text .highlighter { color: var(--color-red);}
#map { max-width: 640px; margin-left: auto; margin-right: auto; }
#map img {}
#map + p { font-size: 1.4rem; letter-spacing: 0.1em;}
#service-area dl {}
#service-area dl div {}
#service-area dl dt { font-size: 2.4rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; border-radius: 20px; background: var(--main-color); position: relative; height: 50px; padding: 8px 10px 8px 37px;}
#service-area dl dd { color: #333; font-weight: 700; letter-spacing: 0.1em;}
#service-area dl dt::before { content: ""; width: 8px; height: 52%; background-color: var(--color-red); position: absolute; left: 20px; top: 24%; }
#service-area .note { font-weight: 700; letter-spacing: 0.1em; padding-left: 1em; text-indent: -1em;}

@media (min-width: 768px) {
	#service-area .contents-title-a { padding-top: 30px;}
	#service-area .contents-title-a img { max-width: calc(504px / 2);}
	#service-area .container { max-width: 960px; margin-bottom: 100px;}
	#service-area .text { margin-bottom: 50px; font-size: 1.8rem;}
	#map { margin-bottom: 14px;}
	#map + p { max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 70px;}
	#service-area dl { margin-bottom: 37px;}
	#service-area dl div { margin-bottom: 23px;}
	#service-area dl dt { margin-bottom: 17px;}
	#service-area dl dd { padding: 0 12px; font-size: 2.4rem;}
	#service-area .note { font-size: 1.8rem;}
}

@media (max-width: 767px) {
	#service-area .contents-title-a img { max-width: calc(380px / 2);}
	#service-area .text { font-size: 1.6rem; margin-bottom: 20px;}
	#map { position: relative; width: calc(100% + 30px); left: -15px;}
	#map + p { margin-bottom: 30px;}
	#service-area dl div { margin-bottom: 30px;}
	#service-area dl dt { margin-bottom: 10px;}
	#service-area dl dd { font-size: 2rem;}
	#service-area .note { font-size: 1.6rem; margin-bottom: 100px;}
}


/*------------------------------------------------------

	case-studies

------------------------------------------------------*/
#case-studies { background-color: #FEF8D9; margin-bottom: 0;}
#case-studies .contents-title-a { margin-bottom: 0;}
#case-studies .contents-title-a img { }
#case-studies .contents-title-b {}
#case-studies .contents-title-b img {}
#case-studies .container {}
#case-studies .container > .text { text-align: center; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.1em;}
#case-studies .container > .text span { color: var(--color-red);}
#case-studies .l_col-3 {}
#case-studies article { background-color: #fff; }
#case-studies article a { display: block; text-decoration: none; position: relative; height: 100%;}
#case-studies article figure {}
#case-studies article figure img {}
#case-studies article .title { font-size: 2.4rem; font-weight: 700; line-height: 1.4; color: var(--color-red);}
#case-studies article .btn { width: 80%; max-width: 240px; height: 44px; border-radius: 22px; background: var(--main-color); color: #000; font-size: 1.6rem; letter-spacing: 0.1em; line-height: 44px; text-align: center; position: absolute; left: 0; right: 0; top: auto; margin: auto;}
#case-studies .view-all-posts { text-align: center;}
#case-studies .view-all-posts a {}



@media (min-width: 768px) {
	#case-studies { padding-bottom: 165px;}
	#case-studies .contents-title-a { padding-top: 30px;}
	#case-studies .contents-title-a img { max-width: calc(401px / 2);}
	#case-studies .contents-title-b { margin-bottom: 70px;}
	#case-studies .contents-title-b img { max-width: calc(1244px / 2);}
	#case-studies .container > .text { margin-bottom: 50px;}
	#case-studies .l_col-3 { margin-bottom: 50px;}
	#case-studies article { max-width: 360px;}
	#case-studies article a { padding: 30px 23px 124px;}
	#case-studies article figure { margin-bottom: 30px;}
	#case-studies article .btn { bottom: 45px;}
}


@media screen and (min-width:768px) and ( max-width:960px) {
	#case-studies article { width: calc( (100% / 3) - 10px );}
}


@media (max-width: 767px) {
	#case-studies { margin-bottom: 100px;}
	#case-studies .contents-title-a img { max-width: calc(344px / 2);}
	#case-studies .contents-title-b { height: 220px; padding-top: 22px; margin-bottom: 30px;}
	#case-studies .contents-title-b img { max-width: calc(579px / 2);}
	#case-studies article { margin-bottom: 30px;}
	#case-studies article a { padding: 15px 15px 100px;}
	#case-studies article .btn { bottom: 30px;}
	#case-studies .view-all-posts { padding-bottom: 30px;}
}


/*------------------------------------------------------

	message

------------------------------------------------------*/
#message {}
#message .contents-title-a {}
#message .contents-title-a img { }
#message .l_col-message {}
#message .l_col-message figure { max-width: 360px;}
#message .l_col-message figure img {}
#message .l_col-message figure figcaption { color: #000; text-align: center; font-weight: 700; letter-spacing: 0.1em; padding-top: 18px; margin-bottom: 0;}
#message .l_col-message .text {}
#message .l_col-message .title { color: var(--color-red); line-height: 1.4; letter-spacing: 0.05em; margin-bottom: 30px;}
#message .l_col-message .text p { letter-spacing: 0.1em;}



@media (min-width: 768px) {
	#message .contents-title-a { padding-top: 30px;}
	#message .contents-title-a img { max-width: calc(812px / 2);}
	#message .l_col-message figure { width: 32%;}
	#message .l_col-message figure figcaption { font-size: 1.8rem;}
	#message .l_col-message .text { width: calc(100% - (32% + 40px));}
	#message .l_col-message .title { font-size: 3.2rem;}
	#message .l_col-message .text p { font-size: 1.8rem;}
}

@media (max-width: 767px) {
	#message .contents-title-a img { max-width: calc(612px / 2);}
	#message .l_col-message figure { width: 82%; margin-left: auto; margin-right: auto; margin-bottom: 50px;}
	#message .l_col-message figure figcaption { font-size: 1.6rem;}
	#message .l_col-message .text { margin-bottom: 0;}
	#message .l_col-message .title { font-size: 2.8rem;}
	#message .l_col-message .text p { font-size: 1.5rem;}
}


/*------------------------------------------------------

	shop-information

------------------------------------------------------*/
#shop-information {}
#shop-information .contents-title-a {}
#shop-information .contents-title-a img { max-width: calc(464px / 2);}
#shop-information .container {}
#shop-information figure {}
#shop-information figure img {}
#shop-information table {}
#shop-information table tr { border-bottom: 1px solid #000;}
#shop-information table th ,
#shop-information table td { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em;}
#shop-information table th { text-align: left;}
#shop-information table td {}
#shop-information table td a { color: #036EB8;}


@media (min-width: 768px) {
	#shop-information .contents-title-a { padding-top: 30px;}
	#shop-information figure { max-width: 520px; margin-left: auto; margin-right: auto; margin-bottom: 100px;}
	#shop-information table { max-width: 672px; margin-left: auto; margin-right: auto; margin-bottom: 160px;}
	#shop-information table th ,
	#shop-information table td { padding: 12px 8px;}
	#shop-information table th { width: 32%;}
	#shop-information table td { width: 68%;}
}

@media (max-width: 767px) {
	#shop-information .contents-title-a { margin-bottom: 50px;}
	#shop-information table { margin-bottom: 100px;}
	#shop-information table th ,
	#shop-information table td { display: list-item; width: 100%; list-style-type: none;}
	#shop-information table th { padding-top: 20px;}
	#shop-information table td { padding-bottom: 20px; overflow-wrap: anywhere; word-break: normal; line-break: strict;}
	#shop-information table td span { font-size: 85%;}
}


/*------------------------------------------------------

	fixed-tel

------------------------------------------------------*/
#fixed-tel { background-color: var(--color-red); position: fixed; left: 0; bottom: 0; width: 100%; border-top: 1px solid #fff;}
#fixed-tel a { display: block; background: url(../images/icon_fixed-tel.png) no-repeat 12px center / 36px auto; height: 50px; font-size: 2rem; font-weight: 800; line-height: 1.2; color: #fff; text-decoration: none; line-height: 50px; padding-left: 55px;}

@media (min-width: 768px) {
	#fixed-tel { display: none !important;}
}

@media (max-width: 767px) {
}


/*------------------------------------------------------

	animation

------------------------------------------------------*/
:root {
    --delay: 0.5s;
    --duration: 500ms;
    --iterations: 1;
}

/**
	js-fade-up
	animation
*/
.js-fade-up { opacity: 0;}
.js-fade-up.animation-on {
	animation-name: basic-animation;
	animation-duration: var(--duration);
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
/**
	下から上
*/
@keyframes basic-animation{
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/**
	header nav が上に消えていくアニメーション
*/
/* .header-nav-hide-up {
	animation-name: header-nav-hide-up;
	animation-duration: 0.6s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}

@keyframes header-nav-hide-up {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-100%);
	}
} */


@media (min-width: 768px) {
	.delay01 { animation-delay: 0.1s; }
	.delay02 { animation-delay: 0.2s; }
	.delay03 { animation-delay: 0.3s; }
	.delay04 { animation-delay: 0.4s; }
	.delay05 { animation-delay: 0.5s; }
	.delay06 { animation-delay: 0.6s; }
	.delay07 { animation-delay: 0.7s; }
	.delay08 { animation-delay: 0.8s; }
	.delay09 { animation-delay: 0.9s; }
	.delay10 { animation-delay: 1.0s; }
	.delay11 { animation-delay: 1.1s; }
	.delay12 { animation-delay: 1.2s; }
	.delay13 { animation-delay: 1.3s; }
	.delay14 { animation-delay: 1.4s; }
	.delay15 { animation-delay: 1.5s; }
	.delay16 { animation-delay: 1.6s; }
	.delay17 { animation-delay: 1.7s; }
	.delay18 { animation-delay: 1.8s; }
	.delay19 { animation-delay: 1.9s; }
	.delay20 { animation-delay: 2.0s; }
}

/*------------------------------------------------------



------------------------------------------------------*/


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}