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

body {font-family: sans-serif; font-size:14px;}
a {color:#e95b9c;text-decoration: underline;}
a:hover{color:#ed0e74;}
section {padding:0 10px 40px 10px;}
.red {color: #ff0000;}
.blue {color: #00bfff;}
.green {color: #008000;}
.pink {color: #ff1493;}
.mb100{margin-bottom:100px;}
.txt-16{font-size: 16px;}
.txt-18{font-size: 18px;}
.txt-20{font-size: 20px;}
.txt-bold{font-weight: 700;}
ul{list-style: none; margin-left:0;padding-left:10px;}


/*TITLE*/
.top-banner-p{
	border-top:6px solid #00bfff;
	border-bottom:6px solid #00bfff;

}

.top-title{
padding: 2.5rem 0 1.5rem;
    background-image: linear-gradient(90deg, #fff 0% 40%, #ffd700 40% 60%, white 60%);
    background-repeat: no-repeat;
    background-size: 100% 0.2rem;
    background-position: bottom;
    color: #353535;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}


/*HEADING*/
#meguro h2 {
  font-size:22px;
font-weight: 700;
  line-height: 180%;
}

#meguro h3 {
	font-weight: 700;
  
}
#meguro h4 {
  font-weight: 500;
line-height:150%;
}

#meguro h5 {
  font-size: 16px;
  font-weight: 700;
text-align:center;
}

/*TABLE*/
.info{width:100%;}
.info tr th{
	border-collapse: collapse;
    border:1px solid #333;
	width:20%;
	font-size:18px;
	font-weight: 600;
	text-align: center;
	padding:20px;
	background-color: #e6f9ff;	
}
.info tr td{
	border-collapse: collapse;
    border:1px solid #333;
	font-size:18px;
	text-align: left;
	padding:20px;
}


.table-wrap{
	width:90%;
	margin:40px auto;
}


/*FOOTER*/
footer.f-info{
	background-color: aliceblue;
	padding:20px;
	font-size:14px;
}
.ul-wrap{
	width:90%;
	margin:40px auto;
}


/*BUTTON*/
.button {
	display:inline-block;
	padding:20px;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #00bfff;
	border: 2px solid #00bfff;
	border-radius:10px;
	color: #fff;
	font-size:18px;
	font-weight:700;
	margin:20px 0;
	
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	content: '';
	display:inline-block;
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button:hover {
	background-color: #fff;
	border-color: #00bfff;
	color: #00bfff;
	text-decoration: none;
}
.button_pink{
	display:inline-block;
	padding:20px;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #ff1493;
	border: 2px solid #ff1493;
	border-radius:10px;
	color: #fff;
	font-size:18px;
	font-weight:700;
	margin:20px 0;
	
}
.button_pink::before,
.button_pink::after {
	position: absolute;
	z-index: -1;
	content: '';
	display:inline-block;
}
.button_pink,
.button_pink::before,
.button_pink::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button_pink:hover {
	background-color: #fff;
	border-color: #ff1493;
	color: #ff1493;
	text-decoration: none;
}
.button_yellow{
	display:inline-block;
	padding:10px;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #ffd700;
	border: 2px solid #ffd700;
	border-radius:40px;
	color: #333;
	font-size:16px;
	font-weight:700;
	margin:0 0 20px 0;
	
}
.button_yellow::before,
.button_yellow::after {
	position: absolute;
	z-index: -1;
	content: '';
	display:inline-block;
}
.button_yellow,
.button_yellow::before,
.button_yellow::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button_yellow:hover {
	background-color: #fff;
	border-color: #ffd700;
	color: #333;
	text-decoration: none;
}
i.fa-caret-right{padding-right:10px;}
i.fa-caret-down{padding-left:10px;}


.howto h2 {
	color: #ff1493;
	background-color: lavenderblush;
	font-size:22px;
	font-weight: 700;
	line-height: 160%;
	padding:20px;
	border-radius: 10px;
	margin-bottom: 20px;
}
.howto p{font-size:16px;}


.info {
	position: relative;
	margin: 2em 0;
	padding: 2em;
	border: solid 2px #000;
	border-radius:0 10px 10px;

}
.info .box-title {
	position: absolute;
	display: inline-block;
	top: -30px;
	left: -3px;
	padding: 0 18px;
	height: 30px;
	line-height: 30px;
	font-size: 17px;
	font-weight: 500;
	background: #e95b9c;
	color: #ffffff;
	border-radius: 5px 5px 0 0;
}


#pagetop {
display: none;
position: fixed;
bottom: 40px;
right: 20px;
width: 44px;
height: 44px;
border-radius: 22px;
z-index: 10;
transition: background-color 400ms;
background: rgba(255,20,147,0.85) url(img/pagetop.png) 50% 45% no-repeat;
text-indent: 100% !important;
white-space: nowrap;
overflow: hidden;
}


@media screen and (max-width: 768px)  {
section { padding:0 0 20px 0;}
.top-title{ font-size:20px;}
#meguro h2 {
  font-size:18px;
  line-height: 160%;
}
#meguro h3 {font-size:16px;}
#meguro h4 {font-size:16px !important;}
.table-wrap{
	width:100%;
	margin:0;
}
.info tr th{
	width:25%;
	padding:10px;
	font-size:16px;
}
.info tr td{
font-size:16px;
padding:10px;
	}
.ul-wrap{
	width:100%;
	margin:20px 0;
}
.mb100{margin-bottom:50px;}
.button_yellow {
	font-size:16px;
}
}