@charset "utf-8";

@import "avancer/avancer_styles.less";
@import "style/index_styles.less";
@import "iconfont/icons.less";

/* ==========================================================================
index限定（index_style.lessから収得）
start
========================================================================== */

@admin_color:#23466e;

#index_area{
    color:@index_font_color;
    background:url("@{index_bg_url}") no-repeat center center;
    background-size:cover;
    min-height:100vh;
    margin-top:-35px;
}

.title_h3.dh_center_font.index_area{
    color:@index_content_title_color;
    &::before{
    background: @index_h_color;
}
}

.dh_contents_box.index_area{
    background: @index_content_bg_color;
    color:@index_content_font_color;
    border:@index_border;
}

.dh_title_index_h1{
    color:@index_content_title_color;
    border-bottom: 5px solid @index_h_color;
    padding-left: 10px;
    font-size: 1.7em;
    text-align: center;
    margin-bottom:10px;
}

.block_content__users.index_area{
    color:@index_content_font_color;
    background:@index_content_bg_color;
}

.less_tooltip{
    padding:2px;
    background:#333;
    color:#fff;
    font-size: 12px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ==========================================================================
index限定（index_style.lessから収得）
end
========================================================================== */


.float_left{
float:left;
&::after{
    content:"";
    clear:both;
}
}


.hidden_desktop{
display:none;
}

.visible_phone{
display:none;
}
.visible_tablet{
display:none;
}
.visible_desktop{
display:block;
}

#index_btn{
width:0;
transition: .3s;
background: red;
border-bottom: 5px solid crimson;
}
#index_btn:hover{
opacity:0.75;
transition: .3s;
}

body{
    font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin:0;
    color:#666;
    margin-bottom:30px;
}

a{
    text-decoration: none;
    color:#0388cc;
    transition:.5s;
    &:hover{
        color:lighten(#0388cc,20%);
        text-decoration: underline !important;
        transition:.5s;
    }
}

a.text{
    font-size:16px;
    background: linear-gradient(transparent 75%, #b2cbe4 100%);
    font-weight:bold;
}

a:link {
    text-decoration: none;
}

.dh_slidemenu_a{
    display:none;
}

.dh_col_parent.dh_header.user{
    text-align:center;
    width:1100px;
}

.dh_col_parent.dh_header{
    max-width: 100%;
    min-height:50px;
    &>.dh_col_child_3{
       max-width: 28%;
    }
    &>.dh_col_child_7{
        max-width: 68%;
    }
}

#dh_header{
width:100%;
min-height:20px;
margin:0 auto;
position:relative;
margin-bottom:30px;
}

.dh_header.admin{
	border-bottom:@admin_color double 5px;
}

#dh_fotter_fiexd{
position:fixed;
width:100%;
min-height:20px;
margin:0 auto;
margin-top:30px;
background:#eee;
bottom:0;
z-index:999999;
}

#dh_fotter{
    padding-top:20px;
    margin-top:20px;
    border-top:3px solid @main_color;
}


#dh_header:after{
	content: "";
	clear: both;
	display: block;
}

#dh_footer{
width:100%;
min-height:20px;
margin:0 auto;
position:relative;
margin-top:30px;
}

.dh_col_parent{
width:100%;
max-width:1200px;
min-height:20px;
margin:0 auto;
position:relative;
box-sizing:border-box;
display: flex;
display: -ms-flexbox;
flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
//flex-direction: row-reverse;
flex-wrap: nowrap;
}
@media screen and (max-width: 1200px) {
    .dh_col_parent.content{
        margin-left:5%;
        width:95%;
    }
}
.dh_col_parent::after {
clear: both;
}

[class*="dh_col_child"] {
    float: left;
    min-height: 20px;
    margin-left: 1%;
    word-wrap:break-word;
    float:left;
}

.dh_col_child_1{
max-width:100px;
width:8%;
}

.dh_col_child_2{
max-width:220px;
width:18%;
}

.dh_col_child_3{
max-width:340px;
width:28%;
}

.dh_col_child_4{
max-width:460px;
width:38%;
}

.dh_col_child_5{
max-width:580px;
width:48%;
}

.dh_col_child_6{
max-width:700px;
width:58%;
}

.dh_col_child_7{
max-width:820px;
width:68%;
}

.dh_col_child_8{
max-width:940px;
width:78%;
}

.dh_col_child_9{
max-width:1060px;
width:88%;
}

.dh_col_child_10{
max-width:1180px;
width:98%;
}

.dh_btn_square.head_menu_button{
padding:10px;
min-width:95px;
height:50px;
margin-top:25px;
}

.dh_btn_square.head_menu_button.admin{
    background: #fff;
    border: #dfe0d8 solid 1px;
    color:#666;
}
.dh_logo_font{
    color:#fff;
}


.dh_material_icons(12px);


.dh_col_center_base{
width:100vw;
height:100vh;
margin:0 auto;
position:relative;
}

.dh_col_center{
display:none;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:#FFF;
padding:20px;
border-radius:15px;
max-height: 100vh;
margin: 20px 0px;
}


.dh_col_center h2{
font-size:1.3em;
text-align:center;
}

.dh_col_center:after{
	content: "";
	clear: both;
	display: block;
}

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

.dh_logo.admin{
    height:100%;
    text-align:left;
}

.dh_logo_font > .material-icons{
    font-size:28px;
    color:#fff;
    border:#fff 2px solid;
    border-radius:50%;
    transition:.5s;
   	 margin-right: 10px;
    &:hover{
        background:#fff;
        color:#000;
        transition:.5s;
    }
}

.dh_logo_font.admin{
    margin-top:10px;
}

.dh_logo_font.admin > .material-icons{
    color:#fff000;
    border:#fff000 2px solid;
    &:hover{
        background:#fff000;
	    color:#666;
    }
}


.dh_logo img{
margin:5px;
text-align:center;
max-height: 75px;
max-width:100%;
}

#dh_error_msg {
height:0px;
color: red;
opacity:0;
transition: 1s;
margin:0;
font-size:0.7em;
}

.dh_error_msg {
height:0px;
color: red;
opacity:0;
transition: 1s;
margin:0;
font-size:0.7em;
}

[class*="dh_error_msg_"]{
	height:0px;
	color: red;
	opacity:0;
	transition: 1s;
	margin:0;
	font-size:0.7em;
}

.dh_error_msg_id {
height:0px;
color: red;
opacity:0;
transition: 1s;
margin:0;
font-size:0.7em;
}

.dh_error_msg_pw {
height:0px;
color: red;
opacity:0;
transition: 1s;
margin:0;
font-size:0.7em;
}

#dh_error_msg_key {
height:0px;
color: red;
opacity:0;
transition: 1s;
margin:0;
font-size:0.7em;
}

#kyokadate_error_msg {
height:0px;
color: red;
opacity:0;
transition: 1s;
margin:0;
font-size:0.7em;
}

.dh_contents_box{
padding:10px;
margin: auto;
margin-bottom:10px;
background:#efefef;
font-size:0.9em;
}

.dh_preview_box{
padding:5px;
width:100%;
border:solid 2px #666;
display:flex;
}

.dh_manage_table{
margin-left:20px;
overflow:hidden;
max-height:50px;
vertical-align: top;
}

.dh_manage_table_body{
width:100%;
}

/*
.dh_manage_table_body tr:nth-child(odd) td {
  background-color: #EAF6FD;
}
.dh_manage_table_body tr:nth-child(even) td {
  background-color: #EFEFEF;
}
*/

.dh_manage_table > .block_content__users{
overflow:hidden;
height:50px;
padding:10px 0px;
}

.dh_manage_table > a > .dh_title_left_border{
overflow:hidden;
padding:10px 0px;
border:none;
}

.dh_manage_table_first_cld{
padding-top:10px;
min-width:100px;
}

.page_title{
    margin-top:30px;
    background: @page_title;
    padding: 10px;
    border-bottom: 15px double #fff;
    font-weight: bold;
    font-size: 20px;
    color:@page_title_font_color;
}

.dh_block_ui_box{
    position:relative;
    padding:20px;
    list-style-type: none;
    margin-top:20px;
    width:350px;
    height:70px;
    overflow:hidden;
    max-width:100%;
    border:dotted 2px #00008b;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    color:#666;
    border-radius:15px;
    cursor:grab;
    &::before{
        content:"";
        background:#00008b;
        width:10px;
        height:10px;
        margin-right:5px;
        display: inline-block;
    }
}

.dh_page_ui_box{
    padding: 16px;
    list-style-type: none;
    margin-top: 10px;
    width: 250px;
    height: 50px;
    overflow: hidden;
    max-width: 100%;
    background: #eee;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    border-radius: 15px;
}
.sortable.ui-sortable{
    padding-left:0px;
}

.isRequired::before{
    content:"*";
    color:red;
    position: absolute;
    margin: 7px -10px;
}

.dh_img_list{
float: left;
    width: 19%;
    height: 200px;
    overflow: hidden;
    border: 2px solid #ffff00;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    margin-left: 15px;
    margin-top: 10px;
    box-shadow: 0px 2px 5px 0px #666;
}
.p_msg{
    margin-top: -15px;
    font-size: 0.8em;
    color: #ff0000;
}

.dh_menu_parent{
    position:relative;
    display:inline-block;
}

.dh_menu_child{
    display:none;
    background:#fff;
    width:300px;
    color:#fff;
    border:1px solid #0388cc;
    padding:5px;
    z-index:1000;
    margin-top:-11px;
}

.dh_menu_child a{
    color:#666;
}

.dh_manual_panel_swich{
    cursor:pointer;
    display:inline-block;
    border-bottom:2px solid #efefef;
}

.dh_manual_panel{
    padding:15px;
    border:2px solid #efefef;
    display:none;
    letter-spacing:1px;
    margin-bottom:20px;
}

#use_img img{
    max-width:20%;
}

.block_content__users{
    font-size:1.1em;
    letter-spacing:2px;
}

[id*="member_msgbox"]{
    padding:10px;
    background: #eaffe3;
    color:#409945;
    border: 5px #eee solid;
    opacity: 0.85;
    width:100%;
    max-width:700px;
    height:auto;
    position:fixed;
    right:0px;
    left:0px;
    margin: 0 auto;
    top:0px;
    z-index:999999;
    display:none;
}

table{
    table-layout: fixed;
}

.dh_table_responsive tr{
    border-bottom:2px #efefef solid;
    max-height:30px;
    overflow:hidden;
    cursor:pointer;
    table-layout: fixed;
&:hover{
    background:#f4fbff;
}
}
.dh_table_responsive td,
.dh_table_responsive th{
    padding:8px;
    max-height:30px;
}
.dh_teble_inner_text{
   max-height:30px;
   overflow:hidden;
}

.dh_teble_inner_text.page_manage{
   max-height:25px;
   overflow:hidden;
}

.dh_manage_table_body:hover{
    background:#f4fbff;
}

.block_content__users{
    margin-top:10px;
}

.material-icons.dh_close_sort{
    right: 10px;
    position: absolute;
    top: 10px;
    padding:10px;
    background:#d23e3b;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
}

.banner_img_wrap{
    position:relative;
}

#dh_fotter > .dh_col_parent{
    text-align:center;
}

.dh_fotter_img{
    max-width:50%;
}

.company_info_content_under{
    margin-bottom:10px;
}

.deleteImg > .material-icons{
    padding:10px;
    background:#d23e3b;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    margin-right: 10px;
    vertical-align: middle;
}

#submit_limit_value,
#submit_limit_value_back{
    cursor:pointer;
    background:lighten(#f4fbff,15%);
    color:#666;
    text-align:center;
    margin-top:10px;
    border-radius:10px;
    border:2px #efefef solid;
    padding:5px 0px;
}

#samplePreview{
    text-align: center;
    font-weight: bold;
    border: 3px dotted #666;
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    cursor: pointer;
    width: 200px;
    margin: 0 auto;
    font-size: 12px;
    transition:.5s;
    background:#fff;
    &:hover{
        border: 3px dotted #fff;
        background:#666;
        color:#fff;
        transition:.5s;
    }
}

.dh_img_list_img{
     max-width:100px;
     max-height:75px;
}

.ajax_image_use{
    width:10%;
}

.less_title{
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #efefef;
    margin-top: 30px;
    margin-bottom:30px;
}

.dh_label_left{
    width:300px;
    max-width:30%;
    float:left;
    padding:5px;
    transition:.5s;
    &:hover{
        transition:.5s;
        background:lighten(@main_color,30%);
        color:@main_color_font;
    }
}

.dh_label_right{
    width:700px;
    max-width:60%;
    float:left;
    padding:5px;
    transition:.5s;
    &:hover{
        background:lighten(@main_color,30%);
        transition:.5s;
        color:@main_color_font;
    }
}

.dh_label_right::after{
    clear:both;
    content:"";
    display:block;
}

.kokuchi_input{
    margin-left:10px;

}

.url_img{
    margin-top:20px;
    margin-bottom:0px;
}

[id*="use_img_url_"] {
    width: 400px;
    max-width: 60%;
}

#use_img_width,#use_img_height,#use_img_url{
    width:500px;
    max-width:75%;
}

.dh_img_cover img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    max-width:30%;
    font-family: 'object-fit: cover;'
}

.dh_slide_swich{
    border-style: none;
    max-width: 300px;
    height: auto;
    font-size: 14px;
    background-color: #00B900;
    padding: 5px;
    text-align: center;
    color: #ffffff;
    border-radius: 10px;
    transition: .3s;
    border-bottom: 5px solid darken(#00B900,10%);
    cursor: pointer;
}

.image_panel{
    background:#f4fbff;
    padding: 10px;
    border: 2px #efefef solid;
}

.dh_not_img{
    width: 300px;
    height: 200px;
    background: #efefef;
    padding: 30px;
    text-align: center;
    line-height: 135px;
    display: block;
}

/* ==========================================================================
インプット関係
start
========================================================================== */

.dh_control_group input, select {
 height: 30px;
 padding: 2px;
 line-height: 16px;
 border: 1px solid #ccc;
}

.dh_control_group {
	 padding: 10px;
}

.dh_control_group label {
	 display:inline-block;
}

:focus{
outline:0;
}

.dh_input_date{
  position: relative;
  display: inline-block;
  width: 160px;
  height: 36px;
  border: 2px solid #ccc;
  .input_radius;
}
.dh_input_date::before {
  position: absolute;
  content: "";
  top: 2px;
  right: 10px;
  width: 36px;
  height: 33px;
  background-color: #426fc5;
  background-image: url("image/calender_icon.png");
  background-repeat: no-repeat;
  background-position: center;
  .input_radius;
}
input[type="date"] {
    position: relative;
    padding: 0 10px;
    width: 160px;
    height: 36px;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    font-size: 14px;
    color: #999;
    transition: 0.2s;
    border: 1px solid #efefef;
}
input[type="text"],
input[type="password"],
input[type="date"],
select,textarea{
transition: 0.2s;
.input_radius;
}
select option{
.input_radius;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
textarea:hover,
textarea:focus,
select:hover,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus{
transition: 0.2s;
box-shadow: 0px 0px 10px 0.2px #426fc5;
.input_radius;
}

textarea{
    padding:15px 5px;
}

input[type="date"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
}
input[type="date"]::-webkit-clear-button{
  -webkit-appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

input#riyodate_from,
input#riyodate_to{
  position: relative;
  padding: 0 10px;
  width: 160px;
  height: 36px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  font-size: 14px;
  color: #999;
  transition: 0.2s;
}

input, textarea, select {
 outline: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-sizing: border-box;
        box-sizing: border-box;
}

.control-group input, select {
 height: 30px;
 padding: 2px;
 line-height: 16px;
 border: 1px solid #ccc;
}

.control-group {
	 padding: 10px;
}
.control-group label {
	 display:inline-block;
}

.dh_register_text{
    width: 100%;
    max-width: 500px;
    display:block;
}
.dh_register_text.textarea{
    height:300px;
}

.dh_color_paret{
    width:50px;
}

.dh_label_text{
    width: 100%;
    max-width: 500px;
}

.dh_select_panel{
	width:500px;
	max-width:60%;
	height:150px;
}

.dh_front_child{
    position:absolute;
    z-index:100;
    background:rgba(0,0,0,0.5);
    padding:10px;
}

.dh_next_action_panel{
    position: fixed;
    right: 0px;
    width: 0vw;
    background: rgba(0,0,0,0.5);
    height: 100vh;
    top: 0;
    padding-top: 100px;
    padding-left: 20px;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    transition: .5s;
}

.dh_next_action_title{
    font-size: 1.3em;
    color: #fff;
    padding-bottom: 20px;
    display:none;
}

.dh_next_action_info{
    font-size: 0.85em;
    color: #fff;
    padding-bottom: 20px;
    display:none;
}

.dh_next_action_close{
    cursor:pointer;
    margin-top:50px;
}

.dh_next_action{
    display:none;
}

/* ==========================================================================
ボタン
start
========================================================================== */

.submitbtn,.sumitbtnSort{
cursor:pointer;
}

.data__nextbtn,
.data__backbtn,
.member_data__nextbtn,
.member_data__backbtn{
    cursor:pointer;
	background:#000;
	color:#fff;
	transition: .2s;
	padding:5px;
	&:hover{
		background:#fff;
		color:#666;
		border:#000 solid 2px;
	    transition: .2s;
	}
}

.data__backbtn{
margin-right:10px;
}

.data__nextbtn{
margin-left:10px;
}

button,
html [type="button"],
input[type="submit"],
input[type="button"]{
  padding: 0;
  -webkit-appearance: none;
  cursor:pointer;
}

.dh_btn_normal{
border-style: none;
position:relative;
width:150px;
height:50px;
font-size:14px;
background-color:@btn_color;
padding:10px;
margin:10px auto;
text-align:center;
color:@btn_font_color;
.btn_radius;
transition: .3s;
border-bottom:5px solid darken(@btn_color, 10%);
&:hover {
	background-color: lighten(@btn_color, 10%);
	transition: .3s;
	color: @btn_font_color;
}
}

.dh_btn_normal.member_area{
    background:#5F4894;
    border-bottom:5px solid darken(#5F4894, 10%);
    &:hover {
		background-color: lighten(#5F4894, 10%);
		transition: .3s;
		color: #fff;
}
}

.dh_btn_normal.previewbtn{
    background:#00B900;
    border-bottom:5px solid darken(#00B900, 10%);
    &:hover {
		background-color: lighten(#00B900, 10%);
		transition: .3s;
		color: @btn_font_color;
	}
}

.dh_btn_normal.previewbtn.member_area{
    background:#FF3399;
    border-bottom:5px solid darken(#FF3399, 25%);
        &:hover {
		background-color: lighten(#FF3399, 10%);
		transition: .3s;
		color: @btn_font_color;
	}
}


.dh_btn_text{
border-style: none;
position: relative;
width: auto;
min-height: 25px;
font-size: 14px;
background-color: rgb(255,255,255,0);
text-align: center;
color: #666666;
transition: .3s;
&:hover {
	transition: .3s;
	color: #666666;
	border-bottom:2px solid #666;
}
}

.dh_btn_circle{
border-style: none;
position:relative;
width:@btn_circle_size_w;
height:@btn_circle_size_h;
font-size:14px;
background-color:@circle_btn_color;
//background: -moz-radial-gradient(circle darken(@btn_color, 30%),darken(@btn_color, 20%), darken(@btn_color, 10%),@btn_color);
//background: -webkit-radial-gradient(circle darken(@btn_color, 30%),darken(@btn_color, 20%), darken(@btn_color, 10%),@btn_color);
//background: -ms-radial-gradient(circle darken(@btn_color, 30%),darken(@btn_color, 20%), darken(@btn_color, 5%),@btn_color);
padding:10px;
margin:10px auto;
text-align:center;
color:@circle_btn_font_color;
border-radius:50%;
transition: .3s;
border-bottom:5px solid darken(@circle_btn_color, 10%);
border-left: 2px solid darken(@circle_btn_color, 10%);
border-right: 2px solid darken(@circle_btn_color, 10%);
border-top: 1px solid darken(@circle_btn_color, 5%);
&:hover {
	opacity:0.75;
	transition: .3s;
	color: @circle_btn_font_color;
	cursor:pointer;
}
}


.dh_btn_square{
border-style: none;
position:relative;
width:150px;
height:50px;
font-size:14px;
padding:10px;
margin:10px auto;
text-align:center;
color:@btn_font_color;
transition: .3s;
border:2px solid darken(@head_btn_color, 10%);
&:hover {
	background-color: darken(@head_btn_color, 10%);
	transition: .3s;
	color: @btn_font_color;
}
}

.dh_btn_square_mini {
border-style: none;
position: relative;
width: 30px;
height: auto;
font-size: 14px;
padding: 1px;
margin: 0px 3px auto;
text-align: center;
color:@btn_font_color;
transition: .3s;
background:@head_btn_color;
border:2px solid darken(@head_btn_color, 10%);
vertical-align: top;
border-radius: 10px;
&:hover {
	background-color: darken(@head_btn_color, 10%);
	transition: .3s;
	color: @btn_font_color;
}
}


.dh_btn_normal_elm{
display:inline-block;
position:relative;
font-size:14px;
background-color:@btn_color;
padding:10px;
margin:10px auto;
text-align:center;
color:@btn_font_color;
.btn_radius;
transition: .3s;
cursor:pointer;
border-bottom:5px solid darken(@btn_color, 10%);
&::after {
	position: absolute;
	bottom: -8px;
	left: 0;
	right: 0;
	content: '';
	width: 70%;
	height: 2px;
	background: lighten(@btn_color, 50%);
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	margin: 0 auto;
}
&:hover {
	background-color: lighten(@btn_color, 10%);
	transition: .3s;
	color: @btn_font_color;
}
&:hover::after {
	bottom: 6px;
	opacity: 1;
	visibility: visible;
}
}

.dh_btn_normal a{
color:#fff;
}

.dh_menu_btn{
}

.dh_btn{
border:1px solid @btn_border;
border-radius:50%;
transition: .5s;
padding:5px;
vertical-align:middle;
}

.dh_btn:hover{
transition: .5s;
background-color:@btn_bg_hover;
color:@btn_font_hover;
cursor:pointer;
}

.dh_close{
    padding:10px;
    background:#d23e3b;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
}

.dh_close_none{
    padding:10px;
    background:#d23e3b;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
}

.dh_on_close{
   color:#d23e3b;
   cursor:pointer;
   border-radius:50%;
}

.dh_btn_base{
position:relative;
vertical-align: top;
}

.dh_new_btn{
position:absolute;
width:40px;
height:10px;
padding:15px 0px;
right:10px;
border-radius:50%;
background-color:@btn_new_color;
text-align:center;
color:@btn_new_text;
line-height: 1;
font-size:12px;
}

.dh_search_byn{
border: none;
overflow: hidden;
cursor: pointer;
text-shadow: 1px 1px 1px #000;
border-radius: 8px;
vertical-align: middle;
background-color: #426fc5;
color: #fff;
}

.dh_search_byn:hover{
opacity:0.75;
}

.dh_checkbox, {
	display: none;
}
.dh_checkbox_1 {
	width: 32px;
	height: 32px;
	border: 1px solid #efefef;
	border-radius: 50%;
	display: inline-block;
	margin-left: 15px;
	vertical-align: middle;
}
.dh_checkbox_1_parts {
	position: relative;
}

.checkbox_use_1{
	content: "";
	display: block;
	position: absolute;
	top: 20px;
	left: 12px;
	width: 7px;
	height: 14px;
	transform: rotate(45deg);
	border-bottom: 3px solid #009a9a;
	border-right: 3px solid #009a9a;
	color: #009a9a;
	background-color: #f4fbff;
}

.checkbox_use_1_bf{
}

.dh_checkbox:checked+.dh_checkbox_1_parts::after {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 12px;
	width: 7px;
	height: 14px;
	transform: rotate(45deg);
	border-bottom: 3px solid #009a9a;
	border-right: 3px solid #009a9a;
	color: #009a9a;
	background-color: #f4fbff;
}

.dh_animation_border{
-webkit-animation:check_border 1.0s ease-in-out infinite alternate;
-moz-animation:check_border 1.0s ease-in-out infinite alternate;
animation:check_border 1.0s ease-in-out infinite alternate;
}

@-webkit-keyframes check_border{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes check_border{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes check_border{
    0% {opacity:0;}
    100% {opacity:1;}
}

.dh_checkbox_2{
    cursor:pointer;
}



.dh_checkbox:checked+.dh_checkbox_2_parts::before {
	border: 1px solid #aaa;
    background: @btn_color;
}

.checkbox_use_2_bf{
	border: 1px solid #aaa;
    background: @btn_color;
}

.dh_checkbox:checked+.dh_checkbox_2_parts::after {
	left: 22px;
	background: #fff;
}

.checkbox_use_2{
	left: 22px;
	background: #fff;
}

.dh_checkbox_2_parts {
    position: relative;
    width: 32px;
    transition: .3s;
    color: #444;
    border-radius: 50%;
    display: inline-block;
    line-height: 1;
    height: 32px;
    vertical-align: middle;
    margin-right:20px;
&::before {
	content: "";
	display: block;
	left: 9px;
	height: 20px;
	border-radius: 15px;
	border: 1px solid #aaa;
	background: #fff;
	position: absolute;
	top: 5px;
	width: 30px;
	height: 20px;
}
&::after {
	content: "";
	display: block;
	position: absolute;
	top: 7px;
	left: 11px;
	width: 17px;
	height: 17px;
	background: #aaa;
	border-radius: 50%;
	transition: .2s;
	display: block;
}
}

.dh_pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index:100;
}
.dh_pagetop a {
    display: block;
    background-color: darken(@main_color,30%);
    text-align: center;
    color: @main_color;
    font-size: 12px;
    text-decoration: none;
    padding: 20px 17px;
    border-radius: 50%;
}

.dh_pagetop a:hover {
    display: block;
    background-color: darken(@main_color,50%);
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    border-radius:0%;
}

.dh_btn_square.head_menu_button{
    background:#00633A;
    border:#47845E solid 1px;
    font-size: 12px;
    width: 110px;
}

.dh_hide_btn{
    border-style: none;
    position: absolute;
    margin: 10px auto;
    text-align: center;
    border-radius: 50%;
    transition: .3s;
    left:0;
}

[id*="use_status_id_"]{
    &::after{
        content: "有効化";
        display: inline-block;
        margin-left: 25px;
        width: 100px;
        height: auto;
        vertical-align: top;
        line-height: 13px;
    }
}


.dh_btn_square.dh_btn_square.in_menu{
    margin:3px;
    width:200px;
    background:@main_color;
    border:2px solid darken(@main_color,10%);
    color:@main_color_font;
}

.dh_sm_wrap > .dh_btn_square.head_menu_button{
    background:@main_color;
    border:2px solid darken(@main_color,10%);
}

.dh_btn_open__container {
  text-align: center;
  padding: 20px;
}

.dh_btn_open {
  display: inline-block;
  width: 250px;
  height:40px;
  text-align: center;
  background-color: #ff0000;
  font-size: 14px;
  line-height: 42px;
  color:#fff;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #efefef;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.dh_btn_open:after{
  width: 85%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background : #fff;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.dh_btn_open:hover{
  color: #ff0000;
  border-left: 0px solid #efefef;
  border-right: 0px solid #efefef;
  border-top: 2px solid #ff0000;
  border-bottom: 2px solid #ff0000;
}
.dh_btn_open:hover:after{
  height: 420%;
  opacity: 1;
}
.dh_btn_open:active:after{
  height: 420%;
  opacity: 1;
}

.deleteImg{
    width:45px;
}

.dh_close_btn_msgbox {
    position: absolute;
    top: 3px;
    right: 10px;
    background: #dddddd;
    text-align: center;
    width: 23px;
    height: 22px;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
}

/* ==========================================================================
ボタン
end
========================================================================== */

/* ==========================================================================
スライドメニュー
start
========================================================================== */


.dh_slide_menu {
	.use_menu;
	transition: 0.25s;
	position: fixed;
	z-index: 1000;
	background-color: @menu_bg;
	overflow: scroll;
}

.dh_slide_menu.admin{
    background:rgba(255, 255, 255, 0.75);
}


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

.dh_trigger_btn{

}

.active_menu{
.use_menu_active;
transition: 0.5s;
}

.dh_menu_col_parent{
width:100%;
max-width:750px;
min-height:20px;
margin:0 auto;
position:relative;
}

/*メモ：メニューチャイルドには6番が最大
場合によっては親に直接要素を入れる？*/

#dh_popup_menu{
display:block;
}

.dh_popup_menu {
position: fixed;
margin-left: auto;
margin-right: auto;
padding: 20px;
color: #000;
background-color: #fff;
z-index: 11001;
box-shadow: 0px 0px 15px #888888, 5px 5px 10px #888888;
overflow: auto;
transform:scale(0.2, 0.2);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 600px;
}

.dh_mini_menu{
position:fixed;
height:100vh;
width:50px;
display: flex;
flex-direction:column;
z-index:10000;
right:0;
}

.dh_mini_menu > .dh_btn_circle{
width:40px;
height:37px;
padding:0px;
margin:0px auto;
margin-top:5px;
}

.dh_btn_circle > .material-icons{
line-height:1.5;
}

.error_panel{
    width:90%;
    margin:0 auto;
    padding:10px;
    background:#d23e3b;
    color:#fff;
    opacity:0.8;
}

.from_addmin_msg_block{
    padding: 10px;
    background: #efefef;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    border-radius: 15px;
}
.from_addmin_msg_block_title{
    font-weight:bold;
    border-bottom:5px solid #efefef;
    margin-bottom:10px;
}

.material-icons.dh_close_sort.head{
    font-size:12px;
}

/* ==========================================================================
レイアウト
start
========================================================================== */

.dh_slick.layout_ptn_1{
    text-align:center;
}

.slick-slide img{
    display:inline-block;
}

.slick-slide{
    height:auto;
}

[class*="dh_col_child"].layout_ptn_2{
	height:75vh;
}

[class*="dh_col_child"].layout_ptn_2{
	height:75vh;
}

[class*="dh_col_child"].layout_ptn_0{
	text-align:center;
}

.dh_slick.layout_ptn_2{
    max-width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: absolute;
    top: -5px;
    height: 100%;
    overflow: hidden;
    z-index: -100;
    left: 0;
    right: 0;
}

.dh_eye_cat_area.layout_ptn_0 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

.dh_eye_cat_area.layout_ptn_1 img{
    max-width: 1200px;
    height:500px;
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

.dh_eye_cat_area.layout_ptn_2 img{
    width:100%;
}

.dh_thumbnail{
    max-width: 1000px;
    margin: 0 auto;
    & img{
        cursor:pointer;
    }
}

@media screen and (max-width: 768px) {
	.dh_eye_cat_area.layout_ptn_0 img{
	    width: 200px;
	    height: 200px;
	    object-fit: cover;
	    max-width:48%;
	}
	.dh_eye_cat_area.layout_ptn_1 img{
	    height: 350px;
	    object-fit: cover;
	    font-family: 'object-fit: cover;'
	}
}

/* ==========================================================================
レイアウト
end
========================================================================== */
/* ==========================================================================
エフェクト
start
========================================================================== */

.dh_effect_img_1 img{
border-radius:50%;
transition: 0.2s;
}

.dh_effect_img_1 img:hover{
border-radius:0%;
transition: 0.2s;
}

.dh_elm_blink{
	margin-top:5px;
	vertical-align:middle;
	display: inline-block;
	-webkit-animation:elm_blink 1.0s ease-in-out infinite alternate;
	-moz-animation:elm_blink 1.0s ease-in-out infinite alternate;
	animation:elm_blink 1.0s ease-in-out infinite alternate;
}

.material-icons.warning{
    color: #fff000;
    vertical-align: top;
    margin-right: 10px;
	-webkit-animation:elm_blink 1.0s ease-in-out infinite alternate;
	-moz-animation:elm_blink 1.0s ease-in-out infinite alternate;
	animation:elm_blink 1.0s ease-in-out infinite alternate;
}

@-webkit-keyframes elm_blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes elm_blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes elm_blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.dh_pos_rel{
position:relative;
}

.dh_tooltips{
position:absolute;
width:100px;
top: @tooltip_area;
left:50px;
background:rgba( 0, 0, 0, 0.75 );
color:#fff;
transition: 0.2s;
font-size:0.9em;
padding:5px;
text-align:center;
transition: 0.2s;
}

.register_block{
top:@tooltip_area_high;
width:auto;
}

.register_userid:hover > .dh_tooltips,
label:hover > .dh_tooltips{
top:-30px;
transition: 0.2s;
}

.dh_title_left_border{
border-left:20px solid @main_color;
padding-left:10px;
font-size:20px;
}

.dh_scroll_wrap{
    opacity:1;
    transition:1s;
    transform:translateY(0px);
}

.control_label{
width:400px;
max-width:80%;
}

.dh_center_dialog {
    width: 50vw;
    height: 50vh;
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display:none;
    z-index:100;
}

.dh_center_dialog_base{
    top:0;
    width: 100vw;
    position: absolute;
    z-index:99;
    background-color:#000;
    opacity:0.75;
}

/* ==========================================================================
フォント
start
========================================================================== */

.dh_center_font{
text-align:center;
}

.title_h3{
font-size:24px;
margin-bottom:30px;
&::before{
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    border-radius: 50%;
    background: #00B900;
    margin-bottom: -3px;
    margin-right: 5px;
}
}

.title_h3.member_area{
	&::before{
	    border-radius: 0%;
	    background: #FF3399;
	    transform:rotate(45deg);
	    margin-right: 10px;
	    width: 20px;
	    height: 20px;
    }
}

.material-icons.dh_icon{
vertical-align:bottom;
color:@btn_color;
}

.title_h3.index{
&::before{
    background: #ff0000;
}
}


.clickSlide{
    margin-top:20px;
}

.slideButton{
    margin-top:20px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
}

.material-icons.delete{
	color:#DC143C;
}

.dh_member_flg{
	color:#DC143C;
}

.contact_style {
    font-size: 18px;
    font-weight: bold;
}


/* ==========================================================================
フォント
end
========================================================================== */


/* ==========================================================================
desltop styles
start
========================================================================== */
@media screen and (min-width: 768px) {

}
/* ==========================================================================
end
phone styles
========================================================================== */

/* ==========================================================================
メニューボタン
start
========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1200px) {
.dh_col_parent.dh_header > .dh_col_child_3.admin{
	position:absolute;
	top:0;
	width:30%;
}

.dh_col_parent.dh_header > .dh_col_child_7{
    max-width:1200px;
    width:100%;
    margin-top:20px;
}

.sphidden{
    display:none;
}

}
/* ==========================================================================
メニューボタン
end
========================================================================== */

/* ==========================================================================
tablet&phone styles
start
========================================================================== */

@media screen and (max-width: 768px) {

body{
    overflow-x: hidden;
}

.dh_mini_menu{
    top:10px;
}

.dh_tooltips{
display:none;
}

.hidden_tablet{
display:none;
}
.hidden_desktop{
display:block;
}
.visible_phone{
display:none;
}
.visible_tablet{
display:block;
}
.visible_desktop{
display:none;
}

.dh_col_parent{
max-width:747px;
margin:0 auto;
display: table;
padding:0px 20px;
}

.dh_col_parent.dh_header.user{
    width:100vw;
}

.dh_col_parent.admin_mode{
    padding: 0 5%;
}


[class*="dh_col_child"] {
    min-height: 20px;
    margin-top:10px;
    margin-left: 0px;
    max-width:707px;
    width:100%;
}

[class*="dh_col_child"]::after {
clear: both;
}

.dh_btn_square.head_menu_button{
	padding:10px;
	width:100%;
	height:40px
}

#use_img img{
    max-width:70%;
}
[id*="member_msgbox"]{
    right:0px;
}

.dh_table_responsive thead{
    display:none;
}

.dh_table_responsive tr{
    border-bottom:2px #efefef solid;
}

.dh_table_responsive tbody{
    max-height:30px;
    overflow:hidden;
}

.dh_table_responsive tbody td{
    display:block;
    width:100%;
}

.dh_table_responsive tbody td::before{
    clear:left;
    float:left;
    content:attr(data-th);
    display:block;
    width: 40%;
    font-weight:bold;
    font-size:0.9em;
}

.dh_table_responsive.page_manage{
    table-layout: fixed;
}

.dh_table_responsive.page_manage tbody td::before{
    width: 25%;
}

.material-icons.delete{
    font-size:15px;
}

.dh_menu_parent{
    display:block;
}

.dh_slidemenu_a{
    display:inline-block;
    padding: 10px;
    background: #000;
    color: #fff;
    margin-top: 5px;
    font-size: 14px;
}

.dh_btn_square.head_menu_button{
    margin:0 auto;
}

.dh_sm_wrap{
    text-align: center;
}

.material-icons.menu_btn{
    margin-right: 10px;
}

.dh_fotter_img{
    max-width:90%;
}
.index_h1{
    font-size: 1.2em;
}

.dh_img_list{
    float: none;
    width: 90%;
    height: auto;
    overflow: visible;
}
.dh_img_list_img{
     max-width:60%;
     max-height:none;
}
.dh_upload_img_post{
    text-align:center;
}

.data__nextbtn,
.member_data__nextbtn{
    display:block;
    margin-bottom: 15px;
    margin-top: 30px;
}
.data__backbtn,
.member_data__backbtn{
    display:block;
    margin-left: 10px;
    margin-top: 15px;
    margin-bottom:30px;
    margin-right:0px;
}
.member_data__backbtn{
    margin-left:0px;
}
.dh_col_parent.dh_header > .dh_col_child_3 {
    max-width: 100%;
}

.dh_label_left{
    width:90%;
    max-width:100%;
    float:left;
    border-left:10px solid @main_color;
}

.dh_label_right{
    width:90%;
    max-width:100%;
    float:left;
    margin-bottom:10px;
    margin-left:10px;
}

.ajax_image_use{
    width:30%;
}

.dh_btn_square.head_menu_button.admin{
    color:#fff;
    background:#000;
    border:1px #fff solid;
}

.dh_select_panel{
	height:50px;
}

.dh_img_cover img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    max-width:48%;
}


}
/* ==========================================================================
end
tablet&phone styles
========================================================================== */
/* ==========================================================================
phone styles
start
========================================================================== */
@media screen and (max-width: 411px) {

.hidden_phone{
display:none;
}
.visible_phone{
display:block;
}
.visible_tablet{
display:none;
}
.visible_desktop{
display:none;
}

.dh_col_parent{
max-width:300px;
margin:0 auto;
display: table;
padding:0px 10px;
}

[class*="dh_col_child"] {
    min-height: 20px;
    margin-top:10px;
    margin-left: 0px;
    max-width:300px;
    width:100%;
}

[class*="dh_col_child"]::after {
clear: both;
}

}
/* ==========================================================================
end
phone styles
========================================================================== */

/* ==========================================================================
slick
start
========================================================================== */


.dh_slide_wrapper{
    width:100%;
    height:90%;
    margin:0 auto;
    overflow:hidden;
}
@media screen and (max-width: 767px) {
	.dh_slide_wrapper{
	    width:100%;
	    height:80%;
	    margin:0 auto;
	    overflow:hidden;
	}
	.cover{
	    object-fit: cover;
	    height:100vh;
	}

	.fill{
	    object-fit: fill;
	}

	.dh_slick img{
	    .cover;
	}
}


.mypattern{
}
.mypattern .slick-slide{
    margin: 5px;
}

/* ==========================================================================
slick
end
========================================================================== */
/* ==========================================================================
test area
start
========================================================================== */

.test_box{
height:500px;
}

/* ==========================================================================
end
test area
========================================================================== */