@charset "UTF-8";


#header .global-navi .navi-top { display: none; }

#main .main-visual { position: relative; height: 580px; background-image: url(../image/top/mainimage.jpg); background-size: cover;}
#main .main-visual .main-image { display: none;}
#main .main-visual .main-copy { position: absolute; top: 20px; right: 0px; font-size: 46px; line-height: 1.3; color: #FFF; font-weight: normal; text-align: right;}
#main .main-visual .sub-copy {  position: absolute; top: 150px; right: 30px;  font-size: 12px; line-height: 1.3; color: #FFF; font-weight: normal; text-align: right;}

#main .contents-menu { margin-top: 70px;}
#main .contents-menu .contents { height: 320px; background-size: cover; display: block; position: relative; }
#main .contents-menu .contents:hover { opacity: 1 ;}
#main .contents-menu .contents + .contents { margin-top: 40px;}
#main .contents-menu .contents01 { background-image: url(../image/top/bg_outline.jpg);}
#main .contents-menu .contents02 { background-image: url(../image/top/bg_staff.jpg);}
#main .contents-menu .contents::after { content: ""; position: absolute; width: 1100px; height: 320px; background-color: rgba(33,0,0,0.5); z-index: 50; left: -20px; bottom: -20px; transition: all 0.15s;}
#main .contents-menu .contents:hover::after { left: 0px; bottom: 0px;}
#main .contents-menu .contents .contents-en-name { position: absolute; top: 135px; left: 100px; font-size: 38px; line-height: 1; font-weight: normal; color: #FFF; letter-spacing: 0.04em; z-index: 80; }
#main .contents-menu .contents .contents-jp-name { position: absolute; top: 190px; left: 100px; font-size: 14px; line-height: 1; font-weight: normal; color: #FFF; z-index: 80; }
#main .contents-menu .contents .contents-en-name::after { content: ""; position: absolute; width: 22px; height: 1px;  background: #FFF; left: -38px; top: 20px; }
#main .notice{ background-color: #322000; padding: 55px 110px 70px; }
#main .notice .split-view{ display: -ms-flex; display: flex; }
#main .notice .split-view .ttl-body .ttl{ position: relative; color: #ffffff; font-size: 28px; font-weight: normal; }
#main .notice .split-view .ttl-body .ttl::before{ content: ""; position: absolute; width: 22px; height: 1px;  background: #FFF; left: -38px; top: 50%; }
#main .notice .split-view .ttl-body .ja{ font-size: 14px; color: #ffffff; }
#main .notice .split-view .list-item{ margin-left: 100px; flex: 1; border-bottom: 1px solid rgba(255,255,255,0.2); }
#main .notice .split-view .list-item .item{ display: -ms-flex; display: flex; padding: 20px 15px; border-top: 1px solid rgba(255,255,255,0.2); }
#main .notice .split-view .list-item .item .date{ color: rgba(255,255,255,0.6); font-size: 14px; }
#main .notice .split-view .list-item .item .txt{ flex: 1; margin-left: 50px; font-size: 14px; color: #ffffff; }
#main .notice .split-view .list-item .item .txt a{ color: inherit; position: relative; padding-right: 20px; display: block; }
#main .notice .split-view .list-item .item .txt a::before{ content: ''; position: absolute; right: 0; top: 50%; width: 11px; height: 1px; background-color: #99b1cf; transform: translateY(-50%); }
#main .notice .split-view .list-item .item .txt a::after{ content: ''; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border: 1px solid #99b1cf; border-width: 1px 1px 0 0; transform: translateY(-50%) rotate(45deg); }
#main .notice .split-view .nodata{ flex: 1; margin-left: 100px; text-align: center; font-size: 14px; color: #ffffff; margin-top: 20px; }


@media screen and (max-width: 768px) {
	#header .global-navi .navi-top { display: block; }

	#main .main-visual { background: none; height: auto;}
	#main .main-visual .main-image { display: block;}
	#main .main-visual .main-copy { width: 90%; margin: 18px auto 0 auto; position: static; font-size: 26px; line-height: 1.3; color: #705222; text-align: left}
	#main .main-visual .sub-copy { width: 90%; margin: 10px auto 0 auto; position: static; font-size: 12px; line-height: 1.7; color: #666666; text-align: left }

	#main .contents-menu { margin-top: 40px;}
	#main .contents-menu .contents { width: 90%; margin: auto; height: 180px; background-size: cover; display: block; position: relative; }
	#main .contents-menu .contents + .contents { margin-top: 20px;}
	#main .contents-menu .contents::after { content: ""; position: absolute; width: 100%; height: 180px; z-index: 50; left: 0px; bottom: 0px; }
	#main .contents-menu .contents:hover { opacity: 0.7 ;}

	#main .contents-menu .contents .contents-en-name { position: absolute; top: 70px; left: 50px; font-size: 24px; line-height: 1; font-weight: normal; color: #FFF; letter-spacing: 0.04em; z-index: 80; }
	#main .contents-menu .contents .contents-jp-name { position: absolute; top: 100px; left: 50px; font-size: 12px; line-height: 1; font-weight: normal; color: #FFF; z-index: 80; }
	#main .contents-menu .contents .contents-en-name::after { content: ""; position: absolute; width: 14px; height: 1px;  background: #FFF; left: -30px; top: 13px; }

	#main .notice{ padding: 30px 5%; margin-top: 20px; }
	#main .notice .split-view{ display: block; }
	#main .notice .split-view .ttl-body{ padding-left: 38px; }
	#main .notice .split-view .ttl-body .ttl{ font-size: 24px; }
	#main .notice .split-view .list-item{ margin: 20px 0 0; }
	#main .notice .split-view .nodata{ margin-left: 0; padding: 20px 0 40px; }



}