@charset "UTF-8";
@import url(ini.css);
@import url(https://use.fontawesome.com/releases/v5.6.3/css/all.css);


/* common
----------------------------------------------------------------------------------------------*/
html{ font-size: 62.5%; background: #000;}
body{ font-size: 1.6em;}

div#wrap{ background: #fff; color: #272727; font-size: 1.5rem;}

.inner{ max-width: 767px; width: 90%; margin: 0 auto;}

.more { text-align: center; max-width: 100%; margin: 0 auto;}
.more a{ text-decoration: none; display: block; font-weight: bold; color: #fff; background: #f87b08; border-bottom:2px solid #e06f06; font-size: 1.6rem; padding: 15px 0; border-radius: 3px;}
.more a:hover{ background: #f9963a;}

header#global-header{ background: #59a9ef; font-size: 1.5rem; padding: 15px 0; text-align: center;}

footer#global-footer{ background: #000; color: #fff;}
footer#global-footer #rtTop{ text-align: center;}
footer#global-footer #rtTop a{ background: #272727; display: block; text-decoration: none; color: #fff; padding: 15px 0;}
footer#global-footer #rtTop a:hover{ background: #454545;}
footer#global-footer #rtTop i{padding-right: 0.5em;}
footer#global-footer small{ display: block; margin-top: 25px; text-align: right;}


/* local header */
article header{ position: relative; text-align: center; padding: 15px 0; background: #454545 no-repeat center center; background-size: cover; color: #fff; margin-bottom: 50px;}
article header::before {
    content: '';
    background-color: rgba(0,0,0,0.3);
    background-image: linear-gradient(90deg, rgba(0,0,0,.15) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.15) 50%, transparent 50%);
    background-size: 2px 2px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
article header h1{position: relative; font-size: 1.4rem; color: #fff; padding:0 0.5em;}
article header span{ display: block; font-size: 1.6rem; font-weight: bold;}
article footer { margin-top: 50px;}


/* info form
----------------------------------------------------------------------------------------------*/
main#info{ margin-bottom: 50px;}
main#info section.form{ width: 90%; max-width: 640px; margin: 0 auto;  border: 1px solid #ccc; border-radius: 3px; padding: 19px;}
main#info section.form h2{ text-align: center; font-size: 1.6rem; font-weight: bold;}

main#info section.form div.step{}
main#info section.form div.step ol{display: flex;  position: relative;  margin: 50px 0;  text-align: center;}
main#info section.form div.step ol li{  font-size: 1.2rem;  list-style: none;  position: relative;  width: 33.333%;}
main#info section.form div.step ol li:after {  background: #f8d2af;  content: "";  width: calc(100% - 24px);  height: 4px;  position: absolute;  left: calc(-50% + 12px);  top: 10px;}
main#info section.form div.step ol li:first-child:after {  display: none;}
main#info section.form div.step ol li span {  background: #f8d2af;  color: #ffffff;  display: inline-block;  height: 24px;  margin-bottom: 5px;  line-height: 24px;  width: 24px;  -moz-border-radius: 50%;  -webkit-border-radius: 50%;  border-radius: 50%;}
main#info section.form div.step ol li.now{ }
main#info section.form div.step ol li.now span {  background: #f87b08;}

main#info section.form dl{}
main#info section.form dl dt{ font-size: 1.4rem; font-weight: bold; padding-bottom: 10px;}
main#info section.form dl dd{ font-size: 1.6rem; padding:0 0 25px 0;}
main#info section.form dl dd:last-of-type{ padding-bottom: 0;}
main#info section.form dl dd.attention{ border: 2px solid #fc0; padding: 0.5em; margin-bottom: 10px; font-weight: bold;}

main#info section.form dl.checkpage dd{ background: #f1f1f1; padding: 0.5em; margin: 0 0 25px 0; border-radius: 3px;}

main#info section.form dl dd input[type="text"],
main#info section.form dl dd textarea{background: #feffcc; border:solid 1px #ddd; border-radius:3px; text-align: left; width: 100%; font-size: 1.6rem; padding: 0.75em;}
main#info section.form dl dd textarea{ height: 300px; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
main#info section.form dl dd textarea.itemno{ height: 100px;}

main#info section.form dl dd .att{ font-size: 1.4rem; margin-top: 10px;}
main#info section.form dl dt .must{ font-size: 1.2rem; padding: 0.1rem; margin-left: 0.5em; background: #ff0808; color: #fff; border-radius: 3px;  }
main#info section.form dl dt .any{ font-size: 1.2rem; padding: 0.1rem; margin-left: 0.5em; background: #66ae08; color: #fff; border-radius: 3px;  }

main#info section.form dl dd .radioBox{ font-size: 0; text-align: left;}
main#info section.form dl dd label{ display: inline-block; cursor: pointer; margin: 5px; padding:5px 10px; border: 3px solid #e5e5e5; background: #f1f1f1; border-radius: 3px;}
main#info section.form dl dd label:hover{ border-color: #f87b08; background: #feffcc;}
main#info section.form dl dd label span{ padding-left: 0.5em; font-size: 1.6rem; vertical-align: middle;}
main#info section.form dl dd label input[type="radio"]{display: inline-block; font-size: 1.6rem; text-align: center; vertical-align: middle;}

main#info section.form #endofform{ margin-top: 25px;}
main#info section.form #endofform ul{ font-size: 0; text-align: center;}
main#info section.form #endofform ul li{ display: inline-block; font-size: 1.8rem; margin: 10px;}
main#info section.form #endofform ul li input{ display: block; cursor: pointer; font-weight: normal; color: #fff; background: #f87b08; border-bottom:2px solid #e06f06; border-radius: 3px;}
main#info section.form #endofform ul li input:hover{ background: #f9963a;}
main#info section.form #endofform ul li input.back{ color: #272727; background: #ccc; border-color: #aaa;}
main#info section.form #endofform ul li input.back:hover{ background: #bbb;}

main#info section.form #thanks{}
main#info section.form #thanks h3{ margin-top: 2em; border-bottom: 1px dotted #454545; font-weight: bold; font-weight: 1.8rem;}
main#info section.form #thanks p{ margin: 1em 0;}
main#info section.form #thanks .meilto{ font-weight: bold; text-align: center; background: #feffcc; padding: 1em;}




@media print,screen and (max-width: 1199px) {
  /* laptop */
  /* laptop end */
}
@media screen and (max-width: 991px) {
  /* tablet */
  article header span{ text-align: left;}

  /* tablet end */
}
@media screen and (max-width: 767px) {
  /* phone */
  main#info section.form{ padding: 9px;}

  /* phone end */
}