﻿.carousel-box {
    position:relative
}
.carousel-box .carousel-wrapper {
    position:relative;
    text-align:center
}
.carousel-box .carousel-wrapper img {
    display:block;
    box-sizing:border-box;
    width:100%
}
.carousel-box .carousel-wrapper .btn {
    position:absolute;
    top:65%;
    left:51%;
    margin-left:-150px;
    line-height:1;
    font-weight:bold
}
.carousel-box .carousel-wrapper .btn-install {
    border:none;
    padding:20px 70px 20px 80px;
    letter-spacing:5px;
    font-size:24px
}
.carousel-box .carousel-wrapper .btn-download {
    left:66%;
    top:66%;
    padding:10px 30px 10px 30px;
    font-size:18px;
    color:#111;
    border-color:#111;
    border-width:2px
}
.carousel-box .bullets-container {
    position:absolute;
    left:0;
    right:0;
    bottom:40px;
    height:10px;
    text-align:center;
    z-index:9
}
.carousel-box .bullets-container .bullet {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:40px;
    border:1px solid #FFFFFF;
    background-color:#fff;
    transition:width .5s
}
.carousel-box .bullets-container .bullet:nth-last-child(n+2) {
    margin-right:20px
}
.carousel-box .bullets-container .bullet.active {
    width:36px;
    background-color:#ffffff
}
.carousel-box:hover .arrow {
    opacity:1
}
.carousel-box .arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:80px;
    z-index:9;
    opacity:0;
    transition:opacity .6s
}
.carousel-box .arrow button {
    background-color:transparent;
    border:none;
    cursor:pointer
}
.carousel-box .arrow button:focus, .carousel-box .arrow button:active {
    border:none;
    outline:none
}
.carousel-box .arrow.deactive>button {
    opacity:.4
}
.carousel-box .arrow.arrow-left {
    left:50px
}
.carousel-box .arrow.arrow-left button[disabled] {
    cursor:not-allowed
}
.carousel-box .arrow.arrow-right {
    right:50px
}
.carousel-box .arrow.arrow-right button[disabled] {
    cursor:not-allowed
}
.carousel-box .arrow.arrow-right img {
    transform:rotateY(180deg)
}
html.mobile .carousel-box .bullets-container {
    bottom:.2rem
}
html.mobile .carousel-box .bullets-container .bullet {
    border-radius:5px;
    width:5px;
    height:5px;
    margin-right:10px
}
html.mobile .carousel-box .bullets-container .bullet:nth-last-child(n+2) {
    margin-right:10px
}
html.mobile .carousel-box .bullets-container .bullet.active {
    width:20px
}
html.mobile .carousel-box .arrow {
    display:none
}
html.mobile .carousel-box .btn {
    display:none
}
.intro-box {
    display:flex;
    align-items:center
}
.intro-box .content {
    margin:0 auto;
    display:flex;
    justify-content:space-around;
    color:#555555
}
@media screen and (min-width: 1081px) {
    .intro-box .content {
        width:1280px
    }
}
@media screen and (max-width: 1080px) {
    .intro-box .content {
        width:100%;
        padding:0 .3rem
    }
}
.intro-box .spot {
    text-align:center
}
.intro-box .spot figure {
    padding:70px 10px;
    margin:0
}
.intro-box .spot figure>div {
    height:60px
}
.intro-box .spot figure>div>img {
    max-height:100%
}
.intro-box .spot figure figcaption {
    margin-top:20px;
    line-height:1.6
}
.intro-box .spot strong {
    font-size:20px;
    color:#111111
}
html.mobile .intro-box figure {
    padding:.5rem .1rem
}
html.mobile .intro-box figure>div {
    width:.6rem;
    height:.8rem;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center
}
html.mobile .intro-box figure figcaption {
    margin-top:0
}
@media screen and (max-width: 320px) {
    html.mobile .intro-box figure figcaption .t_title {
        font-size:12px
    }
    html.mobile .intro-box figure figcaption strong {
        font-size:12px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .intro-box figure figcaption .t_title  {
        font-size:12px
    }
    html.mobile .intro-box figure figcaption strong {
        font-size:12px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .intro-box figure figcaption .t_title  {
        font-size:14px
    }
    html.mobile .intro-box figure figcaption strong {
        font-size:12px
    }
}
html.mobile .intro-box figure figcaption p {
    display:none
}
.business-box {
    background-color:#F8F8F8;
    padding:80px 0
}
.business-box .content {
    text-align:center
}
.business-box figure {
    margin:0;
    padding:0
}
.business-box figure .title {
    font-size:32px
}
.business-box figure .summary {
    padding-top:20px;
    font-size:20px;
    font-weight:lighter
}
.business-box figure figcaption {
    margin-bottom:40px
}
.business-box figure img {
    max-width:880px
}
.business-box .business-title {
    text-align:center;
    color:#000000
}
.business-box .btn-container {
    padding-top:30px
}
.business-box .btn-container .btn {
    padding:12px 45px 12px 40px;
    font-size:24px;
    min-width:300px;
    letter-spacing:5px;
    font-weight:bold
}
html.mobile .business-box {
    padding:1rem 0 0;
    height:auto;
    border-bottom:none
}
html.mobile .business-box .content {
    padding:0;
    height:auto
}
html.mobile .business-box figure {
    padding:0 .2rem
}
html.mobile .business-box figure figcaption {
    padding-bottom:.8rem;
    margin:0
}
html.mobile .business-box figure figcaption .title {
    font-size:18px
}
html.mobile .business-box figure figcaption .summary {
    font-size:14px
}
html.mobile .business-box figure img {
    max-width:100%
}
html.mobile .business-box .btn-container {
    padding-top:.3rem
}
html.mobile .business-box .btn-container .btn {
    padding:.15rem 1rem;
    font-size:18px;
    min-width:4rem
}
.enterprise-box {
    padding:40px 0 0px;
    background-color:#F8F8F8
}
.enterprise-box .content {
    width:1040px;
    text-align:center
}
.enterprise-box .content.expanded .logo:nth-child(n+11) {
    display:block
}
.enterprise-box .content.expanded .btn-collapse {
    display:inline
}
.enterprise-box .content.expanded .btn-expand {
    display:none
}
.enterprise-box .content .btn-collapse {
    display:none
}
.enterprise-box .content .btn-expand {
    display:inline
}
.enterprise-box .title {
    margin:0;
    text-align:center;
    font-weight:lighter;
    font-size:24px;
    color:#555
}
.enterprise-box .title span {
    display:none
}
.enterprise-box .enterprise-logos {
    display:flex;
    flex-wrap:wrap;
    padding-top:20px
}
.enterprise-box .enterprise-logos .logo {
    width:200px
}
.enterprise-box .enterprise-logos .logo:nth-child(n+11) {
    display:none
}
.enterprise-box .enterprise-logos img {
    vertical-align:middle
}
.enterprise-box .btn {
    margin-top:20px;
    padding:12px 45px;
    font-size:18px;
    min-width:200px
}
.enterprise-box .btn.arrow-d-pc:after {
    width:.4em;
    height:.4em;
    display:inline-block;
    border-bottom:1px solid #A3A3A3;
    border-right:1px solid #A3A3A3;
    transform:rotate(45deg);
    transform-origin:right;
    pointer-events:none;
    content:' ';
    vertical-align:middle
}
.enterprise-box .btn.arrow-d-pc:after {
    border-color:#555555
}
.enterprise-box .btn.arrow-u-pc:after {
    width:.4em;
    height:.4em;
    display:inline-block;
    border-top:1px solid #A3A3A3;
    border-left:1px solid #A3A3A3;
    transform:rotate(45deg);
    transform-origin:right;
    pointer-events:none;
    content:' ';
    vertical-align:middle
}
.enterprise-box .btn.arrow-u-pc:after {
    border-color:#555555
}
html.mobile .enterprise-box {
    padding:1.15rem 0 .8rem
}
html.mobile .enterprise-box h3 {
    padding:0
}
html.mobile .enterprise-box .content {
    padding:0;
    width:100%
}
html.mobile .enterprise-box .title {
    color:#555;
    font-size:14px
}
html.mobile .enterprise-box .title span {
    display:initial;
    font-size:12px
}
html.mobile .enterprise-box .enterprise-logos .logo {
    width:25%
}
html.mobile .enterprise-box .enterprise-logos .logo:nth-child(-n+17) {
    display:block
}
html.mobile .enterprise-box .enterprise-logos .logo:nth-child(n+17) {
    display:none
}
html.mobile .enterprise-box .btn {
    display:none
}
.slide-box .info-tiles .info-tile-item:hover .info-tile-info, .slide-box .info-tiles .shown .info-tile-info {
    left:0;
    opacity:1
}
.slide-box .info-tiles .info-tile-item:hover .info-tile-info-inner, .slide-box .info-tiles .shown .info-tile-info-inner {
    opacity:1
}
.slide-box .info-tiles .info-tile-item:hover .info-tile-title {
    opacity:0
}
.slide-box .info-tiles .info-tile-item>img {
    display:block;
    width:101%
}
.slide-box .info-tile-row {
    margin-bottom:-2px;
    overflow:hidden
}
.slide-box .info-tile {
    position:relative;
    float:left;
    overflow:hidden;
    width:50%
}
.slide-box .info-tile.slide-1-of-3 {
    width:33.3333%
}
.slide-box .info-tile.slide-2-of-3 {
    width:66.6667%
}
.slide-box .info-inner-tile {
    position:relative;
    overflow:hidden
}
.slide-box .info-inner-inner-tile {
    position:relative;
    float:left;
    overflow:hidden;
    width:50%
}
.slide-box .tile-wrap-mb {
    position:absolute;
    left:0;
    top:0;
    z-index:10;
    height:100%;
    width:100%
}
.slide-box .info-tile-info {
    position:absolute;
    top:0;
    opacity:0;
    width:100%;
    height:100%;
    padding:0;
    background-color:#ffffff;
    transition:0.4s
}
.slide-box .info-tile-info.theme-bg {
    background-color:#00c568
}
.slide-box .info-tile-info.theme-bg .info-tile-info-inner div {
    color:#FFFFFF
}
.slide-box .info-tile-title {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:9;
    transition:0.4s
}
.slide-box .info-tile-title .info-tile-title-inner {
    width:100%;
    height:100%;
    padding:0;
    display:table;
    width:100%;
    height:100%;
    font-size:36px;
    color:#ffffff;
    font-weight:bold
}
@media screen and (max-width: 1599px) {
    .slide-box .info-tile-title .info-tile-title-inner {
        font-size:30px
    }
}
.slide-box .info-tile-title .info-tile-title-inner>div {
    display:table-cell;
    vertical-align:middle
}
.slide-box .info-tile-title .info-tile-title-inner>div>div {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    max-width:250px;
    width:auto;
    padding:20px 30px
}
.slide-box .info-tile-info-inner {
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:19;
    text-align:center;
    color:#111111;
    font-size:24px;
    line-height:1.6;
    font-weight:bold;
    display:table;
    width:100%;
    height:100%;
    transition:0.4s
}
@media screen and (max-width: 1599px) {
    .slide-box .info-tile-info-inner {
        font-size:20px
    }
}
.slide-box .info-tile-info-inner>div {
    display:table-cell;
    vertical-align:middle
}
.slide-box .info-tile-info-inner>div>div {
    margin-left:auto;
    margin-right:auto;
    text-align:center
}
.slide-box .info-tile-info-inner strong {
    font-size:36px
}
@media screen and (max-width: 1599px) {
    .slide-box .info-tile-info-inner strong {
        font-size:30px
    }
}
.slide-box .info-tile-info-inner h3 {
    line-height:1.1;
    letter-spacing:1px;
    font-size:80px;
    margin-bottom:20px
}
.slide-box .info-tile-info-inner .top-text {
    letter-spacing:1px;
    font-size:16px;
    margin-bottom:30px;
    text-transform:uppercase;
    line-height:1.2
}
.slide-box .info-tile-info-inner .bottom-text {
    line-height:1.2;
    letter-spacing:1px;
    font-size:40px
}
.slide-box .info-tile-info-inner .info-tiles a:hover .info-tile-info, .slide-box .info-tile-info-inner .shown .info-tile-info {
    opacity:1;
    left:0
}
html.mobile .slide-box .slide-bg {
    vertical-align:bottom
}
.join-box {
    background-color:#F8F8F8
}
.join-box h3 {
    margin:0;
    text-align:center;
    padding:80px 0 40px
}
.join-box .content {
    width:1170px
}
.join-box .jobs {
    display:flex;
    line-height:1;
    flex-wrap:wrap;
    justify-content:space-around
}
.join-box .jobs .job-list-item {
    flex:1 1 auto;
    padding:50px 20px;
    margin-bottom:30px;
    cursor:pointer;
    background-color:#ffffff;
    box-shadow:rgba(0, 0, 0, 0.08) 0 2px 6px;
    transition:transform .2s, box-shadow .2s
}
.join-box .jobs .job-list-item:hover {
    transform:translateY(-6px);
    box-shadow:rgba(0, 0, 0, 0.1) 0 10px 20px
}
.join-box .jobs .job-list-item .row {
    display:flex
}
.join-box .jobs .job-list-item .row .col {
    flex:0 0 auto
}
.join-box .jobs .job-list-item .row .col-fill {
    flex:1 1 auto;
    text-align:right
}
.join-box .jobs .job-list-item .salary {
    text-align:right
}
.join-box .jobs .job-list-item .skills {
    color:#555555
}
@media screen and (max-width: 1080px) {
    .join-box .jobs {
        flex-direction:column
    }
    .join-box .jobs .job-list-item {
        margin-right:0;
        padding:.35rem .3rem;
        background-color:#fff
    }
    .join-box .jobs .job-list-item:nth-last-child(n+2) {
        margin-bottom:.3rem
    }
}
.join-box .jobs .job-list-item {
    flex:0 0 360px
}
.join-box .title, .join-box .salary {
    font-size:20px;
    margin-bottom:35px
}
.join-box .skills {
    font-size:16px
}
.join-box .btn-view {
    display:none
}
.join-box .btn-container {
    text-align:center;
    padding:50px 0 80px
}
.join-box .btn-container .btn {
    padding:12px 45px;
    line-height:1;
    font-size:18px
}
.join-box .btn-container .btn.arrow-r-pc:after {
    width:.4em;
    height:.4em;
    display:inline-block;
    border-top:1px solid #A3A3A3;
    border-right:1px solid #A3A3A3;
    transform:rotate(45deg);
    transform-origin:right;
    pointer-events:none;
    content:' ';
    vertical-align:baseline
}
.join-box .btn-container .btn.arrow-r-pc:after {
    border-color:#555555
}
.join-box .float-container {
    display:none
}
html.mobile .join-box {
    background-color:#f8f8f8
}
html.mobile .join-box .content {
    width:auto
}
html.mobile .join-box h3 {
    padding:1rem 0 .85rem
}
html.mobile .join-box .jobs .job-list-item {
    flex:0 0 auto
}
html.mobile .join-box .title, html.mobile .join-box .salary {
    margin-bottom:.3rem
}
@media screen and (max-width: 320px) {
    html.mobile .join-box .title, html.mobile .join-box .salary {
        font-size:12px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .join-box .title, html.mobile .join-box .salary {
        font-size:14px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .join-box .title, html.mobile .join-box .salary {
        font-size:16px
    }
}
html.mobile .join-box .job-list-item:hover {
    transform:none
}
html.mobile .join-box .skills {
    color:#555555
}
@media screen and (max-width: 320px) {
    html.mobile .join-box .skills {
        font-size:10px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .join-box .skills {
        font-size:12px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .join-box .skills {
        font-size:14px
    }
}
html.mobile .join-box .btn-view {
    display:block;
    color:#999999;
    padding-right:.2rem;
    position:relative
}
@media screen and (max-width: 320px) {
    html.mobile .join-box .btn-view {
        font-size:10px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .join-box .btn-view {
        font-size:12px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .join-box .btn-view {
        font-size:14px
    }
}
html.mobile .join-box .btn-view:after {
    width:.12rem;
    height:.12rem;
    display:inline-block;
    position:absolute;
    right:.1rem;
    top:42%;
    border-top:1px solid #A3A3A3;
    border-right:1px solid #A3A3A3;
    transform:rotate(45deg);
    transform-origin:right;
    pointer-events:none;
    content:' '
}
html.mobile .join-box .btn-view.pc:after {
    width:10px;
    height:10px;
    right:20px
}
html.mobile .join-box .btn-view:after {
    right:0.06rem
}
html.mobile .join-box .btn-container {
    text-align:center;
    padding:.5rem 0 1rem
}
html.mobile .join-box .btn-container .btn {
    color:#111;
    padding:.2rem .7rem .2rem .8rem;
    line-height:1;
    font-weight:bold;
    width:5rem;
    margin:0 auto
}
@media screen and (max-width: 320px) {
    html.mobile .join-box .btn-container .btn {
        font-size:16px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .join-box .btn-container .btn {
        font-size:18px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .join-box .btn-container .btn {
        font-size:20px
    }
}
.about-box {
    padding:140px 0 0px;
    text-align:center
}
.about-box .title {
    font-size:32px
}
.about-box .content p {
    display:none
}
.about-box .btn-container {
    padding-top:45px
}
.about-box .btn-container .btn {
    padding:12px 45px;
    font-size:18px;
    min-width:200px
}
.about-box .btn-container .btn.arrow-r-pc:after {
    width:.4em;
    height:.4em;
    display:inline-block;
    border-top:1px solid #A3A3A3;
    border-right:1px solid #A3A3A3;
    transform:rotate(45deg);
    transform-origin:right;
    pointer-events:none;
    content:' ';
    vertical-align:baseline
}
.about-box .btn-container .btn.arrow-r-pc:after {
    border-color:#555555
}
html.mobile .about-box {
    padding:0.52rem 0
}
@media screen and (max-width: 320px) {
    html.mobile .about-box .title {
        font-size:16px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .about-box .title {
        font-size:16px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .about-box .title {
        font-size:20px
    }
}
html.mobile .about-box .content p {
    padding-top:.2rem;
    display:block;
    color:#555555;
    margin:0;
    line-height:2
}
@media screen and (max-width: 320px) {
    html.mobile .about-box .content p {
        font-size:12px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .about-box .content p {
        font-size:14px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .about-box .content p {
        font-size:16px
    }
}
html.mobile .about-box .btn-container {
    padding-top:0.36rem
}
html.mobile .about-box .btn {
    border:none;
    padding:0;
    line-height:1.2;
    color:#F5A623;
    position:relative;
    min-width:2.9rem;
    margin:0 auto;
    background:url("../images/circle-arrow-r_1.png") no-repeat right center;
    background-size:auto 100%
}
@media screen and (max-width: 320px) {
    html.mobile .about-box .btn {
        font-size:12px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .about-box .btn {
        font-size:14px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .about-box .btn {
        font-size:16px
    }
}
@media screen and (max-width: 320px) {
    html.mobile .about-box .btn {
        min-width:2.5rem
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .about-box .btn {
        min-width:2.6rem
    }
}
@media screen and (min-width: 376px) {
    html.mobile .about-box .btn {
        min-width:2.8rem
    }
}
.shop-box {
    padding:80px 0
}
.shop-box .content {
    text-align:center
}
.shop-box figure {
    margin:0;
    padding:0
}
.shop-box figure .title {
    font-size:32px
}
.shop-box figure .summary {
    padding-top:20px;
    font-size:20px;
    font-weight:lighter
}
.shop-box figure figcaption {
    margin-bottom:40px
}
.shop-box figure img {
    max-width:880px
}
.shop-box .business-title {
    text-align:center;
    color:#000000
}
.shop-box .business-title .title {
    font-size:36px
}
.shop-box .btn-container {
    padding-top:30px
}
.shop-box .btn-container .btn {
    padding:12px 45px 12px 40px;
    font-size:24px;
    min-width:300px;
    font-weight:bold
}
html.mobile .shop-box {
    padding:1rem .2rem
}
html.mobile .shop-box .content {
    padding:0
}
html.mobile .shop-box .title {
    font-size:18px;
    letter-spacing:0
}
html.mobile .shop-box .summary {
    padding-top:10px;
    font-size:14px;
    letter-spacing:0;
    font-weight:lighter
}
html.mobile .shop-box figure figcaption {
    padding-bottom:.8rem;
    margin:0
}
html.mobile .shop-box figure img {
    max-width:100%
}
html.mobile .shop-box .btn-container {
    padding-top:.3rem
}
html.mobile .shop-box .btn-container .btn {
    padding:.15rem 1rem;
    font-size:18px;
    min-width:4rem
}
.map-box {
    height:720px;
    overflow:hidden;
    text-align:center;
    background:url("../images/shop-map_1.png") no-repeat center bottom
}
.map-box .content {
    height:100%;
    position:relative;
    padding-top:40px
}
@media screen and (min-width: 1081px) {
    .map-box .content {
        width:1280px
    }
}
@media screen and (max-width: 1080px) {
    .map-box .content {
        width:100%;
        padding:0 .3rem
    }
}
.map-box .content .title {
    font-weight:lighter;
    font-size:24px;
    color:#555
}
.map-box .content .spot {
    width:35px;
    height:50px;
    background:url("../images/pin_1.png") no-repeat center top;
    background-size:100% auto;
    position:absolute
}
.map-box .content .spot:hover {
    background:url("../images/pin-active_1.png") no-repeat center top;
    background-size:100% auto
}
.map-box .content .spot.shop-1 {
    bottom:542px;
    left:700px
}
.map-box .content .spot.shop-1 .pop-up {
    transform-origin:top left
}
.map-box .content .spot.shop-2 {
    bottom:204px;
    left:446px
}
.map-box .content .spot.shop-3 {
    bottom:182px;
    left:490px
}
.map-box .content .spot.shop-4 {
    bottom:185px;
    left:627px
}
.map-box .content .spot.shop-5 {
    bottom:237px;
    left:719px
}
.map-box .content .spot.shop-6 {
    bottom:220px;
    left:755px
}
.map-box .content .spot.shop-7 {
    bottom:220px;
    left:755px
}
.map-box .content .spot.shop-8 {
    bottom:65px;
    left:456px
}
.map-box .content .spot.shop-9 {
    bottom:35px;
    left:409px
}
.map-box .content .spot.shop-10 {
    bottom:180px;
    left:390px
}
.map-box .content .spot.shop-11 {
    bottom:236px;
    left:547px
}
.map-box .spot .pop-up {
    position:absolute;
    left:32px;
    bottom:45px;
    width:284px;
    height:104px;
    padding:20px;
    font-size:18px;
    background:url("../images/pin-address_1.png") no-repeat center top;
    background-size:100% auto;
    z-index:9;
    text-align:left;
    font-size:14px;
    transform-origin:bottom left;
    transition:all .3s;
    opacity:0;
    transform:scale(0)
}
.map-box .spot .pop-up strong {
    font-size:18px
}
.map-box .spot:hover .pop-up {
    transform:scale(1);
    opacity:1
}
.map-box .spot.shop-1 .pop-up {
    top:50px;
    left:28px
}
.map-box .btn-view-shop {
    background:#222222;
    border-radius:30px;
    color:#FFF;
    font-size:12px;
    padding:.1rem .3rem;
    display:none
}
.map-box .btn-view-shop:after {
    width:.4em;
    height:.4em;
    display:inline-block;
    border-top:1px solid #A3A3A3;
    border-right:1px solid #A3A3A3;
    transform:rotate(45deg);
    transform-origin:right;
    pointer-events:none;
    content:' ';
    vertical-align:baseline
}
.map-box .btn-view-shop:after {
    border-color:#FFF
}
html.mobile .map-box {
    height:6rem;
    padding:0;
    background:url("../images/shop-map@2x_1.png") no-repeat center bottom;
    background-size:100% auto
}
html.mobile .map-box .content {
    padding-top:2.8rem
}
html.mobile .map-box .content .spots {
    display:none
}
html.mobile .map-box h3 {
    display:none
}
html.mobile .map-box .btn-view-shop {
    display:inline
}
.news-box {
    text-align:center;
    padding:120px 0 80px 0;
    background-color:#F8F8F8
}
.news-box h3 {
    margin:0;
    text-align:center
}
.news-box a {
    color:#111111
}
.news-box .news {
    padding-top:40px;
    display:flex;
    justify-content:center
}
.news-box .news .news-item {
    width:400px;
    position:relative;
    background-color:#fff;
    box-shadow:rgba(0, 0, 0, 0.08) 0 2px 6px;
    transition:transform .2s, box-shadow .2s;
    -webkit-transform-style:preserve-3d;
    -webkit-backface-visibility:hidden
}
.news-box .news .news-item:hover {
    transform:translateY(-6px);
    box-shadow:rgba(0, 0, 0, 0.1) 0 10px 20px
}
.news-box .news .news-item:nth-child(3n-1), .news-box .news .news-item:nth-child(3n-2) {
    margin-right:30px
}
.news-box .news .news-item p.tag {
    display:none
}
.news-box .news .news-item span.tag {
    position:absolute;
    top:10px;
    left:10px;
    background-color:#222222;
    color:#FFFFFF;
    font-size:14px;
    padding:4px 6px;
    border-radius:4px
}
.news-box .news figure img {
    height:300px
}
.news-box .news figure figcaption {
    color:#111;
    text-align:left;
    padding:25px 20px
}
.news-box .btn-container {
    padding-top:40px
}
.news-box .btn-container .btn {
    padding:12px 45px;
    font-size:18px;
    min-width:200px
}
.news-box .btn-container .btn.arrow-r-pc:after {
    width:.4em;
    height:.4em;
    display:inline-block;
    border-top:1px solid #A3A3A3;
    border-right:1px solid #A3A3A3;
    transform:rotate(45deg);
    transform-origin:right;
    pointer-events:none;
    content:' ';
    vertical-align:baseline
}
.news-box .btn-container .btn.arrow-r-pc:after {
    border-color:#555555
}
html.mobile .news-box {
    padding:1rem 0
}
html.mobile .news-box h3 {
    font-size:18px
}
html.mobile .news-box .news {
    padding-top:.5rem;
    flex-direction:column
}
html.mobile .news-box .news p.tag {
    display:flex
}
html.mobile .news-box span.tag {
    display:none
}
html.mobile .news-box .news-item {
    width:100%;
    margin:0
}
html.mobile .news-box .news-item:nth-last-child(n+2) {
    margin-bottom:.2rem
}
html.mobile .news-box .news-item:hover {
    transform:none
}
html.mobile .news-box figure {
    display:flex;
    height:2.2rem;
    align-items:stretch
}
html.mobile .news-box figure .img {
    flex:0 0 3.2rem;
    order:2;
    height:100%
}
html.mobile .news-box figure .img img {
    max-height:100%
}
html.mobile .news-box figure .news-text {
    width:3.7rem;
    flex:1 1 3.7rem;
    display:flex;
    align-items:stretch
}
html.mobile .news-box figure figcaption {
    display:flex;
    padding:.25rem;
    flex-direction:column
}
html.mobile .news-box figure figcaption p.title {
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    flex:0 0 auto
}
html.mobile .news-box figure figcaption p.tag {
    flex:1 1 auto;
    display:flex;
    align-items:flex-end;
    font-size:12px;
    color:#999999
}
html.mobile .news-box .btn-container {
    padding-top:.5rem
}
html.mobile .news-box .btn-container .btn {
    padding:.15rem 1rem;
    font-size:18px;
    min-width:4rem;
    margin:0 auto;
    font-weight:bold
}
.download-box {
    display:none
}
html.mobile .download-box {
    background-color:#00c568;
    padding:1rem 0 1.6rem;
    text-align:center
}
html.mobile .download-box .title {
    font-size:24px;
    color:#111
}
html.mobile .download-box .summary {
    padding-top:.3rem;
    font-size:14px;
    color:#111
}
html.mobile .download-box .btn-container {
    padding-top:.6rem
}
html.mobile .download-box .btn-container .btn {
    color:#111;
    border:1px solid #222222;
    margin-bottom:20px;
    margin:0 auto;
    width:3.6rem;
    padding:10px 0 10px 20px;
    display:flex;
    align-items:center
}
@media screen and (max-width: 320px) {
    html.mobile .download-box .btn-container .btn {
        font-size:16px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html.mobile .download-box .btn-container .btn {
        font-size:18px
    }
}
@media screen and (min-width: 376px) {
    html.mobile .download-box .btn-container .btn {
        font-size:20px
    }
}
html.mobile .download-box .btn-container .btn img {
    vertical-align:baseline
}
.download-bar-box {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9;
    background-color:#fff;
    padding:.15rem .3rem;
    box-shadow:rgba(0, 0, 0, 0.06) 0 -2px 8px 0
}
.download-bar-box .content {
    padding:0;
    display:flex
}
.download-bar-box .content>.logo {
    flex:0 0 0.8rem
}
.download-bar-box .content>.logo img {
    vertical-align:bottom
}
.download-bar-box .content>.text {
    flex:1 1 auto;
    padding-left:.2rem;
    display:flex;
    flex-direction:column
}
.download-bar-box .content>.text h5 {
    flex:0 0 auto;
    color:#111;
    font-weight:lighter
}
@media screen and (max-width: 320px) {
    .download-bar-box .content>.text h5 {
        font-size:13px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    .download-bar-box .content>.text h5 {
        font-size:15px
    }
}
@media screen and (min-width: 376px) {
    .download-bar-box .content>.text h5 {
        font-size:17px
    }
}
.download-bar-box .content>.text summary {
    flex:1 1 auto;
    display:flex;
    color:#999999;
    align-items:flex-end;
    padding-bottom:.05rem
}
@media screen and (max-width: 320px) {
    .download-bar-box .content>.text summary {
        font-size:10px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    .download-bar-box .content>.text summary {
        font-size:12px
    }
}
@media screen and (min-width: 376px) {
    .download-bar-box .content>.text summary {
        font-size:14px
    }
}
.download-bar-box .content>.btn-container {
    flex:0 0 2.4rem;
    padding-left:.3rem;
    display:flex;
    align-items:stretch
}
.download-bar-box .content>.btn-container .btn {
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    border-radius:3px;
    text-align:center;
    color:#111
}
@media screen and (max-width: 320px) {
    .download-bar-box .content>.btn-container .btn {
        font-size:14px
    }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    .download-bar-box .content>.btn-container .btn {
        font-size:16px
    }
}
@media screen and (min-width: 376px) {
    .download-bar-box .content>.btn-container .btn {
        font-size:18px
    }
}
