@charset "utf-8";
/* CSS Document */

/* -------------------------------------------------------------- */
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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline; }
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
color:#222;
font:14px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
/*background:#f6f3ec;*/
background:#FFF;
-webkit-text-size-adjust: none;
padding-bottom: 7em;
counter-reset: number 0; /* number のカウンタを 0 にセット */
}

.blue{color: #3394db;font-weight:bold;}.pink{color: #d41a5b;font-weight:bold;}.bold{color:#211614;font-weight:bold;}
.under-dashed{border-bottom:1px dashed #ACACAC;padding-bottom: 3em;}

iframe.youtube-16-9 {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}


/* モニター幅960px以上 */
@media screen and (min-width:960px) {
	img {
		margin: 3em auto 0;
		max-width: 100%;
		height: auto;
	}
	.sp {
		display: none;
	}
	.br-sp {
		display: none;
	}
}

/* モニター幅959px以下 */
@media screen and (max-width:959px) {
	img {
		padding: 0 2%;
		/*margin: 1em auto 0;*/
		max-width: 100%;
		height: auto;
	}
.pc {
		display: none;
	}
.br-pc {
		display: none;
	}
}

/* モニター幅959px以下 */
@media only screen and (max-width:959px){
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
}

/* リンク設定
------------------------------------------------------------*/
a{color:#c30000;text-decoration:none;}
a:hover{color:#771f12; opacity: 0.8;}
a:active, a:focus{outline:0;}




/*Q&Aアコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto 50px;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
  border: 1px solid #a979bd;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 3% 3% 80px;
    transition: all .5s ease;
	background: #a979bd;
	color: #FFF;
}

/*アイコンの＋と×*/
.title::before, .title::after{
    position: absolute;
    width: 20px;
    height: 0;
    background-color: #FFF;
	font-size: 1.2em;
}
.title::before{
    top:25%;
	/*top:12%;*/
    left: 20px;
    /*transform: rotate(0deg);*/
	/*content:'Q.';*/
	counter-increment: number 1; /* number カウンタを増加 */
	content: "Q." counter(number); /* 表示形式を指定 */
}
.title::after{    
    top:25%;
	/*top:12%;*/
    left: 20px;
    /*transform: rotate(90deg);*/

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  /*transform: rotate(45deg);*/
}

.title.close::after{
  /*transform: rotate(-45deg);*/
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #FFF;
  margin:0 3% 3% 3%;
    padding: 3%;
	line-height: 1.3rem;
}

/*========= レイアウトのためのCSS ===============*/
hr {height:0;margin:10px 0 0;padding:5px 0;border:0;}
/* 破線 */
.hr1 {border-top: 1px dashed #aaa;}

h2{
    text-align: center;
    margin: 5px 0 20px;
    font-size:0.8rem;
}

h4{
    text-align: center;
    margin: 5px 0 20px;
	padding-bottom: 0.5em;
    font-size:1.2rem;
	border-bottom: 3px dashed #ccc;
	line-height: 2em;
}

h4 a {
	color: #222;
	padding-right: 1.5em;
}
h4 a::before{
	content: "▽";
	font-size: 1rem;
	margin-right: 0.2em;
	vertical-align: top;
}

/********************************************************
troubleshooting
********************************************************/
p.troubleshooting{
	width: 96%;
	max-width: 825px;
	margin: 0 auto 50px;
	border: 7px solid #ACACAC;
	padding: 2em;
}



/********************************************************
contact
********************************************************/
#contact a{
	color: #222;
}

#contact ul{
	justify-content: center;
	align-items: top;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding:30px 0 60px;
}

#contact ul li:first-child{
	margin-right:20px;
	margin-top:10px;
}

#freedial{
	background: url("../images/freedial.png") no-repeat left top;
	background-size: auto 100%;
	padding-left:30px;
	line-height:30px;
	font-size:40px;
	font-weight:bold;
}

#contact ul li p{
	padding-top:20px;
}

#mail{
	background: url("../images/mail.svg") no-repeat left top;
	padding-left:40px;
	line-height:20px;
	letter-spacing:1px;
	margin-top:10px;
}

#freedial a, #mail a{
	text-decoration: none;
}

@media screen and (max-width: 767px) {

	#freedial{
		font-size: 7.6vw;
	}

	#contact ul{
		width:90%;
		margin:0 auto;
		padding:4% 0 8%;
	}

	#contact ul li:nth-child(1){
		margin-right:0;
		margin-top:0;
		width:100%;
		margin:0 auto;
		text-align:center;
		padding-bottom:3%;
		font-size:2.8vw;
	}

	#contact ul li:nth-child(2) p{
		font-size:2.6vw;
		text-align:center;
	}

	#mail{
		background: url("../images/mail.svg") no-repeat left top;
		background-size:auto 100%;
		padding-left:14%;
		line-height:4vw;
		margin:5% auto 0;
		width:64%;
		font-size:2.8vw;
	}

}