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

/*ベース*/
body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,select,div,span,label,input,textarea,button,table,td,th,figure,nav,main,img{
	margin: 0;
	padding: 0;
}

html,body{
	-webkit-text-size-adjust:100%;
	overflow-x:hidden;
	width:100%;
}

html{
	font-size:80%;
}

body{
	color:#555555;
	background-color:#F5F5F5;
	margin:0;
	padding:0;
	text-align: justify;
	text-justify: inter-ideograph;
	word-break:break-all;
	word-wrap:break-word;
	font-family: 'Noto Sans JP', sans-serif;
}

h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,select,div,label,input,button,select,option,textarea,table,td,th,figure,nav,main,address{
	font-weight:inherit;
  font-style:normal;
}

a,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,select,div,label,input,button,select,option,textarea,button,table,td,th,figure,nav,main,address,small{
	color:inherit;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
}

*[disabled]{
	opacity:1;
	cursor:auto;
}


table,td,th{
	border-spacing:0;	
}

th{
	text-align:justify;
}

a{
	text-decoration:none;
	outline: none;
}

a img{
	border:0;
}

img,svg{
   vertical-align:bottom;
}

li{
	list-style:none;
}

input[type="submit"],input[type="button"],button,input[type="radio"]+label,input[type="checkbox"]+label,input[type="file"]+label,a{
	cursor:pointer;
}
main,small{
	display:block;
}

/*svgインライン*/
body > svg{
	width:0;
	height:0;
	opacity:0;
	position:fixed;
}

/*テストアイコン*/
.test{
	position:relative;
}
.test::after{
	content:"";
	background:url(../../img/icon_test.svg);
	background-size:60px;
	display:block;
	width:60px;
	height:30px;
	position:absolute;
	top:5px;
	left:-5px;
}

/*リンク等のフォーカス削除*/
a,button,input{
	-webkit-tap-highlight-color: transparent;
}




/*共通*/
/*赤*/
main{
	background-color:#E82042;
	border-bottom:#D8D1C1 1px solid;
}
footer{
	color:#E82042;
}
footer svg{
	fill:#E82042;
}

/*メイン*/
main nav ul{
	display:flex;
}
main nav li a{
	color:#FFFFFF;
	display:block;
	text-align:center;
	box-shadow:1px 1px 4px rgba(0,0,0,.3);
	font-weight:700;
}
.hiroshima{
	background: #f3899b;
	background: linear-gradient(135deg, #f3899b 0%,#f3899b 50%,#f06c82 50%,#f06c82 100%);
}
.yamaguchi{
	background: #82b9e3;
	background: linear-gradient(135deg, #82b9e3 0%,#82b9e3 50%,#63a7dc 51%,#63a7dc 100%);
}

main > div > p{
	display:flex;
  align-items: center;
}
main > div > p svg{
	width:62px;
	height:60px;
	flex:0 0 62px;
	margin-right:20px;
}


/*フッター*/
footer{
	text-align:center;
	padding:30px;
	border-top:#FFFFFF 1px solid;
}

footer small{
	margin-top:10px;
	font-size:.9rem;
}

/*スマホ～タブレット*/
@media screen and (max-width: 849px){
	body{
		line-height:1.8;
	}

	/*赤*/
	h1 svg{
	fill:#E82042;
	}


	
	/*メイン*/
	main{
		padding-top:110px;
	}
	
	main > svg{
		display:none;
	}

	main > div > svg{
		width:120px;
		height:130px;
		display:block;
		position:relative;
		top:-95px;
		margin:0 auto -130px;
	}
	main > div > div{
		background-color:rgba(255,255,255,.9);
		box-shadow:2px 2px 10px rgba(0,0,0,.4);
		text-align:center;
		box-sizing:border-box;
		width:90%;
		max-width:315px;
		margin:0 auto 30px;
		padding:45px 30px 30px 
	}
	
	h1{
		margin:20px 0;
	}
	h1 svg{
		width:210px;
		height:40px;
	}
	
	main nav ul{
    justify-content: center;		
	}
	main nav ul li:not(:first-child){
		margin-left:30px;
	}
	main nav ul a{
		width:95px;
		height:95px;
		line-height:95px;
		border-radius:50%;
		font-size:1.2rem;
	}
	
	main > div > p,
	main small{
		padding:30px;
	}
	main > div > p{
		color:#34495E;
		background-color:#F5F5F5;
		border-top:#D8D1C1 1px solid;
		border-bottom:#D8D1C1 1px solid;
		box-shadow:inset 0 1px #FFFFFF, 0 1px #FFFFFF;
	}
	main > div > p svg{
		fill:#34495E;
	}
	main small{
		color:#FFFFFF;
	}
	
	/*フッター*/
	footer svg{
		width:150px;
		height:22px;
	}
}




/*タブレット以上（下限850px)*/
@media screen and (min-width: 850px){
	html{
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	body{
		line-height:1.7;
	}

	/*メイン*/
	main{
		min-width:1120px;
		min-height:542px;
		overflow:hidden;
		padding:50px 0;
		position:relative;
	}	
	main > svg{
		position:absolute;
		right:-20%;
		top:0;
		fill:#FFFFFF;
		width:1554px;
		height:1150px;
	}
	
	main > div{
		position:relative;
		color:#FFFFFF;
		width:490px;
		margin:0 auto;
		padding:0 600px 0 30px;
	}
	main > div > *:not(:last-child){
		margin-bottom:30px;
	}
	
	main > div > svg{
		width:500px;
		height:542px;
		position:absolute;
		right:30px;
		margin:none;
	}
	main > div > div{
		padding-top:30px;
	}
	
	h1 svg{
		width:490px;
		height:70px;
		fill:#FFFFFF;
		margin:30px 0;
	}
	
	main nav ul{
    justify-content: space-between;
	}
	main nav ul a{
		width:235px;
		height:80px;
		line-height:80px;
		border-radius:4px;
		font-size:1.4rem;
	}
	.hiroshima:hover{
		background: #f3899b;
		background: linear-gradient(135deg, #F5A3B1 0%,#F5A3B1 50%,#F38C9D 50%,#F38C9D 100%);
	}
	.yamaguchi:hover{
		background: #82b9e3;
		background: linear-gradient(135deg, #B1D3ED 0%,#B1D3ED 50%,#9DC8E9 51%,#9DC8E9 100%);
	}
	
	main > div > p svg{
		fill:#FFFFFF;
	}

	/*フッター*/
	footer svg{
		width:300px;
		height:43px;
	}
}