@charset "utf-8";
/*===================================================================

CSS information
file name  :  mo-footer.css
style info :  
フッター関連のCSS
===================================================================*/
/*============================================
pablic relationsエリア(PRエリア)
============================================*/
.pr{
max-width: 1240px;
margin: 0 auto;
}
.pr-inner{
padding: 25px 25px 25px 25px;
}
@media screen and (min-width: 0px) and (max-width:768px) {
.pr-inner{padding: 25px 15px 25px 15px;}
}

/*======================背景イメージ(PRエリア)======================*/
.pr-access-img{}/*管理画面管理(インライン記述)*/
.pr-access-black{
background-color: rgba(0,0,0,0.50);z-index: 2;
}

/*======================登録タイトル(PRエリア)======================*/
.pr-entrybox{
padding: 15px 0px 15px 0px;
text-align: center;
}
.pr-title{
font-size: 2rem;
font-weight: bold;
color: #FFF;
text-align: center;
position: relative;
display: inline-block;
padding: 0 55px;
}
.pr-title:before, .pr-title:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: #FFF;
}
.pr-title:before {left:0;}
.pr-title:after {right: 0;}
.pr-title span, .pr-title span a{
font-size: 1.2rem;
color: #FFF;
}
.pr-title span a:before{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f2c2";
color: #FFF;
margin-right: 5px;
}

/*===================================================================
登録訴求ボタン　(PRエリア)
===================================================================*/

/*=======================左slashブラインドアニメーション=======================*/
.appeal-bt{
font-size: 1.8rem;
font-weight: bold;
position: relative;
display: inline-block;
padding: 8px 10px 5px 10px;
border-radius: 10px;
border: 2px solid #FFF;
color: #FFF;
background-color:rgba(255,82,82,0.8);
text-align: center;
transition: .4s;
overflow: hidden;
z-index: 90;
}
.appeal-bt:hover {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.appeal-bt:after{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f105";
color: #FFF;
margin-left: 5px;
transition: .4s;
}
.appeal-bt:hover:after {
color: #fff;
}
.appeal-bt::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 120%;
height: 100%;
background-color: rgba(69, 191, 85,0.8);
transform-origin: right top;
transform: skewX(-30deg) scale(0, 1);
transition: transform .3s;
}
.appeal-bt:hover::before {
transform-origin: left top;
transform: skewX(-30deg) scale(1, 1);
}

/*============================================
マイページメニューリンク・ログイン時(PRエリア)
============================================*/
.mypage-access{
display: flex;
flex-wrap: wrap;
justify-content:space-around;
padding: 15px 0px 15px 0px;
text-align: center;
}
.mypagemenu{
background-color: rgba(255,255,255,0.50);
margin: 0 1% 10px 0;
}
.mypageitems {width: 32%;}
.mypagemenu a{
display: block;
font-weight: bold;
color: #FFF;
text-decoration: none;
}
.mypagemenu a:hover{
background-color: rgba(255,255,255,0.80);
color: #b0152f;
}
.mypagemenu a:after{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f101";
color: #FFF;
margin-left: 5px;
}
.mypagemenu a:hover:after{
color: #b0152f;
}
@media screen and (min-width: 0px) and (max-width:768px) {
.mypage-access{display: block;}
.mypageitems{width: 100%;}
}

/*===================================================================
フッター
===================================================================*/
.footer-wrapper{
width: 100%;
background-color: #b0152f;/*CD0505 とベースカラーを検討中(比べるとマイキャリアはくすんで見える)*/
}
.footer-wrapper-white{
width: 100%;
background-color: #FFF;
}
.footer{
max-width: 1240px;
margin: 0 auto;
}
.footer2{
max-width: 1240px;
margin: 0 auto;
padding: 0 0 100px 0;
}
.footer-inner{
padding: 25px 25px 25px 25px;
}
@media screen and (min-width: 0px) and (max-width:768px) {
.footer-inner{padding: 25px 15px 25px 15px;}
}

/*======================フッターメニュー======================*/
.footer-inner-menubox{display: flex;}
.footer-inner-menu:first-child:nth-last-child(1),.footer-inner-menu:first-child:nth-last-child(1) ~ .footer-inner-menu {width: 100%;}
.footer-inner-menu:first-child:nth-last-child(2),.footer-inner-menu:first-child:nth-last-child(2) ~ .footer-inner-menu {width: 50%;}
.footer-inner-menu:first-child:nth-last-child(3),.footer-inner-menu:first-child:nth-last-child(3) ~ .footer-inner-menu {width: 33.33333%;}
.footer-inner-menu:first-child:nth-last-child(4),.footer-inner-menu:first-child:nth-last-child(4) ~ .footer-inner-menu {width: 25%;}
.footer-inner-menu:first-child:nth-last-child(5),.footer-inner-menu:first-child:nth-last-child(5) ~ .footer-inner-menu {width: 20%;}
.footer-inner-menu:first-child:nth-last-child(6),.footer-inner-menu:first-child:nth-last-child(6) ~ .footer-inner-menu {width: 16.66667%;}
.footer-inner-menu:first-child:nth-last-child(7),.footer-inner-menu:first-child:nth-last-child(7) ~ .footer-inner-menu {width: 14.28571%;}
.footer-inner-menu:first-child:nth-last-child(8),.footer-inner-menu:first-child:nth-last-child(8) ~ .footer-inner-menu {width: 12.5%;}
.footer-inner-menu:first-child:nth-last-child(9),.footer-inner-menu:first-child:nth-last-child(9) ~ .footer-inner-menu {width: 11.11111%;}
@media screen and (min-width: 0px) and (max-width:768px) {
.footer-inner-menubox{display: block;}
.footer-inner-menu{width: 100%!important;}
}

.footer-inner-menu ul li a{
font-size:1.5rem;
text-decoration: none;
color: #FFF;
display: block;
transition:0.2s;
}
.footer-inner-menu ul li a:hover{
color: #AEE0FF;
transition:.2s;
}

/*======================通常Menue・fmenu_a======================*/
.footer-inner-menu ul li.fmenu_a a::before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f105";
margin-right: 5px;
}
.footer-inner-menu ul li.fmenu_a a{
font-size:1.3rem;
color: #FFF;
font-weight: bold;
text-decoration: none;
transition:.2s;
display: block;
margin-bottom: 5px;
}
.footer-inner-menu ul li.fmenu_a a:hover{
color: #AEE0FF;
transition:.2s;
}

/*======================大Menu親・fmenu_b======================*/
.footer-inner-menu ul li.fmenu_b{
position: relative;
margin-bottom: 5px;
font-weight: bold;
}
.footer-inner-menu ul li.fmenu_b a::before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f35a";
margin-right: 5px;
}
.footer-inner-menu ul li.fmenu_b a:hover{
color: #AEE0FF;
transition:.2s;
}

/*======================大Menu子・fmenu_c======================*/
.footer-inner-menu ul li.fmenu_c a::before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f105";
margin-right: 5px;
}
.footer-inner-menu ul li.fmenu_c a{
font-size:1.1rem;
font-weight: bold;
padding: 0 0 0 13px;
text-decoration: none;
color: #FFF;
transition:.2s;
display: block;
margin-bottom: 5px;
}
.footer-inner-menu ul li.fmenu_c a:hover{
color: #AEE0FF;
transition:.2s;
}

/* ===================================================================
フッターロゴ
===================================================================*/
.footer-rogo {display: flex; align-items: center;justify-content: center;}
.footer-pr-rogo.rogoimg img{
height: 40px;
}

.footer-pr-rogo{
padding: 0 15px 0 0;
text-align: center;
display: inline-block;
vertical-align: middle;
}

/* ===================================================================
フッターSNS
===================================================================*/
.footer-sns{
text-align: center;
margin: 20px 0 0 0;
}
.footer-sns li{
display: inline-block;
margin-right: 25px;
font-size:2.5rem;
}
.footer-sns a{
color:#A0A1A0;
transition:.3s;
}
.footer-sns a:hover{
color:#b0152f;
transition:.3s;
}
/* ===================================================================
フッター最下部
===================================================================*/
.footer-bottom{
display: flex; 
align-items: center;
flex-direction :row-reverse;
}
.footer-bottomitems {width: 50%;}
.footer-address{
font-size: 1.2rem;
color: #FFF;
}
.footer-copr , .footer-copr a{
font-size: 1.2rem;
color: #FFF;
text-align: right;
}
@media screen and (min-width: 0px) and (max-width:768px) {
.footer-bottom{display: block;}
.footer-bottomitems{width: 100%;}
.footer-address{text-align: center;}
.footer-copr , .footer-copr a{text-align: center;}
}