@charset "UTF-8";

/*==================================
WebFonts
==================================*/
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:100,300,400,500');

/*==================================
Base Layout
==================================*/
html {
font-size: 14px;
}

body {
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
line-height: 160%;
font-family: 'Noto Sans Japanese','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-weight: 300;
letter-spacing: .04em;
color: #c9c9c9;
background-color: #000;
background-image: url(../common/body_bg_pattern.png);
background-position: center center;
background-repeat: repeat;
background-size: 1280px;
-webkit-text-size-adjust: 100%;
font-variant-ligatures: none;
}

/*==================================
Common Layout
==================================*/
/*
article {
margin: 0 auto;
padding: 15px;
background-image: url(../common/bg_article.png);
background-position: center top;
background-repeat: repeat-y;
background-size: contain;
}
*/
article {
margin: 0 auto;
padding: 15px;
background-position: center center;
background-repeat: repeat;
background-size: 1280px;
}

/* CHANGE COLOR */
body.color_default article {
background-color: #000;
background-image: url(../common/bg_article.png);
background-position: center top;
background-repeat: repeat-y;
background-size: contain;
}

body.color_white article {
background-color: #f9f9f9;
background-image: url(../common/body_bg_pattern_black.png);
background-position: center center;
background-repeat: repeat;
background-size: 1280px;
}

body.color_gray_white article {
background-color: #9c9c9c;
background-image: url(../common/body_bg_pattern_white.png);
background-position: center center;
background-repeat: repeat;
background-size: 1280px;
}

body.color_gray_black article {
background-color: #9c9c9c;
background-image: url(../common/body_bg_pattern_black.png);
background-position: center center;
background-repeat: repeat;
background-size: 1280px;
}

body.color_black article {
background-color: #1c1c1c;
background-image: url(../common/body_bg_pattern_white.png);
background-position: center center;
background-repeat: repeat;
background-size: 1280px;
}

section {
display: block;
padding: 30px 15px;
margin: 0;
background-color: #000;

box-shadow: 0px 0px 15px rgba(0,0,0,.2);
}

.device_width {
display: block;
padding: 0;
margin: 0 auto;
}

/* BACKGROUND */
.bg_slanting {
background-image: url(../common/bg_slanting.png);
background-position: left top;
background-repeat: repeat;
background-size: 10px;
}

.bg_slanting_corner {
display: block;
height: 11px;
background-image: url(../common/bg_slanting_corner.png);
background-position: right bottom;
background-repeat: no-repeat;
background-size: 11px;
}

/*==================================
Title+Text
==================================*/
h1,
h2 {
margin: 0;
padding: 0;
line-height: 150%;
}

h2 {
margin: 0 0 15px 0;
font-size: 300%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 100;
letter-spacing: .08em;
line-height: 110%;
color: #fff;
}

#entry_contents h2 {
margin-bottom: 5px;
}

h3 {
margin: 0 0 45px 0;
font-size: 130%;
font-weight: 500;
line-height: 150%;
color: #5c5c5c;
}

#page_title h3 {
margin: 0 0 20px 0;
}

.entry_title_area h3 {
margin: 0 0 10px 0;
font-size: 150%;
font-weight: 400;
color: #fff;
}

.entry_title_area .entry_date {
font-size: 130%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
color: #9c9c9c;
}

h4 {
padding: 0;
margin: 0 0 15px 0;
font-size: 120%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
color: #9c9c9c;
}

h4.subttl {
font-size: 150%;
color: #fff;
}

h4.text_ja {
font-family: 'Noto Sans Japanese','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-size: 130%;
font-weight: 500;
letter-spacing: .04em;
}

/* MEMBER BLOG INDEX ICON */
h4.subttl.member_icon {
padding: 10px 0 10px 50px;
background-position: left center;
background-repeat: no-repeat;
background-size: 40px;
}

h5 {
padding: 10px 0;
margin: 0;
font-size: 110%;
font-weight: 500;
color: #fff;
}

p {
padding: 0 0 5px 0;
margin: 0;
}

a {
color: #fff;
}

.caption {
display: block;
font-size: 0.86em;
}

.text_imp {
color: #e60645;
}

/*==================================
Header
==================================*/
header {
display: block;
padding: 0 15px;
margin: 0 auto;
background-color: #000;

box-shadow: 0px 0px 15px rgba(0,0,0,.2);
}

header h1 a {
display: block;
width: 200px;
height: 30px;
padding: 0;
margin: 15px 0;
background-image: url(../common/site_logo.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

.header_after {
display: block;
margin: 15px 0;
}

.header_after ul {
display: block;
padding: 0;
margin: 0 0 0 50px;
font-size: 100%;
list-style: none;
}

.header_after li {
display: inline-block;
padding: 0;
margin: 0;
color: #9c9c9c;
vertical-align: bottom;
}

.header_after li span {
margin: 0 10px;
}

.header_after li a {
display: inline-block;
padding: 0;
margin: 0;
text-decoration: none;
vertical-align: bottom;
color: #9c9c9c;
}

.header_after li a:hover {
color: #fff;
text-shadow: 0px 0px 10px rgba(255,255,255,.8);
}

a.icon_color {
display: block;
width: 45px;
height: 45px;
padding: 0;
margin: 0 15px 0 0;
background-image: url(../common/icon_color.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
float: left;
}

/* header btn */
header a.btn_logout {
display: inline-block;
padding: 2px 45px;
margin: 0;
border: 1px solid #9c9c9c;
font-size: 120%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
letter-spacing: .12em;
text-decoration: none;
color: #9c9c9c;
line-height: 30px;
}

header a:hover.btn_logout {
background-color: #fff;
border: 1px solid #fff;
color: #000;
}

header a.btn_login {
display: block;
padding: 10px 0;
margin: 15px 0 0 0;
background-color: #fff;
font-size: 130%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
letter-spacing: .12em;
text-decoration: none;
text-align: center;
color: #000;
}

header .btn_login_sub {
display: table;
width: 100%;
margin: 20px 0 0 0;
}

header .btn_login_sub a {
display: table-cell;
width: 50%;
padding: 5px 0;
margin: 0;
font-size: 85%;
font-weight: 400;
text-decoration: none;
text-align: center;
color: #9c9c9c;
line-height: 30px;
border-top: 1px solid #9c9c9c;
border-bottom: 1px solid #9c9c9c;
border-right: 1px solid #9c9c9c;
}

header .btn_login_sub a.join {
border-left: 1px solid #9c9c9c;
}

header .btn_login_sub a:hover {
background-color: #9c9c9c;
color: #000;
}

/* MENU BTN */
#btn_menu {
display: block;
position: absolute;
right: 22px;
z-index: 100;
}

#btn_menu a {
display: inline-block;
width: 45px;
height: 45px;
margin-top: 7px;
background-color: #000;
background-image: url(../common/btn_menu.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 45px;
border: 1px solid #5c5c5c;
}

#btn_menu a:hover {
background-color: #1c1c1c;
border: 1px solid #c9c9c9;
}

/*==================================
Footer
==================================*/
footer {
display: block;
padding: 0;
margin: 0;
background-color: #000;
color: #9c9c9c;

box-shadow: 0px 0px 15px rgba(0,0,0,.2);
}

footer a {
color: #9c9c9c;
text-decoration: none;
}

footer a:hover {
color: #fff;
text-decoration: underline;
}

/* FOOTER SNS */
footer .footer_snsarea {
display: block;
height: 30px;
margin: 45px 0 30px 0;
text-align: center;
}

footer .footer_snsarea a {
display: inline-block;
width: 30px;
height: 30px;
padding: 0;
margin: 0 10px;
background-image: url(../common/icon_sns.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 150px;
}

footer .footer_snsarea a.icon_fb {
background-position: 0 top;
}

footer .footer_snsarea a:hover.icon_fb {
background-position: 0 bottom;
}

footer .footer_snsarea a.icon_tw {
background-position: -30px top;
}

footer .footer_snsarea a:hover.icon_tw {
background-position: -30px bottom;
}

footer .footer_snsarea a.icon_yt {
background-position: -60px top;
}

footer .footer_snsarea a:hover.icon_yt {
background-position: -60px bottom;
}

footer .footer_snsarea a.icon_ig {
background-position: -90px top;
}

footer .footer_snsarea a:hover.icon_ig {
background-position: -90px bottom;
}

footer .footer_snsarea a.icon_ln {
background-position: -120px top;
}

footer .footer_snsarea a:hover.icon_ln {
background-position: -120px bottom;
}

/* FOOTER TEXT */
footer .footer_linkarea {
display: block;
text-align: center;
}

footer a.fotter_link_official {
display: block;
width: 160px;
height: 40px;
padding: 0;
margin: 0 auto 30px auto;
background-image: url(../common/footer_logo.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

footer .footer_linkarea .text_link {
display: block;
padding: 0;
margin: 0 0 10px 0;
}

footer .footer_linkarea .text_link a {
display: block;
padding: 0;
margin: 0 0 15px 0;
}

footer .copyright {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
letter-spacing: .1em;
margin: 45px 0;
}

/* PAGE TOP */
#btn_pagetop {
margin: 0 15px 30px 15px;
text-align: right;
font-size: 130%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .1em;
line-height: 30px;
}

#btn_pagetop a {
display: block;
width: 30px;
height: 30px;
margin: 0 0 0 15px;
background-color: #000;
background-image: url(../common/pagetop.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 30px;
border: 1px solid #5c5c5c;
float: right;
}

#btn_pagetop a:hover {
background-color: #1c1c1c;
border: 1px solid #c9c9c9;
}

/*==================================
Mainvisual-login
==================================*/
#mainvisual-login {
display: flex;
width: 100vw;
height: 280px;

align-items: center;
justify-content: center;
flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;


background-color: #000;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
text-align: center;
}

#mainvisual-login #center_elements {
display: flex;
margin: 0;
width: 280px;
height: 160px;
align-items: center;
justify-content: center;
flex-direction: column;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

/* ログイン前アー写 */
#mainvisual-before {
display: block;
height: 280px;
padding: 0;
margin: 0 auto;
background-color: #fff;
background-image: url(../img/mainvisual_before.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

/* ランダム背景 */
.background0 {
background-image: url(../img/mainvisual_00.jpg);
}
.background1 {
background-image: url(../img/mainvisual_01.jpg);
}
.background2 {
background-image: url(../img/mainvisual_02.jpg);
}
.background3 {
background-image: url(../img/mainvisual_03.jpg);
}
.background4 {
background-image: url(../img/mainvisual_04.jpg);
}

/* ランダム中央 */
.elements0 {
background-image: url(../img/center_elements_00.png);
}
.elements1 {
background-image: url(../img/center_elements_01.png);
}
.elements2 {
background-image: url(../img/center_elements_02.png);
}
.elements3 {
background-image: url(../img/center_elements_03.png);
}
.elements4 {
background-image: url(../img/center_elements_04.png);
}

/*==================================
Common Content
==================================*/
/* BTN */
a.btn_wide {
display: block;
padding: 10px 0;
margin: 15px auto 30px auto;
font-size: 150%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
letter-spacing: .12em;
color: #9c9c9c;
text-decoration: none;
text-align: center;
border: 1px solid #9c9c9c;
}

a.btn_wide:hover {
background-color: #fff;
border: 1px solid #fff;
color: #000;
}

a.btn_wide.text_ja {
font-size: 110%;
font-family: 'Noto Sans Japanese','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-weight: 500;
letter-spacing: .04em;
color: #9c9c9c;
}

/* COMMON BANNER */
#co_banner_area {}

#co_banner_area .inner {
display: block;
padding: 10px 0 0 0;
margin: 0 auto;
}

#co_banner_area .inner a {
display: block;
width: 240px;
height: 60px;
padding: 0;
margin: 15px auto;
text-decoration: none;
text-align: center;
line-height: 60px;

background-color: #9c9c9c;
}

#co_banner_area .inner a img {
width: 240px !important;
height: 60px !important;
}

/* INTERROGRAM */
#interrogram {}

#interrogram ul {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
}

#interrogram li {
position: relative;
width: 32.33%;
height: auto;
margin: .5%;
overflow: hidden;
background-color: #c9c9c9;
background-image: url(../common/bg_interrogram.png);
background-position: center center;
background-repeat: repeat;
background-size: 150px;
}

#interrogram li:before {
content: "";
display: block;
padding-top: 100%;
}

#interrogram li img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
max-width: 94%;
height: auto;
max-height: 94%;
}

/* UPDATE LIST */
table.update_listn {
width: 100%;
table-layout: fixed;
padding: 0;
margin: 15px 0 0 0;
border-collapse: collapse;
}

table.update_listn th {
display: block;
padding: 10px 15px;
margin: 0;
background-image: url(../common/bg_slanting.png);
background-position: left top;
background-repeat: repeat;
background-size: 10px;
color: #fff;
font-size: 110%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
text-align: left;
vertical-align: top;
}

table.update_listn td {
display: block;
padding: 10px 15px;
margin: 0 0 10px 0;
background-color: #0c0c0c;
background-image: url(../common/bg_slanting_corner.png),url(../common/bg_blackfabric.png);
background-position: right bottom,left top;
background-repeat: no-repeat,repeat;
background-size: 11px,150px;
border-bottom: 5px solid #000;
}

table.update_listn td .date {
display: block;
font-size: 110%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
margin: 0 0 5px 0;
}

table.update_listn a {
display: block;
text-decoration: none;
color: #c9c9c9;
}

table.update_listn a:hover {
color: #fff;
}

/* INNER TABLE */
table.inner_table {
width: 100%;
table-layout: fixed;
padding: 0;
margin: 10px 0;
border-collapse: collapse;
}

table.inner_table th {
display: block;
padding: 10px;
margin: 15px 0 0 0;
background-image: url(../common/bg_slanting.png);
background-position: left top;
background-repeat: repeat;
background-size: 10px;
border-bottom: 2px solid #101010;
color: #fff;
text-align: left;
vertical-align: top;
}

table.inner_table td {
display: block;
padding: 0;
margin: 0 0 2px 0;
background-color: #3c3c3c;
}

/* INNER TABLE TEXT */
table.inner_table_text {
width: 100%;
table-layout: fixed;
padding: 0;
margin: 10px 0;
border-collapse: collapse;
}

table.inner_table_text th {
display: block;
padding: 10px;
margin: 15px 0 0 0;
background-image: url(../common/bg_slanting.png);
background-position: left top;
background-repeat: repeat;
background-size: 10px;
border-bottom: 2px solid #101010;
color: #fff;
text-align: left;
vertical-align: top;
}

table.inner_table_text td {
display: block;
padding: 10px;
margin: 0 0 2px 0;
background-color: #3c3c3c;
}

/* LOGIN TABLE */
table.login_table {
width: 100%;
table-layout: fixed;
padding: 0;
margin: 10px 0;
border-collapse: collapse;
}

table.login_table th {
display: block;
padding: 10px;
margin: 15px 0 0 0;
background-image: url(../common/bg_slanting.png);
background-position: left top;
background-repeat: repeat;
background-size: 10px;
border-bottom: 2px solid #101010;
color: #fff;
text-align: left;
vertical-align: top;
}

table.login_table td {
display: block;
padding: 0;
margin: 0 0 2px 0;
background-color: #3c3c3c;
}

/* FORM */
form {
margin-bottom: 30px;
}

form.none_margin {
margin-bottom: 15px;
}

form .error_msg {
display: block;
padding: 5px;
margin: 0;
background-color: #e60645;
color: #fff;
text-align: center;
font-size: 90%;
}

/* placeholder */
::-webkit-input-placeholder { color: #9c9c9c; }
::-moz-placeholder { color: #9c9c9c; opacity: 1; }
:-ms-input-placeholder { color: #9c9c9c; }
:focus::-webkit-input-placeholder { color:transparent; }
:focus:-moz-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }

input, button, textarea, select {
margin: 0;
padding: 10px;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

font-size: 16px;
}

select {
display: block;
width: 100%;
padding: 10px;
/* margin: 10px; */
background-color: #3c3c3c;
border: 2px solid #5c5c5c;
color: #fff;
font-size: 100%;
}

button {
display: block;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: 110%;
border: 1px solid #9c9c9c;
color: #9c9c9c;
}

button:hover {
background-color: #fff;
border: 1px solid #fff;
color: #1c1c1c;
}

#modal_form button {
font-size: 130%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
margin-top: 15px;
}

table.inner_table input,
table.inner_table textarea,
table.login_table input {
background-color: #3c3c3c;
color: #fff;
width: 100%;
}

table.inner_table textarea {
height: 200px;
}

table.inner_table input:focus,
table.login_table input:focus,
table.inner_table textarea:focus {
background-color: #f9f589;
color: #1c1c1c;
}

/*
table.inner_table input[disabled],
table.login_table input[disabled],
table.inner_table textarea[disabled] {
background-color: #1c1c1c;
color: #5c5c5c;
font-style: italic;
cursor:not-allowed;
}
*/
table.inner_table span.input_disabled,
table.login_table span.input_disabled {
display: block;
padding: 10px;
background-color: #1c1c1c;
color: #9c9c9c;
font-style: italic;
cursor: not-allowed;
}

/* フォーム入力例　CMSデフォルト */
table.inner_table span.system-font2 {
display: block;
padding: 2px 10px;
margin: 0;
font-size: 85%;
/* font-style: italic; */
background-color: #1c1c1c;
/* border: 4px solid #2c2c2c; */
color: #9c9c9c;
}

/* AGREEMENT */
.agreement_form {
margin: 30px 0 0 0;
}

.agreement_form input[type=checkbox] {
display: block;
margin: 5px 15px 0 0;
border: 1px solid #c9c9c9;
background-color: #5c5c5c;
width: 1.4em;
height: 1.4em;
-webkit-appearance: checkbox;
float: left;
}

.agreement_form .btn_check[disabled] {
background-color: #0c0c0c;
border: 1px solid #2c2c2c;
color: #5c5c5c;
}

.agreement_form button:hover.btn_check[disabled] {
background-color: #0c0c0c;
border: 1px solid #2c2c2c;
color: #5c5c5c;
}

.agreement_form label {
display: block;
margin-left: 40px;
font-size: 90%;
}

.agreement_form button {
margin-top: 15px;
}

/* INNER */
.entry_inner_block {
padding: 15px 0;
margin: 10px 0;
border-top: 1px dashed #2c2c2c;
}

/* INNER SCROLL */
.inner_scrollbox {
display: block;
padding: 0 10px 10px 10px;
margin: 30px auto;
height: 380px;
overflow-x: hidden !important;
overflow-y: scroll !important;
border: 1px solid #2c2c2c;
background-color: rgba(0,0,0,.1);
font-size: 85%;
}

.inner_scrollbox p {
padding: 0;
margin: 0 0 10px 0;
line-height: 150%;
}

.inner_scrollbox h4 {
margin: 10px 0 5px 0;
}

/*==================================
Content - TOP
==================================*/
#slide_banner_area {
display: block;
padding: 30px 0 0 0;
margin: 0 auto;
}

/* Side Gradation */
#slide_banner_area .fade_left {
display: block;
width: 30px;
height: 116px;
padding: 0;
margin: 0;
position: absolute;
z-index: 10;
background: -moz-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0));
background: -webkit-linear-gradient(left,rgba(0,0,0,1), rgba(0,0,0,0));
background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
left: 15px;
}

#slide_banner_area .fade_right {
display: block;
width: 30px;
height: 116px;
padding: 0;
margin: 0;
position: absolute;
z-index: 10;
background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1));
background: -webkit-linear-gradient(left,rgba(0,0,0,0), rgba(0,0,0,1));
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
right: 15px;
}

@media (min-width: 0px) and (max-width: 320px) {
#slide_banner_area .fade_left,
#slide_banner_area .fade_right { display: none; }
}

/* Banner Elements */
.slider_topbanner {
padding: 0 0 30px 0;
position: absolute;
z-index: 1;
}

#slide_banner_area .slider_topbanner a {
display: block;
width: 280px;
height: 116px;
padding: 0;
margin: 0 5px;
background-color: #2c2c2c;
}

#slide_banner_area .slider_topbanner a img {
width: 280px;
height: 116px;
padding: 0;
margin: 0;
}

/* INDEX CONTENTS */
.contents_panel {
width: 48%;
margin-right: 4%;
margin-bottom: 20px;
float: left;
}

.contents_panel:nth-child(even) {
margin-right: 0;
}

.contents_panel a {
text-decoration: none;
}

.contents_panel_inner {
display: block;
padding: 0;
background-color: #0c0c0c;
background-image: url(../common/bg_blackfabric.png);
background-position: left top;
background-repeat: repeat;
background-size: 150px;
}

.contents_panel_inner a {
display: block;
padding: 15px 0 30px 0;
height: 150px;
}

.contents_panel_inner .update_tab {
display: block;
width: 45px;
height: 45px;
padding: 0;
margin: 0;
background-image: url(../common/update_tab.png);
background-position: left top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}

.contents_panel_inner .icon_circle_area {
display: block;
width: 90px;
height: 90px;
padding: 0;
margin: 0 auto 5px auto;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

.contents_panel_inner .date {
display: block;
padding: 0;
margin: 0;
text-align: center;
font-size: 130%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .18em;
}

.contents_panel_inner h3 {
padding: 0 10px;
margin: 5px auto 0 auto;
font-size: 110%;
font-weight: 500;
line-height: 140%;
color: #fff;
text-align: center;

/*
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
*/
}

.contents_panel_inner .body_text {
display: none;
}

.contents_panel h5 {
height: 40px;
padding: 0 5px;
margin: 0;
line-height: 40px;
text-align: center;
font-size: 90%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .18em;
background-image: url(../common/bg_slanting_corner.png),url(../common/bg_slanting.png);
background-position: right bottom,left top;
background-repeat: no-repeat,repeat;
background-size: 11px,10px;
color: #fff;


display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;

}


/*==================================
PAGE ENTRY
==================================*/
#entry_contents .entry_area {
display: block;
padding: 20px;
margin: 0;
background-color: #0c0c0c;
background-image: url(../common/bg_blackfabric.png);
background-position: left top;
background-repeat: repeat;
background-size: 150px;
}

#entry_contents .entry_title_area {
padding: 0;
margin: 0 0 15px 0;
}

#entry_contents .entry_read {
padding: 0;
margin: 0 0 15px 0;
color: #fff;
/* font-size: 85%; */
}

#entry_contents .entry_read .caption {
color: #9c9c9c
}

#entry_contents .entry_area img {
max-width: 100%;
height: auto;
margin: 15px auto;
}

#entry_contents .pagination {
height: 45px;
padding: 0 15px;
margin: 0 0 15px 0;
line-height: 45px;
text-align: center;
font-size: 100%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .18em;
background-image: url(../common/bg_slanting_corner.png),url(../common/bg_slanting.png);
background-position: right bottom,left top;
background-repeat: no-repeat,repeat;
background-size: 11px,10px;
color: #c9c9c9;
}

#entry_contents .pagination a {
display: inline-block;
padding: 0;
margin: 0 10px;
text-decoration: none;
color: #c9c9c9;
}

#entry_contents .pagination a:hover {
color: #fff;
}

/* ENTRY PAGE - CATEGORY ICON */
#page_title {
/*
background-position: right 8px;
background-repeat: no-repeat;
background-size: 50px;
*/
background-image: none;
padding: 0;
margin-bottom: 15px;
}

/* MEDIA */
.media_area {
display: flex;
/*
width: 100%;
height: 210px;
*/
align-items: center;
justify-content: center;
flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

margin: 0 0 20px 0;
background-image: url(../common/bg_media_area.png);
background-position: center center;
background-repeat: repeat;
background-size: 400px;
box-shadow: 0px 0px 30px #000;
}

.media_area a.btn_play {
display: inline-block;
padding: 10px 45px 10px 75px;
margin: 0 auto;
border-radius: 30px;
background-color: #000;
background-image: url(../common/icon_play.png);
background-position: 30px center;
background-repeat: no-repeat;
background-size: 20px;
color: #c9c9c9;
text-decoration: none;
font-weight: 500;
}

.media_area a:hover.btn_play {
background-color: #fff;
background-image: url(../common/icon_play_hover.png);
color: #5c5c5c;
}

/* MEDIA PLAYER */
.media_area.player {
height: 210px;
}

/* MEDIA INTERROGRAM */
/*
.media_area.interrogram_photo {
background-color: #c9c9c9;
background-image: url(../common/bg_interrogram.png);
background-position: center center;
background-repeat: repeat;
background-size: 150px;
}

.media_area.interrogram_photo img {
max-width: 100%;
height: auto;
padding: 0 !important;
margin: 0 !important;
}
*/
.media_area.interrogram_photo {
background-image: none;
box-shadow: none;
}

.media_area.interrogram_photo img {
max-width: 100%;
height: auto;
padding: 0 !important;
margin: 0 0 20px 0 !important;
}

/* SCRATCH */
#scratch_area {
display: block;
padding: 0 10px;
margin: 15px 0;
background-color: #ffc600;
background-image: url(../common/bg_scratch_area.png);
background-position: center center;
background-size: 400px;
}

#scratch_area img {
width: 90px;
height: 90px;
padding: 0 !important;
margin: 0 !important;
}

#scratch_area .scratchpad {
display: block;
width: 90px;
height: 90px;
padding: 0;
margin: 0 5px;
float: left;
cursor: pointer !important;
}

#scratchpad_area {
width: 200px;
margin: 0 auto 30px auto;
}

#scratch_area .scratch_title {
display: block;
height: 90px;
padding: 0;
margin: 30px 0 30px 0;
background-image: url(../common/scratch_title.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

/* SCRATCH WIN PAGE */
#scratch_area.win_page {
background-color: #e60645;
color: #fff;
padding: 15px;
}

#scratch_area.win_page .scratch_win_message {
display: block;
padding: 0;
margin: 0;
font-size: 90%;
}

#scratch_area.win_page .scratch_win_image {
display: block;
padding: 0;
margin: 0;
}

#scratch_area.win_page .scratch_win_image img {
display: block;
width: 80%;
height: auto;
margin: 15px auto !important;
}

#scratch_area.win_page .scratch_title_win {
display: block;
height: 100px;
padding: 0;
margin: 30px 0;
background-image: url(../common/scratch_title_win.png);
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
}

/* SCRATCH LOSE PAGE */
#scratch_area.lose_page {
background-color: #077bbd;
color: #fff;
padding: 15px;
text-align: center;
}

#scratch_area.lose_page .scratch_title_lose {
display: block;
height: 100px;
padding: 0;
margin: 30px 0 15px 0;
background-image: url(../common/scratch_title_lose.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

/* member_panel */
.member_panel {
display: block;
padding: 0;
margin: 0 0 15px 0;
text-align: center;
background-color: #1c1c1c;
border-radius: 6px;
}

.member_panel h5 {
padding: 10px 0 10px 70px;
margin: 20px 0 0 0;
background-position: 15px center;
background-repeat: no-repeat;
background-size: 40px;
border-bottom: 1px solid #0c0c0c;
color: #fff;
line-height: 45px;
text-align: left;
}

.member_panel p {
display: block;
padding: 15px;
margin: 0;
color: #fff;
text-align: left;
text-shadow: 0px 0px 8px rgba(255,255,255,.2);
}

/* SPECIAL */
.member_special_index {}

.member_special_index .linkarea {
display: block;
height: 60px;
padding: 10px 0;
margin: 0 10px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

.special_banner-ryuta {
background-image: url(../upload/special_banner-ryuta.png);
}

.special_banner-kazuki {
background-image: url(../upload/special_banner-kazuki.png);
}

.special_banner-genki {
background-image: url(../upload/special_banner-genki.png);
}

.special_banner-seiji {
background-image: url(../upload/special_banner-seiji.png);
}

.member_page_title {
display: block;
height: 80px;
padding: 0;
margin: 0;
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
}

/* INTERROGRAM */
.museum_photolist {}

.museum_photolist ul {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
}

.museum_photolist li {
position: relative;
width: 32.33%;
height: auto;
margin: .5%;
overflow: hidden;
background-color: #c9c9c9;
background-image: url(../common/bg_interrogram.png);
background-position: center center;
background-repeat: repeat;
background-size: 150px;
}

.museum_photolist li:before {
content: "";
display: block;
padding-top: 100%;
}

.museum_photolist li img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto !important;
max-height: 100px !important;
margin: 0 !important;
}

/* list_vertical */
dl.list_vertical {
display: block;
padding: 0;
margin: 15px 0 0 0;
}

dl.list_vertical dt {
display: block;
padding: 30px 0 15px 0;
margin: 0;
font-size: 110%;
font-weight: 500;
color: #fff;
border-top: 1px dashed #2c2c2c;
cursor: pointer;
}

dl.list_vertical dd {
display: block;
padding: 0 0 15px 0;
margin: 0;
}

/* FAQ */
.faq_body {}

.faq_body h3 {
margin: 60px 0 15px 0;
font-size: 180%;
font-weight: 500;
color: #fff;
}

.faq_body h3:first-of-type {
margin: 0 0 30px 0;
}

.faq_body h4 {
margin-top: 60px;
}

.faq_body dl.list_vertical dt {
background-image: url(../common/icon_question.png);
background-position: left 15px;
background-repeat: no-repeat;
background-size: 80px;
padding-top: 50px;
}

.faq_body dl.list_vertical dd {
background-image: url(../common/icon_answer.png);
background-position: left 15px;
background-repeat: no-repeat;
background-size: 80px;
padding-top: 50px;
}

/* MY PAGE */
.mypage_content {}

.mypage_content ul {
padding: 0;
margin: 0;
}

.mypage_content ul li {
display: inline-block;
padding: 0;
margin: 0 15px 15px 0;
font-size: 85%;
}

.mypage_content ul li a {
display: block; 
padding: 2px 20px;
color: #c9c9c9;
text-decoration: none;
background-color: #2c2c2c;
border-radius: 4px;
/* border: 1px solid #9c9c9c; */
}

.mypage_content ul li a:hover {
color: #1c1c1c;
/* border: 1px solid #fff; */
background-color: #fff;
}

/*==================================
ICON
==================================*/
.icon_circle_ryuta {
background-image: url(../upload/icon_circle_ryuta.png);
}

.icon_circle_kazuki {
background-image: url(../upload/icon_circle_kazuki.png);
}

.icon_circle_genki {
background-image: url(../upload/icon_circle_genki.png);
}

.icon_circle_seiji {
background-image: url(../upload/icon_circle_seiji.png);
}

.icon_circle_qanda {
background-image: url(../common/icon_circle_qanda.png);
}

.icon_circle_radio {
background-image: url(../common/icon_circle_radio.png);
}

.icon_circle_scratch {
background-image: url(../common/icon_circle_scratch.png);
}

.icon_circle_tv {
background-image: url(../common/icon_circle_tv.png);
}

.icon_circle_blog {
background-image: url(../common/icon_circle_blog.png);
}

.icon_circle_interrogram {
background-image: url(../common/icon_circle_interrogram.png);
}

.icon_circle_museum {
background-image: url(../common/icon_circle_museum.png);
}

.icon_circle_presents {
background-image: url(../common/icon_circle_presents.png);
}

.icon_circle_mail {
background-image: url(../common/icon_circle_mail.png);
}

.icon_circle_special {
background-image: url(../common/icon_circle_special.png);
}

.icon_circle_special-ryuta {
background-image: url(../upload/icon_circle_special-ryuta.png);
}

.icon_circle_special-kazuki {
background-image: url(../upload/icon_circle_special-kazuki.png);
}

.icon_circle_special-genki {
background-image: url(../upload/icon_circle_special-genki.png);
}

.icon_circle_special-seiji {
background-image: url(../upload/icon_circle_special-seiji.png);
}

.icon_circle_upload {
background-image: url(../upload/icon_circle_upload.png);
}

/*==================================
Slider
==================================*/
/* common	 */
.slick-slide {
margin: 0px 15px;
}

.slick-slide {
transition: all ease-in-out .3s;
/* opacity: .4; */
}

.slick-active {
opacity: 1;
}

.slick-current {
opacity: 1;
}

button.slick-arrow {
width: 45px;
height: 90px;
z-index: 100;
}


/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 0;
}

.slick-dots {
position: absolute;
bottom: 0;

display: block;

width: 100%;
padding: 0;
margin: 0;

list-style: none;

text-align: center;
}

.slick-dots li {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
padding: 0;
border-radius: 10px;
cursor: pointer;
background-color: #5c5c5c;
}

.slick-dots li.slick-active {
background-color: #fff;
}

.slick-dots li button {
font-size: 0;
line-height: 0;

display: block;

width: 15px;
height: 15px;
padding: 0;

cursor: pointer;

color: transparent;
border: 0;
outline: none;
background: transparent;
}

/*==================================
Animation
==================================*/
.fade-up {
transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: transform 0.4s;
-moz-transition: transform 0.4s;
-webkit-transition: transform 0.4s;
-o-transition: transform 0.4s;
}

/*==================================
Modal Window
==================================*/
.window_content {
display: block;
padding: 15px 30px;
max-height: 85vh;
margin: 0;
overflow: auto;
color: #1c1c1c;
text-align: center;
}

.window_content h3 {
padding: 0;
margin: 0 0 15px 0;
font-family: 'Barlow Condensed', sans-serif;
font-size: 200%;
text-align: center;
text-decoration: none;
color: #fff;
}

/* MODAL FORM */
#modal_form {}

#modal_form .site_logo {
display: block;
height: 60px;
padding: 0;
margin: 0;
background-image: url(../common/site_logo.png);
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
}

#modal_form form {
margin-bottom: 30px;
}

#modal_form a {
display: block;
margin: 10px auto;
text-decoration: none;
color: #9c9c9c;
}

#modal_form a:hover {
text-decoration: underline;
color: #fff;
}

/* MODAL MENU */
#modal_contents ul {
list-style: none;
padding: 0;
margin: 0 auto;
}

#modal_contents li {
display: block;
padding: 0;
margin: 0 0 10px 0;
text-align: left;
}

#modal_contents li a {
display: block;
padding: 5px 0 5px 45px;
font-size: 100%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
text-decoration: none;
background-position: left center;
background-repeat: no-repeat;
background-size: 30px;
}

#modal_contents a.link_official {
display: block;
padding: 45px 0 0 0;
margin: 30px auto;
font-size: 90%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
text-decoration: none;
background-image: url(../common/footer_logo.png);
background-position: center top;
background-repeat: no-repeat;
background-size: 150px;
}

/* MODAL COLOR */
#modal_color h3 {
padding: 70px 0 0 0;
background-image: url(../common/icon_color_select.png);
background-position: center top;
background-repeat: no-repeat;
background-size: 64px;
}

#modal_color ul {
display: block;
list-style: none;
padding: 0;
margin: 0 auto;
}

#modal_color li {
display: block;
width: 50%;
padding: 0;
margin: 5px 0;
text-align: left;
float: left;
}

#modal_color li a {
display: block;
height: 60px;
line-height: 60px;
padding: 0 0 0 65px;
font-size: 100%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
text-decoration: none;
background-position: left center;
background-repeat: no-repeat;
background-size: 60px;
color: #9c9c9c;
}

#modal_color li a:hover {
color: #fff;
}

#modal_color li a.icon_color-default {
background-image: url(../common/icon_color-default.png);
}

#modal_color li a.icon_color-white {
background-image: url(../common/icon_color-white.png);
}

#modal_color li a.icon_color-white {
background-image: url(../common/icon_color-white.png);
}

#modal_color li a.icon_color-gray_white {
background-image: url(../common/icon_color-gray_white.png);
}

#modal_color li a.icon_color-gray_black {
background-image: url(../common/icon_color-gray_black.png);
}

#modal_color li a.icon_color-black {
background-image: url(../common/icon_color-black.png);
}

/*
#modal_color li a.icon_color-red {
background-image: url(../common/icon_color-red.png);
}

#modal_color li a.icon_color-green {
background-image: url(../common/icon_color-green.png);
}

#modal_color li a.icon_color-blue {
background-image: url(../common/icon_color-blue.png);
}
*/

#modal_color li a.icon_color-ryuta {
background-image: url(../common/icon_color-ryuta.png);
}

#modal_color li a.icon_color-kazuki {
background-image: url(../common/icon_color-kazuki.png);
}

#modal_color li a.icon_color-genki {
background-image: url(../common/icon_color-genki.png);
}

#modal_color li a.icon_color-seiji {
background-image: url(../common/icon_color-seiji.png);
}

/* MODAL PLAYER */
#modal_player {}

#modal_player #embed_player_area {
display: block;
width: 100%;
height: auto;
padding: 0;
margin: 15px auto;
background-color: #000;
border: 2px solid #2c2c2c;
}

#modal_player .embed_player_caption {
color: #9c9c9c;
text-align: left;
}

#modal_player .embed_player_caption h4 {
color: #9c9c9c;
}

/* lity Customize */
.lity-close {
display: block !important;
width: 35px !important;
height: 35px !important;
color: #5c5c5c !important;
text-shadow: none !important;
font-family:'Noto Sans Japanese','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif !important;
font-weight: 300 !important;
top: 10px !important;
right: 10px !important;
}

.lity-close::-moz-focus-inner {
border: 0;
padding: 0;
}

.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
color: #fff !important;
/* text-shadow: 1px 1px 8px #29d4ff, 0px 0px 4px #17748b !important; */
}

/*==================================
lity.css
==================================*/
/*! Lity - v1.6.0 - 2016-01-11
* http://sorgalla.com/lity/
* Copyright (c) 2016 Jan Sorgalla; Licensed MIT */
.lity {
z-index: 9990;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
white-space: nowrap;
background-color: #0c0c0c;
background-image: url(../common/bg_blackfabric.png);
background-position: left top;
background-repeat: repeat;
background-size: 150px;
outline: none !important;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
height: 100vh;
}
.lity.lity-opened {
opacity: 1;
}
.lity.lity-closed {
opacity: 0;
}
 input
,textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lity-wrap {
z-index: 9990;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
outline: none !important;
}
.lity-wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.lity-loader {
z-index: 9991;
color: #fff;
position: absolute;
top: 50%;
margin-top: -0.8em;
width: 100%;
text-align: center;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.lity-loading .lity-loader {
opacity: 1;
}
.lity-container {
z-index: 9992;
position: relative;
text-align: left;
vertical-align: middle;
display: inline-block;
white-space: normal;
max-width: 100%;
max-height: 100%;
outline: none !important;
}
.lity-content {
z-index: 9993;
width: 100%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s ease;
-o-transition: -o-transform 0.3s ease;
transition: transform 0.3s ease;
}
.lity-loading .lity-content,
.lity-closed .lity-content {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
.lity-content:after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
/*
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
*/
}
.lity-close {
z-index: 9994;
width: 35px;
height: 35px;
position: fixed;
right: 0;
top: 0;
-webkit-appearance: none;
cursor: pointer;
text-decoration: none;
text-align: center;
padding: 0;
color: #fff;
font-style: normal;
font-size: 35px;
font-family: Arial, Baskerville, monospace;
line-height: 35px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 0;
background: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.lity-close::-moz-focus-inner {
border: 0;
padding: 0;
}
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
text-decoration: none;
text-align: center;
padding: 0;
color: #fff;
font-style: normal;
font-size: 35px;
font-family: Arial, Baskerville, monospace;
line-height: 35px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 0;
background: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.lity-close:active {
top: 1px;
}
/* Image */
.lity-image img {
max-width: 100%;
display: block;
line-height: 0;
border: 0;
}
/* iFrame */
.lity-iframe .lity-container {
width: 100%;
max-width: 964px;
}
.lity-iframe-container {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.lity-iframe-container iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000;
}
.lity-hide {
display: none;
}

/*==================================
Boxer.css
==================================*/
/* 
* Boxer v3.3.0 - 2015-04-04 
* A jQuery plugin for displaying images, videos or content in a modal overlay. Part of the Formstone Library. 
* http://classic.formstone.it/boxer/ 
* 
* Copyright 2015 Ben Plum; MIT Licensed 
*/

.boxer-lock {
overflow: hidden !important;
}
#boxer-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
background: #000;
opacity: 0;
-webkit-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
.boxer-open #boxer-overlay {
/*   opacity: 0.75; */
opacity: 1;
}
#boxer {
width: 200px;
height: 200px;
position: absolute;
right: 0;
left: 0;
z-index: 101;
/*
background: #ffffff;
border-radius: 3px;
box-shadow: 0 0 25px #000000;
*/
opacity: 0;
margin: 0 auto;
padding: 10px;
}
#boxer * {
-webkit-transition: none;
transition: none;
}
#boxer,
#boxer * {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
#boxer,
#boxer *,
#boxer *:before,
#boxer *:after {
box-sizing: border-box;
}
#boxer.fixed {
position: fixed;
top: 0;
bottom: 0;
margin: auto;
}
#boxer.inline {
padding: 30px;
}
#boxer.animating {
-webkit-transition: height 0.25s ease, width 0.25s ease, opacity 0.25s linear, top 0.25s ease;
transition: height 0.25s ease, width 0.25s ease, opacity 0.25s linear, top 0.25s ease;
}
#boxer.animating .boxer-container {
-webkit-transition: opacity 0.25s linear 0.25s;
transition: opacity 0.25s linear 0.25s;
}
.boxer-open #boxer {
opacity: 1;
}
#boxer.loading .boxer-container {
opacity: 0;
-webkit-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
#boxer .boxer-close {
width: 45px;
height: 45px;
position: absolute;
top: -7.5px;
right: -7.5px;
z-index: 105;
background: #000;
border: 1px solid #9c9c9c;
/*   border-radius: 100%; */
cursor: pointer;
display: block;
overflow: hidden;
padding: 0;
text-indent: 200%;
white-space: nowrap;
}
#boxer .boxer-close:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;
content: "\00d7";
display: block;
font-size: 30px;
font-weight: 400;
line-height: 42px;
margin: auto;
text-align: center;
text-indent: 0;
-webkit-transition: color 0.15s linear;
transition: color 0.15s linear;
}
.no-opacity #boxer .boxer-close {
text-indent: -999px;
}
#boxer .boxer-loading {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 105;
display: block;
margin: auto;
opacity: 0;
-webkit-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
#boxer .boxer-loading:before,
#boxer .boxer-loading:after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 110%;
content: '';
display: block;
}
#boxer .boxer-loading:before {
border: 5px solid rgba(51, 51, 51, 0.25);
}
#boxer .boxer-loading:after {
-webkit-animation: boxer-loading-spin 0.75s linear infinite;
animation: boxer-loading-spin 0.75s linear infinite;
border: 5px solid transparent;
border-top-color: #9c9c9c;
}
#boxer.loading .boxer-loading {
opacity: 1;
}
@-webkit-keyframes boxer-loading-spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes boxer-loading-spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#boxer .boxer-container {
width: 100%;
height: 100%;
position: relative;
z-index: 103;
background: #ffffff;
overflow: hidden;
}
#boxer .boxer-content {
width: 100%;
background: #ffffff;
opacity: 1;
overflow: hidden;
padding: 0;
}
#boxer.inline .boxer-content,
#boxer.iframe .boxer-content {
width: auto;
}
#boxer .boxer-image {
float: left;
}
#boxer .boxer-video {
width: 100%;
height: 100%;
}
#boxer .boxer-iframe {
width: 100%;
height: 100%;
border: none;
float: left;
overflow: auto;
}
#boxer .boxer-meta {
clear: both;
}
#boxer .boxer-control {
width: 40px;
height: 40px;
position: absolute;
top: 0;
/*   background: #ffffff; */
background-color: rgba(255,255,255,.5);
border-radius: 100%;
/*   box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); */
cursor: pointer;
display: block;
margin-right: auto;
margin-left: auto;
opacity: 1;
overflow: hidden;
text-indent: 200%;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
white-space: nowrap;
}
#boxer .boxer-control:before {
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
margin: auto;
}
#boxer .boxer-control.previous {
left: 20px;
}
#boxer .boxer-control.previous:before {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 10.4px solid #333333;
margin-left: 14px;
}
#boxer .boxer-control.next {
right: 20px;
}
#boxer .boxer-control.next:before {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 10.4px solid #333333;
margin-right: 14px;
}
#boxer .boxer-control.disabled {
opacity: 0;
}
.no-opacity #boxer .boxer-control {
text-indent: -999px;
}
.no-touch #boxer .boxer-control {
opacity: 0;
}
.no-touch #boxer:hover .boxer-control {
opacity: 1;
}
.no-touch #boxer:hover .boxer-control.disabled {
opacity: 0;
cursor: default !important;
}
#boxer .boxer-meta {
/*   padding: 10px 0 0 0; */
}
#boxer .boxer-position {
/*
color: #999999;
font-size: 12px;
margin: 0;
padding: 15px 15px 0 15px;
*/
display: none;
}
#boxer .boxer-caption p {
color: #666666;
font-size: 14px;
margin: 0;
padding: 15px;
}
#boxer .boxer-caption.gallery p {
padding-top: 0;
}
#boxer .boxer-error {
width: 250px;
}
#boxer .boxer-error p {
color: #990000;
font-size: 14px;
margin: 0;
padding: 25px;
text-align: center;
text-transform: uppercase;
}
#boxer.mobile {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #111111;
border-radius: 0;
padding: 40px 0 0;
}
#boxer.mobile .boxer-close,
#boxer.mobile .boxer-close:hover {
height: 40px;
width: 40px;
top: 0;
right: 0;
background: #111111;
border-radius: 0;
}
#boxer.mobile .boxer-close:before,
#boxer.mobile .boxer-close:hover:before {
color: #cccccc;
font-size: 30px;
font-weight: 700;
line-height: 38px;
}
#boxer.mobile .boxer-loading:before {
border-color: rgba(153, 153, 153, 0.25);
}
#boxer.mobile .boxer-loading:after {
border-top-color: #999999;
}
#boxer.mobile .boxer-container {
background: #111111;
}
#boxer.mobile .boxer-content {
background-color: #111111;
}
#boxer.mobile .boxer-control {
width: 50px;
height: 100%;
background: #111111;
border-radius: 0;
box-shadow: none;
opacity: 1;
}
#boxer.mobile .boxer-control.previous {
left: 0;
}
#boxer.mobile .boxer-control.previous:before {
border-right-color: #eeeeee;
margin-left: 19px;
}
#boxer.mobile .boxer-control.next {
right: 0;
}
#boxer.mobile .boxer-control.next:before {
border-left-color: #eeeeee;
margin-right: 19px;
}
.no-touch #boxer.mobile .boxer-control,
.no-touch #boxer.mobile:hover .boxer-control {
opacity: 1;
}
.no-touch #boxer.mobile .boxer-control.disabled,
.no-touch #boxer.mobile:hover .boxer-control.disabled {
opacity: 0;
cursor: default !important;
}
#boxer.mobile .boxer-meta {
width: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: #111111;
padding: 30px 65px;
}
#boxer.mobile .boxer-position {
color: #999999;
font-size: 12px;
margin: 0;
padding: 0 15px 0 0;
}
#boxer.mobile .boxer-caption p {
color: #eeeeee;
font-size: 14px;
margin: 0;
padding: 0;
}
#boxer.mobile .boxer-image {
-webkit-transition: none !important;
transition: none !important;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#boxer.mobile.animated .boxer-image {
-webkit-transition: -webkit-transform 0.25s ease-out !important;
transition: transform 0.25s ease-out !important;
}
#boxer.mobile.inline .boxer-content,
#boxer.mobile.iframe .boxer-content {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

/*==========================================
クリア*/
.fix {
overflow: hidden;
zoom: 1;
}

.sp_none {
display: none;
}

/*全てにおいて非表示*/
.none {
display: none;
}

/*========================== 追記 ==========================*/
input[type=checkbox],
input[type=radio] {
display: inline-block !important;
margin: 8px !important;
width: auto !important;
}
input[type=radio] {
-webkit-appearance: radio !important;
}
input[type=checkbox] {
-webkit-appearance: checkbox !important;
}
.step_now {
padding:5px;
background-color:#FFFFFF;
color:#000000;
font-size:12px;
display: inline-block;
margin-bottom: 5px;
}
.step_other {
margin-left:2px;
padding:5px;
background-color:grey;
color:#FFFFFF;
font-size:12px;
display: inline-block;
margin-bottom: 5px;
}
#modal_color li a {
line-height: unset;
display: table-cell;
vertical-align: middle;
}