@charset "UTF-8";
   html,
body{
overflow-x: hidden;
}
html { font-size: 62.5%;
word-break: normal;
}
body {
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
color: #000;
font-size: 1.8rem;
line-height: 1.5em;
} a{
color: #000;  
}
h2{
font-size: 7rem;
}
h3{
font-size: 3.5rem;
}
.none{
display: none;
}
.block{
display: block;
}
.br_pc{
display: block;
}
.br_sp{
display: none;
}
.border{
border: 1px solid #e6e6e6;
}
@media screen and (max-width:768px){
p{
font-size: 1.4rem;
}
.br_sp{
display: inline;
}
.br_pc{
display: none;
}
}  .p-commonBox{
width: 100%;
height: auto;
margin: 50px auto 0 auto;
}
.p-commonBox .p-commonBox__inner{
padding: 0 50px;
}
.p-commonBox .p-commonBox__inner__box{
max-width: 1200px;  margin: 0 auto;
} .p-commonBox--max{
width: 100%;
background-color: #fff;
height: auto;
margin: 0 auto;
}
.p-commonBox--max .p-commonBox__inner{
padding: 0 10px;
}
.p-commonBox--max .p-commonBox__inner__box{
max-width: 100%; background-color: #fff; margin: 0 auto;
} .boxSide{
display: -webkit-flex;
display: flex;
width: 100%;
}
.boxSide__inner{
width: 50%;
}
.boxSide-img{
display: -webkit-flex;
display: flex; }
.boxSide-img img{
} .p-commonHeader{
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.08);
position: fixed;
top: 0;
z-index: 6;
}
#logoBox{
margin-top: 20px;
z-index: 100;
}
#logoBox a{
display: block;
}
.p-commonHeader h1{
color: #808080;
font-size:1.1rem;
padding-left: 1rem;
line-height: 0;
}
.p-commonHeader__inner{
height: 86px;
background-color: #f8f9bd;
display: -webkit-flex;
display: flex;
justify-content:space-between;
align-items:center;
}
.p-commonHeader .logo{
width: 250px;
}
#navBox{
display: -webkit-flex;
display: flex;
align-items:center;
}
#navBox nav{
}
#navBox ul{
display: flex;
margin-right: 20px;
}
#navBox ul li{
position: relative;
}
#navBox ul li a{
font-weight: bold;
margin-left: clamp(15px, 2.5vw, 35px);
font-size: clamp(12px, 1.3vw, 15px);
color: #4d4d4d;
position: relative; }
#navBox ul li a:hover{
color:#000;
}
#navBox ul li a::after {
content: ''; position: absolute;
bottom: -5px;
left: 0; width: 100%;
height: 2px;
background:#c30000; transition: all .3s;
transform: scale(0, 1); transform-origin: left top; } #navBox ul li.current-menu-item a::after,
#navBox ul li a:hover::after {
transform: scale(1, 1); } .current-menu-item > a{
border-bottom: #c30000 2px solid;
padding-bottom: 2px;
}
.current-menu-item ::after{
display: none;
}
.current-none ul a{
border: none;
}  #navBox nav ul.sub-menu{ position: absolute;
left:-50%;
top:50px;
z-index: 4; background:#fff; visibility: hidden;
opacity: 0; transition: all .3s;
display: flex;
flex-direction: column;
width: 280px;
margin: 0;
padding: 30px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5);
} #navBox nav #menu-global-nav li:hover > ul{
visibility: visible;
opacity: 1;
transition: all .3s;
} #navBox ul.sub-menu li a{
color: #4d4d4d;
margin: 0;
line-height: 3em;
}
#navBox ul.sub-menu li a:hover,
#navBox ul.sub-menu li a:active{
color: #000;
} input.search {
border: 1px solid #999;
background-color: #fff;
color: #000;
font-size: 12px;
height: 35px;
padding: 0 50px 0 10px;
text-align: left;
border-radius: 40px;
}
.search-box{
display: inline-block;
}
.search-box table{
position: relative;
}
.search-bt{
position: absolute;
right:17px;
top: 7px;
width: 20px;
} @media screen and (max-width:992px){
#navBox{
margin-top: 30px;
}
#navBox ul li a{
margin-left: 2.4rem;
font-size: 1.2rem;
}
.search-box{
position: absolute;
top: 20px;
right: 30px;
}
}
@media screen and (max-width:768px){
.p-commonBox .p-commonBox__inner{
padding: 0 20px;
} header{
position: fixed;
top: 0;
z-index: 999;
}
header .p-commonHeader__inner{
height: 90px;
}
.search-box{
display: none;
width: 30px;
height: 30px;
}
.fixed{
position: fixed;
z-index: 6;
}  .drawer_hidden {
display: none; } .drawer_open {
display: flex;
justify-content: center;
align-items: center;
z-index: 100; cursor: pointer;
width: 35px;
height: 35px;
margin-right: 20px;
background-color: #e6e6e6;
border-radius: 4px;
} .drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background: #333;
transition: 0.5s;
position: absolute;
} .drawer_open span:before {
bottom: 8px;
} .drawer_open span:after {
top: 8px;
} #drawer_input:checked ~ .drawer_open span {
background: rgba(255, 255, 255, 0);
} #drawer_input:checked ~ .drawer_open span::before {
bottom: 0;
transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
top: 0;
transform: rotate(-45deg);
} .drawer_btn{
z-index: 999;
}
.nav_toggle {
width: 100%;
height: 100%;
position: fixed;
top: -1000px;
right: 0;
overflow-y: scroll;
z-index: 99;
background: #fff;
text-align: center;
}
.spaceNone{
padding-top: 100px;
} #drawer_input:checked ~ .nav_toggle {
bottom: 0; } 
#navBox{
margin-top: 0;
}
#navBox .nav_toggle ul{
display: block;
margin: 0;
}
#navBox .nav_toggle ul li {
border-top: 1px solid #ccc;
}
#navBox .nav_toggle ul li a:hover{
opacity: 0.3;
}
#navBox nav #menu-global-nav li:hover > ul{
transition: all .0s;      
}
#navBox ul li a::after{
content: none;  
}    
#navBox .nav_toggle li.menu-item-has-children ul{
visibility:visible; opacity:1; display: none; transition:none; position: static;
background:#fff;
box-shadow: none;
width: 100%;
padding: 0;
}
#navBox .nav_toggle li.menu-item-has-children ul li a{
line-height: 4em;
border: none;
}
#navBox .nav_toggle li.menu-item-has-children ul li{
border: none;
}
#navBox .nav_toggle li.menu-item-has-children ul li:first-child{
border-top: 1px solid #ccc; 
}
.search-box{
display: none;
} #navBox .nav_toggle li a{
line-height: 4em;
width: 100%;
display: inline-block;
margin: 0;
font-size: 15px;
}  #navBox .nav_toggle ul li.menu-item-has-children::after{
content:'';
position: absolute;
right:20px;
top:30px;
width:10px;
height:10px;
border-top: 2px solid #999;
border-right:2px solid #999;
transform: rotate(135deg);
}   
#navBox .nav_toggle ul li.active::after{
transform: rotate(-45deg);
}
.nav_header_sp_right{
position: fixed;
top: 0;
right: 0;
width: 80%;
height: 100%;
animation: slideRight 0.5s;
padding-top: 90px;
}
@keyframes slideRight {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(0%);
}
}
.nav_header_sp_none{
position: fixed;
top: 0;
left: 100%;
width: 80%;
height: 100%;
animation: slideNone 0.5s;
padding-top: 90px;
}
@keyframes slideNone {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
.no_scroll{
overflow: hidden;
}
}  :hover{
transition : 0.5s;
}
a:hover{
color: #0a347f;
}
a p:hover{
color: #0a347f;
}
li a:hover{
color: #0a347f;
} .titleSection{
font-weight: bold;
display: flex;
flex-direction: column;
}
.titleSection span{
font-weight: bold;
color: #c30000;
font-size:15px;
font-size: clamp(20px, 2.7vw, 27px);
margin-top: 1em;
}
@media screen and (max-width:768px){
.titleSection span{
margin-top: 0.3em;
}
}  .btnicon{ position: relative;
overflow: hidden; text-decoration: none;
display: inline-block;
outline: none;
transition: ease .2s;
} .btnicon a {
position: relative;
z-index: 3; line-height: normal;
font-weight: bold;
padding: 10px 30px;
display: block;
}
.btnicon a::after{
content: "";
display: inline-block;
background-image: url(//www.itall.co.jp/wp-content/themes/itallsite/img/common/icon_btn.svg);
background-repeat: no-repeat;
width: 1em;
height: 1em;
margin-bottom: 1px;
width: 18px;
height: 18px;
position: relative;
top: 0.2em;
left: 0.5em;
} .btnicon:before {
content: ''; position: absolute;
top: 0;
left: 0;
z-index: 2; width: 100%;
height: 100%; transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
} .btnicon:hover:before{
transform-origin:left top;
transform:scale(1, 1);
} .btn-red{
border-radius:45px;
border:#555 1px solid;
}
.btn-red a::after{ filter: invert(15%) sepia(51%) saturate(5805%) hue-rotate(353deg) brightness(89%) contrast(118%);
}
.btn-red:hover{
border: 1px solid #c30000;
}
.btn-red:hover a{
color:#fff;
}
.btn-red a:hover::after{ filter: invert(100%) sepia(86%) saturate(246%) hue-rotate(201deg) brightness(117%) contrast(100%);
}
.btn-red:before{
background:#c30000;
} .btn-white{
border-radius:45px;
border:#fff 1px solid;
}
.btn-white a{
color:#fff;
}
.btn-white a::after{ filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(136deg) brightness(109%) contrast(100%);
}
.btn-white:hover{
border: 1px solid #fff;
}
.btn-white:hover a{
color:#0a347f;
}
.btn-white a:hover::after{ filter: invert(12%) sepia(97%) saturate(2489%) hue-rotate(213deg) brightness(91%) contrast(94%);
}
.btn-white:before{
background:#fff;
} .btn-blue{
border-radius:45px;
border:#555 1px solid;
}
.btn-blue a::after{ filter: invert(17%) sepia(52%) saturate(2570%) hue-rotate(199deg) brightness(96%) contrast(98%);
}
.btn-blue:hover{
border: 1px solid #0a347f;;
}
.btn-blue:hover a{
color:#fff;
}
.btn-blue a:hover::after{ filter: invert(100%) sepia(86%) saturate(246%) hue-rotate(201deg) brightness(117%) contrast(100%);
transition-delay: 0.3s;
}
@keyframes late-open {
to {
display: block;
}
}
.btn-blue:before{
background:#0a347f;;
} .btn-blue-noborder{
border-radius:45px;
background-color: #fff;
border: none;  
display: inline-block;
}
.btn-blue-noborder a{
line-height: normal;
padding: 10px 30px;
display: block;
}
.btn-blue-noborder:hover{
border: none;
}
.btn-blue-noborder:hover a{
color:#fff;
}
.btn-blue-noborder a:hover::after{ filter: invert(100%) sepia(86%) saturate(246%) hue-rotate(201deg) brightness(117%) contrast(100%);
}
.btn-blue-noborder:before{
background:#0a347f;
}
.blue-active{
background:#0a347f;
}
.blue-active a{
color: #fff;
}
.blue-active a::after{ filter: invert(100%) sepia(86%) saturate(246%) hue-rotate(201deg) brightness(117%) contrast(100%);
}
.passive{
background-color: #f2f2f2;
border: #ccc 1px solid;
}
.passive a{
color: #333;
}
.passive:hover{
border: 1px solid #ccc;
opacity: 0.8;
}
.passive a:hover{
color: #333;
}  .p-slide-left{
opacity: 0;
}
.slidein{
opacity: 1;
}
.slideinLeft {
animation: slideinLeft 2s;
}
@keyframes slideinLeft {
0% {
transform: translateX(-30px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
} .p-slide-top{
opacity: 0;
}
.slidein{
opacity: 1;
}
.slideinTop{
animation: slideinTop 1s;
}
@keyframes slideinTop{
0% {
transform: translateY(-20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
} .news-list{
margin: 20px 30px 20px 50px;
border-top:  1px solid #e6e6e6;
}
.news-list li{
border-bottom:  1px solid #e6e6e6;
font-size: 14px;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.6em;
padding-right: 60px;
position: relative;
}
.news-list li::after{
content: "";
display: inline-block;
background-image: url(//www.itall.co.jp/wp-content/themes/itallsite/img/common/news_select.svg);
width: 24px;
height: 24px;
position: absolute;
right: 25px;
top: 35%;
}
.news-list li a{
display: -webkit-flex;
display: flex;  
align-items: flex-start;
padding: 25px 0;
}
.news-list li:hover{
background-color: #eaedf4;
}
.news-list li .text:hover{
color: #0a347f;
text-decoration:underline;
}
.news-list  p{
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.6em;
}
.news-list  p.text{
padding-right: 60px;
}
.news-list  li time{
color: #999;
border: 1px solid;
min-width: 130px;
text-align: center;
margin-right: 30px;
font-size: clamp(12px, 1.3vw, 14px);
background-color: #fff;
}
@media screen and (max-width:768px){
.news-list{
margin: 0;
}
.news-list{
margin: 0px 0px 20px 0px;
}
.news-list li{
padding-right: 0;
}
.news-list li a{
display: block;
}
.news-list li time{
display: block;
margin-bottom: 10px;
width: 0;
}
.news-list li::after{
display: none;
}
.news-list  p.text{
padding-right: 60px;
}
} .p-commonRecruit{
margin-top: 80px;
}
.p-commonRecruit .recruit-banner img{
width: 100%;
} #engage-contributions-widget-wrapper{
width: 100%;
height: 100%;
border: 1px solid #08348b;
}
.p-commonRecruit .boxSide{
gap: 1vw;
}
.p-commonRecruit .boxSide__inner{
display: -webkit-flex;
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-wrap: nowrap;
position: relative;
}
.p-commonRecruit .boxSide__inner img{
width: 100%;
}
.recruit_banner{
background: url(//www.itall.co.jp/wp-content/themes/itallsite/img/common/recruit_banner.png) no-repeat center center;
background-size: cover;
height: 300px;
}
.recruit_banner:hover{
background-color:rgba(255,255,255,0.2);
background-blend-mode:lighten;
}
.recruit_banner a{
display: block;
width: 100%;
height: 100%;
}
.recruit_banner a:hover{
}
.banner_text{
color: #fff;
position: absolute;
top: 45px;
left: 30px;
margin-right: 20px;
}
.banner_text h2,
.banner_text p,
.banner_text .btnicon
{
color: #fff;
}
.recruit_banner h2{
font-size: 30px;
font-size: clamp(40px, 5vw, 60px);
font-weight: bold;
margin-bottom: 15px;
}
.recruit_banner p{
line-height: 1.5em;
margin-bottom: 15px;
font-size: clamp(13px, 1.5vw, 17px);
}
.recruit_banner p:hover{
color: #fff;
}
.recruit_banner .btnicon{
border: 2px solid;
}
.recruit_banner .btnicon a{
}
@media screen and (max-width:992px){
.p-commonRecruit .boxSide{
display: block;
}
.p-commonRecruit .boxSide__inner{
display: block;
width: 100%;
margin-bottom: 30px;
}
#engage-contributions-widget-wrapper{
width: 100%;
height: 320px;
border: 1px solid #08348b;
}
} footer{
background-color: #fff;
} .p-commonContact{
background-color: #0a347f;
color: #fff;
padding: 60px 0;
}
.p-commonContact .p-commonBox__inner__box{
background-color: #0a347f;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.p-commonContact h2{
font-size: 30px;
font-size: clamp(40px, 5vw, 50px);
font-weight: bold;
display: -webkit-flex;
display: flex;
align-items: center; }
.p-commonContact .contactBtn-set{
display: -webkit-flex;
display: flex;
}
.p-commonContact .btnicon{
border: 2px solid #fff;
display: -webkit-flex;
display: flex;
}
.p-commonContact .btnicon:first-child{
margin-right: 15px;
}
.p-commonContact h2,
.p-commonContact .btnicon{
}
.p-commonContact .btnicon a{
font-size: 10px;
font-size: clamp(12px, 1.8vw, 18px);
padding-top: clamp(10px, 2vw, 20px);
padding-bottom: clamp(10px, 2vw, 20px);
padding-left: 3px;
padding-right: 3px;
padding-left: clamp(10px, 6vw, 100px);
padding-right: clamp(10px, 6vw, 100px);
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
@media screen and (max-width:768px){
.p-commonContact .p-commonBox__inner__box{
display: block;
}
.p-commonContact .btnicon{
margin-top: 30px;
width: 50%;
}
} .maparea{
width: 100%;
padding: 70px 0 60px 0;
background-color: #fff;
} .p-commonFooter .logo{
width: clamp(200px, 37vw, 370px);
}
.p-commonFooter{
background-color: #e6eaf2;
padding: 60px 0;
margin-top: 0;
}
.p-commonFooter .p-commonBox__inner__box{
background-color: #e6eaf2;
}
.p-commonFooter address{
font-size: 12px;
font-size: clamp(13px, 1.5vw, 15px);
color: #4d4d4d; 
line-height: 1.5em;
}
.p-commonFooter .pageLink:nth-child(2n){
clear: both;
}
.p-commonFooter .pageLink li,.snsLink a{
float: left;
}
.p-commonFooter .pageLink li a{
font-size: 12px;
font-size: clamp(13px, 1.7vw, 17px);
width: 150px;
display: inline-block;
padding-bottom: 15px;
}
.pageSec{
clear: both;
font-size: 12px;
font-size: clamp(12px, 1.4vw, 14px);
margin: 50px 0;
}
.pageSec a{
color: #4d4d4d;  
}
.snsLink{
}
.snsLink ul{
display: -webkit-flex;
display: flex;
justify-content: flex-end;  
}
.snsLink a{
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
background-color: #fff;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
margin-right: 40px;
}
.snsLink a:hover{
transform: scale(1.1, 1.1);
opacity: 0.8;
}
.snsLink img{
width: 35px;
} .p-commonFooter-service{
background-color: #fff;
font-size: clamp(11px, 1.1vw, 11px);
margin: 0;
}
.p-commonFooter-service .p-commonBox__inner__box{
background-color: #fff;
}
.serviceTitle{
margin: 50px 0 20px 0;
}
.p-commonFooter-service .serviceLink{
padding-bottom: 40px;
margin-bottom: 80px;
}
.p-commonFooter-service .serviceLink li{
float: left;
line-height: 1.5em;
}
.p-commonFooter-service .serviceLink li a{
color: #4d4d4d;
padding: 0 1em;
border-right: 1px solid #4d4d4d;
line-height: 2em;
}
.otherlink{
width: 100%;
display: -webkit-flex;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 20px 0;
}
.otherlink a{
display: block;
margin-left: 15px;
}
.otherlink a img{
height: 70px;
}
.copy{
color: #808080;
text-align: center;
display: inline-block;
width: 100%;
border-top:1px solid #e6e6e6;
padding: 10px 0;
font-size: clamp(11px, 1.1vw, 11px);
}
@media screen and (max-width:992px){
.p-commonFooter .p-commonBox__inner__box{
display: block;
}
.p-commonFooter .boxSide__inner{
width: 100%;
}
.p-commonFooter .boxSide__inner:nth-child(2n){
margin-top: 40px;
}
.p-commonFooter .pageLink li a{
padding-bottom: 25px;
}
}
@media screen and (max-width:768px){
.otherlink a img{
height: 50px;
}
}