@charset "utf-8";

/*
コンテンツ営業課 202201
 */

.f_orange{background-color:#fff2e5; }

/*
 base tag
 ------------------------------------------------- */

.mypage h1.n_ttl{
    width: 980px; 
    margin:0.5em auto 1em;
    font-size: 1.2em;
    font-weight: normal;
    color: #fff;
    position: relative;
}
.mypage h1.n_ttl::after{
    content:"";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 7px;
    background: linear-gradient(45deg, #e75035, #ff8000);
}

.mypage h1.n_ttl span{
    display: inline-block;
    background-color: #ed5d30;
    padding: 0.7em 2em 0.25em;
    border-radius: 0.5em 0.5em 0 0;
    letter-spacing: 0.1em;
    position: relative;
    margin-bottom: -1px;

}
.mypage h1.n_ttl span::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height:2.7em;
    width: 1.5em;
    background-color: #ed5d30;
    transform:matrix(1, 0, 0.5, 1, 10, 0);
     border-radius: 0 0.5em 0 0;
}
.mypage .change_point{
    width: 90%;
    margin: 0 auto;
    padding: 0.5em 0 1em;
    max-width: 465px;
    font-size: 1.2em;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
}

.mypage .change_point a{
    display:block;
    color: #fff;
    text-align: center;
    padding: 0.5em;
    background:url("../../img/icon_hand.svg") no-repeat 97% center / 2em,linear-gradient(45deg, #e75035, #ff8000);
    border-radius: 1.375em;
}
.mypage .change_point a:hover{
    text-decoration: none;
    opacity: 0.8;
}
.mypage .change_point a span{
    border-bottom: #fff 1px solid;
}

.mypage #headerTile .warning-msg{
    display: block;
    margin: 0.5em auto;
    width: 980px;
}

.mypage div.contents.login>ul>li #loginMypageForm h2 {
    background-color: #f49d14;
    padding: 7px;
    border-radius: 7px;
    color: white;
    margin: 0 0 10px 0px;
    font-size: 1.1em;
    border: none;
}
.mypage div.contents.login>ul>li #loginMypageForm h2::before,
.mypage div.contents.login>ul>li #loginMypageForm h2::after{
    display: none;
}
/* header
----------------------------------------------------------- */
.mypage header {
    background-color:#fff2e5;
    
}
.mypage header .header_container{
    max-width: 1200px;
    width: 96%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em 0;

}

.mypage header p.site_logo{
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    margin:0;
}
.mypage header p.site_title{
    font-size: 1.25em;
    color: #fff;
    padding: 0.1em 2em;
    border-radius:0.975em;
    background:linear-gradient(45deg, #e75035, #ff8000);
    font-weight: bold;
}
.mypage header p.site_title a{
    color: #fff;
}

.mypage header nav{
    position: relative;
}

.mypage header nav > ul{
    display: flex;
    justify-content: center;
}
.mypage header nav > ul > li{
    margin: 0 0.5em;
    text-align: center;
    width:6em;
}
.mypage header nav > ul > li > a{
    color: #000;
}
.mypage header nav > ul > li > a:hover{
    color: #ed5d30;
    text-decoration: none;
}
.mypage header nav > ul > li > a > span{
    display: flex;
    width:3em;
    height:3em;
    padding:0.4375em;
    margin: 0 auto;
    background-color: #e75035;
    border-radius:0.3em;
    justify-content: center;
    align-items: center;
}

.mypage header nav > ul > li:nth-child(2) > a > span{
    padding-right:0.125em;

}
.mypage header nav > ul > li > a:hover > span{
    background-color: #ff8000;
}
.mypage header nav > ul > li.other_menu{
    position: relative;
}
.mypage header nav > ul > li.other_menu::before{
    content: "";
    display: block;
    width:3em;
    height:3em;
    margin: 0 auto;
    background-color: #e75035;
    border-radius:0.3em;
}
.mypage header nav > ul > li.other_menu:hover::before{
    background-color: #ff8000;
}
.mypage header nav > ul > li.other_menu > span{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top:3em;
    cursor: pointer;
}
.mypage header nav > ul > li.other_menu > span:hover{
        color: #ed5d30;
}

.mypage header nav > ul > li.other_menu > span::after{
    content: "";
    display: block;
    width: 1.25em;
    height:0.9375em;
   background: repeating-linear-gradient(#fff, #fff 0.1875em, transparent 0.1875em, transparent 0.375em);
    position: absolute;
    top:1em;
    left:50%;
    margin-left: -0.625em;
}

.mypage header nav > ul > li.other_menu > span.other_menu_open::before{
    content: "";
    display: block;
     position: absolute;
     left:calc(50% - 0.625em);
     top: 1.4375em;
    width:1.25em;
     height:0.125em;
     background:#fff;
     transform: rotate(45deg);
    }
 .mypage header nav > ul > li.other_menu > span.other_menu_open::after{
     content: "";
     display: block;
     position: absolute;
     left:50%;
     top: 1.4375em;
     height:0.125em;
     background:#fff;
     transform: rotate(-45deg);
    }

.mypage header nav > ul > li > ul{
    display: none;
}
.mypage header nav > ul > li > ul.opened_other{
    display: block;
    position: absolute;
    top:calc(100% + 1em);
    width:15em;
    background-color: #fff;
}
.mypage header nav > ul > li > ul.opened_other li{
    border-top: #ccc 1px solid;
}
.mypage header nav > ul > li > ul.opened_other li:first-child{
    border: none;
}

.mypage header nav > ul > li > ul.opened_other li a{
    display: block;
    padding: 0.5em 0.5em 0.5em 2.5em;
    text-align: left;
    color: #000;
    position: relative;
}
.mypage header nav > ul > li > ul.opened_other li > a:hover{
    text-decoration: none;
    color: #ed5d30;
}
.mypage header nav > ul > li > ul.opened_other li > a::before{
    content: "";
        display: block;
        width: 1.3em;
        height: 1.3em;
        background-color: #ed5d30;
        border-radius: 0.65em;
        position: absolute;
        top: 0.55em;
        left:0.5em;
    }
    
.mypage header nav > ul > li > ul.opened_other li > a::after{
            content: "";
            display: block;
            width: 0.45em;
            height: 0.45em;
            border-top: #fff 0.125em solid;
            border-right: #fff 0.125em solid;
        background: none;
            position: absolute;
            top:1em;
            left:0.8em;
            transform: rotate(45deg);
    }

.mypage header nav > ul > li > ul.opened_other li input{
    margin: 0.8em;
    background: none;
    outline: none;
    border: none;
    box-shadow: none;
    background-color: #ed5d30;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* iOSタップ時の挙動を調整 */
    padding: 0.4em 2em;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.mypage .other_menu_close{display: none;}
.mypage .other_menu_close_open{
        display: block;
        position: fixed;
        top: auto;
        left: 0;
        width: 100%;
        height: 100%;
       background-color: rgba(0,0,0,0.2);
       z-index: 10000;
    }
.mypage .other_menu_close_open span{
        display: none;
    }
.mypage .other_menu_close_open + header{
         z-index: 10000;
    position: relative;
    }      
/* footer
----------------------------------------------------------- */
.mypage footer{
    background-color:#fff2e5;
    padding: 1em;
    text-align: center;
}

.mypage #footer_copyright{
    font-size: 0.9375em;
    text-align: center;
    margin:1em 0;
    color: #555;
}

.mypage .footer_nav{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.mypage .footer_nav li::before{
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    background-color: #000;
    margin: 0 1em;
}
.mypage .footer_nav li:first-child::before{
    display: none;
}
.mypage .footer_nav a{
    color: #000;
}


/* go_to_top
----------------------------------------------------------- */
.mypage #go_to_top{
    position: fixed;
    right: 100px;
    bottom: 80px;
    width: 50px;
    height: 50px;
    overflow: hidden;
    background-color: #ed5d30;
    border-radius: 50%;
}
.mypage #go_to_top::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left:calc(50% - 10px);
    width:20px;
    height: 20px;
    border-top: #fff 4px solid;
    border-left:#fff 4px solid;
    transform: rotate(45deg);
    box-sizing: border-box;
}
.mypage #go_to_top:hover{
    opacity: 0.8;
}
.mypage #go_to_top a{
    opacity: 0;
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    z-index: 2;
}

/*=========================================================================================
for PC 1250以下
=========================================================================================*/

@media only screen and (max-width: 1250px){
.mypage.vm-pc header,
.mypage.vm-pc footer,
.mypage.vm-pc h1.n_ttl{
    font-size:1.28vw;
}

}
/*=========================================================================================
for PC 980以下
=========================================================================================*/

@media only screen and (max-width: 980px){
.mypage.vm-pc header,
.mypage.vm-pc footer,
.mypage.vm-pc h1.n_ttl{
    font-size:0.9375em;
}

}