@charset "UTF-8";

/* ----------------------------------------------- CSS Information
 Style Info:     トップページ
 Notes:          
--------------------------------------------------------------- */
/* -------------------
 * コンテンツ
 * ------------------- */
.main-image {
  position: relative;
  line-height: 0;
	overflow: hidden;
}
.main-image:before {
  content: '';
  width: 100%;
  height: 5em;
  display: inline-block;
  position: absolute;
  top: 0;
	left: 0;
  background: linear-gradient(rgba(0,128,203,1), rgba(0,70,155,0));
  mix-blend-mode: multiply;
}
.main-image:after {
  content: '';
  width: 100%;
  height: 5em;
  display: inline-block;
  position: absolute;
  bottom: 0;
	left: 0;
  background: linear-gradient(rgba(0,70,155,0), rgba(0,128,203,1));
  mix-blend-mode: multiply;
}
.main-image .logo {
  width: 16%;
  max-width: 316px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  z-index: 2;
}
.main-image .english-btn {
	width: 10em;
  position: absolute;
	top: 1em;
	right: 11em;
	line-height: 2;
	text-align: center;
}
.main-image .english-btn a {
	display: block;
  color: #FFF;
	background-color: #009FE8;
}
.main-image .english-btn a:before {
	content: '|';
  position: absolute;
	left: 0.5em;
	color: #FFF;
}
.main-image .english-btn a:after {
	content: '|';
	position: absolute;
	right: 0.5em;
	color: #FFF;
}
.main-image .contact-btn {
  width: 10em;
  position: absolute;
	top: 0;
	right: 0em;
	line-height: 2;
	text-align: center;
}
.main-image .contact-btn a {
	padding: 0.5em;
	display: block;
  color: #FFF;
	background-color: #E66446;
}
.sec01 {
  padding: 5% 0;
}
.sec01 .area {
  margin: 0 auto 8%;
  padding: 1em 0;
}
.sec01 .wrap {
  width: 80%;
  max-width: 1225px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sec01 .box01 {
  width: 55%;
  text-align: center;
}
.sec01 .box02 {
  width: 45%;
	border: 1px solid #000;
}
.sec01 .txt {
  font-weight: bold;
}
.sec01 .txt:after {
  content: '';
  width: 1.8em;
  height: 1.8em;
  margin: 0 0 -1.3% 1em;
  display: inline-block;
  background-image: url(../img/top/twitter.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.sec01 .timeline {
  height: 14em;
  overflow-y: auto;
}

.sec01 .rinji-bana{
display: block;
width:70%;
margin: 0 auto 5%;
}

.sec01 .rinji-bana img{


width: 100%;
}

.title {
  width: 70%;
  max-width: 30em;
  margin: -3.7em auto 5%;
  padding: 0.5em 0.5em 0;
  position: relative;
  z-index: 2;
  color: #0080CB;
  font-weight: bold;
  text-align: center;
  border: 1px solid #0080CB;
}
.title .txt01 {
  font-size: 1.5em;
  line-height: 2em;
  letter-spacing: 0.7em;
  text-indent: 0.7em;
}
.title .txt02 {
  font-size: 0.8em;
}
.sec02 {
  border-top: 1px solid #AAA;
  padding: 0 0 8%;
}
.sec02 .area {
  max-width: 2000px;
  margin: 0 auto;
}
.sec02 .wrap {
  width: 100%;
  display: flex;
  /**justify-content: space-around;**/
  column-gap: 1%;
  justify-content: center;
  align-items: center;
}
.sec02 .box01 {
	width: 19%;
  position: relative;
  line-height: 0;
	border-radius: 0.3em;
	overflow: hidden;
}
.sec02 .box02 {
	width: 19%;
  position: relative;
  line-height: 0;
	border-radius: 0.3em;
	overflow: hidden;
}
.sec02 .box02:after {
  content: '';
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
	left: 0;
  background: rgba(0,0,0,0.62);
  mix-blend-mode: multiply;
}
.sec02 .in-box {
  width: 10em;
  height: 10em;
  display: flex;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  border: 2px solid #FFF;
  box-shadow: 0 0 0.3em #00489E;
  border-radius: 0.3em;
  line-height: 1.5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sec02 .box01 .in-box {
  background-color: rgba(255,255,255,0.76);
}
.sec02 .box02 .in-box {
  background-color: rgba(0,0,0,0.62);
}
.sec02 .txt01 {
  text-align: center;
  font-weight: bold;
}
.sec02 .box01 .txt01 {
  color: #00489E;
}
.sec02 .box02 .txt01 {
  color: #FFF;
}
.sec02 .wrap .txt02 {
  position: absolute;
  bottom: 0.5em;
  font-weight: bold;
  color: #00489E;
}
.sec02 .wrap .txt02:after {
  content: '';
  width: 1.8em;
  height: 1.8em;
  margin: 0 0 -0.1em 0.1em;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.7em solid #00489E;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
}
.sec03 {
  margin: 0 auto 15%;
	padding: 2.5% 0;
	background-color: #BFDFF2;
}
.sec03 .area {
  padding: 2.5% 0;
  line-height: 0;
}
.sec03 .wrap {
	height: 21em;
  position: relative;
}
/* バナー画像 上下グラデーション
.sec03 .wrap a:before {
  content: '';
  width: 100%;
  height: 7em;
  display: inline-block;
  position: absolute;
  z-index: 1;
  opacity: 0.6;
  top: 0;
	left: 0;
  background: linear-gradient(rgba(0,128,203,1), rgba(0,70,155,0));
  mix-blend-mode: multiply;
}
.sec03 .wrap a:after {
  content: '';
  width: 100%;
  height: 7em;
  display: inline-block;
  position: absolute;
  opacity: 0.6;
  bottom: 0;
	left: 0;
  background: linear-gradient(rgba(0,70,155,0), rgba(0,128,203,1));
  mix-blend-mode: multiply;
}*/
.sec03 .wrap a {
  display: block;
}
.sec03 .btn {
  width: 70%;
  max-width: 23em;
  padding: 1em 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  z-index: 2;
  color: #00489E;
  border: 2px solid #FFF;
	border-radius: 0.1em;
  background-color: rgba(255,255,255,0.67);
	box-shadow: 0 0 0.3em #00489E;
  font-size: 1.3em;
	font-family: 'Noto Sans JP', sans-serif;
  line-height: 2;
  font-weight: bold;
  text-align: center;
}
.sec03 .more {
  width: 80%;
  max-width: 1225px;
  margin: 0 auto;
  padding: 0 2em 0.1em;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  bottom: 1em;
  left: 50%;
  transform: translateY(-1em) translateX(-50%);
  -webkit- transform: translateY(-1em) translateX(-50%);
  color: #FFF;
  font-size: 1.2em;
	font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  text-align: right;
  line-height: 2;
  border-bottom: 1px solid;
}
.sec04 {
  padding: 0 0 15%;
  border-top: 1px solid #AAA;
}
.sec04 .area {
  width: 80%;
  max-width: 1225px;
  margin: 0 auto 3%;
}
.sec04 .wrap {
  margin: 0 auto 2em;
}
.sec04 .wrap a {
  display: block;
}
.sec04 .box01 {
	padding: 0 2em;
	display: flex;
	justify-content: space-around;
	align-items: baseline;
  box-sizing: border-box;
	border-bottom: 1px solid #AAA;
}
.sec04 .box02 {
  margin: 0 auto 3em;
	padding: 0 2em;
	display: flex;
}
.sec04 .day {
	width: 13%;
	text-align: center;
	color: #909090;
}
.sec04 .headline {
	width: 87%;
	font-size: 1.6em;
	font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
	color: #4D4D4D;
}
.sec04 .txt {
	padding: 0 0 0 13%;
	white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.sec04 .btn {
	width: 14em;
	margin: 0 auto;
	padding: 1em 0;
	text-align: center;
}
.sec04 .btn a {
	padding: 0.5em 0;
	display: block;
	color: #FFF;
	background-color: #00489E;
}
.sec05 {
	padding: 0 0 8%;
  border-top: 1px solid #AAA;
}
.sec05 .area {
	width: 80%;
  max-width: 1225px;
  margin: 0 auto 5%;
}
.sec05 .wrap {
	margin: 0 auto 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 3%;
  /**justify-content: space-between;**/
  align-items: center;
}
.sec05 .banner {
  width: 30%;
  max-width: 403px;
	/**margin: 0 auto 5%;**/
	margin: 0 0 5%;
}
.sec05 .banner a {
	display: block;
	border: 1px solid #808080;
  line-height: 0;
}
/* ================= smartphone ================= */
@media only screen and (max-width:699px) {
.main-image {
	height: 20em;
	position: relative;
}
.main-image img.main-bg {
	height: 100%;
	max-width: none;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
	z-index: -1;
}
.main-image .logo {
  width: 35%;
}
.main-image:before {
  height: 2em;
}
.main-image:after {
  height: 2em;
}
.title {
  width: 70%;
  margin: -3.7em auto 10%;
  border: 1px solid #0080CB;
}
.sec01 {
  padding: 5% 0 15%;
}
.sec01 .wrap {
  width: 95%;
  display: block;
}
.sec01 .box01 {
  width: 100%;
	margin: 0 auto 1em;
}
.sec01 .box02 {
  width: 80%;
  margin: 0 auto;
}
.sec01 .timeline {
  width: 90%;
	margin: 0 auto;
  height: 30em;
}
.sec01 .area {
  margin: 0 auto 16%;
}
.sec02 .wrap {
	width: 98%;
  margin: 0 auto;
  display: block;
}
.sec02 .box01 {
  width: 48%;
	margin: 1%;
  float: left;
}
.sec02 .box02 {
  width: 48%;
	margin: 1%;
  float: left;
}
.sec03 {
  margin: 0 auto 35%;
}
.sec03 .wrap {
	height: 15em;
}
.sec03 .btn {
	width: 80%;
  padding: 0.5em 0;
	font-size: 1.1em;
}
.sec03 .more {
	padding: 0;
  bottom: 0.5em;
}
.sec03 .wrap img {
 position: absolute;
 top:0;
 right: 0;
}
.sec03 .wrap a:after {
  content: '';
  width: 100%;
  height: 7em;
  display: inline-block;
  position: absolute;
  opacity: 0.6;
  bottom: 0;
	left: 0;
  background: linear-gradient(rgba(0,70,155,0), rgba(0,128,203,1));
  mix-blend-mode: multiply;
}
.sec04 {
  padding: 0 0 35%;
}
.sec04 .area {
  width: 95%;
  margin: 0 auto 3%;
}
.sec04 .box01 {
  display: block;
	padding: 0;
}
.sec04 .box02 {
  display: block;
	padding: 0;
}
.sec04 .headline {
	width: 100%;
	font-size: 1.2em;
	white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.sec04 .txt {
  padding: 0;
}
.sec04 .day {
  width: 100%;
  text-align: left;
  color: #909090;
  line-height: 1em;
}
.sec05 .wrap {
  margin: 0 auto 2em;
  display: block;
}
.sec05 .banner {
  width: 100%;
  margin: 0 2% 10%;
}

.sec01 .rinji-bana{
display: block;
width:100%;
margin: 0 auto 5%;
}

}