@charset "utf-8";

/* ==================================================================
    mypage.css

=================================================================== */

ol#breadcrumbs {
    padding: 30px 0;
}

/* --------------------------------
   □ linkicon ＞
-------------------------------- */

#mypage .linkicon {
    position: relative;
    display: block;
}
#mypage .linkicon:after {
    content: '';
    width: 9px;
    height: 9px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 50%;
    right: 0%;
    margin-top: -6px;
    margin-right: 5%;
    transform: rotate(45deg);
}
    #mypage .linkicon a {
        position: relative;
        display: block;
        text-align: left;
        text-decoration: none;
    }
        #mypage .linkicon a:hover {
            text-decoration: none;
        }

/* --------------------------------
   □ triangle ▶
-------------------------------- */

        #mypage .info ul.triangle {
            list-style-type:none;
            font-size: 100%;
        }
            #mypage .info ul.triangle li {
                position:relative;
                padding: 0 0 0 1.5em;
                line-height: 0.5;
            }
            #mypage .info ul.triangle li:before {
                position:absolute;
                content:'';
                top: 0.5em;
                left: 0.5em;
                height:0;
                width:0;
                border-style: solid;
                border-width: 5px 0 5px 9px;
                border-color: transparent transparent transparent #014099;
            }
            #mypage .info ul.triangle li a {
                padding: 10px 0 10px 0;
                display: block;
                color: #145BD4;
            }
            #mypage .info ul.triangle li a:hover {
                color:#8ED2E0;
            }
            #mypage .info ul.triangle li a:visited {
                background-color: #fff;
            }

/* --------------------------------
   □ mypage.php
-------------------------------- */

#mypage {
    padding-bottom: 40px;
}
#mypage .subsection {
    margin-bottom: 0;
}
#mypage input.text,
#mypage input.quantity,
#mypage input#email,
#mypage input#password,
#mypage input#loginid,
#mypage textarea,
#mypage select {
    background-color: #FFFFD8;
}
#mypage h2 {
    background-color: #8ED2E0;
    border-bottom: none;
    text-align: left;
    height: 60px;
    line-height: 60px;
    font-size: 175%;
    font-weight: 700;
    color: #fff;
    margin: 0 auto;
    padding: 0 0 0 20px;
}
#mypage h3 {
    background-color: #DEECEF;
    text-align: left;
    height: 60px;
    line-height: 60px;
    font-size: 100%;
    font-weight: 500;
    padding: 0 0 0 20px;
    margin-bottom: 50px;
}
#mypage .main-section .index-nav {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#mypage .main-section .index-nav .flex_item.linkicon {
    background-color: #8ED2E0;
    width: 525px;
    height: 135px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
#mypage .main-section .index-nav .flex_item.linkicon a {
    width: 365px;
    height: 95px;
    color: #fff;
    padding: 20px 30px 20px 130px;
}
    #mypage .main-section .index-nav .flex_item.linkicon a:hover {
        background-color: #014099;
    }
    #mypage .main-section .index-nav #order_history a {
        background-image: url(../../images/mypage/order_history.svg);
        background-repeat: no-repeat;
        background-position: top 20px left 30px;
    }
    #mypage .main-section .index-nav #contact a {
        background-image: url(../../images/mypage/contact.svg);
        background-repeat: no-repeat;
        background-position: top 20px left 30px;
    }
#mypage .main-section .index-nav .flex_item a ul {
    font-size: 150%;
}
#mypage .main-section .index-nav .flex_item a ul li {
    font-size: 71%;
}
    #mypage .main-section .index-nav .flex_item a ul li:first-child {
        margin-top: 0.5em;
    }
#mypage .main-section #last_order {
    width: 525px;
    height: auto;
    box-sizing: border-box;
    padding: 0;
    margin-bottom: 30px;
    float: left;
}
    #mypage .main-section #last_order h4 {
        background-color: #fff;
        color: #444;
        box-sizing: border-box;
        text-align: left;
        padding: 0;
        margin-bottom: 0;
    }
    #mypage .main-section #last_order .order {
        width: 525px;
        height: 217px;
        background-color: #DEECEF;
        box-sizing: border-box;
        padding: 20px 30px;
        margin-bottom: 30px;
    }
    #mypage .main-section #last_order .order .num {
        color: #F72F2A;
        font-size: 175%;
        font-weight: 700;
    }
    #mypage .main-section #last_order .order .yen {
        color: #F72F2A;
        font-weight: 700;
    }
    #mypage .main-section #last_order .order .button_area {
        width: 100%;
        margin-top: 20px;
    }
    #mypage .main-section #last_order .order .button_area .buttonStyle a {
        width: 217px;
        float: left;
    }
        #mypage .main-section #last_order .order .button_area .buttonStyle:first-child a {
            margin-right: 30px;
        }
#mypage .main-section #account {
    width: 525px;
    background-color: #fff;
    border: 2px solid #DDDDDD;
    box-sizing: border-box;
    padding: 0;
    margin-bottom: 30px;
    float: right;
}
#mypage .info {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding: 20px 30px;
    margin: 0 auto;
}
#mypage .info dl {
    width: 100%;
    height: auto;
}
    #mypage .info dl dt {
        width: 60px;
        height: 25%;
        float: left;
        text-align: center;
        margin-right: 40px;
    }
    #mypage .info dl dd {
        display: inline-block;
        width: 361px;
    }
        #mypage .info dl dd p {
            font-size: 150%;
            margin-bottom: 10px;
        }
#mypage .buttonStyle a {
    width: 387.5px;
}

/* --------------------------------
   □ mypage/contact
-------------------------------- */
    /*
    -------------------------------- */

#mypage #contact_main {
    width: 805px;
    display: block;
    float: right;
    margin-left: 30px;
}
#mypage h4 {
    background-color: #fff;
    text-align: left;
    margin: 25px 0;
}
#mypage table.tableStyle {
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 100%;
}
#mypage table.tableStyle tr {
    border-top: 2px solid #DDDDDD;
}
#mypage table.tableStyle th,
#mypage table.tableStyle td {
    padding: 25px 0;
}
    #mypage table.tableStyle th span {
        background-color: #FFF0F0;
    }
#mypage table.tableStyle .text {
    margin-bottom: 0;
}
#mypage table.tableStyle .text + .text {
    margin-top: 1em;
}
#mypage .select_file {
    margin: 0 0 20px 0;
    padding: 10px 20px;
    border: 2px solid #D4D4D4;
    font-size: 94%;
    width: 387.5px;
    text-align: left;
}
#mypage .select_file .file {
    margin-bottom: 0px;
}
    #mypage .select_file .file a {
        width: 176px;
    }
#mypage  .attach_file .caution {
    margin-bottom: 0px;
}

    /*     #contact_side
    -------------------------------- */

#mypage #contact_side {
    width: 245px;
    display: block;
    float: right;
}
#mypage #contact_side .info {
    padding: 0;
}
    #mypage #contact_side .info dl {
        width: 100%;
        height: auto;
        padding: 20px 10px;
        border-top: 1px solid #DCDCDC;
        box-sizing: border-box;
    }
        #mypage #contact_side .info dl dt {
            width: 29px;
            height: 29px;
            float: left;
            text-align: center;
            margin-right: 10px;
            box-sizing: border-box;
        }
        #mypage #contact_side .info dl dt img {
            width: 29px;
            height: 29px;
        }
        #mypage #contact_side .info dl dd {
            display: inline-block;
            width: 166px;
            box-sizing: border-box;
        }
            #mypage #contact_side .info dl dd p {
                font-size: 113%;
                font-weight: 700;
                line-height: 29px;
                margin-bottom: 0;
            }
            #mypage #contact_side .info dl dd p span {
                font-size: 84%;
            }
#mypage #contact_side .info ul {
    list-style-type:none;
    font-size: 94%;
}
#mypage #contact_side .info ul.user_menu {
    margin-top: 20px;
}
#mypage #contact_side .info ul.user_menu .linkicon {
    border-top: 1px solid #DCDCDC;
    padding: 0.8em 0.5em;
}
    #mypage #contact_side .info ul.user_menu .linkicon:last-child {
        border-bottom: 1px solid #DCDCDC;
    }
#mypage #contact_side .info ul.user_menu .linkicon a {
    font-weight: 700;
    color: #444;
    line-height: 2;
}
#mypage #contact_side .info ul.user_menu .linkicon:after {
    border-top: solid 2px #444;
    border-right: solid 2px #444;
}
#mypage #contact_side .info ul.user_menu .linkicon:hover {
        background: #F5F5F5;
}

/* --------------------------------
   □ mypage/user
-------------------------------- */

#mypage.user table.tableStyle.wide tr th {
    width: 30%;
    padding: 25px 20px;
    margin: 0;
}
    #mypage.user table.tableStyle.wide tr.bg_gray th {
        background-color: #E9E9E9;
        font-size: 118%;
        padding: 10px 20px;
    }
#mypage.user table.tableStyle.wide > tr:last-child {
    border-bottom: 2px solid #DDDDDD;
}
    #mypage.user table.tableStyle.wide tr.noBorder {
        border-bottom: none;
    }

/* --------------------------------
   □ mypage/user/edit
-------------------------------- */

#mypage.edit table.tableStyle tr.email.p10 th {
    padding-bottom: 10px;
}
    #mypage.edit table.tableStyle tr.email.p10 td {
        padding-bottom: 0;
    }
#mypage.edit table.tableStyle.wide tr.gender td ul li {
    width: 25%;
    margin-right: 1%;
    box-sizing: border-box;
    float: left;
}
#mypage.edit table.tableStyle.wide tr.dob td select {
    width: 28%;
    margin-right: 1%;
    box-sizing: border-box;
}
    #mypage.edit table.tableStyle.wide tr.dob td select:last-child {
        margin-right: 0;
        padding-top: 10px;
    }
#mypage.edit table.tableStyle.wide tr {
    border: none;
}
    #mypage.edit table.tableStyle.wide tr.bg_gray {
        border-top: 2px solid #DDDDDD;
        border-bottom: 2px solid #DDDDDD;
    }
#mypage.edit table.tableStyle.wide .inTable th {
    width: 0%;
    padding: 0;
    margin: 0;
}
#mypage.edit table.tableStyle.wide .inTable td {
    width: 100%;
    padding: 10px 0 0 0;
    margin: 0;
}
    #mypage.edit table.tableStyle.wide .inTable tr:first-child td {
        padding: 0 0 10px 0;
    }
#mypage.edit table.tableStyle.wide select#pref {
    width: 50%;
}
#mypage.edit table.tableStyle.wide .receiver._radio {
    border-bottom: 2px solid #DDDDDD;
}
    #mypage.edit table.tableStyle.wide .receiver._radio ul.inline {
        display: inline-block;
    }
    #mypage.edit table.tableStyle.wide .receiver._radio .text {
        width: 60%;
        margin-top: 30px;
        margin-bottom: 0;
        float: right;
    }
#mypage.edit table.tableStyle.wide tr.zip td {
    padding-bottom: 20px;
}
#mypage.edit table.tableStyle.wide tr.address th,
#mypage.edit table.tableStyle.wide tr.address td {
    padding-top: 10px;
}
#mypage.edit table.tableStyle.wide tr.address .noBorder td {
    padding-top: 20px;
}
#mypage table.tableStyle tr.p10 td {
    padding: 10px 0;
}
#mypage.edit table.tableStyle tr.gender th {
    padding: 10px 20px;
}
#mypage table.tableStyle tr.p10 td.pb50 {
    padding-bottom: 50px;
}
#mypage.edit ul.buttonStyle li {
    display: inline-block;
    margin-right: 25px;
}
    #mypage.edit ul.buttonStyle li:last-child {
        margin-right: 0;
    }

    #mypage ul.buttonStyle li {
        width: calc(50% - 25px);
    }

    #mypage ul.buttonStyle li:last-child button {
        width: 100%;
    }

/* --------------------------------
   □ mypage/email, /id, /quit
-------------------------------- */

#mypage table.tableStyle tr.bg_lightgray th {
    background-color: #F7F7F7;
    padding: 10px 20px;
    line-height:2;
}
    #mypage table.tableStyle tr.bg_lightgray {
        border: none;
    }
#mypage table.tableStyle tr.bg_gray {
    background-color: #E9E9E9;
}
    #mypage table.tableStyle tr.bg_gray th {
        background-color: #E9E9E9;
        font-size: 118%;
        padding: 10px 20px;
        width: 40%;
    }
    #mypage table.tableStyle tr.bg_gray td {
        padding: 10px 20px;
    }
#mypage table.tableStyle .login_btn .text {
    margin: 10px auto 20px auto;
}

/* --------------------------------
   □ mypage/password
-------------------------------- */

#mypage.password table.tableStyle th {
    width: 30%;
}
#mypage.password table.tableStyle.wide tr {
    border: none;
}
input#old_password,
input#new_password {
    box-sizing: border-box;
    border: 2px solid #D4D4D4;
    height: 44px;
    width: 100%;
    padding: 0.5em 1em;
}
input#old_password:hover,
input#new_password:hover {
    border: 2px solid #F57F24;
}
.contents .mail table.tableStyle p.caution.blue {
    color: #6B8AB2;
    margin-bottom: 0;
}
#mypage.password table.tableStyle th,
#mypage.password table.tableStyle td {
    padding: 10px 0;
}

/* --------------------------------
   □ mypage/quit
-------------------------------- */

#mypage.email .attention {
    background-color: #FFF0F0;
    border: 2px solid #FF5F5F;
    color: #FF5F5F;
    font-weight: 700;
    padding: 10px 20px;
    margin-bottom: 25px;
}

/* --------------------------------
   □ mypage/login
-------------------------------- */

#mypage .login h3 {
    background: #fff;
    font-size: 175%;
    font-weight: 700;
    line-height: 2em;
    margin-bottom: 30px;
    text-align: center;
}
#mypage .login .w509 {
    width: 509px;
    text-align: left;
    margin: auto;
}
#mypage .login .w509 input {
    margin: 10px 0;
}
#mypage .login .login_btn .text{
    margin-bottom: 10px;
    font-size: 94%;
    text-align: center;
}
#mypage .login .buttonStyle.login a{
        background: #FF5F5F;
        color: #fff;
        border: 2px solid #FF5F5F;
        margin: 15px auto;
        width: 509px;
    }
        #mypage .login .buttonStyle.login a:hover{
            background: #fff;
            color: #FF5F5F;
        }
        #mypage .login .buttonStyle.login a:after{
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
        }
        #mypage .login .buttonStyle.login a:hover:after{
            border-top: 2px solid #FF5F5F;
            border-right: 2px solid #FF5F5F;
        }
#mypage .login input#email:hover, #mypage .login input#password:hover,
#mypage .login input#email:focus, #mypage .login input#password:focus {
    border: 2px solid #FF5F5F;
    outline-color: #FF5F5F;
}

/* --------------------------------
   □ mypage/login
-------------------------------- */

#mypage.no_margintop {
    margin-top: 0;
}
    #mypage input#email {
        margin: 10px 0;
    }

/* --------------------------------
   □ mypage/register/input
-------------------------------- */

#mypage .register.input table.tableStyle th {
   width: 30%;
}

#mypage .register input.short{
   width: 45%;
}

#mypage.edit .register.input table.tableStyle tr.gender th {
    padding: 10px 0;
}
#mypage.edit .register .buttonStyle {
    margin: 0 auto;
    display: block;
    height: 60px;
    width: 800px;
}
#mypage.edit .register ,tableStyle{
    margin-top: 0
}
#mypage.edit.input .register ul.buttonStyle li {
    float: none;
}
#mypage.edit .register.forget ul.buttonStyle li {
    float: none;
}

table.tableStyle th, table.tableStyle td {
    font-size: 100%;
}

@media only screen and
(max-width : 767px) {


    /* font-size とりあえずの設定
　　----------------------------- */
    #mypage .main-section .index-nav .flex_item a ul,
    #mypage h4 {
        font-size: 125%; /*20px*/
        margin-bottom: 10px;
    }
    #mypage .main-section .index-nav .flex_item a ul li {
         font-size: 80%; /*16px*/
    }
    #mypage .main-section #account .info dl dd p {
         font-size: 125%; /*20px*/
    }
    table.tableStyle th, table.tableStyle td {
        font-size: 100%; /*17px*/
    }

    /* ------------------------ */

    #mypage {
        margin-top: 0;
    }

    #mypage h2 {
        margin-left: -2%;
        margin-right: -2%;
    }
    #mypage h3 {
        height: 40px;
        line-height: 40px;
    }
    #mypage .buttonStyle a,
    #mypage .login .buttonStyle.login a {
        width: 100%;
        font-size: 100%;
    }
    #mypage .main-section .index-nav {
        margin-bottom: 20px;
    }
    #mypage .main-section .index-nav .flex_item.linkicon {
        width: 100%;
        height: auto;
    }
        #mypage .main-section .index-nav .flex_item.linkicon a {
            width: auto;
            height: auto;
            padding: 20px 40px 20px 90px;
        }
    #mypage .main-section .index-nav #order_history a {
        background-position: top 20px left 10px;
    }
        #mypage .main-section .index-nav #contact a {
        background-position: top 20px left 10px;
    }
    #mypage .main-section #account {
        width: 100%;
        height: auto;
    }
        #mypage .main-section #account .info {
            padding: 20px;
        }
            #mypage .main-section #account .info dl dt {
                width: 20%;
                margin-right: 5%;
            }
            #mypage .main-section #account .info dl dd {
                width: 75%;
            }
    #mypage .main-section #last_order {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
        #mypage .main-section #last_order .order {
            width: 100%;
            height: auto;
        }
        #mypage .main-section #last_order .order .button_area .buttonStyle a {
            width: 100%;
            float: none;
            margin-right: 0;
            margin-bottom: 20px;
        }

    /* --------------------------------
       □ mypage/contact
    -------------------------------- */
        /*
        -------------------------------- */

    #mypage #contact_main{
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
    #mypage table.tableStyle th {
        width: 100%;
        padding: 20px 0 0 0;
    }
    #mypage table.tableStyle td {
        width: 100%;
        padding: 20px 0 20px 0;
    }
        #mypage table.tableStyle td select {
            margin-bottom: 20px;
        }
    #mypage .attach_file .select_file {
        margin: 20px auto 10px auto;
        padding: 10px 20px 10px 10px;
        width: auto;
        text-align: center;
    }
    #mypage .select_file a {
        width: auto;
    }
        #mypage .select_file .file:nth-child(2n) {
            text-align: center;
        }

        /*     #contact_side
        -------------------------------- */

    #mypage #contact_side {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
        margin-top: 40px;
    }

    /* --------------------------------
       □ mypage/user
    -------------------------------- */

    #mypage.user table.tableStyle.wide {
        margin-bottom: 0;
    }
    #mypage.user table.tableStyle.wide tr th {
        width: auto;
        padding: 15px 0 0 0;
    }
        #mypage.user table.tableStyle.wide tr.bg_gray th {
            padding: 10px 20px;
            font-size: 100%;
        }
    #mypage.user table.tableStyle td {
        width: auto;
        padding: 5px 0 20px 1em;
        font-size: 106%;
    }

   /* --------------------------------
       □ mypage/user/edit
    -------------------------------- */

    #mypage.edit table.tableStyle.wide tr th {
        padding: 10px 0 0 0;
        font-weight: 700;
    }
        #mypage.edit table.tableStyle.wide tr.bg_gray th {
            padding: 10px 20px;
            font-size: 100%;
        }
    #mypage.edit table.tableStyle.wide tr td {
        padding: 10px 0 20px 0;
        font-size: 106%;
    }
    #mypage.edit table.tableStyle.wide tr.email th {
        padding-top: 20px;
        padding-bottom: 0px;
    }
    #mypage.edit table.tableStyle.wide tr.address > th {
        padding-top: 0px;
    }
     #mypage.edit table.tableStyle.wide tr.email td {
        padding: 10px 10px 10px 1em;
    }
    #mypage.edit table.tableStyle.wide ul.inline,
    #mypage.edit table.tableStyle.wide tr.gender td ul li {
        float: none;
        padding-left: 1em;
    }
    #mypage.edit table.tableStyle.wide tr.dob th {
            padding-top: 15px;
        }
        #mypage.edit table.tableStyle.wide tr.dob td select {
            width: 50%;
            margin-bottom: 15px;
        }
        #mypage.edit table.tableStyle.wide tr.dob td select:last-child {
            margin-bottom: 30px;
        }
    #mypage.edit table.tableStyle .text {
        margin-bottom: 10px;
        font-size: 95%;
    }
    #mypage.edit table.tableStyle.wide .receiver th {
        padding-top: 20px;
    }
    #mypage.edit table.tableStyle.wide .receiver._radio .text {
        width: 100%;
        margin-top: 10px;
        float: none;
        margin-bottom: 15px;
    }
    #mypage.edit table.tableStyle.wide tr.address td .inTable tr th,
    #mypage.edit table.tableStyle.wide tr.address td .inTable tr td {
        padding: 0;
        margin: 0;
    }
        #mypage.edit table.tableStyle.wide select#pref {
            margin-bottom: 10px;
            width: 55%;
            font-size: 95%;
        }
    #mypage.edit ul.buttonStyle {
        margin-top: 30px;
    }
        #mypage.edit ul.buttonStyle li {

        }
            #mypage.edit ul.buttonStyle li a {
                width: 100%;
            }

   /* --------------------------------
       □ mypage/email, mypage/id, mypage/quit
    -------------------------------- */

    #mypage table.tableStyle tr.bg_lightgray th {
        line-height: 1.5;
        padding: 10px 20px;
        display: table-cell;
    }
    #mypage table.tableStyle tr.bg_lightgray th .from_email {
        font-size: 106%;
        margin-top: 10px;
    }
    #mypage table.tableStyle tr.bg_gray th {
        width: auto;
        display: block;
        font-size: 106%;
    }
    #mypage table.tableStyle tr.bg_gray td {
        width: auto;
        display: block;
        padding: 0 20px 10px 20px;
        font-size: 125%;
    }

   /* --------------------------------
       □ mypage/password
    -------------------------------- */

    #mypage.password table.tableStyle th {
        width: 100%;
    }
    #mypage.password table.tableStyle th, #mypage.password  table.tableStyle td {
        padding: 10px 0 0 0;
    }

   /* --------------------------------
       □ mypage/login
    -------------------------------- */

    #mypage .login .w509 {
        width: 100%;
    }
    #mypage .login h3 {
        text-align: left;
        padding-left: 0;
        margin: 0;
        margin-bottom: 15px;
    }
    #mypage .login .login_btn .text {
        text-align: left;
    }

    /* --------------------------------
       □ mypage/register
    -------------------------------- */

    #mypage.edit .register .buttonStyle {
        width: auto;
    }
    #mypage.edit .register table.tableStyle {
        margin-bottom: 0;
    }
    #mypage.edit .register table.tableStyle tr.bg_gray th {
        width: auto;
        display: block;
        font-size: 106%;
    }
    #mypage .register.input table.tableStyle th {
        width: auto;
        padding: 10px 0 0 0;
    }
    #mypage .register.input table.tableStyle td {
        width: auto;
        padding: 10px 0 0 0;
    }
}