.tsukushi {
font-family: fot-tsukuardgothic-std, sans-serif;
}

.maincolor {
    color: #eb6d7b;
}

section {
    margin-bottom: 3em;
}

small {
    font-size: 0.6em;
    font-weight: 400;
    color: black;
}

header {
    background-color:#eb6d7b;
    padding : 1rem 0;
    box-shadow: 0em 0.5em 1em rgba(0, 0, 0, 0.4);
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
}

.header_inner {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_inner > div >p {
    letter-spacing: 0.07em;
}

.header-text {
    color:#fff;
    display: inline-block;
    font-size: 1.3em;
    margin-left: 1em;
    position: relative;
    bottom: 0.3em;
}

.quacareer_logo {
    width: 12rem;
    height: auto;
}

a.button {
    display: inline-block;
    background-color: #7ecef4;
    padding: 1em 1.7em;
    border-radius: 0.3em;
    text-decoration: none;
    font-weight: 900;
    color : #fff;
}

a.button:hover, .large_button:hover, #submit_button:hover {
    background-color: #98e8ff;
}

#logo {
    width: 1000px;
    margin: 0 auto;
    padding : 2.5em 0;
    text-align: center;
}

#logo img {
    width: 85%;
    height: auto;
}

#eye_catch {
    margin-top: 4em;
}

#eye_catch .title #logo>p {
    visibility: hidden;
}

#sub_catch {
    width: 1000px;
    margin: 0.8em auto;
    display: flex;
    justify-content: center;
}

.leftbox {
    position: relative;
    margin: 0 1em;
    top: -0.2em;
}

#left_top {
    display: inline-block;
    margin: 0.5em auto;
    padding: 0.3em 0.6em;
    background-color: #eb6d7b;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
}

#right_top {
    display: inline-block;
    font-size: 1.4em;
}

#right_top em {
    font-size: 1.5em;
    color: #eb6d7b;
}

#sub_bottom {
    display: inline-block;
    font-size: 2em;
    font-weight: 900;
    color: #eb6d7b;
}

.rightbox {
    display: flex;
    text-align: center;
    justify-content: center;
}

.large_button {
    display: inline-block;
    background-color: #7ecef4;
    padding: 0 2em;
    line-height: 4em;
    text-decoration: none;
    border-radius: 0.5em;
    font-size: 1.3em;
    font-weight: 1000;
    color : #fff;
    letter-spacing: 0.08em;
    box-shadow: 0.3em 0.5em 1em rgba(0, 0, 0, 0.4);
}

h2 {
    font-size: 2em;
}

section .wrapper {
    width: 1000px;
    margin: 0 auto;
    padding-top: 2em;
    padding-bottom: 2em;
}

#three_merit {
    margin: 0 auto;
    padding: 3em 0 1.5em 0;
    text-align: center;
}

.banner {
    width: 900px;
    margin: 0 auto;
}

.banner ul {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: top;
}

.banner ul li {
    width: 30%;
}

.banner ul li img {
    width: 100%;
}

.gray_background {
    background-color: #f6f6f6;
    width: 100%;
}

#four_points {
    margin-bottom: 2em;
}

#four_points h2 {
    display: flex;
    justify-content: center;
}

#four_points h2 .leftbox {
    display: inline-block;
    text-align: center;
}

#four_points h2 .leftbox span:first-child {
    margin-bottom: 0.7em;
    display: block;
    font-size: 1.2em;
    font-weight: 900;
}

#four_points h2 .leftbox span:last-child {
    display: block;
    font-size: 1.5em;
    font-weight: 1000;
}

#four_points h2 .rightbox2 {
    display: flex;
    align-items: center;
    font-size: 1em;
    font-weight: 1000;
}

.rightbox2 span {
    font-size: 1em;
    display: inline-block;
}

.rightbox2 em {
    font-size: 1.5em;
    color:  #eb6d7b;
}

.rightbox2 img {
    display: inline-block;
    width: 1.8em;
}

#four_points div h3 {
    margin: 1em auto;
    padding: 0.5em 0 0.5em 1.5em;
    background-color: #eb6d7b;
    color: #fff;
    font-size: 1.3em;
    letter-spacing: 0.06em;
}

.box {
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: space-around;
}

.box ul {
    list-style-type: disc;
}

#point1img {
    width: 40%;
}

#point1img img{
    width: 100%;
    height: auto;
}

#point1txt {
    margin: 0 0 0 2em;
    width: 60%;
}

.box > div > span {
    font-size: 1.2em;
    line-height: 1.5em;
}

#point1txt > div {
    margin: 0.9em 0;
    padding: 0.5em;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}

.details h4 {
    font-size: 0.9em;
    line-height: 2.3em;
}

.details ul {
    margin-left: 1.4em;
    line-height: 1.6em;
}

.details ul li {
    font-size: 0.9em;
    line-height: 1.5em;
}

#point2txt {
    box-sizing: border-box;
    margin-right: 2em;
    width: 55%;
}

#point2txt > div {
    margin: 0.9em 0;
    padding: 0.5em;
    background-color: #fff;
}

#point2img {
    width: 40%;
}

#point2img img {
    width: 100%;
}

#point3img {
    width: 30%;
}

#point3img img {
    width: 100%;
}

#point3 {
    width: 60%;
}

#point3 > div {
    margin-top: 1.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#point3-popimg {
    width: 30%;
    display: inline-block;
    vertical-align: middle;
}

#point3-popimg img {
    width: 100%;
}

#point3-poptxt {
    box-sizing: border-box;
    width: 65%;
    padding: 0.7em;
    display: inline-block;
    background-color: #fcfcc5;
    border-radius: 0.5em;
    line-height: 1.2em;
}

#point3-poptxt span {
    font-size: 0.9em;
    line-height: 1em;
}

#point4 {
    box-sizing: border-box;
    width: 50%;
    margin-right: 2em;
}

#point4 img {
    width: 100%;
}

#point4 div {
    padding-top: 1.2em;
    text-align: center;
}

#point4 div span {
    color:  #eb6d7b;
    font-size: 1.3em;
    letter-spacing: 0.05em;
}
#point4img {
    width: 40%;
    vertical-align: center;
}

#point4img img {
    width: 100%;
}

#point4img div#point4-small {
    background-color: #fff;
    padding: 0.7em;
    text-align: center;
}

#point4-small img {
    width: 100%;
}

#point4-small .left-top span {
    line-height: 2em;
}

.left > span {
    font-size: 0.9em;
    line-height: 1.2em;
}

#point4-small .left-top span img {
    height: 1.5em;
    width: auto;
    margin: 0 0.5em;
}

.centerbox {
    margin: 2em auto;
    display: flex;
    text-align: center;
    justify-content: center;
}

.center_img {
    width: 70%;
    display: block;
    margin: 0 auto 2em;
}

.center_img img {
    width: 100%;
}

#basic_banner {
    margin-top: -4em;
    padding-top: 4em;
}

.content_box > h3 {
    font-size: 1.5em;
    margin-bottom: 1em;
}

.contents4 {
    text-align: center;
}

.contents4 img {
    height: 10em;
    width: auto;
}

.basic_content {
    display: flex;
    justify-content: space-around;
    margin: 0 auto 3em;
}

.contents4 {
    display: inline-block;
    width: 23%;
}

.contents4 div:first-child {
    margin-bottom: 0.7em;
}

.contents4 div.left {
    margin-top: 0.7em;
}

.contents4 div.left span {
    font-size: 0.9em;
    line-height: 1.5em;
}

#price {
    width: 95%;
    margin-bottom: 0;
}

.pc { 
    display: block !important; 
}
.sp {
    display: none !important;
}

#price img {
    width: 100%;
}

#price span {
    display: block;
    margin-top: 0.5em;
    font-size: 1em;
    line-height: 1.3em;   
}

#id .wrapper {
    margin-bottom: 0;
}

.wrapper2 {
    width: 1000px;
    margin:0 auto;
    padding-top: 1.5em;
    padding-bottom: 3em;
}

.wrapper2 > span {
    padding-left: 0.8em;
    font-size: 1.5em;
    line-height: 1.7em;
}

#saiyou {
    margin-bottom: 4em;
}

#saiyoutxt {
    display: inline-block;
    width: 60%;
}

#saiyoutxt span {
    display: block;

    margin-bottom: 1.3em;
}

#saiyoutxt > div.noto.bold {
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}

#saiyoutxt > div > a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

#saiyoutxt > div > a:nth-child(1) {
    font-size: 1.2em;
    color: #c91c1c;
}

#saiyoutxt > div > a:nth-child(2) {
    font-size: 1.2em;
    color: #005e37;
}

#saiyoutxt > div > a:nth-child(1)::after {
    position: absolute;
    bottom: 0.2em;
    left: 0;
    content: '';
    width: 100%;
    height: 0.1em;
    background-color: #c91c1c;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

#saiyoutxt > div > a:nth-child(2)::after {
    position: absolute;
    bottom: 0.2em;
    left: 0;
    content: '';
    width: 100%;
    height: 0.1em;
    background-color: #005e37;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

#saiyoutxt > div > a:hover::after {
    bottom: -1em;
    opacity: 1;
    visibility: visible;
}

#saiyouimg {
    box-sizing: border-box;
    display: inline-block;
    width: 35%;
}

#saiyouimg img {
    width: 100%;
}

.content_details {
    margin: 1em 1.3em  2em;
    padding: 1.2em;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
}

.content_details div {
    display: inline-block;
    width: 45%;
}

.content_details div span.black {
    font-size: 1.2em;
    line-height: 2em;
}

.content_details div span:last-child {
   line-height: 1.5em;
}

#requirement {
    display: block;
    padding: 1em 1.2em;
}

#requirement > span {
    font-size: 1.1em;
    line-height: 1.7em;
}

#requirement ol {
    padding: 1em 0.5em 0 1.5em;
}

#requirement li {
    padding-left: 0.5em;
    padding-bottom: 0.5em;
    line-height: 1.2em;
}

#requirement li:last-child {
    padding-bottom: 0;
}

#payment {
    text-align: center;
    margin-bottom: 2em;
}

#payment > span.black {
    font-size: 1.2em;
}

#cards {
    text-align: center;
    width: 100%;
}

#cards ul li {
    display: inline-block;
    margin: 0 0.5em;
    width: auto;
}

#cards ul li img {
    height: 3em;
    width: auto;
}

#contact {
    margin-top: -6em;
    padding-top: 6em;
}
#contact .wrapper {
    padding-top: 0;
}

#contact .wrapper h2 {
    font-size: 1.4em;
    color: #fff;
    padding: 0.5em 1.3em;
    background-color: #eb6d7b;
    margin-bottom: 2em;
    letter-spacing: 0.05em;
}

input::-webkit-input-placeholder {
    font-size: 0.8em;
}

input:-moz-placeholder {
    font-size: 0.8em;
}

::placeholder{
    font-size: 0.8em;
}

table {
    width: 90%;
    margin: 0 auto 2em;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    padding: 1.2em;
    border-bottom: 1px solid #dedede;
}

th {
    width: 30%;
}

.required {
    margin-left: 0.3em;
    padding:0.3em 0.5em;
    color: #fff;
    font-size: 0.7em;
    background-color: #eb6d7b;
    border-radius: 0.5em;
}

input[type="text"], #input_pref, input[type="tel"], input[type="email"], textarea {
    font-size: 1.1em;
    padding: 0.1em;
}

#input_iin_name, #input_name, #input_tel, #input_mail_address {
    width: 100%;
}

#input_pref {
    width: 27%;
}

#naiyou div {
    display: block;
    margin-bottom: 1em;
}

#input_bikou {
    height: 6em;
    width: 100%;
}

.checkbox {
    display: block;
    padding-bottom: 0.5em;
}

#agreement > span, #agreement > label {
    display: inline-block;
    width: 100%;
    text-align: center;
}

#agreement > span {
    padding-bottom: 1em;
}

#agreement > span a {
    color: #0c7dc6;
    text-decoration: none;
}

div #agreement > label .black {
    font-size: 1.1em;
}

#confirm #change_button {
    padding: 0 2.2em;
    text-decoration: none;
    line-height: 3.7em;
    font-size: 1.3em;
    font-weight: 900;
    color: #fff;
    background-color: #CCCCCC;
    border-radius: 0.5em;
    letter-spacing: 0.1em;
    box-shadow: 0em 0.5em 1em rgba(0, 0, 0, 0.4);    
}

#submit_button {
    display: inline-block;
    padding: 0 2.2em;
    text-decoration: none;
    line-height: 3.7em;
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    background-color: #7ecef4;
    border-radius: 0.5em;
    letter-spacing: 0.1em;
    box-shadow: 0em 0.5em 1em rgba(0, 0, 0, 0.4);
}

#servicetel {
    border: dashed 3px;
    text-align: center;
    margin: 0 auto;
    width: 17em;
    padding: 1em 2em;
}

#servicetel .black {
    line-height: 2rem;
    letter-spacing: 0.05em;
}

#servicetel div {
    font-size: 0.9em;
    line-height: 1.5em;
}

footer {
    background-color: #eb6d7b;
    padding : 0.5rem 0;
}

#footer_inner {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quacareer_sml {
    position: relative; 
    width: 7rem;
    height: auto;
    top: 0.2em;
}

#footer_innner > div {
    display: inline-block;
    position: relative;
}

#footer_inner > div a {
    display: inline-block;
    margin-left: 1em;
    text-decoration: none;
    font-size: 0.8em;
    color: #fff;
    vertical-align: middle;
    top: 0.3em;
}

#footer_inner div:last-child {
    margin-left: 1em;
}

#footer_inner div:last-child span {
    font-size: 0.8em;
    color: #fbbfc6;
}

#input_iin_name-error, #input_name-error, #input_pref-error, #input_mail_address-error, #input_tel-error, #input_type-error, #agree-error {
    color: red;
}

#input_iin_name-error, #input_name-error, #input_mail_address-error, #input_tel-error{
    display: inline-block;
    margin-top: 0.4em;
}

#input_type-error {
    display: inline-block;
}

#input_pref-error, #agree-error {
    display: block;
    margin-top: 0.4em;
}

#confirm, #complete {
    margin-top: 5em;
}

#confirm h2, #complete h2 {
    margin-top: 2vh;
    margin-bottom: 4vh;
    text-align: center;
    font-size: 1.6rem;
}

#confirm #submit {
    margin: 2em auto;
    display: flex;
}

#confirm #submit div.box1, #confirm #submit div.box3 {
    display: flex;
    width: 30%;
}

#confirm #submit div.box2 {
    display: flex;
    justify-content: center;
    width: 40%;
}

#confirm  #submit div.box1 #change_button:hover {
    background-color: #DCDCDC;
}

#complete .message {
    width: 60%;
    margin: 0 auto 2em;
} 

#complete .message p {
    line-height: 1.5em;
    padding-bottom: 1em;
    text-align: center;
}

#complete #top_link {
    margin: 0 auto 1em;
    text-align: center;
}

#complete #top_link a {
    font-size: 1rem;
    text-decoration: none;
    color: #000000;
}

#complete #top_link a:hover {
    color: rgba(128, 128, 128, 0.5);
}

@media screen and (max-width: 1000px){
    html,body{
        font-size: 4vw;
    }

    .header_inner, #logo, #sub_catch, section .wrapper, .wrapper2, #footer_inner {
        width: 94%;
    }

    .banner {
        width: 90%;
    }

    .index header {
        padding : 0.5rem 0;
        position: fixed;
    }

    p.header_inner {
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .header_inner > div {
        width: 50%;
    }

    .header_inner > div a>img {
        bottom: 0;
        margin-left: 0;
    }

    .header_inner > div >p {
        letter-spacing: 0;
    }

    .header-text {
        display: none;
    }

    #logo {
        padding-bottom: 1em;
    }
    
    .quacareer_logo {
        width: 80%;
        height: auto;
        text-align: center;
    }    

    a.button {
        display: inline-block;
        padding: 4vw 2.5vw;
        border-radius: 0.5em;
        font-size: 3.5vw;
    }

    #eye_catch .title #logo>p {
        visibility: visible;
        text-align: center;
        font-size: 1.2rem;
    }

    #logo img {
        width: 100%;
    }

    #sub_catch {
        flex-wrap: wrap;
    }

    .leftbox {
        margin: 0 0 4vw;
    }

    .leftbox div {
        display: flex;
        justify-content: space-between;
    }

    #right_top {
        font-size: 4.5vw;
    }

    #sub_bottom {
        font-size: 7vw;
        margin: 0 auto;
        display: block;
        text-align: center;
    }

    #three_merit {
        padding-top: 2em;
        font-size: 1.6em;
    }

    .banner ul {
        width: 90%;
        display: block;
        flex-wrap: wrap;
    }

    .banner ul li {
        width: 100%;
        margin-bottom: 2em;
    }

    #four_points h2 {
        display: block;
    }

    #four_points h2 .leftbox {
        display: flex;
        margin: 0 auto;
        justify-content: center;
    }

    #four_points h2 .leftbox span:last-child {
        font-size: 1.2em;
    }
    
    #four_points h2 .rightbox2 {
        margin: 0 auto;
        justify-content: center;
    }

    #four_points div h3 {
        width: 100vw;
        box-sizing: border-box;
        position: relative;
        left: -3vw;
        font-size: 1.5em;
    }

    .box {
        flex-wrap: wrap;
    }

    .box > div > span {
        font-size: 1em;
        line-height: 1.3em;
    }

    #point1img {
        width: 100%;
        margin-bottom: 1em;
    }

    #point1txt {
        margin-left: 0;
        width: 100%;
    }

    #point1txt > div {
        flex-wrap: wrap;
    }
    
    #point1txt div .details:first-child {
        margin-bottom: 2vw;
    }

    .details > h4, .details > ul > li {
        line-height: 1.5em;
    }

    #four_points .box2 {
        flex-direction: column-reverse;
    }

    #four_points .box2 #point2img {
        width: 100%;
        margin-bottom: 1em;
    }

    #four_points .box2 #point2txt {
        width: 100%;
    }

    #four_points .box3 #point3img {
        width: 100%;
        margin-bottom: 1em;
    }

    #four_points .box3 #point3 {
        width: 100%;
    }

    #four_points .box4 #point4 {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5em;
    }

    #four_points .box4 #point4img {
        width: 100%;
    }

    #four_points .box4 #point4img > div#point4-large {
        width: 90%;
        margin: 0 auto;
    }

    .center_img{
        width: 90%;
        margin-bottom: 1em;
    }

    .basic_content {
        flex-wrap: wrap;
        margin-bottom: 1em;
    }

    .contents4 {
        width: 100%;
    }


    .contents4 div.left {
        display: flex;
        margin: 2vw auto 6vw;
        font-size: 1.1em;
        justify-content: center;
    }

    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }

    #saiyou {
        width: 100%;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        margin-bottom: 2.5em;
    }

    .wrapper2 > span {
        padding-left: 0;
    }

    #saiyoutxt {
        width: 100%;
    }

    #saiyouimg {
        width: 100%;
        margin-top: 3vw;
    }

    #saiyoutxt > div.noto.bold {
        display: block;
        text-align: right;
    }

    #saiyoutxt > div.noto.bold a:last-child {
        margin-top: 5vw;
    }

    #saiyoutxt > div > a:nth-child(1)::after {
        bottom: 0;
    }
    
    #saiyoutxt > div > a:nth-child(2)::after {
        bottom: 0;
    }
    
    #saiyoutxt > div > a:hover::after {
        bottom: 0;
        opacity: 0;
    }

    #basic_banner {
        margin-top: -2.5em;
        padding-top: 2.5em;
    }

    .content_box > h3 {
        font-size: 1.4em;
    }

    .contents4 > div.left span {
        text-align: center;
    }

    .contents4 .heading .black {
        font-size: 1.2em;
    }

    .content_box .content_details, .content_box #requirement {
        flex-wrap: wrap;
        margin-bottom: 10vw;
    }

    .content_box .content_details div {
        width: 90%;
    }

    .content_box .content_details div:first-child {
        margin-bottom: 2vw;
    }

    .content_details {
        margin: 0 auto;
        padding: 0;
    }

    .content_details div span.black {
        font-size: 1em;
        line-height: 2em;
    }
    
    .content_details div span:last-child {
       line-height: 1.5em;
    }
    
    #requirement {
        padding: 3vw;
    }

    #requirement span {
        font-size: 1em;
        line-height: 1.3em;
    }

    #payment span {
        line-height: 1.3em;
    }

    #payment > span.black {
        font-size: 1em;
    }

    #contact .wrapper h2 {
        width: 100vw;
        box-sizing: border-box;
        position: relative;
        left: -3vw;
    }

    table {
        width: 100%;
    }

    tbody, tr, td, th {
        display: block;
        box-sizing: border-box;
        width: 100%;
    }

    input[type="text"], input[type="tel"], input[type="email"], textarea {
        box-sizing: border-box;
    }

    #input_iin_name, #input_name, #input_tel, #input_mail_address, #input_bikou {
        display: block;
        width: 100%;
        font-size: 16px;
    }

    #input_pref {
        width: 100%;
        font-size: 16px;
    }

    #naiyou label  {
        flex-wrap: wrap;
        display: block;
        padding-bottom: 2vw;
    }

    div #agreement > span {
        line-height: 1.3em;
    }

    div #agreement > label .black {
        font-size: 4vw;
    }

    #submit.centerbox {
        margin-bottom: 3em;
    }

    #servicetel div span.smp_inline >a {
        color: #0c7dc6;
        text-decoration: none;
    }

    #footer_inner {
        flex-wrap: wrap;
        display: block;
    }

    #footer_inner div:first-child {
        text-align: center;
        margin-bottom: 1.3vh;
    }

    #footer_inner div:first-child a {
        display: inline-block;
        margin-bottom: 1vh;        
    }

    #footer_inner div:last-child {
        text-align: center;
        margin-left: 0;
    }

    .quacareer_sml {
        width: 40%;
    }

    .confirm header, .complete header {
        position: static;
    }

    #confirm, #complete {
        margin-top: 0;
    }

    #confirm td {
        border-bottom-color: #fbbfc6;
    }

    #confirm #submit {
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }

    #confirm #submit div.box1 {
        width: 100%;
        margin: 0 auto;
        font-size: 1.1rem;
    }

    #confirm #submit div.box1 #change_button, #confirm #submit div.box2 #submit_button {
        width: 100%;        
        text-align: center;
    }

    #confirm #submit div.box2 {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 4vh;
    }

    #confirm #submit div.box3 {
        display: none;
    }

    #complete .message {
        width: 90%;
        margin-bottom: 2em;
    }

    #complete .message p {
        text-align: left;
    }
}