/*=======================================================================*/
/*
Base.css
wrapper や header、footer など、ペースとなる部分のCSS
*/
/*=======================================================================*/

/*=======================================================================*/
/* ボディ */
/*=======================================================================*/

/* フォント */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);*/ /* for IE11: notosansjp.css -> notosansjapanese.css */

/* iPhone Safariのデフォルトボタン装飾カット */
input[type="button"],input[type="submit"] {
  -webkit-appearance: none;
}

/* iPhoneのフォームパーツをリセット */
form input[type="text"],
form input[type="tel"],
form textarea,
form input[type="password"],
form input[type="button"],
form input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

@media (max-width: 768px) {

	body {
		position: relative;
		padding-bottom: 60px;
		font-family: 'Noto Sans Japanese';
	}

     /* スマホの縦横を切り替えた時に文字サイズを固定にする */
/*     html body {-webkit-text-size-adjust: none;} */     /* こっちは悪影響が出るので禁止 */
     html body {-webkit-text-size-adjust: 100%;}      /* この指定と同時にHTMLヘッダでinitial-scaleかmaximum-scaleを指定する必要がある */

     /* 全体サイズ */
     html body {min-width: 0; width: 100%;}

     /* iPhoneの入力時の拡大をOFF */
    form input[type="text"],
    form input[type="tel"],
    form input[type="password"],
    form textarea,
    form select {
        font-size: 16px;
    }

}

@media (max-width: 768px) {

	/*=======================================================================*/
	/* コンテンツ */
	/*=======================================================================*/

	/* セクション */
	/*=======================================================================*/

	section {
		position: relative;
		width: 98%;
		margin: 10px auto;
		box-sizing: border-box;
	}

	section p {
		font-size: 0.9em;
		line-height: 1.6em;
	}

	#appMethod p {
		font-size: 1.2em;
		line-height: 1.6em;
	}

	/* 見出し装飾 */
	/*=======================================================================*/

	section h2 {
		position: relative;
		text-align: center;
		color: #0068b7;
		margin: 30px auto;
		width: 100%;
		font-size: 1.2em;
		font-family: 'Noto Sans Japanese';
		font-weight: 700;
	}

	section h2 span {
		position: relative;
		z-index: 2;
		display: inline-block;
		margin: 0 2.5em;
		padding: 0 1em;
		background-color: #fff;
		text-align: left;
	}

	section h2:before {
		position: absolute;
		top: 50%;
		z-index: 1;
		content: '';
		display: block;
		width: 100%;
		height: 3px;
		background-color: #ea609e;
	}

	h3.formBlock {
		font-size: 1.3em;
		font-family: 'Noto Sans Japanese';
		font-weight: 600;
		padding: 0 10px 3px 10px;
		background: linear-gradient(transparent 60%, #a7d6ff 70%);
		margin: 32px 0 22px 0;
	}

	h3.Notes {
		font-size: 1.4em;
		font-family: 'Noto Sans Japanese';
		font-weight: 600;
		padding: 0 10px 3px 10px;
		background: linear-gradient(transparent 60%, #00838F 70%);
		margin: 0 0 20px 0;
	}

	h4 {
		font-size: 1.1em;
		color: #1976D2;
		font-weight: bold;
		margin: 10px 0;
	}

	section#formInputArea {
    	padding: 0 2px;
	}

	/* ステッププログレスバー */
	/*=======================================================================*/

	.stepBar {
		display: table;
		border-collapse: separate;
		border-spacing: 2px 0;
		position: relative;
		list-style: none;
		margin: 0 0 1em;
		padding: 0;
		text-align: center;
		width: 100%;
		overflow: hidden;
		*zoom: 1;
	}

	.stepBar .step {
		position: relative;
		float: none;
		display: table-cell;
		vertical-align: middle;
		line-height: 60px;
		vertical-align: middle;
		background-color: #eee;
		border-radius: 4px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 0.8em;
		line-height: 1.6em;
		/* text-indent: -9999px; */
		margin: 0 2px;
		padding: 10px;
	}

	.stepBar .step:before, .stepBar .step:after {
		display: none;
	}
	.stepBar .step:after {
		top: 0;
		-moz-transform: skew(30deg);
		-ms-transform: skew(30deg);
		-webkit-transform: skew(30deg);
		transform: skew(30deg);
	}

	.stepBar .step:before {
		bottom: 0;
		-moz-transform: skew(-30deg);
		-ms-transform: skew(-30deg);
		-webkit-transform: skew(-30deg);
		transform: skew(-30deg);
	}

	.stepBar .step:first-child {
		border-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-webkit-border-top-left-radius: 4px;
		border-top-left-radius: 4px;
		-moz-border-radius-bottomleft: 4px;
		-webkit-border-bottom-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	.stepBar .step:first-child:before, .stepBar .step:first-child:after {
		content: none;
	}

	.stepBar .step:last-child {
		-moz-border-radius-topright: 4px;
		-webkit-border-top-right-radius: 4px;
		border-top-right-radius: 4px;
		-moz-border-radius-bottomright: 4px;
		-webkit-border-bottom-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.stepBar .step.current01:before, .stepBar .step.current01:after {
		background-color: #00ACC1;
	}

	.stepBar .step.current02:before, .stepBar .step.current02:after {
		background-color: #3949AB;
	}

	.stepBar .step.current03:before, .stepBar .step.current03:after {
		background-color: #D81B60;
	}
	
	.stepBar .step:nth-child(2),
	.stepBar .step:last-child {
		/* padding: 19px 10px !important */;
	}

	.stepBar.step2 .step {
		/*width: 50%;*/
		letter-spacing: -1px;
	}

	.stepBar.step3 .step {
		/*width: 12%;*/
		letter-spacing: -1px;
	}

	.stepBar.step4 .step {
		/*width: 25%;*/
	}

	.stepBar.step5 .step {
		/*width: 20%;*/
	}
	
	.stepBar.step2 .step,
	.stepBar.step3 .step,
	.stepBar.step4 .step,
	.stepBar.step5 .step {
		width: 33%;
	}

	.stepBar .step.current01 {
		color: #FFF;
		background-color: #00ACC1;
		text-indent: 0;
		font-size: 0.8em;
		line-height: 1.6em;
		/*width: 70%;*/
	}

	.stepBar .step.current02 {
		color: #FFF;
		background-color: #3949AB;
		font-size: 0.8em;
		line-height: 1.6em;
		text-indent: 0;
		/*width: 70%;*/
	}

	.stepBar .step.current03 {
		color: #FFF;
		background-color: #D81B60;
		font-size: 0.8em;
		line-height: 1.6em;
		/*width: 70%;*/
		text-indent: 0;
	}
	
	.stepBar .step.current01,
	.stepBar .step.current02,
	.stepBar .step.current03 {
		width: 33%;
	}
	
	

	/* キャンペーン参加ボックス */
	/*=======================================================================*/

	.CampJoin {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}


	h3.Join {
		position: relative;
		padding: 10px 20px;
		text-align:center;
		border-top: solid 1px #325A8C;
		border-bottom: solid 1px #325A8C;
		font-size: 1em;
		line-height: 1.6em;
		font-weight: bold;
	}

	h3.Join i {
		font-weight: normal;
	}

	h3.Join::before,
	h3.Join::after{
		content: '';
		position: absolute;
		top: -10px;
		width: 1px;
		height: calc(100% + 20px);
		background-color: #325A8C;
	}

	h3.Join::before{left: 10px;}
	h3.Join::after{right: 10px;}

	/* フォーム完了 */
	/*=======================================================================*/

	#FinishBody {
		min-height: auto !important;
		margin: 20px auto 0 auto;
	}


	.FinishArea {
		position: relative;
		padding: 10px 20px;
		font-size:1.2em;
		text-align:center;
		border-top: solid 1px #e53935;
		border-bottom: solid 1px #e53935;
		font-size: 1em;
		font-weight: bold;
	}

	.FinishArea::before,
	.FinishArea::after{
		content: '';
		position: absolute;
		top: -10px;
		width: 1px;
		height: calc(100% + 20px);
		background-color: #e53935;
	}

	.FinishArea::before{left: 10px;}
	.FinishArea::after{right: 10px;}

	.FinishArea h3 {
		font-size: 1.2em;
		line-height: 1.8em;
		color: #d32f2f;
	}

	.FinishArea p {
		text-align: left;
		font-weight: normal;
		font-size: 0.8em;
		line-height: 1.4em;
		margin: 0 0 10px 0;
	}

	.fns_contact {
		width: 96%;
		text-align: center;
		padding: 5px;
		border: none;
		margin: 10px auto;
		border-radius: 5px;
		font-size: 0.9em;
		background: #ffebee;
	}

	.fns_contact p {
		font-weight: bold;
		text-align: center;
		margin: 0 0;
		font-size: 1em;
	}

	.cTime {
		display: block;
		margin: 0 2px;
	}
=======

	.fns_contact {
		width: 96%;
		text-align: center;
		padding: 5px;
		border: none;
		margin: 10px auto;
		border-radius: 5px;
		font-size: 0.9em;
	}

	.fns_contact p {
		font-weight: bold;
		text-align: center;
		margin: 0 0;
		font-size: 1em;
	}

	.cTime {
		display: block;
		margin: 0 2px;
	}
>>>>>>> .r2111

	#goTop {
		text-align: center;
	}

	#goTop a {
		color: #FFF;
		text-decoration: none;
	}

	/* フォームテーブル */
	/*=======================================================================*/

	.checkbox02 {
		width: 98%;
		margin: 20px auto;
		font-size: 0.8em;
		line-height: 1.6em;
	}

	dl {
		width: 98%;
		display: block;
		margin: 5px auto 12px auto;
		padding: 5px;
		box-sizing: border-box;
		-webkit-transition: all .3s;
		transition: all .3s;
		border: 5px solid #EEE;
		border-radius: 5px;
	}

	dl#dlBib,
	dl#dlSv {
		overflow: hidden;
	}


	dl:before, dl:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	dl:after {
		clear: both;
	}

	dl dt,
	dl dd {
		display: block;
		vertical-align: middle;
		border-top: none !important;
	}

	dl dt {
		width: auto;
		box-sizing: border-box;
		padding: 5px 0 5px 0;
		vertical-align: top;
		font-weight: bold;
		display: inline-block;
		margin: 0 0 0 0;
		background: none !important;
	}

	dl dd.markArea {
		width: 18%;
		box-sizing: border-box;
		vertical-align: top;
		padding: 5px 5px 5px 0;
		font-size: 0.8em;
		display: inline-block;
		text-align: right;
		margin: 0 0 10px 0;
		background: none;
	}

	dl dd.txtArea {
		width: 100%;
		box-sizing: border-box;
		vertical-align: middle;
		padding: 5px 0 0 0;

	}

	.SrvIDate {
		padding: 0 0 10px 0;
	}


	/* フォームブロック */
	/*=======================================================================*/

	/* 通常入力articleブロック */
	form > article.baseInputTable {
		width: 100%;
	}


	/* フォームテキストエリア */
	/*=======================================================================*/

	.SubTxt {
		display: block;
		font-size: 0.8em;
		line-height: 1.5em;
		padding: 10px 0;
	}

	article.baseInputTable dl:last-child dt,
	article.baseInputTable dl:last-child dd,
	article.baseInputTable dl#dlCycle dt,
	article.baseInputTable dl#dlCycle dd,
	article.baseInputTable dl#dlYmd dt,
	article.baseInputTable dl#dlYmd dd {
	    border-bottom: none;
	}



	/* フォーム以外のパーツについて */
	/*=======================================================================*/

	/* 必須・任意マーク */

	.markAny {
		display: inline-block;
		border-radius: 5px;
		background: #4DB6AC;
		color: #FFF;
		padding: 5px;
	}

	.markReq {
		display: inline-block;
		border-radius: 5px;
		background: #d32f2f;
		color: #FFF;
		padding: 5px;
	}

	/* */

	.sDateTtl01 {
		width: 100%;
		display: block;
		padding: 0 0 20px 0;
		clear: both;
	}

	.sDateTtl02 {
		width: 100%;
		display: block;
		padding: 20px 0;
		clear: both;
	}

	.SrvIDate .pcLayOut {
		display: none;
	}

	.SrvIDate .mobLayOut {
		display: block;
	}


	article.baseInputTable dl:last-child dt, article.baseInputTable dl:last-child dd, article.baseInputTable dl#dlCycle dt, article.baseInputTable dl#dlCycle dd, article.baseInputTable dl#dlYmd dt, article.baseInputTable dl#dlYmd dd {
	    border: none;;
	}

	/* 商品・プラン */

	.product_opt {
		width: 100%;
		line-height: 1.4em;
	}

	.product_opt .checkbox-parts {
		width: 65%;
		display: block;
	}

	.product_opt_su {
		display: block;
		margin: 5px 0 5px 25px;
		padding: 5px 0;
	}

	#ItemSizeArea,
	#ItemSrvArea {
		width: 100%;
		display: block;
		margin: 0;
		padding: 0;
	}

	#ItemSizeArea:before,
	#ItemSizeArea:after,
	#ItemSrvArea:before,
	#ItemSrvArea:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#ItemSizeArea:after,
	#ItemSrvArea:after {
		clear: both;
	}

	label.ItemSize {
		width: 100%;
		display: block;
	}

	.ISBox {
		width: 100%;
		margin: 0;
		padding: 0;
		display: block;
	}

	.ISpictBox {
		width: 80px;
		float: left;
		text-align: center;
		display: block;
		vertical-align: top;
		margin: 0 10px 0 0;
		position: relative;
		z-index: 10;
	}

	.ISpictBox img {
		max-width: 100%;
		height: auto;
		max-height: 120px;
		margin: 10px auto;
	}

	.ISSelBox {
		width: 75%;
		float: none;
		display: block;
		vertical-align: top;
		padding: 10px 0 0 10px;
		margin-right: -90px;
		padding-left: 90px;
	}

	.SizeName {
		display: inline-block;
		width: 90%;
		font-size: 1em;
		line-height: 1.6em;
		font-weight: normal;
		margin: 0;
	}

	.SizeName .ProductNm2 {
		display: inline-block;
		font-size: 1.3em;
		font-weight: bold;
		padding-left: 0;
	}

	.SizePrice {
		font-size: 1.2em;
		line-height: 1.4em;
		font-weight: bold;
		color: #d32f2f;
		display: block;
		padding: 5px 0 0 0;
		margin: 0 25px 0 0;
	}

	.ISExplain {
		margin: 10px 25px 0 25px;
	}

	.ItemSel_Per100 {
		display: block;
		position: relative;
		width: 100%;
		margin: 10px 5px 0 30px;
	}

	.ItemSel_Per50 {
		display: block;
		position: relative;
		width: 48%;
		margin: 0 0 20px 0;
	}

	/* 紹介者 */

	.SyokaiName {
		position: relative;
		display: block;
	}

	.SyokaiName span {
		font-size: 0.9em;
		line-height: 1.6em;
	}

	.SyokaiName input {
		margin: 0 !important;
	}

	/* 認知手段 */

	.NinchiArea {
		display: inline-block;
	}

	/* ご利用人数 */

	.useNinzu {
		display: block;
	}

	/* 認知手段 */

	.NinchiArea {
		display: block;
	}

	#media_detail {
		width: 98%;
		display: block;
	}

	/* 住所検索ボタン */
	/*=======================================================================*/

	#zip-btn1,
	#zip-btn2 {
		display: inline-block;
		padding: 6px 5px;
		margin: 0 0 5px 5px;
		background: #f3f3ed;
		border: 2px solid #babab1;
		cursor: pointer;
		-webkit-transition: all .5s;
		transition: all .5s;
		border-radius: 3px;
		font-size: 0.9em;
	}

	#zip-btn1:active,
	#zip-btn2:active {
		    background: #babab1;
	}

	/* ヘルプツールチップ */
	/*=======================================================================*/

	.BtnTc {
		display: inline-block;
		width: 22px;
		height: 22px;
		margin: -2px 0 0 10px;
		cursor: pointer;
		/*
		position: absolute;
		top: 0;
		right: 0;
		*/
	}

	.BtnTc i {
		font-size: 22px;
		color: #00838F;
	}

	.BoxTc {
		background: rgba(255, 255, 255, 1);
		width: 280px;
		height: fit-content;
		padding: 10px;
		position: absolute;
		margin: auto;
		bottom: 20px;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: left;
		z-index: 2000;
		display: none;
		border: 2px solid #29B6F6;
		border-radius: 5px;
		font-size: 0.8em;
		line-height: 1.4em;
	}

	.BoxTc:after {
		display: none;
	}

	/* 利用規約 */
	/*=======================================================================*/

	#tosArea {
		width: 80%;
		margin: 10px auto;
		border: 3px solid #E9E9E9;
		background-color: #F6F6F6;
		text-align: center;
		padding: 10px;
	}

	#tosArea p {
		line-height: 1.8em;
	}

	#Tos label {
		margin: 10px 0 0 0;
	}

	/* ご利用上の注意 */
	/*=======================================================================*/

	#wserver,
	#ppp,
	#haisou,
	#haisou_muryou {
		margin: 0 0 20px 0;
	}

	#useNotes ul {
		padding: 5px;
		margin: 0 auto;
		width: 98%;
		list-style: none;
		box-sizing: border-box;
	}

	#useNotes > div p,
	#useNotes ul li {
		position: relative;
		padding: 0.5em 1em 0.2em 2em;
		margin-top: 5px;
		margin-bottom:5px;
		color: #0277BD;
		font-size: 0.8em;
		line-height: 1.4em;
		box-sizing: border-box;

	}

	#useNotes ul li:after,
	#useNotes ul li:before{
		content: "";
		position: absolute;
		border-radius: 50%;
		font-size: 1.4em;
	}

	#useNotes ul li:before{
		left: 0.2em;
		content: "\f043";
		color: #0277BD;
		font-family: FontAwesome;
	}

	#useNotes ul li:after{

	}

	/* 料金表 */

	#useNotes table {
		width: 100%;
		margin: 0 0 20px 0;
		font-size: 1em;
		line-height: 1.6em;
		border-collapse: collapse;
	}

	#useNotes table tbody,
	#useNotes table tr {
		width: 100%;
	}

	#useNotes table th,
	#useNotes table td {
		display: block;
		padding: 0;
		margin: 0;
		border-spacing: 2px;
		vertical-align: top;
		border-collapse: collapse;
	}

	#useNotes table th {
		width: 48.5%;
		display: inline-block;

	}

	#useNotes table td {
		width: 48.5%;
		display: inline-block;
		text-align: left;
		background: #FFF;
	}

	#useNotes .pcLayOut {
		display: none;
	}

	#useNotes .mobLayOut {
		display: table;
	}

	/* メール受信許可 */
	/*=======================================================================*/

	#otokuArea {
		width: 100%;
		margin: 10px auto;
		border: 3px solid #E9E9E9;
		background-color: #F6F6F6;
		text-align: center;
		padding: 10px;
		box-sizing: border-box;
	}

	#otokuArea p {
		line-height: 1.8em;
	}

	#otokuArea label {
		margin: 10px 0 0 0;
	}

	/* フォーム送信 */
	/*=======================================================================*/

	#SubmitBtnArea {
		text-align: center;
	}

	.ComBtn_A {
		width: 280px;
		display: inline-block;
		margin: 0 10px;
		height: 60px;
		text-align: center;
		text-decoration: none;
		outline: none;
		position: relative;
		z-index: 2;
		background-color: rgba(255,23,68,1);
		border: 2px solid rgba(255,23,68,1);
		color: #FFF;
		line-height: 55px;
		overflow: hidden;
		border-radius: 60px;
		cursor: pointer;
		font-size: 1.4em;
		padding: 0;
	}

	.ComBtn_A::before,
	.ComBtn_A::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}

	.ComBtn_A,
	.ComBtn_A::before,
	.ComBtn_A::after{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all .3s;
		transition: all .3s;
	}

	.ComBtn_A:hover {
		color: rgba(255,23,68,1);

	}

	.ComBtn_A::after {
		top: -100%;
		width: 100%;
		height: 100%;
	}

	.ComBtn_A:hover::after {
		top: 0;
		background-color: rgba(255,255,255,1);
	}

	.ComBtn_B {
		width: 280px;
		display: inline-block;
		margin: 10px;
		height: 60px;
		text-align: center;
		text-decoration: none;
		outline: none;
		position: relative;
		z-index: 2;
		background-color: rgba(255,255,255,1);
		border: 2px solid rgba(96,125,139,1);
		color: rgba(96,125,139,1);
		line-height: 55px;
		overflow: hidden;
		border-radius: 60px;
		cursor: pointer;
		font-size: 1.4em;
		padding: 0;
	}


	/* フッター */
	/*=======================================================================*/

	footer {
		width: 100%;
		margin: 50px 0 0 0;
		background: #E1F5FE;
		box-sizing: border-box;
		text-align: center;

	}

	footer p {
		font-size: 0.8em !important;
		color: #0277BD;
		padding: 20px;
	}

	/* ページの先頭へ戻る */
	/*=======================================================================*/

	#page-top {
		position: fixed;
		bottom: 20px;
		right: 20px;
		line-height: 16px;
		z-index: 99;
	}

	#page-top a {
		display: block;
		text-indent: -9999px;
		width: 50px;
		height: 50px;
		background: url(../img/top.png) no-repeat 0 0;
		background-size: contain;
	}

}