@charset "utf-8";
/* CSS Document */

#csr h1 span.csr{
	display:block;
	font-size:19px;
	line-height:1.6em;
	letter-spacing:0.1em;
	margin-top:10px;
	text-align:left;
}
#csr h1.csrttl{
	font-size:20px;
	line-height:30px;
}
#csr .txt_main_wrap{
	text-align:center;
}
#csr h2.ttl{
	display:inline-block;
	margin:2em auto 0;
	padding:0 1em 0.5em;
	font-size:20px;
	font-weight:normal;
	color:#473933;
	border-bottom:1px #473933 solid;
}
#csr .txt_main_wrap ol{
	margin:2em 0;
	padding:0;
}
#csr .txt_main_wrap ol li{
	margin:0 0 0.5em 1.5em;
	padding:0;
	list-style:decimal;
}
#csr .cnt_wrap{
	margin:100px 0;
	border-top:1px #473933 dashed;
}
#csr .cnt_outer{
	padding-bottom:50px;
	border-bottom:1px #473933 dashed;
}
#csr h3.cnt_ttl{
	width:95%;
	margin:50px auto 0;
	font-size:17px;
	letter-spacing:0.08em;
	line-height:1.6em;
}
#csr h4.cnt_ttlsub{
	width:95%;
	margin:20px auto;
	padding:0.5em 0;
	font-size:16px;
	letter-spacing:0.08em;
	line-height:1.6em;
	font-weight:normal;
	border-top:1px #ccc solid;
	border-bottom:1px #ccc solid;
}
#csr h4.cnt_ttlsub:before{
	content:"";
}
#csr .cnt{
	display:block;
	width:95%;
	margin:20px auto;
}
#csr .cnt .cnt_img{
	text-align:center;
	margin-bottom:15px;
}
#csr .cnt .cnt_txt p{
	margin:0 auto;
	text-align:center;
}
#csr .cnt .cnt_txt ul{
	margin:1em 0 1em 2em;
	padding:0;
}
#csr .cnt .cnt_txt ul li{
	list-style:disc;
}
#csr .cnt_outer img{
	border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
}
#csr .cnt .cnt_txt p.amount{
	margin:0.5em auto 1em;
	font-size:19px;
}
#csr .cnt .cnt_txt p.amount span{
	display:inline-block;
	margin:0.5em auto;
	padding:0 0.5em 0.3em;
	font-size:1.4em;
	border-bottom:1px #473933 solid;
}

/* CSRトップメニュー */
#csr .csr_menu{
	width:95%;
	margin:30px auto;
	border-top:1px #473933 dashed;
}
#csr .csr_menu ul.csr_menu_wrap{
	margin:0;
	padding:0;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex{
	position:relative;
	display:block;
	margin:50px 0;
	padding:0;
	text-align:center;
	border-bottom:1px #473933 dashed;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex:before{
	position:absolute;
	content:'';
	width:10px;
	height:10px;
	border:none;
	border-top:solid 1px #473933;
	border-right:solid 1px #473933;
	-ms-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	transform:rotate(135deg);
	bottom:25px;
	left:50%;
	margin-top:auto;
	margin-left:-5px;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex a{
	position:absolute;
	top:0;
    left:0;
    width:100%;
    height:100%;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex:hover{
	background:#fafafa;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex .menuimg img{
	max-width:100%;
	margin:0 auto;
	border-radius:10px;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex .menutxt{
	margin:15px 0 50px;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex .menutitle{
	font-size:18px;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex ul.csr_menulist{
	margin:10px 0;
	padding:0 0 0 2em;
	text-align:left;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex ul.csr_menulist li.menulist{
	list-style:disc;
	margin:0;
	padding:0;
}

/* CSR下位カテゴリメニュー */
#csr .menu_ttl{
	position:relative;
	margin:0 auto;
	padding:15px 20px;
	border-bottom:2px #ccc solid;
	font-size:20px;
}
#csr .csr_nav{
	width:95%;
	margin:0 auto;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	list-style:none;
}
#csr .csr_nav_flex{
	position:relative;
	border-bottom:1px #ccc solid;
	width:calc( (100% - 50px) / 2 );
}
#csr .csr_nav_flex:before{
	position:absolute;
	content:'';
	width:8px;
	height:8px;
	border:none;
	border-top:solid 1px #473933;
	border-right:solid 1px #473933;
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	top:50%;
	right:15px;
	margin-top:-4px;
	margin-left:auto;
}
#csr .csr_nav_flex a, #csr .menu_ttl a{
	position:absolute;
	top:0;
    left:0;
    width:100%;
    height:100%;
}
#csr .csr_nav_ttl{
	margin:15px 20px;
}
/* レスポンシブ対応 767px以下で2列 → 1列 */
@media screen and (max-width:767px){
#csr .menu_ttl{
	width:95%;
	padding:15px 20px 15px 0;
	font-size:17px;
}
#csr .menu_ttl:before{
	content:"";
	margin-left:20px;
}
#csr .menu_ttl:after{
	display:block;
	visibility:visible;
	position:absolute;
	content:'';
	width:8px;
	height:8px;
	border:none;
	border-top:solid 1px #473933;
	border-right:solid 1px #473933;
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	top:50%;
	right:15px;
	margin-top:-4px;
	margin-left:auto;
}
#csr .csr_nav_flex{
	width:100%;
}
}



/******************************************
PC表示
******************************************/
@media screen and (min-width:768px){

#csr h1 span.csr{
	font-size:25px;
	width:700px;
	margin:30px auto 0;
}
#csr h1.csrttl{
	font-size:27px;
	line-height:45px;
}
#csr h2.ttl{
	font-size:30px;
}
#csr .cnt_wrap{
	border-top:none;
}
#csr .cnt_outer{
	border-bottom:0;
}
#csr h3.cnt_ttl{
	width:100%;
	padding-bottom:0.5em;
	font-size:23px;
	font-weight:normal;
	text-align:center;
	border-bottom:1px #473933 solid;
}
#csr h4.cnt_ttlsub{
	width:100%;
	margin-bottom:0;
	padding-bottom:0;
	font-size:23px;
	font-weight:normal;
	border:none;
}
#csr h4.cnt_ttlsub:before{
	content:"■ ";
}
#csr .cnt{
	display:flex;
	width:100%;
	margin-top:25px;
	border-bottom:0;
}
#csr .cnt .cnt_img{
	margin-bottom:0;
}
#csr .cnt .cnt_img img{
	max-width:490px;
}
#csr .cnt .cnt_txt{
	margin:0 30px auto;
	width:450px;
}
#csr .amount span{
	margin:0.5em auto;
}

/* CSRトップメニュー */
#csr .csr_menu{
	width:700px;
	margin:90px auto;
	border-top:none;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex{
	display:flex;
	width:700px;
	height:250px;
	text-align:left;
	border-bottom:none;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex:before{
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	top:50%;
	right:15px;
	margin-top:-5px;
	margin-left:auto;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex img.menuimg{
	width:250px;
	height:250px;
}
#csr .csr_menu ul.csr_menu_wrap li.menuflex .menutxt{
	margin:auto auto auto 35px;
}

}





/******************************************
フレックスボックスの基本設定 等間隔（両端揃え）折り返しあり
******************************************/
#csr [class^="flex-col"]{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
/* コンテンツ下のマージン */
#csr .flex-child{
	margin-bottom:15px;
}
/* 各カラム毎のコンテンツと疑似要素の横幅 */
#csr .flex-col2 .flex-child{
	width:calc( (100% - 20px) / 2 );
}
#csr .flex-col3::after, #csr .flex-col3 .flex-child{
	width:calc( (100% - 40px) / 3 );
}
#csr .flex-col4::before, #csr .flex-col4::after, #csr .flex-col4 .flex-child{
	width:calc( (100% - 60px) / 4 );
}
/* 最終行は両端揃えにしない */
#csr .flex-col3::after, #csr .flex-col4::before, #csr .flex-col4::after{
	content:"";
}
#csr .flex-col4::before{
	order:1;
}
#csr p.flex-text{
	margin:5px auto 0;
	text-align:center;
	font-size:14px;
	line-height:1.6em;
}
/* 7列並びは左寄せ */
#csr .flex-col7{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
}
#csr .flex-col7 .flex-child{
	width:calc( (100% - 120px) / 7);
	margin-right:20px;
}
#csr .flex-col7 .flex-child:nth-child(8n){
	margin-right:0;
}
@media screen and (max-width:767px){
#csr [class^="flex-col"]{
	width:95%;
	margin:0 auto;
}
/* レスポンシブ対応 767px以下で2列 → 1列 */
#csr .flex-col2 .flex-child{
	width:100%;
}
/* レスポンシブ対応 767px以下で4列・3列 → 2列 */
#csr .flex-col3 .flex-child, #csr .flex-col4 .flex-child{
	width:calc( (100% - 15px) / 2 );
}
/* レスポンシブ対応 767px以下で7列 → 3列 */
#csr .flex-col7 .flex-child{
	width:calc( (100% - 30px) / 3);
	margin-right:15px;
}
#csr .flex-col7 .flex-child:nth-child(3n){
	margin-right:0;
}
#csr p.flex-text{
	text-align:left;
}
}