@charset "UTF-8";



/*-----------------------*----*----*----*----*----*----*----*----* STEP */

.form .form-intro {
  position: relative;
  margin: 3em auto 1.5em;
  width: 94%;
  max-width: 980px;
  display: block;
  overflow: hidden;
}

ul#STEP {
  width: 100%;
  margin: 2em 0 0 0;
  float: left;
  clear: both;
  font-size:0;
  overflow: hidden;
  letter-spacing: -.4em;
}

ul#STEP li,
ul#STEP li:before ,
ul#STEP li:after {
  background-color: #eee;
}

ul#STEP li {
  display: block;
  width:20%;
  line-height:55px;
  float: left;
  text-align: center;
  text-decoration: none;
  letter-spacing: normal;
  color:#999;
}

ul#STEP li span {
  padding: 0 0 0 20px;
  font-size:1.4rem;
}

ul#STEP li:first-child span {
  padding: 0 0 0 0;
}

ul#STEP li span br {
  display: none;
}

ul#STEP li:before ,
ul#STEP li:after {
  content: " ";
  display: block;
  width: 20px;
  height: 30px;
  margin-right: -8px;
  margin-left: auto;
  box-shadow: 2px 0 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 0 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 2px 0 0px rgba(0,0,0,0.2);
}

ul#STEP li:before {
  float: right;
  margin-bottom: -30px;
  transform: skew(30deg);
  -o-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -webkit-transform: skew(30deg);
}

ul#STEP li:after {
  position: relative;
  margin-top: -30px;
  transform: skew(-30deg);
  -o-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
}

ul#STEP.step01 li.s01 ,
ul#STEP.step02 li.s02 ,
ul#STEP.step03 li.s03 ,
ul#STEP.step04 li.s04 ,
ul#STEP.step05 li.s05 {
  background-color:#3DB9E8;
  color: #FFFFFF;
}

ul#STEP.step01 li.s01::before,
ul#STEP.step01 li.s01::after {
  background-color:#3DB9E8;
}

ul#STEP.step01 li.s01::before,
ul#STEP.step01 li.s01::after ,
ul#STEP.step02 li.s02::before,
ul#STEP.step02 li.s02::after ,
ul#STEP.step03 li.s03::before,
ul#STEP.step03 li.s03::after ,
ul#STEP.step04 li.s04::before,
ul#STEP.step04 li.s04::after ,
ul#STEP.step05 li.s05::before,
ul#STEP.step05 li.s05::after {
  background-color:#3DB9E8;
}

ul#STEP.step01 li.s01 span ,
ul#STEP.step02 li.s02 span ,
ul#STEP.step03 li.s03 span ,
ul#STEP.step04 li.s04 span ,
ul#STEP.step05 li.s05 span {
  font-weight: bold;
}





@media screen and (max-width:782px){
  ul#STEP li {
    line-height:0;
    height: 50px;
  }

  ul#STEP li span {
    display: block;
    margin: 6px 0 0 0;
    padding:0 0 0 5px;
    font-size:1.0rem;
    line-height: 1.2;
  }

  ul#STEP li:last-child span {
    margin: 12px 0 0 0;
  }

  ul#STEP li span br {
    display:inline;
  }

  ul#STEP li:before ,
  ul#STEP li:after {
    width: 4px;
    height: 25px;
    margin-right:-3px;
    box-shadow: 2px 0 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 0 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 2px 0 0px rgba(0,0,0,0.2);
  }

  ul#STEP li:before {
    margin-bottom:0px;
    transform: skew(6deg);
    -o-transform: skew(6deg);
    -ms-transform: skew(6deg);
    -moz-transform: skew(6deg);
    -webkit-transform: skew(6deg);
  }

  ul#STEP li:after {
    margin-top: -17px;
    transform: skew(-6deg);
    -o-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    -moz-transform: skew(-6deg);
    -webkit-transform: skew(-6deg);
  }
}








section#DONATION div.check table {
  width: 100%;
  margin: 0 0 1em 0;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #3DB9E8;
  font-size: 1.6rem;
  line-height: 1.4;
}

section#DONATION div.check table th ,
section#DONATION div.check table td {
  vertical-align: middle;
  border: 1px solid #3DB9E8;
}


section#DONATION div.check table th {
  padding: 1em;
  font-weight: bold;
  background: #e6f8ff;
  text-align: center;
  white-space: nowrap;
}

section#DONATION div.check table td {
  padding: 1em;
  text-align: center;
}


section#DONATION div.check table tr:nth-child(3) th ,
section#DONATION div.check table tr:nth-child(4) th { text-align: right;}




@media screen and (max-width:480px){

section#DONATION div.check table tr th { display: none; border: none;}
section#DONATION div.check table tr th:first-child { display: block;}

section#DONATION div.check table tr:nth-child(3) th ,
section#DONATION div.check table tr:nth-child(4) th { display: none;}

section#DONATION div.check table tr td {
  position: relative;
  display: block;
  border-width: 1px 0 0 0;
  border-top: 1px dotted #3DB9E8;
  text-align: right;
}

section#DONATION div.check table tr td:nth-child(2):before,
section#DONATION div.check table tr td:nth-child(3):before,
section#DONATION div.check table tr td:nth-child(4):before,
section#DONATION div.check table tr td:nth-child(5):before{
  position: absolute;
  left: 0;
  width: 50%;  
  font-size: 1.4rem;
  text-align: right;
}


section#DONATION div.check table tr td:nth-child(2):before{ content: "内容：";}
section#DONATION div.check table tr td:nth-child(3):before{ content: "金額：";}
section#DONATION div.check table tr td:nth-child(4):before{ content: "数：";}
section#DONATION div.check table tr td:nth-child(5):before{ content: "小計（税抜）：";}

section#DONATION div.check table tr:nth-child(3) td:before { content: "合計：";}
section#DONATION div.check table tr:nth-child(4) td:before { content: "寄付金額（税抜）：";}

section#DONATION div.check table tr:nth-child(4) td { font-weight: bold; background: #e6f8ff;}

section#DONATION div.check table tr:nth-child(4):last-child td { font-weight: bold; background: #e6f8ff;}

}/* End 480 */



.form-inner-dl{
  margin: 0 0 0 0;
  padding: 0 0.5em 0;
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 1.6;
}

.form-inner-dl dt{
  float: left;
  margin: 0 0 0 0;
  padding: 0.5em 0;
  width: 9em;
  clear: both;
}

.form-inner-dl dd{
  float: right;
  margin: 0 0 0 0;
  padding: 0 0 0.5em;
  width: calc(100% - 9em);
}


.inner-dl{
  margin: 0 0 0 0;
  padding: 0 0.5em 0;
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 1.6rem;
  line-height: 1.6;
}

.inner-dl dt{
  margin: 1em 0;
  padding: 0.5em 0;
  border-bottom: 1px dotted #999;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
}

.inner-dl dd{
  margin: 0 0 0 1em;
  padding: 0 0 0.5em;
}

.card-image{
  margin: 0 0 1em;
  padding: 0;
  width: 100%;
  max-width: 48rem;
  display: block;
  opacity: 1;
}



@media screen and (max-width:480px){

.form-inner-dl dt{
  float: inherit;
  margin: 0 0 0 0;
  padding: 0.5em 0;
  width: auto;
  clear: both;
}

.form-inner-dl dd{
  float: inherit;
  margin: 0 0 0 0;
  padding: 0 0 0.5em;
  width: auto;
}

}/* End 480 */