.tc{text-align: center;}img{object-fit: contain;height: auto;}.db{display: block;}#payroll { line-height: 1.15;} #payroll .contents { width: 980px; margin: 0 auto;} #payroll .hero { height: 622px; background-image: url(../img/payroll_bg_hero.png); background-repeat: no-repeat; background-position: top center;} #payroll h1{ width: 100%;} #payroll .hero .contents { position: relative; height: 100%; padding: 50px 0; background-image: url(../img/payroll_img_hero.png); background-repeat: no-repeat; background-position: top 60px right;} #payroll .title-hero { color: #2969b0; font-size: 60px; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; line-height: 1;} #payroll .img-title-hero { display: block; margin-bottom: 20px;} #payroll .txt-title-hero { font-size: 45px;} #payroll .btn-hero { display: inline-block; position: absolute; bottom: 0; right: 0; padding: 1em 2em 1.1em 2em; background: #ecf500; border: 4px #3a3768 solid; border-radius: 2em; color: #3a3768; font-size: 22px; font-family: 'Noto Sans JP', sans-serif; font-weight: 600; text-decoration: none; user-select: none; transition: 0.4s ease;} #payroll .container { margin: 80px 0; text-align: center;} #payroll .title-message { color: #2969b0; font-size: 40px; font-weight: 600;} .marker.fire span { background-position: 0% bottom;} .marker span { padding-bottom: .2em; background: -webkit-linear-gradient(left, #ecf500 50%, transparent 50%) 100% bottom / 200% 50% no-repeat; background: linear-gradient(to right, #ecf500 50%, transparent 50%) 100% bottom / 200% 50% no-repeat; -webkit-transition: background-position .5s ease-out; transition: background-position .5s ease-out;} #payroll .img-message { margin: 60px auto;object-fit: contain;height: auto;} #payroll .title-service { margin-bottom: -40px; color: #2969b0; font-size: 55px; font-weight: 600; text-align: center; line-height: 1.4;} #payroll .area-plan { position: relative;} #payroll .title-payroll { position: relative; margin-bottom: 60px; padding-bottom: 20px; font-size: 35px; font-weight: 600; text-align: center; line-height: 1.5; border-bottom: 3px #8fb7e3 solid;} #payroll .title-payroll::before { content: ""; position: absolute; right: 0; bottom: -30px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #8fb7e3 transparent transparent transparent; border-width: 30px 30px 0 30px;} #payroll .title-payroll::after { content: ""; position: absolute; right: 0; bottom: -26px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #fff transparent transparent transparent; border-width: 26px 26px 0 26px;} #payroll .txt-plan { width: 47%; margin-bottom: 1rem; font-size: 20px; line-height: 1.7; text-align: left;} #payroll .img-plan { position: absolute; bottom: 0; right: 0;} #payroll .subtitle-basic { margin: 60px 0 30px 0; font-size: 25px; font-weight: 600;} .fa, .fas { font-weight: 900;} .fa, .far, .fas { font-family: "Font Awesome 5 Free";} .fa-check-circle { margin-right: 0.5rem; color: #2969b0;} #payroll .table-basictitle { margin-bottom: 20px; font-size: 20px; font-weight: 600; color: #2969b0; text-align: center;} #payroll .table-basic { width: 100%; color: #2969b0; font-size: 20px; white-space: nowrap;} #payroll .table-basic th { background-color: #DFECFA; text-align: center;} #payroll .table-basic td { font-family: 'Roboto', sans-serif;} #payroll .table-basic th, #payroll .table-basic td { padding: 0.8em; border: 1px #2969b0 solid;} th { text-align: left; font-weight: bold;} td, th { vertical-align: top; padding: 0;} #payroll .list-basic { margin: 30px 0; font-size: 16px; text-align: left; line-height: 1.2;} #payroll .list-basic li { margin: .8em; list-style-type: disc;} #payroll .point-basic { margin-bottom: -30px; padding: 1em; background-color: #2969b0; color: #fff; font-size: 30px; font-weight: 600;} #payroll .grey { width: 100%; padding: 60px 0; background-color: #E3E3E3;} #payroll .title-contact { margin-top: -10px; margin-bottom: 40px; font-size: 25px; font-weight: 600; text-align: center;} #payroll .area-contact { display: flex; flex-wrap: wrap; line-height: 1;} #payroll .area-btn-contact:first-child { border-right: 1px solid #3a3768;} #payroll .area-btn-contact { width: 50%; justify-content: space-between; font-family: 'Roboto', sans-serif;} #payroll .btn-contact { display: inline-block; background: #ecf500; color: #3a3768; padding: 1.2em 1.5em 1.3em 1.5em; font-size: 28px; font-family: 'Noto Sans JP', sans-serif; font-weight: 600; text-decoration: none; user-select: none; border: 4px #3a3768 solid; border-radius: 2.4em; transition: 0.4s ease;} #payroll .area-btn-contact { width: 50%; justify-content: space-between; font-family: 'Roboto', sans-serif;} #payroll .title-tel { display: block; margin: 10px 0; font-size: 22px; font-weight: 600; color: #3a3768; text-align: center;} #payroll .tel-contact { font-size: 43px; font-weight: 600; color: #3a3768;} #payroll .ico-tel { margin-right: 10px;} #payroll .list-reason { display: inline-block; font-size: 28px; color: #2969b0; font-weight: 600; line-height: 2.7; text-align: left;} #payroll .ico-reason:nth-child(1) { margin: 0 27px;} #payroll .ico-reason { vertical-align: middle;} #payroll .title-payroll { position: relative; margin-bottom: 60px; padding-bottom: 20px; font-size: 35px; font-weight: 600; text-align: center; line-height: 1.5; border-bottom: 3px #8fb7e3 solid;} #payroll .title-payroll-grey::after { border-color: #E3E3E3 transparent transparent transparent;} #payroll .img-backup { width: 46%; margin: 1rem 1%;} #payroll .title-nagano { margin: 1rem 0 2rem 0; color: #2969b0; font-size: 35px; font-weight: 600;} #payroll .txt-backup { width: 600px; margin: 1rem auto; font-size: 20px; line-height: 1.7; text-align: left;} #payroll .btn-hero:hover, #payroll .btn-contact:hover{ background: #ff8203; border: 4px #ff8203 solid; color: #fff;} #payroll .fa-paper-plane { margin-right: 1.2rem;} @media screen and (max-width: 768px) { #payroll .hero { height: auto;} #payroll .title-contact { margin-bottom: 1em; padding: 0 1em; font-size: 16px; line-height: 1.5;} #payroll .title-hero { color: #2969b0; font-size: 32px; line-height: 1.2; text-align: center; margin-bottom: 20px;} #payroll .img-title-hero { display: block; width: 60%; margin: 80% auto 15px auto;} #payroll .txt-title-hero { font-size: 29px;} #payroll .hero .contents { position: static; background-position: top 30px center; background-size: 90%;} #payroll .btn-hero { display: table; position: static; margin: 20px auto -40px auto; font-size: 16px; bottom: auto; right: auto;} #payroll .container { margin: 40px 0;} #payroll .contents { width: 90%;} #payroll .title-message { font-size: 18px; line-height: 1.2;} #payroll .img-message { width: 80%; margin: 30px auto;} #payroll .title-service { margin-bottom: -10px; font-size: 25px; line-height: 1.5;} #payroll .img-title-service { width: 40%;} #payroll .area-plan { position: static;} #payroll .title-payroll { font-size: 18px; margin-bottom: 30px; padding-bottom: 10px;} #payroll .title-payroll::before { bottom: -15px; border-width: 15px 15px 0 15px;} #payroll .title-payroll::after { bottom: -11px; border-width: 13px 13px 0 13px;} #payroll .txt-plan { width: 95%; margin: 1rem auto; font-size: 16px; line-height: 1.7;} #payroll .img-plan { position: static; margin: 0 auto; width: 80%; bottom: auto; right: auto;} #payroll .subtitle-basic { margin: 30px 0 20px 0; font-size: 16px;} img { width: 100%;} #payroll .table-basictitle { margin-bottom: 20px; font-size: 14px;} #payroll .table-basic { display: block; font-size: 16px; overflow-x: scroll; -webkit-overflow-scrolling: touch;} #payroll .table-basic tbody { width: 100%;} #payroll .list-basic { margin: 15px 0; font-size: 12px; line-height: 1.6;} #payroll .point-basic { margin-bottom: 30px; font-size: 16px; line-height: 1.4;} #payroll .grey { padding: 40px 0 20px 0;} #payroll .title-contact { margin-bottom: 1em; padding: 0 1em; font-size: 16px; line-height: 1.5;} #payroll .area-contact { display: block; margin: 12px auto; align-items: normal;} #payroll .area-btn-contact:first-child { border-right: none;} #payroll .btn-contact { margin: 0 auto; padding: 1em; font-size: 20px; border: 4px #3a3768 solid;} #payroll .area-btn-contact { width: 100%; justify-content: normal;} #payroll .title-tel { margin: 30px 0 10px 0; font-size: 18px;} #payroll .tel-contact { font-size: 30px;} #payroll .ico-tel { width: auto; height: 32px;} #payroll .list-reason { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; font-size: 14px; line-height: 1.5;} #payroll .txt-reason { width: 48%; margin: 2% 0; padding: 20px 4%; border: 1px solid #84AEDF; text-align: center;} #payroll .ico-reason:nth-child(1), #payroll .ico-reason:nth-child(2), #payroll .ico-reason:nth-child(3), #payroll .ico-reason:nth-child(4), #payroll .ico-reason:nth-child(5), #payroll .ico-reason:nth-child(6) { margin: 10px auto;} #payroll .ico-reason { display: block; width: auto; vertical-align: top;} #payroll .img-backup { width: 100%; margin: 0.3rem 0;} #payroll .title-nagano { margin: 1rem 0; font-size: 20px;} #payroll .txt-backup { width: 100%; font-size: 14px;}}

#payroll .img-title-hero,
#payroll .img-title-service{
	height: 33px;
}