@charset "UTF-8";

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	letter-spacing: 0.06em;
	-webkit-text-size-adjust: 100%;
}
html {
	font-size: 20px;
}
body {
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
    line-height: 1.5;
}
header, footer, nav, menu, article, aside, section, details, figcaption, figure{
	display: block;
}
ul {
	list-style: none;
}
ol {
	margin-left: 2em;
}
table {
	border-collapse: collapse;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a:link, a:visited {
	color: black;
}
a img {
	border: none;
}
strong {
	font-weight: bold;
}
i {
	font-style: normal;
}
.visible-phone{
    display: inherit;
}
.hidden-phone{
    display: none;
}
@media screen and (min-width: 751px) {
    .visible-phone{
        display: none;
    }
    .hidden-phone{
        display: inherit;
    }
}


header{
    background-color: #df5129;
}
header .logo{
    display: inline-block;
    vertical-align: middle;
}
@media screen and (max-width: 750px) {
    header{
        padding: 0.5rem;
    }
    header .buttons{
        display: inline-block;
        vertical-align: middle;
    }
    header .logo{
        width: 38.933333vw; /* 292/750*/
        margin-right: 6vw;
    }
    header .buttons{
        width: 50.8vw; /* 381/750*/
    }
    header .buttons .tel{
        width: 18.533333vw; /* 139/750*/
    }
    header .buttons .contact{
        width: 31.066666vw; /* 233/750*/
    }
}
@media screen and (min-width: 751px) {
    header{
        padding: 1.5rem 0;
        text-align: center;
        position: relative;
    }
    header .logo{
        width: 200px;
    }
    header .text{
        position: absolute;
        right: 4.0rem;
        top: calc(50% - 0.75em);
        font-size: 13px;
    }
}

main #mv{
    max-width: 1293px;
    width: 100%;
    margin: 0 auto 4.0rem;
}

main section h2{
    font-weight: bold;
    font-size: 4.853333vw;
    color: #000000;
    text-align: center;
}
main section h2::before,
main section h2::after{
    content: '';
    width: 0.8em;
    height: 0.8em;
    background-image: url('./image/recruit/ico-plus.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin: 0 1.5em;
}
main section p.sub-title{
    color: #df5129;
    font-size: 2.613333vw;
    text-align: center;
    margin-bottom: 3.0rem;
    font-weight: bold;
}
@media screen and (min-width: 751px) {
    main section h2{
        font-size: 26px;
    }
    main section p.sub-title{
        font-size: 14px;
    }
}

main section#concept .lead{
    max-width: 977px;
    margin: 0 auto 3.0rem;
    text-align: center;
}
main section#concept .lead h3{
    color: #734400;
    font-size: 5.066666vw;
    font-weight: normal;
    margin: 1.5rem 0;
}
main section#concept .lead h3::first-line{
    font-size: 6.666666vw;
}
main section#concept .lead p{
    font-size: 3.733333vw;
    line-height: 2.1;
}
@media screen and (min-width: 751px) {
    main section#concept .lead{
        margin-bottom: 5.0rem;
    }
    main section#concept .lead h3{
        margin: 2.0rem 0 3.0rem;
        font-size: 28px;
    }
    main section#concept .lead h3::first-line{
        font-size: 34px;
    }
    main section#concept .lead p{
        font-size: 16px;
    }
}
main section#concept ul.concept{
    width: 84.533333%; /* 634/750 */
    margin: 0 auto 4.0rem;
}
main section#concept ul.concept li{
    margin-bottom: 3.0rem;
    font-size: 3.2vw;
}
main section#concept ul.concept li h3{
    color: #734400;
    font-size: 5.6vw;
    margin: 1.0rem 0;
}
@media screen and (min-width: 751px) {
    main section#concept ul.concept{
        margin-bottom: 5.0rem;
    }
    main section#concept ul.concept li{
        display: flex;
        margin-bottom: 5.0rem;
        font-size: 14px;
    }
    main section#concept ul.concept li figure{
        width: 50%;
    }
    main section#concept ul.concept li .text{
        width: 50%;
        padding: 1.0rem;
    }
    main section#concept ul.concept li h3{
        font-size: 28px;
    }
    main section#concept ul.concept li:nth-of-type(2n+1) figure{
        order: 1;
    }
    main section#concept ul.concept li:nth-of-type(2n) .text{
        padding-left: 4.0rem;
    }
}
main section#concept .point{
    margin-bottom: 3.0rem;
}
main section#concept .point h3{
    color: #734400;
    font-size: 6.8vw;
    font-weight: normal;
    margin: 0 0 1.5rem;
    text-align: center;
}
main section#concept .point ol{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1069px;
    margin: 0 auto;
}
main section#concept .point ol li{
    border: 1px solid #df5129;
    background-color: #fef5f3;
    width: 35.333333vw; /* 265/750 */
    height: 35.333333vw; /* 265/750 */
    margin: 0 0.4rem 1.0em;
    padding: 0.5rem;
    text-align: center;
    font-size: 4.16vw;
    font-weight: bold;
}
main section#concept .point ol li .number{
    display: block;
    font-size: 7.973333vw;
    color: #df5129;
    font-weight: bold;
    text-align: left;
    line-height: 1.0;
}
@media screen and (min-width: 751px) {
    main section#concept .point{
        margin-bottom: 5.0rem;
    }
    main section#concept .point h3{
        margin-bottom: 2.0rem;
        font-size: 34px;
    }
    main section#concept .point ol{
        justify-content: space-between;
    }
    main section#concept .point ol li{
        width: 204px;
        height: 204px;
        margin: 0 0 0.7rem;
        font-size: 24px;
    }
    main section#concept .point ol li .number{
        font-size: 46px;
    }
}
main section.cta{
    width: 100%;
    background-image: url('./image/recruit/bg-cta.png');
    background-repeat: repeat;
    text-align: center;
    color: #ffffff;
    padding: 2.0rem 0;
    margin-bottom: 4.0rem;
}
main section.cta h3{
    font-size: 5.6vw;
}
main section.cta p{
    font-size: 2.8vw;
    font-weight: bold;
}
main section.cta .buttons{
    margin-top: 1.5rem;
}
main section.cta .buttons a{
    display: inline-block;
    width: 75%;
    margin: 0 auto 1.0em;
    padding: 0.75em 0;
    line-height: 1.0;
    border-radius: 1.25em;
    border: 1px solid #ffffff;
    background-color: #df5129;
    color: #ffffff;
    text-decoration: none;
    font-size: 3.1vw;
}
main section.cta .buttons a:first-of-type{
    background-color: #ffffff;
    color: #df5129;
}
@media screen and (min-width: 751px) {
    main section.cta{
        margin-bottom: 5.0rem;
    }
    main section.cta h3{
        font-size: 26px;
    }
    main section.cta p{
        font-size: 14px;
    }
    main section.cta .buttons a{
        font-size: 16px;
        width: 20.0em;
        margin: 0 1.5em;
    }
}
main section#creative{
    margin-bottom: 3.0rem;
}
main section#creative ol{
    margin: 0;
    list-style: none;
}
main section#creative li{
    width: 100%;
    margin-bottom: 3.0rem;
}
main section#creative li .content > *:not(.full-width){
    width: 90%;
    margin: 0 auto;
}
main section#creative li h3{
    width: 90%;
    margin: 0 auto 1.0rem; 
    font-size: 4.666666vw;
}
main section#creative li h3 .number{
    display: block;
    color: #df5129;
    font-size: 17.866666vw;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: normal;
    text-align: center;
    display: block;
    line-height: 1.0;
}
main section#creative li .content .full-width{
    width: 100%;
    margin: 0 auto 1.0rem;
    text-align: center;
}
main section#creative li .content{
    font-size: 3.2vw;
}
main section#creative li .content .flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
main section#creative li .content .flex > *{
    margin-bottom: 1.5rem;
    width: 100%;
}
main section#creative li:nth-of-type(3) .flex figure{
    width: 49%;
}
@media screen and (min-width: 751px) {
    main section#creative{
        margin-bottom: 5.0rem;
    }
    main section#creative li{
        margin-bottom: 5.0rem;
    }
    main section#creative li h3{
        font-size: 26px;
        width: 650px;
        margin-bottom: 2.5rem;
    }
    main section#creative li h3 .number{
        font-size: 106px;
        display: inline-block;
    }
    main section#creative li h3 .title{
        display: inline-block;
    }
    main section#creative li .content{
        font-size: 16px;
    }
    main section#creative li .content > *:not(.full-width){
        width: 96%;
        max-width: 1040px;
    }
    main section#creative li .content .full-width img.hidden-phone{
        display: block;
        margin: 0 auto;
    }
    main section#creative li:nth-of-type(2) .content .flex .text{
        width: 48%;
    }
    main section#creative li:nth-of-type(2) .content .flex figure{
        width: 48%;
    }
    main section#creative li:nth-of-type(3) .content .flex .text{
        width: 36%;
    }
    main section#creative li:nth-of-type(3) .content .flex figure{
        width: 30%;
    }
}

main section#welfare{
    margin-bottom: 3.0rem;
}
main section#welfare > h3{
    color: #734400;
    font-size: 6.8vw;
    font-weight: normal;
    margin: 0 0 2.0rem;
    text-align: center;
} 
main section#welfare ul li{
    width: 90%;
    margin: 0 auto 2.0rem;
    font-size: 3.2vw;
}
main section#welfare ul li h3{
    font-size: 4.066666vw;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #967e19;
    margin-bottom: 1.0rem;
}
main section#welfare ul li .content p{
    margin-bottom: 1.5rem;
}
@media screen and (min-width: 751px) {
    main section#welfare{
        margin-bottom: 5.0rem;
    }
    main section#welfare > h3{
        font-size: 34px;
        margin-bottom: 4.5rem;
    }
    main section#welfare ul li{
        margin-bottom: 4.0rem;
        font-size: 16px;
        max-width: 770px;
    }
    main section#welfare ul li h3{
        font-size: 26px;
    }
    main section#welfare ul li .content{
        display: flex;
        justify-content: space-between;
    }
    main section#welfare ul li .content p{
        width: 45%;
    }
    main section#welfare ul li .content figure{
        width: 45%;
        margin-right: 2%;
    }
}
main section#education{
    margin-bottom: 3.0rem;
}

main section#education .content{
    font-size: 3.733333vw;
    width: 90%;
    margin: 0 auto;
}
main section#education .content h3{
    color: #734400;
    font-size: 6.8vw;
    font-weight: normal;
    margin: 4.0rem 0 2.0rem;
    text-align: center;
    letter-spacing: 0;
} 
main section#education .content p,
main section#education .content .text,
main section#education .content figure,
main section#education .content .flex{
    margin-bottom: 1.5rem;
}
@media screen and (min-width: 751px) {
    main section#education{
        margin-bottom: 5.0rem;
    }
    main section#education .content{
        width: 96%;
        max-width: 892px;
        font-size: 16px;
    }
    main section#education .content h3{
        font-size: 34px;
    }
    main section#education .content .flex{
        display: flex;
        justify-content: space-between;
    }
    main section#education .content .flex .text{
        width: 48%;
    }
    main section#education .content .flex figure{
        width: 45%;
    }
}

main section#message{
    width: 100%;
    padding: 3.0rem 0;
    margin-bottom: 3.0rem;
    background-color: #f8f8f8;
}
main section#message ul li{
    width: 92%;
    margin: 0 auto 2.0rem;
    border: 1px solid #e6e6e6;
    background-color: #ffffff;
    padding: 3.0rem 2.0rem;
    font-size: 3.2vw;
}
main section#message ul li:last-of-type{
    margin-bottom: 0;
}
main section#message ul li figure{
    width: 80%;
    margin: 0 auto 3.0rem;
}
main section#message ul li figure figcaption{
    font-size: 150%;
    margin-top: 1.0rem;
}
main section#message ul li .content h3{
    color: #734400;
    font-size: 6.133333vw;
    font-weight: normal;
    margin-bottom: 1.0rem;
}
main section#message ul li .content p:not(:last-child){
    margin-bottom: 1.0rem;
}
@media screen and (min-width: 751px) {
    main section#message{
        padding: 5.0rem 0;
        margin-bottom: 5.0rem;
    }
    main section#message ul li{
        max-width: 950px;
        margin-bottom: 3.0rem;
        padding: 2.0rem 3.0rem;
        font-size: 14px;
        display: flex;
    }
    main section#message ul li figure{
        width: 30%;
        margin-bottom: 0;
        margin-right: 5%;
    }
    main section#message ul li .content{
        width: 65%;
    }
    main section#message ul li .content h3{
        font-size: 26px;
    }
}
main #requirement{
    margin-bottom: 3.0rem;
}
main #requirement ul{
    width: 100%;
    border-top: 1px solid #cccccc;
}
main #requirement ul li{
    padding: 1.0rem 0;
    border-bottom: 1px solid #cccccc;
    font-size: 3.2vw;
}
main #requirement ul li dl{
    display: flex;
    padding: 0 2.0rem
}
main #requirement ul li dt{
    width: 7.5em;
}
main #requirement ul li dd{
    width: calc( 100% - 8.0em );
}
main #requirement ul li dd h4{
    background-color: #f0f0f0;
    padding: 0.25em 0;
    margin-bottom: 0.5rem;
}
main #requirement ul li dd p:not(:last-of-type){
    margin-bottom: 0.5rem;
}
@media screen and (min-width: 751px) {
    main #requirement{
        margin-bottom: 5.0rem;
    }
    main #requirement ul{
        max-width: 860px;
        margin: 0 auto;
    }
    main #requirement ul li{
        font-size: 16px;
    }
}

main #contact{
    width: 100%;
    padding: 3.0rem 0;
    background-color: #f8f8f8;
}
main #contact h2{
    color: #734400;
    font-size: 6.8vw;
    font-weight: normal;
    margin-bottom: 3.0rem;
    text-align: center;
}
main #contact h2 + p{
    text-align: center;
    margin-bottom: 3.0rem;
}
main #contact .form{
    width: 86.666666%;
    margin: 0 auto;
    font-size: 3.6vw;
}
main #contact .form input[type="text"],
main #contact .form input[type="email"],
main #contact .form input[type="number"],
main #contact .form textarea{
    font-size: 3.2vw;
    width: 100%;
    max-width: 100%;
    padding: 0.2em 0.1em;
    border: 1px solid #cccccc;
}
main #contact .form .required{
    display: inline-block;
    font-size: 80%;
    line-height: 1.0;
    background-color: #ff0000;
    color: #ffffff;
    padding: 0.5em 0.25em;
    margin-left: 1.0em;
    border-radius: 0.25em;
}
main #contact .form dt{
    margin-bottom: 1.0rem;
}
main #contact .form dd{
    display: flex;
    margin-bottom: 1.0rem;
}
main #contact .form dd div.half{
    width: 47%;
    margin-right: 3%;
}
main #contact .form dd .mwform-radio-field{
    margin-right: 1.0rem;
}
main #contact .form dd .mwform-tel-field{
    width: 100%;
}
main #contact .form dd .mwform-tel-field input{
    width: 6.0em;
}
main #contact .form button{
    display: block;
    margin: 3.0rem auto 0;
    padding: 0.75em 0;
    width: 9.0em;
    font-size: 110%;
    line-height: 1.0;
    background-color: #562b00;
    color: #ffffff;
    text-align: center;
    border-radius: 1.25em;
}
@media screen and (min-width: 751px) {
    main #contact{
        padding: 5.0rem 0;
    }
    main #contact h2{
        font-size: 34px;
    }
    main #contact .form{
        max-width: 830px;
        font-size: 18px;
    }
    main #contact .form input[type="text"],
    main #contact .form input[type="email"],
    main #contact .form input[type="number"],
    main #contact .form textarea{
        font-size: 14px;
    }
    main #contact .form dt{
        clear: both;
        float: left;
        width: 12.0em;
        text-align: right;
        position: relative;
        margin-right: 5.0em;
        margin-bottom: 0;
    }
    main #contact .form .required{
        position: absolute;
        left: 100%;
        width: 3.0em;
        text-align: center;
    }
    main #contact .form dd{
        /* padding-left: 4.0em; */
        width: calc(100% - 17em);
        margin-bottom: 1.5rem;
    }
    main #contact .form dd::after{
        content: '';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}
footer{
    padding: 4.0rem;
    text-align: center;
    font-size: 3.2vw;
}
@media screen and (min-width: 751px) {
    footer{
        font-size: 13px;
    }
}