/*------------------------------------------------------

    headLine

------------------------------------------------------*/
#headLine::after { content: ''; background: url("./images/bg_headline.jpg") no-repeat right center; background-size: cover; }
#headLine .title ,
#headLine2 .title { border-color: #53B251;}

@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


/*------------------------------------------------------

    description

------------------------------------------------------*/
#description {}
#description dl {}
#description dl:first-child { border-bottom: 1px solid #ccc; }
#description dt { color: #534741;}
#description dt::before { content: ''; width: 40px; height: 40px; background: url("./images/icon_romu.svg") no-repeat center center #53b251; display: inline-block; background-size: 30px auto; margin-right: 10px; vertical-align: -12px;}
#description dl:last-child dt::before { background: url("./images/icon_syugyo.svg") no-repeat center center #53b251; background-size: 30px auto; }
#description dd { font-size: 1.6rem; color: #333;}



@media (min-width: 768px) {
    #description { padding: 40px;}
    #description dl { justify-content: flex-start; -webkit-justify-content: flex-start; align-items: center; -webkit-align-items: center; }
    #description dl:first-child { padding-bottom: 8px; margin-bottom: 8px;}
    #description dt { font-size: 2.2rem; padding-right: 20px;}
    #description dd {}
}

@media (max-width: 767px) {
    #description { padding: 20px;}
    #description dl {}
    #description dl:first-child { padding-bottom: 14px; margin-bottom: 14px;}
    #description dt { width: 100%; font-size: 2rem; margin-bottom: 5px;}
    #description dd { width: 100%;}
}


/*------------------------------------------------------

    contentsNav

------------------------------------------------------*/
.contentsNav {}
.contentsNav li { background-color: #fff; box-shadow:0px 0px 8px 1px #d0d0d0;}
.contentsNav a { color: #534741; text-decoration: none; display: block; height: 100%; position: relative;}
.contentsNav a::before { content: ''; position: absolute; background: url("./images/icon_romu.svg") no-repeat center center; background-size: 60px auto; width: 100px; height: 100px; background-color: #53B251; left: 0; right: 0; top: 0; margin: auto;}
.contentsNav a::after { content: ''; position: absolute; width: 100px; height: 6px; background-color: #534741; bottom: 0; left: 0; right: 0; margin: auto;}
.contentsNav li:nth-child(2) a::before { background: url("./images/icon_syugyo.svg") no-repeat center center; background-size: 60px auto; background-color: #53B251; }
.contentsNav .title { font-size: 3rem; text-align: center; line-height: 1.4; font-weight: normal;}
.contentsNav .title span { display: block; font-size: 2.2rem;}

@media (min-width: 768px) {
    .contentsNav { margin-top: 40px;}
    .contentsNav li { width: 516px; margin-bottom: 40px;}
    .contentsNav a { padding: 114px 50px 10px;}
    .contentsNav a:hover { opacity: 0.8;}
    .contentsNav .title { margin-bottom: 12px; }
}

@media (max-width: 767px) {
    .contentsNav { margin-top: 20px; margin-left: 10px; margin-right: 10px;}
    .contentsNav li { width: 100%; margin-bottom: 20px;}
    .contentsNav a { padding: 90px 20px 10px; }
    .contentsNav a::before { background-size: 50px auto; width: 80px; height: 80px; }
    .contentsNav li:nth-child(2) a::before { background-size: 50px auto; }
    .contentsNav .title { margin-bottom: 5px; }
}


/*------------------------------------------------------

    about

------------------------------------------------------*/
#about {}
#about .col3L1 {}
#about .col3L1 img {}
#about .col3R2 {}
#about .title { color: #534741; font-size: 2.2rem;}
#about .title span { display: inline-block; color: #fff; background-color: #F15A24; font-weight: normal; line-height: 1; padding: 4px 2px 4px 10px; letter-spacing: 8px; margin-right: 8px; font-size: 2rem;}
#about .text {}



@media (min-width: 768px) {
    #about {}
    #about .col3L1 { width: 300px;}
    #about .col3L1 img {}
    #about .col3R2 { width: -webkit-calc(100% - (300px + 40px)); width: calc(100% - (300px + 40px));}
    #about .title { margin-bottom: 20px;}
    #about .title span {}
    #about .text {}
}

@media (max-width: 767px) {
    #about { flex-direction: column-reverse; -webkit-flex-direction: column-reverse; }
    #about .col3L1 { text-align: center;}
    #about .col3L1 img {}
    #about .col3R2 { margin-bottom: 0;}
    #about .title { margin-bottom: 10px;}
    #about .title span {}
    #about .text {}
}



/*------------------------------------------------------

    form

------------------------------------------------------*/
form {}
dl.list4 { border-bottom: 1px solid #CCB78D; padding-bottom: 10px; margin-bottom: 10px;}
dl.list4 dt { color: #333; font-size: 1.8rem;}
dl.list4 dt span { color: #fff; display: inline-block; background-color: #53B251; border-bottom: 5px solid #534741; width: 48px; height: 48px; text-align: center; font-size: 2.8rem; text-indent: 0; }
dl.list4 dd {}
dl.list4 dd.miss { position: relative;}
dl.list4 dd.miss::after { content: 'どちらかを選択してください'; position: absolute; width: 100%; left: 0; bottom: -15px; background-color: pink; padding: 2px 5px; font-size: 1.2rem; color: #c00;}

form .resultBtn { text-align: center; margin-top: 60px;}
form .resultBtn a { font-size: 2.4rem;}


@media (min-width: 768px) {
    form {}
    dl.list4 {}
    dl.list4 dt { width: -webkit-calc(100% - (240px + 10px)); width: calc(100% - (240px + 10px)); padding-left: 70px; text-indent: -70px;}
    dl.list4 dt span { margin-right: 20px;}
    dl.list4 dd { width: 240px; padding-top: 10px;}
    
    form .resultBtn a { padding-top: 9px; padding-bottom: 9px;}
}

@media (max-width: 767px) {
    form {}
    dl.list4 {}
    dl.list4 dt { width: 100%; padding-left: 60px; position: relative; min-height: 48px; margin-bottom: 15px;}
    dl.list4 dt span { margin-right: 10px; display: block; position: absolute; left: 0; top: 0;}
    dl.list4 dd { width: 100%; text-align: right;}
    dl.list4 dd.miss::after { display: block; position: relative; bottom: -4px; text-align: center;}
}




/*------------------------------------------------------

    result

------------------------------------------------------*/
#result {}
#result .resultTitle { color: #534741; background: url("./images/img_advaice.jpg") no-repeat left top; background-size: cover;}

#resultList { border-bottom: 3px solid #CCB78D; margin-bottom: 40px;}
#resultList li { font-size: 1.8rem; position: relative; word-break: break-all; }
#resultList li span { color: #fff; display: inline-block; background-color: #F15A24; border-bottom: 5px solid #534741; width: 48px; height: 48px; text-align: center; font-size: 2.8rem; text-indent: 0; position: absolute; left: 0; top: 0;}

.returnBtn { text-align: center; }

.contactBtn { text-align: center; padding-bottom: 50px;}
.contactBtn label { display: block; font-size: 1.8rem;}
.contactBtn .title { font-size: 1.8rem; color: #f15a24;}
.contactBtn ul.colWrap {}

#pdfWrap { text-align: center; border-top: 3px solid #CCB78D; padding-top: 30px;}
#pdfWrap a {}

#result #otherIIE { margin-bottom: 30px;}
#result #otherIIE .text { margin-bottom: 0;}
#result #otherIIE ul { justify-content: flex-start;}
#result #otherIIE ul li { font-size: 1.6rem; margin-right: 10px;}
#result #otherIIE ul li:not(:last-child)::after { content: ','; }

@media (min-width: 768px) {
    #result .resultTitle { height: 302px; font-size: 2.8rem; line-height: 302px; padding: 10px 30px; margin-bottom: 40px;}

    #resultList {}
    #resultList li { padding-left: 70px; margin-bottom: 40px; }
    #resultList li span {}
    
    .contactBtn ul.colWrap { justify-content: center; -webkit-justify-content: center; max-width: 400px; margin: 10px auto 20px; }
}

@media (max-width: 767px) {
    #result .resultTitle { margin-bottom: 20px; padding: 40px 10px; font-size: 2.2rem;}

    #resultList {}
    #resultList li { padding-left: 60px; margin-bottom: 20px; }
    #resultList li span {}
    
    .contactBtn ul.colWrap { margin-bottom: 10px;}
    .contactBtn ul.colWrap .col2-1:first-child { margin-bottom: 0;}
    
    #pdfWrap { display: none;}
}



/*------------------------------------------------------



------------------------------------------------------*/


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


.radio-button__input {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
.radio-button__input:active,
.radio-button__input:focus {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.radio-button__input:checked + .radio-button__checkmark:after {
  opacity: 1;
}
.radio-button__input:checked + .radio-button__checkmark:before {
  background: transparent;
  border: none;
}
.radio-button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
  line-height: 24px;
  text-align: left;
	margin-right: 24px;
    font-size: 2rem;
}
.radio-button__checkmark:before {
  content: '';
  position: absolute;
/*  -webkit-border-radius: 100%;
  border-radius: 100%;*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
/*  -webkit-border-radius: 16px;
  border-radius: 16px;*/
  left: 0;
}
.radio-button__checkmark {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  position: relative;
  overflow: hidden;
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
  pointer-events: none;
}
.radio-button__input:checked + .radio-button__checkmark {
  background: rgba(0,0,0,0);
}
.radio-button__checkmark:after {
  content: '';
  position: absolute;
/*  -webkit-border-radius: 100%;
  border-radius: 100%;*/
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 6px;
  left: 5px;
  opacity: 0;
  width: 12px;
  height: 6px;
  background: transparent;
  border: 3px solid #534741;
  border-width: 2px;
  border-top: none;
  border-right: none;
/*  -webkit-border-radius: 0px;
  border-radius: 0px;*/
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.radio-button--material {
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}
.radio-button--material__checkmark {
  width: 30px;
  height: 30px;
  overflow: visible;
	margin-right: 5px;
    vertical-align: -5px;
}
.radio-button--material__checkmark:before {
  background-color: #fff;
  border: 2px solid #534741;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/*  -webkit-border-radius: 50%;
  border-radius: 50%;*/
  width: 30px;
  height: 30px;
}
.radio-button--material__checkmark:after {
    /*
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border: none;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
    */
    position: absolute;
    top: 6px;
    left: 5px;
    width: 20px;
    height: 12px;
    background: transparent;
    border: 5px solid #fff;
    border-top: none;
    border-right: none;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
}
.radio-button--material__input:checked + .radio-button__checkmark:before {
  background-color: #534741;
  border: 2px solid #534741;
}
.radio-button--material__input + .radio-button__checkmark:after {
  background: #534741;
  opacity: 1;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.radio-button--material__input:checked + .radio-button__checkmark:after {
  opacity: 1;
  background: #534741;
  -webkit-transform: scale(1) rotate(-45deg);
  -moz-transform: scale(1) rotate(-45deg);
  -ms-transform: scale(1) rotate(-45deg);
  -o-transform: scale(1) rotate(-45deg);
  transform: scale(1) rotate(-45deg);
}