@charset "utf-8";
/*　
    全体
    ・背景色：#edeaec
    ・文字色：#222222
    ・リンク：#C9ACE6
    ヘッダー部
    ・背景色：#edeaec
    ・リンク：#C9ACE6
    コンテンツ部
    ・背景色：#edeaec;
    コンテンツ部見出し
    ・背景色：#edeaec
    ・文字色：#C9ACE6
    フッター部
    ・背景色：#edeaec
    ・文字色：#222222
    ・リンク：#C9ACE6
    スクロールバー：#C9ACE6
*/

/*------------------------------------------------------------
    基礎部分
------------------------------------------------------------*/

/* ▼要素サイズ▼ */
* { /*  余白の指定を無効化し、要素内の余白でサイズが変わらないよう指定 */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::before, ::after { /* 疑似要素のサイズは対象の要素を継承 */
    box-sizing: inherit;
}
h1 { font-size:1.5em; }
h2 { font-size:1.3em; }
h3 { font-size:1.1em; }
h4 { font-size:1em; }
h5 { font-size:1em; }
h6 { font-size:1em; }
/* ▲要素サイズ▲ */

/* ▼要素の修飾削除▼ */
img {
    border: 0;
    height: auto;
    max-width: 100%;
}

input[type="submit"],
input[type="button"] {
    border: none;
}

/* displa:noneにするとTab＋Spaceで選択できないため透明に */
input[type="checkbox"],
input[type="radio"]{
    filter: alpha(opacity=0);
    -moz-opacity:0;
    opacity:0;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
}
input[type="checkbox"]:focus + label{
    box-shadow: 0 0 0 2px ;
}

    a.disabled {
        pointer-events: none;
    }

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    appearance: none;
}
/* ▲ 要素の修飾削除 ▲ */

/* ▼ 文字関連 ▼ */
html {
    font-size: 62.5%; /* コーディングのコストを落とすため1remのデフォルト値を16pxから10pxに変更 */
    -webkit-text-size-adjust: 100%; /* 画面の向きを変更しても文字サイズを変更しないよう変更 */
    scroll-behavior: smooth;
}

body, pre, address ,em {
    font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS P Gothic",Helvetica,Arial,sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    height: 100%;
    overflow-wrap: break-word; /* 右端で折り返し */
    word-break: break-word; /* 外字の際、なるべく単語の区切りで改行する */
}

input, label {
    font-size: 1.6rem;
}
/* ▲ 文字関連 ▲ */

/*------------------------------------------------------------
    レイアウト
------------------------------------------------------------*/
#layout_content_area {
    padding-left:10px;
    padding-right:10px;
}

#layout_footer_area {
    width: 100%;
    height: 25px;
}
/* コンテンツの最大幅と余白 */
.layout_container {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.layout_content {
    margin: 0 10px;
}

/* 大きい画面だけ二分割する場合 */
@media (min-width:480px) {
    .layout_half_left{
        float:left;
        width:50%;
    }
    .layout_half_right{
        float:left;
        width:50%;
    }
}

.float_parent:after, .float_parent:before{
	content: "";
	clear: both;
	display: block;
}

/*------------------------------------------------------------
     コンポーネント
------------------------------------------------------------*/
/* ▼ラジオボタン・チェックボックス▼ */
.component_checkbox + label,
.component_radio + label {
    padding-left: 30px;
    position: relative;
}

    .component_checkbox + label::before,
    .component_radio + label::before,
    .component_checkbox + label::after,
    .component_radio + label::after {
        content: '';
        display: block;
        position: absolute;
    }

    .component_checkbox + label::before,
    .component_radio + label::before {
        border: 1px solid;
        left: 0;
        height: 1.8rem;
        top: 4px;
        width: 1.8rem;
    }

    .component_checkbox + label::after,
    .component_radio + label::after {
        opacity: 0;
        transition: .3s;
    }


.component_checkbox:checked + label::after,
.component_radio:checked + label::after {
    opacity: 1;
}

.component_checkbox + label::after {
    border-bottom: 3px solid;
    border-right: 3px solid;
    height: 13px;
    left: 5px;
    top: 4px;
    transform: rotate(45deg);
    width: 8px;
}

.component_radio + label::before {
    border-radius: 50%;
}

.component_radio + label::after {
    border-radius: 50%;
    height: 14px;
    left: 3px;
    top: 3px;
    width: 14px;
}
/* ▲ラジオボタン・チェックボックス▲ */

/*------------------------------------------------------------
     汎用
------------------------------------------------------------*/
/* 要素間の余白調整 */
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80 { margin-top: 80px !important; }
.mt90 { margin-top: 90px !important; }
.mt100 { margin-top: 100px !important; }

.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }

.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }

.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }

.p5 { padding: 5px !important; }
.p10 { padding: 10px !important; }
.p20 { padding: 20px !important; }
.p30 { padding: 30px !important; }
.p40 { padding: 40px !important; }
.p50 { padding: 50px !important; }

.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt50 { padding-top: 50px !important; }

.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }

.pl5 { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }
.pl50 { padding-left: 50px !important; }

.pr5 { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }
.pr50 { padding-right: 50px !important; }

.w50 { width: 50px !important; }
.w75 { width: 50px !important; }
.w100 { width: 100px !important; }
.w150 { width: 150px !important; }
.w200 { width: 200px !important; }
.w250 { width: 250px !important; }
.w300 { width: 300px !important; }
.w350 { width: 350px !important; }
.w400 { width: 400px !important; }
.w450 { width: 450px !important; }
.w500 { width: 500px !important; }

.max_w100 { max-width: 100px !important; }
.max_w150 { max-width: 150px !important; }
.max_w200 { max-width: 200px !important; }
.max_w250 { max-width: 250px !important; }
.max_w300 { max-width: 300px !important; }
.max_w350 { max-width: 350px !important; }
.max_w400 { max-width: 400px !important; }
.max_w450 { max-width: 450px !important; }
.max_w500 { max-width: 500px !important; }

.min_w100 { min-width: 100px !important; }
.min_w150 { min-width: 150px !important; }
.min_w200 { min-width: 200px !important; }
.min_w250 { min-width: 250px !important; }
.min_w300 { min-width: 300px !important; }
.min_w350 { min-width: 350px !important; }
.min_w400 { min-width: 400px !important; }
.min_w450 { min-width: 450px !important; }
.min_w500 { min-width: 500px !important; }

.h100 { height: 100px !important; }
.h150 { height: 150px !important; }
.h200 { height: 200px !important; }
.h250 { height: 250px !important; }
.h300 { height: 300px !important; }
.h350 { height: 350px !important; }
.h400 { height: 400px !important; }
.h450 { height: 450px !important; }
.h500 { height: 500px !important; }

.max_h100 { max-height: 100px !important; }
.max_h150 { max-height: 150px !important; }
.max_h200 { max-height: 200px !important; }
.max_h250 { max-height: 250px !important; }
.max_h300 { max-height: 300px !important; }
.max_h350 { max-height: 350px !important; }
.max_h400 { max-height: 400px !important; }
.max_h450 { max-height: 450px !important; }
.max_h500 { max-height: 500px !important; }

.min_h100 { min-height: 100px !important; }
.min_h150 { min-height: 150px !important; }
.min_h200 { min-height: 200px !important; }
.min_h250 { min-height: 250px !important; }
.min_h300 { min-height: 300px !important; }
.min_h350 { min-height: 350px !important; }
.min_h400 { min-height: 400px !important; }
.min_h450 { min-height: 450px !important; }
.min_h500 { min-height: 500px !important; }

.w25per { width: 25% !important; }
.w10per { width: 10% !important; }
.w20per { width: 20% !important; }
.w30per { width: 30% !important; }
.w40per { width: 40% !important; }
.w45per { width: 45% !important; }
.w50per { width: 50% !important; }
.w60per { width: 60% !important; }
.w70per { width: 70% !important; }
.w80per { width: 80% !important; }
.w90per { width: 90% !important; }
.w100per { width: 100% !important; }

/* 文字揃え */
.ta_c { text-align: center !important; }
.ta_r { text-align: right !important; }
.ta_l { text-align: left !important; }

/* 回り込み */
.fl_l { float: left; }
.fl_r { float: right; }
.clear { clear: both; }

/* PC用の要素を目隠し */
.pc,
.pc.inline,
.pc.table-cell {
    display: none;
}

.sp {
    display: block;
}
    .sp.inline_block {
        display: inline-block;
    }

@media (min-width:480px) {
    .pc {
        display: block;
    }
        .pc.inline {
            display: inline;
        }
        .pc.table-cell{
            display: table-cell;
        }
    /* スマホ用の要素を目隠し */
    .sp,
    .sp.inline_block {
        display: none;
    }
}

.elm_displaynone,
.elm_chkstatus,
.elm_dispnone {
    display: none;
    font-size: 0;
}

.elm_block{
    display: block;
}
.elm_inlineblock{
    display: inline-block;
}

/* displa:noneにするとTab＋Spaceで選択できないため透明に */
.elm_chkstatus{
    filter: alpha(opacity=0);
    -moz-opacity:0;
    opacity:0;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
}

/*------------------------------------------------------------
    アニメーション
------------------------------------------------------------*/
#loading {
    position:absolute;
    background-color: #edeaec;
    width: 100vw;
    font-size: 6rem;
    z-index: 255;
    animation: loaded 2s forwards;
}
@media (max-width:959px) {
    #loading {
        display: none;
    }

}
@media (min-width:960px) {
    #loading {
        animation: loaded 2s forwards;
    }

    @keyframes loaded {
        0% {
            display: inherit;
        }
        100% {
          display: none;
        }
    }
}
.load_top_half{
    display: flex;
    align-items: end;
    background-color: #edeaec;
    color:#222222;
    height: 50vh;
}
.load_top_half .fadein_text{
    margin: 20px auto;
}

@media (min-width:960px) {
    .load_top_half{
        animation: slideOutTop 2s forwards;
    }
    @keyframes slideOutTop {
        0% {
          transform: translateY(0);
        }
        75% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-50vh);
          display: none !important;
        }
    }
}
.load_bottom_half{
    display: flex;
    align-items: start;
    background-color: #543855;
    color: #edeaec;
    height: 50vh;
}
@media (min-width:960px) {
    .load_bottom_half{
        animation: slideOutBottom 2s forwards;
    }
    @keyframes slideOutBottom {
        0% {
          transform: translateY(0);
        }
        75% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(50vh);
          display: none !important;
        }
    }
}
.load_bottom_half .fadein_text{
    margin: 20px auto;
}
@media (min-width:960px) {
    /*.fadein_area{
        opacity: 0;
    }
    .fadein_area.show{
        animation: fadeIn 1s forwards;
    }*/

    @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        50%{
            opacity: 0;
        }
        100% {
          opacity: 1;
        }
    }
}

/*------------------------------------------------------------
    その他カスタム
------------------------------------------------------------*/
@font-face {
    font-family: 'Kaisotai-Next-UP-B';
    src: url(/material/Kaisotai-Next-UP-B.woff2);
}
.kaisoutai{
    font-family: 'Kaisotai-Next-UP-B',serif;
}
::selection {
    color: #edeaec;
    background-color: #9b47a0;
}

body {
    color: #444444;
    background-color: #edeaec;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
a {
    color: #9b47a0;
}
.message_area{
    color: #666;
    background-color: rgba(255,255,255,0.5);
    border-radius: 5%;
    padding: 10px;
}

h2, h3, h4, h5, h6 {
    color: #9b47a0;
}

h1 {
    color: #222222;
}
strong{
    display: inline;
    background-position: left -100% center;
    padding-bottom: 0.6em;
    font-weight: bold;
    background-size: 200% 0.6em;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 102, 0.5) 50%);
}
h2 {
    border-bottom-color: #C9ACE6;
}

.acc_plusminus .mark{
    background-color: #222222;
}
#particles-js{
    z-index: -1;
    width: 100vw;
    height: 100vh;
    position:fixed;
}
#csb_page_content {
    z-index: 1;
    background-color: #edeaec;
}

.button {
    color: #edeaec;
    background-color: #C9ACE6;
}
    .button:hover {
        opacity: 1;
        color: #FFF;
        background-color: #990099;
    }

.small_button {
    color: #edeaec;
    background-color: #C9ACE6;
}
    .small_button:hover {
        opacity: 1;
        color: #FFF;
        background-color: #990099;
    }

.other_button {
    color: #C9ACE6;
    border-color: #C9ACE6;
}
    .other_button:hover {
        color: #990099;
        border-color: #990099;
    }

#layout_footer_area {
    background-color: #edeaec;
    color: #222222;
}

    #layout_footer_area a {
        color: #c9ace6;
    }

/* ▼▼▼スクロールバー▼▼▼*/
/*.scroll::-webkit-scrollbar-track {
    background-color: 任意の背景色;
}*/
.scroll::-webkit-scrollbar-thumb {
    background-color: #990099;
}
/* ▲▲▲スクロールバー▲▲▲ */

/* ▼ 以下、任意のスタイル ▼ */

body, pre, address, button {
    font-family: "M PLUS 1", sans-serif;
    line-height: 1.85;
}

.en_font {
    font-family: 'Orbitron', sans-serif;
}

@media (min-width: 960px) {
    .attention {
        text-align: center;
    }
}
/* 文字サイズ */
body {
    font-size: 1.4rem;
}

.button, h1 {
    font-size: 2rem;
}

.button {
    padding: 0.5em;
}
.caution{
    color:#F1114D;
}

.sp_center{
    text-align: center;
}
@media (min-width:480px){
    .sp_center{
        text-align: inherit;
    }
}
.sp_left{
    text-align: left;
}
@media (min-width:480px){
    .sp_center{
        text-align: inherit;
    }
}

.usericon img{
    max-width: 100px;
    border: 2px solid;
    border-radius: 50%;
}
.font_up{
    font-size: xx-large;
}

.icon_list dl{
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    border-collapse: collapse;
    width: 100%;
}

.icon_list dt,
.icon_list dd{
    display: block;
    padding: 5px;
    min-width: 50px;
}

.icon_list dt{
    width: 20%;
    text-align: center;
}
.icon_list dt img{
    width: 60px;
    vertical-align: middle;
    border-radius: 5px;
}
.icon_list dd{
    width: 75%;   
}

a>img{
    padding: 2px;
    border: 1px solid;
}

.wishlist {
    width: 96%;
    color: #222;
    border-collapse: collapse;
    margin: 0 auto;
    
}
.wishlist th{
    vertical-align: top;
    font-size:1.6rem;
    white-space: nowrap;
    padding-right: 20px;
}
.wishlist .summary{
    font-size:1.6rem;
    color: #222;
}
.wishlist .detail{
    color: #666;
    padding: 0 20px;
}
.wishlist th,
.wishlist td{
    border-bottom: 1px solid #666;
}
.wishlist tr:last-child th,
.wishlist tr:last-child td{
    border:none;
}
.wishlist .task_ok .summary{
    background-position: left -100% center;
    padding-bottom: 0.6em;
    font-weight: bold;
    background-size: 200% 0.6em;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(201, 172, 230, 0.5) 50%);
}