@charset "UTF-8";
/* CSS Document */
#csr div.clm_header{
	background-image:url('../images/csr_bg_flag.jpg');
    background-size: cover;
    background-attachment: fixed;
	background-position:center;
	height:480px;
}

#csr_bar {
    background: url('../images/csr_bg_book2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#csr_section_2 .clm_cell_txt,
#csr_section_4 .clm_cell_txt,#csr_section_8 .clm_cell_txt{ width:100%; max-width:500px; padding:0; box-sizing:border-box;}
#csr_bar .clm {
    background-color: rgba(255,199,0,0.7);
}

#csr_section_box_5{  background-image:url('../images/csr_bg_tool2.jpg');background-size:cover;background-position: center center;}
#csr_section_box_6{ background:#f2f2f2;}
#csr_section_box_1,#csr_section_box_2,#csr_section_box_5{
    height: 520px;
    width: 50%;
}




#csr_section_box_6 h3>p{ font-weight:300;}
#bar_info ul {
	width: 100%;
	margin: auto;
	text-align: left;
	list-style-type: circle;
	position: relative;
left: 10px;
max-width: 300px;
}
#bar_info_sns ul li{ display:inline-block;}
#bar_info_sns i{ font-size:30px;}
#bar_info_sns li:nth-child(1){}
#csr_section_1,#csr_section_3,#csr_section_5,#csr_section_7{ padding:60px 0;}
#csr_section_2,#csr_section_4,#csr_section_6{padding:30px 0 30px 0;}
#csr_section_8{padding:0px 0 60px 0;}


#csr_section_2 div.jp_txt p,#csr_section_8 div.jp_txt p{
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 10px;
    letter-spacing: 1px;
}

#bar_info {
    max-width: 300px;
    width: 100%;
}
/* SNS */
#bar_info_sns {
    padding-top: 30px;
}
#bar_info_sns>p{ text-align:left;padding-bottom: 20px;}
#bar_info_sns ul li{ padding-top:30px;}
#bar_info_sns ul li:nth-child(1){ margin-right:5px;}
#bar_info #bar_info_sns ul{ left:0;} 
/* ギャラリー */



figure {
position: relative;
overflow: hidden;
/*max-width: 800px;*/
width: 100%;
line-height: 0;
margin: 0;
margin: auto;
}
figure img{width:100%;}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
	line-height:30px;
}
figcaption div.cap {
    line-height: 10px;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}

figcaption div.cap p{ width:100%; max-width:600px; margin:auto;padding:0 10px; box-sizing:border-box; text-align:left;}

figure:hover figcaption{
	opacity: 1;
}
#csr_gallery ul.gallery_head_ul{font-size: 0;}
#csr_gallery ul li.gallery_head{ display:inline-block; width:100%;}
#csr_gallery ul li.gallery_head ul{font-size: 0;}
#csr_gallery ul li.gallery_head ul li{ display:inline-block; width:25%; background:red;line-height: 0;}
.csr_gallery_caption{
    display: table;
    text-align: center;
    width: 100%;
    height: 100%;
}