@charset "UTF-8";

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

	html {
		overflow: none;
	}
	
	header h1 {
		width: 150px;
		left: 15px;
		top: 9px;
	}
	
	header dl {
		right: 15px;
		top: 11px;
	}
	
	header dl dt {
		display: none;
	}
	
	header dl dd {
		width: 140px;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 1.5;
	}
	
	header dl dd a {
		padding: 6px 0px;
		color: #fff;
		background-color: #dc343f;
		text-align: center;
		display: block;
	}
	
	/*----- main -----*/
	
	.container > .content > h1 {
		margin: 0px auto 30px;
		font-size: 2.0rem;
		font-weight: normal;
		line-height: 1.2;
		text-align: center;
		letter-spacing: 0.06em;
	}
	
	.container > .content .textH {
		font-size: 1.3rem;
		font-weight: normal;
		line-height: 2.3rem;
		text-align: center;
		letter-spacing: 0.06em;
	}
	
	#topBanner {
		padding: 0px 28px;
		text-align: center;
	}
	
	#topBanner figure {
		padding: 30px 10px;
		border-bottom: 1px #e5e5e5 solid;
	}
	
	#topBanner img {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	
	#topBanner img.bnP {
		display: none;
	}
	
	#topHeadT {
		width: 100%;
		height: 667px;
		background: url(../img/bg_top_sp.jpg) no-repeat center center;
		background-size: cover;
		position: relative;
	}
	
	#topHeadT::before {
		content: "";
		width: 100%;
		height: 667px;
		background: url(../img/bg_dot.png) repeat center center;
		font-size: 0px;
		line-height: 0;
		left: 0px;
		top: 0px;
		position: absolute;
		z-index: 1;
	}
	
	#topHeadT h1,
	#topHeadT p {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		left: 50%;
		position: absolute;
		z-index: 10;
	}
	
	#topHeadT h1 {
		width: 100%;
		color: #fff;
		font-size: 2.0rem;
		font-weight: normal;
		line-height: 3.8rem;
		text-align: center;
		text-shadow: 0.5px 0.9px 1px #000;
		top: 155px;
	}
	
	#topHeadT h1 span {
		display: inline-block;
	}
	
	#topHeadT h1 .h1s {
		font-size: 1.4rem;
	}
	
	#topHeadT h1 .h1l {
		margin-top: 20px;
		margin-bottom: 20px;
		margin-right: 5px;
		width: 50px;
		background-color: #dc343f;
		font-size: 3.0rem;
		text-align: center;
		text-shadow: none;
		line-height: 5.0rem;
	}
	
	#topHeadT p {
		font-size: 0px;
		line-height: 0;
		width: 200px;
		bottom: 87px;
	}
	
	#topHeadD {
		padding: 50px 15px 5px;
	}
	
	#topHeadD dl {
		margin: 0px 0px 20px;
		width: 100%;
		background: rgba(0,0,0,0.6);
	}
	
	#topHeadD dl dt {
		padding: 18px 16px 16px;
		color: #fff;
		font-size: 1.8rem;
		font-weight: normal;
		line-height: 2.2rem;
		text-align: center;
	}
	
	#topHeadD dl dd {
		padding: 0px 16px 12px;
		color: #fff;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.4rem;
		text-align: left;
	}
	
	#topRecSec > .content {
		padding: 70px 15px 60px;
	}
	
	#topRecSec > .content .textH {
		margin: 0px auto 30px;
	}
	
	#topRecSec ul li {
		margin-bottom: 20px;
	}
	
	#topRecSec ul li figure {
		margin: 0px auto;
		width: 345px;
		font-size: 0px;
		line-height: 0;
	}
	
	#topRecSec ul li figure img {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	
	#topRecSec ul li dl {
		padding: 18px 10px 10px;
		text-align: center;
	}
	
	#topRecSec ul li dl dt {
		margin: 0px auto 15px;
		padding: 0px 40px;
		font-size: 1.8rem;
		font-weight: normal;
		line-height: 2.2rem;
		text-align: center;
		display: inline-block;
		position: relative;
	}
	
	#topRecSec ul li dl dt::before,
	#topRecSec ul li dl dt::after {
		content: "";
		width: 30px;
		height: 1px;
		background-color: #b3b3b3;
		font-size: 0px;
		line-height: 0;
		display: block;
		top: 50%;
		position: absolute;
	}
	
	#topRecSec ul li dl dt::before {
		left: 0px;
	}
	
	#topRecSec ul li dl dt::after {
		right: 0px;
	}
	
	#topRecSec ul li dl dd {
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.4rem;
		text-align: left;
		display: block;
	}
	
	#topUseSec > .content {
		padding: 70px 15px 40px;
	}
	
	#topUseSec h2 {
		margin: 0px auto 20px;
		padding: 10px 0px 8px;
		font-size: 2.0rem;
		font-weight: normal;
		line-height: 2.4rem;
		text-align: center;
		position: relative;
	}
	
	#topUseSec h2::after {
		content: "";
		width: 30px;
		height: 1px;
		background-color: #000;
		font-size: 0px;
		line-height: 0;
		display: block;
		bottom: 0px;
		left: 50%;
		position: absolute;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	#topUseUl li {
		margin-bottom: 40px;
		width: 100%;
		background-color: #fff;
		position: relative;
	}
	
	#topUseUl li p {
		padding: 10px 0px;
		width: 60px;
		background-color: #3f3f57;
		color: #fff;
		font-size: 2.4rem;
		font-weight: normal;
		line-height: 4.0rem;
		text-align: center;
		left: 0px;
		top: 0px;
		position: absolute;
	}
	
	#topUseUl li p span {
		font-size: 1.6rem;
		vertical-align: middle;
	}
	
	#topUseUl li figure {
		margin: 0px auto;
		padding: 40px 0px 16px;
		width: 250px;
		font-size: 0px;
		line-height: 0;
	}
	
	#topUseUl li figure img {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	
	#topUseUl li dl {
		padding: 0px 10px 15px;
		text-align: center;
	}
	
	#topUseUl li dl dt {
		margin: 0px auto 15px;
		font-size: 1.8rem;
		font-weight: normal;
		line-height: 1.2;
		text-align: center;
		display: block;
	}
	
	#topUseUl li dl dd {
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.4rem;
		text-align: left;
		display: block;
	}
	
	#topVoiceBox section {
		margin-bottom: 30px;
	}
	
	#topVoiceBox section h3 {
		margin: 0px 0px 10px;
		color: #444;
		font-size: 1.8rem;
		font-weight: normal;
		line-height: 1.2;
		text-align: left;
	}
	
	#topVoiceBox section h3 span {
		margin: 0px 0px 5px;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 1.5;
		text-align: left;
		display: block;
	}
	
	#topVoiceBox section p {
		color: #444;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.4rem;
		text-align: left;
	}
	
	#topVoiceNav {
		display: none;
	}
	
	#topAppSec {
		padding: 25px 0px 20px;
		background: url(../img/bg_top_ap.jpg) no-repeat center center;
		background-size: cover;
	}
	
	#topAppSec h2 {
		margin: 0px auto 35px;
		font-size: 2.0rem;
		line-height: 2.4rem;
		color: #fff;
	}
	
	#topAppSec h2::after {
		background-color: #fff;
	}
	
	#topAppSec .textH {
		margin: 0px auto 15px;
		color: #fff;
	}
	
	#topAppSec ul {
		padding: 0px 10px;
	}
	
	#topAppSec ul li {
		margin: 0px auto 20px;
		padding: 16px 10px;
		border: 1px #fff solid;
		color: #fff;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.4rem;
		text-align: left;
	}
	
	#topFlowSec {
		padding: 78px 15px 80px;
	}
	
	#topFlowSec .textH {
		margin: 0px auto 12px;
	}
	
	#topFlowSec ul {
		width: 100%;
	}
	
	#topFlowSec ul li {
		height: 45px;
		border-top: 5px #fff solid;
		background-color: #3f3f57;
	}
	
	#topFlowSec ul li dl::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	
	#topFlowSec ul li dl dt {
		padding: 8px 0px;
		width: 120px;
		height: 29px;
		background-color: #6d6d8a;
		color: #fff;
		font-size: 2.4rem;
		font-weight: normal;
		line-height: 2.9rem;
		text-align: center;
		vertical-align: middle;
		position: relative;
		float: left;
	}
	
	#topFlowSec ul li dl dt::after {
		content: "";
		width: 31px;
		height: 15px;
		background: url(../img/bg_flow_sp.png) no-repeat center center;
		background-size: 31px auto;
		font-size: 0px;
		line-height: 0;
		display: block;
		top: -5px;
		left: 50%;
		position: absolute;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 20;
	}
	
	#topFlowSec ul li:first-of-type dl dt::after {
		display: none;
	}
	
	#topFlowSec ul li dl dt span {
		margin-right: 20px;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 2.9rem;
		vertical-align: middle;
		display: inline-block;
	}
	
	#topFlowSec ul li dl dd {
		margin-left: 20px;
		padding: 8px 0px;
		width : -webkit-calc(100vw - 190px) ;
		width : calc(100vw - 190px) ;
		height: 29px;
		color: #fff;
		font-size: 1.8rem;
		font-weight: normal;
		line-height: 2.9rem;
		text-align: left;
		vertical-align: middle;
		float: left;
		overflow: hidden;
	}
	
	#topFtInfoSec {
		background: url(../img/bg_top_b_sp.jpg) no-repeat center center;
		background-size: cover;
		position: relative;
	}
	
	#topFtInfoSec > .content {
		padding: 15px 15px 40px;
	}
	
	#topFtInfoSec::after {
		content: "";
		width: 0px;
		height: 0px;
		border-top: 37px solid transparent;
		border-left: 50vw solid #fff;
		border-right: 50vw solid #fff;
		border-bottom: none;
		font-size: 0px;
		line-height: 0;
		left: 0px;
		bottom: 0px;
		position: absolute;
		box-sizing: border-box;
	}
	
	#topFtInfoSec ul li {
		padding: 15px 0px;
		color: #fff;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.0rem;
		text-align: left;
	}
	
	#topFtInfoSec ul li h3 {
		margin-bottom: 10px;
		padding-bottom: 10px;
		color: #fff;
		border-bottom: 1px #fff solid;
		font-size: 1.8rem;
		font-weight: normal;
		line-height: 1.2;
		text-align: left;
	}
	
	#topFtBtSec {
		padding: 40px 15px 80px;
	}
	
	#topFtBtSec p {
		margin: 0px auto;
		width: 100%;
		color: #fff;
		font-size: 1.8rem;
		font-weight: normal;
		line-height: 3.2rem;
		text-align: center;
		letter-spacing: 0.1em;
	}
	
	#topFtBtSec p a {
		padding: 13px 0px;
		background-color: #dc343f;
		border-radius: 4px;
		color: #fff;
		text-decoration: none;
		display: block;
	}
	
	#topFtBtSec p a span {
		width: 0px;
		height: 0px;
		font-size: 0px;
		line-height: 0;
		text-indent: -9999px;
		display: block;
	}
	
	/*----- contact -----*/
	
	#contactCts {
		padding: 95px 15px 80px;
	}
	
	#faqSec{
		padding: 0px 0px 80px;
	}
	
	#faqSec h2 {
		margin: 0px auto 40px;
		padding: 30px 0px 14px;
		font-size: 1.9rem;
		font-weight: normal;
		line-height: 2.4rem;
		text-align: center;
		position: relative;
	}
	
	#faqSec h2::after {
		content: "";
		width: 30px;
		height: 1px;
		background-color: #000;
		font-size: 0px;
		line-height: 0;
		display: block;
		bottom: 0px;
		left: 50%;
		position: absolute;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	#faqSec > div {
		padding: 20px 10px 1px;
		background-color: #f2f2f2;
	}
	
	#faqSec dl {
		margin: 0px 0px 30px;
	}
	
	#faqSec dl dt,
	#faqSec dl dd {
		padding: 5px 40px;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.0rem;
		text-align: left;
		position: relative;
	}
	
	#faqSec dl dd {
		margin-top: 10px;
		display: none;
	}
	
	#faqSec dl dt::before,
	#faqSec dl dd::before {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		font-size: 2.0rem;
		line-height: 3.0rem;
		text-align: center;
		vertical-align: middle;
		display: block;
		left: 0px;
		top: 0px;
		position: absolute;
	}
	
	#faqSec dl dt::before {
		content: "Q";
		background-color: #000;
		color: #fff;
	}
	
	#faqSec dl dd::before {
		content: "A";
		background-color: #fff;
		color: #000;
	}
	
	#faqSec dl dd p {
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.0rem;
	}
	
	#faqSec dl dd p.note {
		padding-left: 1em;
		color: #444;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 1.8rem;
		text-indent: -1em;
	}
	
	#contactNavi ul {
		border-bottom: 2px #000 solid;
		display: -webkit-flex;
		display: flex;
	}
	
	#contactNavi ul li {
		margin-left: 10px;
		font-size: 2.0rem;
		font-weight: normal;
		line-height: 3.0rem;
		text-align: center;
		-webkit-flex: 1;
		flex: 1;
	}
	
	#contactNavi ul li:first-of-type {
		margin-left: 0px;
	}
	
	#contactNavi ul li a {
		padding: 15px 0px;
		background-color: #ccc;
		color: #fff;
		display: block;
	}
	
	#contactNavi ul li.set a {
		background-color: #000;
	}
	
	#contactForm,
	#contactSForm {
		padding: 38px 0px 80px;
		text-align: center;
	}
	
	#contactForm > div {
		text-align: left;
		display: none;
	}
	
	#contactForm > div:first-of-type {
		display: block;
	}
	
	#contactForm p {
		padding: 0px 0px 5px;
		color: #444;
		font-size: 1.4rem;
		text-align: left;
		font-weight: normal;
		line-height: 1.8;
	}
	
	#contactForm p span {
		margin-right: 20px;
		padding: 0px 20px;
		background-color: #f72e0f;
		color: #fff;
		display: inline-block;
	}
	
	#contactForm p span.op {
		background-color: #0f81f7;
	}
	
	#contactForm p span.note {
		margin-right: 0px;
		padding: 0px 0px;
		color: #444;
		font-size: 1.2rem;
		background: none;
		display: block;
	}
	
	#contactForm select,
	#contactForm input[type=number],
	#contactForm input[type=text],
	#contactForm input[type=email],
	#contactForm input[type=tel],
	#contactForm textarea {
		padding: 10px 8px;
		width: 100%;
		background: none;
		border: 1px #e5e5e5 solid;
		border-radius: 3px;
		color: #444;
		font-size: 1.6rem;
		text-align: left;
		font-weight: normal;
		line-height: 1.5;
		box-sizing: border-box;
	}
	
	#contactForm select,
	#contactForm input[type=number],
	#contactForm input[type=text],
	#contactForm input[type=email],
	#contactForm input[type=tel] {
		margin: 0px 0px 28px;
	}
	
	#contactForm select {
		background: url(../img/icon_sel.png) no-repeat right 18px center;
		background-size: 10px auto;
	}
	
	#contactForm ul {
		margin: 0px 0px 24px;
	}
	
	#contactForm ul li {
		margin: 0px 0px 4px;
		color: #444;
		font-size: 1.4rem;
		text-align: left;
		font-weight: normal;
		line-height: 1.8;
	}
	
	#contactForm textarea {
		height: 100px;
	}
	
	#contactSForm > div {
		text-align: left;
	}
	
	#contactSForm p {
		padding: 0px 0px 5px;
		color: #444;
		font-size: 1.4rem;
		text-align: left;
		font-weight: normal;
		line-height: 1.8;
	}
	
	#contactSForm .vl {
		padding: 0px 0px 38px;
		font-weight: bold;
	}
	
	#contactSForm h3 {
		padding: 0px 0px 20px 0px;
		color: #444;
		font-size: 2.0rem;
		text-align: center;
		font-weight: normal;
		line-height: 1.1;
	}
	
	#contactSForm .errmsg {
		border: 2px #f00 solid;
		padding: 10px;
		color: #f00;
		font-size: 1.4rem;
		text-align: left;
		font-weight: normal;
		line-height: 1.8;
	}
	
	#contactSForm .errmsg > li {
		font-size: 1em;
		padding-left: 1em;
		text-indent: -1em;
	}
	
	#contactSForm .errmsg > li:before {
		content: "・";
	}
	
	#contactForm .bt,
	#contactSForm .bt {
		padding: 30px 0px 0px;
		border-top: 1px #fff solid;
		border-bottom: none;
		text-align: center;
	}
	
	#contactForm .bt input[type="submit"],
	#contactSForm .bt input[type="submit"] {
		-webkit-appearance: none;
		margin: 0px auto;
		padding: 8px 0px;
		width: 200px;
		background-color: #dc343f;
		border: none;
		border-radius: 4px;
		color: #fff;
		font-size: 1.6rem;
		text-align: center;
		font-weight: normal;
		line-height: 1.5;
		box-sizing: border-box;
	}
	
	#contactForm .bt a,
	#contactSForm .bt a {
		margin: 0px auto;
		padding: 8px 0px;
		width: 200px;
		background-color: #ccc;
		border: none;
		border-radius: 4px;
		color: #fff;
		font-size: 1.6rem;
		text-align: center;
		font-weight: normal;
		line-height: 1.5;
		text-decoration: none;
		display: block;
	}
	
	#contactSForm .bt ul:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	
	#contactSForm .bt ul li {
		width: 50%;
		text-align: center;
		float: left;
	}
	
	#contactSForm .bt ul li input[type="submit"] {
		width: 90%;
		display: block;
	}
	
	#contactSForm .bt ul li a {
		width: 90%;
	}
	
	#contactFtSec{
		padding: 35px 0px 45px;
		background-color: #f8f8f8;
	}
	
	#contactFtSec h2 {
		margin: 0px auto 60px;
		padding: 0px 0px 14px;
		font-size: 1.9rem;
		font-weight: normal;
		line-height: 2.4rem;
		text-align: center;
		position: relative;
	}
	
	#contactFtSec h2::after {
		content: "";
		width: 30px;
		height: 1px;
		background-color: #000;
		font-size: 0px;
		line-height: 0;
		display: block;
		bottom: 0px;
		left: 50%;
		position: absolute;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	#contactFtSec dl dt {
		margin: 0px auto 18px;
		font-size: 3.0rem;
		font-weight: normal;
		line-height: 3.6rem;
		text-align: center;
	}
	
	#contactFtSec dl dd {
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 1.8rem;
		text-align: center;
	}
	
	#pagetop {
		right: 15px;
		bottom: 15px;
		position: fixed;
	}
	
	#pagetop a {
		width: 50px;
		height: 50px;
		background: #000 url(../img/arr_totop.png) no-repeat center center;
		background-size: cover;
		font-size: 0px;
		line-height: 0;
		text-indent: -9999px;
		display: block;
	}
	
	footer {
		width: 100%;
		background-color: #000;
	}
	
	footer aside {
		width: 100%;
		background-color: #333;
	}
	
	footer aside > div {
		padding: 40px 15px 15px;
	}
	
	footer aside h1 {
		margin: 0px auto 20px;
		width: 121px;
		font-size: 0px;
		line-height: 0;
		text-align: center;
	}
	
	footer aside h1 img {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	
	footer aside p {
		margin: 0px auto 20px;
		color: #fff;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 2.1rem;
		text-align: center;
	}
	
	footer aside p a {
		color: #fff;
		text-decoration: underline;
	}
	
	footer #copy {
		padding: 15px;
		color: #fff;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 1.8rem;
		text-align: center;
		letter-spacing: 0.06em;
	}
	
	.flgP {
		display: none !important;
	}
	
	.flgS {
		display: block !important;
	}
	
}