@charset "UTF-8";

:root {
    --blue: #005BAC;
    --gray: #BEBEBE;
}

@font-face {
    font-family: "Montserrat-Medium";
    src: url("../fonts/Montserrat-Medium.ttf") format("opentype");
}

@font-face {
    font-family: "Montserrat-Bold";
    src: url("../fonts/Montserrat-Bold.ttf") format("opentype");
}

/************************************************
    全体
************************************************/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body {
    overflow: auto;
    transform-origin: top left;
    font-family: "Noto Sans JP";
    font-size: 14px;
    line-height: 1.5;
    color: #000;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body[data-device="sp"] {
    overflow: hidden;
    min-width: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

canvas:focus {
    outline: none;
}

.wrapper {
    width: 100%;
    height: 100%;
}

/************************************************
    ローディング
************************************************/
.loading-area {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 1;
    transition: opacity 2s ease 1s;
}

.loading-area.is-hidden {
    opacity: 0;
}

.loading-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
}

.loading-bar-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loading-bar-inner-text {
    color: #005BAC;
    font-family: "Montserrat-Medium";
    font-size: 16px;
}

.loading-bar-inner-text span {
    font-size: 32px;
}

.loading-bar-progress-circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s linear;
    stroke: #005BAC;
    stroke-dasharray: 314px;
    stroke-dashoffset: 314px;
    fill: none;
}

/************************************************
    ヘッダー
************************************************/
header {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 1024px;
    padding: 24px 40px;
    background: #FFF;
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.56px;
    border-bottom: 1px solid #EBEBEB;
}

body[data-device="sp"] header {
    justify-content: space-between;
    min-width: unset;
    padding: 16px 11px;
    gap: 0px;
    font-size: 12px;
}

body[data-device="sp"][data-direction="y"] header {
    padding-right: 24px;
}

header .logo {
    width: 221px;
    height: 36.5px;
}

header .logo img {
    width: 100%;
    height: 100%;
}

/************************************************
    コンテンツエリア
************************************************/
.contents-area {
    width: 100%;
    min-width: 1024px;
    height: auto;
    background-color: #FFF;
}

body[data-device="sp"] .contents-area {
    min-width: unset;
    height: auto;
}

.main,
.pankuzu {
    display: flex;
    width: 100%;
    max-width: 1840px;
    height: auto;
    margin: 0 auto;
    padding: 0px 40px 24px;
}

body[data-device="sp"][data-direction="t"] .main {
    flex-direction: column;
    padding: 0;
}

body[data-device="sp"][data-direction="y"] .main {
    padding: 0px 24px 16px;
}

.pankuzu {
    padding: 8px 0;
    color: #999;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-weight: 400;
}

.pankuzu ul {
    display: flex;
    align-items: center;
    margin: 0;
    list-style: none;
}

.pankuzu ul li {
    display: flex;
    align-items: center;
}

.pankuzu ul li:first-child a {
    display: inline-block;
    width: 16px;
    height: 18px;
    background: url(../img/icon_home.png);
    background-size: contain;
}

.pankuzu ul li:first-child a:hover {
    background: url(../img/icon_home_hover.png);
    background-size: contain;
}

.pankuzu ul li:first-child::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 8px;
    background: url(../img/icon_next.png);
    background-size: contain;
    vertical-align: middle;
}

body[data-device="sp"][data-direction="t"] .pankuzu ul {
    padding-left: 16px;
}

body[data-device="sp"][data-direction="y"] .pankuzu ul {
    padding-left: 24px;
}

/************************************************
    モデルエリア
************************************************/
.model-cover[data-mode="normal"] {
    width: calc(100% - 344px);
    height: auto;
    background-color: unset;
}

.model-cover[data-mode="full"] {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1A1B1C;
}

body[data-device="sp"][data-direction="t"] .model-cover[data-mode="normal"] {
    width: 100%;
}

.model-area {
    position: relative;
    height: auto;
    padding: 0;
    background-color: unset;
}

body[data-device="pc"] .model-cover[data-mode="full"] .model-area {
    max-width: 1840px;
    margin: 0 auto;
    padding: 40px;
    min-height: 600px;
    min-width: 1096px;
}

body[data-device="sp"][data-direction="t"] .model-area {
    width: 100%;
    height: 100%;
    min-height: initial;
}

body[data-device="sp"][data-direction="t"] .model-cover[data-mode="full"] .model-area {
    max-width: 100%;
    min-width: 100%;
    padding: 0;
}

body[data-device="sp"][data-direction="y"] .model-cover[data-mode="normal"] .model-area {
    height: auto;
}

body[data-device="sp"][data-direction="y"] .model-cover[data-mode="full"] .model-area {
    width: 100%;
    padding: 16px 24px;
}

.model {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.model-cover[data-mode="normal"] .model-area .model {
    max-width: 1416px;
}

body[data-device="pc"] .model-cover[data-mode="full"] .model-area .model {
    min-height: 600px;
    min-width: 600px;
}

body[data-device="sp"][data-direction="t"] .model-cover[data-mode="normal"] .model {
    height: 210px;
    border-radius: initial;
}

body[data-device="sp"][data-direction="y"] .model {
    height: 100%;
}

#application-canvas {
    margin: 0 !important;
    border-radius: 16px;
    transform-origin: center;
    min-height: 600px;
    min-width: 600px;
}

body[data-device="sp"] #application-canvas {
    min-height: unset;
    min-width: unset;
}

body[data-device="sp"][data-direction="t"] #application-canvas {
    border-radius: initial;
}

.model-cover[data-mode="full"] #application-canvas {
    position: unset;
}

/************************************************
    メニューエリア
************************************************/
body[data-device="sp"] .menu-cover {
    overflow-y: auto;
}

body[data-device="sp"][data-direction="t"] .menu-cover {
    margin-top: 20px;
}

.menu-area {
    width: 320px;
    min-height: 600px;
    margin: 0 0 0 24px;
    background-color: #FFF;
}

body[data-device="sp"][data-direction="t"] .menu-area {
    width: 100%;
    min-height: unset;
    margin: 0;
    padding: 20px 35px 0;
}

body[data-device="sp"][data-direction="y"] .menu-area {
    min-height: auto;
}

.menu-area>div {
    margin-bottom: 12px;
}

.menu-area .title {
    color: var(--blue);
    font-family: "Montserrat-Bold";
    font-size: 16px;
}

.menu-area .btn-area {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.menu-area .btn-area>div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--gray);
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    text-align: center;
    cursor: pointer;
    transition: 0.5s;
}

.menu-area .btn-area>div.active,
.menu-area .btn-area>div:hover {
    color: var(--blue);
    font-weight: 700;
    border: 1.5px solid var(--blue);
    background: rgba(0, 91, 172, 0.04);
}

.menu-area .btn-area>div:hover {
    transition: 0.5s;
}

.menu-area .btn-area .model-btn {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: 4.5px;
    padding-left: 4.5px;
}

.menu-area .btn-area .model-btn img {
    width: 80px;
    height: 80px;
}

/************************************************
    共通
************************************************/
.active {
    display: flex;
}

.dis-non {
    display: none !important;
}

.of-h {
    overflow: hidden;
}

.view-image {
    position: absolute;
    top: 16px;
    left: 8px;
    z-index: 1;
    width: 151px;
    height: 59px;
    background: url(../img/360view.png);
    background-size: cover;
}

body[data-device="pc"] .model-cover[data-mode="full"] .model-area .view-image {
    top: 56px;
    left: 56px;
}

body[data-device="sp"] .view-image {
    width: calc(151px / 2);
    height: calc(59px / 2);
}

body[data-device="sp"][data-direction="y"] .model-cover[data-mode="full"] .model-area .view-image {
    top: 32px;
    left: 40px;
}

/* フルスクリーンボタン */
.zoom-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 40px;
    height: 40px;
    background: url(../img/btn_zoom_in.svg) #FFF no-repeat center center;
    border-radius: 4px;
    cursor: pointer;
}

.model-cover[data-mode="full"] .model-area .zoom-btn {
    background: url(../img/btn_zoom_out.svg) #FFF no-repeat center center;
}

body[data-device="pc"] .model-cover[data-mode="full"] .model-area .zoom-btn {
    top: 56px;
    right: 56px;
}

body[data-device="sp"][data-direction="y"] .model-cover[data-mode="full"] .model-area .zoom-btn {
    top: 32px;
    right: 40px;
}

/* 画像スライドボタン */
.arrow-back-btn,
.arrow-forward-btn {
    display: flex;
    z-index: 1;
    width: 40px;
    height: 40px;
    padding: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
    position: absolute;
    top: calc(50% - 20px);
    width: 40px;
    border-radius: 20px;
    cursor: pointer;
}

/* 左矢印 */
.arrow-back-btn {
    left: 16px;
    background: url(../img/icon_arrow_back.svg) rgba(0, 91, 172, 0.8) no-repeat center center;
}

body[data-device="pc"] .model-cover[data-mode="full"] .model-area .arrow-back-btn,
body[data-device="sp"][data-direction="y"] .model-cover[data-mode="full"] .model-area .arrow-back-btn {
    left: 56px;
}

body[data-device="sp"][data-direction="t"] .model-cover[data-mode="full"] .model-area .arrow-back-btn {
    left: 16px;
}

/* 右矢印 */
.arrow-forward-btn {
    right: 16px;
    background: url(../img/icon_arrow_forward.svg) rgba(0, 91, 172, 0.8) no-repeat center center;
}

body[data-device="pc"] .model-cover[data-mode="full"] .model-area .arrow-forward-btn,
body[data-device="sp"][data-direction="y"] .model-cover[data-mode="full"] .model-area .arrow-forward-btn {
    right: 56px;
}

/* ページャー */
.pager {
    position: absolute;
    bottom: -27px;
    left: calc(50% - 16px);
    z-index: 1;
}

body[data-device="sp"][data-direction="y"] .pager {
    display: none;
}

.model-cover[data-mode="full"] .model-area .pager {
    display: none;
}

.pager circle {
    cursor: pointer;
    fill: #DCDCDC;
}

.pager circle.active {
    fill: #005BAC;
}