@charset "utf-8";
/*
  Web申込　赤ベース
*/

body {
  font-family: "メイリオ","Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/*  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
*/
  line-height: 1.5;
  font-size: 12px;
  color: #000000;
  text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
  word-break: break-all;
}

#container {
  box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
  overflow: hidden;
}
@media screen and (max-width:799px) {
	#container {
	  width: 100%;
	}
	#tel-call-head {
	  display:none;
	}
}
@media screen and (min-width:799px) {
	#container {
	  width: 799px;
	  margin: auto;
	  }
}

/*=========================================*/
/*     ＰＣ/スマホで改行位置の切り替え       */
/*=========================================*/
/*----< ＰＣ用 >--------------------*/
@media screen and (min-width: 799px) {
	.br-pc { display:block; }
	.br-sp { display:none; }
}
/*----< スマホ用 >--------------------*/
/* @media screen and (min-width: 375px) and (max-width: 980px) { */
@media screen and (min-width: 375px) and (max-width: 799px) {
	.br-pc { display:none; }
	.br-sp { display:block; }
}


header {
  display: table;
  width: 100%; max-width:799px;
  margin: 0 auto;
  margin-bottom: 0px;
  border-bottom: 1px solid #e71e31  ;
}
header div{
  display: table-cell;
  padding: 0px 6px;
  text-align: left;
  vertical-align: middle;
  color:                  #000000  ;
}

/*----< ＰＣ用　枠組み >--------------------*/
@media screen and (min-width:799px) {
	header div:first-child {
		width:200px;
		padding-left: 16px;
	}

	#header_logo  {
	    position: relative;
	    width: 160px;
	    transition: none;
	}
	#header_logo  img{
	    padding-left: 10%;
	    max-width: 80%; width: 80%;
	    height: 60px;
	}

	#header_logo a:before {
	    content: '';
	    z-index: -1;
	    background-color: #e71e31;
	    position: absolute;
	    width: 100%;  height: 100%;
	    /* 移動 translate(x%,y%)     傾斜 skewX(n deg) x軸(横)にn度 */
	    -webkit-transform: translate(-6%,0%) skewX(-33.5deg);  transform: translate(-6%,0%) skewX(-33.5deg);
	/*  top: 50%; left: 50%;
	    -webkit-transform: translate(-50%,-50%) skewX(-33.5deg);  transform: translate(-48%,-50%) skewX(-33.5deg);
	*/
	}
}
/*----< スマホ用　枠組み >--------------------*/
@media screen and (max-width:799px) {
	header div:first-child {
		width:140px;
		padding-left: 16px;
	}

	#header_logo  {
	    position: relative;
	    width: 120px;
	    transition: none;
	}

	#header_logo  img{
	    padding-left: 0;
	    max-width: 80%; width: 80%;
	    height: 60px;
	}

	#header_logo a:before {
	    content: '';
	    z-index: -1;
	    background-color: #e71e31;
	    position: absolute;
	    width: 80%;  height: 100%;
	    /* 移動 translate(x%,y%)     傾斜 skewX(n deg) x軸(横)にn度 */
	    -webkit-transform: translate(-10%,0%) skewX(-33.5deg);  transform: translate(-10%,0%) skewX(-33.5deg);
	}
}


/*=========================================*/
/*     ステップ表示設定                    */

/* step */
.navi {
	padding-top: 20px;
	max-width: 799px;
	margin: auto;
}
.step {
	margin: 0;
	padding: 0;
	z-index: 0;
	position: relative;
}
.step li {
	list-style-type: none;
	width: 25%;
	line-height: 0.5em;
	float: left;
	font-size: 12px;
	position: relative;
	text-align: center;
	color: #aaa;
}
.step li:before {
	width: 25px;
	height: 25px;
	content: "";
	display: block;
	text-align: center;
	margin: 0 auto 10px auto;
	border-radius: 50%;
	background-color: #fff;
	border: 5px solid #ffb2b5;
}
.step li:after {
	width: 100%;
	height: 5px;
	content: '';
	position: absolute;
	background-color: #eee;
	top: 15px;
	left: -50%;
	z-index: -1;
}
.step li:first-child:after {
	content: none;
}
/* 現在のステップ */
.step li.active {
	color: #000;
}
.step li.active:before {
	background-color: #ffb2b5;
	border: 5px solid #e71e31;
}

/* 入力済のステップ */
.step li:not(.active ~ li):not(.active):before {
	border-color: #e71e31;
}
.step li:not(.active ~ li):after {
	background-color: #ffb2b5;
}

/*----< スマホ用 >--------------------*/
@media screen and (max-width:799px) {
	.step li {
		line-height: 1em;
		font-size: 11px;
	}
	.step li:before {
		width: 15px;
		height: 15px;
		margin: 0 auto 5px auto;
	}
	.step li:after {
		top: 10px;
	}
}
/*=========================================*/


#tel-call-head {
  text-align: right;
  padding-right:10px;
}
#tel-call-head a {
  font-size: 75%;
  font-weight: normal;
  color:                  #000000  ;
  outline: none; text-decoration: none;
  opacity: 1;
}
#tel-call-head a:hover, .tel-call a:focus {
  opacity: 0.6;
}

h1 {
  font-size: 140%;
  /*font-weight: bold; */
  /*margin-bottom: 20px;*/
}
section {
  margin-top: 10px;
  margin-bottom: 40px;
}

h2 {
  font-size: 130%;  font-weight: bold;
  position: relative;
  padding: 12px  8px 0px  44px;
  color:#000;   background :#fff  ;
  border-bottom: 1px solid #e71e31  ;
  font-weight: normal;

}

h2:before {
    content: '';
    background-color: #e71e31;
    position: absolute;
    width: 24px;  height: 100%;
    -webkit-transform: translate(-32px,-12px) skewX(-33.5deg);  transform: translate(-32px,-12px) skewX(-33.5deg);
}

h2 > p {
  font-size: 80%;  font-weight: normal;
  position: relative;
  padding-left: 16px;
}

h2 > p:before {
  content: '※';
  position: absolute; top: 0; left: 4px;
}
h3 {
  margin: 0 ;
  padding: 4px  8px;
  font-size: 140%;  font-weight: bold;
  position: relative;
  /*color:#000;   background :#ccff99  ; */
}

footer {
  width: 100%;
  padding: 20px 0;
  margin-top: 20px;
  color:#fff;   background :#e71e31  ;
}
footer div {
  vertical-align: middle;  text-align: center;
}
footer a {
  color:#fff;
}



#explain {
  margin : 10px;
}
#explain p {
   margin-bottom : 4px;
}
#explain p:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* 400 */
  font-size: 1.2em;
  content: "\f00c";  /* チェック"\f00c" 白抜き丸チェック"\f058" 白抜き四角チェック"\f14a"  鉛筆"\f303"*/
  padding-right: 5px;
  color: #66ff00;
}

/*=========================================*/
/*     入力項目の構成                      */
/*
  <div class="input-item">
      <dl>
          <dt><label>タイトル</label><span>必須</span></dt>
          <dd>
              <dl>  ・・・・・ Table
                  <dd>  ・・・ TableCell
                      <div class="hint-add before">入力ガイド</div>
                      <input type="text" maxlength="" class="" value="" placeholder="例: 入力例" style="padding-left: 30px;">
                  </dd>
              </dl>
          </dd>
      </dl>
  </div>
                                           */
/*=========================================*/


/*----< スマホ用　枠組み >--------------------*/
@media screen and (max-width:799px) {
	.input-item  {
	  margin-top: 4px;
	  padding :6px;
	}
	.input-item  dt {
	  margin-bottom: 4px;
	}
/*
	.input-item  dd {
	  margin-bottom: 4px;
	}
*/
	.input-item > dl > dd > dl {
	  display: table;
	  position: relative;
	  width: 100%;
	  border-collapse: separate;  border-spacing: 4px 0;
	  margin-bottom:2px;
	}
	.input-item > dl > dd > dl > dd {
	  display: table-cell;
	  position: relative;
	}
	.kessai  {
	  font-size: 1.5em;
	  margin: 5% auto;
	}

}

/*----< ＰＣ用　枠組み >--------------------*/
@media screen and (min-width:799px) {
	.input-item  {
	  border-left:   1px solid   #c0c0c0 ;
	  border-right:  1px solid   #c0c0c0 ;
	}

	.input-item > dl {
	  display:table;
	  width:100%;
	}

	.input-item > dl > dt, .input-item > dl > dd {
	  vertical-align: middle;
	  display:table-cell;
	  padding : 10px 6px;
	  border-top: 1px dotted  #c0c0c0 ;
	}

	/* タイトル域     */
	.input-item > dl > dt {
	  background : #f9ffe6;    /* TEST */
	  background : #e0fff0;    /* TEST */
	  background : #ecfff8;    /* TEST */
	  background : #ffffff;
	  width:30%;
	}

	/* 入力域の左右枠線   */
	.input-item > dl > dt+dd , .input-item > dl > dd+dd {
	  border-left:   1px solid   #c0c0c0;
	  border-right:  0px  ;
	}

	/* セクション最初のタイトル・入力域の上枠線を消す   */
	section h2 + div.input-item > dl > dt,  section h2 + div.input-item > dl > dd  {
	  border-top: 0px ;
	}

	/* セクション最後のタイトル・入力域の下枠線を通常の線にする   */
	section div:last-child > dl > dt,  section div:last-child > dl > dd  {
	  border-bottom: 1px solid  #c0c0c0 ;
	}

	/* 合計行のタイトル・入力域の上枠線を2重線   */
	.input-item > dl.summary-line > dt , .input-item > dl.summary-line > dd {
	  border-top: 3px double  #c0c0c0 ;
	}

	/* 行内要素3つ目の幅を固定 */
	.input-item > dl > dd:nth-child(3) {
		width: 150px;
	}


	.input-item > dl > dd > dl  {
	  display: table;
	  border-collapse: separate;  border-spacing: 4px 0;
	  width:100%;
	  margin-bottom:2px;
	}
	.input-item > dl > dd > dl > dd {
	  display: table-cell;
	  position: relative;
	}

	dd.type-must{
	  background:          #ffeeee;
	}

	.kessai  {
	  font-size: 1.5em;
	  margin: 3% auto;
	}
}

.input-item img {
  position: relative;
  margin-right: 1em;
  vertical-align: middle;
}
.input-item img:after {
  content: attr(alt);
  color: #646464;
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}


/*----< radioなどの列分割  >--------------------*/
.input-item dl.split-1col > dd {
  display: inline-block;
  width: 98%;
}
.input-item dl.split-2col > dd {
  display: inline-block;
  width: 47%; margin-right:6px;
}
.input-item dl.split-3col > dd {
  display: inline-block;
  width: 30%; margin-right:6px;
}





/*----< 項目タイトル  >--------------------*/
.input-item dt > label{
	  font-size: 120%;  font-weight: bold;
	  color:                     #000000 ;       /* TEST */
}
@media screen and (max-width:799px) {
  .input-item dt > label:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* 400 */
    font-size: 1.2em;
    content: "\f303";  /* チェック"\f00c" 白抜き丸チェック"\f058" 白抜き四角チェック"\f14a"  鉛筆"\f303"*/
    padding-right: 5px;
    color: #e71e31;
  }

	.confirm_ok, .confirm_ng {
		display: flex;
	}
	/* スマートフォン表示時、ラベル先頭にチェックマーク */
	label.confirm_ok:before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 1.2em;
		content: "\f00c";
		padding-right: 5px;
		color: #66ff00;
	}
	/* スマートフォン表示時、ラベル先頭にバツマーク */
	label.confirm_ng:before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 1.2em;
		content: "\f00d";
		padding-right: 5px;
		color: #ff6060;
	}
}

/*----< ＰＣ用 >--------------------*/
@media screen and (min-width: 799px) {
	.confirm_ok > span { display:block; }
	.confirm_ng > span { display:none; }
}
/*----< スマホ用 >--------------------*/
@media screen and (min-width: 375px) and (max-width: 799px) {
	.confirm_ok > span { display:block; }
	.confirm_ng > span { display:block; }
}


/*----< 項目タイトルの必須マーク  >----------*/
.input-item dt > span{
  display: inline-block;
  line-height: 0;
  padding: 10px 10px;
  margin-left: 14px; margin-top: -2px;
  vertical-align: middle;
  border-radius: 4px;
  background: #ff6060; color: #fff;
}


/*----< 項目説明の小タイトル  >----------*/
.input-item dd > p {
  margin-top: 8px;
  /*font-weight: bold;*/
  /*color: #9999ff;*/
}
.input-item dd > div > p {
  margin-top: 6px;
  /*font-weight: bold;*/
  /*color: #9999ff;*/
}

.support-link {
	color: #ff6a00;
	text-decoration: none;
}


/*----< リスト  >----------------------------*/
.input-item  ul {
  display:block;
}
.input-item  ul > li {
  position: relative;
  padding-left: 22px;
  font-size: 90%;
}
.input-item  ul > li:first-child {
  margin-top: 2px;
}
.input-item  ul > li:before {
  content: '※';
  position: absolute; top: 0; left: 10px;
}

/*----< リスト  >----------------------------*/
div.guide-list {
	padding: 10px;
}
.guide-list > * {
	margin-bottom: 1em;
}
.guide-list > h4 {
  font-size: 120%;
  font-weight: bold;
  margin-top: 6px;  margin-left: 1em;
}

.guide-list > ul > li:first-child {
	font-size: 110%;
	padding-left: 2em;
	text-indent: -1.6em;
}
.guide-list > ul > li:first-child:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* 400 */
  font-size: 1.2em;
  content: "\f00c";  /* チェック"\f00c" 白抜き丸チェック"\f058" 白抜き四角チェック"\f14a"  鉛筆"\f303"*/
  padding-right: 0.3em;
  color: #66ff00;
}
.guide-list > ul > li:not(:first-child) {
	padding-left: 2em;
}
.guide-list p {
	padding-left: 1em;
}
.guide-list dl, .guide-list dl > dd {
	position: relative;
	display: flex;
}
.guide-list dl > dl {
	display: block;
	padding: 5px;
	border:solid 1px #000000;
}
/* .guide-list img {
	border:solid 1px #000000;
	width: 100%;
} */
div.img-list {
	margin: auto;
	margin-top: 10px;
}
div.img-list > dl {
	display: flex;
}
div.img-list > dl > dd {
	width: 50%;
	text-align: center;
}
div.img-list img {
	border:solid 1px #000000;
	width: 90%;
	margin-top: 5px;
}
div.download-link {
	border:solid 1px #c0c0c0;
	border-radius: 10px;
	padding: 10px;
	margin-top: 10px;
	text-align: center;
}


span.label-hidden {
  color: #9e9e9e;
}

/*----< 入力項目ヒント、単位  >----------*/
.hint-add {
    z-index: 1;
    position: absolute;    top: 10px;    right: 10px;
    font-size: 86%;
}
.hint-add.before {
    right: auto;
    left: 6px;
}

/*----< 注意事項  >----------*/
p.caution{
	font-weight: bold;
	text-align: center;
	padding-left: 5%;
	padding-right: 5%;
}
p.important{
	font-weight: bold;
	font-size: 1rem;
	padding-left: 4em;
	text-indent: -4em;
}
p.sentence {
	margin: 0 3% 0 3%;
	padding-left: 2em;
	text-indent: -2em;
	word-break: normal;
}
div.sentence-box {
	margin: 10px;
	padding: 10px;
	border:solid 1px #000000;
}


/****************************************************************
     共通
*****************************************************************/
input[type=text].ime-inactive { ime-mode:inactive; }	/* 英数入力モード(切替可) */
input[type=text].ime-active   { ime-mode:active;   }	/* 日本語入力モード(切替可) */
input[type=text].ime-disabled { ime-mode:disabled; }	/* 英数入力モード(切替不可) */


.align-right { text-align: right  !important; }
.align-left  { text-align: left   !important; }
.align-center{ text-align: center !important; }




/*=========================================*/
/*     入力エラー                          */
/*=========================================*/
.errorBalloon {
	display :none;
	position: absolute;  top: -3px;
	width:120px;  z-index: 9999;
	padding: 10px;  line-height:1.5;  border-radius: 8px;
	background: #f87474; color: #fff;
	background: #74c1f8; color: #fff;
	font-size: 90%;
	  opacity: 0.9;
}
.errorBalloon:before {
	position: absolute;  left: 20px;  top: -10px;  /*width: 10px;*/
	display: block; content: "";
	border:10px solid transparent;
	border-bottom-color: #f87474; border-top-width:0;
	border-bottom-color: #74c1f8; border-top-width:0;
	  opacity: 0.9;
}
.cl-style-error { background-color:#FFcccc !important;   }
/*.cl-style-error { background-color:#FF3333 !important; color:#FFFFFF !important;   }*/



/*=========================================*/
/*     テキストボックス                    */
/*=========================================*/
input[type=text], input[type=password], input[type=number], input[type=tel], input[type=email], input[type=url] {
  appearance: none ; -ms-appearance: none  ; -moz-appearance: none ; -webkit-appearance: none;
  box-sizing: border-box ; -ms-box-sizing: border-box ; -moz-box-sizing: border-box ; -webkit-box-sizing: border-box;
  outline:none;
  display: inline-block;
  border-radius: 4px;
  line-height: 1.2;
  font-size: 115%;
  padding: 7px 8px;
  vertical-align: middle;
  margin: 0;
  width: 100%;
  border: 1px solid    #c00033;
  background:          #ffffff;

}

input[type=tel]{
  width: 25%;
}

dd.yubin_code_block{
  width: 40%;
}

input[type=text]:read-only, input[type=password]:read-only, input[type=number]:read-only, input[type=tel]:read-only, input[type=email]:read-only, input[type=url]:read-only {
	background:          #cccccc;
}
input[type=text]:read-only.type-must, input[type=password]:read-only.type-must, input[type=number]:read-only.type-must, input[type=tel]:read-only.type-must, input[type=email]:read-only.type-must, input[type=url]:read-only.type-must {
	background:          #cccccc;
}

input[type=text].type-must,
input[type=password].type-must,
input[type=number].type-must,
input[type=tel].type-must,
input[type=email].type-must,
input[type=url].type-must,
select.type-must{
  background:          #ffeeee;
}


input[type=text]  {
  text-align:left; ime-mode: active;
}
input[type=password], input[type=email], input[type=url] {
  text-align:left; ime-mode: inactive;
}
input[type=number], input[type=text].type-number  {
  text-align:right; ime-mode: inactive;
}
input[type=text].type-numeric  {
  text-align:left; ime-mode: inactive;
}
input[type=tel] {
  text-align:center; ime-mode: inactive;
}


/*=========================================*/
/*     ラジオ、チェックボックス            */
/*=========================================*/
/* media screen を削除すれば、PCで図形にできるがスペース／タブ移動、確定ができない */

@media screen and (max-width:799px) {
	input[type=radio]:not(.kiyaku-checkbox) {
	    display :none;
	}
	.kessai {
	    margin: 5% 5%;
	}
	label.custom-radio {
	    box-sizing: border-box ; -ms-box-sizing: border-box ; -moz-box-sizing: border-box ; -webkit-box-sizing: border-box;
	    display: inline-block;
	    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
	    border-radius: 16px ;
	    padding: 10px ; margin-bottom:15px;
	    line-height: 16px;
	    vertical-align: middle;  text-align: center;
	    font-size: 100% ;
		background:       #ffeeee;
	    color:            #000000;
	    width:100%;
	}
	label.custom-radio:hover, label.custom-radio:focus{
	    background-color: #ffb0b0;
	}
	input[type=radio]:checked + label:not(.kiyaku-checkbox) {
	    background-color: #ff9090;
	    color:            #ffffff;
	    box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3);
	}

	input[type=radio]:disabled + label:not(.kiyaku-checkbox) {
	    background-color: #cccccc;
	}
	input[type=radio]:checked:disabled + label:not(.kiyaku-checkbox) {
	    background-color: #838383;
	}

	label.custom-checkbox {
		display: flex;
		box-sizing: border-box;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
		border-radius: 5px;
		background: #ffeeee;
		color: #000000;
		margin: 5px;
		padding: 10px 40px;
		justify-content: center;
		text-align: center;
		align-items: center;
		font-size: 110%;
	}
	label.custom-checkbox input[type="checkbox"] {
		margin-right: 10px;
	}
	label.custom-checkbox:has(input[type="checkbox"]:checked) {
		background-color: #ff9090;
		color:            #ffffff;
		box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3);
	}

	label.custom-checkbox:has(input[type="checkbox"]:disabled) {
	    background-color: #cccccc;
	}
	label.custom-checkbox:has(input[type="checkbox"]:checked:disabled) {
	    background-color: #838383;
	}

}


/*=========================================*/
/*   セレクトボックス                      */
/*=========================================*/
select{
    appearance: none; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none;
    outline:none;
    padding: 0;
    margin: 0;
    height: 30px;
    background: transparent;
    position: relative;
    padding: 0 40px 0 10px;
    border-radius: 4px;
    border: 1px solid    #c00033;
    background:          #ffcccc;

}

select::-ms-expand {      /* IEのselectbox設定を解除(▼表示しない)  */
    display: none;
}

.custom-select{
    position: relative;
    display: inline-block;
    margin-right:4px;
}
.custom-select::after{
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: #000 transparent transparent transparent;
}
.custom-select .hint-add {
    right: 20px;
}


/*=========================================*/
/*   ボタン                                */
/*=========================================*/
button {
  display: inline-block;
  background: #ff99cc; color: #fff;
  border-radius: 8px;
  line-height: 16px;
  font-size: 100%;
  vertical-align: middle;  text-align: center;
  padding: 6px 10px;

}
button:hover {
  opacity: 0.6;
  transition: 0.3s;
}

.btn-next, .btn-error, .btn-prev  {
  font-size: 140%; font-weight:bold;
  background: linear-gradient(to right top, #9999ff 0%,#6666ff 60%,#9999ff 100%);
  padding: 16px 20px;
  border : 3px solid #cc99ff;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.5) ;
  margin: 10px;
}

button.btn-next:hover, button.btn-error:hover, button.btn_prev:hover{
  background: linear-gradient(to left bottom, #6666ff 0%,#9999ff 60%,#6666ff 100%);
  opacity: 0.6;
  transition: 1s;
}

button:disabled{
  pointer-events: none;
  background: #b9b9b9; color: #fff;
  border : 3px solid #a9a9a9;

}

.btn_view {
	font-size: 130%;
	width: 250px;
}


/*=========================================*/
/*     focus時の設定                       */
/*=========================================*/
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=url]:focus, select:focus {
  border: 1px solid    #ff9900;
  background:          #ffffff;
}

input[type=radio]:focus, input[type=checkbox]:focus{
  outline: none; /* appearance: none; */
  box-shadow: 0px 0px 0px 1px rgba(0,255,0,1) ;
}
:focus{
  outline: none; /* appearance: none; */
}
a:focus, button:focus, input[type=file]:focus{
  outline:  2px dotted    #00ff00;
}
input[type=text]:read-only:focus, input[type=password]:read-only:focus, input[type=number]:read-only:focus, input[type=tel]:read-only:focus, input[type=email]:read-only:focus, input[type=url]:read-only:focus, select:read-only:focus {
  background:          #cccccc;
}


/*=========================================*/
/*     規約画面                            */
/*=========================================*/
.kiyaku  {
  margin: 0 10px;
}
.kiyaku  h2 {
  margin-top: 10px;
}
.kiyaku  h3 {
  font-size: 120%;
  font-weight: bold;
  margin-top: 14px;  margin-left: 4px; margin-bottom: 10px;
  border-bottom: 1px solid #e71e31  ;
}

.kiyaku  p{
  margin-top: 4px;
}

.kiyaku-detail > p, .kiyaku-detail  > ul, .kiyaku-detail > ol{
  margin-top: 8px;  margin-left: 2em;
}

.kiyaku-table{
  margin-top: 4px;  margin-left: 2em;
}


.kiyaku   ul > li {
  margin: 12px 0 0 1em;
  text-indent: -1em;
}
.kiyaku   ol > li {
  list-style: decimal outside;
  margin: 12px 0 0 1em;
}

.kiyaku   ol.nolist > li {
  list-style: none;
}
.kiyaku   ol.kakko > li {
  list-style: none;
  counter-increment: cnt;
  /*text-indent:-1em;*/
}

.kiyaku   ol.kakko > li:before{
  display: marker;
  marker-offset: 10px;
  content: "(" counter(cnt) ").  ";
}


.kiyaku   ul > li:first-child, .kiyaku   ol > li:first-child{
  margin-top: 8px;
}

.kiyaku-checkbox {
  font-weight: bold;
  font-size: 120%;
}



.kiyaku   table  {
  margin-top: 4px;  margin-bottom: 10px;
  border: 1px #000 solid;
}
.kiyaku   table > th,td {
  border: 1px #000 solid;
  padding: 4px 8px 4px 10px;

}


/*=========================================*/
/*     規約フレーム                        */
/*=========================================*/
.kiyaku_frame  {
	position: relative;
	width:94%; height:200px;
	margin-left:3%;
	margin-top:4px; margin-bottom:10px;
	border:1px #c0c0c0 solid;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
.kiyaku_frame iframe  {
	border:0;
	position: absolute; top:0; left:0;
	width:100%; height:100%;
}

/*=========================================*/
/*     ページトップ                        */
/*=========================================*/
#pageTop {
  position: fixed;
  bottom: 10px;  right: 10px;
}

#pageTop a {
  display: none;
  z-index: 999;
  border-radius: 8px;
  width: 30px;  height: 30px;
  padding: 6px ;
  background-color: #ff9966;  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 120%;
  vertical-align: middle;  text-align: center;
  opacity: 0.7;
}

#pageTop a:hover, #pageTop a:focus {
  background-color: #ff6666;  color: #fff;
  outline: none; appearance: none;
  text-decoration: none;
  opacity: 1;
}


/*=========================================*/
/*    サイドの電話番号（固定位置表示）     */
/*=========================================*/
#tel-call-side {
  position: fixed;
  top: 30%;  right: 10px;
}
#tel-call-side a {
  display: table-cell;
  z-index: 999;
  border-radius: 8px;
  width: 110px;  height: 30px;
  padding: 6px ;
  background-color: #ff6600;  color: #fff;
  font-weight: normal;
  outline: none;  text-decoration: none;
  font-size: 90%;
  vertical-align: middle;  text-align: center;
  opacity: 0.9;

}
#tel-call-side a:hover, #tel-call-side a:focus {
  outline: none; appearance: none;
  text-decoration: none;
  opacity: 1;
}


/*=========================================*/
/*     印刷ボタン                          */
/*=========================================*/
#print_btn {
	vertical-align:bottom;
	text-align:right;
}
#print_btn input[type="button"] {
	outline: none; cursor: pointer; border-style: none;
	font-size:100%; font-weight:normal; text-align:center;
	padding: 2px 10px;
	margin: 0px 0px 0px 0px;

  background-color: #ff6666; color: #fff;

}

#print_btn input[type="button"]:hover{
	opacity: 0.6; transition: 0.3s;
}

/*=========================================*/
/*     申込フロー                          */
/*=========================================*/
.apply_flow {
	padding: 20px 0;overflow: hidden;
}
.apply_flow li {
	background-color: #00FF33;  /* #77EEFF; */
	border-bottom:     2px solid #FFFFFF;
	padding: 0 10px 0 30px;
	font-size: 12px; font-weight:bold;
	color: #FFFFFF;
	line-height: 60px;
	display: block;    float: left;
	min-width: 100px;  text-align: center;
}
apply_flow li:first-child {
  padding-left: 10px;
}
/* 斜め上部分 */
.apply_flow li::before {
	content: " ";
	display: block;  float: right;
	background-color: #00FF33;  /* #77EEFF; */
	border-right: 2px solid #FFFFFF;
	height: 30px;  width: 30px;
	margin-bottom: -30px; margin-left: auto;  margin-right: -30px;
	transform: skew(14deg);  -o-transform: skew(14deg);  -ms-transform: skew(14deg);  -moz-transform: skew(14deg);  -webkit-transform: skew(14deg);
}
/* 斜め下部分 */
.apply_flow li::after {
	content: " ";
	display: block;  position: relative;

	background-color: #00FF33;  /* #77EEFF; */
	border-right: 2px solid #FFFFFF;
	height: 30px;  width: 30px;
	margin-top: -30px; margin-left: auto;  margin-right: -30px;
	transform: skew(-14deg);  -o-transform: skew(-14deg);  -ms-transform: skew(-14deg);  -moz-transform: skew(-14deg);  -webkit-transform: skew(-14deg);
}

/* 現在ページの設定 */
.apply_flow .apply_flow_sel {
	background-color: #00dd33;  /* #00ECFF; */
	color: #FFFFFF;
}
.apply_flow .apply_flow_sel::before, .apply_flow .apply_flow_sel::after {
	background-color: #00dd33;  /* #00ECFF; */
}

.apply_flow_div    {
  margin: 0 0 0 20px ;
}
.apply_flow_div   ol > li {
  list-style: decimal outside;
  margin: 10px 0 0 1em;
}


/* ///////////////////////  以降  不要！  ///////////////////////  */



/*==========================================
  cssの検証
============================================*/
p[foo~="bold"] {
	font-weight:bold;
}

p[foo^="test"] {
	color:#ff0000;
	font-size:120%;
}
p[foo$="test"] {
	color:#00ff00;
	font-size:130%;
}
p[foo*="part"] {
	color:#0000ff;
	font-size:140%;
}

/*
[class^="type-zen"] {
	font-weight:bold;
}

[class$="katakana"] {
	font-size: 120%;
	font-weight: bold;
}
[class*="zen"] {
	font-size: 140%;
}
*/