/**********
 style-contact.css
**********/

h2.title{
	background:url(../contact/img/h2bg.jpg) no-repeat center center;
	background-size:cover;
}

h2.title p{
	color:#000;
	background:url(../img/line_rough.png) repeat-x bottom;
	line-height:1.4;
	-webkit-filter:none;
	-moz-filter:none;
	-ms-filter:none;
	filter:none;	
}


/**********
  contact
**********/
#contactWrap{
	background:url(../img/line_rough.png) repeat-x top;
	padding-top:40px;
}


#contactWrap .notes{
	position: relative;
	margin: 3em auto;
	padding: 35px 0 0 0;
	width: auto; /*ボックス幅*/
	background-color: #FCF9F0; /*背景色*/
	 box-shadow: 0 2px 2px #ccc; /* 影 */
}
#contactWrap .notes:before {
	position: absolute;
	top: -1em;
	left: 30%;
	height: 40px;
	width: 160px; /*テープの幅*/
	content: "";
	border: 1px solid #ccc; /*枠太さ・色*/
	background-color: #FFF19F; /*テープ色*/
	opacity: 0.3; /*テープ透明度0〜1*/
	transform: rotate( 3deg ); /*テープ角度*/
}

#contactWrap .notes .notesInner{
	padding:15px;
}


#contactWrap .notes ul{
	text-align:left;
	padding:15px;
	position: relative;
	display:block;
}

#contactWrap .notes ul li{
	position: relative;
	padding-left:15px;
	padding-bottom:5px;
}
	
#contactWrap .notes ul li:after {
	isplay: block;
	content: '';
	position: absolute;
	top: .5em;
	left: 0;
	width: 8px;
	height: 3px;
	border-left: 2px solid #00ACB6;
	border-bottom: 2px solid #00ACB6;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#contactWrap .notes ul li:last-child{
	padding-bottom:0;
}



/** topCom **/
#topCom{
	padding-bottom:40px;
}
#topCom .btn {
	position: relative;
	display: block;
	padding: .6em 1em;
	background:url(../img/btnBg.jpg);
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	margin:20px auto 0 auto;
	font-size:1.15em;
	max-width:300px;
}

#topCom .btn:after {
	position: absolute;
	top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  content: '';
  border: 2px dashed #fff;
  border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
}

#topCom .btn a.btn{
  color:#fff;
  text-decoration:none;
 }


/**********
  phone
**********/
#phone{
	background:url(../img/line_rough.png) repeat-x top;
	padding-top:40px;
	text-align:center;
}

#phone h3{
	text-align:left;
}

#phone img#phonenum{
	width:100%;
	max-width:390px;
	margin:0 auto;
	display:block;
}

/**********
  mail
**********/
#line{
	background:url(../img/line_rough.png) repeat-x top;
	padding-top:40px;
}

#line .btn{
	position: relative;
	display: block;
	padding: .6em 1em;
	background:url(../img/btnBg_pink.jpg);
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	margin:20px auto 0 auto;
	max-width:300px;
	font-size:1.15em;
}

#line .btn:after{
	position: absolute;
	top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  content: '';
  border: 2px dashed #fff;
  border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
}

#line .btn a.btn{
  color:#fff;
  text-decoration:none;
}

#line .btn i{
	padding-right:7px;
}


.domainSample:before {
   content: '@';
}

#line #lineBana{
	display: block;
	width: 100%;
	max-width: 360px;
	margin: 0 auto 20px;
}

#line #lineBana img{
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	display: block;
}


/* PC・大型タブレット：769px〜1050px */
@media only screen and (min-width: 769px) and (max-width: 1050px) {

/** topCom **/
#topCom{}
#topCom .btn {
	max-width:280px;
}


/**********
  phone
**********/
#phone{ text-align:left;}
#phone .notes{ padding: 25px 0 0 0;}
#phone .notes:before { left: 60%;}
#phone ul{ padding:15px;}



}

/* PC向け：1051px以上 */
@media only screen and (min-width:1051px) and (max-width: 3000px) {

/** topCom **/
#topCom{}
#topCom .btn {
	max-width:280px;
}



/**********
  phone
**********/
#phone{ text-align:left;}
#phone .notes{ padding: 25px 0 0 0;}
#phone .notes:before { left: 60%;}
#phone ul{ padding:15px;}



}


@media print{

/** topCom **/
#topCom{}
#topCom .btn {
	max-width:280px;
}



/**********
  phone
**********/
#phone{ text-align:left;}
#phone .notes{ padding: 25px 0 0 0;}
#phone .notes:before { left: 60%;}
#phone ul{ padding:15px;}



}