@charset "UTF-8";

/*===========================================
	 T&T top Original 2019.3
=============================================*/

.pregArea_01 {
  overflow: hidden;
  *zoom: 1;
}
.pregArea_01 h1 .imgIcon {
	height: auto;
	max-width: 100%;
	width: auto;
	margin-right: 0.25em;
	vertical-align: middle;
}
#wrapper .pregArea_01 ul {
	list-style-type: disc;
}
#wrapper .pregArea_01 .device {
	margin-top:20px;
}
#mainCntArea .notice_gray {
    border: 1px solid #CCCCCC;
	border-radius: 15px;
    margin: 1em 0 1em;
    padding: 1em;
	width: 800px;
}
.Overview{
	margin-top:50px;}	
.annotation {
	padding-left:1em;
	text-indent:-1em;
    font-size: 0.9em;
}


/*===========================================
	for mobile
=============================================*/

@media (max-width: 740px) {
	.w545 {
		width: 100%;
	}
	.pregArea_01 .fLeft {
		float: none;
		margin-bottom: 20px;
	}
	.pregArea_01 .fRight {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
	#wrapper .pregArea_01 .device {
		margin-left:0;
	}
	#wrapper .pregArea_01 {
		display:flexbox;
	}
}

@media (max-width: 640px) {
	#mainCntArea .notice_gray {
		width: 100%;
	}
}


/*===========================================
	   whatsnew
=============================================*/

.whatsnew,
.whatsnew * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.whatsnew {
	margin: 30px 15px;
}
.whatsnew h2 {
	margin-bottom: 5px;
}
.whatsnew-list {
	border: solid 1px #b5b5b5;
	height: 10em;
	padding: 5px;
	overflow-x: hidden;
	overflow-y: scroll;
}
.whatsnew dl {
	margin: 0;
	padding: 5px;
}
.whatsnew dl:after {
	clear: both;
	content: " ";
	display: table;
}
.whatsnew dt {
	clear: both;
	float: left;
}
.whatsnew dd {
	float: left;
	padding-left: 1.125em;
}
.whatsnew li {
	margin-bottom: 5px;
	overflow: hidden;
	*zoom: 1;
}
.whatsnew li:after {
	clear: both;
	content: " ";
	display: table;
}
.whatsnew li .day {
	width: 12%;
	float: left;
}
.whatsnew li .txt {
	width: 88%;
	float: left;
}
@media (min-width: 1200px) {
	.whatsnew {
		margin: 30px auto 60px;
		max-width: 1200px;
	}
}
@media (max-width: 768px) {
	.whatsnew li .day,
	.whatsnew li .txt {
		width: 100%;
		float: none;
	}
}

/*===========================================
	   operation flow
=============================================*/

.operation{
	margin-top:50px;}


.operation .step1{
	width:450px;
	height:auto;
	background:#95b3d7;
	margin:20px 0 0 20px;
	padding:15px 15px 0 15px;
}
.operation .step2{
	width:450px;
	height:auto;
	background:#1f497d;
	margin:20px 0 0 20px;
	padding:15px 15px 0 15px;
}
.operation .step1 p{
	text-align:center;
}
.operation .step2 p{
	color:white;
	text-align:center;
}

.operation ul li{
	list-style:disc;
	margin-left:25px;}

.triangle1{
  border-top: 50px solid #95b3d7;
  border-right: 240px solid transparent;
  border-left: 240px solid transparent;
  margin-left:20px;
  width:0;
  height:0;
}

.triangle2{
  border-top: 50px solid #1f497d;
  border-right: 240px solid transparent;
  border-left: 240px solid transparent;
  margin-left:20px;
  width:0;
  height:0;
}

@media (max-width: 500px) {
	.operation .step1{
		width:300px;
		margin:10px 0 0 0;
	}
	.operation .step2{
		width:300px;
		margin:10px 0 0 0;
	}
	.triangle1{
		border-top: 50px solid #95b3d7;
		border-right: 165px solid transparent;
		border-left: 165px solid transparent;
		width:0;
		height:0;
		margin:0;
	}
	.triangle2{
		border-top: 50px solid #1f497d;
		border-right: 165px solid transparent;
		border-left: 165px solid transparent;
		width:0;
		height:0;
		margin:0;
	}
	.operation ul li{
		width:85%;
	}
}

@media (max-width: 350px) {
	.operation .step1{
		width:250px;
	}
	.operation .step2{
		width:250px;
	}
	.triangle1{
		border-top: 50px solid #95b3d7;
		border-right: 140px solid transparent;
		border-left: 140px solid transparent;
	}
	.triangle2{
		border-top: 50px solid #1f497d;
		border-right: 140px solid transparent;
		border-left: 140px solid transparent;
	}
}

/*===========================================
	languageArea
=============================================*/
.languageArea {
  padding: 40px 70px;
  background: #F5F5F5;
  overflow: hidden;
  *zoom: 1;
}
.languageArea ul li {
  width: 160px;
  margin-bottom: 15px;
}

@media (max-width: 740px) {
  .languageArea {
    padding: 30px 20px;
  }
}