@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700;900&display=swap');
/*@import url('//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');*/

html,
body {
    width: 100%;
    height: 100%;
    color: var(--color-dark-text);
    font-weight: 500;
    font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    font-feature-settings: 'palt';

    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: left;
    background-size:100% auto;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------
*   <a> tag
--------------------------------------------- */
a {
    outline: none;
    color: inherit;
    text-decoration: none;
}

/* ---------------------------------------------
*   <img> tag
--------------------------------------------- */
img {
    display: block;
    width: 100%;
    vertical-align: bottom;
}

h1, h2, h3 {
    font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 32px;
    font-weight: 500;
}

.pcview a:hover{opacity:0.6;}
.pcview a[href*="tel:"]{
    pointer-events: none;
    cursor: default;
}
.pcview a[href*="tel:"]:hover{opacity:1;}
.pcview .sp{display: none !important;}
.mobile .pc{display: none !important;}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

/* ---------------------------------------------
*   main visual
--------------------------------------------- */

.mv {
    width: 100%;
    height: calc(100vh - 64px);
    background-size: cover;
}

.mv_border {
    position: absolute;
    width: calc(100% - 32px);
    height: calc(100vh - 96px);
    border: 1px solid var(--color-object-opacity);
    top: calc(50% - 32px);
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.mv_contents {
    position: absolute;
    width: min(calc((360/1200) * 100vw), calc((360/731) * 100vh));
    height: min(calc(((440/1200) * 100vw) + 64px), calc(((440/731) * 100vh) + 64px));
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.mv_contents .emblem {
    width: min(calc((360/1200) * 100vw), calc((360/731) * 100vh));
    height: min(calc((440/1200) * 100vw), calc((440/731) * 100vh));
}

.mv_contents .sns_container {
    display: flex;
    width: 144px;
    height: 32px;
    justify-content: space-between;
    margin: 32px auto 0;
}

.sns_container .sns {
    width: 32px;
    height: 32px;
}

@media screen and (max-width: 768px) {
    .mv {
        width: 100vw;
        height: calc((var(--vh, 1vh) * 100) - 56px);
        background:url(../img/sushi/mv_bg.jpg) no-repeat center;
        background-size: cover;
    }

    .mv_border {
        position: absolute;
        width: calc(100% - 32px);
        height: calc((var(--vh, 1vh) * 100) - 88px);
        border: 1px solid var(--color-object-opacity);
        top: calc((var(--vh, 1vh) * 50) - 28px);
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .mv_contents {
        width: 74.6666666666667vw;
        height: 98.9333333333333vw;
        max-width: 280px;
        max-height: 371px;
    }

    .mv_contents .emblem {
        width: 74.6666666666667vw;
        height: 78.6666666666667vw;
        max-width: 280px;
        max-height: 295px;
    }

    .mv_contents .sns_container {
        width: 38.4vw;
        height: 8.53333333333333vw;
        max-width: 144px;
        max-height: 32px;
    }

    .sns_container .sns {
        width: 8.53333333333333vw;
        height: 8.53333333333333vw;
        max-width: 32px;
        max-height: 32px;
    }
}

@media screen and (max-height: 731px) {
    .mv_contents {
        position: absolute;
        width: calc((360/731) * 100vh);
        height: calc((504/731) * 100vh);
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .mv_contents .emblem {
        width: calc((360/731) * 100vh);
        height: calc((440/731) * 100vh);
    }

    .mv_contents .sns_container {
        display: flex;
        width: calc((144/731) * 100vh);
        height: calc((32/731) * 100vh);
        justify-content: space-between;
        margin: calc((32/731) * 100vh) auto 0;
    }

    .sns_container .sns {
        width: calc((32/731) * 100vh);
        height: calc((32/731) * 100vh);
    }
}

/* ---------------------------------------------
*   tab bar
--------------------------------------------- */

.tab_bar {
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    top: 0;
    width: 100%;
    height: 64px;
    background-color: var(--color-category);
    color: var(--color-object);
    text-align: center;
    border-bottom: 1px solid var(--color-object-opacity);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
}

.tab_bar ul {
    width: calc(100vw - 128px);
    height: 64px;
    margin: 0 auto 0;
    padding: 0;
}

.tab_bar ul li {
    position: relative;
    list-style: none;
    display: inline-block;
    vertical-align: top;
    width: 25%;
    height: 64px;
}

.tab_bar ul li button {
    display: flex;
    width: calc(100% - 16px);
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: normal;
    margin-left: 8px;
    margin-right: 8px;
    color: var(--color-object);
    font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;;
}

/*タブバーの縦線*/
.tab_bar ul li:after {
    position: absolute;
    right: 0;
    top: 8px;
    content: "";
    height: 48px;
    width: 0;
    border-right: 1px solid var(--color-object-opacity);
}
.tab_bar ul li:last-of-type:after {
  border: none;
}

/*タブバーの下線*/
.tab_bar ul li.selected_tab:before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: var(--color-object);
}

@media screen and (max-width: 768px) {
    .tab_bar {
        position: fixed;
        top: auto;
        bottom: 0;
        height: calc(56px + env(safe-area-inset-bottom));
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
    }

    .tab_bar ul {
        width: 100vw;
        height: 56px;
    }

    .tab_bar ul li {;
        height: 56px;
    }

    .tab_bar ul li button {
        font-size: 12px;
    }

    .tab_bar ul li:after {
        height: 40px;
    }

    .tab_bar ul li.selected_tab:before {
        top: 0;
    }
}

/* ---------------------------------------------
*   intro
--------------------------------------------- */

.intro {
    width: 100%;
    /*height: 364px;*/
    background-color: white;
    background:url(../img/intro_bg.svg) no-repeat bottom right;
    padding: 80px;
}

.intro_content {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 0;
}

.intro .intro_content h1 {
    font-size: min(calc((32/1200) * 100vw), 51.2px);
    line-height: min(calc((48/1200) * 100vw), 76.8px);
    margin-bottom: 8px;
}

.intro .intro_content p {
    font-size: min(calc((16/1200) * 100vw), 25.6px);
    line-height: 240%;
}

@media screen and (max-width: 768px) {
    .intro {
        width: 100%;
        background-color: white;
        background:url(../img/intro_bg_sp.svg) no-repeat bottom right;
        padding: calc((40/375) * 100vw) calc((24/375) * 100vw);
    }

    .intro .intro_content h1 {
        font-size: calc((28/375) * 100vw);
        line-height: calc((40/375) * 100vw);
        margin-bottom: calc((16/375) * 100vw);
    }

    .intro .intro_content p {
        font-size: calc((14/375) * 100vw);
    }
}

/* ---------------------------------------------
*   drop down
--------------------------------------------- */

.shops .dropbtn {
    width: calc((160/1200) * 100vw);
    height: calc((33/1200) * 100vw);
    color: var(--color-category);
    font-size: calc((16/1200) * 100vw);
    border: none;
    cursor: pointer;
    text-align: center;
}

.shops .dropbtn:hover, .dropbtn:focus {
    /*opacity: 0.8;*/
}

.shops .dropdown {
    position: relative;
    display: inline-block;
    margin: calc((32/1200) * 100vw) 0 calc((24/1200) * 100vw);
}

.shops .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-object);
    border-radius: 16px;
    width: calc((160/1200) * 100vw);
    margin-top: calc((4/1200) * 100vw);
    padding-top: calc((4/1200) * 100vw);
    padding-bottom: calc((4/1200) * 100vw);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.shops .dropdown-content a {
    color: #9F762C;
    padding: calc((8/1200) * 100vw) 0;
    margin: calc((4/1200) * 100vw) calc((8/1200) * 100vw);
    text-align: center;
    color: var(--color-category);
    font-size: calc((16/1200) * 100vw);
    text-decoration: none;
    display: block;
    border-radius: calc((16/1200) * 100vw);
}

.shops .dropdown-content a:hover {
    background-color: var(--color-category-opacity);
    opacity: 1;
}

.shops .active {
    background-color: var(--color-category);
    color: var(--color-object) !important;
}

.shops .show {display:block;}

@media screen and (max-width: 768px) {
    .shops .dropbtn {
        width: calc((327/375) * 100vw);
        height: calc((33/375) * 100vw);
        font-size: calc((16/375) * 100vw);
    }

    .shops .dropdown {
        margin: calc((24/375) * 100vw) 0 calc((24/375) * 100vw);
    }

    .shops .dropdown-content {
        width: calc((327/375) * 100vw);
        margin-top: calc((4/375) * 100vw);
        padding-top: calc((4/375) * 100vw);
        padding-bottom: calc((4/375) * 100vw);
    }

    .shops .dropdown-content a {
        padding: calc((8/375) * 100vw) 0;
        margin: calc((4/375) * 100vw) calc((8/1200) * 100vw);
        font-size: calc((16/375) * 100vw);
        border-radius: calc((16/375) * 100vw);
    }
}
/* ---------------------------------------------
*   shop list
--------------------------------------------- */

.shops {
    width: 100%;
    background-color: var(--color-category);
    color: var(--color-light-text);
    padding: 80px;
}

.shops_wrapper {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 0;
}

.shops h1 {
    color: var(--color-light-header);
    font-size: min(calc((32/1200) * 100vw), 51.2px);
    line-height: min(calc((48/1200) * 100vw), 76.8px);
}

.shops #shop_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: calc((-40/1200) * 100vw);
}

.shops #shop_list::after {
    display: block;
    content:"";
    width: 30.7692307692308%;
}

.shops .shop_list_item {
    position: relative;
    width: 30.7692307692308%;
    margin-top: calc((40/1200) * 100vw);
}

.shops .main_image {
    border-radius: calc((16/1200) * 100vw);
}

.shops .label {
    position: absolute;
    top: 0;
    right: 0;
    width: calc((56/1200) * 100vw);
    max-width: 89.6px;
    height: calc((56/1200) * 100vw);
    max-height: 89.6px;
    margin-top: calc((16/1200) * 100vw);
    margin-right: calc((16/1200) * 100vw);
}

.shops .shop_information {
    position: absolute;
    width: 100%;
    height: calc((86/1200) * 100vw);
    max-height: 137.6px;
    bottom: 0;
    border-bottom-left-radius: calc((16/1200) * 100vw);
    border-bottom-right-radius: calc((16/1200) * 100vw);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: min(calc((16/1200) * 100vw), 25.6px);
}

/* 店舗名 */
.shops .shop_information .shop_name {
    position: absolute;
    display: flex;
    bottom: min(calc((40/1200) * 100vw), 64px);
}

.shops .shop_information .shop_name img {
    width: calc((16/1200) * 100vw);
    max-width: 25.6px;
    height: calc((16/1200) * 100vw);
    max-height: 25.6px;
    margin-right: min(1vw, 19.2px);
}

.shops .shop_information .shop_name p {
    font-weight: 600;
    font-size: min(calc((14/1200) * 100vw), 22.4px);
    margin-right: calc((16/1200) * 100vw);
    color: var(--color-object);
}

/* 店舗エリア */
.shops .shop_information .shop_location {
    position: absolute;
    display: flex;
    bottom: min(calc((16/1200) * 100vw), 25.6px);
}

.shops .shop_information .shop_location img {
    width: calc((16/1200) * 100vw);
    max-width: 25.6px;
    height: calc((16/1200) * 100vw);
    max-height: 25.6px;
    margin-right: min(1vw, 19.2px);
}

.shops .shop_information .shop_location p {
    font-weight: 500;
    font-size: min(calc((14/1200) * 100vw), 22.4px);
    margin-right: calc((16/1200) * 100vw);
    color: var(--color-object);
    opacity: 50%;
}

.shops .shop_arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc((40/1200) * 100vw);
    max-width: 64px;
    height: calc((40/1200) * 100vw);
    max-height: 64px;
    border-bottom-right-radius: calc((16/1200) * 100vw);
}

.shops .view_all {
    width: 100%;
    height: 48px;
    background-color: var(--color-object);
    border-radius: 32px;
    color: var(--color-category);
    margin-top: 40px;
}

.shops .view_all a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shops .view_all p {
    font-size: 16px;
    line-height: 16px;
}

.shops .view_all img {
    width: 8px;
    height: 8px;
    margin-left: 8px;
}

@media screen and (max-width: 768px) {
    .shops {
        padding: 40px 24px;
    }

    .shops h1 {
        font-size: calc((28/375) * 100vw);
        line-height: calc((40/375) * 100vw);
    }

    .shops #shop_list {
        justify-content: center;
        margin-top: calc((-24/375) * 100vw);
    }

    .shops .shop_list_item {
        width: calc((327/375) * 100vw);
        margin-top: calc((24/375) * 100vw);
    }

    .shops .main_image {
        border-radius: calc((16/375) * 100vw);
    }

    .shops .label {
        width: calc((56/375) * 100vw);
        height: calc((56/375) * 100vw);
        margin-top: calc((16/375) * 100vw);
        margin-right: calc((16/375) * 100vw);
    }

    .shops .shop_information {
        height: calc((88/375) * 100vw);
        border-bottom-left-radius: calc((16/375) * 100vw);
        border-bottom-right-radius: calc((16/375) * 100vw);
        padding: calc((16/375) * 100vw);
    }

    /* 店舗名 */
    .shops .shop_information .shop_name {
        bottom: calc((44/375) * 100vw);
    }

    .shops .shop_information .shop_name img {
        width: calc((16/375) * 100vw);
        height: calc((16/375) * 100vw);
        margin-right: calc((12/375) * 100vw);
    }

    .shops .shop_information .shop_name p {
        font-size: calc((14/375) * 100vw);
        margin-right: calc((16/375) * 100vw);
    }

    /* 店舗エリア */
    .shops .shop_information .shop_location {
        bottom: calc((16/375) * 100vw);
    }

    .shops .shop_information .shop_location img {
        width: calc((16/375) * 100vw);
        height: calc((16/375) * 100vw);
        margin-right: 3.2vw;
    }

    .shops .shop_information .shop_location p {
        font-size:calc((14/375) * 100vw);
        margin-right: calc((16/375) * 100vw);
    }

    .shops .shop_arrow {
        width: calc((40/375) * 100vw);
        height: calc((40/375) * 100vw);
        border-bottom-right-radius: calc((16/375) * 100vw);
    }
}

/* ---------------------------------------------
*   users
--------------------------------------------- */

.users {
    width: 100%;
    padding: 80px;
    background-color: white;
}

.users_wrapper {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 0;
}

.users h1 {
    font-size: min(calc((32/1200) * 100vw), 51.2px);
    line-height: min(calc((48/1200) * 100vw), 76.8px);
    margin-bottom: 16px;
}

.users .users_intro {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: max(108px, calc((108/1200) * 100vw));
}

.users .users_intro .emblem_container {
    position: relative;
    width: calc((100vw - 160px)/2);
    max-width: 960px;
    height:  calc(((100vw - 160px)/2) * (280/520));
    max-height: 517px;
    background:url(../img/user_emblem_bg.svg) no-repeat center;
    background-size: cover;
    margin-right: min(calc((40/1200) * 100vw), 64px);
    flex-shrink: 0;
    margin-bottom: 0;
}

.users .user_emblem {
    position: absolute;
    width: calc((200/1200) * 100vw);
    max-width: 320px;
    height: calc((200/1200) * 100vw);
    max-height: 320px;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    filter: drop-shadow(0px 5px 0px rgba(0, 0, 0, 0.16));
}

.users .user_fukidashi {
    position: absolute;
    width: calc((80/1200) * 100vw);
    max-width: 128px;
    height: calc((91/1200) * 100vw);
    max-height: 145.6px;
    top: 32.5%;
    left: calc(50% + min(calc((160/1200) * 50vw), 128px));
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.users .users_intro p {
    font-weight: 500;
    font-size: min(calc((16/1200) * 100vw), 25.6px);
    line-height: 240%;
}

/* リスト */

.users .users_container {
    position: relative;
    width: calc(100vw - 160px);
    max-width: 1920px;
    height: calc((100vw - 160px) / (1040 / 573));
    max-height: 1057px;
    background:url(../img/user_frame.svg) no-repeat center;
    background-size: cover;
}

.users_container .users_logo {
    position: absolute;
    width: calc((136/1200) * 100vw);
    max-width: 218px;
    height: calc((136/1200) * 100vw);
    max-height: 218px;
    top: 0%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.users .users_container #user_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: min(calc((80/1200) * 100vw), 128px);
    margin-top: max(calc((-8/1200) * 100vw), -13px);
}

.users .user_list_item {
    position: relative;
    width: calc((416/1040) * (100vw - 160px));
    max-width: 704px;
    height: calc((81/1040) * (100vw - 160px));
    max-height: 130px;
    flex-shrink: 0;
    margin-top: min(calc((8/1200) * 100vw), 13px);
    border-bottom: 1px solid var(--color-user-opacity);
}

.users .user_item_container {
    display: flex;
    justify-content: left;
    align-items: center;
}

.users .user_icon {
    width: calc((64/1200) * 100vw);
    max-width: 102px;
    height: calc((64/1200) * 100vw);
    max-height: 102px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.16);
    margin-right: 16px;
}

.users .user_crown {
    position: absolute;
    width: calc((20/1200) * 100vw);
    height: calc((20/1200) * 100vw);
    top: 0;
    left: 0;
}

.users .user_info_container .user_name{
    font-size: min(calc((16/1200) * 100vw), 25px);
    font-weight: 600;
    color: var(--color-dark-header);
    line-height: calc((24/1200) * 100vw);
}

.users .user_info_container .user_level{
    font-size: min(calc((14/1200) * 100vw), 22px);
    font-weight: 500;
    color: rgba(var(--color-dark-header-rgb), .5);
    line-height: calc((20/1200) * 100vw);
}

@media screen and (max-width: 768px) {
    .users {
        width: 100%;
        padding: 40px 24px 40px;
        background-color: white;
    }

    .users h1 {
        font-size: 28px;
        line-height: 40px;
        margin-bottom: 18px;
    }

    .users .users_intro {
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;

        margin-bottom: max(80px, calc((80/375) * 100vw));
    }

    .users .users_intro .emblem_container {
        width: calc((327/375) * 100vw);
        height: calc((206/375) * 100vw);
        margin-right: 0;
        margin-bottom: 8px;
    }

    .users .user_emblem {
        width: calc((160/375) * 100vw);
        height: calc((160/375) * 100vw);
        filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.16));
    }

    .users .user_fukidashi {
        width: calc((64/375) * 100vw);
        height: calc((73/375) * 100vw);
        top: 28.3980582524272%;
        left: calc(50% + calc((118/375) * 50vw));
    }

    .users .users_intro p {
        font-size: calc((14/375) * 100vw);
        font-weight: 500;
        line-height: 200%;
    }

    .users .users_container {
        width: calc((327/375) * 100vw);
        height: calc((890/375) * 100vw);
        /*height: calc(((327/375) * 100vw) * (890/327));*/
        max-height: none;
        margin: 0 auto 0;
        background:url(../img/user_frame_sp.svg) no-repeat center;
        background-size: cover;
    }

    .users_container .users_logo {
        width: calc((88/375) * 100vw);
        height: calc((88/375) * 100vw);
    }

    .users .users_container #user_list {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: calc((32/375) * 100vw);
        margin-bottom: calc((-8/375) * 100vw);
    }

    .users .user_list_item {
        width: calc((263/375) * 100vw);
        height: calc((73/375) * 100vw);
        margin-top: calc((8/375) * 100vw);
    }

    .users .user_icon {
        width: calc((64/375) * 100vw);
        height: calc((64/375) * 100vw);
    }

    .users .user_crown {
        width: calc((20/375) * 100vw);
        height: calc((20/375) * 100vw);
    }

    .users .user_info_container .user_name{
        font-size: calc((16/375) * 100vw);
        font-weight: 600;
        color: var(--color-dark-header);
        line-height: calc((24/375) * 100vw);
    }

    .users .user_info_container .user_level{
        font-size: calc((14/375) * 100vw);
        font-weight: 500;
        color: rgba(var(--color-dark-header-rgb), .5);
        line-height: calc((20/375) * 100vw);
    }
}


/* ---------------------------------------------
*   synchrolife
--------------------------------------------- */
.synchrolife{
    background:url(../img/synchrolife_bg.svg) no-repeat left bottom;
    text-align: left;
    padding: 80px;
    background-color: var(--color-synchrolife);
}

.synchrolife_wrapper {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 0;
}

.synchrolife h1{
    font-weight: 500;
    font-size: min(calc((28/1200) * 100vw), 44.8px);
    line-height: min(calc((40/1200) * 100vw), 64px);
    color: var(--color-light-header);
    margin-bottom: 16px;
}
.synchrolife p{
    font-weight: 500;
    font-size: min(calc((16/1200) * 100vw), 25.6px);
    line-height: 240%;
    color: var(--color-light-text);
}

@media screen and (max-width: 768px) {
    .synchrolife{
        background:url(../img/synchrolife_bg_sp.svg) no-repeat left bottom;
        background-color: var(--color-synchrolife);
        padding: 40px 24px;
    }

    .synchrolife h1{
        font-size: calc((28/375) * 100vw);
        line-height: calc((40/375) * 100vw);
    }

    .synchrolife p{
        font-weight: 500;
        font-size: 14px;
        line-height: 200%;
        color: var(--color-light-text);
    }
}

/* ---------------------------------------------
*   install
--------------------------------------------- */
.install{
    background:url(../img/download_bg.jpg) no-repeat center center;
    background-size:cover;
    padding: 80px 160px 0;
}

.install_contents{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 0;
    display:flex;
    justify-content:flex-start;
    align-items: center;
    flex-direction: row;
}

.install_contents .ph {
    width: calc((279/1200) * 100vw);
    max-width: 446px;
    height: calc((532/1200) * 100vw);
    max-height: 851px;
    margin-right: 80px;
    order: 0;
}

.install_contents .txt {
    color: var(--color-light-header);
    order: 1;
}

.install_contents .txt img {
    width: calc((236/1200) * 100vw);
    max-width: 378px;
    height: calc((56/1200) * 100vw);
    max-height: 90px;
    margin-bottom: 24px;
}

.install_contents .txt h3 {
    font-size: min(calc((40/1200) * 100vw), 64px);
    line-height: min(calc((64/1200) * 100vw), 102.4px);
    font-weight: 500;
    margin-bottom: 40px;
}

.install_contents .install_link {
    display: flex;
    justify-content: flex-start;
}

.install_contents .install_qr img {
    width: calc((96/1200) * 100vw);
    max-width: 154px;
    height: calc((96/1200) * 100vw);
    max-height: 154px;
    margin-bottom: 0;
    margin-right: 16px;
}

.install_contents .install_app {
    display: flex;
    height: calc((96/1200) * 100vw);
    max-height: 154px;
    flex-direction: column;
    justify-content: space-between;
}

.install_contents .install_app img {
    width: calc((135/1200) * 100vw);
    max-width: 216px;
    height: calc((40/1200) * 100vw);
    max-height: 64px;
    margin-bottom: 0;
}

@media screen and (max-width: 1200px) {
     .install{
        padding: calc((80/1100) * 100vw) calc((160/1200) * 100vw) 0;
    }

    .install_contents .ph {
        width: calc((279/1100) * 100vw);
        height: calc((532/1100) * 100vw);
        margin-right: calc((80/1100) * 100vw);
    }

    .install_contents .txt img {
        width: calc((236/1100) * 100vw);
        height: calc((56/1100) * 100vw);
        margin-bottom: calc((24/1100) * 100vw);
    }

    .install_contents .txt h3 {
        font-size: calc((40/1100) * 100vw);
        line-height: calc((64/1100) * 100vw);
        font-weight: 500;
        margin-bottom: calc((40/1100) * 100vw);
    }

    .install_contents .install_qr img {
        width: calc((96/1100) * 100vw);
        height: calc((96/1100) * 100vw);
        margin-right: calc((16/1100) * 100vw);
    }

    .install_contents .install_app {
        height: calc((96/1100) * 100vw);
    }

    .install_contents .install_app img {
        width: calc((135/1100) * 100vw);
        height: calc((40/1100) * 100vw);
        margin-bottom: 0;
    }
}


@media screen and (max-width: 768px) {
    .install{
        background:url(../img/download_bg_sp.jpg) no-repeat center center;
        background-size:cover;
        padding: 40px calc((48/375) * 100vw) 0 calc((48/375) * 100vw);
    }

    .install_contents{
        display:flex;
        width: calc((296/375) * 100vw);
        justify-content:flex-end;
        flex-direction: column;
        align-items: flex-start;
    }

    .install_contents .ph {
        width: calc((279/375) * 100vw);
        height: calc((532/375) * 100vw);
        margin-right: 0;
        order: 1;
    }

    .install_contents .txt {
        order: 0;
    }

    .install_contents .txt img {
        width: calc((236/375) * 100vw);
        height: calc((56/375) * 100vw);
    }

    .install_contents .txt h3 {
        font-size: calc((28/375) * 100vw);
        line-height: calc((40/375) * 100vw);
        font-weight: 500;
        margin-bottom: 24px;
    }

    .install_contents .install_app {
        height: calc((60/375) * 100vw);
        margin-bottom: 40px;
    }

    .install_contents .install_app img {
        width: calc((200/375) * 100vw);
        height: calc((60/375) * 100vw);
        margin-bottom: 0;
    }

    .install_link{ display:block; }
    .install_link .install_qr{ display:none; }
    .install_link .install_app .apple{ margin:0; }
    .iphone .install_link .install_app .google{ display:none; }
    .android .install_link .install_app .apple{ display:none; }
    .pcview .install_link .install_app .google{ display:none; }
}



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

footer {
    height: 72px;
    padding: 0 80px 0;
}

.footer_content{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 0;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.footer_sns{
    width: 144px;
    display:flex;
    justify-content:space-between;
}

.footer_sns a{

}

.footer_content .cr{
    font-family: "Avenir", -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", YuGothic, YuGothicM, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align:left;
    font-size: 12px;
    font-weight: normal;
    line-height: 160%;
}



@media screen and (max-width: 768px) {
    footer {
        height: calc(128px + env(safe-area-inset-bottom));
        padding: 0 24px calc(56px + env(safe-area-inset-bottom));
    }

    .footer_content .cr{
        width: 133px;
    }
}