@media only screen and (min-width : 501px) {
body {
background: url("../images/top/pc_bg.jpg") no-repeat top center;
background-size: cover;
background-attachment: fixed;
}
}
main{
background: #fff;
}
.intro{
padding: 4% 6% 3%;
}
.pagehead-logo{
width:  64.5%;
}
.main-area{
}
.tab-list {
background: #fff;
font-size: clamp(12px, 4.1vw, 19px);
height: 62px;
overflow: hidden;
position: relative;
border-bottom: 4px solid #fff;
line-height: 62px;
padding: 4px 0 0;
}
.myFixed .tab-list {
position:fixed;
top:62px;
left:0;
right: 0;
margin: auto;
z-index:999;
width: 100%;
max-width: 500px;
overflow: hidden;
padding: 4px 0 0;
}
.myFixed .inner-wrap {
padding: 62px 0 0;
}
.tab-list.selected-num01 {border-bottom: 4px solid #fe4749;}
.tab-list.selected-num02 {border-bottom: 4px solid #f99101;}
.tab-list.selected-num03 {border-bottom: 4px solid #00ca8a;}
.tab-list.selected-num04 {border-bottom: 4px solid #309de4;}
.tab-item {
width: 23.8%;
height: 50px;
border-radius: 4px 4px 0 0;
background-color: #fff;
font-weight: 600;
cursor: pointer;
text-align: center;
color: #fff;
font-size: clamp(12px, 3.3vw, 14px);
line-height: 48px;
position: relative;
top: 6px;
display: block;
float: left;
}
.tab-item.is-active {
color: #fff;
width: 28.6%;
height: 54px;
line-height: 54px;
top: 0;
}
.tab-item.tab-num01 {background:#fe4749;}
.tab-item.tab-num02 {background:#f99101;}
.tab-item.tab-num03 {background:#00ca8a;}
.tab-item.tab-num04 {background:#309de4;}
.at-first,.learn,.work,.meet{
padding: 0 4% 1%;
}
.main-box{
position: relative;
overflow: hidden;
padding: 0 0 5%;
}
.main-box h2{
position: absolute;
font-weight: 700;
font-size: clamp(12px, 6.6vw, 33px);
line-height: 1.5;
text-align: center;
width: 100%;
left: 0;
top: 30%;
color: #fff;
}
.at-first .main-box h2{
padding: 0 0 0 3.5%;
}
.learn .main-box h2,
.work .main-box h2,
.meet .main-box h2{
top: 44%;
}
.main-info{
position: relative;
margin: -4% 0 2%;
}
.single-cont{
padding: 4% 0;
border-bottom: 1px solid #cccccc;
}
.single-cont img{
}
.single-cont h3{
font-size: clamp(12px, 4.65vw, 23px);
font-weight: 500;
line-height: 1.4;
margin: 0 0 1.5%;
}
.multiple2{
height: 3em;
}
.multiple3{
height: 4.5em;
}
.at-first .single-cont h3{
color: #fe4749;
}
.learn .single-cont h3{
color: #f99101;
}
.work .single-cont h3{
color: #00ca8a;
}
.meet .single-cont h3{
color: #309de4;
}
.single-cont p{
font-size: clamp(12px, 3.75vw, 18px);
line-height: 1.4;
font-weight: 500;
}
.single-cont p span{
font-size: clamp(12px, 3.5vw, 17px);
}
.col2-box{
display: flex;
justify-content: space-between;
padding: 4% 0;
border-bottom: 1px solid #cccccc;
}
.col2-box .single-cont{
width: 50%;
border-bottom: none;
}
.col2-box .single-cont:nth-child(1){
padding: 0 3.5% 0 0;
border-right: 1px solid #cccccc;
}
.col2-box .single-cont:nth-child(2){
padding: 0 0 0 3.5%;
}
.single-cont.last-unit,
.col2-box.last-unit{
border-bottom: none;
padding: 4% 0 12%;
}
.single-cont img{
border-radius: 4px;
}
.single-cont img.add-line{
border: 1px solid #000;
}
.col2-box .single-cont.bnr-ill{
display: flex;
align-items: center;
padding: 0 0 10% 3.5%;
}



@media only screen and (min-width : 501px) {
.tab-list {
font-size: clamp(12px, 4.1vw, 19px);
height: 80px;
border-bottom: 6px solid #fff;
line-height: 80px;
}
.myFixed .tab-list {
top:94px;
}
.myFixed .inner-wrap {
padding: 80px 0 0;
}
.tab-list.selected-num01 {
border-bottom: 6px solid #fe4749;
}
.tab-list.selected-num02 {
border-bottom: 6px solid #f99101;
}
.tab-list.selected-num03 {
border-bottom: 6px solid #00ca8a;
}
.tab-list.selected-num04 {
border-bottom: 6px solid #309de4;
}
.tab-item {
height: 74px;
border-radius: 6px 6px 0 0;
font-size: clamp(12px, 3.8vw, 18px);
line-height: 60px;
top: 10px;
}
.tab-item.is-active {
height: 74px;
line-height: 74px;
}
.single-cont img{
border-radius: 6px;
}
}