@charset "UTF-8";


/*PC*/
@media print, screen and (min-width: 768px) {
#feature{
position: relative;
overflow: hidden;
margin: 0 auto;
background: url("../images/com/bg_img2.jpg") center center repeat;
}

#feature .block{
position: relative;
margin: 0;
padding: 160px 0 0;
box-sizing: border-box;
overflow: hidden;
}

#feature .block:last-child{
margin-bottom: 0;
}

#feature .section_wrap{
position: relative;
width:90%;
margin: 0 auto;
display: flex;
}

#feature .section_wrap .txt_box{
width:100%;
margin:0 auto;
position: relative;
text-align: center;
}

#feature .section_wrap .txt_box .en_ttl,
#feature .section_wrap .txt_box .ttl{
color: #FFF;
}

#feature .section_wrap .txt_box .red_txt{
font-size: 3.2rem;
font-weight: 800;
letter-spacing: -.2rem;
line-height: 1.2;
margin:0;
color: #FFF;
}

#feature .section_wrap .txt_box .txt span{
font-size: 2.6rem;
font-weight: 800;
}

#feature .common_btn_box{
text-align: center;
}


#feature .section_wrap .img{
width:100%;
position: relative;
margin: 100px 0 0;
}

#feature article{
width: 100%;
overflow: hidden;
position:absolute;
bottom:-20px;
left: 0;
z-index: 1;
}

#feature .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#feature .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 9rem;
font-weight: 700;
letter-spacing: -.5rem;
line-height: 1;
overflow: hidden;
color:#FFF;
opacity: .35;
}

#feature .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#feature .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#feature .icon1{
position: absolute;
top: 20px;
left: 30px;
z-index: 0;
width: 300px;
}

#feature .icon2{
position: absolute;
top:120px;
right: -60px;
z-index: 0;
width: 500px;
}

#feature .icon3{
position: absolute;
top: 300px;
left: 200px;
z-index: 0;
width:220px;
}

#feature .block .fe_list{
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#feature .block .fe_list li{
width: 23.5%;
margin-bottom: 2%;
padding:20px;
box-sizing: border-box;
border-radius: 1rem;
}

#feature .block .fe_list li .img{
border-radius: .6rem;
overflow: hidden;
margin: 0 0 20px;
}

#feature .block .fe_list li .no{
font-size: 1.4rem;
line-height: 1;
margin: 0 0 10px;
}

#feature .block .fe_list li .no span{
font-size: 2rem;
}

#feature .block .fe_list li h3{
font-size: 1.8rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 10px;
}

#feature .block .fe_list li .txt{
color: #FFF;
font-weight:700;
font-size: 1rem;
line-height: 1.8;
letter-spacing: .06rem;
}




#feature .block .fe_list li.list1{
border: 4px solid #8fa523;
}

#feature .block .fe_list li.list1 .no,
#feature .block .fe_list li.list1 h3{
color: #8fa523;
}

#feature .block .fe_list li.list1{
border: 4px solid #8fa523;
border-radius: 1rem;
}

#feature .block .fe_list li.list2{
border: 4px solid #29ab6b;
}

#feature .block .fe_list li.list2 .no,
#feature .block .fe_list li.list2 h3{
color: #29ab6b;
}

#feature .block .fe_list li.list3{
border: 4px solid #0095c7;
}

#feature .block .fe_list li.list3 .no,
#feature .block .fe_list li.list3 h3{
color: #0095c7;
}

#feature .block .fe_list li.list4{
border: 4px solid #ec669c;
}

#feature .block .fe_list li.list4 .no,
#feature .block .fe_list li.list4 h3{
color: #ec669c;
}

#feature .block .fe_list li.list5{
border: 4px solid #eb4215;
}

#feature .block .fe_list li.list5 .no,
#feature .block .fe_list li.list5 h3{
color: #eb4215;
}

#feature .block .fe_list li.list6{
border: 4px solid #fdaa13;
}

#feature .block .fe_list li.list6 .no,
#feature .block .fe_list li.list6 h3{
color: #fdaa13;
}

#feature .block .fe_list li.list7{
border: 4px solid #decb0e;
}

#feature .block .fe_list li.list7 .no,
#feature .block .fe_list li.list7 h3{
color: #decb0e;
}

#feature .block .fe_list li.list8{
border: 4px solid #bfb17d;
}

#feature .block .fe_list li.list8 .no,
#feature .block .fe_list li.list8 h3{
color: #bfb17d;
}



}
/*sp*/
@media only screen and (max-width: 767px) {
#feature{
position: relative;
overflow: hidden;
padding: 60px 0 40px;
box-sizing: border-box;
margin: 0 auto;
background: url("../images/com/bg_img2.jpg") center center repeat;
}

#feature .section_wrap{
position: relative;
width:90%;
margin: 0 auto 30px;
}

#feature .section_wrap .txt_box{
width:100%;
margin:0 auto;
position: relative;
text-align: center;
}

#feature .section_wrap .txt_box .en_ttl,
#feature .section_wrap .txt_box .ttl{
color: #FFF;
}

#feature .section_wrap .txt_box .red_txt{
font-size:1rem;
font-weight: 800;
letter-spacing: -.1rem;
line-height: 1.6;
margin:0;
color: #FFF;
}

#feature .section_wrap .txt_box .txt span{
font-size: 1.4rem;
font-weight: 800;
}

#feature .common_btn_box{
text-align: center;
}

#feature article{
width: 100%;
overflow: hidden;
position:absolute;
bottom:-10px;
left: 0;
z-index: 1;
}

#feature .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#feature .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4rem;
font-weight: 700;
letter-spacing: -.1rem;
line-height: 1;
overflow: hidden;
color:#FFF;
opacity: .35;
}

#feature .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#feature .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#feature .section_wrap .img{
width:100%;
position: relative;
margin: 30px auto 0;
}

#feature .icon1{
position: absolute;
top: 10px;
left: 5px;
z-index: 5;
width: 60px;
}

#feature .icon2{
position: absolute;
top: 20px;
right: -10px;
z-index: 5;
width: 80px;
}

#feature .icon3{
display: none;
}

#feature .block .fe_list{
width: 90%;
margin: 0 auto;
}

#feature .block .fe_list li{
width:100%;
margin-bottom: 30px;
padding:20px;
box-sizing: border-box;
border-radius: 1rem;
}

#feature .block .fe_list li .img{
border-radius: .6rem;
overflow: hidden;
margin: 0 0 20px;
}

#feature .block .fe_list li .no{
font-size: 1rem;
line-height: 1;
margin: 0;
}

#feature .block .fe_list li .no span{
font-size: 1.6rem;
}

#feature .block .fe_list li h3{
font-size: 1.2rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 10px;
}

#feature .block .fe_list li .txt{
color: #FFF;
font-weight:700;
font-size: 1rem;
line-height: 1.8;
letter-spacing: .06rem;
}

#feature .block .fe_list li.list1{
border: 4px solid #8fa523;
}

#feature .block .fe_list li.list1 .no,
#feature .block .fe_list li.list1 h3{
color: #8fa523;
}

#feature .block .fe_list li.list1{
border: 4px solid #8fa523;
border-radius: 1rem;
}

#feature .block .fe_list li.list2{
border: 4px solid #29ab6b;
}

#feature .block .fe_list li.list2 .no,
#feature .block .fe_list li.list2 h3{
color: #29ab6b;
}

#feature .block .fe_list li.list3{
border: 4px solid #0095c7;
}

#feature .block .fe_list li.list3 .no,
#feature .block .fe_list li.list3 h3{
color: #0095c7;
}

#feature .block .fe_list li.list4{
border: 4px solid #ec669c;
}

#feature .block .fe_list li.list4 .no,
#feature .block .fe_list li.list4 h3{
color: #ec669c;
}

#feature .block .fe_list li.list5{
border: 4px solid #eb4215;
}

#feature .block .fe_list li.list5 .no,
#feature .block .fe_list li.list5 h3{
color: #eb4215;
}

#feature .block .fe_list li.list6{
border: 4px solid #fdaa13;
}

#feature .block .fe_list li.list6 .no,
#feature .block .fe_list li.list6 h3{
color: #fdaa13;
}

#feature .block .fe_list li.list7{
border: 4px solid #decb0e;
}

#feature .block .fe_list li.list7 .no,
#feature .block .fe_list li.list7 h3{
color: #decb0e;
}

#feature .block .fe_list li.list8{
border: 4px solid #bfb17d;
}

#feature .block .fe_list li.list8 .no,
#feature .block .fe_list li.list8 h3{
color: #bfb17d;
}

}