@charset "Shift_JIS";

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

テストアップ時調整用css

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

/*
https://test.www.ukai.click.3hz.jp/common/css/supersized.css
22行目を下記に修正
*/

#supersized {
    top: 80px !important;
}



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

PC #header / #tori_header display:none;

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

#header,div[id$="_header"],div[id$="_header02"] { display: none;}



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

renewal SP / Logo width

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

#tori_headerLogo a { width: 125px; margin-top: 2px;}
#chi_headerLogo a { width: 110px;}
#oow_headerLogo a { width: 86px;}
#sag_headerLogo a { width: 86px;}
#shi_headerLogo a { width: 130px;}
#kap_headerLogo a { width: 140px;}
#rop_k_headerLogo a { width: 140px;}
#hac_headerLogo a { width: 110px;}
#yoko_headerLogo a { width: 120px;}
#yoko_wed_headerLogo a { width: 170px;}
#aza_headerLogo a { width: 114px;}
#gin_headerLogo a { width: 102px;}
#omo_headerLogo a { width: 128px;}
#rop_u_headerLogo a { width: 115px;}
#gri_headerLogo a { width: 140px;}
#ate_headerLogo a {
    width: 180px;
    display: block;
    line-height: 0;
}
#le_headerLogo a { /*width: 140px;*/}
#kao_headerLogo a { width: 82px;}
#tai_headerLogo a { width: 140px;}
#top_headerLogo a { width: 100px;}
#corp_headerLogo a { width: 50px;}
#rec_headerLogo a { width: 90px;}



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

renewal SP / shopHeader_fixArea 店舗ごと

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

#corp_headerLogo {
    border-top: 3px solid #84c58f;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#top_headerLogo a {
    left: 30px;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
#rec_headerLogo {
    background-color: #e3e8eb;
}
#rec_headerLogo a {
    left: 30px;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}


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

renewal SP CSS

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

.shopHeader_sp {
    position: relative;
    z-index: 10000;
    height: 80px;
}
.shopHeader_sp img {
    max-width: 100%;
    vertical-align: top;
}



/*.shopHeader_fixArea*/

.shopHeader_fixArea {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.shopHeader_fixArea.-active {
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
    -moz-box-shadow: 0 0 0 rgba(0,0,0,0);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    background: #fff!important;
}
.shopHeader_fixArea.-active::before {
    content: '';
    display: block;
    width : 100% ;
    width : -webkit-calc(100% - 60px) ;
    width : calc(100% - 60px) ;
    height: 1px;
    background: rgba(0,0,0,.1);
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
.shopHeader_fixArea a {
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}



/*総合TOP enTOP cnTOP ctTOP　スクロールheader背景 */

#top_headerLogo.shopHeader_fixArea.-scrBg {
    box-shadow: none;
    background: none;
}
#top_headerLogo.shopHeader_fixArea.-scrBgActive {
    background: #fff;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}
#top_headerLogo.shopHeader_fixArea.-scrBg a {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
#top_headerLogo.shopHeader_fixArea.-scrBg.-scrBgActive a {
    opacity: 1;
    visibility: visible;
}
#top_headerLogo.shopHeader_fixArea.-active a {
    opacity: 1;
    visibility: visible;
}



.shopHeader_fixArea .openBtn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    appearance: none;
    position: absolute;
    right: 15px;
    top: 25px;
    width: 30px;
    height: 30px;
    font-family: arial,sans-serif;
    font-size: 10px;
    color: rgba(0,0,0,.5);
}
.shopHeader_fixArea .openBtn .iconBorder {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
}
.shopHeader_fixArea .openBtn .iconBorder span {
    display: block;
    width: 30px;
    height: 1px;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.shopHeader_fixArea .openBtn .iconBorder::before,
.shopHeader_fixArea .openBtn .iconBorder::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #000;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%) rotate(0);
    -ms-transform: translate(0,-50%) rotate(0);
    -o-transform: translate(0,-50%) rotate(0);
    transform: translate(0,-50%) rotate(0);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.shopHeader_fixArea .openBtn .iconBorder::before {
    margin-top: -10px;
}
.shopHeader_fixArea .openBtn .iconBorder::after {
    margin-top: 10px;
}
.shopHeader_fixArea.-active .openBtn .iconBorder span {
    width: 0;
    -webkit-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease;
}
.shopHeader_fixArea.-active .openBtn .iconBorder::before {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-top: 0;
}
.shopHeader_fixArea.-active .openBtn .iconBorder::after {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    margin-top: 0;
}



/*atelier online button */

.shopHeader_fixArea .ate_onlineBtn {
    text-align: center;
    width: 50px!important;
    /* height: 50px; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 100px;
    position: absolute;
    left: 2%;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    font-size: 10px;
    line-height: 1!important;
    letter-spacing: 0.1em;
}
.shopHeader_fixArea .ate_onlineBtn::before {
    content: '';
    display: block;
    /* width: 32px; */
    height: 25.6px;
    background: url(/atelier/common/img/ate_hd_icon_cart.svg) no-repeat center center/contain;
    margin: 0 0 6px 3px;
}
.shopHeader_fixArea .ate_onlineBtn:hover {
    opacity: .7;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}



/*shopHeader_contentsArea*/

.shopHeader_contentsArea {
    position: fixed;
    left: 0;
    top: 80px;
    background: #fff;
    width: 100%;
    height : 100% ;
    height : -webkit-calc(100% - 80px) ;
    height : calc(100% - 80px) ;
    overflow-y: scroll;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -o-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-transition: opacity .3 ease;
    -o-transition: opacity .3 ease;
    transition: opacity .3 ease;
    -webkit-overflow-scrolling: touch;
}
.shopHeader_contentsArea.-active {
/*    opacity: 1;*/
/*    visibility: visible;*/
/*
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
*/
    -webkit-animation: open .3s forwards;
    -o-animation: open .3s forwards;
    animation: open .3s forwards;
}
@-webkit-keyframes open {
    0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);
        -o-transform: translateY(3px);
        transform: translateY(3px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes open {
    0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);
        -o-transform: translateY(3px);
        transform: translateY(3px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}


/*shopMenu*/

.shopMenu {
    padding-bottom: 30px;
}
.shopMenu > .innerWrap {
    padding: 0 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.shopMenu_item {
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.shopMenu_item:last-child {
/*    border-bottom: none;*/
}
.shopMenu_item > a {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: -.4em;
    text-align: left;
    line-height: 1;
    position: relative;
    padding: 20px 0;
    color: #000;
}
.shopMenu_item > a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2px 0 2px 3px;
    border-color: transparent transparent transparent #000;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.shopMenu_item > a.-arwBtm::before {
    border-width: 3px 2px 0 2px;
    border-color: #000 transparent transparent transparent;
}
.shopMenu_item p {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: middle;
}
.shopMenu_item .enTxt {
    font-size: 14px;
}
.shopMenu_item .jpTxt {
    font-size: 10px;
    color: rgba(0,0,0,.8);
    padding-left: 20px;
    position: relative;
}
.shopMenu_item .jpTxt::before {
    content: '';
    display: block;
    width: 4px;
    height: 1px;
    background: #000;
    position: absolute;
    left: 8px;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}



/*shopSub*/

.shopSub {
    text-align: left;
}
.shopSub.-pdb {
    padding-bottom: 30px;
}
.shopSub .shopMenu_item {
    line-height: 1;
    padding: 20px 0;
}
.shopSub_wrap {
    background: #e4e8eb;
    padding: 0 27px;
}
.shopSub_item {
    background-image: linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 1px, transparent 4px);
    background-size: 5px 1px;
    background-position: bottom;
    background-repeat: repeat-x;
}
.shopSub_item:last-child {
    background: none;
}
.shopSub_item a {
    display: block;
    padding: 15px 0;
    position: relative;
    font-size: 12px;
    color: #000;
}
.shopSub_item a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2px 0 2px 3px;
    border-color: transparent transparent transparent #000;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.shopSub_item.-iconBlank a::before,
.shopSub_item.-iconBlank a::after {
    content: "";
    border: none;
    width: 10px;
    height: 7px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #000;
    border-top: 2px solid #000;
    background: #e4e8eb;
}
.shopSub_item.-iconBlank a::before {
    right: 3px;
    margin-top: -4px;
}
.shopSub_item.-iconBlank a::after {
    right: 0;
    margin-top: 0;
}



/*shopMenu_itemButton*/

.shopMenu_itemButton a {
    display: block;
    background: #84c58f;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid #fff;
}
.shopMenu_itemButton a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2px 0 2px 3px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    right: 27px;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.shopMenu_itemButton.-bgcGray a {
    background: #e4e8eb;
    color: #000;
    padding-left: 27px;
}
.shopMenu_itemButton.-bgcGray a::before {
    border-width: 2px 0 2px 3px;
    border-color: transparent transparent transparent #000;
}
.shopMenu_itemButton.-txtLeft a {
    text-align: left;
}



/*shopMenu_itemButton02*/

.shopMenu_itemButton02 a {
    display: block;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    line-height: 1;
    position: relative;
    padding: 15px 27px;
    text-align: left;
    margin-top: 10px;
    color: #000;
}
.shopMenu_itemButton02 a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2px 0 2px 3px;
    border-color: transparent transparent transparent #000;
    position: absolute;
    right: 27px;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.shopMenu_itemButton02:first-child a {
    margin-top: 20px;
}



/*shopMenu_restaurantArea*/

.shopMenu_restaurantArea {
    padding: 20px 0;
}



/*shopMenu_photo*/

.shopMenu_photo {
    padding-right: 20px;
}
.shopMenu_photo_item {
    width: 33.333%;
    float: left;
    margin-right: 10px;
}
.shopMenu_photo_item:nth-child(3n) {
    margin-right: -20px;
}
.shopMenu_photo_item:nth-child(n+4) {
    margin-top: 10px;
}
.shopMenu_photo_itemBox p {
    margin-top: 5px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4;
    letter-spacing: -.4em;
    text-align: center;
    vertical-align: top;
}
.shopMenu_photo_itemBox p span {
    display: inline-block;
    letter-spacing: normal;
    vertical-align: middle;
}



/*shopMenu_snsArea*/

.shopMenu_snsArea {
    text-align: center;
    letter-spacing: -.4em;
}



/*shopMenu_sns_item*/

.shopMenu_sns_item {
    display: inline-block;
    letter-spacing: normal;
    padding: 10px 0 0;
}
.shopMenu_sns_item a {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
}



/*menuCom*/

.menuCom {
    background: #e4e8eb;
    padding: 30px;
}
.menuCom .innerWrap {
    background: #fff;
    padding: 10px 27px 30px;
}
.menuCom_block01_item {
    background-image: linear-gradient(to right, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 4px);
    background-size: 5px 1px;
    background-position: bottom;
    background-repeat: repeat-x;
    
}
.menuCom_block01_item:last-child {
    background: none;
    
}
.menuCom_block01_item a {
    display: block;
    text-align: left;
    padding: 15px 0;
    position: relative;
    font-size: 12px;
    color: #000;
}
.menuCom_block01_item a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2px 0 2px 3px;
    border-color: transparent transparent transparent #000;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.menuCom_block02 {
    margin-top: 10px;
}
.menuCom_block02_tits {
    border-top: 1px solid rgba(0,0,0,.6);
    border-bottom: 1px solid rgba(0,0,0,.6);
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
}
.menuCom_block02_lang {
    padding-right: 2px;
    margin-top: 10px;
}
.menuCom_block02_lang_item {
    float: left;
    width: 50%;
    margin-right: 2px;
}
.menuCom_block02_lang_item:nth-child(even) {
    margin-right: -2px;
}
.menuCom_block02_lang_item:nth-child(n+3) {
    margin-top: 2px;
}
.menuCom_block02_lang_item a {
    display: block;
    background: #e4e8eb;
    padding: 12px 0;
    font-size: 12px;
    color: #000;
}
.menuCom_block03{}
.menuCom_block03_item a {
    text-align: left;
    display: block;
    font-size: 12px;
    position: relative;
    padding: 15px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.menuCom_block03_item a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2px 0 2px 3px;
    border-color: transparent transparent transparent #000;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}