@charset "UTF-8";
/*---------------------------------
/ Foundation - reset
-------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
 u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
button, select, option, input, textarea {font-size: 100%;}
ol, ul {list-style: none;}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {quotes: none;}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
	content: none;
}
a img {border: none;}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav,
section, summary {display: block;}
video {max-width: 100%;}
textarea {display:block;}


/*  --------------------------------------
デバイス振り分け(PC)
--------------------------------------  */
@media screen and (min-width:837px) {
.sp {display:none!important;}
body {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	width:100%;
	font-size:16px;
	color:#000;
	text-align :center;
	overflow-x:hidden;
}
header {
	margin:0 auto;
	max-width:1200px;
}
nav {
	margin:0 auto;
	padding:22px 0 22px 50px;
	font-size:0;
	line-height:0;
}
nav div {width:237px;}
.keyvisual {
	width:100%;
	font-size:0;
	line-height:0;
}
/* 画像類 */
header img {width:100%;}

a[href*="tel:"] {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}


/* ---------------------
CONTENT
--------------------  */
main {
	margin:0 auto;
	max-width:1200px;
	font-size:0;
	line-height:0;
}
.qa {
	margin:0 auto 65px;
	width:63.79%;
}
.qa dl {
	padding:0;
	width:100%;
}
.qa dl:not(:last-child) {
	margin-bottom:38px;
}
.dtl_opener {
	margin:0 auto;
	padding:0;
	width:100%;
	cursor:pointer;
	position:relative;
}
.dtl_opener:before {
	content: '';
	background: #ec6d45;
	height: calc(tan(60deg) * 19px / 2);
	width: 22px;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transition:all .3s ease-in-out;
	position:absolute;
	top:37%;
	right:2.7%;
}
.dtl_opener:before      {transform: rotate(180deg);}
.dtl_opener.open:before {transform: rotate(0deg);}
.dtl_txt {
	display:none;
	margin:0;
	padding:0;
	width:100%;
}
.link_wrap {
	position:relative;
}
.link {
	width:57.71%;
	position:absolute;
	bottom:7.8%;
	left:50.7%;
	transform:translateX(-50%);
}

/* 画像類 */
main img {width:100%;}


/* ---------------------
FOOTER
--------------------  */
footer {
	margin:0 auto;
	width:100%;
	max-width:1300px;
	position:relative;
}

/* 画像類 */
footer img {width:100%;}


/* ----- 画像透過リンク */
header a img,
main a img,
footer a img {transition:opacity 0.5s;}
header a:hover img,
main a:hover img,
footer a:hover img {opacity:0.7;}


/* ---------------------
Z-INDEX
--------------------  */
nav   {z-index:1000;}


}/* end */

/*  --------------------------------------
デバイス振り分け(SP)
--------------------------------------  */
@media screen and (max-width:836px) {
.pc {display:none!important;}
body {
	font-family:'Noto Sans JP', sans-serif;
	width:100%;
	font-size:16px;
	color:#000;
	text-align :center;
	overflow-x:hidden;
	position:relative;
}
header {
	margin:0 auto;
	width:100%;
}
nav {
	width:100%;
	height:10.875vw;
	background:#FFF;
}
nav div {
	padding:3vw 0 0 5vw;
	width:29.625%;
}
.keyvisual {
	width:100%;
	font-size:0;
	line-height:0;
}
/* 画像類 */
header img {width:100%;}


/* ---------------------
CONTENT
--------------------  */
main {
	margin:0 auto;
	width:100%;
	font-size:0;
	line-height:0;
}
.qa {
	margin:0 auto 7vw;
	width:87%;
}
.qa dl {
	padding:0;
	width:100%;
}
.qa dl:not(:last-child) {
	margin-bottom:5vw;
}
.dtl_opener {
	margin:0 auto;
	width:100%;
	cursor:pointer;
	position:relative;
}
.dtl_opener:before {
	content: '';
	background: #ec6d45;
	height: calc(tan(60deg) * 2.3vw / 2);
	width: 2.4vw;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transition:all .3s ease-in-out;
	position:absolute;
	top:38%;
	right:2.7%;
}
.dtl_opener:before      {transform: rotate(180deg);}
.dtl_opener.open:before {transform: rotate(0deg);}
.dtl_txt {
	display:none;
	width:100%;
}
.link_wrap {
	position:relative;
}
.link {
	width:65.25%;
	position:absolute;
	bottom:0.8%;
	left:50.7%;
	transform:translateX(-50%);
}


/* 画像類 */
main img {width:100%;}
[id="1"],
[id="2"],
[id="3"],
[id="4"] {
	margin-top:-12vw;
	padding-top:12vw;
}


/* ---------------------
FOOTER
--------------------  */
footer {
	margin:0 auto;
	width:100%;
	position:relative;
}
.trace {
	margin:0;
	padding:0;
	width:100%;
	height:calc(100vw * 0.2266);
	font-size:0;
	line-height:0;
	background: linear-gradient(rgba(255,255,255,0) 30%,rgba(24,105,120,0.7));

	position:fixed;
	bottom:0;
	left:0;
}
.trace div {
	margin:4vw auto 0;
	width:50.4%;
}
.trace img {width:100%;}

/* 画像類 */
footer img {width:100%;}


/* ---------------------
Z-INDEX
--------------------  */
nav    {z-index:1000;}
.menu  {z-index:1010;}
.trace {z-index: 900;}


}