@charset "utf-8";

@media screen and (max-width:768px) {
	.for_pc {
		display:none;
	}
	.for_sp {
		display: block;
	}
}
@media screen and (min-width:769px) {
	.for_pc {
		display:block;
	}
	.for_sp {
		display: none;
	}
}
#frame {
	padding-top: 110px;
	position: relative;
}
#wrapper {
	width: auto;
}

#content .wrapper {
	width: auto;
}

#main {
	float: none;
	margin: 0 auto; 
}

iframe.header {
	height: 110px;
	position: absolute;
	z-index: 999;
}

iframe.footer {
	vertical-align: bottom;
}

div.privacy_frame {
	width: 100%;
	height: 300px;
	border: 1px solid #dedede;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
div.privacy_frame iframe {
	width: 100%;
	height: 100%;
	display: block;
}

@media screen and (max-width:768px) {
	/* header */
	iframe.header {
		height: 72px;
	}
	
	#frame {
		padding-top: 72px;
	}
	
	/* wrapper */
	#wrapper {
		padding: 0 5%; 
	}
	#main {
		width: 100%;
		max-width: 610px;
		background-image: none;
		font-size: 14px;
	}
	#main .main_outer {
		background: none;
		padding-bottom: 0;
	}
	#main .main_inner {
		padding: 23px 0 0 0; 
		background-image: none;
	}
	#breadcrumbs {
		font-size: 12px;
	}
	
	/*h1*/
	#main h1 {
		display: table;
		width: 100%;
		position: relative;
	}
	#main h1 span {
		display: table-cell;
		vertical-align: middle;
		height: 40px;
		padding-left: 12px;
		font-size: 16px;
		line-height: 16px;
		color: #fff;
		background: #00A0E9;
		border-radius: 5px;
	}
	#main h1 span::before {
		content: "●";
		margin-right: 3px;
	}
	
	/*flow*/
	.flow_sp ul {
    width: 100%;
		max-width: 610px;
    margin: 20px auto;
    color: #ffffff;
		display: table;
		border-spacing: 5px 0;
		border-collapse: separate;
	}
	.flow_sp li {
		display: table-cell;
		text-align: center;
		height: 60px;
		vertical-align: middle;
		color: #ffffff;
		background: #d5d5d5;
		position: relative;
	}
	.flow_sp li.arrow {
		background: #bfe7f9;
	}
	.flow_sp li.arrow::after{
		border-top: 30px solid transparent; 
		border-bottom: 30px solid transparent; 
		border-left: 15px solid #bfe7f9; 
		content: "";
		position: absolute;
		bottom: 0;
		right: -15px; 
		z-index: 9;
	}
	.flow_sp li.arrow::before{
		border-top: 30px solid transparent; 
		border-bottom: 30px solid transparent; 
		border-left: 15px solid #fff; 
		content: "";
		position: absolute;
		bottom: 0;
		right: -20px; 
		z-index: 8;
	}
	.flow_sp li.arrow_off::after{
		border-top: 30px solid transparent; 
		border-bottom: 30px solid transparent; 
		border-left: 15px solid #d5d5d5; 
		content: "";
		position: absolute;
		bottom: 0;
		right: -15px; 
		z-index: 9;
	}
	.flow_sp li.arrow_off::before{
		border-top: 30px solid transparent; 
		border-bottom: 30px solid transparent; 
		border-left: 15px solid #fff; 
		content: "";
		position: absolute;
		bottom: 0;
		right: -20px; 
		z-index: 8;
	}
	.flow_sp li:last-child.arrow::after {
		border: none;
	}

	/* form */
	#main .form p {
		font-size: inherit;
	}
	#main .title h2 {
		background: none;
		padding: 0;
		font-size: 1.2em;
	}
	#main .form .link {
		margin: 0 0 13px;
		padding: 7px 0 7px; 
	}
	#main .form .link a:first-child img{
		margin-bottom: 7px;
	}
	#main .form table {
		font-size: inherit;
	}
	#main .form table,#main .form tr,#main .form th,#main .form td {
		display: block;
		border: none;
	}
	#main .form tr {
		width: 100%;
		display: inline-block;
		border:1px solid #dedede;
	}
	#main .form th {
		width: auto;
	}
	#main .form input,#main .form textarea {
		font-size: 16px;
		border-radius: 3px;
	}
	#main .form input:focus,#main .form textarea:focus {
		outline: 0;
	}
	#main .form .category input {
		float: none;
	}
	#main .form .name input {
		padding: 10px 0 10px 10px;
		width: 30%;
		margin-right: 0;
	}
	#main .form .name span.notes {
		margin-left: 0;
	}
	#main .form .mail input {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0 10px 10px;
	}
	#main .form .phone input {
		width: 20%;
		box-sizing: border-box;
		padding: 10px 0 10px 10px;
	}
	#main .form td .sample {
		font-size: 12px;
		color: #a1a1a1;
	}
	#main .form .message,#main .tel p {
		font-size: inherit;
	}
	
	/* tel */
	#main .tel .support {
		background-image: none;
	}
	#main .tel .support_inner {
		width: 100%;
		background: none;
		margin: 0 auto;
		max-width: 299px;
	}
	#main .tel .support .info {
		margin-right: 0;
	}
	#main .tel .support .section {
		width: 100%;
		max-width: 299px;
		background: url(../../img/index_bg_05.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom;
		margin-bottom: 10px;
	}
	#main .tel .support .number {
		margin-bottom: 10px;
	}
	#main .tel .support h3 img {
		width: 100%!important;
	}
	
	/* confirm */
	#main .form .action ul {
		text-align: center;
		left: auto;
		float: none;
	}
	#main .form .action li {
		left: auto;
		float: none;
		margin-bottom: 10px;
	}
}
@media screen and (min-width:600px) and (max-width:768px) {
	#main .form .link a:first-child img{
		margin-bottom: 0;
	}
	#main .tel .support_inner {
		max-width: 610px;
	}
	#main .tel .support .section  {
		float: left;
		width: 48%;
	}
	#main .tel .support .tech.section  {
		margin-left: 4%;
	}
}