@charset "utf-8";
/* CSS Remedy */
html{line-sizing:normal}body{margin:0}[hidden]{display:none}h1{font-size:2.4rem}h2{font-size:2.1rem}h3{font-size:1.17rem}h4{font-size:1rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}audio:not([controls]){display:none}picture{display:contents}source{display:none}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}

*,::after,::before{
    box-sizing:border-box
}
html {
    font-size: 62.5%;
}
body {
    font-family: "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      Meiryo,
      sans-serif;
    margin: 5rem 0 7rem;/*header-footer fixed分*/
    font-size: 1.6rem;
    color: #343343;
}
main {
    width: 80rem;
    margin: 0 auto;
}
.progressbar {
    position: relative;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 1.4rem;
    z-index: -999;
}
.progressbar li {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    width: 33.333%;
    color: #85aeca;
    font-weight: bold;
}
.progressbar li:before {
    display: block;
    width: 18px;
    height: 18px;
    margin: 7px auto 8px auto;
    content: '';
    text-align: center;
    border-radius: 50%;
    background-color: #daf0ff;
}
.progressbar li:after {
    position: absolute;
    z-index: -1;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    content: '';
    background-color: #daf0ff;
}
.progressbar li:first-child:after {
    content: none;
}
.progressbar li.active,
.progressbar li.complete {
    color: #0070BD;
}
.progressbar li.active:before,
.progressbar li.complete:before {
    background-color: #0070BD;
}
.progressbar li.active:after,
.progressbar li.complete:after {
    background-color: #0070BD;
}
.mb2 {
    margin-bottom: 4rem;
}
.mb4 {
    margin-bottom: 8rem;
}
ul.squere {
    list-style: none;
    padding:0;
    margin:0 0 1.6rem 0
}
ul.squere li {
    padding-left: 1em; 
    text-indent: -.7em;
}
ul.squere li:before {
    content: "■";
    color: #d4003f;
    font-size: 2.2rem;
}
ul.squere li li:before {
    content: none;
}
.doiArea {
    border: solid 4px #fcc2d3;
    border-radius: 8px;
    padding: 1.6rem;
    margin:0 auto 4rem;
}
.attentionH {
    color:#d4003f;
    font-weight: 900;
    padding: 8px;
    background: #ffffcc;
    text-align: center;
}
.red {
    color:#d4003f;
}
h1,
h2 {
    text-align: center;
}
h2 {
    color: #0070BD;
    font-size: 2.4rem;
}
.maru {
    text-indent: -1em;
    padding-left: 1em;
}
.tCenter {
    text-align: center;
}
a.linkBtn {
    display: inline-block;
    padding: 0.4rem 1.6rem;
    background: #fff;
    border: solid 1px #999;
    border-bottom-width: 2px;
    border-radius: .8rem;
    text-decoration: none;
    color: #343343;
    font-weight: bold;
}
a.linkBtn:hover {
    opacity: .7;
}
button {
    cursor: pointer;
}
ul.topBtnArea {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content:space-evenly;
}
ul.topBtnArea li {
    width: calc((100% - 40px) / 4);
}
ul.topBtnArea li button {
    border-radius: .8rem;
    border: solid 4px #00a0e9;
    background: #fff;
    background: linear-gradient(#fff, #fff, #d6f5ff);
    color: #004c8a;
    font-size: 2.1rem;
    font-weight: 900;
    width: 100%;
    height: 100%;
    cursor: pointer;
    align-self:self-start;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

ul.topBtnArea li button span {
    font-size: 1.4rem;
    font-weight: normal;
    display: block;
}
ul.topBtnArea li button img {
    height: 60px;
    width: auto;
    display: block;
    margin: .8rem auto;
}
ul.topBtnArea li button:hover {
    opacity: .7;
    cursor: pointer;
}
ul.topBtnArea li button:disabled {
    filter: grayscale(100%);
    background: linear-gradient(#ccc, #ccc);
    cursor: not-allowed;
    opacity: .5;
}
ul.topBtnArea li button:disabled:hover {
    opacity: .5;
}

table.table {
    border-collapse:  collapse; 
    width: 100%;
    margin-bottom: 4rem;
}
table.table th {
    border-bottom: solid 2px #daf0ff;
    text-align: left;
    padding: .8rem;
    width: 37%;
}
table.table th.head {
    background: #0070BD;
    color: #fff;
    text-align: center;
    font-size: 2.1rem;
    border-bottom:solid 2px #0070BD;
    padding: .8rem .4rem .4rem .8rem;
}
table.table td {
    border-bottom: solid 2px #daf0ff;
    padding: .8rem;
    word-break: break-all;
}

/*
    todo higarashi
    お申し込み入力画面の必須項目未入力時に出力されるメッセージ
 */
table.table div p {
    margin: .8rem .0rem .0rem;
    color: #d4003f;
    font-weight: bold;
    background: #ffffcc;
}

span.required{
    background: #f30049;
    padding: .2rem .4rem;
    color: #fff;
    font-size: 1.1rem;
    border-radius: .4rem;
    display: inline-block;
    margin-left: .6rem;
    vertical-align: top;
}
select,input {
    height:40px;
    width: 100%;
    font-size: 1.6rem;
    border-radius: .4rem;
    border: solid 1px #666;
    background: #fff;
}
input.m,
input.s {
    width: 10rem;
    vertical-align: middle;
}
input[type="radio"],
input[type="checkbox"] {
    width:2.8rem;
    height:2.8rem;
    vertical-align: middle;
    margin-right: .4rem;
}
input[type="button"] {
    border-bottom-width: 3px;
    border-color: #999;
}

/*
   todo higarashi
   画面下部のSECOMアイコン用の設定
 */
form[name="CertificationPageForm"] {
    text-align: center;
}
input[name="Sticker"] {
    height: auto;
    width: auto;
    border: none;
}

textarea {
    width: 100%;
    font-size: 1.6rem;
    border-radius: .4rem;
    border: solid 1px #666;
}
.small {
    font-size: 1.2rem;
    font-weight: normal;
}
.marker {
    background: linear-gradient(transparent 65%, #ffeb35 25%);
    display: inline-block;
  }
ul.nolist {
    list-style: none;
    margin: 0;
    padding: 0;
}
div.nextBtnArea {
    text-align: center;
    padding-bottom: 4rem;
}
button.praimary,
a.praimary {
    background:#00a0e9;
    border:none;
    border-bottom:solid 4px rgba(0, 0, 0, 0.2);
    border-radius: .8rem;
    color: #fff;
    font-weight: 900;
    font-size: 1.8rem;
    padding: .8rem 6rem;
    display: inline-block;
    text-decoration: none;
}
a.praimary {
    padding: .8rem;
}
button.praimary:hover,
a.praimary:hover {
    opacity: .8;
}
button.secondary {
    background: #fff;
    color: #666;
    border:solid 1px #999;
    border-bottom:solid 4px #999;
    border-radius: .8rem;
    font-weight: 900;
    font-size: 1.8rem;
    padding: .8rem;
    display: inline-block;
    text-decoration: none;
}
.sp {
    display: none;
}
.sp2 {
    display: none;
}
.pc {
    display: block;
}
.pc2 {
    display: inline-block;
}
@media (max-width: 768px) {
    body {
        margin: 7rem 0 12rem;
    }
    main {
        width: auto;
        margin: 0 1.6rem;
    }
    .progressbar li {
        font-size: 1.2rem;
    }
    table.table th,table.table td {
        display: block;
        width: 100%;
        border:none;
    }
    table.table th {
        padding-top: .8rem;
        border-top: solid 2px #0070BD;
    }
    table.table td {
        padding-bottom: .8rem;
    }
    .sp {
        display: block;
    }
    .sp2 {
    display: inline-block;
    }
    .pc {
        display: none;
    }
    .pc2 {
        display: none;
    }
    ul.topBtnArea {
        flex-wrap: wrap;
    }
    ul.topBtnArea li {
        width:calc((100% - 4rem) / 2);
        margin: 1rem;
    }
    input.s {
        width: 10rem;
    }
    input.s {
        width: 8rem;
    }
}