@charset "UTF-8";
/* CSS Document */




/*********************************************
input  select textarea チェックボックス  仕様
*********************************************/
/*-****************************************
チェックボックス ラジオボタン
        <article class="checkbox_field">
          <label>
            <input type="checkbox" name="ck1" value="" checked>
            <span class="checkbox_field_text">肉</span> </label>
          <label>
            <input type="checkbox" name="ck1" value="">
            <span class="checkbox_field_text">魚</span> </label>
          <label>
            <input type="checkbox" name="ck1" value="">
            <span class="checkbox_field_text">野菜</span> </label>
        </article>
****************************************-*/
/*-----------------------------------------
元のinput仕様を消す
-------------------------------------------*/
.checkbox_field label input, .radio_field label input {
  display: none;
}
/*-----------------------------------------
label単位でinputを並列と間隔　文字指定
-------------------------------------------*/
.checkbox_field label, .radio_field label {
  display: inline-block;
  margin-right: 20px;
  font-size: 16px; /*文字天地中央指定不可（flexやline-height）　ボタン枠で調整*/
}
/*チェックした動作
--------------------------------*/
.checkbox_field label input:checked + .checkbox_field_text:after, .radio_field label input:checked + .radio_field_text:after {
  display: block;
}
/*チェックした動作（仕様）
---------------------------------*/
/*文字の仕様*/
.checkbox_field label .checkbox_field_text, .radio_field label .radio_field_text {
  padding-left: 30px;
  position: relative;
  cursor: pointer;
}
/*チェックボックス囲み　仕様
　ラジオボタン外枠　仕様
-------------------------------------------*/
.checkbox_field label .checkbox_field_text:before, .radio_field label .radio_field_text:before {
  content: "";
  position: absolute;
  transition: 0.3s;
  left: 0;
  /*文字上下が中央にならないのでここで調整　flexやline-heightでの調整不可*/
  top: 0px; /*調整　本来0指定*/
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border: 1px solid #93C79B;
  background-color: #fff;
}
/*チェックボックス　レ点　仕様
-------------------------------------------*/
.checkbox_field label .checkbox_field_text:after {
  content: "";
  position: absolute;
  transition: 0.3s;
  display: none;
  width: 20px;
  height: 10px;
  left: 0;
  top: 50%; /*調整　本来50%*/
  margin-top: -8px;
  transform: scale(0.5) rotate(-45deg);
  border-bottom: 4px solid #3E904C; /*少し濃いめ*/
  border-left: 4px solid #3E904C; /*少し濃いめ*/
}
/*ラジオボタン チェックの◯　仕様
-------------------------------------------*/
.radio_field label .radio_field_text:after {
  content: "";
  position: absolute;
  transition: 0.3s;
  display: none;
  background: #3E904C; /*少し濃いめ*/
  width: 20px;
  height: 20px;
  left: 1px;
  top: 50%; /*調整　本来50%*/
  margin-top: -10px;
  transform: scale(0.5);
}
.radio_field label .radio_field_text:before, .radio_field label .radio_field_text:after {
  border-radius: 100px;
}
/*************************************
input 文字入力
type="text" inputをクラス指定

        <article class="old_type_text new_type_text">
          <label>
            <input class="input_w50" type="text" name="text7-1" value="">
            &emsp;年&emsp;&emsp;
            <input class="input_w50" type="text" name="text7-2" value="">
            &emsp;月&emsp;&emsp;
            <input class="input_w50" type="text" name="text7-3" value="">
            &emsp;日 </label>
        </article>
*************************************/
/*元のinput type="text"仕様を消す--------------*/
.old_type_text label input {
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
/*新しいinput type="text"設計*/
.new_type_text {
  width: 100%;
}
.new_type_text label input[type="text"] {
  font-size: 16px;
  padding: 6px;
  margin-right: 3px;
  box-sizing: border-box;
  border: solid 1px #93C79B;
}
/*input type="text"個別幅指定
---------------------------------*/
.new_type_text .input_100per {
  width: 100%;
}
.new_type_text .input_w50 {
  width: 100%;
  max-width: 50px;
}
.new_type_text .input_w100 {
  width: 100%;
  max-width: 100px;
}
.new_type_text .input_w200 {
  width: 100%;
  max-width: 200px;
}
.new_type_text .input_w300 {
  width: 100%;
  max-width: 300px;
}
.new_type_text .input_w400 {
  width: 100%;
  max-width: 400px;
}
.new_type_text .input_w500 {
  width: 100%;
  max-width: 500px;
}
@media (max-width: 749px) {
  .new_type_text .input_w200 {
    width: 100%;
    max-width: 800px;
  }
  .new_type_text .input_w300 {
    width: 100%;
    max-width: 800px;
  }
  .new_type_text .input_w400 {
    width: 100%;
    max-width: 800px;
  }
  .new_type_text .input_w500 {
    width: 100%;
    max-width: 800px;
  }
}
/*************************************
input 電話入力
type="telをlabelで囲む
        <article class="old_type_tel new_type_tel">
          <label class="">
            <input class="" type="tel" name="phone">
          </label>
        </article>
*************************************/
/*元のinput type="tel"仕様を消す--------------*/
.old_type_tel label input {
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
/*新しいinput type="tel"設計*/
.new_type_tel label input[type="tel"] {
  font-size: 16px;
  padding: 6px;
  margin-right: 3px;
  box-sizing: border-box;
  border: solid 1px #93C79B;
}
/*input type="tel"個別幅指定
---------------------------------*/
.new_type_tel .input_w200 {
  width: 100%;
  max-width: 200px;
}
/*************************************
input カンマ付き金額
type="text" inputをクラス指定
カンマ付き金額js必須

        <article class="old_type_kingaku new_type_kingaku">
          <label>
            <input class="input_w160" type="text" name="kingaku1" value="" placeholder="">
            <span class="txt">円</span> <span class="font-s"><span class="red">※</span>半角数字　自動でカンマ区切りが入ります。</span> </label>
        </article>
*************************************/
/*元のinput type="text"仕様を消す--------------*/
.old_type_kingaku label input {
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
/*新しいinput type="text"設計*/
.new_type_kingaku label input[type="text"] {
  /*position: relative;*/
  /* width: 100px;*/ /*用調整*/
  font-size: 16px;
  height: 30px;
  padding: 6px;
  margin-right: 10px; /*文字「半角数字　自動でカンマ区切りが入ります。」で使用*/
  box-sizing: border-box;
  background: #ffffff;
  text-align: right;
  border: solid 1px #93C79B;
}
/*input type="text"個別幅指定
---------------------------------*/
.new_type_kingaku .input_w160 {
  width: 100%;
  max-width: 160px;
}
/*************************************
input かレンダー入力　icon_calendar.svg必須
type="dateをlabelで囲む
*************************************/
/*-----------------------------------------
元のinput仕様を消す
-------------------------------------------*/
/*.calendar_field label input {
  display: none;
}*/
/*-----------------------------------------
新しいカレンダー枠
-------------------------------------------*/
/*<label class="calendar">*/
.calendar_field label.calendar {
  position: relative;
  display: inline-block;
  width: 110px;
  padding: 2px 0;
  height: 26px;
  border: 1px solid #93C79B;
  background: #ffffff;
  border-radius: 1px;
}
/*カレンダーを表示するボタン*/
.calendar_field label.calendar::before {
  position: absolute;
  content: "";
  top: 0px;
  right: -36px;
  width: 30px; /*input高さに合わせる*/
  height: 30px; /*input高さに合わせる*/
  background-color: #06c;
  /**************************
    icon_calendar.svg　必須
  **************************/
  background-image: url("../input_img/icon_calendar.svg");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  cursor: pointer;
}
/*元のカレンダーアイコン大きさ、位置調整し消す*/
.calendar_field input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 30px;
  right: 0;
  height: 100%;
  opacity: 0;
}
/*input設計*/
.calendar_field input[type="date"] {
  position: relative;
  padding: 0 10px;
  width: 142px; /*用調整*/
  height: 26px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  font-size: 16px;
  /*color: #999;*/
}
/*************************************
input 送信　submit
type="submit
位置　センター
      
      <div class="btn_area">
        <article class="old_type_submit new_type_submit">
          <label class="">
            <input class="input_w160 submit_field_text" type="submit" name="form_action" value="この内容で送信する">
         </label>
        </article>
      </div>
*************************************/
/*元のinput type="submit"仕様を消す--------------*/
.old_type_submit label input {
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
/*新しいinput type="submit"設計*/
.btn_area {
  width: 100%;
  margin-top: 30px;
  text-align: center;
}
.new_type_submit label input[type="submit"] {
  padding: 6px;
  margin-right: 3px;
  box-sizing: border-box;
  color: #6CB678;
  border: solid 1px #93C79B;
}
.new_type_submit label input:hover {
  color: #ffffff;
  background-color: #93C79B;
}
/*inputボタン文字使用*/
.new_type_submit label .submit_field_text {
  font-size: 14px;
}
/*input type="submit"個別幅指定
---------------------------------*/
.new_type_submit .input_w160 {
  width: 100%;
  max-width: 160px;
}
/*----------------------*/
/*----------------------*/
/*----------------------*/
/*----------------------*/
/*----------------------*/
/*************************************
select
        <article class="old_select new_select  select_w160">
          <select class="" name="year" required>
            <option value="" hidden>選択して下さい。</option>
            <option value="法人運営事業寄付金">法人運営事業寄付金</option>
            <option value="地域福祉事業寄付金">地域福祉事業寄付金</option>
            <option value="事業別寄付金">事業別寄付金</option>
            <option value="その他">その他</option>
          </select>
        </article>
*************************************/
/*-----------------------------
本来のselect仕様調整
-----------------------------*/
.old_select {
  overflow: hidden;
  /*width: 100%;*/
  margin: 0em 0;
  /*text-align: center;*/
}
.old_select select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none; /*本来のselect枠を消す*/
  outline: none; /*本来のselect枠を消す*/
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
/*本来のselectを消す*/
.old_select select::-ms-expand {
  display: none;
}
/*-----------------------------
新しいselect仕様（com_selectとセットで使用）
-----------------------------*/
/*枠指定 *100%**/
.new_select {
  position: relative;
  border: solid 1px #93C79B;
  border-radius: 0px;
  background: #ffffff;
  padding: 4px;
  box-sizing: border-box;
}
/*枠に対しての選択矢印位置と矢印形状指定*/
.new_select::before {
  position: absolute;
  top: 0.9em;
  right: 0.9em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666;
  pointer-events: none;
}
/*文字padding指定*/
.new_select select {
  padding: 4px 38px 4px 8px;
  /*color: #666666;*/
  /*font-size: 16px;*/
  /*color: #8B8686;*/
}
/*select個別幅指定
---------------------------------*/
.select_w100 {
  width: 100%;
  max-width: 100px;
}
.select_w160 {
  width: 100%;
  max-width: 160px;
}
.select_w200 {
  width: 100%;
  max-width: 200px;
}
.select_w300 {
  width: 100%;
  max-width: 300px;
}
@media (max-width: 749px) {
  .new_select .select_w100 {
    width: 100%;
    max-width: 800px;
  }
	 }
/*-****************************************
textarea 文書入力

****************************************-*/
textarea.textarea_w100 { /* 内容入力枠*/
  width: 100%;
}
textarea.textarea_w300px { /* 内容入力枠*/
  width: 300px;
}
textarea.textarea_w600px { /* 内容入力枠*/
  width: 600px;
}
/*---------------------------------
左）項目　右）設定枠
---------------------------------*/
.line_flex {
  width: 100%;
  display: flex;
  align-items: center; /*中央*/
  font-size: 14px;
  padding: 14px 0;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
  border-top: solid 1px #5ab4bd;
}
/*最後のline_flex
---------------------------------------*/
.last_line_flex {
  border-bottom: solid 1px #5ab4bd;
}
@media (max-width: 749px) {
  .line_flex {
    flex-direction: column;
    align-items: flex-start;

  } }
/*最後の下に線を入れる*/
/*左）項目名
---------------------------------------*/
.line_flex .item01 {
  width: 100%;
  max-width: 300px;
  border: solid 0px;
}
/*右）設定欄*/
.line_flex .item02 {
  flex: 1;
}
@media (max-width: 749px) {
  /*左）項目名
---------------------------------------*/
  .line_flex .item01 {
    width: 100%;
    font-weight: bold;
    max-width: 800px;
    border: solid 0px;
  }
  /*右）設定欄*/
  .line_flex .item02 {
    width: 100%;
    max-width: 800px;
  }
}

/*和暦　西暦の横並び
---------------------------------------*/
.line_flex .item02 .nen_flex{
	display: flex;
	align-items: center;
	margin-top: 5px;
	padding: 5px 0;
	box-sizing: border-box;
	border-top: solid 1px #5AB4BD; 
}
@media (max-width: 749px) {
	/*.line_flex .item02 .nen_flex{
		flex-direction: column; 
			align-items: flex-start;
			border-top: solid 0px #5AB4BD; 
	}*/
}
/*和暦選択の幅*/
.line_flex .item02 .nen_flex .item01{
	width: 100px;
	margin-right: 30px;

}
/*和暦　元号選択の幅*/
.line_flex .item02 .nen_flex .item02{
	width: 100px;/*幅はselectで指定*/
	margin-right: 30px;
}
/*年の幅*/
.line_flex .item02 .nen_flex .item03{
	width: 140px;
	margin-right: 50px;

}
@media (max-width: 749px) {
.line_flex .item02 .nen_flex .item01,
	.line_flex .item02 .nen_flex .item02,
	.line_flex .item02 .nen_flex .item03{
margin-bottom: 5px;
	}
}

/* ディバイスサイズ設定
============================================= */
@media (max-width: 749px) {

}
/* タブレット用 */
@media (min-width: 750px) and (max-width: 1023px) {}
/* Desktop View------------------------------- */
@media (min-width: 1024px) {}