@charset "UTF-8";

/* ----------------------------------------------------------------------------------------------------
*  基本情報
* --------------------------------------------------------------------------------------------------*/

html {
    font-size: 62.5%;
    overflow-y: scroll;
    color: #313131;
    height: -webkit-fill-available;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
address,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
img,
form {
    margin: 0;
    padding: 0;
    border: none;
    list-style-type: none;
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    font-size: 14px;
    line-height: 1.8;
    color: #313131;
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    address,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    table,
    th,
    td,
    img,
    form {
        font-size: 1.4rem;
        font-size: 14px;
    }
}

/*Uikit listスタイル復活*/
.uk-list-disc {
    list-style-type: disc;
}

.uk-list-decimal {
    list-style-type: decimal;
}

.uk-list-disc li {
    list-style-type: disc;
}

.uk-list-decimal li {
    list-style-type: decimal;
}

body {
    background: #FFF2F7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

body>.contents {
    flex: 1;
    position: relative;
    overflow-x: hidden;
    overflow: hidden;
}

.uk-link, a {
    color: #E83380;
}
.uk-link:hover, a:hover {
    color: #E83380;
}

img {
    -webkit-backface-visibility: hidden;
    border: solid 1px #fff;
}

#header,
#main,
#footer {
    width: 100%;
}

a {
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

a,
a:hover {
    color: #E83380;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}


/* ------------------------------------------------------------------------------
    Header & Navigation
-------------------------------------------------------------------------------*/

.sidebar {
    padding: 10px;
    box-sizing: border-box;
    width: 230px;
    position: fixed;
    top: 0;
    right: 0;
    border: 0;
    bottom: 0;
    height: 100%;
    background: #f8f8f8;
    overflow-y: scroll;
    z-index: 100;
}

@media (max-width: 768px) {
    .sidebar {
        z-index: 300;
    }
}

.sidebar .dashboard {
    padding-left: 0;
    list-style-type: none;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .sidebar {
        padding: 0;
    }
    .sidebar .dashboard {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 0;
    }
    .sidebar .dashboard li {
        box-sizing: border-box;
        width: calc(100% / 4);
        border: 2px solid #555;
        border-left: none;
        padding: 0;
    }    
    .sidebar .dashboard li:nth-child(1) {
        border-left: 2px solid #555;
    }
}

.sidebar .dashboard li {
    text-align: center;
    position: relative;
}
.sidebar .dashboard li.now{
    /* background-color: #fddfec; */
}
/* .sidebar .dashboard li.now::before {
    position: absolute;
    z-index: 200;
    display: block;
    left: 50px;
    top: calc(50% - 10px);
    width: 10px;
    height: 16px;
    content: "";
    background-image: url(../img/message/sideba_icon_now_pc.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
} */

/* @media (max-width: 768px) {
    .sidebar .dashboard li.now::before {
        top: auto;
        bottom: -6px;
        left: calc(50% - 6px);
        background-image: url(../img/message/sideba_icon_now_sp.svg);
        height: 7px;
    }
} */
.sidebar .dashboard li.grayed{
    background-color: rgba(0, 0, 0, 0.6);
}

.sidebar .dashboard li .uk-button {
    border: none;
    background: none;
    padding: 10px 0;
}

@media (max-width: 768px) {
    .sidebar .dashboard li .uk-button {
        padding: 0;
    }
}

.sidebar .dashboard li .uk-button:hover {
    cursor: pointer;
}

.sidebar .dashboard li.frame button img {
    width: 160px;
}

.sidebar .dashboard li.photo button img {
    width: 160px;
}

.sidebar .dashboard li.message button img {
    width: 160px;
}

.sidebar .dashboard li.confirm button img {
    width: 160px;
}


@media (max-width: 768px) {
    .sidebar .dashboard li.frame button img {
        width: auto;
        height: 56px;
    }

    .sidebar .dashboard li.photo button img {
        width: auto;
        height: 56px;
    }

    .sidebar .dashboard li.message button img {
        width: auto;
        height: 56px;
    }

    .sidebar .dashboard li.confirm button img {
        width: auto;
        height: 56px;
    }
}

.content-wrapper {
    margin-right: 230px;
    margin-bottom: 120px;
}

#top-header {
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

#top-header .logo_area {
    text-align: center;
    padding: 0;
}

#top-header .logo_area img.logo {
    height: 60px;
    display: inline-block;
}

@media (max-width: 768px) {
    #top-header .logo_area img.logo {
        height: 50px;
    }
}

#top-header .uk-position-center-right {
    right: 10px;
}

#top-header .uk-position-center-right .uk-button {
    background-color: #E83380;
    border-radius: 5px;
    color: #fff;
    min-width: auto;
}

@media (max-width: 768px) {
    #top-header .uk-position-center-right .uk-button {
        padding: 0 15px;
    }
}



/* ------------------------------------------------------------------------------
    Button
-------------------------------------------------------------------------------*/

.uk-button {
    /*display: block;*/
    transition: .3s ease-in-out;
    box-sizing: border-box;
    text-transform: none;
    font-size: 16px;
    border-radius: 26px;
    position: relative;
}

@media (max-width: 768px) {
    .uk-button {
        font-size: 14px;
    }
}

.uk-button:hover {
    opacity: 0.7;
}

.uk-button.uk-button-large {
    border-radius: 26px;
}

.uk-button.next::before {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 22px;
    margin-top: -4px;
}

.uk-button.back::before {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    top: 50%;
    left: 22px;
    margin-top: -4px;
}

.uk-button-default {
    background-color: #E83380;
    border: none;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    /*margin-bottom: 20px !important;*/
    white-space: nowrap;
}

.uk-button-default:focus, .uk-button-default:hover {
    background-color: #E83380;
    border: none;
    color: #fff;
}

.uk-button-primary {
    background-color: #9E908B;
    border: none;
    color: #fff;
    font-weight: bold;
    letter-spacing: 5px;
}

.uk-button-primary:focus, .uk-button-primary:hover {
    background-color: #9E908B;
    border: none;
    color: #fff;
}

.uk-button-secondary {
    background-color: #A48953;
    border: none;
    color: #fff;
    font-weight: bold;
    letter-spacing: 5px;
}

.uk-button-secondary:focus, .uk-button-secondary:hover {
    background-color: #A48953;
    border: none;
    color: #fff;
}

.uk-button-default-modal {
    width: 300px;
    line-height: 2em;
    padding: 20px;
    margin: 30px 0;
    letter-spacing: 4px;
}

.uk-button-secondary-modal {
    width: 250px;
    padding: 10px;
    margin: 10px;
}
/* ------------------------------------------------------------------------------
    余白
-------------------------------------------------------------------------------*/

.apc-mt60 {margin-top: 60px!important;}
.apc-mt50 {margin-top: 50px!important;}
.apc-mt40 {margin-top: 40px!important;}
.apc-mt30 {margin-top: 30px!important;}
.apc-mt20 {margin-top: 20px!important;}
.apc-mt15 {margin-top: 15px!important;}
.apc-mt10 {margin-top: 10px!important;}
.apc-mt5 {margin-top: 5px!important;}
.apc-mt0 {margin-top: 0!important;}
.apc-mt-20 {margin-top: -20px!important;}
.apc-mb60 {margin-bottom: 60px!important;}
.apc-mb50 {margin-bottom: 50px!important;}
.apc-mb40 {margin-bottom: 40px!important;}
.apc-mb30 {margin-bottom: 30px!important;}
.apc-mb20 {margin-bottom: 20px!important;}
.apc-mb15 {margin-bottom: 15px!important;}
.apc-mb10 {margin-bottom: 10px!important;}
.apc-mb5 {margin-bottom: 5px!important;}
.apc-mb0 {margin-bottom: 0!important;}
.apc-ml20 {margin-left: 20px!important;}
.apc-ml15 {margin-left: 15px!important;}
.apc-ml10 {margin-left: 10px!important;}
.apc-ml5 {margin-left: 5px!important;}
.apc-ml0 {margin-left: 0!important;}
.apc-mr20 {margin-right: 20px!important;}
.apc-mr15 {margin-right: 15px!important;}
.apc-mr10 {margin-right: 10px!important;}
.apc-mr5 {margin-right: 5px!important;}
.apc-mr0 {margin-right: 0!important;}
.apc-pt60 {padding-top: 60px!important;}
.apc-pt50 {padding-top: 50px!important;}
.apc-pt40 {padding-top: 40px!important;}
.apc-pt30 {padding-top: 30px!important;}
.apc-pt20 {padding-top: 20px!important;}
.apc-pt15 {padding-top: 15px!important;}
.apc-pt10 {padding-top: 10px!important;}
.apc-pt-10 {padding-top: -10px!important;}
.apc-pt5 {padding-top: 5px!important;}
.apc-pt0 {padding-top: 0!important;}
.apc-pb20 {padding-bottom: 20px!important;}
.apc-pb10 {padding-bottom: 10px!important;}
.apc-pb3 {padding-bottom: 3px!important;}
.apc-pb30 {padding-bottom: 30px!important;}
.apc-pb0 {padding-bottom: 0!important;}
.apc-pl0 {padding-left: 0!important;}

.p5 {padding: 0.5%;}
.p10 {padding: 1%;}
.p15 {padding: 1.5%;}
.p20 {padding: 2%;}
.p30 {padding: 3%;}
.p30-0 {padding: 3% 0;}
.p40 {padding: 4%;}
.p2010 {padding: 2% 1%;}
.p1020 {padding: 1% 2%;}
.p10-0 {padding: 1% 0%;}
.p5px {padding: 5px;}
.p6px {padding: 6px;}
.p7px {padding: 7px;}
.pl10 {padding-left: 1%;}
.pl20 {padding-left: 2%;}
.pl30 {padding-left: 3%;}
.pr10 {padding-right: 1%;}
.pr20 {padding-right: 2%;}
.pr30 {padding-right: 3%;}
.p5px {padding: 5px;}
.p10px {padding: 10px;}
.p20px {padding: 20px;}
.p020px {padding: 0 20px;}
.p1020px {padding: 10px 20px;}
.p1510px {padding: 15px 10px;}
.p1510px {padding: 15px 10px;}
.pb10px {padding-bottom: 10px;}
.pb20px {padding-bottom: 20px;}
.mb5px {margin-bottom: 5px;}
.mb10 {margin-bottom: 1% !important;}
.mb20 {margin-bottom: 2% !important;}
.mb10px {margin-bottom: 10px !important;}
.mb20px {margin-bottom: 20px !important;}
.mb40 {margin-bottom: 8% !important;}
.mb40px {margin-bottom: 40px !important;}
.mb60px {margin-bottom: 60px !important;}
.mb1rem {margin-bottom: 1rem !important;}
.mt-5px {margin-top: -5px !important;}
.mt-10px {margin-top: -10px !important;}
.mt-60px {margin-top: -60px !important;}
.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 1%;}
.mt20 {margin-top: 2%;}
.mt30 {margin-top: 3%;}
.mt40 {margin-top: 4%;}
.mt5px {margin-top: 5px;}
.mt50px {margin-top: 50px;}
.mt10px {margin-top: 10px;}
.mr10 {margin-right: 1%;}
.mr5px {margin-right: 5px;}
.mr10px {margin-right: 10px;}
.mr15px {margin-right: 15px;}
.mr20 {margin-right: 2%;}
.mr20px {margin-right: 20px;}
.mr50px {margin-right: 50px;}
.mr60px {margin-right: 60px;}
/*responsive*/
@media (max-width: 768px) {
    .sp-mart-30p {
        margin-top: 30px;
    }
}

/* ------------------------------------------------------------------------------
    フォント
-------------------------------------------------------------------------------*/

.apc-fs20 {font-size: 20px;font-size: 2rem;}
.apc-fs18 {font-size: 18px;font-size: 1.8rem;}
.apc-fs16 {font-size: 16px;font-size: 1.6rem;}
.apc-fs14 {font-size: 14px;font-size: 1.4rem;}
.apc-fs13 {font-size: 13px;font-size: 1.3rem;}
.apc-fs12 {font-size: 12px;font-size: 1.2rem;}
.apc-fs10 {font-size: 10px;font-size: 1rem;}
.apc-fs9 {font-size: 9px;font-size: .9rem;}
.apc-fs8 {font-size: 8px;font-size: .8rem;}
.apc-fw-b {font-weight: bold !important;}
.apc-fw-n {font-weight: normal !important;}
.apc-c-red {color: red !important;}
.apc-ta-l {text-align: left !important;}
.apc-ta-c {text-align: center !important;}
.apc-ta-r {text-align: right !important;}
.apc-td-u {text-decoration: underline !important;}
.fwB {font-weight: bold !important;}
.fs10 {font-size: 10px !important;line-height: 1.8em;}
.fs11 {font-size: 11px !important;line-height: 1.8em;}
.fs12 {font-size: 12px !important;line-height: 1.8em;}
.fs14 {font-size: 14px !important;line-height: 1.8em;}
.fs15 {font-size: 15px !important;line-height: 1.8em;}
.fs16 {font-size: 16px !important;line-height: 1.8em;}
.fs18 {font-size: 18px !important;line-height: 1.8em;}
.fs20 {font-size: 20px !important;line-height: 1.8em;}
.fs26 {font-size: 26px !important;line-height: 1.8em;}
.fs26 {font-size: 26px !important;line-height: 1.8em;}
.fs30 {font-size: 30px !important;line-height: 1.8em;}
.fsS {font-size: 80% !important;line-height: 1.8em;}
.fsL {font-size: 120% !important;line-height: 1.8em;}
.fs09rem {font-size: 0.9rem !important;line-height: 1.8em;}
.fs10rem {font-size: 1.0rem !important;line-height: 1.8em;}
.fs11rem {font-size: 1.1rem !important;line-height: 1.8em;}
.fs12rem {font-size: 1.2rem !important;line-height: 1.8em;}
.fs14rem {font-size: 1.4rem !important;line-height: 1.8em;}
.fs16rem {font-size: 1.6rem !important;line-height: 1.8em;}
.fs18rem {font-size: 1.8rem !important;line-height: 1.8em;}
.fs20rem {font-size: 2.0rem !important;line-height: 1.8em;}
.fs10em {font-size: 1.0em !important;line-height: 1.8em;}
.fs11em {font-size: 1.1em !important;line-height: 1.8em;}
.fs12em {font-size: 1.2em !important;line-height: 1.8em;}
.fs13em {font-size: 1.3em !important;line-height: 1.8em;}
.fs14em {font-size: 1.4em !important;line-height: 1.8em;}
.fs15em {font-size: 1.5em !important;line-height: 1.8em;}
.fs16em {font-size: 1.6em !important;line-height: 1.8em;}
.fs18em {font-size: 1.8em !important;line-height: 1.8em;}
.fs20em {font-size: 2.0em !important;line-height: 1.8em;}

.text-green {color: #8bc34a;}
.text-grey {color: gray;}
.text-grey2 {color: #707070;}
.text-pink {color: #E83380;}
.text-pink2 {color: #e9277e;}
.text-blue {color: #41bad0;}
.text-white {color: #fff !important;}
.text-default {color: #545454 !important;}
.text-rightpink {color: #FFF2F7;}

.underline{text-decoration:underline !important;}

.lineHeightWide-small {line-height: 1.8em !important;}
.lineHeightWide-medium {line-height: 2.0em !important;}
.lineHeightWide-large {line-height: 2.2em !important;}

.verticalMiddle{vertical-align: middle;}
.verticalTop{vertical-align: top !important;}
.verticalBottom{vertical-align: bottom !important;}


/* ------------------------------------------------------------------------------
    線
-------------------------------------------------------------------------------*/

.borderPink {border: 1px solid #f2cbcb;}
.borderPink2 {border: 2px solid #f2cbcb;}
.borderPink3 {border: 1px solid #f06570;}
.borderGrey {border: 1px solid #eee;}
.borderGrey2 {border: 2px solid #eee;}
.borderGrey2-dashed {border: 2px dashed #eee;}
.borderGrey3 {border: 1px solid #d0d0d0;}
.borderGrey4 {border: 1px solid #ddd;}
.borderBlue2 {border: 2px solid #41bad0;}
.borderBlue7 {border: 7px solid #41bad0;}
.bbWhite {border-bottom: 1px solid #e0e0e0;}
.bbGrey {border-bottom: 1px solid #c3c1c1;}
.bbBlue7 {border-bottom: 7px solid #41bad0;}
.btBlue7 {border-top: 7px solid #41bad0;}

.roundedS {border-radius: 5px;}
.roundedL {border-radius: 15px;}


/* ------------------------------------------------------------------------------
    背景
-------------------------------------------------------------------------------*/

.bgGrey {background: #F2F2F2;}
.bgGrey2 {background: #f3f3f3;}
.bgGrey3 {background: #eee;}
.bgWhite {background: #FFFFFF;}
.bgWhiteShadow {background: #FFFFFF;box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);}
.bgPink {background: #fcceda;}
.bgPink2 {background: #FFBDBD;}
.bgBlue {background: #43bad0;}
.bgBlue2 {background: #e9f2f4 !important;}
.bgBlue3 {background: #41bad0 !important;}
.bgBlue2Shadow {background: #e9f2f4;box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);}


/* ------------------------------------------------------------------------------
    ラベル
-------------------------------------------------------------------------------*/

.uk-label.yellow {
    color: #fff;
    background: #d1c02c;
}

.uk-label.yellow.small {
    font-size: 10px;
    padding: 0 3px;
}

.uk-label.grey {
    color: #fff;
    background: #666;
}

.uk-label.grey.small {
    font-size: 10px;
    padding: 0 3px;
}

.uk-label.grey2 {
    color: #666;
    background: #ccc;
}

.uk-label.grey2.small {
    font-size: 10px;
    padding: 0 3px;
}

.uk-label.pink {
    color: #fff;
    background: #e173a4;
}

.uk-label.pink.small {
    font-size: 10px;
    padding: 0 3px;
}

.uk-badge.pink {
    color: #fff;
    background: #e173a4;
}

.new_label {
    display: inline-block;
    margin-top: -4px;
}

.new_label.normal {
    margin-top: 0px;
}

.uk-label.blue {
    color: #fff;
    background: #41bad0;
}

.uk-label.blue.outline {
    background: #fff;
    border: 1px solid #41bad0;
    color: #41bad0;
}


/* ------------------------------------------------------------------------------
    form
-------------------------------------------------------------------------------*/

/* form-reset */

.contents input[type="submit"],
.contents input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}

.contents input[type="submit"]::-webkit-search-decoration,
.contents input[type="button"]::-webkit-search-decoration {
    display: none;
}

.contents input[type="submit"]::focus,
.contents input[type="button"]::focus {
    outline-offset: -2px;
}


/* checkbox */


/* checkbox & radio */

.contents .uk-radio,
.contents .uk-checkbox {
    background-color: #FFF;
    border: 1px solid #e5e5e5;
}

.contents .uk-checkbox {
    border-radius: 3px;
}

.contents .uk-radio:checked,
.contents .uk-checkbox:checked {
    background-color: #FFF;
}

.contents .uk-checkbox:checked {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGVjayIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNoZWNrIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ij48L3BhdGg+PC9zdmc+")
}

.contents .uk-radio:checked {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2IDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgY3g9IjMiIGN5PSIzIiByPSIwLjk4Ii8+DQo8L3N2Zz4NCg==");
}

.contents label + label {
    margin-left: 1em;
}


/* select */

.contents select {
    background: #FFF;
    border-radius: 5px;
    padding-left: 20px;
    color: #8f8d8d;
    line-height: 1.2em;
}

.category_select_area {
    text-align: center;
}

.meishi_frame_select {
    width: 140px;
    text-align: center;
    background: #FFF;
    border-radius: 5px;
    padding-left: 0 !important;
    color: #3e3e3e !important;
    line-height: 1.2em;
    margin: auto;
    font-size: 1.2em;
    border: solid 2px #ea498b;
}

.contents select:focus {
    border: 1px solid #f2cbcb;
}

.contents .uk-select.uk-form-small {
    padding-right: 20px !important;
}


/* label */

.contents label {
    cursor: pointer;
}


/* textarea */

.contents textarea {
    resize: vertical;
}


/* datepicker */

.ui-widget-header {
    background: #FFF;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    background: #e6e6e6;
}


/* 必須ラベル */

.info {
    display: inline-block;
    margin-left: 1em;
    background: #F00;
    color: #FFF;
    padding: 0 3px 2px 3px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: normal;
}


/* table */

.uk-table th,
.uk-table th {
    font-size: 14px;
    font-size: 1.4rem;
}



/* error message ------------------- */
.message-box,
.error-box ,
.header_msg_info,
.header_msg_error {
    /* margin: 30px auto; */
    padding: 0.5em 2em;
    border-radius: 5px;
    line-height: 1.4;
    font-size: 1.4rem;
    font-size: 14px;
}
.message-box,
.error-box {
    background: none;
    border: 2px solid #f7f5ed;
    /* padding: 1.5em 2em; */
}
.message-box {
    background: #f7f5ed;
}
.error-box {
    background: #ffb8b8;
}
.message-box p,
.error-box p {
    text-align: left;
    line-height: 1.4;
    font-size: 1.4rem;
    font-size: 14px;
    color: #e9277e;
}
.error-box p + p{
    margin-top: 0.5em;
}
.header_msg_info {
    background: #b2e0f8;
    color: #41bad0;
}
.header_msg_error {
    background: #ffb8b8;
    color: #e9277e;
}


/*ページ送り*/

.uk-pagination {
    border-radius: .25rem;
}
.uk-pagination>li {
    padding-left: 0;
}
.uk-pagination>li:first-child {
    padding-left: 20px;
}
.uk-pagination li:first-child a {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.uk-pagination li:last-child a {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
.uk-pagination li:first-child span {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.uk-pagination li:last-child span {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
.uk-pagination li a {
    border: 1px solid #dee2e6;
    padding: .5rem .75rem;
    font-size: 14px;
    color: #333;
    margin-left: -1px;
}
.uk-pagination li>span {
    border: 1px solid #dee2e6;
    padding: .5rem .75rem;
    font-size: 14px;
    color: #333;
    margin-left: -1px;
}
.uk-pagination li.uk-active>span {
    background: #41bad0;
    color: #333;
}

/* contents -------------------------------------- */
.uk-container {
	margin: 0 auto;
	box-sizing: border-box;
}

/* pankuzu -----------------------------*/

.pankuzu {
	margin: 0 auto 2em;
    padding: 5px 0;
}
.pankuzu li{
	display: inline-block;
}
.pankuzu li , .pankuzu li a {
	font-size: 1.2rem;
	font-size: 12px;
	color: #333333;
}
.pankuzu li a {
	text-decoration: underline;
}
.pankuzu li + li {
	padding-left: 0.5em;
}
.pankuzu li + li:before {
	content:'>';
	padding-right: 0.5em;
}

/* form-set ------------------------------------*/

.form-set {
	background: #FFF;
	/*padding: 3%;*/ /*ダッシュボード形式のため、既存スタイルをキャンセル*/
	margin: 60px auto;
	/*border: 1px solid #ededed;*/ /*ダッシュボード形式のため、既存スタイルをキャンセル*/
    width: 100%;
    box-sizing: border-box;
}

/* form-set error*/
.form-set p.error {
	color: #e9277e;
    line-height: 1.4;
	font-size: 1.4rem;
	font-size: 14px;
}

/* form-set table */
.form-set table {
	margin: 0 auto;
	box-sizing: border-box;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.form-set table tr.error {
	background: #ffb8b8;
}

.form-set table tr.error p.error {
	margin-bottom: 5px;
}

.form-set table th, .form-set table td {
	text-align: left;
	font-size: 14px;
	font-size: 1.4rem;
	vertical-align: middle;
    border-bottom: 1px dashed #ededed;
}

.form-set table th {
    /*
	padding: 1em 2em;
    width: 35%;
    font-weight: bold;
    */
}

.form-set table th label > * {
	vertical-align: middle;
}

.form-set table th label > i {
	margin-left: 1em;
    font-size: 12px;
    font-size: 1.2rem;
}

.form-set table td {
	padding: 1em;
}

.form-set table th .info {
	display: inline-block;
    margin-left: 1em;
    vertical-align: middle;
    background: #e9277e;
    color: #FFF;
    padding: 1px 3px 0;
    border-radius: 3px;
    font-size: 10px;
    font-weight: normal;
}

.cart_list table td .info {
	display: inline-block;
    margin-left: 1em;
    vertical-align: middle;
    background: #e9277e;
    color: #FFF;
    padding: 1px 3px 0;
    border-radius: 3px;
    font-size: 10px;
    font-weight: normal;

}

.form-set .uk-input, .form-set .uk-select, .form-set .uk-textarea {
	border: 1px solid #ededed;
	border-radius: 5px;
}

.form-set .uk-textarea {
	padding: 1em 10px;
    resize: vertical;
}

.form-set .uk-checkbox {
	border-radius: 3px;
}

.form-set .btn-set {
	margin: 0 50px;
}

/*.form-set .uk-margin-small-top {
    margin-top: 0!important;
}*/

.form-set .kiyaku {
    text-align: center;
    margin: 3em auto 1.5em;
}

.fini p {
    line-height: 1.6;
}

.fini * + p {
    margin-top: 1.5em;
}

.fini p.last {
    margin-top: 3em;
}


/* footer -------------------------------------------------------------- */

.al-footer {
    height: auto;
    width: 100%;
    position: fixed;
    display: block;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    box-sizing: border-box;
    background-color: #9E908B;
    z-index: 200;
}

.al-footer.sp {
    bottom: 72px;
}

/* ------------------------------------------------------------------------------
    レスポンシブ
-------------------------------------------------------------------------------*/

@media screen and (min-width:769px) {
    .sp {
        display: none!important;
    }
    .sp-inline {
        display: none!important;
    }
    .sp-flex {
        display: none!important;
    }
}
@media screen and (max-width:768px) {
    .pc {
        display: none!important;
    }
    .sp {
        display: block;
    }
    .sp-inline {
        display: inline;
    }
    .sp-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@media (max-width: 768px) {
    .sidebar {
        top: auto;
        bottom: 0;
        width: 100%;
        left: 0;
        right: 0;
        height: auto;
        overflow: visible;
        position: fixed;
    }
    #make_base_page {
        padding-top: 55px;
    }
    .content-wrapper {
        margin-right: 0;
        margin-bottom: 25px;
    }

    /* form-set */

    .form-set {
		/*padding:0 2% 10%;*/ /*ダッシュボード形式のためキャンセル*/
		width: 100%;
		box-sizing: border-box;
        margin-top: 0;
    }
    .form-set.login {
        margin-top: 25px;
    }
    .form-set .error-box {
		margin-bottom: 0;
	}
    .form-set h4 {
		text-align: left;
		font-size: 1.4rem;
		font-size: 14px;
		line-height: 1.6;
		padding: 0 0.8em;
	}
    .form-set table {
		margin: 0 auto 1em;
	}
    .form-set table th,  .form-set table td {
		text-align: left;
		display: block;
	}
    .form-set table tr:first-child td {
		border-top: none;
	}
    .form-set table th {
		padding: 1.5em 0 0.8em;;
		border: none;
		font-size: 14px;
		font-size: 1.4rem;
        width: 100%;
        box-sizing: border-box;
    }
    .form-set table td {
		padding: 0 1em 1em;
	}
    .form-set table td .uk-child-width-auto {
		min-height: 18px;
	}
    .form-set .btn-set li:last-child {
		margin-top: 2%;
	}
    .form-set .btn-set {
		display: block;
		margin: 0 3%;
	}
    .form-set .btn-set li .uk-button {
		width: 100%;
		font-size: 12px;
		font-size: 1.2rem;
		height: 45px;
	}
    .form-set table td {
		padding: 3% 0 5%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: left;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
	}
    .form-set table td > div.uk-width-1-1 {
		width: 100%;
        box-sizing: border-box;
	}
    .form-set .send-img {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .form-set .send-img img ,
    .form-set .send-img video {
        max-width:180px;
    }
    .weight-input-tag,.height-input-tag {
        width: 90%;
        margin-right: 5px;
    }
}


/* ------------------------------------------------------------------------------
    プロジェクト独自スタイル
-------------------------------------------------------------------------------*/

/* プロジェクトスタイル設定 -------------------------------------------------------------- */

.dashboard_ttl {
    font-size: 2.0rem !important;
}

.dashboard_ttl.common_style {
    text-align: left;
    color: #313131;
    padding-left: 10px;
    position: relative;
    font-weight: bold;
}

.dashboard_ttl.common_style::before {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 0;
    height: 23px;
    background-color: #A48953;
    width: 4px;
    border-radius: 3px;
    content: " ";
}

@media (max-width: 768px) {
    .dashboard_ttl.common_style {
        text-align: center;
        letter-spacing: 3px;
    }
    .dashboard_ttl.common_style::before {
        width: 47px;
        height: 4px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        bottom: -5px;
        top: auto;
    }
}




/* 説明ページスタイル設定 -------------------------------------------------------------- */

#setumei_page .dashboard_ttl {
    font-weight: bold;
}

#setumei_page .eyecatch {
    text-align: center;
}

#setumei_page .eyecatch img {
    max-width: 400px;
}

#setumei_page .uk-container-small {
    max-width: 900px;
    margin: auto;
}

@media (max-width: 768px) {
    #setumei_page .eyecatch img {
        width: 100%;
        max-width: auto;
    }
}

#setumei_page .uk-button {
    min-width: 270px;
    margin: 50px auto 80px;
}

@media (max-width: 768px) {
    #setumei_page .uk-button {
        min-width: 170px;
        line-height: 23px;
        margin: 50px 0px 80px;
        padding: 10px 30px;
    }
}


/* トップページスタイル設定 -------------------------------------------------------------- */

@media (max-width: 768px) {
    #noshi_list_area {
        margin-top: 30px;
    }
}


/* 文例選択ページスタイル設定 -------------------------------------------------------------- */

#message_select_page .category_select_area input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
}

#message_select_page .category_select_area > label {
    margin-bottom: -2px;
}

#message_select_page .category_select_area > label:last-child {
    margin-bottom: 0;
}

#message_select_page .category_select_area label {
    display: inline-block;
    cursor: pointer;
    padding: 2px 10px;
    background: #fff;
    color: #999;
    border: 2px solid #D3D3D3;
    text-align: center;
    border-radius: 5px ;
    font-size: 12px;
    width: 33%;
    box-sizing: border-box;
    margin-right: 0px;
}

#message_select_page .category_select_area label:last-child {
    margin-right: 0;
}

@media(max-width: 768px) {
    #message_select_page .category_select_area label {
        padding: 3px 1em;
        font-size: 13px;
        width: 49.5%;
    }
}

#message_select_page .category_select_area input[type="radio"]:checked + label {
    border-top: 2px solid #E83380;
    background: #fff;
    color: #E83380;
    border-right: 2px solid #E83380;
    border-left: 2px solid #E83380;
    border-bottom: none;
}

#message_select_page #frames-overlay-container {
    margin-top: -2px;
    /*border-top: 3px solid #D3D3D3;*/
    background-color: #ffffff;
    padding: 20px 20px 50px;
    position: relative;
}

@media (max-width: 768px) {
    #message_select_page #frames-overlay-container {
        padding: 5px 10px 20px 10px;
    }
}

#message_select_page #frames-overlay-container .frame-text {
    /*border: 3px solid #D3D3D3;*/
    padding: 5px 10px;
    height: 90%;
}

#message_select_page #frames-overlay-container .frame-text:hover {
    border: 3px solid #C4C4C4;
}

#message_select_page #frames-overlay-container .frame-text p {
    font-size: 14px;
    color: #313131;
}

@media (max-width: 768px) {
    #message_select_page #frames-overlay-container .frame-text p {
        font-size: 14px;
    }
}

#message_select_page .uk-button {
    min-width: 270px;
}

@media (max-width: 768px) {
    #message_select_page .uk-button {
        min-width: 170px;
    }
}

.frame-text-list {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 2px solid #D3D3D3;
}

.frame-text-list:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}



/* フレームページスタイル設定 -------------------------------------------------------------- */

#frame_page .category_select_area input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
}

#frame_page .category_select_area > label {
    margin-bottom: -2px;
}

#frame_page .category_select_area > label:last-child {
    margin-bottom: 0;
}

#frame_page .category_select_area label {
    display: inline-block;
    cursor: pointer;
    padding: 2px 10px;
    background: #fff;
    color: #999;
    border: 2px solid #D3D3D3;
    text-align: center;
    border-radius: 5px 5px 0 0;
    font-size: 12px;
    width: 33%;
    box-sizing: border-box;
    margin-right: 0px;
}

#frame_page .category_select_area label:last-child {
    margin-right: 0;
}

@media(max-width: 768px) {
    #frame_page .category_select_area label {
        padding: 3px 5px;
        font-size: 13px;
        width: 49.5%;
    }
}

#frame_page .category_select_area input[type="radio"]:checked + label {
    border-top: 2px solid #E83380;
    background: #fff;
    color: #E83380;
    border-right: 2px solid #E83380;
    border-left: 2px solid #E83380;
    border-bottom: none;
}

#frame_page #frames-overlay-container {
    margin-top: -2px;
    /*border-top: 3px solid #D3D3D3;*/
    background-color: #ffffff;
    padding: 20px 20px;
    position: relative;
}

@media (max-width: 768px) {
    #frame_page #frames-overlay-container {
        padding: 10px 10px;
    }
}

#frame_page #frames-overlay-container ul li img {
    display: block;
}

#frame_page #frames-overlay-container ul li > div {
    border: 3px solid #D3D3D3;
}

#frame_page #frames-overlay-container ul li:hover > div {
    border: 3px solid #C4C4C4;
}

#frame_page .uk-button {
    min-width: 270px;
}

@media (max-width: 768px) {
    #frame_page .uk-button {
        min-width: 170px;
        line-height: 38px;
    }
}

.frame_list_area_position {
    position: relative;
}

.frame_list_area {
    display: none;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff;
}

@media (max-width: 768px) {
    .frame_list_area {
        position: absolute;
        z-index: 1;
        height: 74vh;
        overflow-y: scroll;
    }
}

@media (max-width: 768px) {
    m.frame_list_area_meishi {
        position: absolute;
        z-index: 1;
        height: 74vh;
        overflow-y: scroll;
        top: 130px;
    }
}

.text_list_area_position {
    position: relative;
}

.text_list_area {
    display: none;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff;
}

@media (max-width: 768px) {
    .text_list_area {
        position: absolute;
        z-index: 1;
        height: 72vh;
        overflow-y: scroll;
    }
}


/* 写真／動画を選ぶページスタイル設定 -------------------------------------------------------------- */

#photo_select_page .card_preview_area {
    position: relative;
    padding: 0 30%;
}

#photo_select_page .photo_icon {
    color: #E83380;
    position: absolute;
    top: 25%;
    left: calc(50% - 40px/2);
    background-color: #ffffff91;
}
#photo_select_page .message_icon {
    color: #E83380;
    position: absolute;
    top: inherit;
    left: calc(50% - 40px/2);
    /*bottom: 18%;*/
    background-color: #ffffff91;
}

@media (max-width: 768px) {
    #photo_select_page .card_preview_area {
        padding: 0;
        width: auto;
        max-height: 80vh;
        /* max-width: 100%; */
        overflow-y:auto;
    }
    #photo_select_page .card_preview_area img#card_photo_image {
        display: block;
        width: 71vw;
        height: auto;
        margin: auto;
        display: block;
    }
}



#photo_select_page .select_btn > div {
    min-width: 270px;
}

.uk-modal .select_btn > div {
    min-width: 220px;
}

.uk-modal .video_advice {
    border: 1px solid #D6D6D6;
    border-radius: 10px;
    padding: 20px;
}

@media (max-width: 768px) {
    .dashboard_ttl.uk-margin-bottom {
        margin-bottom: 20px !important;
    }
    #photo_select_page .select_btn > div {
        min-width: 220px;
    }
    .uk-modal .select_btn > div {
        min-width: 200px;
    }
    .uk-modal .video_advice {
        padding: 10px;
    }
    .uk-modal .about_limit .fs16 {
        font-size: 11px;
    }
    .uk-modal .about_limit .uk-grid-small > .uk-grid-margin {
        margin-top: 5px;
    }
}

@media (max-width: 768px) {
    #photo_select_page .uk-button {
        min-width: 170px;
    }
    #modal-select_photo .uk-button {
    }
    #modal-select_video .uk-button {
    }
}


/* 写真の調整ページスタイル設定 -------------------------------------------------------------- */
#photo_edit_page #preview-area {
    height: auto;
    position: relative;
}

@media (max-width: 768px) {
    #photo_edit_page #preview-area {
        height: auto;
        width: auto;
    }
}

@media (max-width: 768px) {
    #photo_edit_page #preview-area-inner {
        height: 100%;
        width: auto;
    }
}

#photo_edit_page .preview-frame {
    position: relative;
}

@media (max-width: 768px) {
    #photo_edit_page .preview-frame {
        height: 100%;
    }
}

#photo_edit_page .preview-frame .frame-h {
    position: relative;
    border: 0 none;
    height: auto;
    overflow: hidden;
    position: relative;
}

@media (max-width: 768px) {
    #photo_edit_page .preview-frame .frame-h {
        height: auto;
        width: 71vw;
        margin: auto;
    }
}

#photo_edit_page .preview-frame img.preview-frame-image {
    position: relative;
    z-index: 10;
}

#photo_edit_page .preview-frame .frame-h img.preview-frame-image {
    display: block;
}

@media (max-width: 768px) {
    #photo_edit_page .preview-frame img.preview-frame-image {
        height: auto;
        margin: 0 auto;
        width: 100%;
    }
}

/*名刺カード*/
#photo_edit_page #preview-area-meishi {
    height: auto;
    position: relative;
}

@media (max-width: 768px) {
    #photo_edit_page #preview-area-meishi {
        max-height: 460px;
        width: auto;
    }
}

@media (max-width: 768px) {
    #photo_edit_page #preview-area-inner-meishi {
        max-height: 460px;
        width: auto;
    }
}

#photo_edit_page .preview-frame-meishi {
    position: relative;
    text-align: center;
}


#photo_edit_page .preview-frame-meishi .frame-h-meishi {
    position: relative;
    border: 0 none;
    height: auto;
    overflow: hidden;
    position: relative;
}

@media (max-width: 768px) {
    #photo_edit_page .preview-frame-meishi .frame-h-meishi {
        max-height: 460px;
        margin: auto;
    }
}

#photo_edit_page .preview-frame-meishi img.preview-frame-image {
    position: relative;
    z-index: 10;
}

#photo_edit_page .preview-frame-meishi .frame-h img.preview-frame-image {
    display: block;
}

@media (max-width: 768px) {
    #photo_edit_page .preview-frame-meishi img.preview-frame-image {
        max-height: 460px;
        margin: 0 auto;
        width: auto;
    }
}
/*名刺カード*/
#photo_edit_page .ctrl_ttl {
    background-color: #F276A7;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border-radius: 5px;
}

#photo_edit_page .ctrl_scaling img {
    height: 25px;
}

#photo_edit_page .ctrl_brightness img {
    height: 22px;
}

#photo_edit_page .ctrl_rotate .uk-button img {
    height: 25px;
}

#photo_edit_page .ctrl_rotate img.rotater_icon {
    height: 30px;
}

#photo_edit_page .ctrl_movet .uk-button img {
    width:32px;
}

#photo_edit_page .edit_ctrler {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 1000;
    width: 100%;
}

#photo_edit_page .edit_ctrler .uk-button.toggle_btn {
    background-color: #1CC8E8;
    color: #fff;
}

#photo_edit_page .edit_ctrler .uk-button.toggle_btn:focus,
#photo_edit_page .edit_ctrler .uk-button.toggle_btn:hover {
    background-color: #1CC8E8;
    color: #fff;
}

#photo_edit_page .select_btn > div {
    min-width: 270px;
}

@media (max-width: 768px) {
    #photo_edit_page .select_btn > div {
        min-width: 220px;
        max-width: 220px;
    }
}

@media (max-width: 768px) {
    #photo_edit_page {
        padding-bottom: 250px;
    }
}

@media (max-width: 768px) {
    #photo_edit_page .edit_ctrler .ctrl_ttl {
        /*margin-bottom: 10px !important;*/
        font-size: 14px;
    }
}

#photo_edit_page .edit_ctrler .uk-button {

}

#frame_page .frame-yoko {
    margin: 10px auto 30px;
    width: 98%;
}

#frame_page .frame-tate {
    margin: 10px auto 30px;
    width: 68%;
}

#photo_edit_page .frame-yoko {
    margin-top: 20%;

}
@media (max-width: 768px) {
    #photo_edit_page .frame-yoko {
        margin-top: 25vw;
    }
}
@media (max-width: 768px) {
#photo_edit_page .frame-tate {
    width: 71vw;/*横幅調整*/
    margin: 30px auto;
}
}

/* メッセージ入力ページスタイル設定 -------------------------------------------------------------- */

#message_input_page #preview-area {
    height: auto;
    position: relative;
}

@media (max-width: 768px) {
    #message_input_page #preview-area {
        height: auto;
        width: auto;
    }
    #message_input_page #preview-area #preview-area-inner {
        height: 100%;
        width: auto;
    }
    #message_input_page .preview-frame {
        height: 100%;
        width: auto;
    }
    #message_input_page .preview-frame .frame-h {
        height: 100%;
        width: auto;
    }
    #message_input_page .preview-frame .frame-h img.preview-frame-image {
        height: 100%;
        width: auto;
    }
}
    /*名刺カード*/
    #message_input_page #preview-area-meishi {
        height: auto;
        position: relative;
    }
    @media (max-width: 768px) {
        #message_input_page #preview-area-meishi {
            height: auto;
            width: auto;
        }
        #message_input_page #preview-area-meishi #preview-area-inner {
            height: 100%;
            width: auto;
        }
        #message_input_page .preview-frame-meishi {
            height: 100%;
            width: auto;
        }
    #message_input_page .preview-frame-meishi .frame-h-meishi {
        height: 100%;
        width: auto;
    }
    #message_input_page .preview-frame-meishi .frame-h-meishi img.preview-frame-image {
        height: 100%;
        width: auto;
    }
    #message_input_page .preview-frame-meishi {
        position: relative;
    }
    /*名刺カード*/
}

@media (max-width: 768px) {
    #message_input_page {
    }
}

#message_input_page .preview-frame {
    position: relative;
}

#message_input_page .form-set {
    margin-top: 10px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    #message_input_page .form-set {
        margin-top: 10px;
        margin-bottom: 0px;
    }
    #message_input_page .form-set table {
        margin: 0;
    }
    #message_input_page .form-set table th {
        display: table-cell;
        width: auto;
        padding: 0 0em 0 0;
        font-size: 1rem;
    }
    #message_input_page .form-set table td {
        display: table-cell;
        padding: 1% 0 3%;
        border-bottom: none;
    }
    .uk-modal-page {
        overflow-y: auto;
    }
}

#message_input_page .select_btn > div {
    min-width: 270px;
}

@media (max-width: 768px) {
    #message_input_page .select_btn > div {
        min-width: 220px;
    }
}


#message_input_page .edit_ctrler .uk-button.toggle_btn {
    background-color: #1CC8E8;
    color: #fff;
}

#message_input_page .edit_ctrler .uk-button.toggle_btn:focus,
#message_input_page .edit_ctrler .uk-button.toggle_btn:hover {
    background-color: #1CC8E8;
    color: #fff;
}

#modal-message_input_select_action .uk-button.uk-button-small {
    letter-spacing: 1px;
    line-height: 45px;
    text-align: center;
    max-width: 90%;
    font-size: 14px;
}

@media (max-width: 768px) {
    #modal-message_input_select_action .uk-button.uk-button-small {
        font-size: 12px;
        max-width: 100%;
        line-height: 35px;
    }
    #message_input_page .select_btn .uk-button {
        line-height: 38px;
    }
    #message_input_page .edit_ctrler {
        /*height: calc(100vh - 75px - 55px);
        overflow-y: auto;*/
    }
    #message_input_page .edit_ctrler #toggle-messageInput {
        height: calc(100vh - 55px);
        overflow-y:scroll;
    }
}


/* 仕上がり確認ページスタイル設定 -------------------------------------------------------------- */
#confirm_page #preview-area {
    height: auto;
    /*position: relative;*/
}

@media (max-width: 768px) {
    #confirm_page #preview-area {
        height: 500px;
        text-align: center;
    }
    .video_area2{
        width: 71vw;
        margin: auto;
    }
    .clearfix{
        width: 71vw;
        margin: auto;
    }
    /* #confirm_page img.preview-frame-image {
        width: 71vw;
        margin: auto;
        display: block;
    }*/
}

/* 名刺カード */
#confirm_page #preview-area-meishi {
    height: auto;
    /*position: relative;*/
}

@media (max-width: 768px) {
    #confirm_page #preview-area-meishi {
        height: 500px;
        text-align: center;
    }
    .clearfix-meishi {
        width: 100%;
        max-height: 460px;
        margin: auto;
    }
    .clearfix-meishi img {
        max-height: 460px;
    }
    /* #confirm_page img.preview-frame-image {
        width: 71vw;
        margin: auto;
        display: block;
    }*/
    .preview-frame-image-meishi {
        max-height: 460px;
    }
}
/* 名刺カード */

#confirm_page .form-set {
    margin-top: 10px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    #confirm_page .form-set {
        margin-top: 10px;
        margin-bottom: 0px;
    }
    #confirm_page .form-set table {
        margin: 0;
    }
    #confirm_page .form-set table th {
        display: block;
        padding: 0 1em 0 0;
        font-size: 14px;
    }
    #confirm_page .form-set table th span {
        color: #E83380;
    }
    #confirm_page .form-set table td {
        display: block;
        padding: 1% 0 3%;
        border-bottom: none;
    }
}

#confirm_page .about_fix > p:first-child {
    margin-right: 10px;
}

@media (max-width: 768px) {
    #confirm_page .about_fix > p:first-child {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    #confirm_page .fullscreen {
        top: 31%;
    }
    #confirm_page .uk-button {
        line-height: 38px;
        margin-bottom: 20px !important;
    }
}


/* 完了ページスタイル設定 -------------------------------------------------------------- */
@media (max-width: 768px) {
    #complete_page .preview-frame-image {
        max-height: 500px;
        width: auto;
    }
}

/* 名刺カード */
@media (max-width: 768px) {
    #complete_page .preview-frame-image-meishi {
        max-height: 500px;
        width: auto;
    }
}
/* 名刺カード */

#complete_page .id_box {
    border: 2px solid #E83380;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color: #E83380;
    font-size: 3.0rem;
    background-color: #fff;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 768px) {
    #complete_page .id_box {
        font-size: 2.0rem;
        padding: 5px;
    }
}

#complete_page .uk-button.uk-button-small {
    letter-spacing: 1px;
    line-height: 45px;
    text-align: center;
    min-width: 130px;
    font-size: 14px;
}

@media (max-width: 768px) {
    #complete_page .uk-button.uk-button-small {
        font-size: 14px;
        line-height: 35px;
    }
}

#complete_page .about_fix > p:first-child {
    margin-right: 10px;
}

@media (max-width: 768px) {
    #complete_page .about_fix > p:first-child {
        margin-right: 0;
        margin-bottom: 10px;
    }
    #complete_page .uk-button.uk-button-secondary.uk-button-large {
        line-height: 38px;
    }
}

#complete_page #complete_selected_noshi {
    max-width: 376px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    border: 2px solid #E83380;
    padding: 10px;
    background-color: #FFF1F7;
}

@media (max-width: 768px) {
    #complete_page #complete_selected_noshi {
        max-width: 201px;
    }
}

#complete_page #complete_selected_noshi > div:first-child {
    margin-right: 10px;
    width: 60px;
}

@media (max-width: 768px) {
    #complete_page #complete_selected_noshi > div:first-child {

    }
}

/* 問い合わせページスタイル設定 -------------------------------------------------------------- */

#inquiry_page .dashboard_ttl {
    font-weight: bold;
}

#inquiry_page .form-set {
    margin: 40px auto;
}

@media (max-width: 768px) {
    #inquiry_page .form-set {
        margin-top: 0;
    }
}

#inquiry_page .select_btn .uk-button {
    min-width: 200px;
}

@media (max-width: 768px) {
    #inquiry_page .select_btn .uk-button {
        min-width: 175px;
    }
}


/* 依頼者サイト確認ページスタイル設定 -------------------------------------------------------------- */

#show_page .dashboard_ttl {
    font-weight: bold;
}

@media (max-width: 768px) {
    #show_page .dashboard_ttl.uk-margin-bottom {
        margin-bottom: 20px !important;
    }
}

#show_page .maked-card-confirm-area {
    margin-right: auto;
    margin-left: auto;
    width: 71vw;
}

#show_page .maked-card-confirm-area #show_noshi_img {
    width: 71vw;
}

#show_page .maked-card-confirm-area #messageCard {
    width: 71vw;
}

#show_page .maked-card-confirm-area img {
    width: 100%;
}

@media (max-width: 768px) {
    #show_page .maked-card-confirm-area {
        width: 100%;
        /*height: 550px;*/
    }
    #show_page .maked-card-confirm-area #show_noshi_img {
        height: 550px;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }
    #show_page .maked-card-confirm-area #messageCard {
        width: 71vw;
        height: auto;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }
    #show_page .maked-card-confirm-area img {
        width: 71vw;
        height: auto;
    }
}


/* 依頼者サイト確認ページスタイル設定 -------------------------------------------------------------- */

/* no_card（作成しない／eカードなし）ビューは先頭がボタンのみで、固定ヘッダー(#top-header)の
   高さ分の余白が無くボタンが潜り込むため、ヘッダー高さ(60px/モバイル50px)分の上余白を確保する。 */
.no_card_area {
    padding-top: 90px;
}
@media (max-width: 768px) {
    .no_card_area {
        padding-top: 75px;
    }
}

@media (max-width: 768px) {
    #message_page {
        padding-bottom: 24px;
    }
}

#message_page .dashboard_ttl {
    font-weight: bold;
}

@media (max-width: 768px) {
    #message_page .dashboard_ttl.uk-margin-bottom {
        margin-bottom: 20px !important;
    }
}

#message_page .maked-card-show-area {
    /*margin-right: auto;*/
    margin-left: auto;
    width: 28vw;
}

@media (max-width: 768px) {
    #message_page .maked-card-show-area {
        margin-right: auto;
        width: 71vw;
    }
}

#message_page .maked-card-test-area {
    margin: auto;
    width: 28vw;
    margin-top: 100px;
}

@media (max-width: 768px) {
    #messageCardWrap {
      margin-top: 0;
    }
    #message_page .maked-card-test-area {
        width: 71vw;
        margin-top: 70px !important;
        margin-right: auto;
    }
}

#message_page #show_noshi_img {
    width: 28vw;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
}
#message_page .maked-noshi-show-area img {
    width: 71vw;
}
@media (max-width: 768px) {
    #message_page #show_noshi_img {
        width: 71vw;
        margin-right: auto;
    }
}

/*#message_page #messageCard {
    width: 71vw;
    margin-right: auto;
    margin-left: auto;
}*/

#message_page .maked-card-show-area img {
    width: 100%;
}
/*#message_page #messageCard {
    width: 71vw;
    margin-right: auto;
    margin-left: auto;
}*/

@media (max-width: 768px) {
#message_page .maked-card-show-area img {
    width: 71vw;
    }
}

@media (max-width: 768px) {
    #message_page .maked-card-show-area {
        width: 71vw;
        /*height: 550px;*/
    }
    #message_page #show_noshi_img {
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        margin-top: 10px;
    }
    #message_page #messageCard {
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }   
    #message_page .maked-noshi-show-area img {
        width: 71vw;
        /*height: 100%;*/
    }
    #message_page .maked-card-show-area .video_area2 img {
        width: 71vw;
        /*height: 100%;*/
    }
}

#message_page .uk-button.uk-button-small {
    letter-spacing: 1px;
    line-height: 45px;
    text-align: center;
    font-size: 14px;
    min-width: 190px;
}

@media (max-width: 768px) {
    #message_page .uk-button.uk-button-small {
        font-size: 14px;
        line-height: 35px;
        min-width: 150px;
    }
}

#message_page .uk-grid .btns_area {
    padding-right: 40px;
}
@media (max-width: 959px) {
    #message_page .uk-grid .btns_area {
        padding-right: 0;
        padding-bottom: 10px;
    }
}

#message_page .uk-grid .btns_area .uk-flex div:last-child {
    margin-top: 15px;
}

@media (max-width: 959px) {
    #message_page .uk-grid .btns_area .uk-flex div:last-child {
        margin-top: 0px;
    }
}


/* loadingモーダルスタイル設定 -------------------------------------------------------------- */

#modal-loading_mask .uk-modal-dialog {
    background: none;
    color: #fff;
}


/* 先様サイトカード確認ページスタイル設定 -------------------------------------------------------------- */

@media (max-width: 768px) {
    #message_page #setumei {
        padding-left: 15px;
        padding-right: 15px;
    }
    #message_page .uk-container {
        padding-left: 0;
        padding-right: 0;
    }
}


/* フレーム内動画スタイル設定 -------------------------------------------------------------- */

.card_preview_area.frame_under_movie_area {
    position: relative;
}

.card_preview_area.frame_under_movie_area .preview-frame-image {
    position: relative;
    z-index: 10;
    margin-top: 0px;
}

.card_preview_area.frame_under_movie_area .video_area {
    position: relative;
    width: 100%;
}

.card_preview_area.frame_under_movie_area .movie_under_frame {
    position: absolute;
    z-index: 9;
    width: 100%;
    top: 0;
    left: 0;
}

.card_preview_area.frame_under_movie_area .video_area2 {
    position: relative;
    /* width: 100%; */
    overflow-x: hidden;
    overflow-y: hidden;
}
.card_preview_area.frame_under_movie_area .movie_under_frame2 {
    position: absolute;
    z-index: 9;
    /* width: 100%; */
}


@media (max-width: 768px) {
    #complete_page .card_preview_area.frame_under_movie_area {
        width: 225px;
        margin-right: auto;
        margin-left: auto;
        overflow-x: hidden;
    }
    .card_preview_area.frame_under_movie_area .preview-frame-image {
        margin-top: 0px;
    }
}

/* rangeつまみサイズ調整（プロジェクト共通スタイル） -------------------------------------------------------------- */

.ui-slider .ui-slider-handle {
    width: 1.4em !important;
    height: 1.4em !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #D3D3D3 url(../img/message/ui-bg_glass.png) 50% 50% repeat-x !important;
}


/*20220319 スタイル追加*/
/*PC*/
.frame-padding  {
    margin-top: 50px;
}
.frame-padding-bottom {
    margin-top: 30px;
}

@media (min-width: 767px) {
    .content-wrap {
        margin-top: 55px;
    }
}
@media (max-width: 767px) {
    .frame-padding {
        padding: 55px 0 25px 0;
        margin-top: 0px;
    }
    .frame-padding-bottom {
        padding-bottom: 55px;
        margin-top: 0px;
    }
    .frame-padding-bottom-large {
        padding-bottom: 135px;
    }
    .parts-margin-bottom-small {
        /*margin-bottom: 15px;*/
    }
    .frame-margin-bottom {
        padding-bottom: 35px;
    }
}
/*写真選択モーダル*/
.pedit_ctrler {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1010;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    height: calc(100vh);
    background: rgba(0,0,0,.6);
    display: none;
}
.padding-modalinner {
    padding: 30px 15px;
}
/*写真編集ボタン*/
.move-btn-top {
    margin: 0 0 12px 0;
}
.move-btn-bottom {
    margin: 12px 0 0 0;
}
/*編集プレビュー*/
#card_image_back {
    max-width: initial;
}
/*モーダルのスタイル*/
.select-modal {
    display: none;
    position: fixed;
    top: 100vh;
    right: 0;
    left: 0;
    z-index: 1010;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    height: calc(100vh);
    background: rgba(0,0,0,.6);
    padding-top: 0px;
    transition: top 0.7s;
    overflow-y: scroll;
}
.select-modal.modalOn {
    top: 55px;
}
@media (max-width: 768px) {
    #modal-kiyaku,.uk-modal-body>:last-child {
    margin-bottom: 100px;
    }
}


/*a5*/
.select-media-modal {
    display: none;
}
.select-media {
    display: none;
}

#modal-message_input_select_action,.select-media-modal {
    position: fixed;
    top: 100vh;
    right: 0;
    left: 0;
    z-index: 1010;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    height: calc(100vh);
    background: rgba(0,0,0,.6);
    padding-top: 0px;
    transition: top 0.7s;
    overflow-y: scroll;
    display: none;
}
#modal-message_input_select_action.modalOn,.select-media-modal.modalOn {
    top: 55px;
}
.modalOn > * {
    opacity: 1;
    text-align: center;
}
#toggle-messageInput {
    padding-bottom: 65px;
}
/*定型文選択*/
#text_list_area .uk-slidenav {
    color: rgba(0,0,0,.8);
}
#text_list_area .uk-position-center-right {
    right: -25%; 
}
#text_list_area .uk-position-center-left {
    left: -25%; 
}
#text_list_area .frame-text {
    overflow-y:auto; 
}
/*margin*/
.mar-b5p {
    margin-bottom: 5px;
}
.grid-margin-small {
    margin: 10px 0 !important;
}
/*TOP V*/
#top_logo_area .logo_view_area,
#guidance_img_area .logo_view_area,
#trans_guidance_img_area .logo_view_area{
    width: 28vw;
}
#message_whole_area {
  margin-top: 0px;/*0808test*/
}
#message_whole_area .dashboard_ttl {
  display: none;
}
#message_whole_area #buttons {
  padding-top: 20px;
}
#message_whole_area #buttons .uk-margin-top {
  margin-top: 0!important;
}
@media (max-width: 767px) {
#top_logo_area .logo_view_area,
#guidance_img_area .logo_view_area,
#trans_guidance_img_area .logo_view_area{
    width: 71vw;/*横幅調整*/
    top: 30%;
}
}

@media (max-width: 767px) {
#card_png_area {
    width: 70vw;
    margin: auto;
}
}
#message_whole_area {
  margin-top: 0px;
}
#message_whole_non {
  margin-top: 20px;
}


#message_whole_area .uk-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.skip {
    padding-top: 60px;
    z-index: 1001;
}

@media (max-width: 767px) {
    .skip {
      margin-top: 10px;
      margin-right: -20px;
      font-size: small;
      color: #E83380;
      padding-top: 15px;
    }
}

.batsu {
    z-index: 2;
}

@media (max-width: 768px) {
    .batsu {
        position: fixed;
    }
}

.batsu span {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 10px;
    padding: 0 10px 0 0;
  }
   
  .batsu span::before, .batsu span::after { /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px; /* 棒の幅（太さ） */
    height: 18px; /* 棒の高さ */
    background: #E83380;
  }
   
  .batsu span::before {
    transform: translate(-50%,-50%) rotate(45deg);
  }
   
  .batsu span::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }

  .category_title {
    background: #FFF2F7;
    padding-top: 10px;
  }

  .category_title span {
    border-top: 2px solid #E83380;
    background: #fff;
    color: #E83380;
    border-right: 2px solid #E83380;
    border-left: 2px solid #E83380;
    border-bottom: none;
    padding: 2px 1em;
    font-size: 13px;
    border-radius: 5px;
    width: 38%;
    display: inline-block;
  }
.mute_parent {
    position: relative;
}
.mute_confirm {
    position: absolute;
    bottom: 0;
    left: 100%;
}
.mute_img {
    position: absolute;
    bottom: 0;
    left: 300%;
}
@media (max-width: 959px) {
    .mute_img {
        left: 100%;
    }
    .mute_confirm {
        position: absolute;
        bottom: 0;
        left: 90%;
    }
}
  /* ------------------------------------------------------------------------------
    iPhoneで動画再生中に再生ボタンが出る対策
-------------------------------------------------------------------------------*/
.video_area2::-webkit-media-controls-panel {
	display: none!important;
	-webkit-appearance: none;
  }
  
  .video_area2::--webkit-media-controls-play-button {
	display: none!important;
	-webkit-appearance: none;
  }
  
  .video_area2::-webkit-media-controls-start-playback-button {
	display: none!important;
	-webkit-appearance: none;
  }