@charset "utf-8";
/* ==========================================================================
   見出し
   ========================================================================== */
/* 大見出し
========================= */
.headLine-large{
	border-top: 4px solid #f58821;
	border-bottom: 1px solid #ddd;
	margin:40px 0 10px;
	padding: 12px 10px;
	font-size: 2rem;
	clear: both;
}
/*コンテンツの一番上に見出しが来たときは上マージンを０に*/
article > section:first-child > .headLine-large:first-child,/*一番最初のセクションの中の「headLine-large」*/
article > .headLine-large:first-child,/*「article」の中の一番最初の「headLine-large」*/
.main-clm > .headLine-large:first-child/*「main-clm」の中の一番最初の「headLine-large」*/{
	margin-top: 0;
}


/* 中見出し
========================= */
.headLine-medium{
	border-left: 4px solid #f58821;
	background-color: #f1f1f1;
	margin:20px 0 10px;
	padding: 10px;
	font-size: 1.8rem;
	clear: both;
}

/* 小見出し
========================= */
.headLine-small{
  border-left: 4px solid #f58821;
  color: #f58821;
  margin:15px 0 10px;
  padding:0 10px;
  font-size: 1.5rem;
}

/* フッターコンテンツ見出し
========================= */
.footerTitle{
	margin:40px 0 0;
	padding: 10px 20px;
	font-size: 2rem;
	background-color: #f58821;
	color: #fff;
}

/* 隙間を埋めたい時に使う
========================= */
.hl-mt0{
  margin-top: 0;
}
.hl-mb0{
  margin-bottom: 0;
}

/* ==========================================================================
   list
   ========================================================================== */
.list-number{
  padding-left: 1.5em;
  margin-bottom: 1em;
}
.list-number li{
  list-style: decimal;
}
/* リストアイコン　黄色
========================= */
.list-icon{
  margin-bottom: 1em;
}
.list-icon li{
	position: relative;
	padding: 3px 5px 3px 15px;
	font-weight: bold;
}
.list-icon li::before,
.list-icon li::after{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	background-color: #f6ac16;
	z-index: 2;
}
.list-icon li::after{
	left: 2px;
	margin-top: -4px;
	background-color: #f58821;
	z-index: 1;
}

/*メリット*/
.list-icon.merit li::before,
.list-icon.merit li::after{
	background-color: #2bb959;
}

.list-icon.merit li::after{
	background-color: #10932e;
}

/*広告出稿をお考えの企業様*/
.list-icon.company li::before,
.list-icon.company li::after{
	background-color: #7ebeff;
}

.list-icon.company li::after{
	background-color: #5badff;
}

/* list-asterisk
========================= */
.list-asterisk-item,
.list-asterisk li{
  display: block;
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom: 5px;
}
.list-asterisk-item::before,
.list-asterisk li::before{
  content: "※";
}
.list-asterisk-attention{
  color: #e0450f;
}

/* list-asterisk
========================= */
.list-boxNumber{
  margin-bottom: 1em;
}
.list-boxNumber li{
  position: relative;
  counter-increment: boxNumber;
  list-style: none;
  text-indent: -30px;
  padding: 0 0 20px 30px;
}

.list-boxNumber li:before{
  content: "" counter(boxNumber ,decimal);
  position: relative;
  display: inline-block;
  margin: 0 10px 0 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  text-indent: 0;
  color: #fff;
  background-color: #ccc;
  z-index: 2;
}
/*  */
.list-boxNumber.list-boxNumber-pink li:before{
  background-color: #ff5c5c;
}
.list-boxNumber li::after {
    border-left: 2px solid #d3d3d3;
    content: "";
    height: 100%;
    left: 9px;
    position: absolute;
    top: 10px;
    z-index: 1;
}
.list-boxNumber li:last-child::after {
    display: none;
}
.list-boxNumber li > *{
  text-indent: 0;
}
/* ==========================================================================
   ボタン
   ========================================================================== */
/* （１）基本ボタン
========================= */
.button{
  display: inline-block;
  padding: 4px 20px;
  font-size: 1.4rem;
  color: #fff;
  text-decoration: none;
  background-color: #f58821;
  border-radius: 5px;
  /*アニメーション用表記*/
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
.button:hover,
.button:focus{
	cursor: pointer;
	background-color: #fb9d36;
}
/* ボタン大きさ + 【（１）基本ボタン】と併わせて使用
========================= */
.button-small{
  padding: 8px 0;
  width: 30%;
}
.button-medium{
  padding:12px 0;
  width: 60%;
}

.button-large{
  padding:20px 0;
  width: 100%;
  text-align: center;
}
/* ブロック型(シャドウがついた立体角丸)ボタン + 【（１）基本ボタン】と併わせて使用
========================= */
.button-block{
  box-shadow: 0 -3px 0 rgba(0,0,0,0.2) inset;
  text-align: center;
	position: relative;
}
.button-block:hover,
.button-block:focus{
  box-shadow: 0 -3px 0 rgba(0,0,0,0.1) inset;
}
.button-block::after{
	font-family: "fontello";/*Webフォントフォントファミリー指定*/
	content: "\e805";/*Webフォント指定*/
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
	width: 15px;
	height: 23px;
	/*アニメーション用表記*/
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
.button-block:hover::after,
.button-block:focus::after{
	right: 7px;
}

.button-block.button-small{
	width: auto;
  padding: 8px 30px 11px;
  font-size: 1.4rem;
}

.button-block.button-medium{
  padding: 12px 0 15px;
  font-size: 1.6rem;
}

.button-block.button-large{
  padding: 20px 0 23px;
  font-size: 1.8rem;
}

/* ボタン矢印削除 + 【（１）基本ボタン】と併わせて使用
========================= */
.button-arrowNo::after{
  display: none;
}

/* アフィリエイター・広告主 + 【（１）基本ボタン】と併わせて使用
========================= */
/*アフィリエイター　赤*/
.button-affiliate{
  background-color: #e0450f;
}
.button-affiliate:hover,
.button-affiliate:focus{
	background-color: #f35822;
}
/*広告主　青*/
.button-advertiser{
  background-color: #0858aa;
}
.button-advertiser:hover,
.button-advertiser:focus{
	background-color: #1d6dbf;
}

/* 提携ボタン + 【（１）基本ボタン】と併わせて使用
========================= */
/*提携　緑*/
.button-alliance{
  background-color: #2dbe60;
}
.button-alliance:hover,
.button-alliance:focus{
	background-color: #45d678;
}
/*公式サイト　水色*/
.button-official{
  background-color: #0972c2;
}
.button-official:hover,
.button-official:focus{
	background-color: #248ddd;
}



/* 光るボタン + 【（１）基本ボタン】と併わせて使用
ホバーすると光が走るようになる
========================= */
@keyframes sheen {
  0% {
    transform: skewY(-45deg) translateX(0);
  }
  100% {
    transform: skewY(-45deg) translateX(12.5em);
  }
}

.button-light {
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}
.button-light::before {
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  height: 100%;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: -4.5em;
  transform: skewX(-45deg) translateX(0);
  transition: none;
}
.button-light:hover::before,
.button-light:focus::before{
  transform: skewX(-45deg) translateX(1000px);
  transition: all 0.5s ease-in-out;
}


/* ビットフライヤーボタン + 【（１）基本ボタン】と併わせて
========================= */
.button-bitFlyer{
  background: #fff linear-gradient(45deg, #4385be 0%, #29a4e2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4385be', endColorstr='#29a4e2', GradientType=0); /* IE7,8,9 */
}

.button-bitFlyer:hover,
.button-bitFlyer:focus{
  opacity: 0.7;
}

/* .moneyボタン + 【（１）基本ボタン】と併わせて
========================= */
.button-dotmoney{
  background: #fff linear-gradient(45deg, #00bd9e 0%, #14d1b2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#14d1b2', endColorstr='#00bd9e', GradientType=0); /* IE7,8,9 */
}

.button-dotmoney:hover,
.button-dotmoney:focus{
  opacity: 0.7;
}

/* pexボタン + 【（１）基本ボタン】と併わせて
========================= */
.button-pex{
  background: #fff linear-gradient(45deg, #64b343 0%, #b7bf00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7bf00', endColorstr='#64b343', GradientType=0); /* IE7,8,9 */
}

.button-pex:hover,
.button-pex:focus{
  opacity: 0.7;
}

/* ワンカラムボタン
========================= */
.signUp-button{
  background: url(../imgFD/top_button_bk.jpg) #f58821;
  padding: 30px 0;
  text-align: center;
}

.signUp-button .button{
  color: #3e3e3e;
  background-color: #fff;
  box-shadow: 0 -5px 0 #f17016 inset;
  font-size: 1.8rem;
}
.signUp-button .button-block::after{
  margin-top: -15px;
  color: #f58821;
}
.signUp-button .button:hover,
.signUp-button .button:focus{
  opacity: 0.7;
}
.signUp-button .button span{
  display: inline-block;
  margin: -20px 10px -20px 0;
  width: 76px;
  height: 76px;
  line-height: 76px;
  font-size: 2.2rem;
  color: #fff;
  text-shadow:1px 1px 1px #28793c;
  background-color: #2dbe60;
  border-radius: 100%;
}
.signUp-textLink{
  display: block;
  padding-top: 10px;
}
.signUp-textLink:hover,
.signUp-textLink:focus{
  opacity: 0.7;
}


/* ボタンを中央寄せや右寄せにしたい時ボタンを囲うクラス
========================= */
.buttonBox{
	text-align: center;
}
.buttonBox-right{
	text-align: right;
}


/* 登録申請・メッセージ・フォーム・検索ボタン
========================= */
/*同意するボタン*/
.policyAgree{
  text-align: center;
  padding: 0 0 20px;
}
/*登録申請・メッセージ・フォーム・検索ボタン　*/
.inputButton,
.kiyakuButton,
.messageButton,
.formButton,
.selecterButton{
  display: inline-block;
  padding:5px 2em 9px;
  font-size: 2.1rem;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background-color: #2dbe60;
  border-radius: 5px;
  box-shadow: 0 -4px 0 rgba(0,0,0,0.2) inset;
  /*アニメーション用表記*/
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
/*登録申請・メッセージ・フォーム・検索ボタン hover*/
.inputButton:hover,
.inputButton:focus,
.kiyakuButton:hover,
.kiyakuButton:focus,
.messageButton:hover,
.messageButton:focus,
.formButton:hover,
.selecterButton:hover,
.selecterButton:focus{
  cursor: pointer;
  background-color: #45d678;
}
/* 削除ボタン　戻るボタン Noボタン グレーボタン*/
.inputButton-gray,
.formButton-delete,
.formButton-back,
.kiyakuButton-back,
.messageButton-no,
.formButton-gray{
  color: #666;
  background: #ddd;
}
.inputButton-gray:hover,
.inputButton-gray:focus,
.formButton-delete:hover,
.formButton-delete:focus,
.formButton-back:hover,
.formButton-back:focus,
.kiyakuButton-back:hover,
.kiyakuButton-back:focus,
.messageButton-no:hover,
.messageButton-no:focus,
.formButton-gray:hover,
.formButton-gray:focus{
  cursor: pointer;
  background-color: #eee;
}
/*白い戻るボタン*/
.formButton-back-white{
  color: #3e3e3e;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
}
.formButton-back-white:hover,
.formButton-back-white:focus{
  background-color: #fff5e1;
  border-color: #fff5e1;
}
/* 利用規約登録ボタン 囲い*/
.formButtonWrapper,
.kiyakuButtonWrapper,
.messageButtonWrapper,
.selecterButtonWrapper{
  text-align: center;
}
.kiyakuButtonWrapper-bottom,
.messageButtonWrapper-bottom{
  margin-bottom: 20px;
}

.formButton{
  font-size: 1.6rem;
}

/* formButton 大きさ
========================= */
.inputButton-large,
.formButton-large{
  font-size: 2.2rem;
  width: 100%;
}
.inputButton-medium,
.formButton-medium{
  font-size: 1.6rem;
  padding:6px 2em 10px;
}
.inputButton-small,
.formButton-small{
  font-size: 1.3rem;
  padding:4px 1em 8px;
}

/* CSVボタン
========================= */
input.csv{
  display: inline-block;
  width: 220px;
  padding:6px 0 10px;
  font-size: 1.4rem;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background-color: #f58821;
  border-radius: 5px;
  box-shadow: 0 -4px 0 rgba(0,0,0,0.2) inset;
  /*アニメーション用表記*/
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
input.csv:hover{
  cursor: pointer;
  opacity: 0.7;
}


/* 削除・修正ボタン
========================= */
/* 削除ボタン */
.button-delete{
  color: #3e3e3e;
  background-color: #ddd;
  box-shadow: 0 -3px 0 rgba(0,0,0,0.2) inset;
}
.button-delete:hover,
.button-delete:focus{
  background-color: #eee;
}
/* 修正ボタン */
.button-mente{
  background-color: #0858aa;
  box-shadow: 0 -3px 0 rgba(0,0,0,0.2) inset;
}
.formButton.button-mente{
  box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.2) inset;
}
.button-mente:hover,
.button-mente:focus{
  background-color: #1d6dbf;
}

/* 取得 */
.button-get{
  background-color: #2dbe60;
  box-shadow: 0 -3px 0 rgba(0,0,0,0.2) inset;
}
.button-get:hover,
.button-get:focus{
  background-color: #45d678;
}

/* 外部リンクボタン・ダウンロードボタン
========================= */
.button-externalLink,
.downloadButton{
  margin: 0 0 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 4px 16px;
  text-decoration: none;
}
.button-externalLink:hover,
.downloadButton:hover{
  background-color: #fff5e1;
}
.button-externalLink::after{
  font-family: "fontello";/*Webフォントフォントファミリー指定*/
  content: "\f08e";/*Webフォント指定*/
  display: inline-block;
  padding: 0 0 0 4px;
  text-decoration: none;
}
.downloadButton::after{
  font-family: "fontello";/*Webフォントフォントファミリー指定*/
  content: "\e824";/*Webフォント指定*/
  display: inline-block;
  padding: 0 0 0 4px;
  text-decoration: none;
}



/* ==========================================================================
   テキストリンク
============================================================================= */
.textLink{
	display: inline-block;
	color: #0b3190;
	text-decoration: none;
}
.textLink::before{
	font-family: "fontello";/*Webフォントフォントファミリー指定*/
	content: "\e804";/*Webフォント指定*/
	margin-right: 0.2em;
	color: #0b3190;
}
.textLink:hover,
.textLink:focus{
	color: #6288e7;
}
.textLink:hover::before,
.textLink:focus::before{
	color: #6288e7;
}




/* ==========================================================================
   セレクト・フォームなどなど
============================================================================= */


/* form text
========================= */
.formTextBox p,
p.formTextBox{
  margin-bottom: 10px;
}

/* セレクト
========================= */
select{
    outline:none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    padding: 4px 6px;
    border:1px solid #ddd;
    color:#3e3e3e;
    background-color: #fff;
    border-radius:3px;
}
/* chrome限定表記 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select{
    padding: 8px 6px;/*chromeでの余白調整*/
  }
}
/* IE9用 */
select{
  padding: 10px 6px\9;
}
/* ｉｅ１０限定表記 */
@media all and (-ms-high-contrast: none) {/*ie10以上*/
    select:not(:target) {
        padding: 10px 6px;/*余白調整*/
    }
}

/* オプション
========================= */
select option{
  color:#3e3e3e;
  /*color:#9a8c82;*/
  padding: 4px 6px;
  min-height: 27px;/*option内に文字データがない場合高さを持たせる*/
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #828c9a;
}
/* セレクト要素を100%
========================= */
.selectFull select{
  width: 100%;
}



/* ==========================================================================
   テーブル
   ========================================================================== */
/* 余白あり　運営会社ページなどで利用
========================= */
.tableMargin{
	width: 100%;
	border-top: 1px solid #dddddd;
	margin-bottom: 20px;
}
.tableMargin tr{
	border-bottom: 1px solid #dddddd;
}
.tableMargin th,
.tableMargin td{
	box-shadow: 0 1px 0 #fff inset;
	padding: 20px;
}
.tableMargin th{
	background-color: #fafafa;
	text-align: left;
}
.th-20 th{ width: 20% !important;}
.th-30 th{ width: 30% !important;}

/* ボーダー有 */
.tableMargin-border th,
.tableMargin-border td{
  border: 1px solid #ddd;
}

/* フォームテーブル
========================= */
.tableForm{
  width: 100%;
  border: 1px solid #dddddd;
  margin-bottom: 20px;
}
.tableForm tr{
  border-bottom: 1px solid #dddddd;
}
.tableForm th,
.tableForm td{
  padding: 8px;
  box-shadow: 0 1px 0 #fff inset;
}
.tableForm th{
  background-color: #fafafa;
  border-right: 1px solid #dddddd;
  text-align: left;
  width: 30%;
}
/* テーブルフォームの中のテーブル 銀行振込口座*/
.tableForm table{
  width: 100%;
  margin: -4px 0 0;
}

.tableForm table th,
.tableFormIn-th{
  width: 164px;
  border-right: none;
  background-color: #fff;
}
/*テーブルフォーム内　テーブル*/
.tableForm table th,
.tableForm table td,
.tableFormIn-th,
.tableFormIn-td{
  padding: 4px 0 0;
}

.tableForm table tr{
  border-bottom: none;
}
/*インプットの横幅*/
.tableForm table input{
  width: 340px;
}

/*住所登録ボタンの色味*/
.tableForm .formButton-back-white:hover{
  color: #777;
  background-color: #fcfcfc;
}

/*ポイント変換サイト口座番号擬似テーブル*/
.tableForm td.tableFormIn{
  padding: 4px 8px 8px;
  letter-spacing: -.4em;
}
.tableFormIn-th,
.tableFormIn-td{
  display: inline-block;
  letter-spacing: normal;
}
.tableFormIn-td{
  width: calc(100% - 164px);
}

/* パスワードを忘れた方 table
========================= */
.passForm-table{
  width: 100%;
  border: 1px solid #dddddd;
  margin-bottom: 20px;
}
.passForm-table tr{
  border-bottom: 1px solid #dddddd;
}
.passForm-table th,
.passForm-table td{
  padding: 8px;
  box-shadow: 0 1px 0 #fff inset;
}
.passForm-table th{
  background-color: #fafafa;
  border-right: 1px solid #dddddd;
  text-align: left;
  width: 20%;
}
.passForm-textLink{
	display: inline-block;
	font-size: 1.3rem;
	color: #434343;
	text-decoration: none;
}
.passForm-textLink::before{
	font-family: "fontello";/*Webフォントフォントファミリー指定*/
	content: "\e804";/*Webフォント指定*/
	margin-right: 0.2em;
	color: #434343;
}
.passForm-textLink:hover,
.passForm-textLink:focus{
	color: #6288e7;
}
.passForm-textLink:hover::before,
.passForm-textLink:focus::before{
	color: #6288e7;
}

/* ログインIDの取得
========================================*/
.loginIdGetForm-table{
  width: 100%;
  border: 1px solid #dddddd;
  margin-bottom: 20px;
}
.loginIdGetForm-table tr{
  border-bottom: 1px solid #dddddd;
}
.loginIdGetForm-table th,
.loginIdGetForm-table td{
  padding: 8px;
  box-shadow: 0 1px 0 #fff inset;
}
.loginIdGetForm-table th{
    table-layout: fixed;
    padding: 14px 13px;
    background-color: #fafafa;
    border-right: 1px solid #dddddd;
    width: 20%;
    text-align:left;
}
.loginIdGet-thanks-text {
	width:100%;
    border: 1px solid #ddd;
    text-align: left;
    padding: 81px;
    margin: 0px 0px 20px;
}
.loginIdGet-error-text {
    border: 1px solid #ddd;
    text-align: left;
    padding: 50px 120px;
    margin: 0px 0px 20px;
}
.loginIdGet-title{
	border-bottom: none;
    margin: 20px 0 10px;
    background-color: #fff;
}
.loginIdGet-title-in{
	display: inline-block;
    border-left: 4px solid #f58821;
    padding: 5px 10px;
}
.loginIdGet-show{
	white-space:pre;
}

/* 問い合わせフォーム
=================================*/
.toiawaseForm-table{
  width:100%;
  border: 1px solid #dddddd;
  margin-bottom: 20px;
  table-layout: fixed;
  text-align: left;
}
.toiawaseForm-table th{
  table-layout: fixed;
  padding: 14px 13px;
  background-color: #fafafa;
  border-right: 1px solid #dddddd;
  width: 28%;
}
.toiawaseForm-table td{
  vertical-align: middle;
  padding: 8px;
  table-layout: fixed;
}
.toiawaseForm-table tr{
  border-bottom: 1px solid #dddddd;
}
.toiawaseForm-table select{
  width:100%;
}
.toiawaseForm-table input{
  width:100%;
}
.toiawaseForm-textarea{
  width:100%;
  height:300px;
  padding:5px;
  background: #FFF;
  border:1px solid #ddd;
  border-radius: 5px;
  resize: none;
  letter-spacing:1px;
  line-height:20px;
  font-family:"メイリオ",Meiryo,verdana,Hiragino Sans,Hiragino Sans,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,Osaka,"ＭＳ Ｐゴシック",MS PGothic,sans-serif;
  vertical-align: middle;
}
.toiawaseForm-table-td-naiyou{
    word-break: break-all;
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    white-space: -hp-pre-wrap;
    word-wrap: break-word;
}
.toiawaseForm-title-in{
    display: inline-block;
    border-left: 4px solid #f58821;
    padding: 5px 10px;
    margin-bottom:10px;
}
.toiawaseForm-messages{
    color: #e0450f;
    display: block;
    padding:10px;
}
.toiawaseForm-thanks-text{
    border: 1px solid #ddd;
    text-align: center;
    padding: 80px 0px;
    margin: 0px 0px 20px;
}
/* 貴サイトのＵＲＬ table
========================= */
.tableUrl th,
.tableUrl td{
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd;
}
/* サイト名幅 */
.tableUrl td.tableUrl-siteName{
  width: 35%;
  text-align: left;
  word-break: break-all;/*英字を自動改行*/
}

/* siteURL幅 */
.tableUrl td.tableUrl-url{
  width: 40%;
  text-align: left;
  word-break: break-all;/*英字を自動改行*/
}
/* 確認用ボタン */
.tableUrl-ConfirmURL{
  min-width: 100px;
}

/* テキスト　枠
========================= */
/* デフォルト　枠 */
.normalComent{
  background-color: #fafafa;
  padding: 20px;
  margin: 20px 0;
}
/* 注釈　枠 */
.attentionComent{
  background-color: #fff1f1;
  padding: 20px;
  margin: 20px 0;
}



/* フォームテーブル　重要　任意
========================= */
.formImportant-title{
  position: relative;
  padding: 0 50px 0 0;
}

.formImportant-text{
  padding-top: 1em;
}

.formImportant-required,
.formImportant-any{
  position: absolute;
  right: 0;
  top: -2px;
}

/* 重要・任意 アイコン */
.formImportant-required{
  margin: 0 0 0 10px;
  padding: 4px 10px;
  font-size: 1.2rem;
  color: #fff;
  border-radius: 5px;
  background-color: #f58821;
}
.formImportant-any{
  margin: 0 0 0 10px;
  padding: 4px 10px;
  font-size: 1.2rem;
  color: #666;
  border-radius: 5px;
  background-color: #ccc;
}


/* フォームテーブル　重要　入力エリア
========================= */
.formImportant-area{
  background-color: #fff2e4;
}

/* 名前・見出し
========================= */
/* フォーム見出し 姓名*/
.formName-title{
  display: inline-block;
  width: 2em;
  text-align: center;
}
.formName-input{
  display: inline-block;
  margin: 0 1em 0 0;
}



/* 住所リスト
========================= */
.formResidenceList li{
  margin-bottom: 10px;
}

.formResidenceList-title{
  width: 160px;
  display: inline-block;
}

/* 電話番号・郵便番号余白
========================= */
.formTel-number,
.formResidenceList-number{
  display: inline-block;
}
.formTel-number input,
.formResidenceList-number input{
  margin: 0 0.5em;
  vertical-align: middle;
}
/*最初のinputはマージン０*/
.formTel-number input:first-child,
.formResidenceList-number input:first-child{margin-left: 0;}


/* ==========================================================================
   img　簡単な画像のフロートに
   ========================================================================== */
/*画像の右にコンテンツが回りこみ*/
.img-fl{
  float: left;
}
/*画像の左側にコンテンツが回りこみ*/
.img-fr{
  float: right;
}
/*画像の右にコンテンツが回りこみ：適度な余白がつく*/
.img-flm{
  float: left;
  margin: 0 20px 20px 0;
}
/*画像の左側にコンテンツが回りこみ：適度な余白がつく*/
.img-frm{
  float: right;
  margin: 0 0 20px 20px;
}
/*画像センター寄せ*/
.img-center{
  display:block;
  margin: 0 auto 20px;
}

/* ==========================================================================
   fontsize 文字　テキスト
   ========================================================================== */
/*フォントサイズ*/
.fs80{
  font-size: 80%;
}
.fs120{
  font-size: 120%;
}
.fs140{
  font-size: 140%;
}
.fs160{
  font-size: 160%;
}
/*文字のテキスト寄せ*/
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
/* 太字用 */
.text-bold{
font-weight: bold;
}
/*赤文字*/
.text-red{
  color: #e0450f;
}
/*テキストをブロック化*/
.textBlock{
  display: inline-block;
}





/* ==========================================================================
   grid
   ========================================================================== */
/* グリッド　親
========================= */
.l-grid{
  width: 100%;
  margin:0 auto -20px;
}

/*　利用例）
<div class="l-grid clearfix">
  <div class="l-grid-item2">コンテンツ１</div>
  <div class="l-grid-item2">コンテンツ２</div>
</div>
*/

/* 画像をグリッド内コンテンツの幅に合わせる
========================= */
.l-grid img{
  max-width: 100%;
}
/* 2カラム
========================= */
.l-grid-item2{
  float: left;
  width: calc((100% - 20px) / 2);/*100%から20pxを引いて2で割った数字*/
  margin:0 20px 20px 0;
}
.l-grid-item2:nth-child(2n) {
  margin-right: 0;/*マージン打ち消し*/
}
/* 3カラム
========================= */
.l-grid-item3{
  float: left;
  width: calc((100% - 20px * 2) / 3);/*100%から20pxかける２（40px）を引いて3で割った数字*/
  margin:0 20px 20px 0;
}
.l-grid-item3:nth-child(3n) {
  margin-right: 0;/*マージン打ち消し*/
}
/* 4カラム
========================= */
.l-grid-item4{
  float: left;
  width: calc((100% - 20px * 3) / 4);/*100%から20pxかける２（40px）を引いて3で割った数字*/
  margin:0 20px 20px 0;
}
.l-grid-item4:nth-child(4n) {
  margin-right: 0;/*マージン打ち消し*/
}

/* ==========================================================================
   ラジオボタン　チェックボタン
============================================================================= */
/* ラベルの指定 */
label{
  display: inline-block;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  margin:0 1em 0 0;
  padding: 3px 3px 3px 30px;
  color: #3e3e3e;
}
/* 既存のラジオボタン、チェックボタンを隠すため位置をずらす */
label input[type="radio"],
label input[type="checkbox"]{
  position: absolute;
  left: 5px;
  top: 5px;

}
/*before用のspan*/
label span{
  display: block;
  vertical-align: middle;
}

/*ラジオボタン・チェックボックス用共通スタイル
before:枠
after　：チェック、ラジオボタン*/
label span::before,
label span::after {
  position: absolute;
  content: '';
  left: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
}
/* 四角、三角ボックス */
label span::before {
  top: 2px;
  width: 20px;
  height: 20px;
  background: #f4f4f4;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
}
/*チェックが付いていない時はチェック要素削除*/
label span::after {
  opacity: 0;
}

/* ラジオボタンの時 枠*/
label input[type="radio"]+span::before{
  border-radius: 99px;
}
/* ラジオボタンの時 ラジオボタン*/
label input[type="radio"]+span::after{
  left: 6px;
  top: 8px;
  width: 10px;
  height: 10px;
  background: #f58821;
  border-radius: 99px;
}

/* チェックボックスの時 */
label input[type="checkbox"]+span::after{
  top: 6px;
  left: 6px;
  width: 8px;
  height: 6px;
  border-left: 3px solid #f58821;
  border-bottom: 3px solid #f58821;
  -webkit-transform: rotate(-45deg) scale(.5);
  transform: rotate(-45deg) scale(.5);
}

/* ホバー時 テキストカラー*/
label:hover span,
label:hover input[type="radio"]:checked + span,
label:hover input[type="checkbox"]:checked + span{
  color: #f58821;
}
/* ホバー時　枠 */
label:hover span::before,
label:hover input[type="radio"]:checked + span::before,
label:hover input[type="checkbox"]:checked + span::before{
  background: #fff5e1;
  border-color: #f58821;
}

/* ラジオボタンがチェックされたときの仕様 */
label input[type="radio"]:checked + span,
label input[type="checkbox"]:checked + span{
  color: #555;
  font-weight: bold;
}
label input[type="radio"]:checked + span::before,
label input[type="checkbox"]:checked + span::before {
  background: #fff;
  border-color: #ddd;
}
label input[type="radio"]:checked + span::after{
  opacity: 1;
}
label input[type="checkbox"]:checked + span::after{
  opacity: 1;
  -webkit-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
}