/*font-family: ro-nikkatsu-sei-kai-std, serif;
font-weight: 400;
font-style: normal;
font-family: source-han-serif-japanese, serif;
font-weight: 500;
*/
.pc{display: inline;}
.tb{display: none;}
.sp{display: none;}


#wrap a{
transition: all 0.3s;
}
#wrap a:hover{
/*transform: scale(1.15);*/
transform: translateY(-15px);
}

#wrap nav a:hover{
transform: none;
}


 a:hover .for_details, #wrap nav ul li a:hover{
	opacity: 0.5;
}

#wrap{
	margin: 0 auto;
	width:100%;
	background:url(../img/bg.jpg) repeat;
	font-family: “游ゴシック”, YuGothic,“メイリオ″, Meiryo, Arial, Roboto, “Droid Sans”, “Hiragino Kaku Gothic ProN”, sans-serif;
	line-height: 1.6;
	font-size: 15px;
	padding-bottom: 20em;
}

#title{
	width: 100%;
	position: relative;
	background: url(../img/total_main.jpg)  no-repeat center top;
	background-size:cover;
	/*height: 450px;*/
	/*h1を上部で目立たせる*/
	height: 520px;
	padding-top: 2em;
	/*h1を上部で目立たせる*/
	max-height:700px;
}

#title h1{
	overflow:hidden;
/*h1を上部で目立たせる*/
	font-size: 1.2rem;
	color: #ffffff;
	position: absolute;
	top:-2em;
	background: #151e49;
	width:100%;
	margin-top: 2em;
	padding: 0.5em 12em;
	font-weight: bold;
/*h1を上部で目立たせる*/
}

.title, .blend{
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

 .blend{
	 mix-blend-mode:overlay; /*値を変更すれば様々な効果を与えられます オーバーレイ*/
}

@supports (-ms-ime-align: auto) { /*オーバーレイ非対応eageは透過処理*/
	.blend{
	opacity: 0.3;
	}
	}
	
@media all and (-ms-high-contrast: none) {	/*オーバーレイ非対応IE11は透過処理*/
	.blend{
	opacity: 0.3;
	}
	}

#title::before{
	content: "";
	position: absolute;
	background: url(../img/main_title_bg02.png) no-repeat;
	width:950px;
	height: 470px;
	right:15%;
}

#title::after{
	content: "";
	position: absolute;
	background: url(../img/main_sub.png) no-repeat;
	width:181px;
	height: 313px;
	left:23%;
	bottom:5%;
}

.logo::after{
	content: "";
	position: absolute;
	background: url(../img/logo.png) no-repeat;
	width:115px;
	height: 66px;
	left:23%;
	top:11%;
	z-index:50;
}

#wrap nav{
	width:950px;
	margin: 3em auto 0 auto;
	color: #ffffff;
}

#wrap nav ul{
	display: flex;
	flex-wrap: wrap;
	/*position: absolute;*/
	z-index: 30;
}

#wrap nav ul li{
	margin-right: 15px;
	font-size: 1.2rem;
	font-family: source-han-serif-japanese, serif;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.3em;
}

#wrap nav ul li:nth-child(5){
	margin-right: 0;
}

@media all and (-ms-high-contrast: none) {  /*IE11 webfontの代替と微調整*/
	#wrap nav ul li{
		font-family: Yu Mincho;
		font-style: normal;
}
}

#wrap nav ul li a{
  	display: inline-block;
	/*width:20%;*/
	background: #ae9886;
	padding: 0.6em 3.3em;
}

#aichi{
	width:950px;
	margin: 0 auto;
	position: relative;
}

.area_title{
	font-size: 1.8rem;
	font-family: source-han-serif-japanese, serif;
	display: flex;
	align-items: center;
	margin-top: 4em;
	color: #ffffff;
	position: relative;
	z-index: 10;
	letter-spacing: 0.1em;
}

@media all and (-ms-high-contrast: none) {  /*IE11 webfontの代替と微調整*/
	.area_title{
		font-family: Yu Mincho;
		font-style: normal;
}
}

.area_title:before, .area_title:after{
	display: block;
	height: 2px;
	content:"";
	background: #ffffff;
	flex-grow: 1;
}

.area_title:before{
	margin-right: 1em;
}

.area_title:after{
	margin-left: 1em;
}

.area_title_bg{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main{
	width:950px;
	margin: 7em auto 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.main img{
	width:100%;
}

.main_annotation{
	color: #efefef;
	font-size: 0.75rem;
	position: absolute;
	bottom:0.5em;
	right:4em;
	}	
	

.inn_box{
	flex-basis: calc((100% - 50px) / 3) ;
	margin-right: 24.5px;
	position: relative;
	display: flex;
	flex-direction:column;	
}

.inn_box:nth-of-type(3){
	margin-right: 0;
}

.area{
	position: absolute;
	background: #ae9886;
	width:100px;
	padding:0.3em 1em;
	font-size: 1rem;
	font-family: source-han-serif-japanese, serif;
	font-weight: 700;
	color: #ffffff;
	top:5%;
	text-align: center;
}

@media all and (-ms-high-contrast: none) {  /*IE11 webfontの代替と微調整*/
	.area{
		font-family: Yu Mincho;
		font-style: normal;
		top:2%;
		padding:0.5em 1em 0.2em 1em;
}
}

.inn_introduce{
	position: relative;
}

.inn_introduce dl{
	width:90%;
	/*margin: 0 auto;*/
	background: #ffffff;
	padding: 1.2em;
	position: absolute;
	top:-5em;
	left:5%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	/*align-content:space-between;*/
	justify-content: space-between;
    flex-wrap: wrap;
	/*min-height: 220px;*/
	height: 230px;  /*テキストに合わせて高さ変更する*/
}

@media all and (-ms-high-contrast: none) {  /*IE11微調整*/
	.inn_introduce dl{
	position: absolute;
	top:-15em;
	left:5%;
  }
}


.inn_introduce dt{
	text-align: center;
	padding: 0 0 0.8em 0;
	font-size: 1.1rem;
	font-family: source-han-serif-japanese, serif;
	font-weight: 900;
}

@media all and (-ms-high-contrast: none) {  /*IE11 webfontの代替*/
		.inn_introduce dt{
		font-family: Yu Mincho;
		font-style: normal;
}
}

.for_details{
	background: #ae9886;
    color:  #ffffff;                       /* 文字色指定 */
    padding: 0.5em 1em;                 /* 余白指定 */
    display:  inline-block;             /* インラインブロックにする */
    border-radius:  20px;                /* 角丸指定 */
    box-shadow: 0px 2px 7px 0px #cccccc;   /* 影指定 */
	font-family: source-han-serif-japanese, serif;
	font-weight: 700;
	text-align: center;
	margin-top: 1em;
}

@media all and (-ms-high-contrast: none) {  /*IE11 webfontの代替*/
		.for_details{
		background: #ae9886;
    	color:  #ffffff;                       /* 文字色指定 */
    	padding: 0.5em 1em 0.2em 1em;          /* 余白指定 */
   	    display:  inline-block;             /* インラインブロックにする */
		border-radius:  20px;                /* 角丸指定 */
        box-shadow: 0px 2px 7px 0px #cccccc;   /* 影指定 */
		font-family: Yu Mincho;
		font-style: normal;
}
}

.preparation{
	background: #b4b4b4;
    color:  #ffffff;                       /* 文字色指定 */
    padding: 0.5em 1em;                 /* 余白指定 */
    display:  inline-block;             /* インラインブロックにする */
    border-radius:  20px;                /* 角丸指定 */
	font-family: source-han-serif-japanese, serif;
	font-weight: 700;
	text-align: center;
	margin-top: 1em;
}

/*pagetop*/
#totop {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index:50;
	width:4em;
	height:4em;
	border-radius:50%;
	overflow:hidden;
}
#totop a {
	display:block;
	width:100%;
	height:100%;
	/*padding:0.4em 0;*/
	background-color:rgba(119,119,119,0.4);
	color:#FFF;
	font-size:22px;
	text-align:center;
}

#totop a:hover {
	text-decoration: none;
	background-color: #a5a5a5;
}
#gotop {display:none;}

#totop .material-icons{
	font-size: 50px;
}

/************************************************************
						タブレット対応
************************************************************/

/* 画面サイズ640xから959pxまではこのファイルのスタイルが適用される。 */
@media screen and (min-width:640px) and (max-width:959px) {

#breadcrumb{
	width:100%;
	}
	
	
#title h1{
/*h1を上部で目立たせる*/
	font-size: 0.9rem;
	padding: 0.5em 2em;

/*h1を上部で目立たせる*/
}
	
#title::after{
	left: 15%;
	}	
		
	
#wrap nav ul{
	padding: 0 1.5em;
	}
	
#wrap nav ul li{
	font-size: 1.1rem;
	margin-right: 1em;
	margin-bottom: 1em;
	}
	

#wrap nav, .main, #aichi{
	width:100%;
	}

#wrap nav ul li a{
		padding: 0.8em 3.2em;
	}	
	
.area_title{
	margin-top: 3em;
	}	
	
.main{
	margin: 3em auto 0 auto;
	padding: 0 1.5em 2em 1.5em;
	}		
	
.inn_box{
	flex-basis: 48% ;
	margin-right: 25px;
	margin-bottom: 14em;
	
}

.inn_box:nth-child(even){
	margin-right: 0;
}
	
#wrap{
	padding-bottom: 5em;
	}	
	
}

/************************************************************
						スマホ対応
************************************************************/
@media screen and (max-width:559px)  {

body {font-size:14px;}	
.pc{display: none;}
.tb{display: none;}
.sp{display: block;}
	
#breadcrumb{
	width:100%;
}

#wrap{
	padding-bottom: 1em;
	width:100%;
	background:url(../img/bg_sp.jpg) repeat;
	font-size: 15px;
	padding-bottom: 7em;
	}
	
#wrap nav ul{
	justify-content: space-between;
	padding: 0 1.5em;
	}
	
#wrap nav ul li{
	font-size: 1rem;
	margin-right: 0;
	margin-bottom: 1em;
	}
	
#wrap nav ul li a{
	padding: 0.8em 3.6em;
	}	
	
#wrap nav, .main, #aichi{
	width:100%;
	}
		

#title{
	width: 100%;
	position: relative;
	background: url(../img/total_main_sp.jpg)  no-repeat center top;
	background-size:cover;
	height: 350px;
	/*max-height:500px;*/
}
	
#title h1{
/*h1を上部で目立たせる*/
	font-size: 0.9rem;
	padding: 0.5em 2em;

/*h1を上部で目立たせる*/
}	
	
.title, .blend{
	width:65%;
	}

	
#title::before{
	content: "";
	position: absolute;
	background: url(../img/main_title_bg02.png) no-repeat;
	width:30%;
	height: 30%;
	right:5%;
}	
	
#title::after{
	content: "";
	position: absolute;
	background: url(../img/main_sub_sp.png) no-repeat;
	width:80%;
	/*height: 257px;*/
	left:8%;
	top:100%;
}
	
.logo::after{
	content: "";
	position: absolute;
	background: url(../img/logo.png) no-repeat;
	width:115px;
	height: 66px;
	left:5%;
	top:10%;
	z-index:50;
}
	

.area_title{
	margin-top: 1.5em;
	}	
		
	
.main{
	margin: 12em auto 0 auto;
	flex-direction:column;
	padding: 0 1.5em 2em 1.5em;
	}
	
	
.main_annotation{
	color: #efefef;
	font-size: 0.7rem;
	position: absolute;
	bottom:0.5em;
	right:1em;
	}	
	
.inn_box{
	flex-basis:auto;
	margin-right: 0;
	height: 660px;
	max-height: 660px;
	}	
	
	
.top_img{
	width: 100%;
	position: relative;
	background: url(../img/top_sp.jpg) no-repeat center top;
	background-size: cover;
	height: 290px;
	max-height:320px;
}
}