@charset 'utf-8';
/*
 * name:material form.css
 * author:rotana nulo
*/

#contact table tr td .t-lists .t-lists--block{ display: block; }
#contact table tr td .t-lists .t-lists--full_g label{ width: 190px; }
#contact table tr td .t-lists .t-lists--full_g input[type="text"]{ width: calc(100% - 190px); }
#contact table tr td .t-lists .t-lists--full_other{ display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-right: 0; }
#contact table tr td .t-lists .t-lists--full_other label{ width: 90px; }
#contact table tr td .t-lists .t-lists--full_other input[type="text"]{ width: calc(100% - 90px); }
.contact__headtab{ display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 640px; margin: 0 auto 80px; }
.contact__headtab li{ width: calc(200/640 * 100%); text-align: center; font-size: 1.6rem; font-weight: bold; color:#000; line-height: 49px; background-color: #d6d5d5; border-radius: 5px; }
.contact__headtab li.on{ color:#fff; background-color: #ea5550; }
.material--lists{ display: flex; flex-wrap: wrap; align-items: flex-start; }
.material--lists li p{ display: block; margin-top: 12px; width: 100%; }
.material--lists li input[type=checkbox] { position: relative; width: 16px; height: 16px; background: none; border-radius: 2px; border: 1px solid #e2e0e1; -webkit-appearance: none; outline: none; appearance: none; display: inline-block; vertical-align: middle; margin-right: 10px; }
.material--lists li input[type=checkbox]:checked:after { 
    content: "";
    width: 0.8em;
    height: 0.8em;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em#ea5550;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
 }
.material--lists li label{ display: flex; flex-wrap: wrap; align-items: center; }
.building--lists{ display: flex; flex-wrap: wrap; align-items: flex-start; }
.building--lists li{ width: calc(160/768 * 100%); position: relative; display: inline-flex; align-items: flex-end; justify-content: space-between; }
.building--lists li+li{ margin-left: 48px; }
.building--lists li+li:before{ content:'/'; position: absolute; left: -28px; top: 10px; font-size: 2rem; line-height: 1; }
.building--lists li input{ width: calc(136/160 * 100%) !important; }
.contact__agree--text p{ margin-bottom: 42px; }
.material__item--lists{ max-width: 800px; margin: 0 auto; padding-bottom: 30px; border-bottom:1px solid #e2e0e1; }
.material__item--lists li{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding-top: 30px; color:#000; border-top:1px solid #e2e0e1; }
.material__item--lists li h2{ font-size: 2rem; line-height: 1; }
.material__item--lists li p{ margin-top: 15px; font-size: 1.5rem; line-height: calc(27/15); letter-spacing: 0.038em; }
.material__item--lists li a{ margin-top: 34px; display: block; width: 233px; line-height: 48px; color:#fff; font-size: 1.6rem; font-weight: bold; text-align: center; letter-spacing: 0.01em; background-color: #e95354; border:1px solid #e95354; border-radius: 4px; transition: linear .25s;}
.material__item--lists li a span::after { position: relative; top: 1px; content: ''; display: inline-block; margin: 0 0 0 16px; width: 8px; height: 12px; background: url(../../img/share/btn-next.png) no-repeat center center; background-size: 100%; }

.material__item--lists li+li{ margin-top: 30px; }
.material__item--lists-thumb{ width: 215px; }
.material__item--lists-desc{ width: calc(100% - 252px); }
.thanks--desc{ text-align: center; }
#contact table tr th .t-need.no-need{ background-color: #999999; }


@media screen and (min-width: 769px) {
    .material--lists li{ width: calc(200/786 * 100%); }
    .material--lists li+li{ margin-left:calc(40/768 * 100%); }
    .material__item--lists li a:hover{ background-color: transparent; color:#e95354; }
    .material__item--lists li a:hover span:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); background: url(../../img/share/btn-prev.png) no-repeat center center; background-size: 100%; }
}
@media screen and (max-width: 768px) {
    #contact table tr td .t-lists .t-lists--full_g label{ width: 103px; }
    #contact table tr td .t-lists .t-lists--full_g input[type="text"]{ width: calc(100% - 103px); }
    #contact table tr td .t-lists .t-lists--full_other label{ width: 70px; }
    #contact table tr td .t-lists .t-lists--full_other input[type="text"]{ width: calc(100% - 70px); }
    #contact table tr td .t-lists .t-lists--full_other.mb_other label{ width: 103px; }
    #contact table tr td .t-lists .t-lists--full_other.mb_other input[type="text"]{ width: calc(100% - 103px); }
    #contact .contact-confirm table tr th{ padding-bottom: 0; }
    .contact__agree--text p{ margin-bottom: 26px; }
    .contact__headtab{ max-width: 690px; margin-bottom: 30px; }
    .contact__headtab li{ width: calc(216/690 * 100%); font-size: 1.1rem; line-height: 30px; border-radius: 3px; }
    .contact__btns{ margin: 25px auto 0; max-width: 690px; display: flex; align-items: flex-start; }
    .contact__btns.confirm--btn{ justify-content: space-between; }
    .contact__btns.confirm--btn .contact__btns--item{ width: calc(330/690 * 100%); margin: 0; }
    .contact__btns--item:not(:last-child){ margin: 0; }
    .contact__btns--item button, .contact__btns--item a{ height: 40px; padding: 10px 0; border-radius: 3px; }
    .contact__btns--item a > i,
    .contact__btns--item button:after{ margin-top: 5px; }
    .material--lists{ justify-content: space-between; max-width: 328px; }
	.material--lists li input[type=checkbox] { width: 14px; height: 14px; margin-right: 5px; }
    .material--lists li{ width: 141px; }
    .material--lists li p{ max-width:unset; width: calc(100% - 15px); max-width: 126px; margin-left: 15px; margin-top: 9px; }
    .material--lists li:not(:nth-child(-n+2)){ margin-top: 27px; }
    .material--lists li:last-child{ width: 100%; }
    .building--lists li{ width: calc(50% - 20px); }
    .building--lists li+li{ margin-left: 40px; }
    .building--lists li+li:before{ font-size: 1.8rem; left: -23px; top: 14px; }
    .building--lists li input{ width: calc(100% - 17px) !important; }
    .building--lists li span{ width: 17px; text-align: right; }
   
    .thanks--desc{ margin-bottom: 27px !important; font-size: 1.3rem; line-height: calc(41/26); text-align: left; }
    .material__item--lists{ padding-bottom: 20px; }
    .material__item--lists-thumb{ width: 95px; }
    .material__item--lists-desc{ width: calc(100% - 115px); }
    .material__item--lists li{ padding-top: 20px;  }
    .material__item--lists li+li{ margin-top: 20px; }
    .material__item--lists li h2,
    .material__item--lists li p{ font-size: 1.3rem; line-height: calc(41/26); }
    .material__item--lists li h2{ margin-top: -3px; }
    .material__item--lists li p{ margin-top: 2px; }
    .material__item--lists li a{ margin-top: 13px; width: 100%; font-size: 1.3rem; line-height: 38px; }
    .material__item--lists li a span::after{ margin-left: 15px; top: 2px; }
}
@media screen and (max-width: 320px) {
    .material__item--lists li a{ font-size: 1.1rem; }
}