@charset "utf-8";
body{
	font-size: 16px;
    color: #4C4949;
    font-family: 'YakuHanJP','Roboto','Noto Sans JP',"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Sans", "メイリオ","Noto Sans JP", Meiryo, sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

.m_media.popup{
	opacity: 1;
}
.m_news.popup{
	opacity: .3;
}
.m_sports.popup{
	opacity: .3;
}
.m_event.popup{
	opacity: .3;
}
.m_project.popup{
	opacity: .3;
}

.menu {
	position: absolute;
	top: 0px;
	left: 0;
	z-index: 500;
	width: 100%;
	height: 0px;
	color: #333;
	overflow: auto;
	opacity: 0;
	padding-top: 20px;
	padding-botom: 20px;
	visibility: none;
	transition: opacity .4s ease, visibility .4s ease;
	text-align: center;
}
.menu h1{
	font-size: 1em;
	font-weight: bold;
	color: #333;
	width: 25%;
	margin: 5px auto;
	padding: 10px 0px;
	border-radius: 20px;
	box-shadow: inset 7px 7px 10px #c6c6c6,
            inset -7px -7px 10px #ffffff;
}

.menu-common-ttl{
	font-size: 21px;
	letter-spacing: 2px;
	margin: 10px auto 20px;
	display: inline-block;
	position: relative;
}

.menu-common-ttl:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #4C4949;
  border-radius: 2px;
}



#close{
	display: none;
}




.menu.m1.popup,.menu.m2.popup,.menu.m3.popup,.menu.m4.popup,.menu.m5.popup{
	opacity:100;
	top: 120px;
	visibility: visible;
	height: auto;
	transition: opacity .3s ease-in-out;
	background: #fafafa;
}

.not_menu_wrap_black{
	background:none;
}

.not_menu_wrap{
	opacity: 1;
	transition: opacity .3s ease-in-out;
	background: #fafafa;
}
.not_menu_wrap.popup{
	opacity:.3;
	transition: opacity .7s ease-in-out;
}

.not_menu_wrap_black.popup{
	background: #000;
	transition: opacity .7s ease-in-out;
}


/*sp表示*/
@media only screen and (max-width:799px){
.vis_menu{
	display:block;
	width:100%;
	height:auto;
	margin: 20px auto;
	padding: 0 auto;
	text-align: center;
}
.menu h1{
	font-size: 1em;
		width: 40%;
}
.vis_item{
	width: 50%;
	height: auto;
	margin: 0 auto;
	padding: 0 auto;
	text-align: center;	
	margin-bottom: 25px;
}
.vis_item5{
	width: 40%;
	height: auto;
	margin-right: 3%;
	margin-bottom: 25px;
	border-radius: 10px;
}
.vis_banner5{
	width: 25%;
	height: auto;
	margin-right: 3%;
	margin-bottom: 25px;
}
	
.menu.m1.popup{
	opacity:100;
	top: 190px;
	visibility: visible;
	height: auto;
}
.menu.m2.popup{
	opacity:100;
	top: 190px;
	visibility: visible;
	height: auto;
}
.menu.m3.popup{
	opacity:100;
	top: 190px;
	visibility: visible;
	height: auto;
}
.menu.m4.popup{
	opacity:100;
	top: 190px;
	visibility: visible;
	height: auto;
}
.menu.m5.popup{
	opacity:100;
	top: 190px;
	visibility: visible;
	height: auto;
}

}

/*
menu contents
*/
.menuimg_yoko{
	width:auto;
	max-width: 100%;
	height: auto;
	margin:0px auto 0px auto;
	padding:0px;
	border-radius: 15px;
  transition: .2s;
	box-shadow: inset 4px 4px 4px #d7d7d7, inset -4px -4px 4px #ffffff;
}
.menuimg_tate{
	width:auto;
	max-width: 100%;
	height: auto;
	max-height: 220px;
	margin:0px auto 0px auto;
	padding:0px;
	border-radius: 15px;
  transition: .2s;
}
.menuimg_yoko:hover{
  transform: scale(0.98);
  transition: .2s;
}
.menuimg_tate:hover{
  transform: scale(0.98);
  transition: .2s;
}
.media_container {
	display: flex;
	max-width: 1000px;
	width: 100%;
	margin: 20px auto;
  justify-content: center;
  flex-wrap: wrap;
	text-align: center;
}
.media_item1{
	max-width: 620px;
	width: 100%;
	height: auto;
	padding: 0 auto;
	margin-right:20px;
	display: block;
}
.media_item_flexbox{
	display: flex;
	margin:0px;
	height:auto;
  justify-content:space-between;
}
.media_item_flexbox2{
	display: flex;
	margin:20px 0px 0px 0px;
	height:auto;
  justify-content:space-between;
}
.media_tvbox{
	max-width: 300px;
	width: 100%;
	height: auto;
	padding: 0 auto;
	margin: 0 20px 0px 0;
}
.menu_item{
	width: 100%;
	margin: 0 20px 20px 0;
	border-radius: 15px;
	box-shadow: inset 1px 1px 1px #c6c6c6,
            inset -1px -1px 1px #ffffff;
	transition: box-shadow .2s ease-in-out;
}
.menu_item:hover{
	box-shadow: inset 5px 5px 8px #c6c6c6,
            inset -5px -5px 8px #ffffff;
}
.menu_item_iraw{
	width: 100%;
	margin: 0 20px 20px 0;
	border-radius: 15px;
	box-shadow: inset 1px 1px 1px #c6c6c6,
            inset -1px -1px 1px #ffffff;
	transition: box-shadow .2s ease-in-out;
}
.menu_item_iraw:hover{
	box-shadow: inset 5px 5px 8px #c6c6c6,
            inset -5px -5px 8px #ffffff;
}

.media_radiobox{
	max-width: 300px;
	width: 100%;
	height: auto;
	padding: 0 auto;
	margin: 0;
}
.media_item2{
	max-width: 300px;
	width: 100%;
	height: auto;
	margin: 0;
		gap: 0px 20px;
}
.menu_item_tate{
	height:auto;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: inset 1px 1px 1px #c6c6c6,
            inset -1px -1px 1px #ffffff;
	transition: box-shadow .2s ease-in-out;
	max-width: 140px;
}
.menu_item_tate:hover{
	box-shadow: inset 5px 5px 8px #c6c6c6,
            inset -5px -5px 8px #ffffff;
}

@media (max-width: 1000px) {
.media_container {
	display: block;
	width: 98%;
	margin: 10px auto;
	padding: 0 auto;
}
.media_item1{
	width: 100%;
	height: auto;
	padding: 0 auto;
	margin: 0 auto;
	display: block;
}
.media_item2{
	width: 100%;
	max-width:620px;
	margin: 0 auto;
	display:flex;
  justify-content:space-between;
	gap: 0px 20px;
}
#iraw{
	width:auto;
	flex-basis: 50%;
	}
.menu_item_iraw{
	width: auto;
	height: auto;
	margin: 0;
	box-shadow: inset 1px 1px 1px #c6c6c6,
            inset -1px -1px 1px #ffffff;
	transition: box-shadow .2s ease-in-out;
}
.menu_item_tate{
	height:auto;
	border-radius: 15px;
	marign-left:20px;
	overflow: hidden;
	box-shadow: inset 1px 1px 1px #c6c6c6,
            inset -1px -1px 1px #ffffff;
	transition: box-shadow .2s ease-in-out;
}
.menuimg_tate{
	width:auto;
	height: auto;
	margin-left:0px auto 0px auto;
	padding:0px;
	border-radius: 15px;
  transition: .2s;
}
.media_item_flexbox2{
	margin:0px;
	gap: 0px 20px;
}
}

/*
logo top
*/

#mainlogo {
	display: block;
	max-width:250px;
	width: 15%;
	height:auto;
border-radius: 50%;
background: #f8f8f8;
box-shadow: inset 7px 7px 14px #d7d7d7,
            inset -7px -7px 14px #ffffff;
  position: absolute;
  top: 2%;
  left: 1%;
  z-index: 2000;
	aspect-ratio: 1/1;
}
#mainlogo img{
	width:100%;
	potision: absolute;
	height: auto;
	margin:auto;
	transform: translate(0%, 30%);
}

#mainlogo:hover{
	transform: none;
}

#mainlogo_sub {
	display: none;
}
#mainlogo_sub img{
display:none;
}

#header_wrap{
		width:100%;
	background-color: #fafafa;
	}

#header_wrap a img{
	transition: all.2s;
}

#header_wrap a:hover img{
    opacity: .7;
	transform: translate(0%, 30%)scale(.95);
}


#smartheader{
	display:none;
}
#topwrap{
	width:100%;
	height: 120px;
	position: relative;
	background-color: #fafafa;
	z-index: 8000;
}
#maintop{
	position: absolute;
	width:100%;
	height:120px;
	margin: 0 auto;
	padding: 0 auto;
	z-index: 1000;
	top:0;
	border-bottom: 1px solid #cbcbcb;
    box-shadow: 0 1px 0 #fff;
}
#mainmenu_wrap{
	position:absolute;
	top:0;
	bottom:0;
	z-index: 600;
	left:0;
	right:0;
	width: 65%;
	max-width: 800px;
	height:auto;
	margin: auto;
	padding: auto;
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#mainmenu{
	aspect-ratio: 1/1;
}

#under{
	font-size: .6em;
	font-weight: bold;
	color:#454545;
	/*background-color: #fafafa;*/
	opacity: 1;
	z-index:100;
/*	border-radius: 20px;
	box-shadow: 3px 5px 5px #c6c6c6,
          -3px -5px 5px #ffffff;
	  text-shadow: 1px 1px 1px #ffffff;
	transition: box-shadow .2s ease-in-out;*/
}
#under:hover{
/*	background-color: #fafafa;
	border-radius: 20px;
	box-shadow: inset 1px 1px 1px #c6c6c6,
          inset -1px -1px 1px #ffffff;*/
cursor: pointer;
}
#under.popup{
	/*background-color: #666666;*/
	color: #E62D82;
/*	text-shadow: 0px 0px 0px #ffffff;
	border-radius: 20px;
	box-shadow: inset 1px 1px 1px #c6c6c6,
          inset -1px -1px 1px #ffffff;*/
cursor: pointer;
}

#mainmenu{
	align-items: center;	
	height: auto;
border-radius: 50%;
background: #f8f8f8;
box-shadow: inset 2px 2px 2px #d7d7d7,
            inset -2px -2px 2px #ffffff;
	transition: box-shadow .2s ease-in-out;
	overflow:hidden;
}


#mainmenu:hover{
	align-items: center;	
	height: auto;
border-radius: 50%;
background: #f8f8f8;
box-shadow: inset 10px 10px 8px #d7d7d7,
            inset -10px -10px 8px #ffffff;
cursor: pointer;
}

#mainmenu img{
	align-items: center;	
	max-width: 100%;
	max-height: 80px;
  transform: scale(1.1);
  transition: .2s;
}
#mainmenu img:hover,#mainmenu img:active{
  transform: scale(1);
  transition: .2s;
}
#submenu_wrap{
	position:absolute;
	top:0;
	bottom:0;
	left:auto;
	right:0;
	width:17%;
	max-width: 400px;
	margin: auto;
	padding: auto;
	text-align: center;
	display: flex;
	justify-content: flex-end;
	align-items: center;	
}
#submenu{
	align-items: center;	
	height: auto;
	margin-right: 1%;
}
#submenu img{
	align-items: center;	
	max-width: 100%;
	max-height: 80px;
}

/*sp表示*/
@media only screen and (max-width: 799px){

#mainlogo {
	display: none;
	}

#mainlogo_sub {
display:none;
}
	
#maintop{
	position: relative;
	width:100%;
	height:120px;
	margin: 0 auto;
	padding: 0 auto;
	z-index: 1000;
	top:0;
	border-bottom: 2px solid #b5b5b5;
}
#layer{
	position: relative;
	width: 100%;
	height: auto;
	z-index: 5;
	margin: 0 auto;
	padding: 0 auto;
}
	#smartheader{
		width:100%;
		height: 70px;
		display:flex;
		justify-content: space-between;
		position:relative;
		z-index: 8500;
	background-color:#fafafa;
	}
	#smartheader img{
		max-height: 70px;
		max-width: 100%;
	}
	#smartheader_box{
		width: auto;
		display: flex;
	}
#mainmenu_wrap{
	width: 98%;
	}
#topwrap{
	width:100%;
	height: auto;
	position: relative;
}
#submenu_wrap{
	display: none;
	}
#slide_bottom {
height: 50px;
}
#slide img {
	width:100%;
	height:350px;
	object-fit: cover;
}

#paging li p {
	padding: .5rem .8rem;
	font-size: 0.7em;
	display:none;
}
#paging li i{
	padding: .5rem .8rem;
	font-size: 1em;
	display:block;
	text-align: center;
	margin: 0 auto;
}
#paging li.active p {
	color: #f00;
	display:none;
}
#paging li.active i{
	display: none;
}
h1{
	potision: relative;
	font-size: 1em;
	font-weight: bold;
	color: #454545;
	width: 55%;
}
h1.black{
	potision: relative;
	font-size: 1em;
	text-align:center;
	font-weight: bold;
	width: 55%;
}	
#close{
	display: block;
	opacity: 1;
	font-size: 1em;
	font-weight: bold;
	color: #333;
	background-color:#fafafa;
	width: 25%;
	margin: 40px auto;
	padding: 10px 0px;
	border-radius: 20px;
	box-shadow: 7px 7px 10px #c6c6c6,
            -7px -7px 10px #ffffff;
	cursor: pointer;
}
	
	#mainmenu img{
	max-height: 65px;
}	
	
}

/*
新規
*/
.menu-wrap{
	padding-bottom: 30px;
	width: 95%;margin: 0 auto;
	max-width: 1000px;
	/*background: rgba(255,255,255,.70);*/
	color: #4C4949;
    font-family: 'YakuHanJP','Roboto','Noto Sans JP',"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Sans", "メイリオ","Noto Sans JP", Meiryo, sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

.menu-wrap a:link,.menu-wrap a:visited {
	text-decoration: none;
    color: #4C4949;
}

.menu-wrap a:hover,.menu-wrap a:active {
	text-decoration: none;
    color: #4C4949;
}

 .menu-container-flex {  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  justify-content: flex-start;
  flex-wrap: wrap;
}
 .menu-container-box.box-3c {display:inline-block;
	 width: 33.3%;
	 padding: 1%;
	 text-align: center;
	 box-sizing: border-box;
	 border-left: 1px dotted #CBCBCB;
	 border-bottom: 1px dotted #CBCBCB;
}

.menu-container-box.box-3c:nth-child(1),.menu-container-box.box-3c:nth-child(4){
	border-left: none;
}

 .menu-container-box.box-4c {display:inline-block;
	 width: 25%;
	 padding: 1%;
	 text-align: center;
	 box-sizing: border-box;
	 border-left: 1px dotted #CBCBCB;
	 /*border-bottom: 1px dotted #CBCBCB;*/
}

.menu-container-box.box-4c:nth-child(1),.menu-container-box.box-4c:nth-child(5){
	border-left: none;
}

ul.menu-innner-list{display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;justify-content:space-between;flex-wrap:wrap;}

ul.menu-innner-list li{
	width: 100%;
	margin-bottom: 10px;
}

ul.menu-innner-list li:last-child{
	margin-bottom: 0;
}

ul.menu-innner-list li.shadow-btn a{
	border-radius: 15px;
   position: relative;
    transition: box-shadow .2s ease-in-out;
	overflow: hidden;
    display: inline-block;
}

ul.menu-innner-list li.shadow-btn a::after{
	    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    border-radius:15px;
     box-shadow: inset 4px 4px 4px #d7d7d7, inset -4px -4px 4px #ffffff;
}

ul.menu-innner-list li.shadow-btn a:hover{
	transform: scale(0.98);
    transition: .2s;
	opacity: .7;
}

ul.menu-innner-list li img{
	width: 100%;
	
}

ul.menu-innner-list li.text-btn-link a{
	width: 100%;
	display: block;
	padding: 1em;
	box-sizing: border-box;
	background: hsla(0,0%,98%,1.00);
}

ul.menu-innner-list li.menu-list-1c{
	display:inline-block;
	width: 100%;
}

ul.menu-innner-list li.menu-list-2c{
	display:inline-block;
	width: 48%;
}

.menu-txt-list{
	text-align: left;
	font-size: 14px;
	
}

.menu-txt-list a{
	transition: all.3s ease-in-out;
}

.menu-txt-list a:hover{
	letter-spacing: .2em;
}

.box-border-none{
	border: none!important;
}

@media only screen and (max-width:799px){
 .menu-container-box.box-3c,.menu-container-box.box-4c {display:inline-block;
	 width: 50%;
	 padding: 2%;
}
	 .menu-container-box.box-3c,.menu-container-box.box-4c:nth-child(even) {
	 border-left: 1px dotted #CBCBCB;
}
	.menu-container-box.box-3c,.menu-container-box.box-4c:nth-child(odd){
		border-left: none;
	}
}
