@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200..900&family=Noto+Sans+JP:wght@100..900&display=swap');

html { font-size: 62.5%}
ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
img { border:0; }
li { list-style-type:none; }

body {
	width:100%;
  margin:0;
  padding:0;
	font-size: 1.4rem;
	line-height: 1.7;
	color:#000;
	font-family: "Noto Sans JP", serif;
  font-weight: 500;
  font-feature-settings: "palt";
	-webkit-text-size-adjust: 100%;
}

a {
	overflow:hidden;
	-webkit-transition:.2s linear;
	-moz-transition:.2s linear;
	-o-transition:.2s linear;
	transition:.2s linear; }
a:link		{ color:#000; text-decoration:none; }
a:visited	{ color:#000; }
a:hover		{ opacity: 0.8; }
a:active	{ opacity: 0.8; }

img { max-width: 100%; height: auto;}

figure {margin: 0; padding: 0;}

* {box-sizing: border-box;}

/* clearfix */
.clearfix:after {  
	visibility: hidden;  
	display: block;  
	font-size: 0;  
	content: " ";  
	clear: both;  
	height: 0;  
}  
* html .clearfix { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */  

/* Chrome, Safari, Edge, Opera のスピンボタンを非表示 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox のスピンボタンを非表示 */
input[type="number"] {
  -moz-appearance: textfield;
}

.gothic {font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;}
.en {font-family: "handsome-pro", sans-serif; font-weight: 700;}

.sp {display: none !important;}
.no_link{pointer-events: none}

#wrapper {overflow: hidden; opacity: 0; transition-duration: 1500ms; transition-property: opacity, transform;}
#wrapper.active {opacity: 1;}

/* fadein */
.fadein {opacity: 0; transition-duration: 1500ms; transition-property: opacity, transform;}
.fadein-up {transform: translate(0, 50px);}
.fadein-down {transform: translate(0, -50px);}
.fadein-left {transform: translate(-50px, 0);}
.fadein-right {transform: translate(50px, 0);}
.scroll-in {opacity: 1; transform: translate(0, 0);}

/* common */

/* floatBnr */
.floatBnr {position: fixed; left: 0; right: 0; bottom: 40px; margin: auto; z-index: 10; transition: 0.5s; background: #ffff00; padding: 18px; text-align: center;}
.floatBnr .inner {position: relative; display: inline-block; font-size: 20px; font-weight: bold; padding-left: 102px;}
.floatBnr .inner img {position: absolute; left: 0; top: 0; bottom: 0; margin: auto; z-index: 1; width: 90px; height: 90px;}
.floatBnr.is-hidden {visibility: hidden; opacity: 0;}

/* pagetop */
#pagetop{position: fixed; right: 30px; bottom: 80px; background: #f56d00; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: .3s; opacity: 0; visibility: hidden; z-index: 10;}
#pagetop.active{opacity: 1; visibility: visible;}
#pagetop a {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #ffff00;}
#pagetop a::before {content: ''; width: 0; height: 0; border-style: solid; border-right: 11px solid transparent; border-left: 11px solid transparent; border-bottom: 20px solid #ffff00; border-top: 0;}


header {background: #f7f6f0;}
header .inner {padding: 20px 6%; text-align: center;}
header a img {max-width: 142px; width: 100%;}

/* page-header */
#page-header {background: url('../img/lp/page_header_bg.svg'); background-size: cover; background-position: center;}
#page-header .inner {padding: 80px; text-align: center;}
#page-header .inner h1 {font-size: 32px; font-weight: 600;}

#breadcrumb {background: #f7f6f0;}
#breadcrumb nav {max-width: 1120px; width: 100%; margin: auto; padding: 16px 40px;}
#breadcrumb ul {display: flex;flex-wrap: wrap;list-style: none;}
#breadcrumb li {font-size: 14px;}
#breadcrumb li:not(:last-of-type)::after {content: "〉";margin: 0 .6em; color: #000;}

#lead {background: #f7f6f0; padding: 40px 40px 80px;}
#lead h2 {display: flex; align-items: center; justify-content: center; font-size: 30px; text-align: center;}
#lead h2 span {position: relative; padding: 20px 30px 24px 22px;}
#lead h2 span::before {content: ''; position: absolute; background: url('../img/lp/lead_bg.svg'); background-position: center; background-size: contain; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
#lead p {text-align: center; margin-top: 24px;}
#lead img {max-width: 446px; width: 100%; margin: auto;}


/* footer */
#footer {position: relative; padding: 30px 0 48px; background-color: #f7f6f0; z-index: 2;}
#footer .inner {position: relative; display: flex; justify-content: flex-end; align-items: center; max-width: 1120px; width: 100%; margin: auto;}
#footer .logo {position: absolute; display: block; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 212px; height: 75px; width: 100%;}
/* #footer a img {max-width: 212px; width: 100%;} */
#footer ul li a {display: inline-flex; align-items: center; font-size: 12px; color: #f56d00;}
#footer ul li a:before {
  content:url('../img/lp/ic_arw_link.svg');
  display: inline-block;
  width: 6px;
	padding-right: 4px;
}


@media (min-width: 1441px) {
	.floatBnr {position: fixed; left: 0; right: 0; bottom: 40px; margin: auto; z-index: 10; transition: 0.5s; background: #ffff00; padding: 18px; text-align: center;}
	.floatBnr .inner {position: relative; display: inline-block; font-size: 24px; font-weight: bold; padding-left: 136px;}
	.floatBnr .inner img {position: absolute; left: 0; top: 0; bottom: 0; margin: auto; z-index: 1; width: 120px; height: 120px;}
}


@media (min-width: 768px) {
	a[href^="tel:"] {pointer-events: none;}
}

@media (max-width: 767px) {
  .pc {display: none !important;}
  .sp {display: block !important;}

  /* common */

  /* floatBnr */
  .floatBnr {display: none;}

	/* pagetop */
	#pagetop{position: fixed; right: 20px; bottom: 100px; background: #f56d00; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: .3s; opacity: 0; visibility: hidden; z-index: 10;}
	#pagetop.active{opacity: 1; visibility: visible;}

	header {background: #f7f6f0;}
	header .inner {padding: 20px 6% 14px; text-align: center;}
	header a img {max-width: 96px; width: 100%;}

	#page-header {background: url('../img/page_header_bg_sp.svg'); background-size: cover; background-position: center;}
	#page-header .inner {padding: 40px; text-align: center;}
	#page-header .inner h1 {font-size: 18px; font-weight: 600;}

	#breadcrumb nav {padding: 10px 6%;}
	#breadcrumb li {font-size: 12px;}

	#lead {background: #f7f6f0; padding: 24px 6% 30px;}
	#lead h2 {display: flex; align-items: center; justify-content: center; font-size: 17px; text-align: center;}
	#lead h2 span {position: relative; padding: 12px 22px 15px 15px;}
	#lead h2 span::before {content: ''; position: absolute; background: url('../img/lead_bg.svg'); background-position: center; background-size: contain; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-repeat: no-repeat;}
	#lead p {text-align: center; margin-top: 24px;}
	#lead img {max-width: 246px; width: 100%; margin: auto;}


	/* footer */
	#footer {position: relative; padding: 13px 0 6%; background-color: #f7f6f0; z-index: 2;}
	#footer .inner {position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: auto;}
	#footer .logo {position: relative; display: block;margin: auto; margin: auto; max-width: 212px; height: 75px; width: 100%;}
	#footer ul {display: flex; justify-content: center; margin-top: 28px; width: 100%;}
	#footer ul li + li {margin-left: 1em;}
	#footer ul li a {display: inline-flex; align-items: center; font-size: 12px; color: #f56d00;}
	#footer ul li a:before {
		content:url('../img/lp/ic_arw_link.svg');
		display: inline-block;
		width: 6px;
		padding-right: 4px;
	}

}