@charset "UTF-8";

/*****************  ベース　ここから  *****************/

html {
	font-size: 62.5%;
	/* 10px */
}

body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width: 100%;
	line-height: 1.8;
	font-size: 1.4em;
	/* 14px */
	color: #333;
	letter-spacing: .05em;
	background: #fff;
}

a {
	text-decoration: none;
	color: #333;
}

strong {
	font-weight: bold;
}

input[type=text], input[type=date], input[type=number]  {
	border: 1px #999 solid;
	border-radius: 3px;
	height: 32px;
  background: white;
  min-width: 193px;
}
/* ipad safari でそろうように調整。ただし他ではずれる */
 input[type=date] {
  min-width: 173px;
}

/*****************  ベース　ここまで  *****************/

/*****************  レイアウト　ここから  *****************/

.l-header {
	max-width: 1280px;
	height: 280px;
	margin: 0 auto;
}

.header-border:not(.header-border-show) {
  display: none;
}

.l-main {
	padding: 15px 0 60px 0;
}

.l-info {
	/* フロー図と、pcsp共通の画面タイトル */
	max-width: 1000px;
	margin: 0 auto;
}

.l-content {
	max-width: 1000px;
	margin: 0 auto 60px;
	padding: 60px 50px;
}

/*****************  レイアウト　ここまで  *****************/

/*****************  テーマ汎用　ここから  *****************/

/* sp専用部分を非表示にする　pc専用部分はspメディアクエリ内でnoneを指定 */

.sp-display {
	display: none !important;
}

/* テーマ文字色 */

.main-color-text {
	color: #CE4950;
}

.base-color-dark {
	color: #666;
}

.base-color-pale {
	color: #999;
}

.content-center {
	text-align: center;
}

.error-message {
	color: #E00 !important;
}

.error-input {
	border: 1px #E00 solid !important;
    color: #E00 !important;
}

.error-input {
    border: 1px #E00 solid !important;
}

/* シンプルなリスト */

ul.list-disc {
	padding: 0 0 0 2rem;
	list-style-type: disc;
	list-style-position: outside;
}

/* ボタン */

.btn-container .area-submit-btn {
	margin: 30px 0;
}

.btn {
	/* 高さ45pxのボタン */
	width: 50%;
	max-width: 480px;
	height: 45px;
	border: 1px solid #666;
	border-radius: 5px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	cursor: pointer;
	white-space: nowrap;
}

.btn>.btn-icon {
	/*
  マテリアルアイコンと同時使用で微調整のために使う
  .material-iconsクラスはGoogle指定なので消さずに併用
   */
	position: absolute;
	left: 12px;
	bottom: 50%;
	-webkit-transform: translate(50%, 50%);
	transform: translate(50%, 50%);
}

.btn>.btn-tell-icon {
	top: 8px;
	left: 30px;
	font-size: 1.8rem;
}

@media all and (-ms-high-contrast: none) {
	/* IE専用 */
	.btn>.btn-icon {
		transform: translate(50%, 60%);
	}
}

.btn-link {
	/* ボタンの形をしたリンク */
	display: inline-flex;
}

.btn-next {
	height: 60px;
	background-color: #CE4950;
	border: none;
	font-size: 2.2rem;
	color: #FFFFFF;
	margin-bottom: 30px;
}


.btn-back {
	width: 268px;
	max-width: 80%;
	height: 50px;
	background-color: #999999;
	border: none;
	position: relative;
	font-size: 1.6rem;
	color: #FFFFFF;
}

.btn-close {
  width: 268px;
  max-width: 80%;
  height: 50px;
  background-color: #999999;
  border: none;
  position: relative;
  font-size: 1.6rem;
  color: #FFFFFF;
}

.btn-download-pdf {
	height: 60px;
	border: 1px solid #333333;
	font-size: 1.48rem;
	background-color: #FFF;
}

.btn-download-pdf>.btn-icon {
	left: -2%;
}

/* チェックボックス */

.checkbox-red input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	position: relative;
	right: 0;
	bottom: 0;
	left: 0;
	height: 20px;
	width: 20px;
	vertical-align: -0.8rem;
	transition: all .15s ease-out 0s;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin: 0.4rem 0.8rem 0.4rem 0.4rem;
	outline: none;
	border-radius: 10%;
}

.checkbox-red input[type=checkbox]::before, .checkbox-red input[type=checkbox]::after {
	position: absolute;
	content: "";
    display: inline-block;
	background: #fff;
	transition: all .2s ease-in-out;
}

.checkbox-red input[type=checkbox]::before {
	left: 2px;
	top: 6px;
	width: 0;
	height: 2px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

.checkbox-red input[type=checkbox]::after {
	right: 9px;
	bottom: 3px;
	width: 2px;
	height: 0;
	transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
	-moz-transform: rotate(40deg);
	-ms-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	transition-delay: .2s;
}

.checkbox-red input[type=checkbox]:checked::before {
	left: 1px;
	top: 10px;
	width: 6px;
	height: 2px;
}

.checkbox-red input[type=checkbox]:checked::after {
	right: 5px;
	bottom: 1px;
	width: 2px;
	height: 14px;
}

.checkbox-red input[type=checkbox]:indeterminate::before, .checkbox-red input[type=checkbox]:indeterminate::after {
	width: 7px;
	height: 2px;
	transform: rotate(0);
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	-o-transform: rotate(0);
}

.checkbox-red input[type=checkbox]:indeterminate::before {
	left: 1px;
	top: 7px;
}

.checkbox-red input[type=checkbox]:indeterminate::after {
	right: 1px;
	bottom: 7px;
}

.checkbox-red input[type=checkbox].red, .checkbox-red input[type=radio].red {
	border: 2px solid #CE4950;
}

.checkbox-red input[type=checkbox].red:checked, .checkbox-red input[type=radio].red:checked::before {
	background: #CE4950;
}

.checkbox-red label {
	cursor: pointer;
}

/* 入力項目 */

.area-confirmation-input {
	display: flex;
}

.area-confirmation-input .line-same-input {
    margin-right: 10px;
    border-left: 2px solid #CCCCCC;
    padding-left: 10px;
}

.area-confirmation-input .area-form-same-input {
    margin: 10px 0px;
}

/*****************  テーマ汎用　ここまで  *****************/

/*****************  header向けモジュール　ここから  *****************/

/*
■共通フロー図について注意
sp番のフロー図はheader内、pc番のフロー図はl-info内
*/

.header {
	background: no-repeat url("/assets/common/common_header_pc.png") bottom center/cover;
}

.l-header .logo-container {
	/* header内のロゴとアプリ名 */
	max-width: 1000px;
	margin: 0 auto;
	padding: 90px 20px 0;
}

.l-header .header-logo {
	width: 333px;
}

.l-header .top-title {
	margin-top: 10px;
	color: #CE4950;
	font-weight: 600;
	font-size: 2.8rem;
}

.header-border {
	/* headerのwrapper、下線表示のために定義 */
	border-bottom: 7px solid #7FCCE0;
}

/*****************  headerモジュール　ここまで  *****************/

/*****************  main向けモジュール　ここから  *****************/

.main {
	display: block;
	/* IEだと画像が表示されない対策 */
	background: url("/assets/common/bg.gif");
}

/*****************  main向けモジュール　ここまで  *****************/

/*****************  info向けモジュール　ここから  *****************/

.l-info .page-title {
	padding: 60px 0;
	text-align: center;
	color: #CE4950;
	font-weight: 500;
	font-size: 3.2rem;
}

/*****************  info向けモジュール　ここまで  *****************/

/*****************  content向けモジュール　ここから  *****************/

.content {
	/* 主要コンテンツの枠、最上位section */
	background: #fff;
	font-size: 1.7rem;
	line-height: 2;
}

.l-content .top-section-title {
	/* 主要コンテンツの枠、最上位sectionのタイトル */
	margin-bottom: 45px;
	font-size: 2.4rem;
	text-align: center;
}

/* 背景色つき見出しのあるarticle */

.l-content .article-item {
	max-width: 760px;
	margin: 0 auto;
	border: 1px solid #999;
	border-radius: 5px;
}

.l-content .article-title {
	padding: 10px;
	text-align: center;
	color: #fff;
	background: #999;
	font-size: 1.9rem;
	font-weight: 400;
}

.l-content .article-text {
	margin: 0;
	padding: 30px;
}

.required {
  background: #3D6EDD;
  color: #FFF;
  display: inline-block;
  padding: .4rem 1rem .2rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.form-title > .required {
  font-weight: normal;
  position: relative;
  left: .8rem;
}

.google-map {
  height: 555px;
  border: 1px solid #707070;
  display: flex;
  place-items: center;
  place-content: center;
}

#lat, #lng, #mapDataList, #zoom {
  display: none !important;
}

/*****************  contentモジュール　ここまで  *****************/

/*****************  footerモジュール　ここから  *****************/

.l-footer .pc-footer {
	padding: 14px 0 20px;
	text-align: center;
	color: #fff;
	font-family: 'Philosopher', sans-serif;
	background: #7FCCE0;
	cursor: pointer;
}

.l-footer .pc-footer .backtop-icon {
	/*
  マテリアルアイコンと同時使用で微調整のために使う
  .material-iconsクラスはGoogle指定なので消さずに併用
  */
	font-size: 3rem;
	transform: rotate(-90deg);
	cursor: pointer;
}

.l-footer .pc-footer .page-top {
	line-height: .5;
}

.l-footer .copyright {
	display: block;
	padding: 20px 0;
	text-align: center;
	font-size: 1.5rem;
	font-family: 'Philosopher', sans-serif;
}

/*****************  footerモジュール　ここまで  *****************/


/*****************  modalモジュール　ここまで  *****************/

/*****************************************************************
　　　　　　　　　　　　　SP版のための追加設定
*****************************************************************/

/* スマホ縦画面の幅で判定 幅767px以下の場合に適用 */

@media screen and (max-width: 767px) {
	/*****************  レイアウト　ここから  *****************/
	.l-header {
		height: 153px;
	}
	.l-main {
		padding: 0px 10px 60px 10px;
	}
	.l-content {
		margin: 0 auto 30px;
		padding: 30px 10px;
	}
	/*****************  レイアウト　ここまで  *****************/
	/*****************  テーマ汎用　ここから  *****************/
	/* sp専用部分を非表示にする　pc専用部分はspメディアクエリ内でnoneを指定 */
	.sp-display {
		display: block !important;
	}
	.pc-display {
		display: none !important;
	}
	.btn {
		/* 高さ45pxのボタン */
		font-size: 1.5rem;
		width: 90%;
		min-width: 180px;
	}
	.btn>.btn-icon {
		/*
    マテリアルアイコンと同時使用で微調整のために使う
    .material-iconsクラスはGoogle指定なので消さずに併用
     */
		left: 6px;
		top: 5px;
	}
	.btn-download-pdf {
		width: 100%;
		font-size: 1.5rem;
	}
  .download-pdf-container {
    margin: auto 5%;
  }
    .btn-container.flow-btns {
      width: 90%;
      max-width: 300px;
      margin: 0 auto;
    }
    .container-btn-next {
      margin-top: 30px;
    }
    .btn-next {
      font-size: 1.7rem;
      margin-bottom: 30px;
      width: 100%;
    }
    .btn-back {
      font-size: 1.6rem;
      width: 50%;
      min-width: unset;
      margin-left: 0;
    }
   .btn-next > .btn-icon,
   .btn-back > .btn-icon {
      top: auto;
      left: -8px;
    }
	/*****************  テーマ汎用　ここまで  *****************/
	/*****************  header向けモジュール　ここから  *****************/
	/*
  	■共通フロー図について注意
  	sp番のフロー図はheader内、pc番のフロー図はl-info内
  	*/
	.header {
		background: no-repeat url("/assets/common/common_header_sp.png") top center/cover;
	}
	.l-header .logo-container {
		/* header内のロゴとアプリ名 */
		padding: 20px;
	}
	.l-header .header-logo {
		width: 165px;
	}
	.l-header .top-title {
		font-size: 1.6rem;
	}
	/*****************  headerモジュール　ここまで  *****************/
	/*****************  info向けモジュール　ここから  *****************/
	.l-info .page-title {
		margin-top: 30px;
		padding: 0 0 30px;
		font-size: 2.0rem;
		font-weight: 600;
		/* spのみ太め */
	}
	/*****************  info向けモジュール　ここから  *****************/
	/****************  content向けモジュール　ここから  ***************/
	.content {
	    /* 主要コンテンツの枠、最上位section */
	    background: #fff;
	    font-size: 1.3rem;
	    line-height: 1.55;
	}

	.l-content .top-section-title {
		/* 主要コンテンツの枠、最上位sectionのタイトル */
		font-size: 1.6rem;
		text-align: left;
		margin-bottom: 0;
		padding: 0 10px 20px;
	}
	/* 背景色つき見出しのあるarticleのタイトル */
	.l-content .article-title {
		font-size: 1.5rem;
	}
	.l-content .article-text {
		padding: 10px;
		font-size: 1.3rem;
		text-align: center;
	}
	.required {
	  font-size: 1.2rem;
	}

	/*****************  contentモジュール　ここまで  *****************/
	/*****************  footerモジュール　ここから  *****************/
	.l-footer .sp-footer {
		padding: 30px 0 0;
		text-align: center;
		font-size: 1.3rem;
	}
	.l-footer .footer-logo {
		width: 70%;
		max-width: 290px;
		margin: 0 auto 10px;
	}
	.l-footer .tel-container {
		margin: 15px auto 10px;
	}
	.l-footer .btn-tel {
		max-width: 220px;
		background: #40AAD9;
		border: 1px solid #40AAD9;
		color: #fff;
	}
	.l-footer .btn-tel .btn-icon {
		top: 8px;
		left: 30px;
		font-size: 1.8rem;
	}
	.l-footer .btn-tel .back-fill {
		color: #40AAD9;
		background: #fff;
		border-radius: 50%;
		padding: .3rem;
		margin-right: 10px;
	}
	.l-footer .copyright {
		text-align: center;
		font-size: 1.1rem;
		color: #999;
		/* sp版だけ淡い */
		padding: 20px 0 30px;
	}
	/*****************  footerモジュール　ここまで  *****************/
	/*****************  modalモジュール　ここから  *****************/
	.modal {
		width: 95%;
		margin: 0 auto;
		left: 3%;
	}
	/*****************  modalモジュール　ここまで  *****************/
}