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

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic UI", "Yu Gothic", "Meiryo",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #222;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {color:#e95b9c;text-decoration: underline;}
a:hover{color:#ed0e74;}
section {padding:0 10px 40px 10px;}
.red {color: #ff0000;}
.blue {color: #0000ff;}
.green {color: #008000;}
.pink {color: #ff1493;}
.txt-18 {font-size: 18px!important;}
.txt-16 {font-size: 16px!important;}
.txt-14 {font-size: 14px!important;}
.mb100{margin-bottom:100px;}
.txt-bold{font-weight: 700;}
.txt-center{text-align: center;}



/*TITLE*/
.top-banner{
	border-top:6px solid #e95b9c;
	border-bottom:6px solid #e95b9c;
margin-bottom:20px;}


/*HEADING*/
#meguro h1 {
   padding: 1rem 2rem;
	color: #fff;
	font-size:26px;
	transform: skew(-15deg);
	background-color:#182987;
	width:50%;
}

#meguro h2 {
    position: relative;
    padding: 1rem;
    outline: 1px solid #FF5ACD;
    outline-offset: -1px;
    color: #353535;
    font-size: 24px;
    font-weight: 700;
	line-height: 180%;
    text-align: center;
}


#meguro h2::before,
#meguro h2::after {
    position: absolute;
    content: '';
}

#meguro h2::before {
    top: 5px;
    right: -10px;
    width: 10px;
    height: 100%;
    background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
    transform: skewY(45deg);
}

#meguro h2::after {
    bottom: -10px;
    left: 5px;
    width: 100%;
    height: 10px;
    background-image: linear-gradient(45deg, #FF5ACD 0%, #FBDA61 100%);
    transform: skewX(45deg);
}

#meguro h3 {
	font-weight: 700;
	line-height:1.6;
  
}
#meguro h4 {
 font-size: 18px;
  font-weight: 500;
line-height:1.6;
}

#meguro h5 {
  font-size: 16px;
  font-weight: 700;
line-height: 1.6;
}

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


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


/*FOOTER*/
footer.f-info{
	background-color: aliceblue;
	padding:20px;
	font-size:14px;
}

/*BUTTON*/
.button {
display: inline-block;
color: #fff;
font-size:18px;
font-weight:700;
text-align: center;
text-decoration: none;
outline: none;
Padding:25px;
background-color: #ff1493;
border-radius: 50px; 
}
.button:hover {
	background-color: #fff;
	border: thin solid #ff1493;
	color: #ff1493;
}

#mdf.button{background-color: #35bbed; border: thin solid #35bbed;}
#mdf.button:hover{color:#35bbed; background-color: #ffffff; border: medium solid #35bbed;}


/*HOW TO*/
.howto_app .howto_txt {
	margin-top: 80px;
}
.howto_app .row-eq-height {
	margin-bottom: 80px;
}
.howto_app h1 {
	margin-bottom: 80px;
}
.howto_app p {
	margin-bottom: 40px;
}

.howto_app img {
	image-rendering: -webkit-optimize-contrast;
}
@media screen and (max-width: 768px)  {
	.howto_app h1 {
		margin-bottom: 40px;
	}

	.howto_app .mt80 {
		margin-top: 80px;
	}
	.howto_app h-100 {

	}

}


.howto h2 {
	color: #e95b9c;
	font-size:22px;
	font-weight: 500!important;
	line-height: 160%;
	padding-bottom:20px;
}
.howto p{font-size:16px;}

/*BOX*/
.box {
	position: relative;
    margin: 2em 0;
    padding: 2em;
    border: solid 3px #35bbed;
	border-radius:0 10px 10px;
	
}
.box .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: #35bbed;
    color: #ffffff;
    border-radius: 5px 5px 0 0;
}
.box p {
    margin: 0; 
    padding: 0;
}
.box ul {
padding-left:10px;
padding-bottom:0;
}

.box ul li{
padding-bottom:10px;
}


.box2 {
	position: relative;
    margin: 2em 0;
    padding: 2em;
    border: solid 3px #e95b9c;
	border-radius:0 10px 10px;
	
}
.box2 .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;
}
.box2 p {
    margin: 0; 
    padding: 0;
}
.box2 ul {
padding-left:10px;
padding-bottom:0;
}

.box2 ul li{
padding-bottom:10px;
}


#app img
{ width:50%;}

.pink-bg {
	color: #222;
	background-color:whitesmoke;
	font-size:22px;
	font-weight: 700;
	line-height: 200%;
	padding:40px;
	border: medium solid #182987;
	border-radius: 10px;
}

#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 10px 20px 10px;}
.top-title{ font-size:20px;}
.sub-title{ font-size:16px !important;}
#meguro h1 {
	font-size:22px;
   padding: 1rem 2rem;
	color: #fff;
	transform: skew(-15deg);
	width:90%;
}
#meguro h2 {
  font-size:18px;
  line-height: 160%;
}
#meguro h3 {font-size:18px;}
#meguro h4 {font-size:18px !important;}
.table-wrap{
	width:100%;
	margin:0;
}
.table-wrap2{
	width:100%;
	margin:20px 0;
}
.ul-wrap{
	width:100%;
	margin:20px 0;
}
.info tr th{
	width:30%;
	padding:10px;
	font-size:14px;
}
.info tr td{
font-size:14px;
padding:10px;
	
}
.info tr td span{
	font-size:12px;
}
.mb100{margin-bottom:50px;}
.product table {font-size:14px!important;}
.menu01{font-size:14px;}
ul{margin-left:0;padding-left:10px;}

#app img
{ width:100%!important;}
#meguru-suma 
{ width:50%!important;}

.pink-bg{font-size:16px!important; padding:20px!important;}
.center-sp{margin: 0 auto;}
.txt-center{text-align: left;}
.hidden-xs{display:block;}

}