/*----------------------------------------------------
|
|	LAYOUT
|	--------------------------------------------------
|	基本LAYOUT CSS SETTING
|	--------------------------------------------------
|	AUTHOR	:
|
-----------------------------------------------------*/

/**************************************
**
**	HTML / BODY	L基本設定CSS
**
**************************************/

html,
body {
    margin: 0px;
    padding: 0px;
    scrollbar-face-color: #ffffff;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #ffffff;
    scrollbar-highlight-color: #ffffff;
    scrollbar-shadow-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    word-break: break-all;
    word-wrap: break-word;
}

body {
    position: relative;
    font-family:
        "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ",
        Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 12px;
    color: #555555;
    line-height: 130%;
    margin: 0px;
    padding: 0px;
}

/**************************************************
**
**	LOADING
**	-----------------------------------------------
**	LOADING SETTING
**
***************************************************/

#loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 23px;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    z-index: 9999;
}

#loading i {
    margin-top: 15px;
}

#messageLoading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 250px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 0px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 9999;
    display: none;
}

#messageLoading i {
    width: 18px;
    height: 18px;
    font-size: 18px;
    vertical-align: middle;
    margin: 6px 8px;
}

#messageLoading p {
    vertical-align: middle;
    display: inline-block;
    animation: flash 1s linear infinite;
}

@keyframes flash {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/**************************************************
**
**	MODAL
**	-----------------------------------------------
**	MODAL SETTING
**
***************************************************/

#screenOverlay {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    z-index: 998;
}

#modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    z-index: 998;
    display: none;
}

/**************************************
**
**	MODAL
**
**************************************/

.modalScreen {
    --modal-display : none;

    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    display: var(--modal-display);
}

#modalBox {
    z-index: 999;
    display: none;
}

.modalContentsArea {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: none;
}

.modalContent {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 45%;
    height: auto;
    min-height: 35%;
    max-height: 80%;
    pointer-events: auto;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #666666;
    border-radius: 5px;
    outline: 0;
    transform: translate(-50%, -50%);
}

.modalContentFullHeight {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 98%;
    height: calc(100vh - 3.5rem);
    pointer-events: auto;
    background-color: #ffffff;
    background-clip: padding-box;
    margin: 0 auto;
    border: 1px solid #666666;
    border-radius: 5px;
    outline: 0;
    transform: translate(-50%, -50%);
}

.photoFullModal {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    margin: 0 auto;
    padding: 0px;
    border: none;
    outline: 0;
    transform: translate(-50%, -50%);
}

.photoFullModal img {
    width: 100%;
}

.modalHeader,
.modalFooter {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.modalHeader {
    position: relative;
    background-position: center center;
    background-size: contain;
    background-color: #3d3d3d;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
    padding: 8px;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.modalHeader i {
    color: #ffffff;
}

.modalHeader .error i {
    color: #ff0000;
}

.modalBody {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
    overflow: auto;
}

.modalBodyFullWidth {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: none;
    overflow: auto;
    scrollbar-width: none;
}

.modalBodyFullWidth::-webkit-scrollbar {
  display: none;
}

.modalLoadBody {
    width: 100%;
    height: calc(100% - 72px);
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.modalFooter {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: center;
    padding: 12px;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

.modalFooter a {
    width: 30%;
    height: 30px;
    color: #020202;
    text-align: center;
    line-height: 34px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #000;
    border-radius: 7px;
}

.modalFooter a i {
    margin-right: 5px;
}

.modalFooter .bottonLeft {
    position: absolute;
    left: 10px;
}

/*
.loadArea{
	position: relative;
	z-index: 101;
}
*/

.modalCircleButton {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
    left: 5px;
    background-color: #ff3366;
    font-size: 150%;
    font-weight: bold;
    line-height: 30px;
    color: #ffffff;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    filter: alpha(opacity=80);
    opacity: 0.8;
    z-index: 20;
    border-radius: 50px;
    display: block;
}

.modalCircleButton i {
    color: #ffffff;
    line-height: 30px;
}

a.closeBlack {
    position: absolute;
    width: 40px;
    height: 30px;
    top: 4%;
    right: 0%;
    font-size: 300%;
    font-weight: 100;
    color: #ffffff;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    filter: alpha(opacity=80);
    opacity: 0.8;
    z-index: 20;
    border-radius: 50px;
    display: block;
}

a.closeBlack:hover,
a.closeBlack:focus {
    color: #666666;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=2);
    opacity: 0.2;
}

.closeWhite {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -3px;
    right: -3px;
    font-size: 150%;
    font-weight: bold;
    line-height: 30px;
    color: #333333;
    text-align: center;
    z-index: 20;
    border-radius: 50px;
    display: block;
}
.closeWhite:hover,
.closeWhite:focus {
    color: #999999;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=2);
    opacity: 0.2;
}

.modalTitle {
    background-color: #cccccc;
    color: #555555;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 5px;
}

.modalIndexTitle {
    background-color: #888888;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    padding: 5px;
}

.deleteBlack {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 25px;
    height: 25px;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    line-height: 25px;
    border-radius: 20px;
    z-index: 2;
}

.deleteBlack a {
    color: #ffffff;
    font-size: 18px;
}

[data-modal-status="display"] {
    --modal-display : block;
}

/***********************************
**
**	HEADER
**
***********************************/

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url("/images/smart/header.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 20px;
    text-align: center;
    overflow: hidden;
    z-index: 10;
}

header img {
    width: 100%;
}

#headerMargin {
    height: 20px;
    display: block;
    margin: 0;
    padding: 0;
}

/***********************************
**
**	FOOTER
**
***********************************/

footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    z-index: 10;
}

footer img {
    width: 100%;
}

#footerNavigation {
    position: relative;
    width: 100%;
    min-height: 50px;
}

#footerNavigation ul {
    position: relative;
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
    flex-direction: row;
    clear: both;
}

#footerNavigation ul li {
    position: relative;
    width: 100%;
    text-align: center;
}

#footerNavigation ul li img {
    width: 100%;
}

#footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-image: url("/images/smart/footer.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 20px;
    z-index: 1;
}

/**************************************************
**
**	LAYOUT
**	-----------------------------------------------
**	DEFAULT SETTING
**
***************************************************/

/* WRAP */
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    clear: both;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    overflow-y: auto;
}

#container {
    position: relative;
    display: flex;
    height: 100%;
}

.container {
    width: 100%;
    height: 100%;
    padding: 0px 0px 65px 0px;
}

.black-boader {
    border: var(--border-px) solid #000;
}

.mainContentsArea {

    width: 100%;
    height: 100%;
    scrollbar-width: none;
    overflow-x: var(--main-contents-overflow-x);
    overflow-y: var(--main-contents-overflow-y);
    background-color:var(--main-contents-area-color);
}

.mainContentsArea::-webkit-scrollbar {
  display: none;
}

.grid {
    background-image: var(--grid-image);
    background-size: 40px 40px;
    background-color : var(--bg-color);
}

.container.noPadding {
    padding: 0px;
}

.containerBackground {
    background: url("/images/pc/background.png") repeat center top;
}

.contents {
    position: relative;
    margin: 0px;
    padding: 10px;
    border: none;
}

.fullScreen {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
    border: none;
    overflow: hidden;
}

.fullScreenBackgroundImage {
    max-height: 100%;
    overflow: hidden;
}

.fullScreenBackgroundImage img {
    width: 100%;
    text-align: center;
}

.fullScreenBackgroundMovie video {
    width: 100%;
    text-align: center;
}

.fullScreenContents {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    padding: 0px;
    border: none;
    z-index: 1;
}

/***********************************
**
**	NAVIGATION
**
***********************************/

#navigationContent {
    background-color: rgba(0, 0, 0, 0.7);
    width: 75%;
}

.navigationArea {
}

.navigationArea ul {
    list-style: none;
}

.navigationArea ul li {
    color: #ffffff;
    border-bottom: 1px solid #666666;
}

.navigationArea ul li i {
    width: 23px;
    color: #ffffff;
    font-size: 14px;
    margin-right: 8px;
    border-right: 2px solid #666666;
}

.navigationArea ul li a {
    color: #ffffff;
    padding: 10px;
    display: block;
}

/**************************************************
**
**	INDEX
**	-----------------------------------------------
**	ENTER / ENTRY
**
***************************************************/

#fullWideView {
}

#indexArea {
}

#enterButton {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 80px;
    margin: auto;
    width: 200px;
    height: 50px;
    text-align: center;
    z-index: 1;
}

#enterButton a {
    display: block;
}

#enterButton img {
    width: 100%;
}

#enterFooter {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto;
    height: 50px;
    text-align: center;
    display: table;
    z-index: 1;
}

#enterFooter ul {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: table-row;
    clear: both;
}

#enterFooter ul li {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    display: table-cell;
}

#enterFooter ul li a {
    display: block;
}

#enterFooter ul li img {
    width: 100%;
    vertical-align: middle;
}

/**************************************************
**
**	CONTENTS
**	-----------------------------------------------
**	CONTENTS SETTING
**
***************************************************/

.pageTitle {
    position: relative;
    top: 0;
    width: 100%;
    height: 6%;
    font-size: 130%;
    font-weight: normal;
    text-align: center;
    line-height: 250%;
    border-bottom: 1px solid #000;
    background-color : var(--tittle-bg-color);
    z-index: 6;
}


.topMargin {
    --top-margin : 2%;
    height: var(--top-margin);
}

.pageTitle.noFixed {
    position: static;
    z-index: 1;
}

.pageTitle i {
    color: #0099ff;
    margin-right: 8px;
}

.pageTitle .error i {
    color: #ff0000;
}

/*.pageTitle section {
    width: 100%;
    display: table;
}

.pageTitle section ul {
    display: table-row;
}

.pageTitle section ul li {
    width: 33%;
    vertical-align: middle;
    display: table-cell;
}

.pageTitle p {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

.pageTitle a {
    z-index: 2;
}

.pageTitle .left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 30%;
    height: auto;
    text-align: right;
}

.pageTitle .left a {
    position: absolute;
    top: 0;
    left: 5px;
    bottom: 0;
    margin: auto;
    background-color: #0099ff;
    max-width: 100%;
    height: 18px;
    color: #ffffff;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
    padding: 3px 8px 3px 8px;
    border-radius: 20px;
    display: inline-block;
}

.pageTitle .left a i {
    color: #ffffff;
    margin-right: 3px;
}

.pageTitle .right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 30%;
    height: auto;
    text-align: right;
}

.pageTitle .right a {
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    margin: auto;
    background-color: #0099ff;
    max-width: 100%;
    height: 18px;
    color: #ffffff;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
    padding: 3px 8px 3px 8px;
    border-radius: 20px;
    display: inline-block;
}

.pageTitle .right a i {
    color: #ffffff;
}*/

/**************************************************
**
**	TAB
**	-----------------------------------------------
**	TAB SETTING
**
***************************************************/

.tabArea {
    width: 100%;
    height: 5%;
    list-style: none;
    display: flex;
    flex-direction: row;
}

.tab {
    --charactor-tab-bg-color : #eeeeee;
    --charactor-tab-color : linear-gradient(to top,#ffffff  96%, #eeeeee 100%);
    --charactor-tab-border : 1px;

    position: relative;
    background-color: var(--charactor-tab-bg-color);
    width: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    list-style: none;

    border-top: var(--charactor-tab-border) solid #000;
    border-right: var(--charactor-tab-border) solid #000;
    border-bottom: var(--charactor-tab-border) solid #000;

    -webkit-border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
}


[data-tab-type = "出会い"] {
    --charactor-tab-bg-color : #a29df9;
    --charactor-tab-color : linear-gradient(to top,#cfccfc  99%, var(--charactor-tab-bg-color) 99%);
}

[data-tab-type = "恋人/結婚"] {
    --charactor-tab-bg-color : #96e6ff;
    --charactor-tab-color : linear-gradient(to top,#bfefff  99%, var(--charactor-tab-bg-color) 99%);
}

[data-tab-type = "イベント"] {
    --charactor-tab-bg-color : #f1a3ee;
    --charactor-tab-color : linear-gradient(to top,#f7c8f6  99%, var(--charactor-tab-bg-color) 99%);
}

.tab a {
    color: #555555;
    text-align: center;
    display: block;
}

.tab img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 1px;
    display: inline-block;
}

.tabArea .selected {
    background-color: var(--charactor-tab-bg-color);
    border-bottom: unset;
}

/**************************************************
**
**	FRAME
**	-----------------------------------------------
**	FRAME SETTING
**
***************************************************/

.frameList {
    width: 90%;
    position: relative;
    display: block;
    margin: 0 auto 20px;
    padding: 0;
    display: table;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
}

.frameList.fullWidth {
    width: calc(100% - 2px);
}

.frameList ul {
    position: relative;
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: table-row;
    clear: both;
}

.frameList ul.space {
    height: 15px;
}

.frameList ul li {
    background-color: #ffffff;
    vertical-align: middle;
    margin: 0px 0px 20px;
    padding: 8px 8px 8px 16px;
    display: table-cell;
    color: #555555;
    text-align: left;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.frameList ul li.title {
    background-color: #e6e7eb;
    width: 110px;
    max-width: 250px;
    color: #555555;
}

.frameList ul li.subject {
    background-color: #e6e7eb;
    color: #555555;
}

/**************************************************
**
**	TOGGLE LIST
**	-----------------------------------------------
**	TOGGLE SETTING
**
***************************************************/

.toggleList {
}

.toggleList ul {
    margin: 0px;
    padding: 0px;
    border-top: 1px solid #cccccc;
    list-style: none;
}

.toggleList ul li {
    padding: 10px;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.toggleList ul li a {
    color: #555555;
    display: block;
}

.toggleTitle {
    background: linear-gradient(#ffffff, #efefef);
}

.toggleTitle a {
    color: #555555;
    display: block;
}

.toggleContents {
    /* display: none; */
}

/**************************************************
**
**	FORM
**	-----------------------------------------------
**	FORM SETTING
**
***************************************************/

.formList {
    margin: 0 auto;
}

.formList ul {
    margin: none;
    padding: none;
    list-style: none;
}

.formList ul li {
    margin: 0px 0px 15px;
    padding: 0;
    border: none;
    list-style: none;
    clear: both;
}

.formList ul li.subject {
    background-image: url("/images/layout/icon/icon.png");
    background-repeat: no-repeat;
    background-size: 30px 19px;
    font-size: 14px;
    margin-bottom: 10px;
    padding: 1px 0px 3px 30px;
}

.formList ul li.subject span {
    font-size: 80%;
}

.formList ul li i {
}

.formList ul li.subTitle {
    color: #888888;
    margin: 0 0 8px;
}

.formList ul li.content {
    background-color: #ffffff;
    padding: 15px 0 15px 6px;
}

.formList ul li p.left {
    background-color: #66ccff;
    width: 15%;
    color: #ffffff;
    text-align: center;
    float: left;
}

.formList ul li p.left i {
    color: #ffffff;
    height: 50px;
    font-size: 150%;
    line-height: 50px;
}

.formList ul li p.right {
    width: 85%;
    text-align: left;
    float: right;
}

.formList ul li p.rights {
    width: 85%;
    height: 50px;
    text-align: left;
    line-height: 50px;
    float: right;
}

.formList ul li input {
    padding: 10px;
    height: 50px;
    line-height: 50px;
}

.formList ul li p.right input {
    border-radius: 0px;
}

.formList ul li span {
    font-size: 90%;
}

.formList ul li span.error {
    padding: 0px;
}

.formNotice {
    color: #666666;
    font-size: 80%;
    text-align: right;
    padding: 0px 0px 8px;
}

.formList textarea {
    margin: 0px;
}

.labelList label {
    margin: 5px 10px 5px 0px;
}

.radioList {
    text-align: center;
}

.radioList label {
    margin-right: 15px;
}

/**************************************************
**
**	LIST LINE
**	-----------------------------------------------
**	LIST LINE SETTING
**
***************************************************/

.listLineArea {
    --list-line-width : 100%;
    --list-line-height : 100%;
    --list-line-border-top : 0;
    --list-line-border-bottom : 0;

    width: var(--list-line-width);
    height: var(--list-line-height);
    margin: 0% 3% 0% 3%;
    border-top: var(--list-line-border-top);
    border-bottom: var(--list-line-border-bottom);
}

.listLineItemText {
    --name-title-color : #FF3366;
    --name-margin : 2% 0% 0% 2%;

    color: var(--name-title-color);
    margin: var(--name-margin);
}

.listLineArea ul {
    position: relative;
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: table-row;
    clear: both;
}

.listLineArea ul li.selectLine {
    padding: 10px;
    font-size: 14px;
}

.listLineArea ul li.thumbnail {
    width: 80px;
}

.listLineArea img {
    height: 94%;
    width : 100%;
    margin: 3%;
}

.listScreen {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.65);
    width: 101%;
    height: 77%;
    text-align: center;
    z-index: 3;
}

.listScreen i {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    color: #ffffff;
    font-size: 20px;
    display: inline;
}

.listScreen img {
    width: 100%;
}


[data-line-type="item-img"] {
    --list-line-width : 15%;
}

[data-line-type="presentbox-item-img"] {
    --list-line-width : 15%;
}

[data-line-text-type="presentbox"] {
    --name-title-color: #000;
    --name-margin: 4% 0% 0% 2%;
}


/**************************************************
**
**	ARROW LINE
**	-----------------------------------------------
**	ARROW LINE SETTING
**
***************************************************/

.listLine {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #cccccc;
}

.listLine a {
    color: #555555;
    display: block;
}

.listLine p {
    padding: 10px;
}

.listLine a i {
    width: 15px;
    color: #0099ff;
    margin-right: 10px;
}

/**************************************************
**
**	ARROW LINE
**	-----------------------------------------------
**	ARROW LINE SETTING
**
***************************************************/

.arrowLine {
    --arrow-angle: 45deg;
    --arrow-pos-right : 7px;
    --arrow-bg-color : none;

    position: relative;
    width: 100%;
    border-bottom: 1px solid #000;
    background: var(--arrow-bg-color);
}

.arrowLine:hover {
    --arrow-bg-color : linear-gradient(to right, #ffffff00, #00000026);
}

.arrowLine::before {
    position: absolute;
    top: 0;
    right: var(--arrow-pos-right);
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background:#edeef2;
    text-align: center;
    border-radius: 50%;
    content: "";
    z-index: 1;
    pointer-events: none;
}

.arrowLine::after {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    border-right: 2px solid #000000;
    border-top: 2px solid #000000;
    border-radius: 2px;
    content: "";
    transform: rotate(var(--arrow-angle));
    -webkit-transform: rotate(var(--arrow-angle));
    transition: transform 0.3s ease;
    z-index: 2;
    pointer-events: none;
}
.arrowLine.rotated {
    --arrow-angle: calc(45deg + 90deg);
    --arrow-pos-right : 9px;
    --arrow-bg-color : linear-gradient(to right, #ffffff00, #00000026);
}

.arrowLine a {
    color: #555555;
    display: block;
}

.arrowLine p {
    width: calc(100% - 60px);
    padding: 10px;
}

.toggleContents {
    background-color: #efefef;
    border-bottom: 1px solid #cccccc;
    display: none;
}

.toggleContents p {
    padding: 10px;
}

/**************************************************
**
**	LIST LINE
**	-----------------------------------------------
**	LIST LINE SETTING
**
***************************************************/

.listBoxArea {
    position: relative;
    width: calc(100% - 2px);
    display: table;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: 8px;
}

.listBoxArea ul {
    position: relative;
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: table-row;
    clear: both;
}

.listBoxArea ul li {
    vertical-align: top;
    padding: 5px;
    display: table-cell;
}

.listBoxArea ul li.thumbnail {
    width: 80px;
}

.listBoxArea ul li.thumbnail img {
    border: 1px solid #eeeeee;
}

/**************************************************
**
**	BOX
**	-----------------------------------------------
**	BOX
**
***************************************************/

.mainBox {
    --box-padding : 1%;
    --box-width : 100%;
    --box-height :100%;

    height: var(--box-height);
    width: var(--box-width);
    padding: var(--box-padding);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    overflow: hidden;
}

[data-main-box-type="shopMain"] {
    --box-padding : 0%;
    --box-width : 100%;
    --box-height :100%;
}

.boxColumns {
    --box-columns-width : 100%;
    --box-columns-height :100%;

    --box-columns-border-top : 0;
    --box-columns-border-bottom : 0;

    --box-columns-margin : 0;

    --the-box-column-width : 50%;
    --the-box-column-height : none;
    --the-box-column-margin : 0;

    --the-box-column-img-width : 100%;
    --the-box-column-img-bor-rad : 60px;
    --the-box-column-img-bg-col : #e0e1d1;

    --flex-flow-type : row wrap;
    --overflow-type : auto;

    width: var(--box-columns-width);
    height: var(--box-columns-height);

    border-top: var(--box-columns-border-top);
    border-bottom: var(--box-columns-border-bottom);

    margin: var(--box-columns-margin);
    display: flex;
    flex-shrink: 0;
    flex-flow: var(--flex-flow-type);
    justify-content: flex-start;
    overflow-y: var(--overflow-type);
    overflow-x: hidden;
    scrollbar-width: none;
}

.boxColumns::-webkit-scrollbar {
  display: none;
}


.boxColumn {
    position: relative;
    width: var(--the-box-column-width);
    height: var(--the-box-column-height);
    margin: var(--the-box-column-margin);
}

.presentboxColumn {
    position: relative;
    width: var(--the-box-column-width);
    height: 94%;
    border-bottom: 1px solid #000;
    display: flex;
    flex-direction :var(--flex-flow-type);
    overflow: hidden;
}

.boxColumn a {
    width: 100%;
    margin: 0;
}

.boxColumn img {
    width: var(--the-box-column-img-width);
    border-radius: var(--the-box-column-img-bor-rad);
    background-color: var(--the-box-column-img-bg-col);
}



.boxColumn .badge {
    z-index: 3;
}

.box2Column {
    position: relative;
    width: 50%;
    padding: 0px;
}

.box2Column p img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #000;
}

.box4Column {
    position: relative;
    width: 25%;
    padding: 0px;
}

.box4Column p img {
    width: 100%;
    border-radius: 8px;
}

.box5Column {
    position: relative;
    width: 20%;
    padding: 0px;
}

.box5Column p img {
    width: 100%;
    border-radius: 8px;
}

.boxColumnScreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.65);
    width: 101%;
    height: 100%;
    border-radius: 8px;
    z-index: 1;
}

.boxColumnScreen span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.4);
    width: 60px;
    height: 16px;
    line-height: 16px;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    display: inline-block;
}

[data-box-type="gachaFavorite"] {
    --box-columns-width: 98%;
    --box-columns-height: 98%;
    --flex-flow-type : row wrap;
    --box-columns-margin : 1%;
}

[data-box-type="albumColumns"] {
    --box-columns-width: 100%;
    --box-columns-height: 83%;
    --flex-flow-type : row wrap;
    --the-box-column-margin: 0% 4% 4% 4%;
    --the-box-column-width: 42%;

}

[data-box-type="albumSelectColumns"] {
    --box-columns-height :17%;
    --the-box-column-width : 25%;
    --flex-flow-type : row wrap;
    --box-padding : 0%;
}

[data-box-type="shopBoxColimns"] {
    --box-columns-height: 94%;
}

[data-box-type="shopLineBox"] {
    --box-columns-width : 95%;
    --box-columns-height: 12%;

    --box-columns-border-bottom : 1px solid #000;

    --the-box-column-width : 15%;
    --box-columns-margin : 0 3% 0 3%;

    --flex-flow-type : row wrap;
    --overflow-type : auto;
}

[data-box-type="presentBoxLineBox"] {
    --box-columns-width: 94%;
    --box-columns-height: 28%;
    --box-columns-border-bottom: none;
    --the-box-column-width: 100%;
    --box-columns-margin: 0 0% 0 3%;
    --flex-flow-type: row wrap;
    --overflow-type: hidden;
}

[data-box-type="presentBoxLines"] {
    --box-columns-width: 100%;
    --box-columns-height: 80%;
    --box-columns-border-bottom: none;
    --the-box-column-width: 100%;
    --box-columns-margin: 0 0% 0 0%;
    --flex-flow-type: column nowrap;
    --overflow-type: auto;
}

[data-box-type="itemBox"] {
    --the-box-column-width: 22%;
    --the-box-column-height: 43%;
    --the-box-column-margin: 0 1%;
}


[data-box-type="shopLineItems"] {
    --box-columns-width: 85%;
    --box-columns-height: 100%;
    --box-columns-margin: 0 0% 0 0%;
    --flex-flow-type: column nowrap;
    --overflow-type: hidden;
}



[data-box-type="shopHeaderColumns"] {
    --box-columns-height : 10%;
    --box-padding : 0%;
}

[data-box-type="shopMainColumns"] {
    --box-columns-height : 90%;
    --the-box-column-width : 100%;
    --box-padding : 0%;
}

[data-box-type="pointArea"] {
    --box-columns-height: 70%;
    --the-box-column-width: 100%;
    --flex-flow-type: column nowrap;
    --overflow-type: hidden;
}

[data-box-type="mainPointArea"] {
    --the-box-column-height: 70%;

}

[data-box-type="PointArea"] {
    --flex-flow-type: coliumn nowrap;
    --overflow-type: hidden;
    --the-box-column-img-width: 60%;
    --the-box-column-img-bor-rad: 35px;
    --the-box-column-img-bg-col: none;
}

[data-box-type="PointbuttonArea"] {
    --overflow-type: hidden;
    --the-box-column-height: 30%;
}
/**************************************
**
**	BUTTON
**
**************************************/

#allSwitchButton {
    position: absolute;
    top: 0;
    left: 8px;
    width: 80px;
    height: 30px;
    background-color: #ffffff;
    text-align: center;
    border: 1px solid #cccccc;
    border-radius: 20px;
}

.normalButton {
    background: linear-gradient(#0099ff, #66ccff);
    min-width: 150px;
    max-width: 300px;
    color: #ffffff;
    font-size: 120%;
    text-align: center;
    letter-spacing: 0.3em;
    margin: 0px auto 20px;
    padding: 10px 15px 10px 15px;
    border-radius: 20px;
    display: inline-block;
    clear: both;
}

.largeButton {
    background: linear-gradient(#0099ff, #66ccff);
    width: 250px;
    height: 50px;
    color: #ffffff;
    font-size: 120%;
    text-align: center;
    letter-spacing: 0.3em;
    line-height: 50px;
    margin: 15px auto 15px;
    border-radius: 25px;
    display: block;
    clear: both;
}

.middleButtonArea {
    --bottom-bar : 1px solid #000;
    width: 94%;
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 3%;
    border-bottom: var(--bottom-bar);
}

.middleButton {
    background: none;
    width: 40%;
    height: 50%;
    color: #ffffff;
    font-size: 120%;
    text-align: center;
    letter-spacing: 0.3em;
    line-height: 40px;
    margin: 10px auto 10px;
    border-radius: 8px;
    display: block;
    clear: both;
}

.editButton {
    background: linear-gradient(#0099ff, #66ccff);
    width: 250px;
    height: 50px;
    color: #ffffff;
    font-size: 120%;
    text-align: center;
    letter-spacing: 0.3em;
    line-height: 50px;
    margin: 15px auto 15px;
    border-radius: 25px;
    display: block;
    clear: both;
}

.dialogButton {
    background: linear-gradient(#0099ff, #66ccff);
    min-width: 150px;
    max-width: 300px;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.3em;
    margin: 0px auto 20px;
    padding: 10px 15px 10px 15px;
    border-radius: 20px;
    display: block;
    clear: both;
}

.boxButton {
    background: linear-gradient(#ffffff, #eeeeee);
    width: 85%;
    height: 50px;
    color: #555555;
    font-size: 120%;
    text-align: center;
    letter-spacing: 0.3em;
    line-height: 50px;
    margin: 0px auto 15px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    display: block;
    clear: both;
}

.frameButton {
    display: inline-block;
}

.frameButton a {
    background-color: #0099ff;
    height: 30px;
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    line-height: 30px;
    margin: 0 8px;
    padding: 0 10px 0 10px;
    border: 0px;
    border-radius: 60px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: inline-block;
}

.frameButton {
    display: inline-block;
}

.fixedRightButtonArea {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0px;
    width: 90px;
    height: 30px;
    text-align: center;
}

.centerCircleButton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 150px;
    height: 150px;
    text-align: center;
    border-radius: 150px;
    overflow: hidden;
    z-index: 1;
}

.bottomCircleButton {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20%;
    margin: auto;
    width: 150px;
    height: 150px;
    text-align: center;
    border-radius: 150px;
    overflow: hidden;
    z-index: 1;
}

.buttonTopLeft {
    position: absolute;
    top: 15px;
    left: 15px;
    margin: 0px;
    display: inline-block;
}

.buttonTopLeft a {
    margin: 0px;
}

.buttonTopRight {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0px;
    display: inline-block;
}

.buttonTopRight a {
    margin: 0px;
}

.linkButton {
    --lin-bottun-rad : 5px;
    margin-left: auto;
    margin-right: auto;
}

.linkButton a {
    color: #000000;
    background: #8ef695;
    border: 1px solid #000;
    border-radius: var(--lin-bottun-rad );
    display: block;
}

.linkButton img {
    width: 100%;
}

.linkButton a .small {
    font-size: 80%;
    letter-spacing: 0.1em;
}

.linkWhite a {
    color: #ffffff;
}

.linkBlack a {
    color: #555555;
}

.linkButton.noMargin {
    margin-bottom: 0px;
}

[data-bottun-type="point"] {
    --lin-bottun-rad : 50px;
}

/**************************************
**
**	PAGENATION
**
**************************************/

.pagination {
    position: absolute;
    bottom: 0%;
    left: 5%;
    width: 90%;
    margin: 15px auto;
}

.pagination ul {
    width: 100%;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
}

.pagination ul li {
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    text-align: center;
    line-height: 25px;
    margin: 0px 5px 10px 5px;
    border-radius: 5px;
    display: block;
}

.pagination ul li.allow {
    width: 40px;
}

.pagination ul li.last {
    width: 40px;
}

.pagination ul li a {
    background-color: #0099ff;
    color: #ffffff;
    border-radius: 5px;
    display: block;
}

.pagination ul li i {
    height: 25px;
    line-height: 25px;
}

.pagination ul li span {
    background-color: #999999;
    color: #ffffff;
    border-radius: 5px;
    display: block;
}

/***********************************
**
**	SCROLLING STOP
**
***********************************/

.stopScrolling {
    height: 100%;
    overflow: hidden;
}

/**************************************************
**
**	OPTION
**	-----------------------------------------------
**	OPTION SETTING
**
***************************************************/

.relative {
    position: relative;
}

.static {
    position: static;
}

.frontUp {
    z-index: 999;
}

.clear {
    display: block;
    clear: both;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.inline {
    display: inline-block;
    vertical-align: middle;
}

.fade {
    display: none;
}

.flex {
    display: flex;
}

.flexCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexLeft {
    display: flex;
    justify-content: flex-start;
}

.flexRight {
    display: flex;
    justify-content: flex-end;
}

.flextSpace {
    display: flex;
    justify-content: space-around;
}

.flexWrap {
    flex-wrap: wrap;
}

/**************************************
**
**	AUDIO
**
**************************************/

.audioButtonArea {
    position: absolute;
    top: 5px;
    right: 5px;
    /* background-color: #333333; */
    width: 25px;
    height: 25px;
    color: #333333;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    border-radius: 30px;
    z-index: 10;
}

.audioButtonArea audio {
    display: none;
}

.audioButtonArea a {
    color: #555555;
    display: block;
}

.audioButtonArea a i {
    color: #555555;
    line-height: 25px;
    font-size: 18px;
}

/**************************************************
**
**	ORIGN STYLE
**	-----------------------------------------------
**	COMMON
**
***************************************************/

.contentsFrame {
    background-color: #ffffff;
    width: 90%;
    line-height: 130%;
    margin: 15px auto 15px;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    clear: both;
    word-wrap: break-word;
}

.nameBox {
    background-color: #0099ff;
    color: #ffffff;
    padding: 5px;
    border-radius: 10px;
    display: inline-block;
}

.priceBox {
    /*
	background-color: #FF3366;
	color: #FFFFFF;
	*/
    background-color: #ffa800;
    color: #111111;
    min-width: 100px;
    max-width: 300px;
    font-size: 16px;
    text-align: center;
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    display: inline-block;
}

.textBox {
    padding: 5px;
    border: 1px solid #ececec;
    border-radius: 7px;
}

.textBoxLarge {
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 7px;
}

.noticeBox {
    background-color: #eeeeee;
    font-size: 12px;
    color: #333333;
    margin: 10px auto;
    padding: 8px;
    border-radius: 10px;
}

.noticeBox .readonly {
    height: 30px;
    padding: 5px;
}

.categoryBox {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #888888;
    min-width: 50px;
    color: #ffffff;
    font-size: 80%;
    text-align: center;
    padding: 5px;
    border-radius: 10px;
    display: inline-block;
}

.scrollBox {
    position: relative;
    width: calc(100% -2px);
    height: 180px;
    border: 1px solid #ececec;
    border-radius: 7px;
    overflow-y: auto;
}

.scrollBox p {
    padding: 8px;
}

.detailBox {
}

.detailBox p {
    padding: 10px;
}

.detailBox img {
    width: 100%;
}

.detailTitle {
    background-color: #eeeeee;
    font-size: 14px;
    line-height: 130%;
    padding: 10px;
}

.pointName {
    font-size: 14px;
    color: #777777;
}

.pointBox {
    color: #777777;
}

.pointBox span {
    font-size: 16px;
}

.notice {
}

#birthday {
    position: relative;
    width: 100%;
    height: 55px;
}

#birthday p {
    width: 30%;
}

#birthday p#left {
    position: absolute;
    top: 0;
    left: 0;
}

#birthday p#center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#birthday p#right {
    position: absolute;
    top: 0;
    right: 0;
}

.passwordArea {
    position: relative;
}

.displayPassword {
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    background-color: #0099ff;
    border-radius: 5px;
}

.displayPassword a {
    color: #ffffff;
    line-height: 30px;
    display: block;
}

.displayPassword i {
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
}

/**************************************************
**
**	ORIGN STYLE
**	-----------------------------------------------
**	SHOP
**
***************************************************/

#ageAuthComment {
    color: #ff3366;
    font-size: 120%;
    text-align: center;
    padding: 10px;
}

#ageAuthContents {
    position: relative;
    padding: 10px;
}

#ageAuthContents img {
    width: 100%;
}

#ageAuthButton {
    padding: 10px;
}

#ageAuthButton a {
    width: 100%;
    display: block;
}

#ageAuthNo {
    background-color: #ffffff;
    width: 30%;
    height: 65px;
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    line-height: 65px;
    text-align: center;
    text-shadow: 1px 1px 3px #ccc;
    border: 1px solid #999999;
    border-radius: 15px;
    float: left;
}

#ageAuthYes {
    background-color: #ff6699;
    width: 65%;
    height: 65px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    line-height: 65px;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    border: 1px solid #ff3366;
    border-radius: 15px;
    float: right;
}

#ageAuthYes a {
    color: #ffffff;
}

.defImage {
    width: 100px;
    margin: 0 auto 15px;
}

.defImage img {
    width: 100%;
}

.defText {
    width: 70%;
    text-align: center;
    line-height: 160%;
    margin: 0 auto 15px;
}

.defText p {
    margin-bottom: 10px;
}

.flowChart {
}

.flowChart ul {
    margin: 0;
    padding: 10px 0 0 0;
    border: none;
    list-style: none;
    display: table;
    table-layout: fixed;
}

.flowChart ul li {
    display: table-cell;
    vertical-align: middle;
}

.flowImage {
    width: 80px;
}

.flowImage img {
    width: 90%;
    margin: 0 auto;
}

.flowContents {
    font-size: 90%;
    text-align: left;
}

.flowContents p {
    color: #0099ff;
    margin-bottom: 0px;
}

/**************************************************
**
**	IMAGE
**	-----------------------------------------------
**	IMAGE / THUMBNAIL
**
***************************************************/

.image img {
    width: 100%;
}

.thumbnail img {
    width: 100%;
}

.icon img {
    width: 100%;
}

.displayImage {
    width: 100px;
}

.displayThumbnail {
    width: 80px;
}

.displayIcon {
    width: 80px;
    border-radius: 50%;
    overflow: hidden;
}

.bannerList {
    position: absolute;
    width: 100%;
    height: 87%;
    margin: 0 auto;
    background: var(--charactor-tab-color);
}

.bannerListArea {
    position: relative;
    top: 2%;
    width: 100%;
    height: auto;
    max-height: 87%;
    padding-top: 5%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-flow: row wrap;
}

.bannerListArea::-webkit-scrollbar {
  display: none;
}


.banner {
    --banner-width : 100%;
    --banner-height : 100%;
    --banner-margin : 0;

    --banner-main-border-top : 2px;
    --banner-main-border-bottom : 2px;
    --banner-main-border-left : 2px;
    --banner-main-border-right : 2px;
    --banner-border-rad-px : 0;

    width: var(--banner-width);
    height: var(--banner-height);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin : var(--banner-margin)
}

.banner img {
    width: 100%;
    height: 100%;
    border-top: var(--banner-main-border-top) solid #000;
    border-bottom: var(--banner-main-border-bottom) solid #000;
    border-left: var(--banner-main-border-left) solid #000;
    border-right: var(--banner-main-border-right) solid #000;
    border-radius: var(--banner-border-rad-px);
}

.bannerNoMargin {
    position: relative;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.bannerNoMargin img {
    width: 100%;
}

.bannerMiddle {
    position: relative;
    width: 80%;
    margin: 0 auto 10px;
}

.bannerMiddle img {
    width: 100%;
}

[data-banner-type = "borderNone"] {
    --banner-main-border-top: 0;
    --banner-main-border-bottom: 0;
    --banner-main-border-left: 0;
    --banner-main-border-right: 0;
}

[data-banner-type = "shopBuyBanner"] {
    --banner-height : 56%;
    --banner-margin: 0% 3% 0% 3%;
    --banner-main-border-top: 0;
    --banner-main-border-bottom: 1px;
    --banner-main-border-left: 0;
    --banner-main-border-right: 0;
}

[data-banner-type = "homeBanner"] {
    --banner-height : none;
    --banner-border-rad-px : 1px;
}

[data-banner-type = "talkeBanner"] {
    --banner-main-border: 2px;
    --banner-width : 94%;
    --banner-height : 25%;
    --banner-border-rad-px: 11px;
    --banner-margin : 0% 0% 0% 3%;
}

[data-banner-type="selectCharacter"] {
    --banner-main-border: 2px;
    --banner-width:46%;
    --banner-height: 20%;
    --banner-border-rad-px: 11px;
    --banner-margin: 0% 0% 3% 3%;
}

.photoFrame {
    position: relative;
    width: 80%;
    vertical-align: middle;
    margin: 0 auto 10px;
    padding: 3px;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}

.photoFrame p {
    margin: 0px;
}

.photoFrame p a {
    position: relative;
    display: block;
    height: 90px;
    overflow: hidden;
}

.photoFrame p a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px;
    width: 100%;
}

.photoFrame p a span {
    background-color: #000000;
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 10px;
    color: #ffffff;
    text-align: center;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

.photoFrame p a .allScreen {
    height: 100%;
    line-height: 90px;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

.photoFrame p label {
    position: absolute;
    top: 8px;
    left: 0px;
    background-color: #ffffff;
    z-index: 3;
}

.photoFrame p .labelScreen {
    position: absolute;
    top: -1px;
    left: 0px;
    background-color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    z-index: 2;
}

.absoluteImageArea {
    position: relative;
    border: 1px solid #ff0000;
}

.absoluteImageArea img {
    position: relative;
    width: 100%;
    z-index: 1;
}

/**************************************************
**
**	OTHER
**	-----------------------------------------------
**	COMMON ITEM
**
***************************************************/

.badge {
    position: absolute;
    top: 2px;
    right: -3px;
    background-color: #000000;
    width: 24px;
    height: 24px;
    color: #ffffff;
    text-align: center;
    line-height: 23px;
    border-radius: 100%;
}

.tab .badge {
    top: -12px;
    right: -5px;
}

.badge.mini {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 8px;
}

.date {

    position: absolute;
    right: 1%;
    color: #908bda;
    text-align: center;
    font-size: 14px;
    padding: 5px;
    border-radius: 10px;
    display: inline;
}

.dateTitle {
    color: #0099ff;
    padding-bottom: 5px;
    display: inline-block;
}

.price {
    /* position: absolute;
    top: 3px;
    right: 5px; */
    /*
	background-color: #FF3366;
	color: #FFFFFF;
	*/
    /* background-color: #ffa800;
    color: #111111;
    height: 15px;
    text-align: center;
    padding: 5px;
    border-radius: 10px;
    display: inline; */

    color: #FFFFFF;
	font-weight: bold;
	font-size: 15px;
	padding: 1em 0 1em 0;
	border-radius: 4px;
	margin: 0 0.2em;
	background-image: url(/images/layout/button/button-shoplist.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
}

.name {
}

/**************************************************
**
**	SNS
**
***************************************************/

#snsLoginArea {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

#snsButtonArea {
    padding: 15px;
    text-align: center;
}

#googleButtonArea {
    text-align: center;
    margin: 0 auto 20px;
    padding: 0px;
}

#googleButton {
    width: 250px;
    margin: 0 auto;
}

#twitterArea {
    margin: 2% 0 0 4%;
    padding: 10px;
    height: 45px;
    width: 45px;
    border: 1px solid #000;
    border-radius: 5px;
    background-color: #333333d6;
}

#twittereButtonArea {
    text-align: center;
    margin: 0 auto 20px;
    padding: 0px;
}

.twitterButton {
    width: 250px;
    height: 40px;
    display: block;
    text-align: left;
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dadce0;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    line-height: 40px;
    color: #3c4043;
    text-align: center;
    margin: 0 auto;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.twitterButton::before {
    position: absolute;
    display: block;
    content: "";
    background: url(/images/layout/icon/twitter.png) no-repeat 0 0;
    background-size: 24px auto;
    width: 24px;
    height: 24px;
    top: 8px;
    left: 10px;
}

.twitterButton span {
    letter-spacing: 0.25px;
    padding-left: 30px;
    color: #3c4043;
}

.twitterButton a {
    text-decoration: none;
}

/**************************************************
**
**	EXECUTION
**
***************************************************/

#execution {
    background-color: #99ff99;
    width: 80%;
    color: #00cc00;
    font-size: 18px;
    font-size: bold;
    text-align: center;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    padding: 30px 20px 30px 20px;
    border: 1px solid #99ff99;
    border-radius: 10px;
    line-height: 30px;
    word-wrap: break-word;
}

#execution p {
    background-color: #cccccc;
    color: #555555;
    text-align: center;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 30px;
}

/**************************************************
**
**	NO CONTENTS
**
***************************************************/

.noContents {
    position: relative;
    background-color: #ebecf0;
    width: 80%;
    min-height: 150px;
    color: #000000;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 10px;
    word-wrap: break-word;
}

.noContents p {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: auto;
    text-align: center;
    padding: 5px;
    border-radius: 8px;
    display: inline;
}

.noContentsList {
    position: relative;
    height: 100%;
}

.noContentsList p {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    background-color: #cccccc;
    width: 90%;
    text-align: center;
    padding: 5px;
    border-radius: 8px;
    display: inline;
}

/**************************************************
**
**	WARNING
**
***************************************************/

#warningArea {
    position: relative;
    width: 100%;
    height: 100%;
}

.warning {
    background-color: #444444;
    width: 80%;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    padding: 30px 20px 30px 20px;
    border-radius: 10px;
    line-height: 30px;
    word-wrap: break-word;
}

.warning p {
    background-color: #888888;
    color: #ffffff;
    text-align: center;
    margin-top: -15px;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 10px;
}

/**************************************************
**
**	NOT FOUND
**
***************************************************/

#notFoundArea {
    position: relative;
    width: 100%;
    height: 95%;
}

#notFound {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #444444;
    width: 80%;
    height: 200px;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    border-radius: 10px;
    line-height: 30px;
    word-wrap: break-word;
}

#notFound p {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 90%;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    display: inline;
}

/**************************************************
**
**	DEBUG
**
***************************************************/

.showDebugButton {
    display: none;
}


/**************************************************
**
**	ARROWS
**
***************************************************/

.arrowArea {
    --arrow-pos-bottom : 8%;
    --arrow-pos-left : 0%;
    --arrow-bg-to : to bottom;
    --arrow-padding : 0% 0% 0% 36%;
    --arrow-height : 9%;

    position: absolute;
    bottom: var(--arrow-pos-bottom);
    left: var(--arrow-pos-left);
    width: 100%;
    height: var(--arrow-height);
    background: linear-gradient(
      var(--arrow-bg-to),
      #ffffff00,
      #ffffffc7
    );
    padding: var(--arrow-padding);
    pointer-events: none;
}

/*下矢印 */
.arrow_down {
  position: relative;
  display: inline-block;
  width: 83.2px;
  height: 43.6px;
  pointer-events: none;
}

.arrow_down::before,
.arrow_down::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 20px;
  border-radius: 9999px;
  background-color: #000000a3;
  transform-origin: 50% calc(100% - 1px);
}

.arrow_down::before {
  transform: rotate(45deg);
}

.arrow_down::after {
  transform: rotate(-45deg);
}


/* 上矢印 */
.arrow_upper {
  position: relative;
  display: inline-block;
  width: 83.2px;
  height: 43.6px;
}

.arrow_upper::before,
.arrow_upper::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 20px;
  border-radius: 9999px;
  background-color: #00000094;
  transform-origin: 50% 1px;
}

.arrow_upper::before {
  transform: rotate(45deg);
}

.arrow_upper::after {
  transform: rotate(-45deg);
}


/* 左矢印　*/
.arrow_left {
  position: relative;
  display: inline-block;
  width: 43.6px;
  height: 83.2px;
}

.arrow_left::before,
.arrow_left::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 60px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: 1px 50%;
}

.arrow_left::before {
  transform: rotate(45deg);
}

.arrow_left::after {
  transform: rotate(-45deg);
}

/* 右矢印 */
.arrow_right {
  position: relative;
  display: inline-block;
  width: 43.6px;
  height: 83.2px;
}

.arrow_right::before,
.arrow_right::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 60px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: calc(100% - 1px) 50%;
}

.arrow_right::before {
  transform: rotate(45deg);
}

.arrow_right::after {
  transform: rotate(-45deg);
}

.closeBlack {
    position: absolute;
    top: 0px;
    right: 4%;
    width: 0%;
    height: 0%;
    font-size: 190%;
}

.closeBlack:hover {
  cursor: default;
}


[data-arrow-type="upper"] {
    --arrow-pos-bottom: 91%;
    --arrow-height : 8%;
    --arrow-pos-left: 0%;
    --arrow-bg-to: to top;
    --arrow-padding: 2% 0% 0% 36%;
}