@charset "UTF-8";

.cloudimage-360 {
    height: 600;
    width: auto;
}
#shirobike {
    height: 80%;
    width: 80%;
    margin: 0 auto;
}
/*
#sample1 {
    height: 50px;<div>の高さ
    width: 80%;<div>の幅
    margin: 0 auto;<div>（ブロック要素）自体を中央寄せ
    line-height: 50px;<div>の子要素（インライン要素）を垂直方向に中央寄せ
    text-align: center;<div>の子要素（インライン要素）を中央寄せ
    background-color: greenyellow;<div>の背景色
}
*/
.cloudimage-360-magnifier-icon {
	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
}

.cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
    padding: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 4px;
}
.cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
    outline: none;
}
.cloudimage-360 .cloudimage-360-prev {
    display: none;
    position: absolute;
    z-index: 100;
    top: calc(50% - 15px);
    left: 20px;
}
.cloudimage-360 .cloudimage-360-next {
    display: none;
    position: absolute;
    z-index: 100;
    top: calc(50% - 15px);
    right: 20px;
}
.cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: 50% 50% / cover no-repeat;
}
.cloudimage-360 .cloudimage-360-prev:before {
    background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
}
.cloudimage-360 .cloudimage-360-next:before {
    background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
}
.cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
    opacity: 0.4;
    cursor: default;
}