@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 {
min-height: 100vh;
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: 400;
letter-spacing: .04em;
color: #c9c9c9;
background-color: #000;
background-image: url(../common/body_bg_pattern.png);
background-position: center top;
background-repeat: repeat;
background-size: 2560px;
-webkit-text-size-adjust: 100%;
font-variant-ligatures: none;
}

/* CHANGE COLOR */
body.color_default {
background-color: #000;
background-image: none;
}

/*
body.color_red {
background-color: #e81354;
}

body.color_green {
background-color: #86b435;
}

body.color_blue {
background-color: #2ba6da;
}
*/

body.color_white {
background-color: #f9f9f9;
background-image: url(../common/body_bg_pattern_black.png);
}

body.color_gray_white {
background-color: #9c9c9c;
background-image: url(../common/body_bg_pattern_white.png);
}

body.color_gray_black {
background-color: #9c9c9c;
background-image: url(../common/body_bg_pattern_black.png);
}

body.color_black {
background-color: #1c1c1c;
background-image: url(../common/body_bg_pattern_white.png);
}

/* CHANGE PHOTO */
body.photo_ryuta {
background-color: #dd0;
}

body.photo_kazuki {
background-color: #dd0;
}

body.photo_genki {
background-color: #dd0;
}

body.photo_seiji {
background-color: #dd0;
}

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

section {
display: block;
padding: 45px 0;
margin: 0 auto;
width: 1024px;
background-color: #000;
}

.device_width {
display: block;
width: 860px;
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 30px 0;
font-size: 500%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 100;
letter-spacing: .12em;
line-height: 140%;
color: #fff;
}

#entry_contents h2 {
margin-bottom: 0;
}

h3 {
margin: 0 0 45px 0;
font-size: 160%;
font-weight: 500;
line-height: 140%;
/* letter-spacing: .12em; */
color: #5c5c5c;
}

#page_title h3 {
margin: 0;
}

.entry_title_area h3 {
margin: 0 0 10px 0;
font-size: 180%;
font-weight: 500;
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: 160%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
line-height: 150%;
color: #9c9c9c;
}

h4.subttl {
font-size: 200%;
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: 5px 0 5px 60px;
background-position: left center;
background-repeat: no-repeat;
background-size: 45px;
}

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

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

a {
color: #fff;
}

.caption {
font-size: 85%;
}

.text_imp {
color: #e60645;
}

/*==================================
Header
==================================*/
header {
display: block;
width: 1024px;
/* height: 180px; */
padding: 0;
margin: 0 auto;
/* background-color: var(--base-color); */
background-color: #000;
}

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

.header_after {}

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

.header_after li {
display: inline-block;
padding: 0;
margin: 0;
line-height: 30px;
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);
}

/*
.header_after li.text_dear {
display: block;
}
*/

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

/* header btn */
header a.btn_logout {
display: inline-block;
padding: 0 45px;
margin: 0;
border: 1px solid #9c9c9c;
font-size: 130%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
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: 0 45px;
margin: 0;
background-color: #fff;
border: 1px solid #fff;
font-size: 130%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 300;
letter-spacing: .12em;
text-decoration: none;
color: #000;
line-height: 30px;
float: left;
}

header a:hover.btn_login {
background-color: #00e7ef;
border: 1px solid #00e7ef;
color: #000;
}

header .btn_login_sub a {
display: block;
padding: 0 30px;
margin: 0;
/* border: 1px solid #9c9c9c; */
border-top: 1px solid #9c9c9c;
border-right: 1px solid #9c9c9c;
border-bottom: 1px solid #9c9c9c;
font-size: 100%;
font-weight: 200;
text-decoration: none;
color: #9c9c9c;
line-height: 30px;
float: left;
}

header .btn_login_sub a:hover {
background-color: #c9c9c9;
border-top: 1px solid #c9c9c9;
border-right: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
color: #000;
}

/* MENU BTN */
#btn_menu {
margin-left: 990px;
margin-top: 75px;
background-color: #000;
position: absolute;
}

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

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

/*==================================
Footer
==================================*/
footer {
display: block;
width: 1024px;
padding: 30px 0 90px 0;
margin: 0 auto;
background-color: #000;
color: #9c9c9c;
}

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

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

/* FOOTER SNS */
footer .footer_snsarea {
display: block;
height: 30px;
float: right;
}

footer .footer_snsarea a {
display: inline-block;
width: 30px;
height: 30px;
padding: 0;
margin: 10px 0 0 20px;
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;
font-size: 90%;
float: left;
}

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

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

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

footer .footer_linkarea .text_link a:first-child {
margin-left: 0;
}

footer .copyright {
font-family: 'Barlow Condensed', sans-serif;
font-size: 110%;
font-weight: 500;
letter-spacing: .1em;
}

/* PAGE TOP */
#btn_pagetop {
margin-left: 990px;
margin-top: -5px;
background-color: #000;
position: absolute;
}

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

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

/*==================================
Mainvisual-login
==================================*/
#mainvisual-login,
#mainvisual-before {
display: flex;
width: 100vw;
height: 100vh;
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;

z-index: 100;
}

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

/* ログイン前アー写 */
#mainvisual-before {
background-image: url(../img/mainvisual_before.jpg);
}

/* ランダム背景 */
.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: 20px 0;
margin: 30px auto;
font-size: 200%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 100;
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: 130%;
font-family: 'Noto Sans Japanese','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-weight: 400;
letter-spacing: .04em;
color: #9c9c9c;
}

/* COMMON BANNER */
#co_banner_area {}

#co_banner_area .inner {
display: block;
padding: 15px 30px 5px 30px;
margin: 0 auto;
}

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

background-color: #9c9c9c;
}

#co_banner_area .inner a:nth-child(3n) {
margin-right: 0;
}

#co_banner_area .inner a:hover {
box-shadow: 0px 0px 15px rgba(0,0,0,.8);
}

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

/* INTERROGRAM */
#interrogram {}

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

#interrogram li {
display: flex;
justify-content: center;
align-items: center;
width: 276px;
height: 276px;
padding: 0;
margin: 0 10px 10px 0;
border: 2px solid #fff;
background-color: #c9c9c9;
background-image: url(../common/bg_interrogram.png);
background-position: center center;
background-repeat: repeat;
background-size: 150px;
float: left;
}

#interrogram li:nth-child(3n) {
margin: 0 0 10px 0;
}

#interrogram li img {
width: auto;
max-width: 260px;
height: auto;
max-height: 260px;
box-shadow: 0px 0px 15px rgba(0,0,0,.1);
}

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

table.update_listn th,
table.update_listn td {
text-align: center;
}

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

table.update_listn td {
padding: 10px 15px;
margin: 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;
text-align: left;
}

table.update_listn td .date {
display: inline-block;
width: 90px;
font-size: 108%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
margin: 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: 15px 0;
border-collapse: collapse;
}

table.inner_table th,
table.inner_table td {
font-weight: 400;
}

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

table.inner_table td {
padding: 0;
margin: 0 0 5px 0;
border-bottom: 5px solid #101010;
border-left: 5px solid #101010;
background-color: #2c2c2c;
text-align: left;
}

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

table.inner_table_text th,
table.inner_table_text td {
font-weight: 400;
}

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

table.inner_table_text td {
padding: 0 15px;
margin: 0 0 5px 0;
border-bottom: 5px solid #101010;
border-left: 5px solid #101010;
background-color: #2c2c2c;
text-align: left;
}

table.inner_table_text td p {
padding: 0;
margin: 10px 0;
}

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

table.login_table th,
table.login_table td {
font-weight: 400;
}

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

table.login_table td {
padding: 0;
margin: 0 0 5px 0;
border-bottom: 5px solid #101010;
background-color: #2c2c2c;
text-align: left;
}

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

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

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:-ms-input-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;
*/
}

select {
display: block;
margin: 10px;
background-color: #fff;
}

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;
}

table.inner_table input,
table.inner_table textarea,
table.login_table input {
background-color: #2c2c2c;
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: #5c5c5c;
font-style: italic;
cursor: not-allowed;
}

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

/* AGREEMENT */
.agreement_form input[type=checkbox] {
display: inline-block;
margin: 0 15px 0 0;
width: 1em;
height: 1em;
}

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

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

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

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

/* INNER SCROLL */
.inner_scrollbox {
display: block;
padding: 0 30px 30px 30px;
margin: 30px auto;
height: 300px;
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-top: 30px;
}

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

/* Side Gradation */
#slide_banner_area .fade_left {
display: block;
width: 120px;
height: 240px;
padding: 0;
margin: 0 0 0 30px;
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));
}

#slide_banner_area .fade_right {
display: block;
width: 120px;
height: 240px;
padding: 0;
margin: 0 0 0 874px;
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));
}

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

#slide_banner_area .slider_topbanner a {
display: block;
width: 580px;
height: 240px;
padding: 0;
margin: 0 15px;
background-color: #2c2c2c;
}

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

/* INDEX CONTENTS */
.contents_panel {
margin-bottom: 20px;
float: left;
}

.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: 30px 0 0 0;
}

.contents_panel_inner .update_tab {
display: block;
width: 60px;
height: 60px;
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: 120px;
height: 120px;
padding: 0;
margin: 0 auto 15px auto;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

.contents_panel_inner .date {
display: block;
padding: 0 15px;
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 15px;
margin: 5px auto 10px auto;
font-size: 125%;
font-weight: 500;
line-height: 160%;
color: #fff;
text-align: center;

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

.contents_panel_inner .body_text {
display: block;
font-size: 95%;
padding: 0 15px;

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

.contents_panel_inner a .body_text {
color: #c9c9c9;
}

.contents_panel h5 {
height: 45px;
padding: 0 15px;
margin: 0;
line-height: 45px;
text-align: center;
font-size: 130%;
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;
}

/* パネル4列 */
#contents_panel_4line .contents_panel {
width: 200px;
margin-left: 20px;
}

#contents_panel_4line .contents_panel_inner a {
height: 320px;
}

/* パネル2列 */
#contents_panel_2line .contents_panel {
width: 420px;
margin-left: 20px;
}

#contents_panel_2line .contents_panel_inner a {
height: 120px;
padding: 15px 0;
}

#contents_panel_2line .icon_circle_area {
margin: 0 30px;
float: left;
}

#contents_panel_2line .contents_panel_inner .date,
#contents_panel_2line .contents_panel_inner h3 {
text-align: left;
padding: 0;
}

#contents_panel_2line .contents_panel_inner .date {
padding-top: 30px;
}

/* パネル3列 */
#contents_panel_3line .contents_panel {
width: 273px;
margin-left: 20px;
}

#contents_panel_3line .contents_panel_inner a {
height: 240px;
}

/* パネル3共通　左 */
#contents_panel_4line .contents_panel:first-of-type,
#contents_panel_2line .contents_panel:first-of-type,
#contents_panel_3line .contents_panel:first-of-type {
margin-left: 0;
}

/*==================================
PAGE ENTRY
==================================*/
#entry_contents .entry_area {
display: block;
padding: 60px;
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 45px 0;
}

#entry_contents .entry_read {
padding: 0;
margin: 0 0 30px 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 45px 0;
line-height: 45px;
text-align: center;
font-size: 130%;
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 30px;
text-decoration: none;
color: #c9c9c9;
}

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

/* ENTRY PAGE - CATEGORY ICON */
#page_title {
background-position: right top;
background-repeat: no-repeat;
background-size: 105px;
padding-right: 120px;
padding: 0 0 30px 0;
margin: 30px 0 0 0;
}

/* MEDIA */
.media_area {
display: flex;
/* width: 100%; */
/* height: 420px; */
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 45px 0;
background-image: url(../common/bg_media_area.png);
background-position: center center;
background-repeat: repeat;
background-size: 800px;
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: 420px;
}

/* MEDIA INTERROGRAM */
/*
.media_area.interrogram_photo {
height: auto;
padding: 30px;
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 {
display: block;
max-width: 720px;
height: auto;
padding: 10px !important;
margin: 0 auto 45px auto !important;
background-color: #c9c9c9;
background-image: url(../common/bg_interrogram.png);
background-position: center center;
background-repeat: repeat;
background-size: 150px;
box-shadow: 0px 0px 30px rgba(0,0,0,.8);
}

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

#scratch_area img {
padding: 0;
margin: 0 !important;
}

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

#scratch_area .scratch_title {
display: block;
height: 112px;
padding: 0;
margin: 60px 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: 30px 45px;
}

#scratch_area.win_page .scratch_win_message {
display: block;
width: 60%;
padding: 0;
margin: 0;
float: left;
}

#scratch_area.win_page .scratch_win_image {
display: block;
width: 40%;
padding: 0;
margin: 0;
text-align: right;
float: right;
}

#scratch_area.win_page .scratch_win_image img {
width: auto;
max-height: 100%;
}

#scratch_area.win_page .scratch_title_win {
display: block;
width: 254px;
height: 134px;
padding: 0;
margin: 90px 0 15px 0;
background-image: url(../common/scratch_title_win.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

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

#scratch_area.lose_page .scratch_title_lose {
display: block;
height: 134px;
padding: 0;
margin: 90px 0 30px 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;
width: 22%;
padding: 0;
margin: 0 4% 30px 0;
text-align: center;
background-color: #1c1c1c;
border-radius: 6px;
float: left;
}

.member_panel:last-of-type {
margin: 0;
}

.member_panel h5 {
padding: 70px 0 20px 0;
margin: 20px 0 0 0;
background-position: center top;
background-repeat: no-repeat;
background-size: 60px;
border-bottom: 1px solid #0c0c0c;
color: #9c9c9c;
font-size: 90%;
}

.member_panel p {
display: table-cell;
width: 22%;
height: 120px;
padding: 0;
margin: 0;
color: #fff;
vertical-align: middle;
text-shadow: 0px 0px 8px rgba(255,255,255,.2);
}

/* SPECIAL */
.member_special_index {}

.member_special_index .linkarea {
display: block;
height: 60px;
padding: 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: 210px;
padding: 0;
margin: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

/* MUSEUM */
.museum_photolist {}

.museum_photolist ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
}

.museum_photolist li {
display: flex;
justify-content: center;
align-items: center;
width: 226px;
height: 226px;
padding: 5px;
margin: 0 10px 10px 0;
border: 2px solid #fff;
background-color: #c9c9c9;
background-image: url(../common/bg_interrogram.png);
background-position: center center;
background-repeat: repeat;
background-size: 150px;
float: left;
}

.museum_photolist li:nth-child(3n) {
margin: 0 0 10px 0;
}

.museum_photolist li img {
width: auto !important;
max-width:  226px !important;
max-height: 226px !important;
}

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

dl.list_vertical dt {
display: block;
padding: 30px 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 10px 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 center;
background-repeat: no-repeat;
background-size: 80px;
padding-left: 100px;
}

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

/* MY PAGE */
.mypage_content {}

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

.mypage_content ul li {
display: inline-block;
padding: 0;
margin: 0 15px 0 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;
/* width: 980px; */
padding: 0;
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: 400%;
text-align: center;
text-decoration: none;
color: #fff;
}

/* MODAL FORM */
#modal_form {
width: 520px;
padding: 60px;
}

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

#modal_form a {
display: inline-block;
margin: 0 15px;
text-decoration: none;
color: #9c9c9c;
}

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

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

#modal_contents li {
display: inline-block;
width: 260px;
padding: 0;
margin: 10px;
}

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

#modal_contents a.link_official {
display: block;
width: 200px;
padding: 55px 0 0 0;
margin: 45px auto;
font-size: 140%;
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: 180px;
}

/* 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 {
list-style: none;
width: 860px;
padding: 0;
margin: 0 auto;
}

#modal_color li {
display: inline-block;
width: 140px;
padding: 0;
margin: 10px;
}

#modal_color li a {
display: block;
width: 140px;
padding: 120px 0 30px 0;
font-size: 140%;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: .12em;
text-decoration: none;
background-position: center top;
background-repeat: no-repeat;
background-size: 120px;
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-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 {
width: 480px;
}

#modal_player #embed_player_area {
display: block;
width: 480px;
height: 320px;
padding: 0;
margin: 30px auto;
background-color: #000;
border: 10px 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: 60px !important;
height: 60px !important;
color: #5c5c5c !important;
text-shadow: none !important;
font-size: 50px !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: 30px !important;
right: 30px !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;
font-size: 50px !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;
}
.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: 60px;
height: 60px;
position: fixed;
top: 0px;
right: 0px;
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: 45px;
font-weight: 300;
line-height: 52px;
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: 28px;
font-weight: 700;
line-height: 40px;
}
#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: 15px 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;
}

.pc_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:15px;
background-color:#FFFFFF;
color:#000000;
font-size:18px;
display: inline-block;
margin-bottom: 5px;
}
.step_other {
margin-left:2px;
padding:15px;
background-color:grey;
color:#FFFFFF;
font-size:18px;
display: inline-block;
margin-bottom: 5px;
}