@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* 共通 */
/*---------------------------------------*/
.areaInner{
width:90%;
max-width:980px;
margin:0 auto;
position:relative;
z-index:10;
}
.areaBase{
margin:0 auto 100px;
overflow:hidden;
}
@media screen and (max-width:767px){
.areaBase{
margin:0 auto 50px;
}
}
/*---------------------------------------*/
/* pageTtl */
/*---------------------------------------*/
.pageTtl{
text-align: center;
margin-bottom: 70px;
color: #fff;
position: absolute;
top: 50%;
left: 0;
width: 100%;
z-index: 2;
}
@media screen and (max-width:767px){
.pageTtl{
margin-bottom: 30px;
}
}
.pageTtl .ttl{
font-size: 357%;
line-height: 1;
margin-top: -0.5em;
margin-bottom: 12px;
}
@media screen and (max-width:767px){
.pageTtl .ttl{
font-size: 25pt;
margin-bottom: 0;
}
}
@media screen and (max-width:980px){
.pageTtl.line02 .ttl{
margin-top: -1em;
}
}
@media screen and (max-width:374px){
.pageTtl.line02 .ttl{
font-size: 24pt;
}
}
.pageTtl .jp{
font-weight: bold;
}
/*---------------------------------------*/
/* areaTtl */
/*---------------------------------------*/
.areaTtl{
text-align: center;
margin-bottom: 65px;
}
@media screen and (max-width:767px){
.areaTtl{
margin-bottom: 30px;
}
}
.areaTtl .ttl{
color: #4367a6;
font-size: 357%;
line-height: 1;
}
@media screen and (max-width:767px){
.areaTtl .ttl{
font-size: 25pt;
}
}
.areaTtl .jp{
color: #000;
}
/*---------------------------------------*/
/* viewBtn */
/*---------------------------------------*/
.viewBtn{
font-size: 93%;
letter-spacing: 0.01em;
line-height: 1;
}
@media screen and (max-width:767px){
.viewBtn{
font-size: 8pt;
}
}
.viewBtn a{
display: inline-block;
padding: 10px 0;
position: relative;
}
.viewBtn .arrow{
position: absolute;
width: 40px;
height: 1px;
bottom: 14px;
left: 0;
background: #000;
transition: all 0.3s ease;
}
.viewBtn a:hover .arrow{
width: 45px;
background: #4367a6;
}
.viewBtn .arrow:after{
content: "";
display: block;
width: 12px;
height: 1px;
background: #000;
position: absolute;
top: 0;
right: 0;
transform: rotate(30deg);
transform-origin: right;
transition: all 0.3s ease;
}
.viewBtn a:hover .arrow:after{
background: #4367a6;
}
.viewBtn .txt{
padding-left: 55px;
}
/*---------------------------------------*/
/* keyVisual */
/*---------------------------------------*/
.keyVisual{
position: relative;
height: 500px;
margin-bottom: 80px;
}
@media screen and (max-width:980px){
.keyVisual{
height: 400px;
}
}
@media screen and (max-width:767px){
.keyVisual{
height: 250px;
margin-bottom: 30px;
}
}
@media screen and (max-width:500px){
.keyVisual{
height: 180px;
}
}
.keyVisual:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(rgba(0,0,0,0.4) 0, rgba(0,0,0,0.4) 1px, rgba(0,0,0,0.2) 1px, rgba(0,0,0,0.2) 2px);
z-index: 1;
}
/* company */
#company .keyVisual{
background: url(../images/page/key-company.jpg) no-repeat right center;
background-size: cover;
}
/* business */
#business .keyVisual{
background: url(../images/page/key-business.jpg) no-repeat right center;
background-size: cover;
}
@media screen and (max-width:980px){
#business .keyVisual{
background-position: right 10% center;
}
}
@media screen and (max-width:767px){
#business .keyVisual{
background-position: left 85% center;
}
}
/* service */
#service .keyVisual{
background: url(../images/page/key-service.jpg) no-repeat center center;
background-size: cover;
}
/* recruit */
#recruit .keyVisual{
background: url(../images/page/key-recruit.jpg) no-repeat center center;
background-size: cover;
}
/* news */
#news .keyVisual{
background: url(../images/page/key-news.jpg) no-repeat center center;
background-size: cover;
}
/* contact */
#contact .keyVisual{
background: url(../images/page/key-contact.jpg) no-repeat right center;
background-size: cover;
}
@media screen and (max-width:980px){
#contact .keyVisual{
background-position: right 10% center;
}
}
@media screen and (max-width:767px){
#contact .keyVisual{
background-position: left 85% center;
}
}
/* privacy */
#privacy .keyVisual{
background: url(../images/page/key-privacy.jpg) no-repeat center center;
background-size: cover;
}
/* transactions */
#transactions .keyVisual{
background: url(../images/page/key-transactions.jpg) no-repeat center center;
background-size: cover;
}
/* magazine */
#magazine .keyVisual{
background: url(../images/page/key-magazine.jpg) no-repeat center center;
background-size: cover;
}
/*---------------------------------------*/
/* pageNote */
/*---------------------------------------*/
.pageNote{
font-size: 114.5%;
line-height: 2.6;
text-align: center;
margin-bottom: 100px;
}
@media screen and (max-width:767px){
.pageNote{
margin-bottom: 50px;
line-height: 2;
font-size: 9pt;
}
}
/*---------------------------------------*/
/* breadcrumbs */
/*---------------------------------------*/
.breadcrumbs {
width:100%;
line-height:1;
border-bottom:1px solid #e6e6e6;
border-top:1px solid #e6e6e6;
font-size:85.5%;
padding: 7px 0;
margin-bottom: 65px;
}
@media screen and (max-width:767px){
.breadcrumbs {
font-size:7pt;
padding: 5px 0;
margin-bottom: 35px;
}
}
@media all and (-ms-high-contrast:none) {
.breadcrumbs {
padding: 8px 0 6px;
}
}
.breadcrumbs ol{
width:90%;
margin:0 auto;
max-width:980px;
}
.breadcrumbs li{
display:inline;
list-style:none;
vertical-align:middle;
}
.breadcrumbs li .arrow{
color:#929292;
padding: 0 10px;
font-size: 91.5%;
position: relative;
top: -1px;
}
@media all and (-ms-high-contrast:none) {
.breadcrumbs li .arrow{
top: -2px;
}
}
/*---------------------------------------*/
/* company */
/*---------------------------------------*/
#company .philosophyArea{
background: linear-gradient(to bottom, #f7f7f7 20%, #fff 20%, #fff 88%, #f7f7f7 88%, #f7f7f7);
padding: 110px 0 95px;
position: relative;
}
@media screen and (max-width:767px){
#company .philosophyArea{
padding: 80px 0 50px;
}
}
#company .philosophyArea .areaTtl{
position: absolute;
top: -1.8em;
left: 0;
width: 100%;
}
@media screen and (max-width:767px){
#company .philosophyArea .areaTtl{
top: -1.4em;
}
}
#company .philosophy{
text-align: center;
margin-bottom: 40px;
}
@media screen and (max-width:767px){
#company .philosophy{
margin-bottom: 30px;
}
}
#company .philosophy .ttl{
font-size: 143%;
margin-bottom: 40px;
color: #000;
}
@media screen and (max-width:767px){
#company .philosophy .ttl{
font-size: 13pt;
margin-bottom: 20px;
}
}
#company .philosophy .note{
line-height: 1.7;
color: #000;
}
#company .jippo{
box-shadow: 20px 20px 30px rgba(0,0,0,0.2);
padding: 80px 0 70px;
background: #fff;
}
@media screen and (max-width:767px){
#company .jippo{
box-shadow: 7px 7px 10px rgba(0,0,0,0.2);
padding: 50px 0;
width: 95%;
}
}
#company .jippo .inner{
padding: 0 5%;
}
#company .jippoContent{
margin-bottom: 80px;
text-align: center;
}
@media screen and (max-width:767px){
#company .jippoContent{
margin-bottom: 30px;
}
}
#company .jippoContent:last-child{
margin-bottom: 0;
}
#company .jippoContent .jippoTtl{
font-size: 143%;
margin-bottom: 40px;
font-weight: bold;
color: #000;
}
@media screen and (max-width:767px){
#company .jippoContent .jippoTtl{
font-size: 13pt;
margin-bottom: 20px;
}
}
#company .jippoContent .note{
line-height: 1.7;
margin: 0 auto 25px;
max-width: 600px;
}
@media screen and (max-width:767px){
#company .jippoContent .note{
margin-bottom: 10px;
}
}
#company .jippoContent .note.txtLeft{
text-align: center;
}
@media screen and (max-width:767px){
#company .jippoContent .note.txtLeft{
text-align: left;
}
}
#company .jippoContent .jippoList{
margin-bottom: 25px;
line-height: 1.7;
}
@media screen and (max-width:767px){
#company .jippoContent .jippoList{
margin-bottom: 15px;
text-align: left;
line-height: 1.5;
}
}
#company .jippoContent .jippoList li{
margin-left: 1em;
}
@media screen and (max-width:767px){
#company .jippoContent .jippoList li{
margin-bottom: 5px;
}
}
#company .jippoContent .jippoList li .dot{
display: inline-block;
margin-left: -1em;
width: 1em;
text-align: center;
}
#company .jippoContent .partTtl{
margin-bottom: 25px;
color: #000;
}
@media screen and (max-width:767px){
#company .jippoContent .partTtl{
margin-bottom: 10px;
}
}
#company .jippoContent .partTtl .en{
font-size: 235.5%;
}
@media screen and (max-width:767px){
#company .jippoContent .partTtl .en{
font-size: 16pt;
}
}
#company .jippoContent .partTtl .jp{
font-size: 200%;
font-weight: bold;
}
@media screen and (max-width:767px){
#company .jippoContent .partTtl .jp{
font-size: 14pt;
}
}
#company .jippoContent .subTtl{
font-size: 171.5%;
color: #000;
}
@media screen and (max-width:767px){
#company .jippoContent .subTtl{
font-size: 12pt;
}
}
#company .management{
max-width: 560px;
margin: 0 auto 110px;
padding: 20px 0;
}
@media screen and (max-width:767px){
#company .management{
margin: 0 auto 30px;
padding: 10px 0;
}
}
#company .imgTtl{
font-size: 85.5%;
line-height: 1;
padding: 6px 10px;
background: #e1e1e1;
display: inline-block;
color: #000;
}
@media screen and (max-width:767px){
#company .imgTtl{
font-size: 8pt;
}
}
@media all and (-ms-high-contrast:none) {
#company .imgTtl{
padding: 8px 10px 4px;
}
}
#company .management .imgTtl{
margin-bottom: 30px;
}
@media screen and (max-width:767px){
#company .management .imgTtl{
margin-bottom: 15px;
}
}
#company .management .img img{
width: 100%;
height: auto;
}
#company .tokuImg{
max-width: 325px;
margin: 0 auto;
padding: 35px 0 45px;
}
@media screen and (max-width:767px){
#company .tokuImg{
padding: 20px 30px;
}
}
#company .tokuImg img{
width: 100%;
height: auto;
}
#company .jippoContent .imgTtl{
margin-bottom: 80px;
}
@media screen and (max-width:767px){
#company .jippoContent .imgTtl{
margin-bottom: 30px;
}
}
#company .toku{
max-width: 780px;
margin: 0 auto 40px;
text-align: left;
}
#company .toku .blockLeft,
#company .toku .blockRight{
width: 50%;
}
@media screen and (max-width:980px){
#company .toku .blockLeft,
#company .toku .blockRight{
width: 100%;
float: none;
margin: 0 auto;
max-width: 540px;
}
}
@media screen and (max-width:767px){
#company .toku .blockLeft,
#company .toku .blockRight{
max-width: 390px;
}
}
#company .toku .tokuBox{
margin-bottom: 25px;
position: relative;
}
@media screen and (max-width:767px){
#company .toku .tokuBox{
margin-bottom: 20px;
}
}
@media screen and (max-width:980px){
#company .toku .tokuBox .ttl{
position: absolute;
top: 0;
left: 0;
width: 140px;
text-align: center;
}
}
@media screen and (max-width:767px){
#company .toku .tokuBox .ttl{
position: static;
text-align: left;
}
}
#company .toku .tokuBox .ttl .bold{
font-size: 114.5%;
font-weight: bold;
}
@media screen and (max-width:767px){
#company .toku .tokuBox .ttl .bold{
font-size: 11pt;
}
}
#company .toku .tokuBox .txt{
font-size: 85.5%;
line-height: 1.7;
margin-bottom: 5px;
}
@media screen and (max-width:980px){
#company .toku .tokuBox .txt{
margin-left: 140px;
}
}
@media screen and (max-width:767px){
#company .toku .tokuBox .txt{
font-size: 9pt;
margin-left: 0;
}
}
#company .toku .tokuBox .tokuList{
font-size: 85.5%;
line-height: 1.7;
}
@media screen and (max-width:980px){
#company .toku .tokuBox .tokuList{
margin-left: 140px;
}
}
@media screen and (max-width:767px){
#company .toku .tokuBox .tokuList{
font-size: 9pt;
line-height: 1.5;
margin-left: 0;
}
}
#company .toku .tokuBox .tokuList li{
margin-bottom: 5px;
margin-left: 1em;
}
#company .toku .tokuBox .tokuList li .dot{
display: inline-block;
margin-left: -1em;
width: 1em;
text-align: center;
}
#company .bottomTxt{
font-size: 114.5%;
font-weight: bold;
}
#company .messageArea{
padding: 140px 0 0;
margin:0 auto 140px;
}
@media screen and (max-width:980px){
#company .messageArea{
margin:0 auto 90px;
}
}
@media screen and (max-width:767px){
#company .messageArea{
padding: 50px 0 0;
margin:0 auto 50px;
}
}
#company .messageArea .topContent{
position: relative;
max-width: 1268px;
margin: 0 auto 75px;
}
@media screen and (max-width:767px){
#company .messageArea .topContent{
margin: 0 auto 50px;
}
}
#company .messageArea .topContent .img{
position: absolute;
bottom: 0;
width: 100%;
z-index: 1;
height: 400px;
background: url(../images/page/img-company-message_01.jpg) no-repeat;
background-size: cover;
}
@media screen and (max-width:980px){
#company .messageArea .topContent .img{
height: 350px;
}
}
@media screen and (max-width:767px){
#company .messageArea .topContent .img{
position: static;
height: 240px;
margin-bottom: 20px;
}
}
@media screen and (max-width:500px){
#company .messageArea .topContent .img{
height: 160px;
}
}
#company .messageArea .topContent .txtArea{
width: 95%;
max-width: 840px;
padding-bottom: 210px;
}
@media screen and (max-width:980px){
#company .messageArea .topContent .txtArea{
padding-bottom: 165px;
}
}
@media screen and (max-width:767px){
#company .messageArea .topContent .txtArea{
width: 90%;
padding-bottom: 0;
}
}
#company .messageArea .topContent .txtArea .inner{
margin-left: 420px;
padding: 0 20px 25px;
background: #fff;
}
@media screen and (max-width:980px){
#company .messageArea .topContent .txtArea .inner{
margin-left: 320px;
}
}
@media screen and (max-width:767px){
#company .messageArea .topContent .txtArea .inner{
margin-left: 0;
padding: 0;
}
}
#company .messageArea .topContent .txtArea .ttl{
position: absolute;
top: 0;
left: 20px;
font-size: 150%;
font-weight: bold;
color: #000;
}
@media screen and (max-width:767px){
#company .messageArea .topContent .txtArea .ttl{
position: static;
font-size: 12pt;
line-height: 1.6;
margin-bottom: 10px;
}
}
#company .messageArea .txtArea .note{
line-height: 1.7;
margin-bottom: 25px;
}
#company .messageArea .txtArea .note:last-child{
margin-bottom: 0;
}
@media screen and (max-width:767px){
#company .messageArea .txtArea .note{
margin-bottom: 10px;
}
}
#company .messageArea .messageContent{
max-width: 800px;
}
#company .messageArea .messageContent .img{
width: 46.25%;
}
@media screen and (max-width:767px){
#company .messageArea .messageContent .img{
float: none;
width: 100%;
max-width: 300px;
margin: 0 auto 20px;
}
}
#company .messageArea .messageContent .img img{
width: 100%;
height: auto;
}
#company .messageArea .messageContent .txtArea{
width: 47.5%;
}
@media screen and (max-width:767px){
#company .messageArea .messageContent .txtArea{
float: none;
width: 100%;
}
}
#company .messageArea .messageContent .txtArea .post{
padding-top: 65px;
margin-bottom: 10px;
color: #000;
}
@media screen and (max-width:767px){
#company .messageArea .messageContent .txtArea .post{
padding-top: 10px;
}
}
#company .messageArea .messageContent .txtArea .signImg{
width: 200px;
margin-left: 5px;
}
@media screen and (max-width:767px){
#company .messageArea .messageContent .txtArea .signImg{
width: 150px;
}
}
#company .messageArea .messageContent .txtArea .signImg img{
width: 100%;
height: auto;
}
#company .infoArea{
max-width: 800px;
}
@media screen and (max-width:374px){
#company .infoArea{
width: 95%;
}
}
#company .infoArea .infoBox{
width: 100%;
margin-bottom: 65px;
}
@media screen and (max-width:767px){
#company .infoArea .infoBox{
margin-bottom: 50px;
}
}
#company .infoArea .infoBox tr{
border-bottom: 1px solid #e1e1e1;
line-height: 1.7;
}
#company .infoArea .infoBox tr:first-child{
border-top: 1px solid #e1e1e1;
}
#company .infoArea .infoBox th,
#company .infoArea .infoBox td{
padding: 21px 1.5%;
}
@media screen and (max-width:767px){
#company .infoArea .infoBox th,
#company .infoArea .infoBox td{
padding: 12px 1.5%;
}
}
@media all and (-ms-high-contrast:none) {
#company .infoArea .infoBox th,
#company .infoArea .infoBox td{
padding: 23px 1.5% 19px;
}
}
#company .infoArea .infoBox th{
width: 19%;
color: #000;
}
@media screen and (max-width:767px){
#company .infoArea .infoBox th{
min-width: 80px;
}
}
#company .infoArea .infoBox td .map{
font-size: 78.5%;
margin-top: 10px;
}
@media screen and (max-width:767px){
#company .infoArea .infoBox td .map{
font-size: 8pt;
margin-top: 5px;
}
}
#company .infoArea .infoBox td .map .icon{
font-size: 15px;
padding-right: 5px;
position: relative;
top: 2px;
}
#company .infoArea .mapArea{
width:100%;
height:420px;
}
@media screen and (max-width:767px){
#company .infoArea .mapArea{
width:100%;
height:250px;
}
}
#company .infoArea .mapArea iframe{
width: 100%;
height: 100%;
border: 0;
}
/*---------------------------------------*/
/* business */
/*---------------------------------------*/
#business .businessContent{
max-width: 1140px;
margin-bottom: 75px;
padding-top: 55px;
}
#business .businessContent:last-child{
margin-bottom: 0;
}
@media screen and (max-width:980px){
#business .businessContent{
width: 95%;
margin-bottom: 90px;
padding-top: 0;
}
#business .businessContent:last-child{
margin-bottom: 0;
}
}
@media screen and (max-width:767px){
#business .businessContent{
width: 90%;
box-shadow: 8px 8px 15px rgba(0,0,0,0.2);
margin-bottom: 50px;
}
#business .businessContent:last-child{
margin-bottom: 0;
}
}
#business .businessContent .inner{
position: relative;
max-width: 1060px;
margin: 0 0 0 auto;
}
#business .businessContent .img{
position: absolute;
top: -35px;
left: 0;
width: 45.28%;
}
@media screen and (max-width:980px){
#business .businessContent .img{
top: 35px;
width: 240px;
}
}
@media screen and (max-width:767px){
#business .businessContent .img{
position: static;
width: 100%;
}
}
#business .businessContent .img img{
width: 100%;
height: auto;
}
#business .businessContent .txtArea{
width: 39.9%;
margin-left: 7.7%;
padding: 35px 7.7% 25px 44.7%;
background: #fff;
box-shadow: 20px 20px 30px rgba(0,0,0,0.2);
min-height: 385px;
}
@media screen and (max-width:980px){
#business .businessContent .txtArea{
width: auto;
margin-left: 5%;
padding: 35px 5% 25px 240px;
min-height: 203px;
}
}
@media screen and (max-width:767px){
#business .businessContent .txtArea{
width: auto;
margin-left: 0;
padding: 15px 5% 25px;
min-height: inherit;
box-shadow: none ;
}
}
#business .businessContent .txtArea .ttl{
margin-bottom: 35px;
color: #000;
}
@media screen and (max-width:980px){
#business .businessContent .txtArea .ttl{
margin-bottom: 25px;
}
}
@media screen and (max-width:767px){
#business .businessContent .txtArea .ttl{
margin-bottom: 10px;
}
}
#business .businessContent .txtArea .ttl .en{
font-size: 250%;
line-height: 1;
margin-bottom: 20px;
}
@media screen and (max-width:980px){
#business .businessContent .txtArea .ttl .en{
float: left;
margin-bottom: 0;
margin-right: 15px;
}
}
@media screen and (max-width:767px){
#business .businessContent .txtArea .ttl .en{
font-size: 20pt;
}
}
#business .businessContent .txtArea .ttl .jp{
font-size: 93%;
}
@media screen and (max-width:980px){
#business .businessContent .txtArea .ttl .jp{
float: left;
position: relative;
top: 5px;
}
}
@media screen and (max-width:767px){
#business .businessContent .txtArea .ttl .jp{
font-size: 8pt;
top: 4px;
}
}
#business .businessContent .txtArea .note{
line-height: 1.7;
margin-bottom: 25px;
}
@media screen and (max-width:980px){
#business .businessContent .txtArea .note{
margin-bottom: 15px;
}
}
@media screen and (max-width:767px){
#business .businessContent .txtArea .note{
margin-bottom: 5px;
}
}
/*---------------------------------------*/
/* business */
/*---------------------------------------*/
#service .matrix{
margin-bottom: 135px;
}
@media screen and (max-width:980px){
#service .matrix{
margin-bottom: 90px;
}
}
@media screen and (max-width:767px){
#service .matrix{
width: 100%;
margin-bottom: 50px;
}
}
#service .matrix .graphTtl{
font-size: 143%;
font-weight: bold;
text-align: center;
margin-bottom: 45px;
color: #000;
}
@media screen and (max-width:767px){
#service .matrix .graphTtl{
font-size: 12pt;
margin-bottom: 20px;
}
}
#service .matrix .graph{
line-height: 1.2;
width: 100%;
}
#service .matrix .graph th{
font-size: 143%;
font-weight: bold;
text-align: center;
vertical-align: middle;
border-bottom: 5px solid #fff;
}
@media screen and (max-width:980px){
#service .matrix .graph th{
font-size: 121.5%;
}
}
@media screen and (max-width:767px){
#service .matrix .graph th{
font-size: 9pt;
border-bottom: 3px solid #fff;
}
}
#service .matrix .graph th.rowTtl{
padding: 13px;
color: #4ba1a9;
}
@media all and (-ms-high-contrast:none) {
#service .matrix .graph th.rowTtl{
padding: 15px 13px 11px;
}
}
#service .matrix .graph th.colTtl{
background:#fff5eb;
color: #ff9d23;
padding: 40px 0;
}
@media screen and (max-width:767px){
#service .matrix .graph th.colTtl{
padding: 0;
}
}
@media all and (-ms-high-contrast:none) {
#service .matrix .graph th.colTtl{
padding: 42px 0 38px;
}
}
#service .matrix .graph th.rowTtl,
#service .matrix .graph td{
width: 27%;
border-left: 5px solid #fff;
background: #dcedee;
}
@media screen and (max-width:767px){
#service .matrix .graph th.rowTtl,
#service .matrix .graph td{
border-left: 3px solid #fff;
}
}
#service .matrix .graph td{
vertical-align: middle;
padding: 20px 17px 17px;
border-bottom: 5px solid #fff;
}
@media screen and (max-width:980px){
#service .matrix .graph td{
font-size: 93%;
padding: 20px 12px;
}
}
@media screen and (max-width:767px){
#service .matrix .graph td{
font-size: 8pt;
padding: 10px 6px;
border-bottom: 3px solid #fff;
}
}
#service .matrix .graph td ul li{
margin-bottom: 4px;
margin-left: 1em;
}
#service .matrix .graph td ul li .dot{
display: inline-block;
margin-left: -1em;
width: 1em;
text-align: center;
}
#service .matrix .txt{
text-align: right;
font-size: 85.5%;
color: #808080;
}
@media screen and (max-width:767px){
#service .matrix .txt{
font-size: 7pt;
}
}
@media screen and (max-width:500px){
#service .matrix .txt{
text-align: left;
}
}
#service .serviceList .list{
width: 31%;
margin-right: 3.5%;
float: left;
position: relative;
margin-bottom: 125px;
}
@media screen and (max-width:980px){
#service .serviceList .list{
margin-bottom: 90px;
}
}
@media screen and (max-width:850px){
#service .serviceList .list{
width: 48%;
margin-right: 4%;
}
}
@media screen and (max-width:767px){
#service .serviceList .list{
margin-bottom: 30px;
}
}
@media screen and (max-width:500px){
#service .serviceList .list{
width: 100%;
margin-right: 0;
}
}
#service .serviceList .list:nth-child(3n){
margin-right: 0;
}
@media screen and (max-width:850px){
#service .serviceList .list:nth-child(3n){
margin-right: 4%;
}
#service .serviceList .list:nth-child(2n){
margin-right: 0;
}
}
#service .serviceList .list .img{
margin-bottom: 40px;
}
@media screen and (max-width:980px){
#service .serviceList .list .img{
margin-bottom: 25px;
}
}
@media screen and (max-width:767px){
#service .serviceList .list .img{
margin-bottom: 10px;
}
}
#service .serviceList .list .img a:hover{
opacity: 0.7;
}
#service .serviceList .list .img img{
width: 100%;
height: auto;
}
#service .serviceList .list .ttl{
font-size: 143%;
margin-bottom: 8px;
color: #000;
}
@media screen and (max-width:767px){
#service .serviceList .list .ttl{
font-size: 12pt;
margin-bottom: 4px;
}
}
#service .serviceList .list .cateBox{
margin-bottom: 45px;
}
@media screen and (max-width:980px){
#service .serviceList .list .cateBox{
margin-bottom: 25px;
}
}
@media screen and (max-width:767px){
#service .serviceList .list .cateBox{
margin-bottom: 10px;
}
}
#service .serviceList .list .cateBox .cate{
font-size: 85.5%;
line-height: 1;
padding: 5px 10px;
background: #e1e1e1;
display: inline-block;
margin-right: 5px;
color: #000;
}
@media screen and (max-width:767px){
#service .serviceList .list .cateBox .cate{
font-size: 8pt;
padding: 4px 5px;
}
}
@media all and (-ms-high-contrast:none) {
#service .serviceList .list .cateBox .cate{
padding: 7px 10px 3px;
}
}
#service .serviceList .list .note{
font-size: 93%;
line-height: 2.1;
padding-bottom: 85px;
color: #666;
}
@media screen and (max-width:980px){
#service .serviceList .list .note{
padding-bottom: 65px;
}
}
@media screen and (max-width:767px){
#service .serviceList .list .note{
font-size: 9pt;
line-height: 1.8;
padding-bottom: 40px;
}
}
#service .serviceList .list .viewBtn{
position: absolute;
bottom: 0;
}
#service .serviceList .list .viewBtn .icon{
font-size: 15px;
position: relative;
padding-left: 7px;
top: 2px;
}
@media screen and (max-width:767px){
#service .serviceList .list .viewBtn .icon{
font-size: 13px;
padding-left: 4px;
}
}
/*---------------------------------------*/
/* recruit */
/*---------------------------------------*/
#recruit .recTop{
text-align: center;
background: url(../images/page/img-recruit_01.jpg) no-repeat right bottom;
background-size: 615px auto;
max-width: 1170px;
width: 95%;
padding-top: 35px;
}
@media screen and (max-width:980px){
#recruit .recTop{
background-size: 480px auto;
width: 90%;
}
}
@media screen and (max-width:767px){
#recruit .recTop{
background-size: 360px auto;
padding-top: 0;
}
}
@media screen and (max-width:500px){
#recruit .recTop{
background-size: 90% auto;
text-align: left;
}
}
#recruit .recTop .txt{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
white-space: nowrap;
font-size: 200%;
line-height: 2;
text-align: left;
display: inline-block;
padding-bottom: 107px;
font-family: "游明朝 Medium","YuMincho Medium","游明朝","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",Meiryo,"Times New Roman",serif;
}
@media screen and (max-width:980px){
#recruit .recTop .txt{
padding-bottom: 85px;
}
}
@media screen and (max-width:767px){
#recruit .recTop .txt{
padding-bottom: 50px;
font-size: 13pt;
}
}
@media screen and (max-width:500px){
#recruit .recTop .txt{
padding-bottom: 30px;
margin-left: 5%;
}
}
#recruit .recTop .txt .tenmaru{
margin-bottom: -10px;
}
#recruit .recNote{
line-height: 2;
text-align: center;
margin-bottom: 320px;
}
@media screen and (max-width:980px){
#recruit .recNote{
margin-bottom: 200px;
}
}
@media screen and (max-width:767px){
#recruit .recNote{
margin-bottom: 50px;
}
}
#recruit .cultureArea{
background: linear-gradient(to right, #fff 0%, #fff 50%, #f7f7f7 50%, #f7f7f7 100%);
margin-bottom: 135px;
}
@media screen and (max-width:980px){
#recruit .cultureArea{
margin-bottom: 90px;
}
}
@media screen and (max-width:767px){
#recruit .cultureArea{
margin-bottom: 50px;
}
}
#recruit .cultureArea .areaInner{
background: #f7f7f7;
max-width: 800px;
padding: 100px 0 40px;
}
@media screen and (max-width:767px){
#recruit .cultureArea .areaInner{
padding: 80px 0 40px;
}
}
#recruit .cultureArea .areaTtl{
position: absolute;
top: -1.8em;
width: 100%;
}
@media screen and (max-width:767px){
#recruit .cultureArea .areaTtl{
top: -1.4em;
}
}
#recruit .cultureArea .cultureContent{
position: relative;
margin-bottom: 100px;
}
#recruit .cultureArea .cultureContent:last-child{
margin-bottom: 0;
}
@media screen and (max-width:767px){
#recruit .cultureArea .cultureContent{
margin-bottom: 30px;
}
#recruit .cultureArea .cultureContent:last-child{
margin-bottom: 0;
}
}
#recruit .cultureArea .cultureContent .number{
position: absolute;
top: 15px;
left: -50px;
color: #fff;
font-size: 1285.5%;
line-height: 1;
}
@media screen and (max-width:767px){
#recruit .cultureArea .cultureContent .number{
top: -8px;
left: -20px;
font-size: 60pt;
}
}
#recruit .cultureArea .cultureContent .txtBox{
margin-left: 200px;
}
@media screen and (max-width:980px){
#recruit .cultureArea .cultureContent .txtBox{
margin-left: 180px;
}
}
@media screen and (max-width:767px){
#recruit .cultureArea .cultureContent .txtBox{
margin-left: 70px;
}
}
#recruit .cultureArea .cultureContent .txtBox .ttl{
font-weight: bold;
font-size: 143%;
margin-bottom: 40px;
}
@media screen and (max-width:767px){
#recruit .cultureArea .cultureContent .txtBox .ttl{
font-weight: bold;
font-size: 12pt;
margin-bottom: 5px;
}
}
#recruit .cultureArea .cultureContent .txtBox .note{
line-height: 1.7;
margin-bottom: 25px;
}
#recruit .cultureArea .cultureContent .txtBox .note:last-child{
margin-bottom: 0;
}
@media screen and (max-width:767px){
#recruit .cultureArea .cultureContent .txtBox .note{
margin-bottom: 10px;
}
#recruit .cultureArea .cultureContent .txtBox .note:last-child{
margin-bottom: 0;
}
}
#recruit .benefitsArea{
max-width: 980px;
margin-bottom: 130px;
}
@media screen and (max-width:767px){
#recruit .benefitsArea{
margin-bottom: 50px;
}
}
#recruit .benefitsArea .benefitsList .list{
width: 50%;
float: left;
border-right: 1px solid #e1e1e1;
box-sizing: border-box;
}
@media screen and (max-width:500px){
#recruit .benefitsArea .benefitsList .list{
width: 100%;
float: none;
border-right: none;
border-bottom: 1px solid #e1e1e1;
}
}
#recruit .benefitsArea .benefitsList .list.line01{
padding: 30px 0 90px;
}
@media screen and (max-width:767px){
#recruit .benefitsArea .benefitsList .list.line01{
padding: 15px 0 30px;
}
}
@media screen and (max-width:500px){
#recruit .benefitsArea .benefitsList .list.line01{
padding: 30px 0 30px;
}
}
#recruit .benefitsArea .benefitsList .list.line02{
padding: 65px 0 90px;
}
@media screen and (max-width:767px){
#recruit .benefitsArea .benefitsList .list.line02{
padding: 20px 0 30px;
}
}
@media screen and (max-width:500px){
#recruit .benefitsArea .benefitsList .list.line02{
padding: 30px 0 30px;
}
}
@media screen and (max-width:500px){
#recruit .benefitsArea .benefitsList .list .inner{
position: relative;
min-height: 50px;
margin-bottom: 10px;
}
}
#recruit .benefitsArea .benefitsList .list:nth-child(2n){
border-right: none;
}
#recruit .benefitsArea .benefitsList .list.borderBtm{
border-bottom: 1px solid #e1e1e1;
}
#recruit .benefitsArea .benefitsList .list .icon{
font-size: 82px;
text-align: center;
line-height: 1;
margin: 30px 0;
}
@media screen and (max-width:767px){
#recruit .benefitsArea .benefitsList .list .icon{
font-size: 60px;
margin: 10px 0;
}
}
@media screen and (max-width:500px){
#recruit .benefitsArea .benefitsList .list .icon{
font-size: 50px;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
}
#recruit .benefitsArea .benefitsList .list .ttl{
font-size: 143%;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
line-height: 1.5;
}
@media screen and (max-width:767px){
#recruit .benefitsArea .benefitsList .list .ttl{
font-size: 12pt;
margin-bottom: 10px;
}
}
@media screen and (max-width:500px){
#recruit .benefitsArea .benefitsList .list .ttl{
text-align: left;
margin-left: 60px;
margin-bottom: 0;
padding: 13px 0;
}
}
#recruit .benefitsArea .benefitsList .list .note{
max-width: 355px;
margin: 0 auto;
line-height: 1.7;
width: 80%;
}
@media screen and (max-width:500px){
#recruit .benefitsArea .benefitsList .list .note{
width: 100%;
max-width: inherit;
}
}
#recruit .infoArea{
max-width: 800px;
}
#recruit .infoArea .infoList tr{
border-bottom: 1px solid #e1e1e1;
line-height: 1.6;
}
#recruit .infoArea .infoList tr:first-child{
border-top: 1px solid #e1e1e1;
}
#recruit .infoArea .infoList tr th{
width: 104px;
padding: 20px 1%;
letter-spacing: 0.05em;
color: #000;
}
@media screen and (max-width:767px){
#recruit .infoArea .infoList tr th{
display: block;
width: 96%;
padding: 15px 2% 5px;
}
}
#recruit .infoArea .infoList tr td{
padding: 20px 1% 40px 0;
}
@media screen and (max-width:767px){
#recruit .infoArea .infoList tr td{
display: block;
width: 96%;
padding: 5px 2% 20px;
}
}
#recruit .infoArea .infoList tr td .note{
margin-bottom: 25px;
}
@media screen and (max-width:767px){
#recruit .infoArea .infoList tr td .note{
margin-bottom: 10px;
}
}
#recruit .infoArea .infoList tr td .markOuter{
margin-left: 1em;
}
#recruit .infoArea .infoList tr td .markOuter .mark{
display: inline-block;
width: 1em;
margin-left: -1em;
text-align: center;
}
/*---------------------------------------*/
/* news */
/*---------------------------------------*/
/* 一覧 */
#news .linkArea{
max-width: 630px;
margin-bottom: 140px;
padding-top: 60px;
}
@media screen and (max-width:980px){
#news .linkArea{
margin-bottom: 90px;
}
}
@media screen and (max-width:767px){
#news .linkArea{
margin-bottom: 40px;
padding-top: 0;
}
}
#news .linkArea .linkList .list{
float: left;
width: 28.6%;
margin-right: 7.1%;
text-align: center;
}
@media screen and (max-width:767px){
#news .linkArea .linkList .list{
width: 32%;
margin-right: 2%;
}
}
#news .linkArea .linkList .list:last-child{
margin-right: 0;
}
@media screen and (max-width:767px){
#news .linkArea .linkList .list:last-child{
margin-right: 0;
}
}
#news .linkArea .linkList .list a{
display: block;
border: 1px solid #d6d6d6;
padding: 12px 0;
}
#news .linkArea .linkList .list a:hover{
background: #333;
}
@media screen and (max-width:767px){
#news .linkArea .linkList .list a{
padding: 6px 0;
}
}
@media all and (-ms-high-contrast:none) {
#news .linkArea .linkList .list a{
padding: 14px 0 10px;
}
}
#news .newsList{
margin-bottom: 25px;
}
#news .newsList .news{
width: 29%;
margin-right: 6.5%;
margin-bottom: 115px;
float: left;
position: relative;
}
@media screen and (max-width:980px){
#news .newsList .news{
width: 49%;
margin-right: 2%;
margin-bottom: 90px;
}
}
@media screen and (max-width:767px){
#news .newsList .news{
width: 100%;
min-height: 100px;
margin-right: 0;
margin-bottom: 30px;
float: none;
}
}
#news .newsList .news:nth-child(3n){
margin-right: 0;
}
@media screen and (max-width:980px){
#news .newsList .news:nth-child(3n){
margin-right: 2%;
}
#news .newsList .news:nth-child(2n){
margin-right: 0;
}
}
@media screen and (max-width:767px){
#news .newsList .news:nth-child(3n){
margin-right: 0;
}
}
#news .newsList .news .cateOuter{
position: relative;
}
#news .newsList .news .cateOuter .cate{
transform: rotate(90deg);
font-size: 85.5%;
color: #000;
}
#news .newsList .news .img{
margin-bottom: 30px;
margin-left: 8%;
background: #000;
}
@media screen and (max-width:767px){
#news .newsList .news .img{
position: absolute;
top: 0;
left: 18px;
width: 100px;
margin-left: 0;
}
}
#news .newsList .news .img img{
width: 100%;
height: auto;
transition: all 0.3s ease;
}
#news .newsList .news .img a:hover img{
opacity: 0.5;
}
#news .newsList .news .txtArea{
margin-left: 8%;
}
@media screen and (max-width:767px){
#news .newsList .news .txtArea{
margin-left: 130px;
}
}
#news .newsList .news .txtArea .date{
font-size: 93%;
color: #555;
margin-bottom: 20px;
line-height: 1;
}
@media screen and (max-width:767px){
#news .newsList .news .txtArea .date{
font-size: 9pt;
margin-bottom: 10px;
}
}
#news .newsList .news .txtArea .ttl{
margin-bottom: 20px;
font-size: 128.5%;
line-height: 1.4;
font-weight: bold;
}
@media screen and (max-width:767px){
#news .newsList .news .txtArea .ttl{
margin-bottom: 10px;
font-size: 9pt;
}
}
#news .newsList .news .txtArea .note{
margin-bottom: 20px;
line-height: 1.7;
}
@media screen and (max-width:767px){
#news .newsList .news .txtArea .note{
margin-bottom: 0;
font-size: 8pt;
line-height: 1.5;
height: 4.5em;
}
}
/* 詳細 */
#news .newsContent{
padding-top: 60px;
}
@media screen and (max-width:767px){
#news .newsContent{
padding-top: 0;
}
}
#news .newsContent .newsMain{
width: 62.5%;
}
@media screen and (max-width:980px){
#news .newsContent .newsMain{
width: 100%;
float: none;
margin-bottom: 90px;
}
}
@media screen and (max-width:767px){
#news .newsContent .newsMain{
margin-bottom: 50px;
}
}
#news .newsContent .newsMain .topInfo{
margin-bottom: 30px;
}
@media screen and (max-width:767px){
#news .newsContent .newsMain .topInfo{
margin-bottom: 15px;
}
}
#news .newsContent .newsMain .date{
color: #555;
font-size: 93%;
margin-right: 10px;
}
@media screen and (max-width:767px){
#news .newsContent .newsMain .date{
font-size: 8pt;
}
}
#news .newsContent .newsMain .cate{
color: #000;
font-size: 85.5%;
}
@media screen and (max-width:767px){
#news .newsContent .newsMain .cate{
font-size: 8pt;
}
}
#news .newsContent .newsMain .newsTtl{
color: #000;
font-size: 143%;
margin-bottom: 50px;
}
@media screen and (max-width:767px){
#news .newsContent .newsMain .newsTtl{
font-size: 12pt;
margin-bottom: 10px;
}
}
#news .newsContent .newsMain .img{
margin-bottom: 40px;
}
@media screen and (max-width:767px){
#news .newsContent .newsMain .img{
margin-bottom: 20px;
}
}
#news .newsContent .newsMain .img img{
width: 100%;
height: auto;
}
#news .newsContent .newsMain .note{
margin-bottom: 20px;
line-height: 1.7;
}
@media screen and (max-width:767px){
#news .newsContent .newsMain .note{
margin-bottom: 10px;
}
}
#news .newsContent .newsSide{
width: 29.2%;
}
@media screen and (max-width:980px){
#news .newsContent .newsSide{
width: 100%;
float: none;
}
}
#news .newsContent .newsSide .sideBlock{
margin-bottom: 90px;
}
#news .newsContent .newsSide .sideBlock:last-child{
margin-bottom: 0;
}
@media screen and (max-width:980px){
#news .newsContent .newsSide .sideBlock{
margin-bottom: 60px;
}
#news .newsContent .newsSide .sideBlock:last-child{
margin-bottom: 0;
}
}
@media screen and (max-width:767px){
#news .newsContent .newsSide .sideBlock{
margin-bottom: 30px;
}
#news .newsContent .newsSide .sideBlock:last-child{
margin-bottom: 0;
}
}
#news .newsContent .newsSide .sideBlock .sideTtl{
font-size: 143%;
border-bottom: 1px solid #bcbcbc;
padding-bottom: 3px;
margin-bottom: 30px;
color: #000;
}
@media screen and (max-width:767px){
#news .newsContent .newsSide .sideBlock .sideTtl{
font-size: 12pt;
margin-bottom: 20px;
}
}
#news .newsContent .newsSide .sideBlock .list{
margin-bottom: 20px;
}
#news .newsContent .newsSide .sideBlock .cateList .list{
font-size: 85.5%;
}
@media screen and (max-width:980px){
#news .newsContent .newsSide .sideBlock .cateList .list{
float: left;
width: 30%;
margin-right: 5%;
}
#news .newsContent .newsSide .sideBlock .cateList .list:nth-child(3n){
margin-right: 0;
}
}
@media screen and (max-width:767px){
#news .newsContent .newsSide .sideBlock .cateList .list{
font-size: 8pt;
}
}
@media screen and (max-width:500px){
#news .newsContent .newsSide .sideBlock .cateList .list{
width: 47.5%;
margin-right: 5%;
}
#news .newsContent .newsSide .sideBlock .cateList .list:nth-child(2n){
margin-right: 0;
}
}
#news .newsContent .newsSide .sideBlock .cateList .list .icon{
margin-right: 10px;
font-size: 10px;
}
#news .newsContent .newsSide .sideBlock .recentList .news{
min-height: 100px;
margin-bottom: 30px;
position: relative;
}
@media screen and (max-width:980px){
#news .newsContent .newsSide .sideBlock .recentList .news{
float: left;
width: 47.5%;
margin-right: 5%;
}
#news .newsContent .newsSide .sideBlock .recentList .news:nth-child(2n){
margin-right: 0;
}
}
@media screen and (max-width:767px){
#news .newsContent .newsSide .sideBlock .recentList .news{
float: left;
width: 48.5%;
margin-right: 3%;
}
}
@media screen and (max-width:500px){
#news .newsContent .newsSide .sideBlock .recentList .news{
float: none;
width: 100%;
margin-right: 0;
}
#news .newsContent .newsSide .sideBlock .recentList .news:nth-child(2n){
margin-right: 0;
}
}
#news .newsContent .newsSide .sideBlock .recentList .news .cateOuter{
position: relative;
}
#news .newsContent .newsSide .sideBlock .recentList .news .cateOuter .cate{
transform: rotate(90deg);
font-size: 71.5%;
color: #000;
}
@media screen and (max-width:767px){
#news .newsContent .newsSide .sideBlock .recentList .news .cateOuter .cate{
font-size: 8pt;
}
}
#news .newsContent .newsSide .sideBlock .recentList .news .img{
background: #000;
position: absolute;
top: 0;
left: 18px;
width: 100px;
margin-left: 0;
}
#news .newsContent .newsSide .sideBlock .recentList .news .img img{
width: 100%;
height: auto;
transition: all 0.3s ease;
}
#news .newsContent .newsSide .sideBlock .recentList .news .img a:hover img{
opacity: 0.5;
}
#news .newsContent .newsSide .sideBlock .recentList .news .txtArea{
margin-left: 130px;
}
#news .newsContent .newsSide .sideBlock .recentList .news .txtArea .date{
font-size: 93%;
color: #555;
margin-bottom: 12px;
line-height: 1;
}
@media screen and (max-width:767px){
#news .newsContent .newsSide .sideBlock .recentList .news .txtArea .date{
font-size: 9pt;
}
}
#news .newsContent .newsSide .sideBlock .recentList .news .txtArea .ttl{
margin-bottom: 10px;
font-size: 93%;
line-height: 1.4;
font-weight: bold;
}
@media screen and (max-width:767px){
#news .newsContent .newsSide .sideBlock .recentList .news .txtArea .ttl{
font-size: 9pt;
}
}
#news .newsContent .newsSide .sideBlock .archiveList .list{
font-size: 93%;
}
@media screen and (max-width:980px){
#news .newsContent .newsSide .sideBlock .archiveList .list{
float: left;
width: 30%;
margin-right: 5%;
}
#news .newsContent .newsSide .sideBlock .archiveList .list:nth-child(3n){
margin-right: 0;
}
}
@media screen and (max-width:767px){
#news .newsContent .newsSide .sideBlock .archiveList .list{
font-size: 9pt;
}
}
@media screen and (max-width:500px){
#news .newsContent .newsSide .sideBlock .archiveList .list{
width: 47.5%;
margin-right: 5%;
}
#news .newsContent .newsSide .sideBlock .archiveList .list:nth-child(2n){
margin-right: 0;
}
}
/*---------------------------------------*/
/* ページャー */
/*---------------------------------------*/
.pager{
text-align: center;
position:relative;
height:40px;
line-height:40px;
}
.pager a {
border-bottom: 1px solid #fff;
padding: 0 4px 0;
margin:0 4px;
transition: all 0.3s ease 0s;
font-size: 93%;
}
@media screen and (max-width: 767px) {
.pager a {
font-size:9pt;
margin:0 8px;
}
}
.pager .current {
border-bottom: 1px solid #1a1a1a;
padding: 0 4px 0;
margin:0 4px;
font-size: 93%;
}
@media screen and (max-width: 767px) {
.pager .current {
font-size:9pt;
margin:0 8px;
}
}
/*---------------------------------------*/
/* contact */
/*---------------------------------------*/
#contact .formAttention{
font-size:75%;
width:90%;
margin:0 auto 15px;
padding-top: 115px;
}
@media screen and (max-width:980px){
#contact .formAttention{
padding-top: 60px;
}
}
@media screen and (max-width:767px){
#contact .formAttention{
font-size:8pt;
margin:0 auto 10px;
padding-top: 30px;
}
}
#contact .formAttention .color{
color:#ff0000;
}
/*フォーム共通 */
.form .txt-l,.form .txt-s,.form .txt-area {
border: 1px solid #d4d4d4;
border-radius: 0;
font-size: 100%;
height:40px;
padding:0 20px;
width: 100%;
box-sizing:border-box;
-webkit-appearance: none;
cursor:pointer;
color:#666;
}
.form .txt-s {
width:44%;
}
@media screen and (max-width: 767px) {
.form .txt-s {
width: 80%;
}
}
.form .txt-area {
height: 122px;
padding-bottom: 10px;
padding-top: 10px;
}
.form input:focus, .form textarea:focus, .form select:focus {
border: 1px solid #4367a6;
}
.form .hasCustomSelect {
width: 100%;
}
.form .customSelect{
background: url(../images/page/contact-select.gif) no-repeat right center;
background-size: 40px 40px;
height:40px;
line-height:40px;
padding:0 20px;
width: 100%;
box-sizing:border-box;
border:1px solid #d4d4d4;
color:#666;
}
@media screen and (max-width: 767px) {
.form .customSelect {
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.form .notes {
color: #898989;
font-size:85.5%;
font-weight: normal;
margin-bottom: 1em;
}
@media screen and (max-width: 767px){
.form span.notes {
display: block;
font-size:7pt;
}
}
.form .agree{
text-align:center;
margin:30px 0;
color:#333;
}
/*コンタクト｜フォーム */
#contact-form table{
width:100%;
border-top:1px solid #bcbcbc;
color:#333;
}
@media screen and (max-width:980px){
#contact-form table{
font-size:88%;
}
}
@media screen and (max-width:767px){
#contact-form table{
border-left:1px solid #bcbcbc;
border-right:1px solid #bcbcbc;
}
}
#contact-form table tr{
border-bottom:1px solid #bcbcbc;
}
@media screen and (max-width:767px){
#contact-form table tr.none{
border:none;
}
}
#contact-form table th{
border-right:1px solid #bcbcbc;
background:#edf1f5;
padding:20px;
vertical-align:middle;
}
@media screen and (max-width:767px){
#contact-form table th{
border:none;
}
}
#contact-form table th.colspan2{
width:35%;
}
@media screen and (max-width:980px){
#contact-form table th.colspan2{
width:40%;
}
#contact-form table th.colspan1{
width:13% !important;
text-align:center;
}
}
@media screen and (max-width:767px){
#contact-form table th,
#contact-form table th.colspan2{
width:90%;
display:block;
padding:10px 5%;
}
#contact-form table th.colspan1{
width:90% !important;
text-align:left;
padding:10px 5%;
}
#contact-form table th.none{
display:none;
}
}
#contact-form table td{
padding:20px;
}
#contact-form table td.colspan1-left{
padding:20px 10px 20px 20px;
}
#contact-form table td.colspan1-right{
padding:20px 20px 20px 10px;
}
@media screen and (max-width:767px){
#contact-form table td,
#contact-form table td.colspan1-left,
#contact-form table td.colspan1-right{
width:90%;
display:block;
padding:10px 5%;
}
#contact-form table tr.none td,
#contact-form table td.colspan1-left{
padding:10px 5% 0;
}
}
#contact-form table td .data{
display: block;
margin-bottom: 15px;
line-height: 1.5;
}
@media screen and (max-width:767px){
#contact-form table td .data{
margin-bottom: 10px;
}
}
#contact-form table td .data input{
margin-right: 8px;
}
@media screen and (max-width:767px){
#contact-form table td .data input{
margin-right: 5px;
}
}
#contact-form th span.check{
color:#ff0000;
font-size:75%;
margin-left:5px;
position:relative;
top:-5px;
}
#contact-form .btnSubmit .submit{
-webkit-appearance: none;
display:block;
width:100%;
font-size:100%;
max-width:320px;
margin:60px auto 0;
height:60px;
border:1px solid #000;
text-align:center;
background:#fff;
color:#000;
transition: all 0.3s ease;
border-radius: 0;
}

#recruit .btnSubmit .submit{
-webkit-appearance: none;
display:block;
width:100%;
font-size:100%;
max-width:360px;
margin:60px auto 0;
height:60px;
border:1px solid #000;
text-align:center;
background:#fff;
color:#000;
transition: all 0.3s ease;
border-radius: 0;
}
@media screen and (max-width: 767px) {
#contact-form .btnSubmit .submit{
height:50px;
font-size:11pt;
}
#recruit .btnSubmit .submit{
height:50px;
}
}
#contact-form .btnSubmit .submit:hover,#recruit .btnSubmit .submit:hover{
background:#000;
color:#fff;
}
/* ▼IE10・IE11用 */
:-ms-input-placeholder {
color: #d4d4d4;
}
/* ▼Chrome・Safari・Opera用(※Edgeにも使える) */
::-webkit-input-placeholder {
color: #d4d4d4;
}
/* ▼Firefox18以前用 */
:-moz-placeholder {
color: #d4d4d4;
}
/* ▼Firefox19以上用 */
::-moz-placeholder {
color: #d4d4d4;
opacity: 1;
}
/* ▼CSS標準(予定)の記述 */
:placeholder-shown {
color: #d4d4d4;
}
/*---------------------------------------*/
/* privacy */
/*---------------------------------------*/
.pageSubTtl{
font-size: 128.5%;
max-width: 800px;
margin: 0 auto 50px;
padding-top: 30px;
font-weight: bold;
color: #000;
}
@media screen and (max-width:767px){
.pageSubTtl{
font-size: 12pt;
max-width: 800px;
margin: 0 auto 10px;
padding-top: 0;
}
}
#privacy .privacyContent{
max-width:800px;
margin:0 auto 30px;
padding-bottom:30px;
border-bottom:1px solid #e1e1e1;
}
@media screen and (max-width:767px){
#privacy .privacyContent{
margin-bottom:15px;
padding-bottom:15px;
}
}
#privacy .privacyContent .ttl{
font-size:114%;
margin-bottom:20px;
color: #000;
}
@media screen and (max-width:767px){
#privacy .privacyContent .ttl{
font-size:11pt;
margin-bottom:10px;
}
}
#privacy .privacyContent .note{
padding-bottom:10px;
}
@media screen and (max-width:767px){
#privacy .privacyContent .note{
padding-bottom:5px;
}
}
#privacy .privacyContent .note li{
margin-left: 2em;
}
#privacy .privacyContent .note li .number{
margin-left: -2em;
display: inline-block;
width: 2em;
}
/*---------------------------------------*/
/* transactions */
/*---------------------------------------*/
#transactions .infoArea{
max-width: 800px;
}
#transactions .infoArea .infoList{
width: 100%;
margin-bottom: 75px;
}
@media screen and (max-width:980px){
#transactions .infoArea .infoList{
margin-bottom: 50px;
}
}
@media screen and (max-width:767px){
#transactions .infoArea .infoList{
margin-bottom: 20px;
}
}
#transactions .infoArea .infoList tr{
border-bottom: 1px solid #e1e1e1;
line-height: 1.6;
}
#transactions .infoArea .infoList tr:first-child{
border-top: 1px solid #e1e1e1;
}
#transactions .infoArea .infoList tr th{
width: 200px;
padding: 21px 1%;
letter-spacing: 0.05em;
color: #000;
}
@media screen and (max-width:767px){
#transactions .infoArea .infoList tr th{
display: block;
width: 96%;
padding: 15px 2% 5px;
}
}
#transactions .infoArea .infoList tr td{
padding: 21px 1% 21px 0;
}
@media screen and (max-width:767px){
#transactions .infoArea .infoList tr td{
display: block;
width: 96%;
padding: 5px 2% 20px;
}
}
/*---------------------------------------*/
/* magazine */
/*---------------------------------------*/
#magazine .topArea{
max-width: 800px;
}
#magazine .topArea .ttl{
font-size: 143%;
color: #000;
margin-bottom: 45px;
font-weight: bold;
}
@media screen and (max-width:767px){
#magazine .topArea .ttl{
font-size: 13pt;
margin-bottom: 20px;
}
}
#magazine .topArea .note{
margin-bottom: 20px;
}
@media screen and (max-width:767px){
#magazine .topArea .note{
margin-bottom: 10px;
}
}
#magazine .topArea .comment{
margin-left: 1em;
font-size: 93%;
color: #666;
line-height: 1.5;
margin-bottom: 8px;
}
@media screen and (max-width:767px){
#magazine .topArea .comment{
font-size: 8pt;
margin-bottom: 5px;
}
}
#magazine .topArea .comment .kome{
margin-left: -1em;
display: inline-block;
width: 1em;
}
#magazine .formArea{
max-width: 800px;
}
#magazine .formArea .magazineContent{
width: 43.75%;
float: left;
margin-right: 12.5%;
margin-bottom: 50px;
}
@media screen and (max-width:767px){
#magazine .formArea .magazineContent{
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 30px;
}
}
#magazine .formArea .magazineContent:nth-child(2n){
margin-right: 0;
}
#magazine .formArea .magazineContent .ttl{
font-size: 107%;
color: #000;
margin-bottom: 20px;
line-height: 1.5;
}
@media screen and (max-width:767px){
#magazine .formArea .magazineContent .ttl{
font-size: 10pt;
margin-bottom: 10px;
}
}
#magazine .formArea .magazineContent table{
width: 100%;
margin-bottom: 20px;
}
@media screen and (max-width:767px){
#magazine .formArea .magazineContent table{
margin-bottom: 15px;
}
}
#magazine .formArea .magazineContent input[type="text"]{
border: 1px solid #d4d4d4;
border-radius: 0;
font-size: 100%;
height: 40px;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
-webkit-appearance: none;
cursor: pointer;
color: #666;
}
#magazine .formArea .magazineContent input[type="text"]:focus {
border: 1px solid #4367a6;
}
#magazine .formArea .magazineContent input[type="submit"]{
-webkit-appearance: none;
display: block;
width: 100%;
font-size: 100%;
max-width: 113px;
height: 33px;
border: 1px solid #000;
text-align: center;
transition: all 0.3s ease;
background: #000;
color: #fff;
cursor: pointer;
font-weight: bold;
letter-spacing: 0.1em;
border-radius: 0;
}
#magazine .formArea .magazineContent input[type="submit"]:hover{
background: #fff;
color: #000;
}
/*---------------------------------------*/
/* commonPage */
/*---------------------------------------*/
.commonPage .centerContentOuter{
text-align:center;
}
.commonPage .centerContentOuter .centerContent{
display:inline-block;
text-align:left;
}
.commonPage .btn{
margin-top: 50px;
}
@media screen and (max-width:767px){
.commonPage .btn{
margin-top: 30px;
}
}
.commonPage .btn a{
background: #000;
max-width: 250px;
box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
margin: 0 auto;
font-size: 114.5%;
padding: 10px 0;
}
@media all and (-ms-high-contrast:none) {
.commonPage .btn a{
padding: 12px 0 8px;
}
}
@media screen and (max-width:767px){
.commonPage .btn a{
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
font-size: 10pt;
padding: 6px 0;
}
}
.commonPage .btn a:after{
background: #4367a6;
}
.commonPage .btn a .txt{
margin-left: 30px;
}
@media screen and (max-width:767px){
.commonPage .btn a .txt{
margin-left: 20px;
}
}
.commonPage .btn a .txt .icon{
margin-top: -4px;
right: 23px;
}
@media screen and (max-width:767px){
.commonPage .btn a .txt .icon{
right: 20px;
}
}
@media all and (-ms-high-contrast:none) {
.commonPage .btn a .txt .icon{
margin-top: -8px;
}
}
/*---------------------------------------*/
/* faq */
/*---------------------------------------*/
#faq .ichiran {
	margin-bottom: 50px;
}
#faq .ichiran p {
	font-size: 114.5%;
	margin-bottom:15px;
	line-height: 1.6;
}
#faq .ichiran p a {
	color: #4367a6;
	text-decoration: none;
}
#faq .ichiran p a:hover {
	color: #4367a6;
	text-decoration: underline;
}
#faq .ichiran p img {
	width: 15px;
	height: auto;
	vertical-align: middle;
	margin-right: 5px;
}
#faq p.faq_q{
	font-size: 130%;
	font-weight: bold;
	padding-left:2.1em;
	text-indent:-2.1em;
	line-height: 1.6;
}
#faq p.faq_q span {
	font-size: 34px;
	font-family: 'Roboto Condensed',"游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	color: #4367a6;
	font-style: italic;
}
#faq p.faq_a{
	font-size: 114.5%;
	border-bottom: 1px dotted #ccc;
	margin-bottom: 1.5em;
	padding-left:2.3em;
	text-indent:-2.3em;
	padding-bottom: 1.5em;
	line-height: 1.6;
}
#faq p.faq_a span {
	font-size: 34px;
	font-family: 'Roboto Condensed',"游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-style: italic;
	font-weight: bold;
	color: #666;
}
#faq .mb50 {
	margin-bottom: 50px !important;
}
#faq .centring {
	text-align: center;
	margin: 0 auto;
}
.hmenu {
	
}

#faq #link01,#faq #link02,#faq #link03,#faq #link04,#faq #link05,#faq #link06,#faq #link07,#faq #link08,#faq #link09,#faq #link10,#faq #link11,#faq #link12,#faq #link13,#faq #link14,#faq #link15,#faq #link16,#faq #link17,#faq #link18,#faq #link19,#faq #link20,#faq #link21,#faq #link22,#faq #link23,#faq #link24,#faq #link25,#faq #link26,#faq #link27,#faq #link28,#faq #link29,#faq #link30 {
	margin-top:-100px;
	padding-top:100px;
}

@media screen and (max-width:767px){
	
#faq #link01,#faq #link02,#faq #link03,#faq #link04,#faq #link05,#faq #link06,#faq #link07,#faq #link08,#faq #link09,#faq #link10,#faq #link11,#faq #link12,#faq #link13,#faq #link14,#faq #link15,#faq #link16,#faq #link17,#faq #link18,#faq #link19,#faq #link20,#faq #link21,#faq #link22,#faq #link23,#faq #link24,#faq #link25,#faq #link26,#faq #link27,#faq #link28,#faq #link29,#faq #link30 {
	margin-top:-80px;
	padding-top:80px;
}

}